This change was motivated by the addition of status emoji to the buddy
list. Previously there was no spacing between the status emoji and the
unread count, and as such, this commit adds a left margin to the
unread count.
The above change has an additional consequence, long user names such
as "Othello, the Moor of Venice" get truncated with ellipses, instead
of reaching to the edge of the unread counts (as they previously
would).
Currently the emoji_status set by the user is only seen in the buddy
list, it would be useful to show the emoji_status in other places as
well.
As such this commit does the prep work of extracting a template which
will be used in all places that need to show the status emoji.
With refactor and minor edits by Yash RE.
Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>
Clicking the entire userlist_header opens the user filter, however,
previously only hovering over the user_filter_icon would cause a
highlight effect. This commit changes the behaviour so that hovering
over the userlist_header would also cause the same highlight effect on
user_filter_icon.
In this commit, we update the UI to:
* Display emoji on the buddy list (right side sidebar).
* Display the emoji picker on the set status overlay.
It also updates the `z-index` of
`#set_user_status_modal`, which was changed from 105
to 1050 in 166bfa4cf8. We change it back to 105, so
emoji-popover can be visible on top of the
`#set_user_status_modal`.
We also remove the `tabindex` property from the
`#set_user_status_modal` so it can allow keyboard
events for emoji popover.
This avoids slightly glitchy looking behavior in certain scroll
positions where there just isn't enough space above link to make it
look like it's top of the other element.
The keyboard-shortcuts icon currently has a fix position
causing design related bugs such as overlapping with userlist
in the sidebar.
The fix wraps the invite-more-users link and keyboard icon inside
a div with display property as flex instead of just using the anchor
tags inside the side-bar items.
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.
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>
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>
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.
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.
YashRE42
Tim Abbott
Aman Agrawal
AnushaNathRoy
Anders Kaseorg
Riken Shah
Gaurav Pandey
Megamind