This commit just replaces the old fa copy icon with the custom Zulip
copy icon. Since all the bot related icons in Personal/Settings/Bots
uses different colors, this commit avoids only changing the copy icon
colors, since that would result in an unintended standout.
This commit serves as the base for standardizing the look and feel of
the copy button throughout the UI.
Changes:
- Replaces the old fa-copy icon with the new Zulip custom copy icon.
- Standardizes the hover/active states for interactivity.
- Defines two variants of the copy button, one which is just the
icon and the other which is squared off like a traditional button.
- Removes the `.popover-menu-icon` classes from the copy buttons,
as that class is made to be used with popover menu option icons.
Currently, we show pronouns inside parentheses just after name in
@-mention typeaheads.
This commit changes it by removing parentheses and adding comma if
more info is present after pronouns. The pronouns also have the same
styles as that of the user emails.
Fixes part of zulip#31245.
In the 2024 redesigned button configurations, the compose buttons
become outliers. This retains their previous style inherited from
.button, allowing that base component class to move forward.
This commit increases the contrast for "This user has been deactivated"
text in user popover and "This group has been deactivated" text in
group popover in both light and dark mode by making the opacity 1 as
this is important information and should be clearly visible.
The text color and opacity matches with the role text shown in user
popover.
Earlier, mostly in non-English languages, the tooltip labels would
force the tooltip hotkey hints to wrap. This commit adds the
`white-space: nowrap` property to ensure that the hotkey hint texts
are forced to be in a single line.
This UI enables the user to set can_manage_group setting to a
combination of users and groups, replacing the old dropdown UI
which just allowed setting user to a single system group.
Fixes part of #28808.
Previously, the message controls for failed messages was present for
all messages, regardless of their status, and was being rendered
unconditionally; only being hidden for successfully sent messages.
This commit adds dynamic rendering for the failed message controls,
only rendering them via the handlebars template when a message is
confirmed to be failed.
Fixes#31132.
This commit introduced 'creator' and 'date_created'
fields in user groups, allowing users to view who
created the groups and when.
Both fields can be null for groups without creator data.
Shows a stream info popover whenever a channel pill is clicked (such
as in the pill widgets for adding subscribers to a channel or
invitations). The stream info popover contains channel icon and name,
channel description and a link to channel settings.
Fixes#30567.
Addresses user research feedback by duplicating the "Enter Sends
Message" setting in the Settings > Preferences menu, specifically within
the General section, ensuring users can easily locate and configure
this option.
server_events_dispatch: Remove break statement.
The settings page needs to be updated when
`enter_sends` property is updated.
css: Update vertical-align to middle for the checkbox element.
Co-authored-by: Akarsh Jain<akarsh.jain.790@gmail.com>.
This also removes the need for any min-width declarations on the
labels, which will behave as block elements and take up the
containing block's available width.
This seems to have been used with the `password_warning()` function
in `password_quality.ts`, but that function does not appear to be
called in the app--only in the portico.
This moves the content inside `message_length_controller` to a new
handlerbars template `message_length_toggle.hbs`, and dynamically
renders the content based on the message length.
Since the majority of the messages aren't collapsed/condensed, this
change should improve the initial rendering of the message list.
Fixes#31133.
This commit moves the placeholder elements for the message edit form,
to `message_edit_form.hbs`, so they are conditionally rendered only
when a message is being edited, rather than being present for every
message in the list.
Fixes#31134.
Adds a link to the plan ledger view in the current plan information
shown in the support views. Link is not shown if the plan is 100%
sponsored, e.g., the Community plan.
Adds a formatted header area to the activity table template so
that it's easy to add useful information to these activity views.
This commit repositions the bot owner field from below the bot’s name to
align with the user fields, providing more space for the newly added
bot owner user pill.
This also moves the 2px of reduced lefthand padding to the overall
width of the left sidebar, which will keep the left sidebar at its
same width (in other words, the message area will not shift any
further to the left, either).
Fixes#27565
This allows log in button in navbar for spectators to have more space
to be displayed in different languages without being truncated.
Login page already has 2 buttons for user to sign up from.
In the Zulip Cloud support view, adds a "Realm management" section
for support actions that are specific to that view, (e.g., changing
an organization's type or deactivating an organization).
Moves the note about emailing organization owners when a full
sponsorship is approved for Zulip Cloud Standard to the success
message for that action, which mirrors the remote server/realm
support view.
This commit adds a wrapper around the "dropdown_widget" of
"dropdown_widget_label".
This wrapper is primarily added so as to be able to show tippy
tooltips over the dropdowns in case they are disabled, since
we can not assign tippy instances to disabled buttons.
Show user group popover for scheduled messages overlay, compose box
preview, message edit preview, message edit history.
`.messagebox` was chosen as the selector since that was the nearest
parent class that was common for all of the above.
This commit won't work for drafts overlay since drafts has a direct
event listener which receives the event before our delegated event
listener.
This commit also adds an explicit `cursor: pointer` to
`user-group-mention`.
Show user card popover for scheduled messages overlay, compose box
preview, message edit preview, message edit history.
`.messagebox` was chosen as the selector since that was the nearest
parent class that was common for all of the above.
`@all` does not have a popover and that's why it will have the same
pointer as its parent element. We also introduce a new class called
`.user-mention-all` for managing css rules specific to that mention.
This replaces a :disabled selector with individual ones for each
element type; I verified in CSS selector profiling that this change
removes lines that were previously about 10% of profiled CSS selector
processing time for rendering the combined feed.
The reason being that the rendered elements have very few disable-able
elements, but the browser was spending a lot of time trying to match
**every** element for whether it might have been disabled, which was
slow.
This probably reflects a browser bug.
Even though the border-color was set for `#subscriptions_overlay
.subsection-parent div`, since the border-style was not set. It did not
have any effect on the appearance of the children div of
.subsection-parent.
These were added in ae7fe85ec5, and
should have been deleted in 333b8b095c.
Having those rules did not make any difference to the subscription and
user group list items.
Having the `div` selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
We've introduced a new class called `.client-logos-div`.
In `hello.ts` we just manually append the name of this new class for the
logo changing logic since that felt more readable than adding the class
programmatically.
The class was named `typeahead-option-label` for the element containing
the actual option label. We renamed it to
`typeahead-option-label-container` to give it a more appropriate name.
Previously no message was being shown in the group popover,
when group had no members, this commit intends to fix this
by displaying an approriate message when group is empty.
Fixes#30830.
This keeps colors uniform between edit and preview modes, and also
ensures no bleedthrough of the editor when in preview mode.
ID selectors have been used for those colors to both keep the text
color declaration in the same place, and to avoid a dark-theme
specificity problem where the generic textarea took precedence over
the colors specified on the compose box's own textarea.
With the refactoring of the rendered-Markdown area to use only
margin bottom, including in message-edit previewsk, these expensive,
general selectors are unnecessary.
Headings and horizontal rules, which do have margin-top, are zeroed
out elsewhere in the rendered-markdown file.
Earlier tooltip info for the default topic menu notification option
had static string to display.
This commit changes the string info and includes channel name and its
corresponding privacy icon to display in the tooltip.
Using "*" selector is inefficient as they require checking every
element because of the browser's bottom-up matching process.
This commit instead updates the selector to use individual
classes for elements to apply the CSS rules keeping in mind
to use unique class names instead of general class names.
This commit fixes the overflowing issue for long bot owner names in the
user card popover, and also repositions the bot owner user card popover
to align with the bot owner name on the bot user card popover.
This CSS was needed when there was label along with the buttons
on the same line when this was originally added in 626c5ef55e.
But there is no label with the buttons now, so this CSS is not
needed.
This commit updates the color of the text items in the user card popover
which are mostly user related information, to use the new Zulip color
palette.
This increases the contrast of the custom profile fields and other user
related information such as the user's local time and status text to
improve readability.
Fixes part of #31027.
The postcss-color-mix-function plugin does not support var() color
arguments since those cannot be dynamically resolved. This commit
replaces all var() color arguments with their static hsl() equivalent
values to ensure that color-mix() functions are successfully compiled
to rgb() for browser compatibility.
Previously animated images were automatically played in the
message feed of the web app.
Now that we have still thumbnails available for them, we can add a new
personal setting, "web_animate_image_previews", which controls how the
animated images would be played in the web app message feed -- always
played, on hover, or only in the image viewer.
Fixes#31016.
This commit increases right padding for the th elements in recent
views table to make sure that the sorting arrow is visible correctly
for various screen width and font sizes. This change is similar to
what we did for tables in settings UI.
When rendering a spoiler block that includes a datetime format,
the dropdown button was pushed out of view on smaller devices.
This happened because the time tag was overflowing past
the spoiler blocks width.
This commit intends to fix this problem by adding a `white-space`
attribute to the rendered time tags which will stop it from
overflowing.
Fixes#30641.
We now set max-width on the pill value for stream creator pill
to make sure that the pill does not get too long for long names
and the full name can anyways be seen by clicking on the pill.
Fixes part of #30918.
We don't need `align-self: baseline;` for `fa-envelope` set in
`message_view_header` since this is a different icon and it appears
better without it like other icons.
We also don't need the explicit font-size for switching b/w 14px and
16px mode since `zulip-icon` class takes care of that by default.
We had to specify margin-bottom as 10px separately for
`modal_password_input`, `password_visibility_toggle` and
`settings-forgot-password` classes. We've added a div that encapsulates
all these 3 elements which are meant to be in the same row and gives it
a common margin-bottom.
This is a refactor commit.
We've removed the unused parent div. We've also removed the class that
was only being used in that div from zulip.css. We've attached a class
to the anchor element now and it has the same name as the class we
removed.
Fixes https://chat.zulip.org/#narrow/stream/9-issues/topic/Eye.20icon.20misaligned.20in.20Manage.20your.20API.20key/near/1890711.
The eye icon to show and hide password was misaligned in the 16px info
density mode. But since the icon was using absolute positioning to style
the icon, we took this chance to refactor the element to use flexbox.
We've renamed the `password-div` to `settings-password-div` for settings
specific styling. The eye icon was only broken in settings, and since
the settings and the login/signup stuff the same class was used at is
quite different from each other, it might be better to have two
different classes. The other `password-div` has not been refactored, it
might be better refactored in its own PR along with other similar
elements to use flexbox.
Fixes#30895.
The root font-size for the app has always been 16px, and it remains the
same when switching between 14px and 16px mode. This leads to
`.small` buttons looking relatively smaller to their surroundings in
16px mode. So, if we use a unit that changes when switching between
modes, we will have to multiple that value by (16/14) so that we don't
change the existing behaviour for the 14px mode and make things smaller.
This commit only affects `.small` buttons, the same named class is used
in other places but does not use rem unit there and therefore does not
require any changes.
The original plan was to use em instead of rem and multiply it by
(16/14 * 0.8), but since em depends on the parent element, there was a
case in the poll button widget where 1em was equal to 16px in the dense
14px mode. While, the right thing to do might have been some refactor to
make it work as desired, the safest thing to do right now might be to
use the --base-font-size-px variable directly for the 9.0 release.
Fixes#30920.
Before this, the buttons remained the same when switching 14px vs 16px
mode because rem was used as the unit and we are not changing the root
font-size for either of the 14px or 16px mode. Root font-size is 16px in
both cases.
We've removed 0.875 out of the 0.875rem for the font-size of the buttons
since 0.875rem is equal to 14px. It has been replaced with the base font
size variable.
We've removed the rem values for padding and border-radius and written
the pixel values directly taking in account 1 rem = 16px. We don't scale
the padding and border when switching b/w 14px and 16px mode, so we
should not do that here too. While keeping the rem around would be the
same as the current pixel value in either of the modes, removing the rem
is still better since we've concluded here that we don't need to scale
the padding and border-size b/w modes.
Since we access email through pills,to improve the
visibility on a narrow screen, if the screen width
goes below 'lg_min' or 992px drop the email column from users,
deactivated users, bots, channels, groups using a new classname
'settings-email-column'.
This commit overrides the margin-top set on the stream lock icon at the
top-level in `app_components.css`, since we don't need to pull up this
icon for the stream actions popover header.
evykassirer
Sayam Samal
Pratik Chanda
Karl Stolley
Sahil Batra
Anders Kaseorg
sujal shah
Aman Agrawal
opmkumar
Tim Abbott
Sanchit Sharma
Alya Abbott
Shubham Padia
Lauryn Menard
roanster007
codewithnick
Kenneth Rodrigues
Alex Vandiver