Commit Graph

1822 Commits

Author SHA1 Message Date
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
N-Shar-ma 50fcc740bc compose: Fix bug causing layout shift on expanding compose box.
The messagebox-wrapper div is removed, and it's only style `flex: 1` is
applied to the messagebox div. The `height: 100%` and `margin-top: 5px`
styles on the messagebox div were earlier causing it to move 5px down,
outside the messagebox-wrapper div, when the compose box was expanded.
2024-06-14 10:18:08 -07:00
Karl Stolley 90f6e19948 user_groups: Restore correct max-height value.
This restores a value that was erroneously changed in #30388.
2024-06-14 10:01:58 -07:00
Vector73 e8a5cb99bf api_docs: Improve events table and fix font style of events title. 2024-06-13 06:53:51 -07:00
PieterCK dae4c28b5b css: Add new css for rendered markdown table in dark mode.
Add a new dark mode css in app_variable.css for rendered
markdown tables. This rule sets a brighter color for tables
in messages / chat to make it more visible when the user is
using dark theme.

Fixes zulip#29856.
2024-06-12 06:45:00 -07:00
PieterCK e16b8eba56 css: Refactor css for markdown thead background color.
This refactor aims to make managing css for rendered
markdown table easier by abstracting the css for thead
background color into a new variable in app_variable.
2024-06-12 06:45:00 -07:00
PieterCK 55fe0c5c85 css: Refactor css for markdown table border color.
This refactor aims to make managing css for rendered
markdown table easier by abstracting the css for table
border color into a new variable in app_variable.
2024-06-12 06:45:00 -07:00
Aman Agrawal 4e9ea5d782 help: Fix left sidebar not bouncing on mac.
Since left sidebar was in fixed position, mac's rubber-band scroll
effect was not working on it while it was working for others making
the bounce look weird.

Fixed by letting it bounce with the rest of the elements on the page.
2024-06-12 05:33:36 -07:00
N-Shar-ma ac3b5b3b04 compose: Redesign and relocate compose expand / collapse button.
The compose expand / collapse button is moved from the top right of the
compose area to the top right corner inside the compose textarea /
preview.

The textarea / preview and the button area shares the same grid parent.
25px extra padding is added to and margin is subtracted from the right
of the element so the button is visually inside it. It appears only on
hovering the compose area, and uses a new custom icon.

Fixes: #28791.
2024-06-11 14:13:10 -07:00
N-Shar-ma 41d790bd08 compose: Make the preview box background color same as the textbox's. 2024-06-11 14:13:10 -07:00
Karl Stolley 47c3903ce0 settings: Present modal sidebars as gridded rows. 2024-06-11 13:34:11 -07:00
Karl Stolley a4aa8d48ca settings_modal: Scope sidebar transition to properties in use. 2024-06-11 13:34:11 -07:00
Aman Agrawal c5b8255d42 navbar: Move left sidebar toggle icon to left of org logo.
Make the org logo smaller and moves the left sidebar toggle icon
to the left of the logo.
2024-06-11 12:42:42 -07:00
Aman Agrawal 043e0311d2 css: Expand to occupy left sidebar space if available on narrow widths. 2024-06-11 12:42:42 -07:00
Aman Agrawal 8aafb72e18 css: Let middle column expand to full width in fluid layout.
When left / right sidebar are hidden, we let middle column to take
up the extra space.
2024-06-11 12:42:42 -07:00
Aman Agrawal 80cc699f42 css: Fix left sidebar toggle button misaligned on small window height. 2024-06-11 12:42:42 -07:00
Aman Agrawal 96dac9ece9 navbar: Add button to toggle left sidebar. 2024-06-11 12:42:42 -07:00
Aman Agrawal c531631ecf navbar: Rename left sidebar toggle button unread count indicator.
Renamed to match the name with the wrapper element and used class
so that we can apply same CSS to other buttons.
2024-06-11 12:42:42 -07:00
Aman Agrawal 9fec1f69ed navbar: Rename left sidebar toggle button.
This name better describes what the button does and using a class
helps us use it's CSS and events for other buttons.
2024-06-11 12:42:42 -07:00
Aman Agrawal 38482c2e4e right_sidebar: Fix user list toggle button not spanning navbar height.
We don't need to reduce height of user list toggle button on
narrow widths. Reduced height is already applied to the user list
toggle button when the window height is below a threshold.
2024-06-11 12:42:42 -07:00
Karl Stolley db5f584684 info_density: Sanely restore Zulip-style oversize emoji. 2024-06-11 12:25:16 -07:00
Karl Stolley cc3202a1be info_density: Size and align emoji precisely with line-fitted values. 2024-06-11 12:25:16 -07:00
Karl Stolley 1270e4b74b info_density: Calculate values for inline-box vertical alignment.
Co-Authored-By: Greg Price <greg@zulip.com>
2024-06-11 12:25:16 -07:00
adnan-td ef65137675 compose_pills: Fix long text overflow in DM recipient box.
Removes the fixed height of the input field in compose
DM recipient box. This commit makes the behaviour of recipient
compose box equal to input pills used else where.

