Commit Graph

68 Commits

Author SHA1 Message Date
David Wood 7fc72dff44 left sidebar: Avoid unnecessary scrollbar.
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>
2019-10-30 13:21:28 -07:00
Tim Abbott 5ffbb33a92 left sidebar: Fix centering of streams chevrons.
These appeared to be a few pixels above center in a way that looked
slightly off.
2019-10-07 13:52:48 -07:00
Ryan Rehman 8d0800210e left sidebar: Fix gaps between hover areas.
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.
2019-10-07 13:52:03 -07:00
Anders Kaseorg d0634181b5 styles: Fix left sidebar indentation for PostCSS migration.
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>
2019-08-30 15:06:29 -07:00
vinitS101 f86a41da4b left_sidebar: Fix click target of links in the top left sidebar.
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
2019-07-09 13:12:10 -07:00
Alexandra Ciobica 8f9fa151a6 css: Center left sidebar `Add streams icon`.
The `+` from the add streams button was not on the same line as the
`#`s and the text was not aligned with streams name.  These changes
fix that.
2019-06-12 16:22:51 -07:00
Alexandra Ciobica 7544d0eb11 css: Add space below `Add streams button`.
This ensures the browser's showing the link feature doesn't occlude
this button.

Fixes: #12519.
2019-06-12 16:22:02 -07:00
Anders Kaseorg 141088586b Completely replace perfect-scrollbar with SimpleBar.
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>
2019-05-17 12:06:51 -07:00
vinitS101 611f1f8fd2 left_sidebar: Add "+Add streams" to bottom of streamlist.
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.
2019-05-14 16:12:51 -07:00
Tim Abbott 75215f0014 left sidebar: Simplify filter icon CSS logic. 2019-04-13 13:21:51 -07:00
Alexandra Ciobica d9edcbfd46 css: Center vertically the global-filters and streams arrows.
Decreased the top with 1px because it was not vertically aligned with respect to the text.
2019-04-13 13:21:51 -07:00
Alexandra Ciobica 97b9755484 left sidebar: Cleanup duplicate icon padding css. 2019-04-13 13:21:42 -07:00
Alexandra Ciobica 4eeb33275e css: Align left sidebar global-filters icons with text.
Removed the top pixel from all messages and added top: -1px to private
messages to align the envelope properly.
2019-04-13 13:12:16 -07:00
Steve Howell 3cfc3ca24b pm list: Remove "(more conversations)" feature.
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.
2019-04-11 16:26:54 -07:00
Alexandra Ciobica d8e9975b9d css: Align left sidebar icons horizontally and fix the spaces.
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.
2019-04-11 10:47:30 -07:00
Steve Howell 695399322b css: Don't underline topics when we hover them.
We generally don't combine underline effects and
hover backgrounds.

We also remove some CSS related to underlines that
was overridden.
2019-03-14 13:54:38 -07:00
Steve Howell ee9612c927 css: Hover individual topic rows.
Hovering the entire block was confusing.
2019-03-14 13:54:35 -07:00
Steve Howell c2858f1c64 css: Fix hover for "Private messages".
It's ugly to hover the entire block--just hover the individual
rows.
2019-03-14 13:52:50 -07:00
Steve Howell aae3f8a04a css: Fix blue highlights for Private Messages.
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.
2019-03-14 13:52:39 -07:00
Steve Howell 837801ed21 css: Tweak hover color in day mode.
(The new color here shows up better against the
background.  Rishi Gupta provided the new color.)

