Commit Graph

190 Commits

Author SHA1 Message Date
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
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 9fb6b4d016 left_sidebar: More carefully generate auto rows for expanded nav. 2024-07-03 16:18:45 -07:00
Karl Stolley 3cb4bb830a left_sidebar: Refactor nav rows for low-resolution screens. 2024-07-02 10:24:20 -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
Karl Stolley c8aeff9a79 left_sidebar: Convert Sass-style vars to CSS vars. 2024-06-28 10:42:35 -07:00
Karl Stolley 18e5b3ab6b unread_counts: Scale unread counts with UI. 2024-06-27 15:28:27 -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 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
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
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 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
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 424b3add6d left_sidebar: Restore righthand padding to DM partners. 2024-06-18 10:09:40 -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
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 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
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 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
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
Aman Agrawal 6e2d501b71 left_sidebar: Fix underline overlapping with login icon. 2024-05-07 16:52:57 -07:00
Karl Stolley 2f4988c67c left_sidebar: Correct vertical alignment on 'more conversations.' 2024-05-06 09:54:36 -07:00
Karl Stolley 50c744db48 left_sidebar: Apply grid to 'more conversations' DM row. 2024-05-03 12:21:59 -07:00
Lauryn Menard d7f9f8333e web-stream-settings: Update strings for stream rename channel.
Updates a chunk of translated strings that overlap between files,
with the streams settings overlay being the starting point for
finding these strings, to use channel instead of stream.

Part of stream to channel rename project.
2024-04-24 14:35:04 -07:00
Aman Agrawal c643d0c0ae css: Specify for columns where it is located.
Navbar and app share same class for sidebar, so it is important
that we specify which one we are referring to if we are not referring
to both of them.
2024-03-18 15:28:03 -07:00
Karl Stolley ecbfd61e6a left_sidebar: Remove padding from bot icon.
This is no longer necessary for vertical alignment, and by
removing the 6px of padding it represents, bot DM rows will have
the same 22px height as other DM rows.
2024-02-21 13:14:02 -08:00
Karl Stolley 1093ff841f left_sidebar: Remove unnecessary padding on bot icon. 2024-02-21 10:32:02 -08:00
Sayam Samal e3878cf64a popovers: Add structural changes and fix CSS overlap.
The paragraph tag was being used along with the bold tag to style the
topic and stream in the popovers. The semantic meaning of these tags
are more specialized and should not be used in this context. Replaced
the <p> tags with the more general <div> tags and accounted for the
bold text via the `font-weight` CSS property.

The `.topic-name` class, used to style the topic/stream name in the
topic list in the left sidebar, was also being used to the style the
topic/stream name in the topic/stream popover. This lead to irrelevant
properties being applied to the popover > topic/stream name. Through
this commit, the styling for both of these different cases are now
separated using the appropriate selectors.

Fixes #27562.
2023-12-11 12:55:25 -08:00
Prakhar Pratyush 25899b1f7e left_sidebar: Decrease follow-icon opacity. 2023-12-07 11:54:36 -08:00
Karl Stolley c651c4f668 icons: Place new log-in and log-out icons across UI. 2023-12-04 12:11:00 -08:00
Karl Stolley 08eb971523 left_sidebar: Adjust STREAMS header grid for spectators. 2023-11-30 08:38:26 -08:00
Karl Stolley a376954a7a left_sidebar: Respect unread display settings on STREAMS header.
Fixes: #27762
2023-11-29 13:33:19 -08:00
Karl Stolley 319cfc7d7f left_sidebar: Establish better-centered DM row height.
Despite the existing comment in the CSS, the previous DM row was
22.5px tall. Adjusting the padding makes for 22px tall box, which
greatly improves the centering of the unread count within its
bounding box.
2023-11-28 15:04:38 -08:00
Karl Stolley ae146c3df7 left_sidebar: Grid 'Back to streams' with unread count.
This also hides the usual STREAMS header when zoomed in to more
topics.
2023-11-21 09:16:43 -08:00
Karl Stolley bfaa328bd7 left_sidebar: Make streams header sticky. 2023-11-21 09:16:43 -08:00
Karl Stolley b04dd62f8a left_sidebar: Preserve DM layout when zoomed into more conversations. 2023-11-16 09:21:48 -08:00
Karl Stolley 6890c9d171 left_sidebar: Place unread count right of All DMs icon.
Also set a CSS variable for header-icon widths in the left sidebar.

