Commit Graph

1822 Commits

Author SHA1 Message Date
Shubham Padia a4f1c9fd9e settings: Convert password dialog box to use flexbox.
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.
2024-07-17 11:05:59 -07:00
Karl Stolley eb0f72ecef search_pills: Correct border radius to match images. 2024-07-17 10:31:01 -07:00
Karl Stolley 33d2c8fc4d search_pills: Improve grid for correct alignment. 2024-07-17 10:31:01 -07:00
Karl Stolley f738a68bb1 pills: Make --height-input-pill authoritative. 2024-07-17 10:31:01 -07:00
Shubham Padia 15ea879899 css: Scale font-size for .small buttons.
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.
2024-07-17 09:41:43 -07:00
Shubham Padia 16623bf3b7 modal: Scale modal buttons when using 16px mode.
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.
2024-07-17 09:40:41 -07:00
Aman Agrawal 155f34412e search: Fix search suggestions not wrapping on overflow. 2024-07-16 23:29:45 -07:00
Aman Agrawal c82012e5e2 typeahead: Move all global typeahead styles together. 2024-07-16 23:29:45 -07:00
Anders Kaseorg f5e2afd693 stylelint: Fix shorthand-property-no-redundant-values.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2024-07-16 23:25:37 -07:00
Sahil Batra 3980507599 settings: Do not allow last active value to wrap randomly.
We do not allow the "Last active" values in users list to
wrap at random breakpoints and instead wrap at end of the
words.
2024-07-16 14:52:29 -07:00
sujal shah fa16f7720f settings: Drop email column on narrow screens.
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'.
2024-07-16 14:52:29 -07:00
sujal shah b5e215824b organization_settings: Convert name to pills.
Display pills Using user_display_only_pill.hbs template
before users are displayed as links after this commit
convert them to pills.

Fixes #24229.
2024-07-16 14:52:17 -07:00
Sahil Batra f937669ba1 user_pill: Show deactivated icon in user_display_only_pill.
This commit adds code to show the deactivated icon for
deactivated users.
2024-07-16 14:52:17 -07:00
Karl Stolley 502b9a76a9 compose: Ensure color concord across compose and edit boxes. 2024-07-16 13:12:21 -07:00
Karl Stolley 52d8813214 left_sidebar: Calculate top based on prominent row height. 2024-07-16 10:16:10 -07:00
Karl Stolley b2f1cdbce3 left_sidebar: Remove unreachable filter-topics style. 2024-07-16 10:16:10 -07:00
Karl Stolley e2623f3937 typeaheads: Space channel icons with flexbox. 2024-07-16 09:31:27 -07:00
Sayam Samal 2425f7da01 stream_popover: Fix stream lock icon position in stream actions popover.
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.
2024-07-16 09:27:56 -07:00
Sayam Samal cf3fd10ad0 popovers: Allow user group popover elements to scale with font size. 2024-07-15 13:36:23 -07:00
Sayam Samal 8ca02d8e38 popovers: Allow user card popover elements to scale with font size. 2024-07-15 13:36:23 -07:00
Sayam Samal 5853848640 popovers: Fix wrapping in condensed popover when count is present. 2024-07-15 13:36:23 -07:00
Sayam Samal 6a6dd2543c popovers: Update `max-width` of popovers to scale UI with font size.
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.
2024-07-15 13:36:23 -07:00
Sayam Samal fa59200a03 popovers: Allow popover hotkey hints min-width to scale with font size.
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.
2024-07-15 13:36:23 -07:00
Sayam Samal 2a81bda72e popovers: Allow popover options' padding to scale with font size. 2024-07-15 13:36:23 -07:00
Sayam Samal 75780102f4 popovers: Add font-scaling for tab pickers. 2024-07-15 13:36:23 -07:00
Sayam Samal 9b2e1d895d popovers: Fix for Karl's previous commit on font scaling. 2024-07-15 13:36:23 -07:00
Karl Stolley a2de1a5f98 popovers: Allow font-size-based lengths to scale. 2024-07-15 13:36:23 -07:00
Karl Stolley 413ff92da7 popovers: Explicitly set base font-sizes for popovers. 2024-07-15 13:36:23 -07:00
Shubham Padia 4207c985b2 settings: Fix Add channel button relying on min-width for padding.
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.
2024-07-15 12:43:06 -07:00
Sahil Batra 3fe8ad37df settings: Refactor css for users and bots table.
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.
2024-07-15 12:42:08 -07:00
Sahil Batra 413892ddb1 settings: Use more specific selector for file name CSS.
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.
2024-07-15 12:42:08 -07:00
Aman Agrawal 6fa1c2d3bf subscriptions: Keep individual tabs in the same row.
Fixes #30675
2024-07-15 12:35:00 -07:00
Shubham Padia aa74de182e compose: Remove unnecessary `.small` class for compose buttons.
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.
2024-07-15 10:39:31 -07:00
Sayam Samal 4457225d35 bootstrap: Remove legacy `nav nav-list` classes and related CSS.
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.
2024-07-15 10:00:22 -07:00
Sayam Samal dfc18518db send_later: Remove Bootstrap `nav nav-list` CSS classes dependency.
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.
2024-07-15 10:00:22 -07:00
evykassirer f23fdede67 search pills: Align icons on top row.
This reverts #30804. We need a followup PR to address the
issue that PR was trying to solve without breaking icon
alignment.
2024-07-13 11:38:11 -07:00
Vector73 d895ca287f tooltips: Make size of tooltips consistent.
Uses a variable for defining font-size on tooltips instead of `1em`.
2024-07-13 07:34:21 -07:00
Aman Agrawal b5b3391d0d typeahead: Fix alignment of secondary text of typeahead. 2024-07-13 07:03:46 -07:00
Aman Agrawal a46b075e0e typeahead: Restore line height to original value.
e5e5ba6cea reduce the line height
of the typeaheads, which doesn't look for stream typeaheads. We
restore it back to original value.
2024-07-13 07:03:46 -07:00
evykassirer 2e3f11134e search: Fix bug where exit button jumps when clicked. 2024-07-12 15:14:05 -07:00
adnan-td 6f4d14ddde stream_pill: Add channel privacy icons in input_pill.
Modify stream pills to add channel privacy decorations inside
input pills for areas eg: the UI for adding members to a channel.