This only affects day mode.
2019-03-14 13:52:27 -07:00
Steve Howell 10f9b9c616 minor: Change markup for icon fonts.
I am trying to phase out the confusing global-filter
name.
2019-03-14 13:50:09 -07:00
Steve Howell 8efd5a72ec minor: Remove unused padding.
This is overridden in all cases.
2019-03-14 13:50:09 -07:00
Steve Howell 36fb6cd2b2 minor: Remove unused CSS for global-filter. 2019-03-14 13:50:09 -07:00
Steve Howell 504759f432 css: Consolidate some widths in left sidebar.
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.
2019-03-08 12:04:20 -08:00
ruchit2801 9f7e90f68b left sidebar: Add an "unstar all messages" option.
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.
2019-03-07 20:52:00 -08:00
Tim Abbott 25f6eccc65 css: Deduplicate some blocks for stream-privacy. 2019-03-04 16:05:16 -08:00
Steve Howell aaf92a8977 css: Tweak the gutter below the top-left corner.
I think 16px is still enough to offset STREAMS,
and putting STREAMS slightly higher gives it more
emphasis.
2019-03-04 15:59:35 -08:00
Steve Howell ed30b45afd css: Clean up top-left icons and margins.
Making the icons slightly smaller helps us align the
icons and text in the top-left corner to the icons
and text in the streams section.
2019-03-04 15:59:35 -08:00
Steve Howell c3a5a1d3d7 css: Simplify hash/lock icon geometry in left sidebar.
Instead of lining these up with margin tweaks, we just
set the min-width on their common parent.
2019-03-04 15:58:33 -08:00
Steve Howell c57d6b22ec css: Simplify font sizes for left sidebar elements.
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.
2019-03-04 15:58:33 -08:00
Steve Howell 6be5129056 fonts: Use 14px for top left corner.
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.
2019-03-04 15:58:32 -08:00
Steve Howell 9b616e2411 css: Use more specific selectors for sidebar icons.
This paves the way to tweak chevron geometry on an
individual basis without accidentally breaking other
stuff.  It's also more self-documenting CSS.
2019-03-04 15:35:40 -08:00
Steve Howell 2cf898a0a5 css: Make "All messages" chevron normal size.
14px was too big. (I confirmed on chat that this
was no longer wanted.)
2019-03-04 15:35:40 -08:00
Steve Howell 194619c667 css: Clean up left sidebar chevrons.
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.
2019-03-04 15:35:40 -08:00
Steve Howell 0a848e412f buddy list: Use user-list-arrow class.
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.
2019-03-04 15:35:40 -08:00
Steve Howell 0551b36053 css: Add comment explaining chevron markup.
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.
2019-03-04 15:35:40 -08:00
Steve Howell 9820b07616 minor: Introduce zero-pm-unreads.
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.
2019-03-04 15:35:40 -08:00
Tim Abbott ddb965110f CSS: Remove manual antialiasing configuration.
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.
2019-03-04 15:12:48 -08:00
Steve Howell e67cf30dfd private messages: Add user circles to top left.
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.
2019-02-18 14:22:37 -08:00
Challa Venkata Raghava Reddy 815d009006 left_sidebar: Add scrollbar for private messages region.
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.
2019-02-18 14:20:55 -08:00
Steve Howell 4de04c460a css: Reduce scope of topic-name selector. 2019-02-16 10:07:46 -08:00
Rishi Gupta 68d73f2e12 left sidebar: Remove border from starred messages count.
The padding changes move the number a bit to the right and down, towards
where the bottom right corner of an unread count box would have been. This
makes the number look better aligned with the unread count boxes above it.
2019-02-12 16:05:35 -08:00
Steve Howell 96cbea3c11 bug fix: Move stream search out of scroll container.
We want the search widget, when visible, to be
outside the scroll container for the stream list.

One obvious use case is if you start scrolling, and
then realize it might be less effort to search.

Also, for user search, it already worked this way.

We have to add a couple resizing hooks here, but
it's not necessary to change the actual resize
calculation, since we move the section inside
of #streams_header, which is already accounted
for.

The only markup change here is to add
a `stream_search_section` class.  I don't
know why we use `notdisplayed` here instead of
jQuery, or what `input-append` is for, but I
considered them outside the scope of this change.

We can also remove some crufty CSS that was
compensating for it being inside the container.
2019-02-12 10:26:13 -08:00
Steve Howell 3a12b514f1 css: Remove Group PMs from **left** sidebar.
First, we are not removing Group PMs from the
right sidebar, where most people see it.

There is a setting called:

    [ ] User list in left sidebar in narrow windows

There are probably very few people that turn that on,
and even when they do, the setting only takes effect
when your window is less than a certain width.

This feature bitrots very quickly, because very few
core maintainers use it.

It's already kind of broken.  It gets very crowded,
and we get CSS bugs when we move the right sidebar
into the left sidebar.  (We can fix those bugs, but
they crop up unexpectedly due to the nature of CSS.)

We historically tried to maintain a ratio between
stream list, single-user buddy list, and group-user
buddy list, but the group-user buddy list gets
particularly crowded out, and it's basically useless
now.

We want to revisit the entire feature eventually, but
this commit at least gives the normal buddy list some
breathing room.

Also, if you need to see the info in the group PM
list, you can basically expand "Private Messages" to
see your recent group PM conversations.  And if you
want to see who's actually online, that info is
already implicit from the normal buddy list.
2019-02-11 19:17:52 -08:00
Tim Abbott e1832d890a css: Move conversation-partners styles to left-sidebar.css. 2019-02-11 19:12:20 -08:00
Steve Howell b10ef272f1 css: Simplify selector for conversation partners. 2019-02-11 17:47:54 -08:00
Steve Howell fd76b1b226 css: Limit scope of filter-icon css. 2019-02-11 17:47:54 -08:00
Steve Howell 5db26cb7fe css: Remove sidebar-title cruft.
This CSS seems to go back to when sidebar-titles
were links.  It's scoped at the wrong level, and
it seems to have no effect.
2019-02-11 17:47:54 -08:00
Steve Howell 350ed9fcaf css: Limit li padding/border to narrows_panel. 2019-02-11 17:47:54 -08:00
Steve Howell bd3b715cf2 css: Set hover only on narrows_panels. 2019-02-11 17:47:53 -08:00