While the 2px value that we had previously chosen looked alright for
most emoji (😀, 😃, etc) some emoji such as 🐙
used more of the width available to them and as such still looked too
close to the user name. As such this commit bumps the value to 3px
(4px was a bit too much space).
We render a login button for images that failed to load for
spectators. The image failed to load most likely due to being
rate limited by the server.
Fixes#19840
Make `compose_control_menu_wrapper` clickable and allow tab focus
on it. Disable tab focus on `compose_control_menu` icon. Fix outline
for `compose_control_menu_wrapper`.
Extend out custom outline property to all `[role="button"]` elements.
The most notable change here is that when you are adding
subscribers to a stream as part of creating the stream,
you can now use the same essential pill-based UI for
adding users as we do when you edit subscribers for an
existing stream.
We don't try to exactly mimic the edit-stream UI or
implementation, since when you are adding subscribers
during create-stream, we are just updating a list in
memory, whereas in the edit-stream UI, we immediately
send info to the server.
Fixes#20499
Previously, this had different hover behavior from the adjacent
elements, which seems like a bug.
The CSS for this component is shared with Recent Topics; we migrate
the styling for on_hover_topic_read for consistency.
Fixes#21273.
Make the unread marker lines at the side of messages continuous by
adding "height: 100%" to ".unread-marker".
This provides a nicer visual experience by not highlighting the
boundaries between messages. (One can see that information using the
timestamps or by moving the selection cursor, where appropriate).
Fixes#20981.
Notifies user when messages are not being marked as read through a
banner that lets them mark all messages in the narrow as read. Note
that the banner is only displayed if the user's actions, like
scrolling, would've actually marked the messages as read.
This avoids distracting the user when viewing a thread they've already
read.
tabbott has verified that if new messages come in, the banner will reappear.
Fixes: #18768.
Show/hide scroll to bottom button when the last message is
not visible in the current scroll position.
We adjust the bottom offset of the button based on compose box
height.
Fixes#19862
We save the preferred theme in localstorage so that user doesn't
have to re-select the theme on every reload. Users on slow
computers might see flash of a theme change, if it happens.
This change was not aimed at popovers that use tippy. Since
popovers use light theme and tooltips don't, we use this
`not[data-theme]` selector to exclude popovers from being
affected by this change.
In the topic changing UI, the 'Change later messages to this topic'
and other options in the drop down were cut off when selected in some
languages like Russian.
Make the selection box width adjust appropriately according to the
length of the text, and also place it on its own line unconditionally.
users.
With tweaks by tabbott to use the same approach we already use in the
"Move topic" modal to have the bottom margin for the color block match
that of the dropdown_list_widget itself, of having them share CSS.
Fixes#19739.
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>
The content which is scrollable is moved left by the width of the
scrollbar when scrollbar is visible. The navbar, floating recipient bar
and composebox doesn't move. We reduce their width by scrollbar width
to adjust for the reduced width of the scrollable content.
Since floating recipient bar is center aligned (with margin: 0 auto)
we also have to move left by half the scrollbar width.
Group css classes having the same value being assigned together. This
makes the code easier to understand.
Previously, there was a bug where a failed message would only show the
`.message_failed` icons on hover, the intent was for them to always be
visible if a message failed to send.
The cause of the above bug was that in
e7b1de8ace we modified the html
structure of the icons such that each icon was inside its own div,
which possessed the `message_control_button` class, and both such divs
were inside a `.message_failed` div. The unintended consequence of this
change was that the rule `.message_controls .message_control_button`
would apply `visibility: hidden` to the icons.
Hence, this commit explicitly sets the visibility of
`.message_failed .message_control_button` to `inherit`.
Removed existing empty narrow divs from app/home.html and created
a new javascript module to dynamically load empty narrow messages
using handlebar template.
Fixes#18797
This is the standard way to indicate that something is a dropdown
menu, and in particular avoids confusion some folks had with the
pencil icon.
Tweaked by tabbott to unify CSS with all of our other dropdown list
widget instances.
Fixes#19888.
* We use flexbox instead of `position: relative` to align elements.
* Increase clickable area of icons using more padding.
* Increase space between elements.
* Fix mobile compose box icon alignment.
This is a prep commit for adding extended descriptions to
message_view_header, it ensures hover effects work even if we add
additional elements to the message_view_header.
* Fix time input buttons not positioned correctly.
On <768px screens:
* Center align flatpickr.
* Remove bottom arrow.
We should ideally have a semi-transparent black background
for flatpickr on mobile but it is hard to do so with flatpickr
being inserted into DOM by an external library.
For background, the .topic_move_breadcrumb_messages and
.message_edit_breadcrumb_message classes is applied to these checkboxes.
We add margin-top of 10px to the second checkbox to space them
appropriately. Additionally, we can remove some unnecessary complexity
from the template/CSS.
With a tweak from tabbott to remove the break-row logic as well.
Fixes#19947.
This commit changes the color, opacity and hover effect of the
search_button ( the x icon) to be consistent with other elements in
the search box, the message_view_header and the gear icon to thr
right.
This commit ensures that the search_icon within the search box has the
same color, opacity and hover effect as on the search_icon in the
message_view_header when search is closed.
This handler was broken during refactor
78d511fd03, as we can see from the
original implementation in 30065b4ee8,
the intent is that hovering over any link within the
narrow_description should not cause the search_icon to change color ie
the hover effect should not be used. This is so because it aligns
with the fact that clicking the links would not open the search bar.
However, during the refactor this was incorrectly switched to forcing
the effect to be applied when we hover over links in the
narrow_description.
This commit reverts to the original and intended behaviour, and also
switches to using opacity rather than color, in accordance with the
changes from the previous commit
(316d499ac74c2caddb57c98a43d9b776b1b32d98).
In commit 5d91a34119 we change the
behaviour of a hover effect on search_icon to use opacity rather than
a change in color. This change made the search_icon hover consistent
with the gear icon to the right of it, it had the additional benefit
of reducing the need to define a hover effect in night_mode.css.
However, some rules targeting search_icon were leftover that still
used color, this commit changes one in zulip.scss to use opacity and
removes one from night_mode.css that is no longer necessary.
In some non-English languages, including Russian, the translation of
EDITED does not properly fit. The best solution is probably something
bigger or having translators abbreviate this string, but it's worth at
least this minimal change to fix extremely ugly overlap behavior for
this widget.
Actual CSS written by Greg Price.
Sahil Batra
Aman Agrawal
YashRE42
Anders Kaseorg
Steve Howell
Tim Abbott
Junchen Liu
NerdyLucifer
Dinesh
Jai soni
Parth
AnushaNathRoy
BIKI DAS
S-Abhishek
Arch0125
Ganesh Pawar
anurastogiji
Eeshan Garg