Commit Graph

3304 Commits

Author SHA1 Message Date
Tim Abbott 7def3e7832 css: Fix vertical alignment of mention typeahead.
Somehow the previous styling was oddly off-center.
2021-03-04 17:05:04 -08:00
Gaurav Pandey 3dcf97bf27 tooltip: Hide tooltip for touch events on touch-enabled devices.
Fixes #16674.
The commit hides the tooltip for touch events on touch enabled device.

Touch events trigger both click and hover action,
leaving the hover action sustained until next click.

Hence it is better to hide the tooltip to avoid the clutter in UI.
2021-03-04 12:32:16 -08:00
Gaurav Pandey a3561c15d2 invites: Remove odd box-shadow for invite link clipboard svg. 2021-03-03 21:57:41 -08:00
Aryan Shridhar bfefec31f4 Revert "edit_bot: Fixed dropdown username capitalization."
This reverts commit ea02d48e81.
2021-03-03 23:58:50 +05:30
Gaurav Pandey 60c6ba7c3a right-sidebar: Display ellipsis icon by default on touch-based devices.
Hover does not work for touch-based devices like mobile phones.
Hence the icons on the right sidebar do not appear, making the
user unaware of its presence on such devices. The following
media property displays the icon by default for such behaviour.
2021-03-02 12:05:50 -08:00
Gaurav Pandey 56f16ca9dd left-sidebar: Display ellipsis icon by default on touch-based devices.
Hover does not work for touch-based devices like mobile phones.
Hence the the icons does not appear, making the user unaware of its
presence on such devices. The following media property displays the
icon by default for such behaviour.
2021-03-01 15:40:39 -08:00
Suyash Vardhan Mathur d1c24d3f67 api docs: Fix blank line at end of Code Blocks.
Added the missing padding: 0 to remove the blank line in code blocks
as is done in Webapp code blocks CSS. Fixes part of #15967.
2021-02-26 08:14:54 -08:00
Riken Shah e5ad56fa71 keyboard shortcuts: Make keyboard shortcuts modal more responsive.
Some hotkey combinations were overflowing in the keyboard shortcuts
table in smaller width devices.

Fixes part of #16817.
2021-02-26 07:59:15 -08:00
Riken Shah 70bc5ba6f2 settings: Make account settings more responsive.
The textarea in Settings/User Profile was overflowing in
smaller width devices.

This commit fixes that issue by adding appropriate media queries.

Fixes part of #16817.
2021-02-26 07:59:01 -08:00
Anders Kaseorg fa191b9912 Revert "stream-ui: Change view from 2-column to 1-column at width 992px."
This reverts commit 34ada11448.

That commit traded a minor visual glitch for a major usability
regression at my most common browser width (960px).

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-26 07:52:47 -08:00
Aman Agrawal fafbccfcd4 recent_topics: Stop last_msg_time_header::after from overflowing.
We change the text. This is an attempt to make the text space occupied by
the col header of last message timestamp smaller so that
it doesn't overflow to next line in some languages.

Also, add some extra padding.
2021-02-25 17:33:01 -08:00
Aman Agrawal d0a1d95c89 recent_topics: Fix search box not visible after wrapping in safari.
On safari, after search box wraps to next line on smaller widths,
it is not visible due to some flex box default property difference
between chrome and safari. We fix this by resetting default
property.
2021-02-25 17:31:33 -08:00
Aman Agrawal 56aa6673fe recent_topics: Use padding instead of line-height for spacing.
We need to increase a bit of spacing around text in rows at <750px
because row height is reduced after hiding avatars. We use
padding instead of line height so that this plays nice when text
is wrapped.

Note more padding is also required for >750px now because text
can be wrapped now and take more width than avatars.
2021-02-25 17:31:33 -08:00
Aman Agrawal 126b5dc186 recent_topics: Let text in wrap to enforce fix width behaviour.
If we don't allow text to wrap, it overrides the fix width of
the columns.
2021-02-25 17:31:33 -08:00
Aman Agrawal 876616f17b recent_topics: Fix % of space taken by columns.
This stops recent topics from adjusting column widths as new
messages are fetched, resulting in a better user experience.
2021-02-25 17:31:32 -08:00
Aman Agrawal b84bce2bc7 all_messages: Change default icon from home to align-left.
Since All messages narrow is no longer home page for webapp,
we change its icon to align-left which also shows a concept of
interleaved topics / messages.
2021-02-25 17:31:32 -08:00
Aman Agrawal 40d8a79ef4 recent_topics: Fill all vertical space available. 2021-02-25 17:31:32 -08:00
Aman Agrawal ad011272fe recent_topics: Remove top and bottom borders.
Don't show recent topics in a separate box.
2021-02-25 17:31:32 -08:00
Aman Agrawal 1eafb1d8b3 recent_topics: Move from overlay to a narrow-like view.
Recent Topics is no longer an overlay now, but note that it is
also not a typical messages narrow. It can reside between
an overlay and a Filter in the sense that it is dispalyed as
a typical Filter narrow but has properties of an Overlay.

Compose box is not visible in this view as it will be confusing
to many users and hence compose shortcuts have also been disabled.

Keyboard shortcuts that apply on messages have also been disabled.

The remaining shortcuts that apply to a narrow are still accessible
here.
2021-02-25 17:31:32 -08:00
Aman Agrawal 9ed3e47796 recent_topics: Show read topics in a darker shade. 2021-02-25 17:31:32 -08:00
Signior-X 15c4a72ac5 frontend: Fix shifted user invite copy icon
This issue adds the appropriate padding to the
copy_generate_invite_link class. This fixes the copy link icon which
seemed to be shifted when clicked.

Fixes #16868
2021-02-25 17:38:08 -05:00
Signior-X 2aec78e954 frontend: Fix right margin in stream description.
This commits gives a right margin to the stream description
so that it does not collide with the icon on its right and
also become better visually appealing.
2021-02-25 13:53:34 -05:00
aryanshridhar ea02d48e81 edit_bot: Fixed dropdown username capitalization.
Restructured edit_bot to unwrap label tag from the
control group, hence defaulting to original text size.
2021-02-24 13:50:29 -08:00
Tim Abbott 28ac9f941d css: Fix night theme keyboard UI with popovers.
When interacting with popovers in the night theme using the keyboard
UI (e.g. the `i` menu for a message), the background color was
incorrectly white, resulting from the bootstrap `nav > li > a:focus`
rule.  We had already fixed this for `nav > li > a:hover`; we just
need to add `nav > li > a:focus` to the relevant block of CSS rules as
well.

Replaces #17195 and #17353.

Rewritten to use a cleaner solution by tabbott.
2021-02-24 12:21:54 -08:00
Megamind d001916b78
right sidebar: Increase hover opacity of "filter users".
Usually we increase the opacity of an interactable icon on hover, but the search-icon at the top of the 
right sidebar was missing the behavior.

Co-authored-by: ritik <ritikcn05@gmail.com>
2021-02-23 15:30:45 -08:00
Ganesh Pawar 4118279c1a stream-ui: Fix oddly spaced elements in streams tab.
This reverts most of the changes made in commit a5f0379.
2021-02-23 15:17:33 -08:00
Ganesh Pawar 34ada11448 stream-ui: Change view from 2-column to 1-column at width 992px.
This prevents the elements to go on a newline on iPad sized devices.
2021-02-23 15:17:33 -08:00
Anders Kaseorg ba0ee6ddfa dependencies: Upgrade Source Sans Pro font to Source Sans 3.
https://blog.adobe.com/en/2020/11/30/whats-new-in-source-sans-3.html

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-23 14:55:33 -08:00
m-e-l-u-h-a-n 03e4ccbc2d message-view: Increase spacing for lists coming after paragraphs.
Lists that were followed by a paragraph (i.e. our p+ul, p+ol CSS rule)
in messages had negative top margin of -3px.  Adjusting the margin
here is important, because the default styling would result in an
excessive gap that made bulleted lists weirdly far from the previous
paragraph.  See #12113 for background.

