This commit is part of a series of commits aimed at updating the message
header buttons to use the new icon button component which has consistent
styling across the Web UI and offers a larger clickable area for the
users.
Due to deviation from the structure at
"web/templates/components/icon_button.hbs", this commit applies the
icon button classes directly on the template rather than using the
component partial directly in code.
Fixes#34477.
This commit is part of a series of commits aimed at updating the message
header buttons to use the new icon button component which has consistent
styling across the Web UI and offers a larger clickable area for the
users.
In this particular commit, the code doesn't directly use the
`icon_button` component but instead uses the icon button utility
classes to style the `a` tag`. The reason behind this choice is that we
want to keep the browser support associated with the `a` tag intact,
such as previewing the URL link when hovering over it.
This commit also replaces the legacy font awesome external square link
icon to the newer "external-link" icon from the Zulip font icons.
Fixes part of #34477.
This commit is part of a series of commits aimed at updating the message
header buttons to use the new icon button component which has consistent
styling across the Web UI and offers a larger clickable area for the
users.
This commit also replaces the legacy font awesome check icon to the
newer "check" icon from the Zulip font icons.
Fixes part of #34477.
This commit is part of a series of commits aimed at updating the message
header buttons to use the new icon button component which has consistent
styling across the Web UI and offers a larger clickable area for the
users.
This commit also replaces the legacy font awesome check icon to the
newer "check-x" icon from the Zulip font icons.
Fixes part of #34477.
This commit is part of a series of commits aimed at updating the message
header buttons to use the new icon button component which has consistent
styling across the Web UI and offers a larger clickable area for the
users.
This commit also replaces the legacy font awesome pencil icon to the
newer "edit" icon from the Zulip font icons.
Fixes part of #34477.
This commit fixes the alignment of the user emoji
in the topic header. Previously, the icon in the
user's name was slightly cut off at the top. This
issue was resolved by setting the line height to 19px.
This is helpful for info density, because `em` values change
depending on the font-size of the HTML element, and we want to
be able to reference `em` sizes for the placement of the message
header container when it's sticky.
This commit should have no functional changes because
`message-header-contents` is the only child of `message_header`
and doesn't itself use font size or line height.
This commit also changes the line height to unitless
https://chat.zulip.org/#narrow/channel/6-frontend/topic/navbar.20sticky.20header.20with.20em/near/2054561
This commit replaces the spectrum color picker used in the stream
popover and stream settings with a custom color picker popover, which
contains a grid of predefined color swatches and a custom color option.
The custom color option uses the HTML5 <input type="color"> which shows
the native browser color picker UI.
Fixes#14961.
A small delay before showing up of the action buttons
is required so that there will be no flickering when
mouse just slides over the message headers.
Fixes part of #26852.
Added `opacity` CSS with `:focus-within` pseudo-class to
the recipient bar. This keeps the action button visibility
consistent with the action UIs - topic editing UI and notification
menu.
Fixes part of #26852.
Co-authored by: ecxtacy <dc.dhruvchouhan@gmail.com>
- Toggles the CSS rule `opacity: 0` on the recipient bar
controls when the bar is hovered.
- If the recipient bar is sticky, then the controls are always visible.
- In case of conversation views, the recipient actions remain visible.
Fixes part of #26852.
Co-authored by: ecxtacy <dc.dhruvchouhan@gmail.com>
This was due to `box-shadow` used to hide the content was incorrectly
overridden in `.sticky_header` from the `.message_header` just above.
The bug is highly reproducible since it happens due to minor pixel
differences when rendering.