Fixes: #27688.
2024-06-11 12:00:15 -07:00
adnan-td 2521adb0cd invite_user_modal: Fix background color of input field. 2024-06-11 11:59:40 -07:00
Vector73 f4c111b68a api_docs: Convert event names to lowercase in api docs. 2024-06-11 11:17:38 -07:00
Vector73 a4108e05ad api_docs: Add table of links for easy navigation in events api docs. 2024-06-11 11:17:38 -07:00
Aman Agrawal 16f2c4195b activity: Move `.container` CSS from bootstrap to activity.css.
* `.container` class is only used in `/activity/support` and
  `/activity/remote/support` pages. It is also used in emails but
  it has its own CSS.

* Since the CSS applied is localized and looks good, we just
  move the CSS relevant to us to `activity.css` which is used
  by both of these pages.

* Searched `"container"`, ` container `, `"container ` and
  ` container"` to look for the uses of this class.
2024-06-11 10:42:43 -07:00
Aman Agrawal b40e9acfdf portico: Remove stale CSS.
`container` class was removed from error pages as part of
b2f0677c25.
2024-06-11 10:42:43 -07:00
Karl Stolley 520b7b6a9e compose: Declare banner dimensions in ems. 2024-06-11 10:38:40 -07:00
Karl Stolley 2b92baa754 compose: Size collapsed compose buttons relatively. 2024-06-11 10:38:40 -07:00
Karl Stolley 47cf447bf2 compose: Express recipient box height in ems. 2024-06-11 10:38:40 -07:00
Karl Stolley 131ae54eb7 compose: Prevent blowout on recipient box. 2024-06-11 10:38:40 -07:00
Sayam Samal 01cbaa154f popovers: Add `.popover-menu-tab-group` class to popover tab pickers.
This commit, adds the `.popover-menu-tab-group` class to the tab pickers
that appear together with the other popover menu options and thus
need to match their spacing and margins for a uniform look.

This removes the need to maintain a cluttered list of tab pickers that
need to be styled as such in the `popovers.css` file.
2024-06-10 16:54:11 -07:00
Sayam Samal 70fb213868 visibility_policy_popover: Use the new "popover-menu" popover theme.
As part of the popover menu redesign, this updates the topic visibility
popover to use the new "popover-menu" popover theme and improves
accessibility by using appropriate ARIA attributes.

This also moves the `:focus-visible` CSS rule to apply to any tab
picker in a popover, removing the need to explicitly add it to each
tab picker.

Fixes part of #28699.
2024-06-10 16:54:11 -07:00
N-Shar-ma ff4d7974f2 css: Remove dead code for an unused empty div. 2024-06-10 13:25:21 -07:00
Sahil Batra f98a3fc684 settings: Use new group setting to check permission for creating public channels. 2024-06-10 12:24:45 -07:00
Kenneth Rodrigues f53a7cdffa reaction-view: Create has reaction operator.
Create has:reaction search operator and search suggestions.
Create sidebar view for the user to view their messages that
have reactions using has:reaction sender:me operators.
Add custom heading for the view and tooltip in the sidebar.
Add documentation for the new operator.

Fixes: #27328.
2024-06-10 11:46:37 -07:00
Karl Stolley 835bda9634 navbar: Express font and icon sizes in ems. 2024-06-07 11:28:39 -07:00
Karl Stolley 7e1a5e7e45 navbar: Remove unused fa-hashtag CSS. 2024-06-07 11:28:39 -07:00
Karl Stolley dc60317dad info_density: Set calculated font-size on body. 2024-06-07 11:18:52 -07:00
Aman Agrawal 371cd0da6c recent_view: Use html as scroll container.
Fixes #17933, #27517

