Commit Graph

60 Commits

Author SHA1 Message Date
Aman Agrawal ec1a114c7e left_sidebar: Fix extra space between stream header and PM header. 2022-11-16 12:00:11 -08:00
Aman Agrawal fbe9a9e539 left_side_userlist: Remove feature from frontend.
Fixes #23517.

While this feature was added to Zulip very early, it has been troubled
for most of that time; it never looked great visually, had a lot of
implementation complexity around resize.js, and has a weird model (a
setting that changes the UI only in certain window sizes).

This option is not commonly used; while a significant portion of users
have it enabled, many of them just don't use window sizes where it
actually has an effect. So it's not clear that it will be missed if
removed; we got very few bug reports when it was completely broken for
a few days after we first integrated the new left sidebar private
messages design.

Even with it no longer being broken, it does not work very well with
the addition of the new PMs section in the left sidebar. (Having two
scrollbars in the sidebar looks quite awkward.) The new private
messages section in the left sidebar also addresses some of the use
cases for always keeping the Users list always visible, even in narrow
windows.

This option is only removed from frontend for now. To make this
decision easily reversible, the backend code of this feature
is still kept.
2022-11-14 12:23:55 -08:00
Aman Agrawal 542aea4b1c left_sidebar: Remove `chevron-left` from back to streams.
This will help us make `Back to streams` look better with PMs header.
2022-11-08 13:25:42 -08:00
Aman Agrawal 46967002dd left_sidebar: Show PM section in topics zoomed view.
This is important to preserve the invariant that the unread count for
private messages is always visible.

Fixes #23391.
2022-11-08 13:25:09 -08:00
Aman Agrawal fc7ec5d8f9 left_sidebar: Left align show all streams with other buttons.
This includes a slight color change to `show-all-streams` to
match with the other headers.
2022-11-08 13:24:11 -08:00
Aman Agrawal 1192488240 left_sidebar: Left align all the section headers with the icons. 2022-11-08 13:24:11 -08:00
Aman Agrawal 41a60f84b9 left_sidebar: Correctly align user status icon.
Align the user status icons with the other icons in the left
sidebar so that their center falls in the same vertical line.
2022-11-08 13:24:11 -08:00
Aman Agrawal ef067eafad topic_list: Move topic filter out of topics list `ul`.
Instead of topic filter box being a part of the list when keeps
updating, we move it out and fix its position.

This should reduce rendering time of topics list and provide
a smoother experience to users when waiting for topics list to
load.
2022-11-04 13:40:46 -07:00
Aman Agrawal 6042e91fe8 left_sidebar: Hide sub to more streams in topics list view (zoom-in). 2022-11-01 08:24:24 -07:00
Aman Agrawal 925fa4ca50 left_sidebar: Make topics list header sticky.
Fixes #22911

`Back to streams`, stream name and filter topics are all sticky
now and their color changes based on which filter is active and
the currently applied theme.
2022-10-28 17:43:33 -07:00
Aman Agrawal 470553b457 left_sidebar: Fix some PMs not being displayed when PMs are zoomed in.
We added sticky headers above the PM list but forgot to subtract
it from the max-height of the scrollable container.
2022-10-26 13:47:08 -07:00
jai2201 6f9e97921d pm_section: Create collapsible private messages section.
This commit introduces the change of rendering private messages
section as collapsible, whose data-fetching logic came with zulip#21357.

We now have separated out `Private messages` from `top_left_corner`
section and shifted it below the `global_filters` in a different
separate section along with stream list with common scroll bar
in left-sidebar.

The new PM section will be opened by-default on loading the page
and will have a toggle-icon in its header, clicking on which makes the
section collapse/expand accordingly.

In default view, only recent 5 PM threads would be shown
and would append the active conversation as the 6th one at last
if not present in those 5, similar to how topics list work.

In PM section with unreads, a maximum of 8 conversations
would be shown and rest of them would be hidden behind
the 'more conversations' li-item, clicking on which takes
to the zoomedIn view of PM section where all the present
PM threads would be visible and rest of the sections of left-sidebar
will get collapsed.

Fixes #20870.

Co-authored-by: Aman Agrawal <amanagr@zulip.com>
2022-10-26 13:47:08 -07:00
Eyuel Berga Woldemichael c8cfef0581 left-sidebar: Show the 3-dots icon when the menu is selected.
This commit fixes the issue where the 3-dots menu icons on the left
sidebar disappear even though the associated popover is open by
toggling a special CSS class on the menu item. It follows the same
approach used by the emoji picker on the message feed UI.

Fixes  #23157
2022-10-24 10:29:23 -07:00
Aman Agrawal bc937168cd left_sidebar: Remove outline from streams scrolling container.
Simplebar sets tabindex for `simplebar-content-wrapper` which
makes it focusable. The outline which comes with it when focused
is annoying, so we remove the outline.
2022-08-30 22:29:31 -07:00
Tim Abbott 4a34b7d18e left-sidebar: Make Subscribe to more streams more informative.
The "Subscribe to more streams" widget has always had this tension
between "Subscribe" vs. "Create" in a way that felt like whatever we
wrote could be confusing. To address this, we enhance the component to
advertise whether additional existing streams that the user can
subscribe to actually exist or not.

