We avoid complicated code to update unread counts
by just using vdom.js.
One small change here is that if click on "more
topics", we replace it with the spinner instead
of putting the spinner after it. This saves us
a redraw under the new scheme.
If you clicked for no more topics and then the server didn't find any,
we once had code that would say "No more topics" in light gray at the
bottom of the topic list.
The feature appears to have been broken by some detail in the
`self.dom` refactoring. More importantly, it's not clear it's useful
as opposed to clutter.
Since we added the `stream.first_message_id` feature, it's now very
rare for the `more topics` option to appear when there aren't in fact
older topics that could be fetched. In cases where there are not, the
UI is still clear about what's happening -- it shows a loading
indicator and then displays a list of topics that doesn't have
anything new.
So we're removing this feature; we can re-add it without too much
difficulty if user feedback in the future suggests it would be useful
after all.
This avoids a stream having potentially near-infinite height when
opened in a stream with a large number of unread topics; the benefit
is that you can easily access the next stream.
We show an unread count next to "more topics" to make it hard to miss
that there might be more, older topics with unread messages.
With CSS work by Anders Kaseorg.
Fixes#13087.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Hovering over user names (and user circles for PM List) now displays
Name, Status Message and Last online time in a js tooltip.
Hovering over group names displays the names of all group members.
Unavailable users are shown as "Last active: Today".
Hovering on a user circle in the Buddy List results in a js tooltip
with Active/Idle/Offline/Unavailable for
green/orange/white/white-with-line.
Resolves#11607.
This commit modifies the `#add-stream-link` element to be a `div`
containing the previous `a` element. The margin that was added to
`#stream-filters-container .simplebar-content` is then moved to that new
`div`.
This preserves the intended behaviour of the commit which introduced
the margin, to fix#12519 while removing an unnecessary scrollbar
which could hide the top-most stream in the stream list.
Fixes#13050
Signed-off-by: David Wood <david@davidtw.co>
A somewhat recent refactoring of the left sidebar had introduced a gap
between the hover areas that looked off; this fixes this with a slight
rearrangement with where the 1px of space between elements lives.
Fixes#12508.
cssnano reduces this to a constant in a production build. (We could
add postcss-calc if we wanted this reduced in development.)
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Fixes the click targets for the four links in the top left side bar
(All messages, Private messages, Mentions and Starred messages).
The click target now cover the whole row for these links.
Fixes#12449
perfect-scrollbar replaces both the appearance and the behavior of the
scrollbar, and its emulated behavior will never feel native on most
platforms. SimpleBar customizes the appearance while preserving the
native behavior.
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
Added a new button at the bottom of the stream list which redirects
users to '/#streams/all' where they can create new streams or subscribe
to new streams.
The button is not visible to guests.
Fixes#11642.
Now that we have a scroll container for the PM list,
it doesn't make much sense to limit the number to
five.
We may resurrect this feature if "more conversations"
actually fetches more conversations, but it doesn't
currently.
We also may soon make it easy to limit PMs to just
unread messages, which will make the max-5 feature
perhaps less necessary, and we don't want to make
the UI overly complicated.
Center aligned the icons from streams and decreased the font-size of
the icons from the global filters.
This dramatically improves the visual appearance of the left sidebar.
Fixes: #11917.
We have this strange business requirement that the
blue-ish highlights for the current PM go into the
left gutter and all the way to the right edge.
We also have markup that treats the list of PMs
as a list inside the list item for the "Private
messages", which makes sense logically.
Before this change, the padding was done for the
outer top-left `ul`, but that caused the inner PM
rows not to have that padding when you hovered them.
Now we pad each individual list item and/or inner
list item or div.
Fixes#11879.
We now use 10px to the left of major elements in
left sidebar.
And we then explicitly use 19px for the following:
icons in top left
indent for (more conversations)
stream hashtag icons
stream lock icons
We also kill off 2px of gutter that was caused
by whitespace in the HTML (and was slightly messing
up alignment of names beneath "Private messages").
Finally, we make the topic indent a bit more explicit.
In this commit, I've added a feature to unstar all the starred
messages. This is useful, e.g., for folks who are using starred
messages to keep track of things they should come back when next at
their desktop.
The event flow is the standard one for a feature with a confirmation modal:
(1) User clicks on unstar all messages.
(2) We display a confirmation modal; if the user confirms, we send a
request to the backend to clear all starred messages.
(3) The events system sends that UI update back to us, removing the
stars from the UI.
Fixes#11401.
Most elements, apart from chevrons, now have explicit
font sizes.
In some cases I chose integer values that were close
to the calculated values you would get with all the
ratio calculations.
And then I tweaked how the hashtag/lock icons get
aligned.
The alignment for those icons if off in this version; it'll be fixed
in an upcoming commit.
The fonts there used to be 14.2px due to an arcane
calculation. Now we explicity set a value.
If you expand Private Messages, the font inside now
is explicitly set to 13px. It used to be 12.8px due
to a complex calculation.
This is a fairly big commit, but at the end
it simplifies a lot of things.
It's difficult to fix highly coupled code in
incremental steps because, well, it's highly
coupled code.
The main thing this does is give each type of
chevron in the left sidebar its own class
* all-messages-arrow (NEW)
* stream-sidebar-arrow
* topic-sidebar-arrow
Before this change, the "All messages" chevron
was using stream-sidebar-arrow, which was a
strange name for something that's not actually
in the stream sidebar. Obviously this was
cargo culted.
There was not much JS to change here--we just
fix the click handler for "All messsages".
And then there's a one-line change to the template,
and the rest is re-organizing the CSS.
Using a more specific class avoids confusion related
to the .arrow class, which is not only a popover concept,
but also a Zulip concept in the left sidebar.
The way we build chevrons is super messy and highly
coupled. This comment reflects an audit I did on the
code in its current state.
Subsequent commits will make things a bit easier to
understand.
We could arguably just use zero-unreads everywhere,
but we definitely don't want zero-topic-unreads
inside our PM list.
I prefer to just have these two concepts:
zero-pm-unreads
zero-topic-unreads
And it's super easy to share CSS properties for both.
The antialiasing decisions we made for the webapp should be constant
over the entire page, not limited to particular subsections or themes.
If we wanted antialiasing, we should do it on the entire page, not
individual random widgets. But it's not clear we actually want to do
it on the entire page. The `-moz-osx-font-smoothing: grayscale`
setting now happens by default in OSX Mojave (40% world market share
right now and growing), so there's no reason to override it. And
without retina displays, generally, subpixel rendering provides better
results than antialiasing (which overrides subpixel rendering).
Thanks to Anders Kaseorg for advice on this issue.
This is mostly adding markup, calling some convenient
functions in buddy_data.js, and adjusting CSS.
To make the circles update dynamically, I mostly
orchestrate this though activity.js for now. It's
possible we'll want to adjust that eventually to
happen through something like a `presence_events`
dispatcher, but that's essentially what
a good part of `activity.js` does now.
This fixes a longstanding UI issue when you have way too many recent
private message conversations, as you can now scroll down the list to
find what you're looking for.
Fixes#5384.
shubhamgupta2956
Steve Howell
Tim Abbott
Vinit Singh
David Wood
Ryan Rehman
Anders Kaseorg
Alexandra Ciobica
Anders Kaseorg
ruchit2801
Challa Venkata Raghava Reddy