Partly fixes: #25257.
2024-07-12 15:00:02 -07:00
evykassirer 31ed5d597b search: Enlargen x button in search bar. 2024-07-12 13:36:42 -07:00
evykassirer 57cb4321b1 search pills: Align typeahead text with pills. 2024-07-12 13:25:36 -07:00
Sayam Samal 757bb8c68d user_card_popover: Update `max-width` to scale UI with font size.
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.
2024-07-12 13:03:40 -07:00
Sayam Samal 724c91d127 user_card_popover: Add user-card-specific class to the email field. 2024-07-12 13:03:40 -07:00
Sayam Samal 97f84b4aae user_card_popover: Scope related css inside a common class. 2024-07-12 13:03:40 -07:00
Sayam Samal 6ee491697f user_card_popover: Improve outline styling for focused elements.
- 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.
2024-07-12 13:03:40 -07:00
Sayam Samal 7232ff68f8 user_card_popover: Enable keyboard nav for custom field copy buttons. 2024-07-12 13:03:40 -07:00
Sayam Samal 8ead2035bf user_card_popover: Enable keyboard navigation for email copy button. 2024-07-12 13:03:40 -07:00
Sayam Samal 1f6fcb81e8 user_card_popover: Cleanup user card popover after redesign.
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.
2024-07-12 13:03:40 -07:00
Sayam Samal 5a123e57ce user_card_popover: Align user info to popover header's vertical center.
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.
2024-07-12 13:03:40 -07:00
Sayam Samal dd2739a7e1 user_card_popover: Update the hover and active colors of copy button.
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.
2024-07-12 13:03:40 -07:00
Sayam Samal 84bf694257 css: Add Zulip color palette to app_variables.css.
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.
2024-07-12 13:03:40 -07:00
Sayam Samal d707c9f779 user_card_popover: Change success behavior of the email copy button.
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!".
2024-07-12 13:03:40 -07:00
Sayam Samal 9bd8a0c72c user_card_popover: Move manage user menu options to user card popover.
This commit removes the manage user menu popover and moves the
options contained within it directly to the parent user card popover.
2024-07-12 13:03:40 -07:00
Sayam Samal 7a903e6336 user_card_popover: Align status emoji to the top for multi-line status. 2024-07-12 13:03:40 -07:00
Sayam Samal 258e2a7297 user_card_popover: Fix clear status icon padding.
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`.
2024-07-12 13:03:40 -07:00
Sayam Samal 58357dfd75 user_card_popover: Fix user avatar shrinking on long status text. 2024-07-12 13:03:40 -07:00
Sayam Samal 60d1993ed8 user_card_popover: Redesign popover using the new `popover-menu` theme.
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.
2024-07-12 13:03:40 -07:00
Shubham Padia 6c3707f484 left_sidebar: Move DM section header id to top level in css file.
This is a refactor and should not introduce any visual changes.
Fixes https://github.com/zulip/zulip/pull/30707#discussion_r1669110661.
2024-07-12 11:32:49 -07:00
Sahil Batra ebf9105a51 settings: Make sure sorting arrows are visible correctly.
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.
2024-07-12 10:35:22 -07:00
Sahil Batra 91cf69f6a1 settings: Set min-width of table columns for narrow screens.
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.
2024-07-12 10:35:22 -07:00
Sahil Batra 42a5ae76bb settings: Do not allow table headers to wrap randomly. 2024-07-12 10:35:22 -07:00
Sahil Batra 9c9c8dc058 settings: Do not allow text to wrap randomly in some columns.
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.
2024-07-12 10:35:22 -07:00
Sahil Batra 9fab65f4b0 settings: Do not restrict width for table columns.
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.
2024-07-12 10:35:22 -07:00
N-Shar-ma 82c2da8aae typeahead: Make menu scrollable with up to 50 options.
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.
2024-07-11 16:05:30 -07:00
Shubham Padia 2becb41931 settings_users: Reactivated user should not get un-greyed on sort.
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.
2024-07-11 12:16:12 -07:00
Shubham Padia 6c152b3adc account_settings: Make change password similar to other setting buttons.
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.
2024-07-11 09:49:27 -07:00
Shubham Padia 73e9d9da64 account_settings: Make change email similar to other settings buttons.
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.
2024-07-11 09:49:27 -07:00
Shubham Padia 6085212574 settings: Make change language button similar to other settings buttons.
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.
2024-07-11 09:49:27 -07:00
evykassirer 4280524904 search pills: Expand group DM pill vertically when it overflows. 2024-07-10 17:44:04 -07:00
evykassirer 9c45e43706 search pills: Prevent overflow in the typeahead for very long pills. 2024-07-10 17:44:04 -07:00
evykassirer 7cb00d171e search pills: Prevent overflow for very long pills. 2024-07-10 17:44:04 -07:00
N-Shar-ma 9a8f1c9b5d css: Exclude lock icons in dropdowns from being unnecessarily pulled up.
This fixes the issue where the lock icon, most noticeably in the compose
recipient stream dropdown, was placed too high.
2024-07-10 15:13:08 -07:00
Sayam Samal e0ec522f70 send_later_popover: Redesign popover and add accessibility improvements.
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.
2024-07-10 15:05:37 -07:00
Aman Agrawal e5e5ba6cea css: Scale typeaheads / dropdowns with font size.
Fixes #30780

Adjusted both width and line height of typeaheads and dropdown widgets
to scale font size.
2024-07-10 12:56:58 -07:00
Aman Agrawal a5c922a99f search: Remove unintentional propagation of CSS properties.
This doesn't introduce any bugs yet but it can if left unchecked.
2024-07-10 12:56:58 -07:00
Aman Agrawal b3e0cc61e5 css: Remove old typeahead css.
We already have the behaviour for this that we want in typeahead.css.
This CSS produces problems for rendered markdown as it propagates
to it.
2024-07-10 12:56:58 -07:00
Sayam Samal 1b1f2411d8 user_group_popover: Redesign popover using the new "popover-menu" theme.
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.
2024-07-10 12:54:05 -07:00
evykassirer 992ae6fdaf search: Vertically center search pills in search bar. 2024-07-09 18:37:05 -07:00
Sahil Batra bdcab71a4d stream-settings: Allow tabs to be wider.
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.
2024-07-09 17:12:47 -07:00
Sahil Batra c4d84d1e5c settings: Allow tabs in bots list to be wider.
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.
2024-07-09 17:12:47 -07:00
Sahil Batra 5704bf72e0 settings: Increase width of setting dropdown widget buttons.
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.
2024-07-09 17:11:15 -07:00
evykassirer 991c8451cd search pills: Allow typing new query just after opening search.
This simulates the user experience of a text input with the existing
content selected/highlighted.
2024-07-09 17:08:45 -07:00
evykassirer d655ab8570 search pills: Rework pills sizes and layout. 2024-07-09 17:08:45 -07:00
evykassirer 11bb44c7cc search pills: Direct message group pill support.
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.
2024-07-09 17:08:45 -07:00
evykassirer a39fe910d8 search pills: Use grid to support pill overflow styling.
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.
2024-07-09 17:08:45 -07:00
evykassirer 38e58ea3d6 search: Use pills in the search bar.
This initial commit is fairly bare-bones, and does not have the full
contemplated functionality.
2024-07-09 17:08:45 -07:00
evykassirer 0ab4f84561 search: Move search from input field to contenteditable div for pills.
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.
2024-07-09 17:08:45 -07:00
N-Shar-ma b4ccde42ce compose: Remove dividers and reduce button width at narrow mobile sizes.
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.
2024-07-09 13:38:44 -07:00
N-Shar-ma c7a3623b30 compose: Adjust media queries for the buttons row as per info density. 2024-07-09 13:38:44 -07:00
Karl Stolley c76fc2e942 compose_box: Scale send buttons with info density.
Because the formatting buttons are integrated with the message box,
the send button and its accompanying vdots now share the same
button dimensions.
2024-07-09 13:38:44 -07:00
Karl Stolley 7b5f0e4d89 compose_box: Scale formatting buttons with info density. 2024-07-09 13:38:44 -07:00
Aman Agrawal 153f983b01 settings: Allow tab switcher text to expand to show full text.
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.
2024-07-09 13:18:03 -07:00
tnmkr 6613efeca3 org_settings: Fix dropdown color in `Organization settings` section.
This fixes the text color for .dropdown-widget-button dropdowns both in
enabled and disabled state.
2024-07-09 13:11:53 -07:00
tnmkr fcade635f8 org_settings: Fix repeated css for `Organization permissions` section.
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.
2024-07-09 13:11:53 -07:00
tnmkr 92f5b7d86a app_components: Fix opacity for disabled .dropdown-widget-button.
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.
2024-07-09 13:11:53 -07:00
tnmkr 13c4f281ab css: Normalize opacity on `select:disabled` elements.
We are setting the opacity to Chrome's 0.7 because that is what most
select fields in Organization settings are styled for.
2024-07-09 13:11:53 -07:00
tnmkr f94c55229f stream_settings: Fix .dropdown-widget-button color.
Fixes "Who can unsubscribe others from this channel?" dropdown to match
other dropdowns.
2024-07-09 13:11:53 -07:00
tnmkr 58d91de1d6 stream_settings: Fix blue color on hover for creator pill.
These pills were added in b524a2c1ea.
2024-07-09 13:11:53 -07:00
Aman Agrawal ad4a1a316d typeahead: Fix typeahead items wrapping to next line. 2024-07-09 09:42:10 -07:00
Aman Agrawal 495c83eb46 typeahead: Fix unintentional propagation of CSS properties. 2024-07-09 09:42:10 -07:00
Aman Agrawal 84f22440dd rendered_markdown: Fix text wrapping in message view header.
For elements that can wrap in a rendered markdown, we don't want them
to in places like message view header.
2024-07-09 09:42:10 -07:00
Aman Agrawal 2a0dbd22a5 search: Allow typeahead item in search to occupy full width. 2024-07-09 09:42:10 -07:00
Aman Agrawal df542e9a9b css: Keep typeahead CSS together.
Also removed the comment which is no longer useful.
2024-07-09 09:42:10 -07:00
Aman Agrawal d14104cc5d css: Keep typeahead CSS together. 2024-07-09 09:42:10 -07:00
Aman Agrawal bb440e0a7a typeahead: Move CSS file with other styles.
We want to keep typeaheads CSS together to make it easy to reason
about changes and this looks like the right file to keep the
CSS in.
2024-07-09 09:42:10 -07:00
Aman Agrawal e3baac1ba0 css: Remove unused `pointer` class.
We don't have an element with class pointer on it.
2024-07-09 09:42:10 -07:00
Aman Agrawal a66bd21a5b css: Remove stale `actual-dropdown-menu` code.
Removed in bc3d48616e.
2024-07-09 09:42:10 -07:00
Aman Agrawal 3ad2f5e85b info_overlay: Render poll widget header without font size reduction.
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.
2024-07-08 23:53:55 -07:00
adnan-td c6d975f44d compose: Align multi-line text in dropdowns.
Using flexbox to left-align icon with the text
on the first line.

Fixes part of #30469.
2024-07-08 13:58:17 -07:00
Shubham Padia 76e8ec114a pm_list: Add search to direct message section.
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.
2024-07-08 13:17:05 -07:00
Shubham Padia 8782625f07 left_sidebar: Remove `#direct-messages-sticky-header`.
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.
2024-07-08 11:43:02 -07:00
Shubham Padia 737e075cc3 left_sidebar: Remove unnecessary nested `#direct-messages-section`.
`#direct-messages-section-header` will take over existing behaviour of
`#direct-messages-section`.
2024-07-08 11:43:02 -07:00
Shubham Padia 847ff6ee21 left_sidebar: Rewrite `back to channels` to use css grid.
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.
2024-07-08 11:43:02 -07:00
Alya Abbott 939b28c35b portico: Add subtitle (for distributed teams).
The CSS had been removed in bb6e6ecaa5.
2024-07-07 22:44:04 -07:00
Pratik Chanda a7703e9f5f left_sidebar: Open topic menu when clicking on follow topic icon.
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.
2024-07-05 16:36:49 -07:00
Karl Stolley d3b13cf15c message_controls: Reduce control button width to match padded icon. 2024-07-05 15:53:50 -07:00
Karl Stolley 79a2e0a1c4 message_controls: Scale on :active without disturbing clickable space. 2024-07-05 15:53:50 -07:00
Vector73 e699825296 compose_typeahead: Fix position of unsubscribed icon.
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.
2024-07-05 15:26:36 -07:00
Vector73 67d85508be compose_typeahead: Show emojis in stream description typeahead.
Uses markdown rendered version of description instead of plain description
text in stream typeahead.
2024-07-05 15:26:36 -07:00
N-Shar-ma b85e41df47 compose: Make compose close cross button smaller and add active state.
The background color's opacity is reduced for the button's active state.
2024-07-05 15:21:34 -07:00
N-Shar-ma 29be4236d0 compose: Rework paddings for the compose content for more symmetry.
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.
2024-07-05 15:21:34 -07:00
N-Shar-ma 6099364183 compose: Fix flashing effect on trying to send message that's too long.
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.
2024-07-05 14:44:13 -07:00
Karl Stolley e42f9a1efd right_sidebar: Calculate margin-top on shortcuts. 2024-07-05 14:38:28 -07:00
Karl Stolley 97d401a0a1 left_sidebar: Calculate bottom scrolling buffer. 2024-07-05 14:38:28 -07:00
Aman Agrawal 41b431de70 info-overlay: Adjust width of overlay and columns.
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.
2024-07-05 11:36:35 -07:00
Aman Agrawal 676ddf8c30 information_overlays: Inline poll question and edit icon. 2024-07-05 11:36:35 -07:00
Karl Stolley 1410a0acb3 message_box: Ensure emoji display correctly on messages with senders. 2024-07-05 10:25:59 -07:00
Sahil Batra d9da6d17e0 settings: Remove max-height for bots box container.
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.
2024-07-04 07:57:32 -07:00
Aman Agrawal 621ae91c70 settings: Use box buttons for download and delete.
Co-authored-by: Shashank Singh <shashanksingh@Shashanks-Air.mshome.net>
2024-07-03 16:53:39 -07:00
Karl Stolley 9fb6b4d016 left_sidebar: More carefully generate auto rows for expanded nav. 2024-07-03 16:18:45 -07:00
Karl Stolley 35642cb941 recent_view: Set a shared column for filter icons. 2024-07-03 16:15:46 -07:00
Karl Stolley 2c7e264480 tippy: Ensure a normal font-weight on Tippies. 2024-07-03 10:43:25 -07:00
Karl Stolley cbdfdf06b4 tippy: Allow Tippy tooltips to scale with UI. 2024-07-03 10:43:25 -07:00
Karl Stolley 58b40fb6c7 privacy_icon: Raise lock icon throughout UI for better visual centering. 2024-07-02 13:24:16 -07:00
Shubham Padia e539d2226b stream_create: Move `Add all users` beside `Choose subscribers`.
Fixes part of #30690.
We also drop the `Do you want to add everyone?` text.
2024-07-02 12:54:52 -07:00
Shubham Padia 49f6fc5a40 scroll: Set outline as none for `.simplebar-content-wrapper`.
We're reverting removing `outline: none` from commit
fe11f3be7c. While we set tabIndex to -1 in
that commit, which makes sure that it does not get focus when navigating
via a keyboard. But it does not prevent us from programmatically focusing
on the element. In this case, we don't want to see the outline.