However, the -3px negative margin was so large that it reduced spaces
between paragraph and lists, such that there was too little visible
separation between the two.  We fix this by going with a 0px
margin-top instead.

This has been tested for various structures of messages:
1. text + bulleted list
2. bulleted list + unbulleted list(or two lists)
3. only list.

And it looks good in all cases.

Fixes #17284.
2021-02-16 08:56:26 -08:00
Suyash Vardhan Mathur 05928bbdee api docs: Change font size for code and response blocks.
The code blocks and response blocks had small and unreadable font,
because they were using the bootstrap defaults without adjustment for
the size of content on the rest of the page.  Fixes part of
zulip#15967.
2021-02-16 08:22:35 -08:00
Suyash Vardhan Mathur c9c40d4fd2 api docs: Cleaned up CSS for parameter classes.
Deduplicated CSS classes of data types of response and
request parameters in API Documentation to use a single
class.
2021-02-09 10:31:36 -08:00
Suyash Vardhan Mathur 26a81ab3aa api docs: Display data type of responses in API Documentation.
Previously, the data type of responses wasn't displayed in the API
Documentation, even though that OpenAPI data is carefully validated
against the implementation. Here we add a recursive function to
render the data types visibly in API Documentation.
Fixes part of #15967.
2021-02-05 10:41:42 -08:00
Anders Kaseorg 64b78ad992 styles: Use range context queries to eliminate *_max variables.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px.  Use only the *_min bounds for consistency.

This requires queries with strict inequalities to express upper
bounds (width < md_min).  Fortunately, that functionality is provided
by range context queries.  Unfortunately, those are not supported in
all browsers.  Fortunately, we can compile them away using
postcss-media-minmax.  Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug.  Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:

https://github.com/postcss/postcss-media-minmax/pull/28

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-05 09:23:59 -08:00
Aman Agrawal 1b34f689a6 settings: Use sm_max for adjusting settings for small width devices. 2021-01-25 14:49:32 -08:00
Aman Agrawal 65db0aeb98 settings: Use 425px as breakpoint for seperating api key buttons. 2021-01-25 14:49:32 -08:00
Aman Agrawal e4389b7562 settings: Remove dead code.
This code has no effect on the checkbox in settings overlay.
2021-01-25 14:49:32 -08:00
Aman Agrawal b38dc0a48b user_status: Expand to full width on mobile like width devices.
Use 424px as a breakpoint vs 384px.
2021-01-25 14:49:32 -08:00
Aman Agrawal 705fd50e9e feedback_container: Expand to almost full width below 767px.
Remove css clutter.
2021-01-25 14:49:32 -08:00
Aman Agrawal 1374d556da css: Use a min width for main app containers below mm (375px) widths. 2021-01-25 14:49:32 -08:00
Aman Agrawal f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 2021-01-25 14:49:32 -08:00
Aman Agrawal c287377512 css: Replace 575px with it's variable sm-max. 2021-01-25 14:49:32 -08:00
Aman Agrawal d9b60e63cf media_breakpoints: Use ms-min var for 320px. 2021-01-25 14:49:32 -08:00
Aman Agrawal 6fc71194c8 lightbox: Show compact view at 767px instead of 736px.
No regression is possible since are just doing adjustments to
make this view compact at a higher width.
2021-01-25 14:49:32 -08:00
Aman Agrawal e2130b944d compose: Adjust compose box for mobile at 374px vs 370px.
Since the change in breakpoint is minor no regression is seen.
2021-01-25 14:49:32 -08:00
Aman Agrawal 1e56db447c settings: Show bots info at full width at less than 991px.
Since the bots list breaks at 625px with left col of settings
hidden and at  850px with left col of settings visible
without this media query,
having this media query trigger at 991px shouldn't produce
any problems.
2021-01-25 14:49:32 -08:00
Aman Agrawal 89b5245d3c css: Replace 767px with it's variable md-max. 2021-01-25 14:49:32 -08:00
Aman Agrawal 17f34bdfbf rendered_markdown: Use 575px instead of 600px for breakpoint.
This media query changes the how embedded messages is displayed
on small screens. Changing breakpoint to 575px offers similar
experience.
2021-01-25 14:49:32 -08:00
Aman Agrawal 500f02e796 subscriptions_overlay: Justify stream filters at 991px vs 1033px.
This media query aligns filter buttons on tablets. Since tablets
range are usually less than 991px in width, this breakpoint makes
more sense. Also, the filter buttons looks nice between 1033px
and 991px.
2021-01-25 14:49:32 -08:00
Aman Agrawal d71ea084e0 settings: Use 767px as breakpoint for single col mode.
Since we are increasing breakpoint from 750px to 767px, there
is no regression. Visually, no difference is perceived.
2021-01-25 14:49:32 -08:00
Aman Agrawal 3d95078117 settings: Move user avatar below at 991px instead of 953px.
Since we are increasing the breakpoint width, the is no
regression possible.
2021-01-25 14:49:32 -08:00
Aman Agrawal 92cd856848 subscriptions_overlay: Use 991px as breakpoint for smaller devices.
Instead of adjusting the width of settings container at
1130px, we adjust it at 991px which is the standard for smaller
screens. Adjusting it 1200px(xl) didn't make sense, so the
next reasonable breakpoint was used.
2021-01-25 14:49:32 -08:00
Aman Agrawal ac402428ed recent_topics: Use 767px for 750px as breakpoint for hiding columns.
There is no breaking change, just standardizing breakpoints.
2021-01-25 14:49:32 -08:00
Aman Agrawal e404fea055 popovers: Use $md-max=767px for 769px breakpoint.
md == 768px so there si only 1px difference here which is not
noticeable here.
2021-01-25 14:49:32 -08:00
Aman Agrawal a9be2f4067 recent_topics: Expand width at 767px instead of 700px.
This looks nice and doesn't break anything.
2021-01-25 14:49:32 -08:00
Aman Agrawal d074b8b1f0 informational_overlays: Use $md-max=767px for 769px breakpoint.
md == 768px so there si only 1px difference here which is not
noticeable.
2021-01-25 14:49:32 -08:00
Aman Agrawal 67dd54445f drafts: Expand width at 757px instead of 700px.
This is to standardize the media breakpoints.
2021-01-25 14:49:32 -08:00
Aman Agrawal 9e1eb25199 alerts: Reduce width to 80% at 991px (lg-max) instead of 900px.
Since alert-box has size of 900px on large devices, we had to
reduce its size for devices less than 900px. Setting this
breakpoint to 991px, shouldn't break anything.
2021-01-25 14:49:32 -08:00
Aman Agrawal ac09572317 media_query: Use 575px instead of 500px to reduce spacing.
At 575px, we used to reduce spacing for
all components around webapp.

This is basically the standard breakpoint for mobile devices.
2021-01-25 14:49:32 -08:00
Aman Agrawal a55128721b search_pills: Use 575px instead of 500px as breakpoint for mobile.
The changes were not live tested since search pill is not enabled.

