Commit Graph

47 Commits

Author SHA1 Message Date
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
Tim Abbott b7cfefc213 css: Add custom styling for starred message counts.
We use an inverted color scheme to what we use for unread messages, so
that one's eyes scan these as different from unreads.

We also need to introduce a 1px offset because the border takes up space.

Fixes #17938.
2021-04-14 11:43:38 -07:00
Aman Agrawal ab87325fea pm_list_item: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal 019afcd40d topic_list_item: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal b6d9577b48 stream_list: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal 84afc67369 top_left_corner: Directly use `span.unread_count` to display unreads.
In an effort to use a common class to display unread counts across
the app, we simplify the elements used to show unreads and use a
single `span` with `unread_count` class to do so.
2021-04-14 10:57:16 -07:00
Gaurav Pandey 7ddf6435a9 left-sidebar: Remove add-streams option out of scrollbar.
This commit removes the option to add more streams out of scrollbar
as it is not visible on mobile devices or organizations with large number of
streams until scrolled down.
2021-03-16 14:10:04 -07:00
Gaurav Pandey 56f16ca9dd left-sidebar: Display ellipsis icon by default on touch-based devices.
Hover does not work for touch-based devices like mobile phones.
Hence the the icons does not appear, making the user unaware of its
presence on such devices. The following media property displays the
icon by default for such behaviour.
2021-03-01 15:40:39 -08:00
Aman Agrawal b84bce2bc7 all_messages: Change default icon from home to align-left.
Since All messages narrow is no longer home page for webapp,
we change its icon to align-left which also shows a concept of
interleaved topics / messages.
2021-02-25 17:31:32 -08:00
Anders Kaseorg 72d6ff3c3b docs: Fix more capitalization issues.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-23 11:46:55 -07:00
YashRE42 bd72ba76f3 left-sidebar: Rename .css file to left_sidebar.css.
This changes the file name to existing conventions, it does not,
however, change the actual `.left_sidebar` tag used in the
app.
2020-10-18 14:09:47 -07:00