Instead of `recent_view_table`, we make `html` as our scroll container.
This fixes an important bug for us where filters sometimes disappear
due to them scrolling under navbar which is unexpected. Since we are
now using separate containers to display rows and
filter (while includes table headers), where filters use sticky
positioning, this bug will be fixed.
2024-06-07 10:17:10 -07:00
Karl Stolley 1d7e0367b8 right_sidebar: Establish inner grid on selectable_sidebar_block. 2024-06-06 17:08:13 -07:00
Karl Stolley 55e0b99670 right_sidebar: Establish outer grid on user rows. 2024-06-06 17:08:13 -07:00
Karl Stolley 74800ba69a right_sidebar: Set user rows to normalized em-based line-height. 2024-06-06 17:08:13 -07:00
Karl Stolley 9b7107ab08 user_circles: Specify colors as CSS variables. 2024-06-06 17:08:13 -07:00
Aman Agrawal fe162290f1 portico: Remove extra margin on help page.
Likely an effect of recent error pages refactoring.
Tested /help and /api page on desktop and mobile width.
2024-06-06 11:06:08 -07:00
Karl Stolley 53c1c4d98f widgets: Improve structure and layout of headers. 2024-06-05 17:49:21 -07:00
Karl Stolley 81d9eb4a54 widgets: Present poll options as flexboxes. 2024-06-05 17:49:21 -07:00
Karl Stolley ae90258942 widgets: Extend flexbox to widget inputs, buttons. 2024-06-05 17:49:21 -07:00
Karl Stolley da6f69f8b2 widgets: Present to-do items with flexboxes. 2024-06-05 17:49:21 -07:00
Karl Stolley f78fef699e widgets: Set margin only on widget bottom. 2024-06-05 17:49:21 -07:00
Karl Stolley 7820c5e15e widgets: Add classes to todo-widget div and span tags. 2024-06-05 17:49:21 -07:00
Karl Stolley 9b8e8bf0d3 widgets: Remove unnecessary styles. 2024-06-05 17:49:21 -07:00
Sayam Samal 09bf7d0f95 personal_menu_popover: Move the theme switcher to the settings group.
This moves the theme switcher from the randomly placed position to the
settings group since it is one of the user preference settings.
2024-06-05 11:16:55 -07:00
N-Shar-ma e959a392c9 compose: Make conversation arrow double as a go-to-conversation button.
The chevron arrow icon before the topic / dm user field now also acts as
a go to conversation button. Whenever the functionality is available,
the plain icon changes to look and behave like a button. The old go to
conversation button on the right of the field is removed.

Fixes: #28697.
2024-06-05 09:26:01 -07:00
Aman Agrawal b1a143e47c css: Remove unused `row-fluid` class. 2024-06-05 09:15:32 -07:00
Sayam Samal d93a3bb175 topic_sidebar_actions: Use sliding animation in the visibility switcher.
This commit updates the sidebar topic actions popover to use the new
sliding tab switcher for the topics visibility policy switcher.

This also includes changes such as hiding the popover only on
successful request completion, and adds error feedback by indicating
it via the sliding animation.
2024-06-04 15:56:44 -07:00
Sayam Samal db4c5cdfc6 visibility_policy_popover: Use sliding animation in the switcher.
This commit updates the topic visibility popover to use the new
sliding tab switcher, which was introduced in personal menu >
theme switcher.
2024-06-04 15:56:44 -07:00
Aman Agrawal c6c8e831f8 portico_error_page: Apply `error` class to all the error pages.
This helps us control the CSS applied to the elements outside the
content scope of `portico_error_page.html`.
2024-06-04 09:41:34 -07:00
Aman Agrawal b2f0677c25 portico: Remove `container` and `row-fluild` bootstrap classes.
Fixes #28526

* Removed `container` and `row-fluid` class from error pages.
* Use a variable for footer height.
* Made header sticky instead of fixed allowing us to position
  page content without adding arbitrary padding or margin at top.
  Header is around 60px in height, so reduced that much top padding
  or margin.