Fixes: #27559
2023-11-15 10:07:04 -08:00
Karl Stolley 614abd58be left_sidebar: Place unread count right of stream controls.
Fixes: #27380
2023-11-15 10:07:04 -08:00
Karl Stolley b2c2afe374 left_sidebar: Keep all DM container rows to same right margin. 2023-11-14 16:43:28 -08:00
Karl Stolley 554f33d033 left_sidebar: Set shared right margin on DM section. 2023-11-13 08:27:28 -08:00
Karl Stolley f2e8d2dc07 left_sidebar: Set border radius on rows for all states. 2023-11-09 17:39:26 -08:00
Karl Stolley 34475bf867 left_sidebar: Establish filter-handling grid on Streams, DM headers.
Fixes part of #27559.
2023-11-09 17:39:26 -08:00
Karl Stolley 2235413c15 left_sidebar: Establish grid on Direct Messages header. 2023-11-09 17:39:26 -08:00
Karl Stolley 12bf754a8a left_sidebar: Consolidate left-sidebar-title styles. 2023-11-09 17:39:26 -08:00
Karl Stolley 3f36c52f41 sidebars: Structurally separate left- and right-sidebar headings. 2023-11-09 17:39:26 -08:00
Anders Kaseorg 9b83dc1b79 stylelint: Fix declaration-block-no-redundant-longhand-properties.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-11-08 16:11:15 -08:00
Aman Agrawal eaf69dc9d5 left_sidebar: Employ existing left_sidebar_menu_icon_visible.
Seems like `left_sidebar_menu_icon_visible` had a regression where
its CSS was removed.

We use it show stream row icon when stream popover is visible.
2023-11-06 14:20:48 -08:00
Karl Stolley 322b06b364 left_sidebar: Ensure mark as read vdots follows home view.
Regardless of which home view a user selects, it will have a
hoverable vdots menu and the option to mark all as read.
2023-11-03 10:08:37 -07:00
Karl Stolley 9226e8bdca left_sidebar: Use grid or flexbox to order selected home view. 2023-11-03 10:08:37 -07:00
Karl Stolley 5d2d8f9215 left_sidebar: Add logic and styles to show unreads on selected home view. 2023-11-03 10:08:37 -07:00
Karl Stolley 14ef3a5464 left_sidebar: Display dark-mode condensed unreads without alpha. 2023-11-03 09:33:06 -07:00
Karl Stolley 6784dee775 left_sidebar: Align 'more conversations' and 'back to streams'. 2023-11-02 09:56:29 -07:00
Karl Stolley 65ed4d0ac2 left_sidebar: Provide inline-grid layout for DM row status emoji. 2023-11-02 09:56:29 -07:00
Karl Stolley b50a09f99e left_sidebar: Set vertical alignment on 22px-tall DM row. 2023-11-02 09:56:29 -07:00
Karl Stolley 4e03209c76 left_sidebar: Establsh CSS Grid on DM rows. 2023-11-02 09:56:29 -07:00
Karl Stolley 825a7106c6 left_sidebar: Use DM identifiers around direct-messages list. 2023-10-30 10:14:28 -07:00
Karl Stolley dcd891a176 left_sidebar: Use dm-list class. 2023-10-30 10:14:28 -07:00
Karl Stolley 01ca3e119b left_sidebar: Use DM identifiers on DM containers. 2023-10-30 10:14:28 -07:00
Karl Stolley f496b40cd6 left_sidebar: Use DM identifiers on DM list items. 2023-10-30 10:14:28 -07:00
Karl Stolley 9062c75481 left_sidebar: Use DM identifiers on DM row box. 2023-10-30 10:14:28 -07:00
Karl Stolley a175c3829c left_sidebar: Clean up DM list structures and selectors.
This adds some temporary styles to preserve the DM row layout
as-is, but that will be removed as part of the grid implementation.
2023-10-30 10:14:28 -07:00
Karl Stolley 3385d5862b left_sidebar: Include right-hand padding on topic, nav labels. 2023-10-25 09:53:05 -07:00
Karl Stolley 4fac53e35c left_sidebar: Restore and note positioning context for unread dots. 2023-10-25 08:17:11 -07:00
Tim Abbott db05d7ef0c css: Revert sidebar-menu-icon specificity change.
3ac0c3c401 incorrecly removed
specificity declarations needed to prevent that CSS from applying to
the right sidebar, which hasn't been properly prepared for this
change.
2023-10-24 16:23:30 -07:00
Aman Agrawal 2f33fad5df left_sidebar: Add popover to make different views default.
Fixes #27324
2023-10-24 16:16:56 -07:00
Karl Stolley 1a18faaf02 left_sidebar: Increase size of condensed icons. 2023-10-24 12:29:45 -07:00
Karl Stolley 3ac0c3c401 left_sidebar: Correctly align vdots across all rows.
This brings modern alignment methods to all vdots instances,
including in views, streams, and topic rows.