- When the user has N>0 streams they can subscribe to, we display
"Browse N more streams".

- When the user has no streams they can subscribe to (i.e. they're
already susbcribed to all the ones they could join) but the user has
permission to create streams, we show a "Create a stream" link.

- If the user doesn't have permission to subscribe to or create any
streams, we don't show a link at all.

Fixes #21865.

Co-authored-by: Jai soni <jai_s@me.iitr.ac.in>
2022-08-15 12:32:43 -07:00
madrix01 c1b5021d84 stream_list: Sort muted to end of sections and add labels.
The stream list left sidebar currently has 3 sections:
* Pinned (+ Muted pinned streams)
* Active (+ Muted active streams)
* Inactive streams

Previously, these sections were separated by horizontal lines, which
did not provide an easy way to discern why there were sections. We add
labels to these section dividers to help with this.

Additionally, within each section, we now sort all muted streams to
the bottom, so that they general minimal clutter.

Fixes #19812.
2022-08-06 21:59:23 -07:00
Anders Kaseorg 1e6bc5b36b styles: Delete some unused CSS.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-06-10 12:27:48 -07:00
anurastogiji 7a24da70a1 search: Fix x icon overlap in search and filter inputs.
We add `padding-right` to input field so that input do not overlap with
`x`and add `text-overflow: ellipsis` to make overflow less jarring.

Fixes #19765
2022-05-05 17:12:23 -07:00
Aman Agrawal 41b7b3d7a4 css: Adjust vertical alignment of globe and lock icons. 2022-03-25 17:02:18 -07:00
Aman Agrawal 7e365f7ee3 icons: Replace fa-globe icon with a custom globe icon. 2022-03-01 11:36:38 -08:00
jai2201 1b0b0d64e5 left-sidebar: Align more-topics li item with other topic names.
The class `sidebar-topic-check` has a minimum width assigned for the
`topic-resolved` icon to create an appropriate space for that column
whether or not there are resolved topics present.

Add a corresponding `margin-left` to align `more topics`
appropriately.
2022-02-18 13:39:08 -08:00
Tim Abbott c4af509339 left sidebar: Increase bottom margin.
This improves the visual appearance of the state where you're scrolled
to the bottom with your mouse over a URL.
2022-02-11 14:33:54 -08:00
jai2201 e11c495dff left-sidebar: Leave space below link for it to be visible.
Add a margin below the subscription link for it to be visible when we
hover over links, where the browser will display the URL in the
bottom-left corner of the screen.
2022-02-11 14:28:30 -08:00
Tim Abbott a6c364cdd7 left sidebar: Rename streams_inline_cog.
The icon hasn't been a cog for some time.
2022-02-11 10:58:32 -08:00
Tim Abbott 3673075974 Revert "left-sidebar: Allow up to 2 lines for group PMs."
This reverts commit 97ffe2b123.

This broke the topic names, and also seems to have some problems with
unread counts and long names.
2022-02-07 11:39:57 -08:00
Jai soni 97ffe2b123
left-sidebar: Allow up to 2 lines for group PMs.
This change makes it easier to see who is present in a group private message conversation
when some of the users in it have long names.

We disable a stylelint rule for this line, because this particular -webkit prefixed CSS rule 
works in all modern browsers including Firefox.

Fixes #21003.
2022-02-04 14:43:13 -08:00
Aman Agrawal bf93ae1644 ui: Align bottom components in the same horizontal line. 2021-11-22 18:44:32 -08:00
Julia Bichler 32f206e1e5 popovers: Add sidebar menu to delete all drafts.
This provides a convenient interface to hide all drafts.

Fixes #19360.

However, we may want to continue to implement a button in the drafts
overlay as well for doing this operation.
2021-11-22 17:01:47 -08:00
Wesley Aptekar-Cassels df8f0b2afe left_sidebar: Add "Drafts" item.
This currently shows the drafts as a popup. Eventually, we'll want to
migrate it to be a view in the center pane, as we did with Recent
Topics.

This uses the same style as starred messages in order to show the number
of drafts.

See CZO for more context:
https://chat.zulip.org/#narrow/stream/101-design/topic/drafts.20in.20sidebar
2021-11-10 12:53:44 -08:00
Anders Kaseorg 17e72da336 styles: Fix declaration-block-no-redundant-longhand-properties.
Fixed manually.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 17:34:13 -07:00
Anders Kaseorg 52ad928d3e styles: Fix shorthand-property-no-redundant-values.
Generated by stylelint --fix.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 17:34:13 -07:00
Anders Kaseorg ea88ec9e06 styles: Fix stylelint rule-empty-line-before.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-17 07:15:09 -07:00
Tim Abbott db928c545b css: Make muted topic rows somewhat more visible. 2021-09-21 16:53:10 -07:00
Tim Abbott 2a2654d5f5 css: Fix vertical alignment of unread message pills.
I'm not entirely sure what broken this, but both the unread message
pills and the \vdots menu were not centered vertically.