However, this should look fine since the properties changed
were not depended upon 500px.
2021-01-25 14:49:32 -08:00
Aman Agrawal ddf5ee9d38 compose: Use 575px instead of 551px as breakpoint for mobile.
This was tested to be working fine. Since display property
doesn't depend upon 551px, no regressions are possible.
2021-01-25 14:49:32 -08:00
Aman Agrawal e941ee4a15 media_query: Use 767px instead of 775px as md breakpoint.
We use 767px for hiding left column.

The components changed here were tested to be working fine.

This change is not likely to introduce any regression as the
calculations in the components here were not dependent upon the
breakpoint being at 775px.
2021-01-25 14:49:32 -08:00
Aman Agrawal 5a8150e34b media_query: Use 1199px instead of 1165px as xl breakpoint.
We use 1199px for hiding right column.

The components changed here were tested to be working fine.

This change is not likely to introduce any regression as the
calculations in the components here were not dependent upon the
breakpoint being at 1165px.
2021-01-25 14:49:32 -08:00
Aman Agrawal 677f5e961a subscriptions: Remove dead code for hiding stream description.
This code was intended to hide the stream description on stream
settings overlay on display <350px; but, the css selector for
should be `.stream-row` instead of `.stream_row`. Anyway, the
overlay looks fine on small devices with stream description.
Hence, we just remove this dead code.
2021-01-25 14:49:32 -08:00
Suyash Vardhan Mathur f4cf5166bb api docs: Display data type of parameters in API documentation.
Previously, the data type of parameters wasn't displayed in the API
Documentation, even though that OpenAPI data is carefully validated
against the implementation.  Here we add a recursive function to
render the data types visibly in the API documentation.

This only covers the request parameters; we'll want to do something
similar for response parameters in a follow-up PR.

Fixes part of #15967.
2021-01-21 15:56:07 -08:00
Aman Agrawal 84a7e9f837 subscriptions_overlay: Show buttons in next line as block at <576px.
When we switch subscription overlay from two column to one
column overlay, we also set stream buttons to show in next line.

575px because it the breakpoint used by bootstrap 4 for small
screens.
2021-01-19 17:49:10 -08:00
Aman Agrawal 9b23e540df message_edit: Stop stream_header_colorblock from overlapping others. 2021-01-17 11:07:32 -08:00
Anders Kaseorg 93101c953f alerts: Prevent icons from spilling out of alerts.
Fixes #16911.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-12-30 07:55:29 -08:00
Aman Agrawal 62d721e859 docs: Remove HipChat migration guide.
As of Feb 15th 2019, Hipchat Cloud and Stride
have reached End Of Life and are no longer
supported by Atlassian. Since it is almost 2 years
now we can remove the migration guides.
2020-12-23 15:43:13 +05:30
Pranav Joglekar 089af801fb
ui: Make the set status modal mobile responsive.
The set status modal to add/remove/update user status was not
visible properly on devices with a small width. This commit fixes
the issue by adding appropriate media queries to the css to make
the modal mobile responsive.

Fixes part of #16817.
2020-12-18 12:45:14 -08:00
Vishnu KS 4b99f9e407 support: Fix styling of plan details.
The vertical allignment of billing method and downgrade plan
went a bit off in 41cb047645

This commit should fix the allignment.
2020-12-17 17:09:20 -08:00
Siddharth Asthana 6f962c1815 support: Add ability to change subdomain of realms. 2020-12-06 00:48:10 -08:00
Vishnu KS bae9dc5f2f billing: Use name selector for overriding the spin button for license input. 2020-11-06 09:59:33 -08:00
Kamal Marhubi 9c176bc0fa markdown: Remove border colour on inline code links
The visual noise from the blue border has bothered me forever and I
finally decided to do something about it. I don't know if this is the
best solution, but I do think it's a lot better than the status quo!
2020-11-05 09:32:05 -08:00
YashRE42 79d077135e navbar: Remove :not() text-overflow selector.
Here we change from using clip to using ellipses on stream name.
2020-11-03 16:54:09 -08:00
YashRE42 af221526f2 navbar: Remove unnecessary :not() selector.
Replace not selector with equivalent properties.
2020-11-03 16:54:09 -08:00
YashRE42 4c0b7f9e9b messsage_view_header: Remove flex set via :not().
This did not server any purpose.
2020-11-03 16:54:09 -08:00
YashRE42 967efc32d2 widgets: Remove tictactoe example widget.
Steve asked me to remove this, since the tictactoe game was always
intended as a proof of concept. Now that we have poll and todo
widgets, the sample code for tictactoe has much less value.

We replace the content and type in test_widgets.py to maintain
coverage.
2020-11-03 14:46:39 -08:00
Aman Agrawal 190af58d18 subscription_settings: Fix subscriber search box width.
These properties were causing the search box to have a very small
width. Removing it returns search box to normal width.
2020-11-02 16:30:57 -08:00
aniketsonu 28aaf24a61 invite: Add Copy-to-Clipboard button for multiuse links.
A convenient copy-to-clipboard button was added in the Invite users to
Zulip modal, to make it slightly more convenient to share the
generated links.

The formatting is extracted to a template to make i18n and variable
substitution simpler.

Tweaked by tabbott significantly to simplify JS, HTML, and CSS.

Fixes #16442.
2020-11-02 15:34:50 -08:00
Aman Agrawal 7d21f574b7 subscriptions_overlay: Increase line height of stream name.
This stop some part of stream name from being hidden.
2020-11-02 12:15:33 -08:00
Aman Agrawal aa5a032087 subscriptions_overlay: Stop button from overflowing out of view.
This media query makes the buttons overflow out of view and are
not visible for large stream names.
2020-11-02 12:13:12 -08:00
Aman Agrawal a144f56a00 compose: Remove breaking css property.
When compose box is open we already set
```
    $(".new_message_textarea").css("min-height", "3em");
```
in compose_actions.js.

So, this property actually reduces the min-height slightly which
hides the topic when it is long enough to span in two lines.
2020-11-02 12:10:36 -08:00
Aman Agrawal a26c0b6584 compose: Remove unused css property.
This property never gets used and is not necessary since it
is overridden by
```
        .button.small {
            font-size: 1em;
            padding: 3px 10px;
        }

```
in compose.css

which looks good enough.
2020-11-02 12:10:36 -08:00
Aman Agrawal e7a5588cb3 drafts: Remove unused css property.
Since width of drafts-container is set to 58% above, this
property never gets used.
2020-11-02 12:09:34 -08:00
Aman Agrawal 93e99d0ebd settings: Remove unused css property.
There is no sidebar-bottom-anchor in our codebase, because it was
removed in 96caebf38f.
2020-11-02 12:07:30 -08:00
Anders Kaseorg b98434682e styles: Convert [readonly] selector to :read-only pseudo-class.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-30 11:46:57 -07:00
Anders Kaseorg 192f1eb0fc styles: Convert [disabled] selectors to :disabled pseudo-class.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-30 11:46:57 -07:00
aryanshridhar c591141d7c popover: Fixed color-picker popover responsiveness.
Color-picker overflows the screen width when an user
attempts to change color of the stream in small devices.

Fixed by making it fullscreen in narrow devices.