2024-06-04 09:41:34 -07:00
Aman Agrawal 27d2b89412 unsupported_browser: Remove not required extra bottom padding. 2024-06-04 09:41:34 -07:00
Lauryn Menard 6f7e288b1f billing-css: Remove out-of-date rule for input styling.
These were removed in commits ebc7cbaf3, 6cadf333f and e9a0c8a03.
2024-06-04 08:49:43 -07:00
Karl Stolley 0f6072d2d6 left_sidebar: Condense nav rows to standard size. 2024-06-03 10:32:29 -07:00
Karl Stolley 5dafaf9deb left_sidebar: Expand topic rows to prominent size. 2024-06-03 10:32:29 -07:00
Aman Agrawal bb6e6ecaa5 hello: Redesign landing page.
Co-authored-by: Vlad Korobov <terpimost@gmail.com>
Co-authored-by: Alya Abbott <alya@zulip.com>
2024-06-02 21:45:37 -07:00
Aman Agrawal ddf14116b2 emoji_popover: Fix white arrow color in dark theme.
Tested left, top and bottom placement of emoji popover to check
if arrow color is correctly displayed in both dark and light theme.
2024-05-31 15:39:09 -07:00
Sayam Samal 34e6d84cf5 topic_actions_popover: Flatten nested lists for better accessibility.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).

Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
    offering a list of choices.

- `role="menuitem"`, `role="menuitemcheckbox"`,
    or`role="menuitemradio"` to child elements based on their function.

- `role="group"` to the topic visibility picker, identifying it as a
    container for related menu items.

- `role="none"` to `<li>` elements, removing the implied `listitem`
    role that conflicts with the parent menu structure.
2024-05-31 15:28:01 -07:00
Sayam Samal ed9d2a7af6 gear_menu_popover: Flatten nested lists for better accessibility.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).

Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
  offering a list of choices.

- `role="menuitem"`, `role="menuitemcheckbox"`,
  or`role="menuitemradio"` to child elements based on their function.

- `role="none"` to `<li>` elements, removing the implied `listitem`
  role that conflicts with the parent menu structure.
2024-05-31 15:28:01 -07:00
Sayam Samal 3c1d248abe message_actions_popover: Flatten nested lists for better accessibility.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).

Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
  offering a list of choices.

- `role="menuitem"`, `role="menuitemcheckbox"`,
  or`role="menuitemradio"` to child elements based on their function.

- `role="none"` to `<li>` elements, removing the implied `listitem`
  role that conflicts with the parent menu structure.

Also removes the unused `should_display_reminder_option` code, which
should have been removed in f40855bad2.
2024-05-31 15:27:30 -07:00
Karl Stolley a2a735273b left_sidebar: Maintain em-equivalent 16px separator row height. 2024-05-31 15:18:06 -07:00
Karl Stolley b4b5d03a8e left_sidebar: Set topic rows to normalized em-based line-height. 2024-05-31 15:18:06 -07:00
Karl Stolley 9a2cc09ec2 left_sidebar: Set channel rows to em-based line-height. 2024-05-31 15:18:06 -07:00
Karl Stolley 3f9897cfee left_sidebar: Set DM rows to em-based line-height. 2024-05-31 15:18:06 -07:00
Karl Stolley d8a73c8637 left_sidebar: Set navigation area rows to em-based line-height. 2024-05-31 15:18:06 -07:00
Karl Stolley ef68132a5a left_sidebar: Declare header row-heights as prominent rows. 2024-05-31 15:18:06 -07:00
Karl Stolley 4405136ffb info_density: Declare em-based line-height vars for sidebar rows. 2024-05-31 15:18:06 -07:00
Karl Stolley 3d04f7dbda info_density: Set a minimum line-height on body. 2024-05-31 15:18:06 -07:00
Tim Abbott 097066f412 Revert "recent_topics: Change background color in dark mode on hover on a row."
This reverts commit 4ee37244bb.

This was not found to be uniformly agreed as an improvement.
2024-05-28 14:38:50 -07:00
sanchi-t ca74c95c60 user_profile: Display `Saved` feedback.
Visually confirms successful profile changes with a clear
`Saved` message.

Fixes part of #26692.

Co-authored-by: Kunal Sharma <v.shm.kunal@gmail.com>.
Co-authored-by: Angelica <angelica.ferlin@gmail.com>.
2024-05-28 14:34:57 -07:00
Karl Stolley 0884b96fc6 spoilers: Style headers in Markdown-neutral way. 2024-05-28 14:34:10 -07:00
Anders Kaseorg caf6387514 stylelint: Fix shorthand-property-no-redundant-values.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2024-05-26 19:20:10 -07:00
Sahil Batra 5e347e971d invite: Remove code for old UI.
We still had some code in invite.ts for the textarea element
which was replaced by pill container, so this commit removes
that code.