Fix for the unread message pills should be general and complete, since
it just declares center alignment, but the \vdots menu is a hack;
further cleanup of that element's CSS is needed to end up with
something good.
2021-07-28 12:04:38 -07:00
Wesley Aptekar-Cassels 21fbc94e37 css: Remove some redundant styles.
These links (in addition to the recent topics one) were all already set
as block elements by a rule further up in this same file.
2021-07-15 15:08:50 -07:00
Gaurav Pandey 18c546e4b5 left-sidebar: Add support for showing resolve-topic-prefix.
We currently have the resolved topics prefix shown as part of
the topic name in the left sidebar. However this causes inconsistency
while showing topic names. Hence this adds support for showing the
prefix in the cutter to the left of the topic name.

Fixes #18989.
2021-07-05 18:02:40 -07:00
Aman Agrawal b99a720012 left_sidebar: Hide "Add streams" widget for spectators. 2021-06-16 10:16:40 -07:00
Tim Abbott 147e243113 css: Use default font for left sidebar private messages.
Previously, this used a slightly smaller font size than the default.
Given that it looks visually fine to use the default font size, it's
better to remove this inconsistency.

It's also worth noting that we plan to move this component to be
parallel to STREAMS in a way that is likely to also want the new font
size, so this is a step towards that goal.
2021-06-11 16:02:56 -07:00
Tim Abbott f5369db8f1 css: Remove duplicate specifications of default font size.
These unnecessary references to 14px font size complicate any effort
to adjust the font size in Zulip.
2021-06-11 15:11:33 -07:00
Aman Agrawal 2f46b80005 left_sidebar: Use padding instead of margin around clickable icons.
For create stream icon specially, this is useful to allow user having
some extra space around the icon to click.

This fixes the bug that you can have the tooltip of "Add streams" and
by hovering at the bottom of `+` icon but clicking on it shows stream
search.
2021-06-10 09:01:43 -07:00
m-e-l-u-h-a-n 3f0ed46fa2 left-sidebar: Add topic filter input in zoomed topic view.
Fixes: #18505.
2021-06-08 15:09:26 -07:00
Aman Agrawal 4b4fdad0e3 left_sidebar: Replace cog icon with plus icon.
We add a popover on click which allows user to create or browse
streams too.

Reason for doing so:

At present, it is hard to discover how to join streams
and create new streams. In particular:

Users have a hard time finding the gear in the STREAMS
header in the left sidebar and realizing that it's relevant for them.
Even once a user is in the STREAMS menu, the Create
stream button is hard to spot.

Fixes #18694.
2021-06-08 14:55:48 -07:00
Aman Agrawal ac360b3a6b left_sidebar: Increase font size of STREAM header icons.
Font size increased from 13px to 14px to allow users to click easily;
this was already the default, so we can just delete the line.
2021-06-07 14:14:02 -07:00
Nikhil Maske 725f975e96 left_sidebar: Set the width of stream-list-filter to 236px. 2021-05-25 19:49:49 +05:30
Aman Agrawal 637c7e297c streams_filter_icon: Convert from id to class.
This will allow us repeat the class which we cannot do with id.
2021-05-20 14:41:40 -07:00
Tim Abbott 01245c86b3 sidebars: Add a bit of margin above sidebar links.
This avoids slightly glitchy looking behavior in certain scroll
positions where there just isn't enough space above link to make it
look like it's top of the other element.
2021-04-30 16:07:25 -07:00
Nikhil Maske 74bc1a0fe5 pm_left_col: Shift the PMs list slightly towards right.
Currently we show the PMs list align with the Private
messages header that make them no difference between
header and its elements list and it may confuse the user
to notice that PMs list is expanded or not. We follow
a trend of shifting the child elements slightly towards
right from the parent header element in stream-topic list.
Maintaining this trend we fix this issue similarly, the
PMs list is shifted by 10px towards the right.
2021-04-30 16:02:31 -07:00
Nikhil Maske b7fb130578 left_sidebar: Replace user_circle_class with fa fa-group icon.
It is difficult to distinguish group PMs from 1:1 PMs, so to
improve the UI it is better to show different icon for group
PMs. Here we are using fa fa-group icon for group PMs.

Fixes #18069.
2021-04-30 16:02:29 -07:00
Aman Agrawal e41fffc43e pm_list: Show correct unread unread counts.
We only update the `.private_messages_header` here since
unread_counts of `.expanded_private_message` are updated
via `pm_list.update_private_messages`.

This fixes the bug of PMs in `.expanded_private_message` having
the same unread count as `private_messages_header`.

Since we rerender the DOM of `.expanded_private_message` every
time we update unread count of PMs, we don't need to manually
update them here. Also, we always keep them on display since
there is no real need to toggle them. They are not visible
when they have 0 unread counts via `.zero_count`.
2021-04-15 10:08:50 -07:00
Tim Abbott 85a7325757 css: Delete orphaned starred messages CSS.
This CSS stopped being used in
84afc67369.
2021-04-14 11:50:07 -07:00