Fixes #16477
2020-10-29 16:56:02 -07:00
Anders Kaseorg 72d6ff3c3b docs: Fix more capitalization issues.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-23 11:46:55 -07:00
sahil839 1d5aa2e514 settings_org: Add frontend to change wildcard_mention_policy.
We add dropdown for wildcard_mention_policy in organization
permissions page.
2020-10-22 15:00:27 -07:00
YashRE42 e344ea25f8 landing-page: Rename to landing_page.css. 2020-10-19 11:50:39 -07:00
YashRE42 ab67232904 portico-signin: Rename to portico_signin.css. 2020-10-19 11:50:39 -07:00
YashRE42 7ee3484b7b portico-styles: Rename to portico_styles.css. 2020-10-19 11:50:39 -07:00
YashRE42 51f82ad839 right_sidebar: Rename .css file to right_sidebar.css.
This changes the file name to existing conventions, it does not,
however, change the actual `.right_sidebar` tag used in the
app.
2020-10-18 14:09:47 -07:00
YashRE42 bd72ba76f3 left-sidebar: Rename .css file to left_sidebar.css.
This changes the file name to existing conventions, it does not,
however, change the actual `.left_sidebar` tag used in the
app.
2020-10-18 14:09:47 -07:00
YashRE42 46a74d3e08 informational-overlays: Rename .css file to informational_overlays.
This changes the file name to existing conventions, it does not,
however, change the actual `.informational-overlay` tag used in the
app.
2020-10-18 14:09:47 -07:00
Aman Agrawal 1e5873df9e text-error-css: Use same color as used by bootstrap for text-error. 2020-10-18 14:06:20 -07:00
Aman Agrawal 1849ca41d2 login: Top right align error message.
Fixes the alignment issues and this better indicates the field to
which error message belongs to.
2020-10-18 14:06:20 -07:00
Aman Agrawal 8297121050 Revert "login: Fix alignment of error message in login form."
This reverts commit 6fe82620df.

Reverted since this misaligns other forms which use the same
class.
2020-10-18 14:06:20 -07:00
Sumanth V Rao 264bf1fc2a css: Hide bottom-right resizable box in view-source textarea. 2020-10-08 17:13:50 -07:00
Sumanth V Rao adfe4cacc6 css: Add vertical scrollbar styling for view-source textarea.
This styles the vertical scrollbar similar to the horizontal
one for <pre/> (which can be seen in narrow windows). Strictly
speaking, this change shouldn't go in rendered_markdown.scss, but
placing it there helps unify the two scrollbar stylings rather than
duplicating them.
2020-10-08 17:13:50 -07:00
Sumanth V Rao ab9a011f89 css: Modify button styling to adjust for svg size change.
This builds on the previous commit and adds final touches to
both the button positioning and style.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 792029cbb8 css: Refactor copy_message button to use copy_button_base class styling.
Z-index is added to the base class. This doesn't affect copy_code_button
in any way.

Attributes dropped/changed:
    - background-color
    - Base class on-hover property is now used.
    - height, width, padding is now the base classes.

We can also remove the TODO now.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 26ff6db751 css: Extract copy_button_base from copy_codeblock class.
The base class will contain common styling which is used by both
copy_codeblock and copy_message buttons. This sets us up nicely
for following commit(s) which aims to unify the two button styling.
2020-10-08 17:13:50 -07:00
Aman Agrawal c7d66421f9 sidebars: Fill search boxes to full width.
After our bootstrap upgrade, search boxes were not full width on
when sidebars acted as popovers on small widths.
2020-10-08 17:03:56 -07:00
Aman Agrawal 6fe82620df login: Fix alignment of error message in login form. 2020-10-07 16:18:54 -07:00
Gittenburg 55a67ee7c5 message_edit: Display Formatting button as "Help".
Match the compose change b245e1e49a.
2020-10-02 14:54:14 -07:00
Aman Agrawal ff5d00890c new-style-checkbox: Set to cursor to not-allowed when disabled. 2020-10-01 17:45:11 -07:00
Aman Agrawal f6e42d3c28 msg_edit: Don't show checkbox label in next line. 2020-10-01 17:45:11 -07:00
Aman Agrawal 07bba28889 settings-dropdown: Use bootstrap styling on hover.
For dropdown elements, use bootstrap styling. The styling
was not applied by default from bootstrap since we
use a combination of dropdown + simplebar for this element.
This doesn't match the expected structure of elements by
bootstrap since simplebar inserts elements of its own.

The style is same as in bootstrap v2.3.2 for
.dropdown-menu > li > a.
2020-09-30 17:45:53 -07:00
Sumanth V Rao 918b1ea61d css: Add styling for code_external_link hyperlink.
In case of previews, we tweak the positioning a bit more
to the right.

The previous styling also had the focus-within action
which isn't needed here as hovering over the codeblock
is enough to display both the icons.
2020-09-28 16:04:54 -07:00
Vishnu KS 510efbc1a8 support: Add option to change billing method. 2020-09-28 15:37:49 -07:00
Vishnu KS 3e438538b4 support: Add support for downgrading realm. 2020-09-28 15:37:49 -07:00
Gittenburg b245e1e49a compose: Display Formatting button as "Help".
The Formatting button that opens our Markdown help popover previously
had an "A" as its icon (the Font Awesome icon for font). This commit
changes the link to spell out "Help" to make it more discoverable.
2020-09-25 16:47:44 -07:00
Gittenburg 0c6df114f6 compose: Reorder message action buttons.
Now that they are tab accessible, we should order them by importance.
Previously the order was:

1. Add emoji
2. Formatting
3. Attach files
4. Add video call
5. Preview
6. Drafts

This commit changes the order to:

1. Attach files
2. Preview
3. Add video call
4. Add emoji
5. Drafts
6. Formatting

The "Add emoji" button is moved back because emojis can be more
conveniently entered using the typeahead triggered with ":" or the
emoticon conversions.
2020-09-25 16:47:43 -07:00
Gittenburg 6e95809cc4 emoji_picker: Fix search input length.
This was probably a regression from our upgrade to bootstrap 2.3.2.
2020-09-23 11:33:27 -07:00
sahil839 7525642507 popover: Show normal popover instead of extended profile one for bot owner.
We should show normal popover instead of extended profile one for the bot
owner in bots section of organization settings.

A new function show_user_info_popover is added, as it makes sense to keep
it separated from the function used to open popover for sender of a
message, which uses the message from which the popover is opened.
This added function can further be used for showing popover for
"invited_by" in invites table.
2020-09-22 15:42:53 -07:00
Amitsinghyadav a72e9476ee api_docs: Add fragment references for all parameters.
This makes it convenient to link to a specific parameter accepted by
Zulip API endpoint.
2020-09-21 12:18:10 -07:00
Ryan Rehman d6fce41800 stream edit: Update stream subscription info text.
This changes the success text of the `subscriber_list_add`
form to display the subscribed and already subscribed users
on success. We also display the user profile as a popover.

Previously we would only display the email ids of the already
subscribed users.

Formatting tweaked by tabbott.
2020-09-18 16:53:01 -07:00
Aman Agrawal ef19e4870d css: Don't use `Monaco` font for <code>.
bootstrap sets <code> to use `Monaco` font by default. We don't
want to use this font since some characters are not clearly
readable like `()` appearing as `0`.

Hence, we use Menlo font by default if available.

Since `Monaco` font is only installed in macOS by default, this
mostly affected mac users.
2020-09-18 11:35:13 -07:00
Aman Agrawal 2befc007cf landing-page: Don't transition all li elements.
This looks weird and shouldn't be present in the first place.
2020-09-16 10:29:23 -07:00
Anders Kaseorg a3d26d701e styles: Rename .scss files back to .css.
css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader.  Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.

https://github.com/webpack-contrib/css-loader/issues/1164

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 16:33:28 -07:00
Anders Kaseorg 7492656b92 styles: Reference images through Webpack.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 16:33:28 -07:00
Aman Agrawal 22665414fe landing-page: Fix carousel indicators alignment.
Reset to bootstrap v2.3.2 moved the indicators to top right, we
change it back to its previous location in this commit.
2020-09-02 10:59:22 -07:00
Aman Agrawal 2de98ab6e1 settings: Don't use css classes starting with `icon`.
Fixes #16252.