This also aligns the vdots in the condensed view row with
all the others in the left sidebar.
2023-10-24 12:29:45 -07:00
Karl Stolley 21908b7a9e left_sidebar: Vertically align all vdots. 2023-10-24 12:29:45 -07:00
Karl Stolley 528f494d41 left_sidebar: Establish filter rows as grids. 2023-10-24 12:29:45 -07:00
Karl Stolley 56eaf9b153 left_sidebar: Place redesign icons in expanded views. 2023-10-24 12:29:45 -07:00
Karl Stolley 8e7265fbb4 left_sidebar: Correctly handle focus on views controls. 2023-10-20 12:27:19 -07:00
Karl Stolley c3062e80bb left_sidebar: Place redesigned icons in views popover. 2023-10-20 12:27:19 -07:00
Karl Stolley 2c8a688983 left_sidebar: Place redesign icons in condensed views. 2023-10-20 12:27:19 -07:00
Karl Stolley 24d300f3fd left_sidebar: Tune icon sizes for condensed presentation.
This slightly increases the size of the clock for recent
conversations, and descreases the size of the left-aligned icon
for all messages.

Icon sizes in the expanded view are left untouched.
2023-10-20 12:27:19 -07:00
Karl Stolley 41635566fd left_sidebar: Improve logic for showing Scheduled messages. 2023-10-20 12:27:19 -07:00
Karl Stolley 46ce408a5f left_sidebar: Add a 3-dot menu to condensed views.
Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-20 12:27:19 -07:00
Karl Stolley 4dd1bf7e32 left_sidebar: Expand and condense the VIEWS navigation. 2023-10-20 12:27:19 -07:00
Karl Stolley 458d6411b4 left_sidebar: Handle condensed icon unread states. 2023-10-20 12:27:19 -07:00
Karl Stolley 9f5ca4f6f7 left_sidebar: Set backgrounds on condensed icon visible and hover. 2023-10-20 12:27:19 -07:00
Karl Stolley 7774abfe04 left_sidebar: Structure Views header with standalone icons.
This also introduces a combo grid/flex layout, which will also be
applied to the DM and Streams headings.

Because there are now multiple classes referenced from the
Puppeteer tests, those selectors now include the expanded
navigation area's parent ID selector.
2023-10-20 12:27:19 -07:00
Karl Stolley b19986b777 left_sidebar: Use custom Zulip star icons.
This commit replaces all previous Font Awesome references in the
left side bar and relevant popovers with the custom Zulip star
icon.

Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-10-10 16:48:20 -07:00