Fixes https://chat.zulip.org/#narrow/stream/9-issues/topic/.F0.9F.8E.AF.20weird.20left.20sidebar.20outline/near/1834137
2024-07-02 12:47:44 -07:00
Karl Stolley 51d25bad09 message_row: Only set bottom margin on avatar for me-messages. 2024-07-02 11:45:30 -07:00
Karl Stolley 47430ac719 message_row: Allow user avatar to scale with UI. 2024-07-02 11:45:30 -07:00
Karl Stolley 0f05c67c88 message_box: Set same vertical space below reactions, length toggles. 2024-07-02 11:45:30 -07:00
Karl Stolley 8697c0c63e message_box: Base sender line-height on single-line message. 2024-07-02 11:45:30 -07:00
Karl Stolley 8556e098fb message_box: Set vertical margin to interelement space. 2024-07-02 11:45:30 -07:00
PieterCK b2515e8214 subscription css: Add new app variable for bottom border color.
This commit add a new css variable for subscription lists bottom
border color.

Fixes #30677.
2024-07-02 11:16:51 -07:00
PieterCK 7556414337 subscription css: Refactor subscriber list bottom border.
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.
2024-07-02 11:16:51 -07:00
Karl Stolley 3cb4bb830a left_sidebar: Refactor nav rows for low-resolution screens. 2024-07-02 10:24:20 -07:00
roanster007 90c44d63b7 css: Update css of landing page images to show fading effect.
This commit adds the css class - "message-screenshot" and
"message-starred" to the "landing_page" to exhibit fading
effect.
2024-07-01 16:04:13 -07:00
Shubham Padia 87b3642b62 stream_create: Soft remove users on clicking the remove button.
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.
2024-06-28 15:35:56 -07:00
N-Shar-ma c10ff0bea8 compose: Use same focus ring color for compose buttons in each theme.
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.
2024-06-28 15:14:01 -07:00
N-Shar-ma 3262afeb9b Revert "css: Redefine `--color-outline-focus` for dark theme."
This reverts commit 5c1069872d.
2024-06-28 15:14:01 -07:00
N-Shar-ma 5a740d4fbb compose: Fix the red outline in invalid state in dark theme.
In dark theme, the selector for the outline was the wrong element, so a
double, misplaced outline would show up.
2024-06-28 15:13:21 -07:00
Karl Stolley 104c76c18b left_sidebar: Remove .input-append from stream filter. 2024-06-28 15:12:00 -07:00
Karl Stolley d3d4ddcfc2 left_sidebar: Rewrite topic filter in grid. 2024-06-28 15:12:00 -07:00
Karl Stolley a9c9115175 left_sidebar: Resize topic check with UI. 2024-06-28 15:12:00 -07:00
Karl Stolley 652db1b8b1 left_sidebar: Resize navigational subheaders with UI. 2024-06-28 15:12:00 -07:00
Sayam Samal a62337d08f compose: Redesign mobile message buttons popover.
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.
2024-06-28 12:40:20 -07:00
Aman Agrawal 469582a974 giphy: Style search input same as dropdown widget.
Fixes #26929
2024-06-28 11:24:12 -07:00
Aman Agrawal 772969e68c emoji_picker: Format search bar same as dropdown widget. 2024-06-28 11:24:12 -07:00
Aman Agrawal be6650f035 emoji_picker: Convert search selector from class to id.
There is only emoji picker active at a time with only one search box,
so it makes sense for it to be an id.
2024-06-28 11:24:12 -07:00
Karl Stolley c8aeff9a79 left_sidebar: Convert Sass-style vars to CSS vars. 2024-06-28 10:42:35 -07:00
Sayam Samal b616f013f0 gear_menu: Add theme switcher to the gear menu popover.
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.
2024-06-27 16:24:49 -07:00
Karl Stolley fed0aa6642 inbox: Resize user circles in inbox view. 2024-06-27 15:28:27 -07:00
Karl Stolley d0f5d93f4b inbox: Size unread focus ring without shifting rows. 2024-06-27 15:28:27 -07:00
Karl Stolley 18e5b3ab6b unread_counts: Scale unread counts with UI. 2024-06-27 15:28:27 -07:00
Aman Agrawal edb02fcc98 giphy: Fix focus outline left vertical line not visible. 2024-06-27 09:19:23 -07:00
Sahil Batra d60075a8cf settings: Make the label for disabled checkboxes less faded.
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.
2024-06-27 09:18:39 -07:00
N-Shar-ma 9bc1eb4bb9 compose: Allow 3-way compose box resizing with new fixed expanded state.
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.
2024-06-26 16:36:52 -07:00
N-Shar-ma b432b269ee refactor: Make compose size related variables & functions more specific.
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.
2024-06-26 16:36:52 -07:00
Aman Agrawal 5f956cd369 typeahead: Change background of active elements. 2024-06-26 16:31:28 -07:00
Aman Agrawal a8eff69fc2 typeaheads: Reduce left padding for all elements.
This required taking special care of typeaheads with user circle
and making sure long typeaheads wrap correctly.
2024-06-26 16:30:26 -07:00
Aman Agrawal 52ac602acb typeahead: Make them look like dropdown widget.
This attempts to change background color and text color of typeaheads
to be same as dropdown widgets we have in the app.
2024-06-26 16:26:31 -07:00
Sahil Batra 1fac997338 settings: Refactor CSS for "control-label-disabled" class.
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.
2024-06-26 14:22:47 -07:00
adnan-td 4bde1586e4 topic_name: Fix compressing of display topic names.
Fixes part of #30478.
2024-06-26 12:23:32 -07:00
Karl Stolley b519344dd9 message_controls: Remove unreachable read-receipt styles. 2024-06-26 12:00:21 -07:00
Karl Stolley cedc34bdea widgets: Remove hard-coded 14px font-size. 2024-06-26 12:00:21 -07:00
Karl Stolley 67b8b9e13a settings: Remove font size, unnecessary height from emoji file name. 2024-06-26 12:00:21 -07:00
Aman Agrawal ef09051003 css: Move text-error class from bootstrap.
Remove hover and focus CSS for anchor tags since `text-error` elements
which use this CSS right now don't have anchor tag.
2024-06-26 10:03:05 -07:00
Aman Agrawal 2eefe94b94 stream_settings: Add color for success message.
This was incorrectly removed in
98637e3a88.
2024-06-26 10:03:05 -07:00
Aman Agrawal 959bf39320 bootstrap: Remove unused `text-warning` class. 2024-06-26 10:03:05 -07:00
Karl Stolley c0837a6d20 status_emoji: Allow status emoji to scale with text. 2024-06-26 10:02:13 -07:00
Karl Stolley 818094f81d user_circles: Set user circles to scale with text. 2024-06-26 10:01:24 -07:00
Karl Stolley a43ae2a561 user_circles: Address TODO and remove styles. 2024-06-26 10:01:24 -07:00
Karl Stolley 4c1cc4e62e mention_pills: Allow pills to scale with other message text. 2024-06-26 09:51:29 -07:00
Aman Agrawal dd071c7303 topic_visibility: Remove deprecated topic visibility toggle classes.
These classes became slowly unused as switched to the new topic
visibility system over time.
2024-06-25 14:12:19 -07:00
Lauryn Menard 89a3c290db narrow: Expand informative text in empty mentioned messages view.
Limits the width of the empty message notice to 600px so that this
longer and more descriptive text is similar to the width of the
empty header text.
2024-06-25 14:11:42 -07:00
Karl Stolley 8fb8bd95f0 info_density: Scale reaction emoji with font-size. 2024-06-24 15:05:53 -07:00
Aman Agrawal 244d4e9620 bootstrap: Move `hidden` class to `app_componenets`. 2024-06-24 09:06:53 -07:00
Aman Agrawal 8457d12e59 bootstrap: Remove `hide/show` classes. 2024-06-24 09:06:53 -07:00
Karl Stolley 83a590dc06 compose: Zero out UA padding on composebox buttons. 2024-06-24 09:03:13 -07:00
Karl Stolley 5cd4a8c8e5 pills: Express pill-container spacing on base class. 2024-06-23 22:00:18 -07:00
Karl Stolley 780391fd43 pills: Better express pill-container outer spacing. 2024-06-23 22:00:18 -07:00
sanchi-t 2d79ce2e93 invite: Replace stream checkboxes list with stream pills.
Introduce an input field with typeahead functionality, initially
populated with the default streams for the organization.