icon* classes are used by bootstrap for displaying glyphicons.
We removed these classes in our custom version of bootstrap 2.1.1;
but since our reset to v2.3.2, they have been added again and hence
any classes starting with icon* in zulip will have to be renamed.
2020-09-01 10:56:02 -07:00
Priyansh Garg 8dd29f4e99 portico: Improve error messages display on registration page.
Improves the display of error messages on registration page fixing
mis-positioning of error messages and overlapping with other text
in some cases.

Part of: #15750.
2020-08-31 22:12:03 -07:00
Sankalp 437332ff5d
css: Fix horizontal scrolling of markdown table when overflow.
Previously Zulip's markdown tables didn't properly configure the overflow CSS rules
to allow proper scrolling.

Fixes #16205.
2020-08-31 18:44:14 -07:00
Ryan Rehman 16ebf56fd7 ui: Add loading spinner for Move Topic popover.
We display a centered spinner and hide the Submit / Cancel
buttons in the Move Topic modal similar to what is done in
the Deleting messages modal.

This commit also makes a change where we now close the modal
after success/failure response of the second request instead
of the first.
2020-08-31 16:51:49 -07:00
Aman Agrawal 285f36bbfa popovers: Span user profile popover to full width on narrow screens.
bootstrap introduced a max-width attribute to `.popover` when
it was upgraded to v2.3.2. We override the property here to fix this.
2020-08-31 14:01:11 -07:00
Aman Agrawal a6940926cc rendered_markdown: Move 27217fd and 5d0960a to rendered_markdown.
Changes to bootstrap.css made by us after these are not relevant:
d7f9a21 - Reducing z-index of overlay doesn't make sense.
9b740df - some changes were added.
1143ed7 - changes in above commit were moved to a different file.
2020-08-31 14:01:11 -07:00
Aman Agrawal 3138ce11dd scss: Re-apply 04df44f91f.
We move 04df44f91f to zulip.scss
and apply it there.
2020-08-31 14:01:11 -07:00
Aman 65a9fca889 scss: Copy dropdown-menu css to zulip.scss and apply fix.
This commit starts to bring back our changes to bootstrap
files. We try to move these changes to zulip.scss as much
as possible. We are starting with bootstrap.css.

Apply fix in commit 7a3a3be.

Changes before 7a3a3be that
were not to be added. These mostly involve moving files around
and hence are not relevant.

441e429
5e2c493
89ed444
8f1cee0
1490ae1
2020-08-31 14:01:11 -07:00
Sumanth V Rao d9c4181243 css: Display copy_codeblock button during hover only. 2020-08-26 23:20:03 -07:00
Sumanth V Rao 3eddb0dd82 css: Avoid displaying copy_codeblock button in previews.
Having this option in preview feels rather odd. The code here
would either be pasted from elsewhere (in which case it would
be in the clipboard already) or it could be copied from the
writebox just as easily.
2020-08-26 23:20:00 -07:00
Sumanth V Rao 9e5f794133 css: Add styling for copy_codeblock button. 2020-08-26 23:18:05 -07:00
Ryan Rehman 34b420bf59 ui: Add loading indicator for message edits.
This commit hides the "Save" and "Cancel" buttons
after the first click and shows a spinner until a
successful / failed response is received.

We do not allow sending any other message edit
requests during this time frame, similar to how
our inline topic edit ui works.

Fixes #16143.
2020-08-25 17:22:29 -07:00
Priyansh Garg fbe40713ba navbar_alerts: Fix close button position.
Fixes the position of close button in navbar alerts which seemed to
be shifted towards the bottom and wasn't visible completely.
2020-08-25 16:34:58 -07:00
Gittenburg 05e792ec1a compose: Move send button after textarea in DOM.
This restores the Tab + Enter shortcut to send.

We are floating the send button to the right so that it still looks like
before. Instead of moving the button we could have also given every
message control button a tabindex, but these would be cumbersome to
maintain.

Tweaked by tabbott to add a comment recording the reasoning behind
the somewhat unusual CSS here.

