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.
This commit updates the `max-width` of popovers to relative length units
to allow the UI to scale with the font-size. This helps with the multi-
line popover options which we want to break evenly across different
sizes.
The `max-width` of `97vw` still applies to all popovers, and ensures
that the UI does not overflow the viewport.
A `min-width` is applied to the popover hotkey hints to ensure that they
are nearly square when only one character is present. This `min-width`
was previously using rem units, which did not scale with the font size
of the popover font.
This commit changes the `min-width` to use `em` units, which will scale
with the font size of the popover hotkeys.
Fixes#30674.
When having a bigger translation string, it was noticed that Add channel
button had no horizontal padding. But this wasn't true for a shorter
string. The button was using `min-width` as a proxy for padding. When
the width of the button went beyond the minimum 100px, the padding
disappeared.
`.new-style` properties will apply here for the standard button
styling, where the standard horizontal padding is important for the fix.
But we can't use the vertical padding of that class since we want the
button to align with the filter to the right of it which is smaller than
a standard button, so we set the vertical padding to 0 and give the
button a height of 30px. This height is used at multiple places to be
the same as the search filter, e.g. roles dropdown in users tab.
We've also changed the margin from 11px to 12px to be the same as the
filter on the right.
This commit makes the selectors for CSS applied to users
and bots table more specific since the classes used
before are generic and can be used at other places
as well.
This commit makes the selector used to apply CSS to
file name column in uploaded files table more specific
as the class name used before is generic and can be
used at other places as well.
For buttons in the compose box using `.small`, all properties except
min-width were already being overriden in compose.css. So we added
`min-width: inherit` to compose.css and remove the `small` class.
Preparatory commit for #30895.
With the redesign of all popovers completed, we have transitioned away
from the legacy Bootstrap-based popover system. As a result, the
Bootstrap `nav nav-list` classes are now obsolete and no longer used
in the codebase.
This commit, a part of the efforts to clean up the legacy Bootstrap CSS,
removes these unused classes and any related CSS workarounds.
Fixes#26990.
This is a prep commit for removing `nav nav-list` classes from all
popovers.
The send later modal, although not being a popover specifically, was the
last place in the code still using `nav nav-list` classes.
This commit updates the `max-width` of popovers to relative length units
to allow the UI to scale with the font-size.
The `max-width` of `97vw` still applies to the popover, and ensures
that the UI does not overflow the viewport.
- Adds focus outline to the custom profile field links.
- Replaces the grey outline of the copy and status buttons with the
blue one used across the popover options.
- Adds hover state styling to the focus state styling for the copy
buttons.
As a follow-up to the user card popover redesign, this commit removes
the unused code and styles from the user card popover.
- Removed tooltip logic for user name and user type, since we now
display them in full without any ellipses.
- Removed unused css whose class names are no longer used in the
user card popover.
- Removed additional styling needed to handle font awesome and zulip
custom icons, used in the older design.
This commit aligns the user info, which contains the user's full name
and type, to the vertical center of the user card popover's header.
With this, the user info is aligned in the center of the popover header
for short names, and then for the longer names, the user info eventually
aligns to the top and the rest of the content are pushed down.
Using the new color palette defined in the previous commit, this commit
updates the hover and active colors of the copy button in the user card
popover.
This also adds a background to the copy icon on hover and active states.
This commit adds the new Zulip color palette, as css custom properties
to the app_variables.css file. Defining it in the app_variables.css file
allows us to visualize the colors in the editor's autocomplete dropdown
when we use these color values for defining other component based css
variables.
Since hex color values are used in defining the color palette, we
disable the `color-no-hex` stylelint rule for that part of the file.
Previously, when the email was successfully copied via the email copy
button, the email in the user card popover was replaced with a "Email
copied!" message.
This commit replaces this behavior with a more subtle approach, where
only the tooltip of the email copy button changes to "Copied!".
The clear status icon was not properly aligned with the text in the user
card popover, due to additional padding on the icon. The reason for this
padding was to ensure correct focus ring offset, so to fix this issue,
without breaking the focus ring, this commit sets the `outline-offset`
to `0`.
As part of the popover menu redesign, this commit redesigns the user
card popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
This commit adds right padding, approximately equal to the
size of the sorting arrow, to the table headers which show
sorting arrows to make sure that arrows are visible clearly
at different font sizes and in different text languages.
This commit adds minimum width property for different columns
such that the columns do not get too small for narrow screens
and the tables can be scrolled horizontally to view the content.
There are some columns where the text is not user dependent
and we know how long the text can be like user role, bot type
and custom profile field type. In such cases, we can just avoid
wrapping the text randomly.
This commit removes width or min-width properties set for
different table columns so that the column width can adjust
themselves based on the text in different font sizes.
We still have the width property set on "actions" column
though to keep it at the right when a table has only 2/3
columns.
Further commits would be added to handle wrapping of
text in some columns and also to make sure that sort
arrows are visible correctly.
To increase the number of options available for the user to pick from,
we increase the limit of options shown to 50 for all typeaheads, and
make the menu scrollable. The max height is set to original height of
the composebox typeahead menu, which fit 8 options or to 95% of the
window height, whichever is smaller.
Fixes: #20620.
On reactivate or deactivate, we add appropriate class through JQuery.
But that class only remains there until sort, on sort any of these added
classes will be removed. We did not face the problem of un-greying for
active users page, because deactivated_users class was added to the HTML
always if `is_active` was false for the user.
In this commit, we rename `reactivated_user` to `active-user` and this
class will be present for all active users, even on the active users
table. For the deactivated users table, we will have scoped css that
will grey out the row with `active-user` class.
Fixes#30691.
We've removed the pencil icon and renamed the button to `Change your
password`. We've also removed the `.small` and `.btn-link` classes.
We also changed the `Password` label to use the `.settings-field-label`
class, same as the other labels for settings.
We removed the pencil icon, `.btn-link` and `.small` classes.
We also changed the `Email` label to use the `.settings-field-label`
class, same as the other labels for settings.
We've removed the pencil icon and removed the `.small` class from the
button.
This setting button is being used in two places: Changing your personal
language and changing the org-wide language for emails. That is why
we have used the `Change the language` generic tooltip instead of
`Change your language` tooltip.
As part of the popover menu redesign, this redesigns the compose send
options popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes#25117.
As part of the popover menu redesign, this commit redesigns the user
group info popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes part of #28699.
This commit changes the width of tabs in stream and
group settings to be set as per the text inside it
with the previous width being set as minimum width
to avoid tabs being too small.
Fixes#30672.
This commit changes the width of tabs in bots panel
to be set as per the text inside it with the previous
width being set as minimum width to avoid tabs being
too small.
We now do not restrict the width of dropdown widget buttons
so that the width can be increased when the font size increases
and also if the option selected is long due to langauge.
We have similar behavior for the select element except that
the width of select element is set according to the longest
option while for dropdown widgets the button width is set
as per the current selected value.
This change is only for group-based setting dropdowns in
organization, stream and group settigs.
This supports adding users to DM pills by simply typing
a user's name in the text input directly after a complete
dm pill. It only works for DM pills at the end of search
input.
Clicking the X button removes a user from its user pill
container, and if that user was the last user left in the
container, then the whole container is also removed.
Previously, search pill overflow was broken (sticking out of the
search box to the right) and now the search bar extends vertically to
allow pills to wrap when there are too many pills for one line.
There's still a bug when opening the search bar where the input
isn't selected. But I'm not worrying too much about that because
that text is about to be replaced with pills.
At widths under 400px, buttons in the popover were running off the edge,
which is fixed by removing the dividers between them.
For the new info density, buttons in the original row, even despite
removing the dividers, were still not fitting, so their width has been
slightly reduced.
Instead of showing ellipsis if the content of the tab switcher is
more than the width, we now allow it to take more width to show
full text.
If we don't have enough space to show the full text to show on
small screen sizes, we use ellipsis for overflowing text.
Increased sidebar width by 5px to accomodate full tab switcher
at both 14px and 16px font sizes.
These `background-color` and `cursor` rules are not needed here as the
`.dropdown-widget-button` base class already defines these properties
for `:disabled` pseudo-selector and there is no need to repeat here
again.
This is a follow up to previous commit
fe0a068ee5. We want
`.dropdown-widget-button` dropdowns to look same as `select` dropdowns.
This commit fixes opacity for all `.dropdown-widget-button`, which then
makes repetition in `settings.css` unnecessary.
Since we more space now in info overlay after recent width increase
and 40 / 60 split between columns, we have the space to show the
poll header at its normal font size of `18px` without making it wrap
to the next line at even medium width.
Fixes#22113.
The search will only be visible when in the `more conversations`
view. Once we click `back to channels` and close the
`more conversations` view, the search will clear and the search
box will disappear.
We've chosen `pm_list_data.get_conversations` as the function
to which we will pass our search term. We could have technically
found the value of the filter element via JQuery in pm_list_data,
but pm_list_data does not handle any JQuery and we should keep
it that way.
`pm_list_data.get_list_info` also accepts the search_string so that
the info it returns in expanded view is accurate.
We've also added some code to `click_handlers` to make sure that
clicking the search input does not bring us into the DM narrow.
We clean up unnecessary nesting in this commit and replace one
usage of `#direct-messages-sticky-header` with
`#direct-messages-section-header`. Since `.direct-messages-container`
was being used along with `#direct-messages-sticky-header` at multiple
places, just removing the nesting would break those selectors. For those
selectors, they have been refactored to just look for
`#direct-messages-section-header` instead. `.direct-messages-container`
specific selectors still exist but they apply to both instances of
`.direct-messages-container`, the DM header and the DM list.
While the TODO comment we deleted in left_sidebar.css says we need to
rewrite both show more and show less button to grids; show more was
already a grid.
There have been some very slight changes in the actual size of the back
to channels row; those changes make the row more consistent with the
rest of the left sidebar rows in terms of sizing.
We've introduced a new class called `.hide-more-direct-messages-text`
that applies the same properties as the `span` selector used to. We are
using a class because of better performance when selecting, see
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more info on the why,
The `font-size` was moved inside the above class, so that when setting
the line-height of the anchor component, the `em` refers to the normal
font size and not the smaller font size for `back to channels`.
We've moved the link inside `.direct-messages-section-header` and most
of the grid properties are inherited from that element.
This is a preparatory commit to introduce DM filter in #30332.
Earlier, in left sidebar, clicking on followed topic icon would narrow
to the topic.
This commit introduces the ability to open topic status menu from
left sidebar from followed topic icon.
Fixes: zulip#28941.
Fixes position of unsubscribed icon so that it appears in the same line
as the list item of the typeahead and prevent typeahead to increase in
width when the icon is shown.
The space above and to the left of the recipient area is now matched
to the space below it, and this is also the space above and on the sides
of a collapsed compose row.
Due to a wrong CSS selector, the expected red outline flashing effect
was not being applied to the compose box when the user tried to send a
message that was longer than the maximum allowed length. Also, the
iteration count is set to 3 instead of relying on the duration the CSS
class is applied, to ensure exactly 3 flashes without any glitches.
Objectives are to make the width of overlay scale with font size and
reduce too much gap between text end of first column and
text start of the other column.
This helps us in avoiding the scrollbar inside the box
if the information density setting is set to 16/140 by
allowing the box to set its height as per the content.
There is no need for max-height since the height of the
box was anyways less than the max-height value set before
at normal font size and screen widths.
For narrow screens, the max-height property was set to unset,
so removing the max-height property does not have any effect
on how the bots are shown on narrow screens.
Fixes#30669.
This commit refactors the css for subscriber list in channel
settings and group settings by moving the css rules that were
initially used to format the bottom border of the table to
the wrapper div (.subscriber_list_container) around the table.
On specific screen height, this wrapper div will overlap the
actual bottom border of the table and make it look like it's
cut-off. This commit makes it look like the table have consistent
bottom border accross all screen sizes.
Fixes#29825.
Clicking on remove button will not delete the row anymore. We will
add a strikethrough to the user pill and email text. `Remove` button
will change to `Add` on click to undo this action.
Re-adding a user explicitly should will not undo the soft remove on
their row. e.g If `Iago` was added as part of a group and crossed out.
Now, adding another group with Iago as part of it should not undo the
soft remove.
We maintain a seperate set of soft removed users, but we will not
remove those users from the main user list on clicking `Remove`.
That list can only be modified by actions with the input pills.
We will subtract the soft removed user ids from main user id list
when sending the request to add subscribers to the new channel.
I've not added extra puppetteer tests, since adding users was
not part of the existing tests.
A new css variable is created with the same blue color in light theme as
`color-outline-focus`, and gray color in dark theme, and is used for the
focus-visible state of the compose control buttons, the compose close
button, and the send later vdots button.
As part of the popover menu redesign, this redesigns the mobile message
buttons popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes part of #28699.
Standardize theme selection across the web app by replacing separate
light/dark theme menu options being used in the spectator view with the
new 3-way theme switcher.
Fixes#30318.
This commit updates the CSS to makes the label for disabled
checkbox less faded such that it is faded enough to figure out
that the setting is disabled but the text is also visible clearly.
Apart from the normal (collapsed) and full screen sizes, a new expanded
state with the same size as the maximum a normal compose box can stretch
to when full (40% of the screen height) is now available. Now a user can
expand the compose box without it covering the full screen with a click.
The vertical resize icon in the bottom right corner of the compose box
is rendered useless so has been removed.
All three states can be cycled through by clicking the compose resize
button in the order: collapsed -> 40% of the screen -> full screen. When
a message naturally causes the compose box in its normal state to expand
up to 40% of the screen, clicking the resize button will take it to full
screen state.
Fixes: #29966.
We divide functionality into that for "full_size" and "expanded", which
are identical for now.
This is a prep commit for adding an intermediate expanded screen size.
We previously had two CSS rules for control-label-disabled
class, one in settings.css and one in subscriptions.css
and the rule in subscriptions.css was being used by all
the elements with that class.
This commit refactors the code to have only single CSS rule
for that class with the value being set to the one used in
subscriptions.css, because that was the one being used and
that also looks better in terms of design, and the CSS is
defined in settings.css since it can be considered more
general file for writing CSS used in organization/personal
settings along with stream settings.
This commit also removes the unused code for
".control-label-disabled.enabled" selector since we no
longer use that selector.
The row of buttons is placed using CSS grid template areas so that
visually it is now inside the bottom edge of the textbox. The color of
the buttons row and individual buttons is changed to match the color of
the textbox. All textbox border / box shadow properties are now applied
to its parent instead which is extended under the buttons' row, so that
its border snuggly fits around the buttons row too.
Notable side effects:
- In dark mode the textbox in focused state now has a light border which
does not match the recipient input's current border which doesn't change
when focused. Likely, the recipient input should be updated to match the
textbox's border color.
- The dividers in the formatting buttons row are not vertically centered
now. This should be figured out soon.
Fixes: #28702.
These styles were from before opting to work with themes maintained
by the Pygments project. Their removal will make it much easier to
upgrade Pygments themes in the future, and more importantly,
reduce the effort required to square syntax highlighting in the web
and mobile apps.
This style is currently only used for search suggestions. Soon,
styling for those suggestions will become more specific, and so
for now we'll keep those styles in search.css to be more clear
about what the new styles affect. If we want to repeat something
like this in the future somewhere else in the app, we can come
up with a generic styling then once we have a better idea of
what that will look like.
Removes some CSS rules used in the invite user modal that were
already being applied via the shared `modal_select` class.
Co-authored-by: Lauryn Menard <lauryn@zulip.com>
Fixes#30403.
Having tabIndex set to 0 led to keyboard focus being put on
a scrollbar container, which led to users having to tab twice
to skip a container.
This commit also removes instances of tabIndex being set to
-1 programatically for certain cases, since it is -1 by default now.
This commit also removes `outline: none` for simplebar since
that property is not needed anymore because the wrapper is
not focusable anymore.
Rename `show_all_private_messages` to `show-all-direct-messages`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `toggle_private_messages_section_icon` to
`toggle-direct-messages-section-icon`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `private_messages_section_header` to
`direct-messages-section-header`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `private_messages_section` to `direct-messages-section`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
For the compose control buttons, the compose close button, and the send
later vdots button, we show the focus ring only on `focus-visible` and
not on `focus`.
Fixes part of: #27117.
The css variable `--color-outline-focus`, which affects focus rings
throughout the app, now has a different value defined for the dark theme
but this should have no visible effect, and help clean up the code.
This is a prep commit for the next, which shows focus rings only on
`focus-visible` and not on `focus` for composer buttons.
The margin properties in question were getting overridden by other
css, so they were not important. The width was not making a difference
in case of channel filter, since its parent was a flexbox. For the
topic list, the width was getting overriden by
`#stream_filters .input-append.topic_search_section input`.
Rename `active_private_messages_section` to
`active-direct-messages-section`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
We now right align recipient input (even at very narrow widths) and
banners to the textbox, and move the close button to the absolute top
right corner of the compose box, updating the icon to be slimmer, bigger
and purplish, and adding a background highlight on hover.
This involved refactoring the send control area width into a responsive
css variable, and simplifying the html structure of the compose box.
Fixes: #28792.
Previously, the typing notifications used to appear between the
message list and the mark as read banner in a thread. This would
cause the banner to shift down whenever someone starts typing,
and shift back up if everyone stops typing.
This frequent bouncing of the banner could be distracting, and hence,
is fixed by moving the typing notifications to below the mark as
read banner.
Shubham Padia
Karl Stolley
codewithnick
Kenneth Rodrigues
Sayam Samal
evykassirer
Tim Abbott
Pratik Chanda
Sahil Batra
Alex Vandiver
roanster007
Aman Agrawal
Sanchit Sharma
Anders Kaseorg
sujal shah
Vector73
adnan-td
N-Shar-ma
tnmkr
Alya Abbott
PieterCK
Sayam Samal
Lauryn Menard
Ujjawal Modi