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.
We will use this modal for any narrow / hash or other UI element that
requires an actual account to use, to provide something reasonable to
occur when a user clicks on those things.
Fixes#19198
We set blue outline color in day mode and light gray outline colour
in night mode. This removes the different outline colours users
in different platforms / desktop app.
This commits replaces the custom `send_notification` message_edit
checkboxes with our `settings_checkbox` partial.
The main intention is to also support the feature of selecting a
checkbox by clicking over its corresponding label as we have
in the case of the organization settings checkboxes.
Due to above change, this commit also removes the redundant
`break-row` HTML class along with it styles.
We had tooltips bound to failed message action icons, because of
slightly different html structure for these action buttons as
compared to other message action buttons. There were some minor
problems due to this. First there was difference of delay
in which we show other normal action button tooltips. Second
we had to add extra checks to handle tooltip content for these
buttons in tippyjs module.
This is fixed by having same html structure for failed message
buttons as for other message action buttons.
Earlier, the `stream_header_colorblock` wasn't properly styled
with the dropdown toggle button from a UI perspective. This was so
because they had a few space between them due to inconsistencies
in their border radius.
This commit adds an border-radius property to the message_edit
dropdown toggle button to eliminate the above issue and
improve it's overall look.
Previously, the message edit `stream_header_colorblock` used
to incorrectly extend down till the textarea which caused
the UI to be buggy.
Fixed this by adding a `margin-bottom` property similar to
what we did in case of Move topic dropdown.
This minor change accidentally was missed within commit
7c25bd1aa8.
Added CSS property of cursor as pointer to the copy
icon in about_zulip section which indicates the
icon to be clickable.
(This minor adjustment was probably missed in a74b52db22)
This avoids showing a highlighted checkmark for resolve topics, which
looks weird given that the topic name itself contains a "resolve
topic" checkmark.
This commit essentially migrates our custom email tooltip
to tippy tooltip for displaying user's email when their
names would overflow past the right edge of user popover.
This also removes the `email_tooltip` and `tooltip_holder` HTML
classes aloong with their CSS styles as they no longer used.
Similar to what mentioned in 2e196fd5d3
previous sea-green colour didn't meet the WCAG AA standard
guidelines for color contrast. This changes meets WCAG AAA
standard.
Aman Agrawal
Jai soni
Tim Abbott
Parth
AnushaNathRoy
Anders Kaseorg
BIKI DAS
YashRE42
S-Abhishek
Arch0125
Ganesh Pawar
anurastogiji
Eeshan Garg
ericluoliu
Aryan Shridhar
aryanshridhar
m-e-l-u-h-a-n
Kerry Jackson
akshatdalton