Part of #15910.
2020-08-14 15:48:49 -07:00
Anders Kaseorg 768f9f93cd docs: Capitalize Markdown consistently.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-11 10:23:06 -07:00
Anders Kaseorg 56931b68e0 styles: Unprefix appearance property.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-07 15:17:20 -07:00
Anders Kaseorg 483445e3d3 styles: Remove unit from 0 lengths.
Generated by stylelint --fix.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:34:44 -07:00
Anders Kaseorg 6dea671fde styles: Merge duplicate selectors.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:34:44 -07:00
Anders Kaseorg 3572dcc67c styles: Remove shorthand property overrides.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:34:44 -07:00
Anders Kaseorg 725ca116dd styles: Remove duplicate properties.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:34:44 -07:00
Anders Kaseorg 3bab1df0e7 styles: Remove invalid -wekbit-box-align [sic] property.
I’m going to assume that this is not intended to be an optimization
for “WekBit” and can, in fact, be deleted.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:30:45 -07:00
Anders Kaseorg b30c86b1a8 styles: Remove obsolete ::-moz-selection vendor prefix.
This is automatically added back by autoprefixer when necessary.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:30:45 -07:00
Anders Kaseorg 0f78efdbb5 styles: Replace invalid user-drag property with -webkit-user-drag.
Commit abbd8a7f45 (#13112) should have
removed the nonexistent user-drag property rather than the
Webkit-specific -webkit-user-drag property.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:30:45 -07:00
Anders Kaseorg 12dcaed177 styles: Remove obsolete filter: alpha() properties.
This was a workaround for IE < 9.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-06 11:30:45 -07:00
Anders Kaseorg c593a62b50 styles: Enable stylelint function-url-quotes rule.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 16:34:19 -07:00
Anders Kaseorg 18ce4aed8b styles: Enable stylelint font-family-name-quotes rule.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 16:34:19 -07:00
Anders Kaseorg c6ed5c81de styles: Format CSS with Prettier.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-08-04 16:34:19 -07:00
SiddharthVarshney 5d6df3dc01 css: Use SCSS nesting for `.carousel-indicators`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 7f2c5a7015 css: Use SCSS nesting for `.carousel-indicators li`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 7af8b7ff6c css: Use SCSS nesting for `.tour .carousel-control`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 1531e38bc2 css: Use SCSS nesting for `.tour .carousel-inner .call-to-action`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney d0d4a066d1 css: Use SCSS nesting for `.tour .carousel-inner .other-resources`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 26d1df58f7 css: Use SCSS nesting for `.tour .carousel-inner .other-resources .other-resources-section`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney a57d979a46 css: Use SCSS nesting for `.tour .carousel-inner .comparison-slack img`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 9a67565c12 css: Use SCSS nesting for `.tour .carousel-inner img`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney fdf893c0af css: Use SCSS nesting for `.tour .carousel-inner .zulip-slack-comparison`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 8487110cca css: Reorder css for `.tour .carousel-inner .zulip-slack-comparison .caption`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney e91d3664c3 css: Use SCSS nesting for `.tour .carousel-inner .zulip-slack-comparison img`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney b05031530d css: Reorder css for `.tour .carousel-inner .zulip-slack-comparison img`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney e8a516aa4d css: Use SCSS nesting for `.tour .carousel-inner .start-button`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney d3208c61d7 css: Use SCSS nesting for `.carousel.carousel-fade .carousel-inner`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney a8c8aae6f5 css: Use SCSS nesting for `.carousel.carousel-fade .carousel-inner .item`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney bfb3e86eab css: Use SCSS nesting for `.carousel.carousel-fade .carousel-inner .item.active`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 6371fe7b37 css: Use SCSS nesting for `.portico-landing.hello .open-source`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 0e47e2bd2a css: Merge `.portico-landing.hello .open-source img` css. 2020-08-04 16:24:12 -07:00
SiddharthVarshney b7216af233 css: Use SCSS nesting for `.portico-landing.hello .features`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 4e20923421 css: Use SCSS nesting for `.portico-landing.hello .features .col-2`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 7f5f61267e css: Use SCSS nesting for `.portico-landing.hello .screen`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney ba4709b000 css: Use SCSS nesting for `.portico-landing.hello .screen.hero-screen`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 1b5138d546 css: Use SCSS nesting for `.screen`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney db3530d984 css: Use SCSS nesting for `.screen .message-feed`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 9b2b5ef3c2 css: Use SCSS nesting for `.screen .center-page`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 605431d187 css: Use SCSS nesting for `.screen .top`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney 2d8391608f css: Use SCSS nesting for `.screen .col-4 .action-block`. 2020-08-04 16:24:12 -07:00
SiddharthVarshney af09b49ae7 css: Use SCSS nesting for `.screen .line`. 2020-08-04 16:24:12 -07:00
Gittenburg 4cd23103db message feed: Make message controls more accessible.
We already have single-key shortcuts for all message controls but Zulip
should be usable from the keyboard without having to learn a bunch of
Zulip-specific keyboard shortcuts.
2020-07-30 16:53:00 -07:00
YashRE42 b4891a5841 navbar: Rename tab_bar to message_view_header.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.

However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base.

We purged tab_list in 1267caf5009118875f47fdafe312880af08024e1.

This commit purges tab_bar, it includes:
- A blanket search and replace of tab_bar with message_view_header.
- Splitting a single line comment in
  tab_bar.js / message_view_header.js.
- The renaming of tab_bar.js to message_view_header.js.
- The renaming of tab_bar.hbs to message_view_header.hbs.
- A blanket search and replace of tab_data with
  message_view_header_data.
- Replacing the single occurrence of tabbar with message_view_header
  (it was within a comment.)
2020-07-30 16:23:13 -07:00
Anders Kaseorg efcba21100 styles: Reorder rule to work around weird postcss-nested bug.
For mysterious reasons, this avoids the following message printed by
webpack on a cold cache after upgrading postcss-nested from 4.2.1 to
4.2.2:

Ignoring local source map at "/srv/zulip/<no source>" as resource is missing.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-30 11:20:03 -07:00
Gittenburg ccaab2d471 docs: Restore link focus outline in sidebar.
Not having a focus outline is very bad for accessibilty.
Browsers have it by default but we completely disabled it for links in
the sidebar in 9955580251.

Showing the outline when selecting a page in the sidebar can be
distracting, so we hide the outline for the highlighted sidebar link.
Since every focusable element however should have a focus outline, we
make the highlighted link unfocusable by setting tabindex=-1 (which also
makes sense since the link to the current page doesn't do anything
anyway).

Part of #15948.
2020-07-29 11:40:39 -07:00
Priyansh Garg c752f955de registration: Improve registration form.
Improved markup of help-text.
Showing Email as plain-text instead of disabled input.
Changed page heading to 'Create your organization' in realm creation form
and 'Create your account' in normal signup form.
Grouped org settings and user settings with fieldsets.
Reduced space between Password field and Password strength bar.

Also, updated the corresponding test cases.

Partially Fixes: #15750.
2020-07-28 17:07:25 -07:00
Aman Agrawal b34d46e00b css: Rename #home id to #message_feed_container. 2020-07-28 16:33:32 -07:00
Gittenburg 253ae8ee51 css: Remove hover effect over active sub filter.
Previously when hovering over a selected topic in the left sidebar
a barely different hover color was employed (and overriden in the dark
mode). This resulted in a small UX issue because after selecting a topic
in the sidebar it should immediately be colored as such (and not just
after moving the mouse cursor away).
2020-07-28 15:30:54 -07:00
Gittenburg 12fe4301e5 css: Unify sidebar hover effects.
Previously the left sidebar used a darker hover background than the
right sidebar, presumably to stand out more when hovering over an active
filter (which have a blue background in the light theme).  This can be
more elegantly solved by using a transparent hover background.
2020-07-28 15:30:54 -07:00
Gittenburg 2367d56f74 integrations: Fix the search input autofocus.
There were two problems preventing the autofocus:

* The focus was triggered at the wrong time.
* transition: all; affected the visibility, making browsers
  abort the focus since the input was still hidden.
2020-07-28 15:17:00 -07:00
Vishnu KS 5b0b1efb15 support: Add functionality to approve sponsorship requests.
This should make it much easier to process these requests.
2020-07-24 17:55:38 -07:00
Vishnu KS 1a1396d07e support: Show customer plan details in support page. 2020-07-24 17:37:41 -07:00
Gittenburg 02485441fd message_edit: Fix invisible delete spinner.
Introduced in 953d475274.
2020-07-23 10:24:15 -07:00
SiddharthVarshney 67cee7c8f9 css: Use SCSS nesting for `.faqs`. 2020-07-22 16:58:14 -07:00
SiddharthVarshney ba36b99cd2 css: Use SCSS nesting for `.faqs .faq`. 2020-07-22 16:58:14 -07:00
SiddharthVarshney 4d2593a6bf css: Use SCSS nesting for `.faqs header`. 2020-07-22 16:58:14 -07:00
SiddharthVarshney f28c729707 css: Use SCSS nesting for `.compare`. 2020-07-22 16:58:14 -07:00
SiddharthVarshney 04bcab0f4c css: Use SCSS nesting for `.compare .terms`. 2020-07-22 16:58:13 -07:00
SiddharthVarshney 04a49fc402 css: Use SCSS nesting for `.compare tbody tr`. 2020-07-22 16:58:13 -07:00
SiddharthVarshney fb1a593281 css: Use SCSS nesting for `.compare tbody tr td`. 2020-07-22 16:58:13 -07:00
SiddharthVarshney 4c0a4d4cef css: Use SCSS nesting for `.compare thread`. 2020-07-22 16:58:13 -07:00
SiddharthVarshney 457023dde6 css: Use SCSS nesting for `.compare thread th`. 2020-07-22 16:58:13 -07:00
SiddharthVarshney 456c0b78e0 css: Use SCSS nesting for `.compare table`. 2020-07-22 16:58:13 -07:00
SiddharthVarshney f1c70be50a css: Use SCSS nesting for `.compare table thead th`. 2020-07-22 16:58:13 -07:00
jagansivam28 dac8f4f20f upload widget: Realign upload widget text to center. 2020-07-21 16:19:21 -07:00
jagansivam28 5f874a51f7 upload widget: Rename image upload widget upload text CSS class.
Previously, image upload widget delete text CSS class name was
`settings-page-upload-text`.
We can change the CSS class name to `image-upload-text`
so that the name can be more generic.
2020-07-21 16:19:21 -07:00
jagansivam28 ad0ff10598 upload widget: Rename image upload widget delete text CSS class.
Previously, image upload widget delete text CSS class name was
`settings-page-delete-text`.
We can change the CSS class name to `image-delete-text`
so that the name can be more generic.
2020-07-21 16:19:21 -07:00
jagansivam28 90cb72b103 upload widget: Rename image upload widget delete button CSS class.
Previously, image upload widget delete button CSS class name was
`settings-page-delete-button`.
We can change the CSS class name to `image-delete-button`
so that the name can be more generic.
2020-07-21 16:19:20 -07:00
jagansivam28 d1b0a12c2d upload widget: Rename image upload widget background css class. 2020-07-21 16:13:24 -07:00
jagansivam28 1702f7f802 upload widget: Change image upload widget CSS class name.
Previously, image upload widget CSS class name was
`avatar-icon-logo-settings`  it is not relevant to the widget so
we can change the CSS class name to `image_upload_widget`
so that the name can be more generic.
2020-07-21 16:13:23 -07:00
SiddharthVarshney fb3484df52 stream-settings: Change checkbox UI.
These checkboxes will now be more consistent
in design as we have in other part of the UI.

e.preventDefault() is added inside the
stream_is_muted_clicked function will disable
the default checkbox and make sure click event
come from only <span> part of the checkbox.
2020-07-21 13:27:21 -07:00
SiddharthVarshney a179648f0b compose: Change style of `Press Enter to send` checkbox.
This checkbox style will now be more consistent
with checkboxes used in settings modal.
2020-07-21 13:27:21 -07:00
Anders Kaseorg c2f9db4602 logo: Update Zulip logo.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-16 01:37:08 -07:00
Tim Abbott 4f9f6b18e7 css: Fix recipient bar stream hover text color in night theme.
It's unclear what the purpose of this logic was, but testing confirms
that the text color is as expected without this in the day theme (so
it's likely a relic of an old design) and removing it fixes the hover
text being overridden to white in the night theme.
2020-07-16 01:14:03 -07:00
Aman Agrawal ddef014eea recent_topics: Patch colors.
Don't allow bootstrap to override row hover colors.
Show unread topics in same color as others.
2020-07-15 23:57:58 -07:00
YashRE42 78d511fd03 navbar: Clean up implementation of tab_bar.narrow_description hover.
This handler adds a neat little effect whereby hovering over the
clickable region to open the navbar triggers the search_icon hover
effect and is a neat little visual cue about what happens onClick.

The previous implementation was slightly messy because it fetched the
color and applied it via ".css(". This commit cleans it up by creating
and using the class "search_icon_hover_highlight" instead. We also
make the selectors more specific, ensuring they target children of
"#tab_bar", this was so because it was reasonable to expect someone to
define eg `search_closed` elsewhere and we wanted to prevent bugs when
that happened.
2020-07-15 18:56:06 -07:00
YashRE42 b554333421 night_mode: Fix search_icon hover regression.
In 9046fc1032 we updated the navbar.html
file so that our css selectors did not override each other and cause
annoying problems.

Unfortunately this caused a regression in night mode where the
search_icon didn't have the correct hover effect.

This fixes the regression by adding the selectors.
2020-07-15 18:56:06 -07:00
Gittenburg 797fb00791 styles: Hide focus outline for active links.
We still want it everywhere for accessibility.
2020-07-15 12:37:27 -07:00
Tim Abbott 5150e1f8cf css: Limit recent focus handler change to popovers.
In 9648e64d23, we added a clear outline
around focused link elements in popovers.

This was a good fix for popovers, but it's distracting for the
experience of clicking links in the sidebars and message feed.
2020-07-15 12:12:01 -07:00
Aman Agrawal c1b047b0d1 recent_topics: Use simplebar for scrolling. 2020-07-15 10:16:56 -07:00
Aman Agrawal 57b6f9179b settings: Fix simplebar scrollbar in org settings dropdown.
This commit fixes the dropdown_list_widget to use simplebar for
scrolling.

It was not being used because data-simplebar should not be inserted
to the element being rerendered. This commit adds a new element
wrapping 'dropdown-list-body' which was being rerendered and
data-simplebar is added to that new element 'dropdown-list-wrapper'.

Also, there should always be a max-height property on data-simplebar
element and it is also added in this commit.

There is also a change to set margin of 10px only on the first div
element and which is direct children of organization-settings-parent
element. This is correct because we only want margin to add some space
between the heading of subsection and the first setting of that
subsection. Previously, the margin was being added to first div of all
the other child containers also and this was adding unnecessary margin
to the first div element of different simplebar containers.
2020-07-15 10:16:56 -07:00
Aman Agrawal c4bbdf040e recent_topics: Fix search clear icon overflowing in next line.
Sometimes, the clear icon overflows on the next line on specific
widths. This makes sure it never happens by wrapping them in a
block.
2020-07-15 10:00:52 -07:00
Aman Agrawal d39b969c64 recent_topics: Add background color to avatars extra count. 2020-07-15 10:00:52 -07:00
Aman Agrawal 71cae3370c recent_topics: Hide participants and last msg time on <750px width.
This ensures the UI experience on <750px width doesn't look
like too many things packed in a small space.
2020-07-15 10:00:51 -07:00
Aman Agrawal e7a65fa688 recent_topics: Show action buttons next to topic.
We remove the action column and show action buttons next to topic
after unread count (if present). This save us a lot of extra space
on small window sizes.
2020-07-15 09:59:37 -07:00
Aman Agrawal 1ee09799e6 recent_topics: Don't wrap last message header and stream names. 2020-07-15 09:59:37 -07:00
Aman Agrawal 8951f77e5d recent_topics: Show read topics in a darker shade. 2020-07-15 09:59:37 -07:00
Gittenburg 9648e64d23 styles: Make focus outline work reliably.
For a:focus Bootstrap sets the following rules:

    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;

Firefox does not know -webkit-focus-ring-color and falls back to the
previous rule, making the outline invisible in darkmode.

Chromium has a bug[1] that makes outline: auto invisible when focussing
elements programmatically (which we do for the up & down arrow keys).

[1]: https://bugs.chromium.org/p/chromium/issues/detail?id=1105822

Fixes #15768.
2020-07-15 09:57:19 -07:00
Gittenburg 953d475274 settings: Fix saving indicator glitch.
jQuery's fadeOut() sets display: none using inline CSS.
This was overriden by .alert-notification since it used !important
to override the display: block set in loading.js.  Removing the latter
allows us to remove the !important, and doesn't seem to break anything.

Fixes #15759.
2020-07-14 16:29:39 -07:00
YashRE42 75cfd886b7 navbar: Fix disappearing left border when search opens.
Previously, we were experiencing a bug that caused the left border of
the searchbox/tab_bar to disappear when the searchbox was opened. This
bug was a result of the following changes:
- 4cdd7aed2b accidentally added this line
  as right: 2; instead of right: 2px;
- 46c966576d fixed this line to be
  right: 2px; but caused the regression.

This commit fixes the bug by deleting this line.
2020-07-14 00:37:40 -07:00
SiddharthVarshney 972a1019cf message_controls: Replace chevron-down with ellipsis-v icon.
After migrating chevron-down with ellipsis for
sidebar-menu, this commit will do the same for
message narrow for consistency.
2020-07-13 16:12:26 -07:00
SiddharthVarshney 1ea9e2841c message_controls: Make click area for icons more uniform.
Previously user have to click pixel perfect on the message controls
icons to achieve the click action.

This commit will uniformly increases the click target
area for the icons.

Tweaked by tabbott to avoid some weird glitches.
2020-07-13 16:12:06 -07:00
SiddharthVarshney d0fd0cae3f message-controls: Use <i> tag for starred message icon.
Throughout the codebase we use <i> tag for icons.
This commit will add <i> tag inside the starred message
div and fa classes are now used with this <i> tag.

The starred message div is now consistent with other
message_controls divs.

Tweaked by tabbott to use the name star_container for better
readability.
2020-07-13 15:59:12 -07:00
YashRE42 ae7ff04fe6 navbar: Purge tab_list label from code base.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.

However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base.

It would have been nicer if we could simply purge tab_bar from the
codebase and rename "#tab_list" so that we have an anchor and wrapper
structure in the html, but dropping the float: left on tab_bar causes
some confusing problems such as causing the horizontal border to
disappear and the search_box to shift out of its intended position and
so its simpler to get rid of tab_list from our code base first.

This commit:
- Removes the #tab_list wrapper div from tab_bar.hbs.
- Removes any #tab_list selectors from night_mode.scss so that they
  simply target based on "#tab_bar" instead of "#tab_bar #tab_list".
- Removes tab_list selectors from zulip.scss, so that #tab_list
  attributes now apply to the #tab_bar, in the process we drop the
  duplicated width property and reorder the attributes.
- Replaces all mention of #tab_list with #tab_bar in JS files.
2020-07-13 15:39:36 -07:00
YashRE42 632f62c8b6 navbar: Remove padding-top from #tab_bar CSS because it defaults to 0.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.

However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.
2020-07-13 15:39:36 -07:00
YashRE42 a050061494 navbar: Drop letter spacing from #tab_bar in CSS.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.

However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.

The letter-spacing attribute was set to its default value and so we
remove it and rely on the default.
2020-07-13 15:39:36 -07:00
YashRE42 f0882e8539 navbar: Remove unnecessary overflow attributes from #tab_bar CSS.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.

However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.

Currently the #tab_bar is just a container for the #tab_list and the
 #tab_list handles the overflow attributes and so these do not serve
any purpose.
2020-07-13 15:39:36 -07:00
YashRE42 e4f1dfe80b navbar: Remove height attribute from #tab_bar CSS.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.

However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.

We have the same selector within #tab_list and the duplication is
unnecessary.
2020-07-13 15:39:36 -07:00
YashRE42 437b9a1a90 navbar: Refactor >:nth-last-child(2) style to use scss nesting. 2020-07-13 15:39:36 -07:00
YashRE42 87c9d527ef navbar: Add comment in scss explaining the nth-last-child(2).
Ideally we would not be relying on something that requires a 4 line
comment, and also makes it harder to add more static elements at the
end of the navbar, but this block should be acceptable for now.

One alternate would be a "grow-1" class or similar but we might need
to think that through.
2020-07-13 15:39:36 -07:00
Gittenburg 53c66fd9c4 message_header: Fix date alignment in PMs.
My previous message_header fix
0b4568d249
accidentally changed the alignment of dates in private messages (so that
it was inconsistent to the alignment in other narrows).
2020-07-13 13:26:54 -07:00
Aman Agrawal 46c966576d scss: Fix broken rules. 2020-07-13 10:46:34 +05:30
Gittenburg 0b4568d249 message_header: Fix overlap on mobile with flex.
Previously .recipient_row_date was positioned absolutely, allowing it to
overlap with the topic name on narrow screens. This can be solved by
using flexbox. To implement the empty space between the bar controls and
the date on wider screens we move the date outside of the bar controls
(which also makes more sense semantically since the date isn't a
control).

Fixes #15501.
2020-07-09 13:13:38 -07:00
Aman Agrawal 18bebbf290 recent_topics: Set correct container as scrolling container.
This fixes the bug of extra topics not being rendered on scrolling.
list_render uses `max-height` to determine which container is being
scrolled upon. Set the `max-height` on the scrolling container of
recent topics to help list_render identify it.
2020-07-08 17:51:27 -07:00
Gittenburg 5bb10036b5 emoji_picker: Allow selecting multiple while holding Shift.
We detect shift with event.shiftKey so we need to pass the event around.

Fixes #8465.
2020-07-08 13:25:49 -07:00
Rohitt Vashishtha 912e372c4e markdown: Remove !avatar() and !gravatar() syntax.
This particular commit has been a long time coming. For reference,
!avatar(email) was an undocumented syntax that simply rendered an
inline 50px avatar for a user in a message, essentially allowing
you to create a user pill like:

`!avatar(alice@example.com) Alice: hey!`

---

Reimplementation

If we decide to reimplement this or a similar feature in the future,
we could use something like `<avatar:userid>` syntax which is more
in line with creating links in markdown. Even then, it would not be
a good idea to add this instead of supporting inline images directly.

Since any usecases of such a syntax are in automation, we do not need
to make it userfriendly and something like the following is a better
implementation that doesn't need a custom syntax:

`![avatar for Alice](/avatar/1234?s=50) Alice: hey!`

---

History

We initially added this syntax back in 2012 and it was 'deprecated'
from the get go. Here's what the original commit had to say about
the new syntax:

> We'll use this internally for the commit bot.  We might eventually
> disable it for external users.

We eventually did start using this for our github integrations in 2013
but since then, those integrations have been neglected in favor of
our GitHub webhooks which do not use this syntax.

When we copied `!gravatar` to add the `!avatar` syntax, we also noted
that we want to deprecate the `!gravatar` syntax entirely - in 2013!

Since then, we haven't advertised either of these syntaxes anywhere
in our docs, and the only two places where this syntax remains is
our game bots that could easily do without these, and the git commit
integration that we have deprecated anyway.

We do not have any evidence of someone asking about this syntax on
chat.zulip.org when developing an integration and rightfully so- only
the people who work on Zulip (and specifically, markdown) are likely
to stumble upon it and try it out.

This is also the only peice of code due to which we had to look up
emails -> userid mapping in our backend markdown. By removing this,
we entirely remove the backend markdown's dependency on user emails
to render messages.

---

Relevant commits:

- Oct 2012, Initial commit        c31462c278
- Nov 2013, Update commit bot     968c393826
- Nov 2013, Add avatar syntax     761c0a0266
- Sep 2017, Avoid email use       c3032a7fe8
- Apr 2019, Remove from webhook   674fcfcce1
2020-07-07 10:39:44 -07:00
Aman Agrawal c947be5411 msg_edit_form: Show checkboxes in separate lines if present. 2020-07-06 12:38:58 -07:00
jagansivam28 9164247733 settings CSS: Remove unwanted CSS in `settings.scss`.
When we extract common HTML template (`image_upload_widget.hbs` )
for user avatar, realm day/night logo and  realm icon widget's
lot of new CSS are created to match image_upload_widget.hbs and
old CSS are preserved in `settings.scss`. This commit removes all
unwanted or unused CSS in `settings.scss`.
2020-07-03 17:32:28 -07:00
Gittenburg 3a973b15ee settings: Fix modal out of screen on mobile.
For the email and full name modals we simply change width to max-width.

The password modal used a flex-row class for no apparent reason,
the class wasn't used anywhere else and removing it fixes the UI bug.

Fixes #15311.
2020-07-02 13:47:26 -07:00
Vishnu KS 4c6350fa4b billing: Add option to request a sponsorship in /upgrade. 2020-07-01 16:45:38 -07:00
SiddharthVarshney aefd8f0de2 navbar: Fix UI bugs in right column of nav header.
Fixes the click target for the gear icon by providing
a proper rectangular area around it.

Minor UI adjustments of gear icon and expanded
navbar-search for small size devices.

Fixes: #15222.
2020-06-30 16:51:55 -07:00
jagansivam28 9258f54aea CSS: Extract image_upload_widget.scss with all related upload widget CSS.
Since we had extracted `image_upload_widget.hbs` HTML for
image upload widget's like user avatar, realm logo, realm icon
we can also extract  `image_upload_widget.scss` SCSS file
from settings.scss file with all the CSS related
to image upload widget's.
This change will also help us to keep `settings.scss` cleaner.
2020-06-30 10:16:33 -07:00