This commit also removes the CSS for textarea and radion buttons
which are no longer present in the UI.
2024-05-25 17:48:48 -07:00
Karl Stolley 852637d3b3 left_sidebar: Convert stream-privacy icon sizes to ems. 2024-05-24 10:23:41 -07:00
Karl Stolley d5a5044ecd left_sidebar: Improve icon alignment in stream rows. 2024-05-24 10:23:41 -07:00
Karl Stolley dda75a56bc left_sidebar: Consolidate .stream-privacy styles. 2024-05-24 10:23:41 -07:00
Karl Stolley 20d6dd110a left_sidebar: Align more-topics indicator on topic grid. 2024-05-22 17:24:35 -07:00
Karl Stolley 50a7e3cf2c left_sidebar: Flatten renamed .sidebar-topic-name selector. 2024-05-22 17:24:35 -07:00
Karl Stolley 0fbdd02d87 compose: Tune send-controls vdots for narrowest viewports. 2024-05-22 11:36:28 -07:00
Karl Stolley ac6ac58385 compose: Strengthen layout in send-controls area. 2024-05-22 11:36:28 -07:00
Aman Agrawal 0d3e223493 compose: Fix formatting popover persists on wide screens.
Reproducer:

1. Make your window narrow, to get the `...` formatting buttons menu.
2. Open the menu.
3. Make your window wide again.
2024-05-21 14:56:00 -07:00
Anders Kaseorg b545abe1e2 typos: Fix typos caught by mwic.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2024-05-20 13:55:00 -07:00
ecxtacy ad177a8b48 css: Show 'x' button hover styling when hovered over 'x'.
When input pills are hovered, the 'x' button is highlighted.
This commit ensures that 'x' button is highlighted only if the
'x' button is hovered, not anywhere else on the pill.

Author: ecxtacy <dc.dhruvchouhan@gmail.com>.
2024-05-17 10:47:22 -07:00
Aman Agrawal 7203661d99 support: Set discounted price instead percentage for customers.
This allows us to set the price of a plan exactly as discussed with
the customer.
2024-05-16 02:18:43 -07:00
Isabela Pereira fee0470a97 popovers: Refine word wrapping in user profile.
This commit refines word wrapping in user profile popovers. It implements 'overflow-wrap: break-word;' for category ‘name’ items (e.g., ‘Email’, ‘User ID’) and 'overflow-wrap: anywhere;' for category ‘value’ segments, ensuring proper line breaks and preventing overflow issues. Additionally, addressed prettier problems to maintain code consistency.

Fixes #22865
2024-05-15 17:20:21 -07:00
Lauryn Menard 7a61044a03 org-settings: Update tab for default channel settings.
Updates instances of default-streams-list to instead be
default-channels-list as the data-section for the organization
settings overlay is part of the URL hash.
2024-05-15 12:18:36 -07:00
Sahil Batra 6f5143b5b8 invite: Fix margins around subscriptions banner.
This commit fixes the margins around banner for default stream
subscriptions, shown to users who cannot subscribe others, to
be same as that for other banners like the one shown when
description is not set for the organization.
2024-05-15 10:59:05 -07:00
Sahil Batra 016917679e invites: Do not show streams if user cannot subscribe others.
We do not show the streams list in invite modal if the user
does not have permission to subscribe others to stream and
show a notice mentioning it.
2024-05-14 14:20:07 -07:00
Shubham Padia 4ee37244bb recent_topics: Change background color in dark mode on hover on a row.
Fixes #30083.
We have used the dark theme color for the left sidebar row hover:
`--color-background-active-narrow-filter`. We are not using that variable
directly since we don't want a change in that color affecting the color in
recent conversations.
We've also used a single color on hover compared to 2 different colors
for unread and read row before. Light mode also uses a single color on
hover.
Relevant CZO conversation:
https://chat.zulip.org/#narrow/stream/101-design/topic/Hover.20color.20in.20Recent.20conversations.20dark.20mode.2E/near/1797727
2024-05-14 11:46:37 -07:00
nimishmedatwal 941c5daf36 navbar: Describe views in top navbar.
Adds description in views styled like stream descriptions also adds a
help center link to the appropriate page at the end of each
description.

Fixes #29769.
2024-05-13 17:56:30 -07:00
Aman Agrawal 80d19fe15d css: Fix theme switch changing color of elements at different intervals.
Due to these transitions the theme switch from dark <-> light was
not pleasant as the background color and color changed at different
intervals.
2024-05-13 13:21:10 -07:00