Fixes #26871.
2024-06-22 20:04:28 -07:00
N-Shar-ma 00240b6dbe compose: Reduce space between recipient area and textbox. 2024-06-21 17:29:56 -07:00
N-Shar-ma 878d02cf5c compose: Redesign control buttons row and textbox to look like 1 unit.
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.
2024-06-21 17:29:56 -07:00
Karl Stolley ac002b358c markdown: Improve alignment, spacing around horizontal rules. 2024-06-21 16:45:16 -07:00
Karl Stolley 7febb78b3b markdown: Use interelement spacing on horizontal rules. 2024-06-21 16:45:16 -07:00
Karl Stolley 3a4719915c compose: Let pill-container dictate spacing of pills.
The 2px and 6px values expressed as variables here are taken from
@terpimost's mocks in Figma.
2024-06-21 14:46:44 -07:00
Karl Stolley 0844e2cba9 pills: Size pill components and inputs in ems. 2024-06-21 14:46:44 -07:00
Karl Stolley 2820bd277f pygments: Fully isolate light and dark themes.
Co-authored-by: Anders Kaseorg <anders@zulip.com>
2024-06-21 11:15:34 -07:00
Karl Stolley 8936febbd3 pygments: Remove legacy Zulip customizations.
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.
2024-06-21 11:15:34 -07:00
Aman Agrawal 32b4aa0883 navbar: Remove empty space to the left and right. 2024-06-20 16:11:19 -07:00
evykassirer f6c9b515c7 input_pill: Redesign input pills.
This commit also replaces the close button with
an svg. This is part of the app redesign, and
preparation for the upcoming search pill project.
2024-06-20 15:16:17 -07:00
evykassirer 84cf7f8677 input pill: Remove pill-container-btn class in favor of search styling.
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.
2024-06-20 15:16:17 -07:00
Ujjawal Modi cdbc20d304 invite-user-modal: Remove duplicate CSS rules.
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>
2024-06-20 12:26:29 -07:00
Shubham Padia 43eebbf9c6 scroll: Set tabIndex to -1 for simplebar content wrapper.
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.
2024-06-20 10:25:51 -07:00
Shubham Padia 98f4f1bc35 left_sidebar: Remove unused more_private_messages_sidebar_title css.
This was introduced in 6f9e97921d and
has never been used.
2024-06-20 09:58:32 -07:00
Shubham Padia cad5843da6 left_sidebar: Rename show_all_private_messages to use `direct`.
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.
2024-06-20 09:58:32 -07:00
Shubham Padia 0e8a6a0196 left_sidebar: Rename toggle_private_messages_section_icon to use direct.
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.
2024-06-20 09:55:29 -07:00
Shubham Padia 5a3fc26d74 left_sidebar: Rename private_messages_section_header to use `direct`.
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.
2024-06-20 09:55:29 -07:00
Shubham Padia b197659d8a left_sidebar: Rename private_messages_section to use `direct`.
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.
2024-06-20 09:55:29 -07:00
N-Shar-ma b852b5fef0 compose: Show focus ring on buttons only when using keyboard navigation.
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.
2024-06-20 09:45:18 -07:00
N-Shar-ma 5c1069872d css: Redefine `--color-outline-focus` for dark theme.
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.
2024-06-20 09:45:18 -07:00
Shubham Padia 35aa186a72 css: Remove unused css for channel & topic list filter.
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`.
2024-06-20 09:34:08 -07:00
Shubham Padia 628757a2df left_sidebar: Use same color for active narrow filter for dm section.
Fixes #30467.
2024-06-19 18:10:15 -07:00
Shubham Padia e9f3371eca css: Remove unused css rules for background colour in dark theme.
We don't need this explicit rule anymore, since the css variable will
change the background color from zulip.css itself.
2024-06-19 18:10:15 -07:00
Shubham Padia b0eab81459 left_sidebar: Rename active_private_messages_section to use `direct`.
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.
2024-06-19 18:10:15 -07:00
Shubham Padia 694d457f43 css: Remove unnnecessary ids from active pm section color.
By removing the ids and setting the background-colour directly
for `.active_private_messages_section` achieves the same purpose.
2024-06-19 18:10:15 -07:00
N-Shar-ma 906a9ca8f2 compose: Rework alignment of upper elements, and redesign close icon.
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.
2024-06-18 15:51:51 -07:00
roanster007 7ebbdd942d typing: Move the typing notifications to below the mark as read banner.
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.
2024-06-18 14:30:19 -07:00
sujal shah eb259780f7 stream_settings: Reduce vertical space between setttings.
There was previously an excessive margin between
the "default streams" and "announce streams" settings.
2024-06-18 14:20:17 -07:00
opmkumar 30f65e5e2d left sidebar: Make Views label visible for spectators.
We don't include the toggle functionality, to avoid needing to design
what a collapsed Views thing would look like.

Fixes #30324.
2024-06-18 10:50:09 -07:00
Karl Stolley 6fe15626ae search: Set base font-size on search input. 2024-06-18 10:14:27 -07:00
Karl Stolley d9238cf784 message_time: Express font-size in em units. 2024-06-18 10:12:58 -07:00
Karl Stolley ceb89a3dd8 inbox: Enable flexible font-sizing on inbox. 2024-06-18 10:10:38 -07:00
Karl Stolley 424b3add6d left_sidebar: Restore righthand padding to DM partners. 2024-06-18 10:09:40 -07:00
PieterCK c4d20678e4 settings: Refactor css for notification table.
Add new app variable for .notification-table class.
This variable is responsible to set the tables' thead
background color in dark theme. Previously it depended
on a genral CSS rule in dark_theme.css for its thead
color, however that cluster of rule has been deprecated
in #29859.

Note: The `thead` background color for the notification
table in the light theme is transparent, so the new
variable in `app_variable.css` does not have a
corresponding value for the light theme.
2024-06-18 09:48:41 -07:00
PieterCK 681adc1a75 app_components: Refactor table-bordered border color rule.
This optional commit also fixes #30431. It refactors the CSS
for the .table-bordered class, which is used directly by the
tables in the info_overlay menus (keyboard_shortcuts,
search_operators, markdown_help). This approach differs from
PR #30431, where the CSS for .overlay_body—a wrapper div
around these tables—was edited instead.

This commit make the CSS rules for .table-bordered class
use a new CSS variable for its border color where appropriate.
This is aligns with how we organizes CSS in #29859 and in
cd63e8d93cb0f84ec1e4ead348a225cb798f9cf0.

Fixes #39431.
2024-06-18 09:48:41 -07:00
PieterCK 2c7f8ef4a1 informational_overlays: Deprecate redundant fix for table color.
This is a prep commit to an optional commit. It rolls back the
changes from #30431 because #30449 tries to fix a wider regression
that included the issue #30431 tried to fix.
2024-06-18 09:48:41 -07:00
PieterCK d16ae00b15 app_components: Refactor table-striped border color rule.
This commit fix the regression for tables at uses the
.table-striped css, which are primarily used at the
settings menu.

In #29859, we began organizing CSS into more specific
variables and selector, which led to the deprecation of
several general CSS rules that affected these tables.

The fix switches the border-color value used by the
.table-striped css rules to a new CSS variable that
contains both dark and light theme values.

Fixes #30449
2024-06-18 09:48:41 -07:00
Aman Agrawal 00c56a65ed navbar: Rename realm-logo to realm-navbar-wide-logo. 2024-06-18 09:38:51 -07:00
Aman Agrawal 7ddf7a96dc navbar: Show realm icon logo instead of full logo on narrow widths.
When left sidebar is hidden between 1200px and 768px, we show
smaller realm icon logo instead of the full realm logo. Also,
we use the new space to expand the middle column to better show
the narrow description.
2024-06-18 09:38:51 -07:00
Aman Agrawal 406e9b89d0 css: Fix navbar logo misaligned on small heights. 2024-06-18 09:38:51 -07:00
Sayam Samal f81f26116f left_sidebar: Redesign condensed view popover.
This commit also sets all popover labels to flex grow into the remaining
available space. This allows us to align the unread counters, if any
to the rightmost corner of the menu option. This change, however, does
not lead to visual changes in any popover.

Fixes part of #28699.
2024-06-17 18:32:57 -07:00
Sayam Samal 40e548ef5b left_sidebar: Redesign starred messages popover.
Fixes part of #28699.
2024-06-17 18:32:57 -07:00
Shubham Padia 8ab6e71593 settings: Unite user settings into a single panel.
Previously, there were three different sections for managing active
users, deactivated users and invitations.
This commit combines users section has into a single tabbed panel.

Fixes: #26949.

Co-authored-by: shashank-23002 <21bec103@iiitdmj.ac.in>
2024-06-17 17:16:21 -07:00
sujal shah 967f99779a user_group: Move "Choose members" into a separate second panel.
Break the current user group creation panel into two panel
"Create user group: configure settings" and
"Create user group: add members".
2024-06-17 16:20:06 -07:00
sujal 279e9d1dc3 stream_settings: Move "Choose subscribers" into a separate second panel.
Changed the title of the first panel to
"Create channel: configure settings" and title of second panel to
"Create channel: add subscribers".

Implement logic in stream_create.js to show and hide both the panels.

Add two buttons to facilitate switching between the tabs or panels.

Added new descriptions to 'stream type descriptions'.
2024-06-17 16:20:06 -07:00
sujal 4dd8b258cd stream_settings: Restructure stream creation panel.
Removed the "Stream permissions" heading to simplify the panel.

Moved the "Announce new stream in {stream}" option just above
"Default stream for new users".

Implement a collapsible "Advanced configurations" section,
collapsed by default, to accommodate less commonly changed settings.
This allows for future expansion of stream permission configurations.

Fixes part of #29403.
2024-06-17 16:20:06 -07:00
Kislay Verma 2feee9d756 right_sidebar: Remove realm description for spectators.
This commit removes the realm rendered description from
the right sidebar for spectators.

Fixes #30322
2024-06-16 11:56:11 -07:00
Sahil Batra bf24d5b936 settings: Use common selector for dropdown widget CSS.
This commit updates CSS to use a common selector to set the
width and color properties for all dropdown widgets in the
"Organization permissions" panel as we expect all dropdown
widgets to have same width and color.

This helps in avoiding bug in UI if someone forgots to update
the CSS while adding a new setting using dropdown widget.
2024-06-14 17:11:23 -07:00
Sahil Batra 77f327260d settings: Fix public channel creation setting in dark theme.
The correct CSS was not being applied to the public channel
creation setting dropdown in dark theme and this commit fixes
it by just updating the CSS to use a common selector for all
dropdown widgets in "Organization permissions" panel, so that
we would avoid having this kind of bug in future when more
settings are added.

We do not update the CSS to use a common selector for all
dropdown widgets in the whole settings overlay because
the one used for notification stream settings use different
text color for now.
2024-06-14 17:11:23 -07:00
Karl Stolley 5c23d80db8 navbar: Consolidate view, channel structures and styles.
In addition to simplifying the code in this area, this has the
effect of correcting vertical alignment of icons on views.
2024-06-14 17:06:59 -07:00
Karl Stolley 270ba008d9 informational_overlay: Constrain to variablized width. 2024-06-14 16:43:05 -07:00
Karl Stolley ec33bde88f org_settings: Improve organization preview button layout. 2024-06-14 11:04:18 -07:00
PieterCK 56db3f3d12 informational_overlays: Fix CSS for tables in info_overlay.
This commit refactors the CSS for table in info_overlay
menus (keyboard_shortcuts, search_operators, markdown_help).

In #29859, we began organizing CSS into more specific
variables and selector, which led to the deprecation of
several general CSS rules that affected these tables. The
fix adds a new variable in app_variables.css which is used
at a wrapper div specificly targeting these tables.

Fixes #30428.
2024-06-14 10:50:45 -07:00
Karl Stolley 544d86646e recent_view: Improve alignment and grouping of status emoji. 2024-06-14 10:50:21 -07:00
Karl Stolley 25e19d8417 recent_view: Improve icon sizing and alignment. 2024-06-14 10:50:21 -07:00
Karl Stolley ee0d38166a recent_view: Remove unnecessary group icon styles. 2024-06-14 10:50:21 -07:00
Lauryn Menard 0bd2f0e545 api-docs: Extract logic for rendering events table and use templates.
Extracts code for generating the events table strings to a separate
function and uses templates so that the HTML is clearer.

Updates events table classes for CSS to start with "api-" for
clarity.
2024-06-14 10:29:53 -07:00
Lauryn Menard 963c871858 api-docs: Extract logic for generating individual event strings.
Creates a dataclass for getting the data needed for an individual
event's documentation and uses that dataclass in a separate
function for generating the strings for each event's documentation.

Uses templates for parts of event documentation with HTML and CSS,
and updates CSS classes to have clearer names.
2024-06-14 10:29:53 -07:00