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.
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>
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.
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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`.
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.
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.
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.
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.
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.