Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/templates/zerver/app/left_sidebar.html

83 lines
4.3 KiB
HTML
Raw Normal View History

accessibility: Add navigation roles for sidebars.
2018-11-08 17:17:12 +01:00
<div class="left-sidebar" id="left-sidebar" role="navigation">
refactor: Rename bottom_sidebar to narrows_panel. The name `bottom_sidebar` was misleading, because it includes the entire "normal" left sidebar. It includes the 4 narrow links at the top plus the stream/topic list. We now call is narrows_panel. Note that the left sidebar sometimes also includes the user list (with a display setting turned on). And it will eventually include other views. We also remove an intermediate value in the resize calculations.
2019-02-10 02:04:14 +01:00
<div class="narrows_panel">
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
<ul id="global_filters" class="filters">
{# Special-case this link so we don't actually go to page top. #}
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-12 15:08:28 +01:00
<li class="top_left_all_messages top_left_row active-filter" title="{{ _('All messages') }} (Esc)">
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
<a href="#">
<span class="filter-icon">
left_sidebar.html: Upgrade to use font-awesome 4.7 icon prefixes.
2018-07-02 02:53:50 +02:00
<i class="fa fa-home" aria-hidden="true"></i>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</span>
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-06 21:17:06 +01:00
{#- squash whitespace -#}
left-sidebar: Remove unused hover-underline class. The CSS for this was removed in 953ee778f332c2bad99ffcbcbac98ef5ff449616.
2019-02-27 21:12:27 +01:00
<span>{{ _('All messages') }}</span>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
<span class="count">
<span class="value"></span>
</span>
</a>
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-01 21:06:53 +01:00
<span class="arrow all-messages-arrow"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</li>
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-12 15:08:28 +01:00
<li class="top_left_private_messages">
<div class="private_messages_header top_left_row">
<a href="#narrow/is/private">
<span class="filter-icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
{#- squash whitespace -#}
<span title="{{ _('Private messages') }} (P)">{{ _('Private messages') }}</span>
<span class="count">
<span class="value"></span>
</span>
</a>
</div>
ui: Replace set_up_scrollbar with data-simplebar attribute. With perfectScrollbar, we needed to call a function from JavaScript to enable a scrollbar on a new element, but simplebar has a much simpler default API one can do by using data-simplebar attributes in the HTML. So we can delete all the scrollbar creation/deletion code. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-05-17 23:11:33 +02:00
<div id="private-container" class="scrolling_list" data-simplebar>
pm_list: Set up #private-container once and replace its contents. Instead of deleting and rebuilding #private-container every time its contents need to be updated, just replace its contents. This eliminates some scrollbar flashing. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-05-03 03:16:09 +02:00
</div>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</li>
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-12 15:08:28 +01:00
<li class="top_left_mentions top_left_row">
top left: Move "Starred messages" down. Since it has different unread counts, we want it grouped away from the other three.
2019-02-05 23:14:44 +01:00
<a href="#narrow/is/mentioned">
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
<span class="filter-icon">
top left: Move "Starred messages" down. Since it has different unread counts, we want it grouped away from the other three.
2019-02-05 23:14:44 +01:00
<i class="fa fa-at" aria-hidden="true"></i>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</span>
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-06 21:17:06 +01:00
{#- squash whitespace -#}
left-sidebar: Remove unused hover-underline class. The CSS for this was removed in 953ee778f332c2bad99ffcbcbac98ef5ff449616.
2019-02-27 21:12:27 +01:00
<span>{{ _('Mentions') }}</span>
frontend: Create data structure for starred messages.
2018-08-17 03:46:32 +02:00
<span class="count">
<span class="value"></span>
</span>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</a>
</li>
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-12 15:08:28 +01:00
<li class="top_left_starred_messages top_left_row">
top left: Move "Starred messages" down. Since it has different unread counts, we want it grouped away from the other three.
2019-02-05 23:14:44 +01:00
<a href="#narrow/is/starred">
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
<span class="filter-icon">
top left: Move "Starred messages" down. Since it has different unread counts, we want it grouped away from the other three.
2019-02-05 23:14:44 +01:00
<i class="fa fa-star" aria-hidden="true"></i>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</span>
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-06 21:17:06 +01:00
{#- squash whitespace -#}
left-sidebar: Remove unused hover-underline class. The CSS for this was removed in 953ee778f332c2bad99ffcbcbac98ef5ff449616.
2019-02-27 21:12:27 +01:00
<span>{{ _('Starred messages') }}</span>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
<span class="count">
<span class="value"></span>
</span>
</a>
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-02-22 12:28:29 +01:00
<span class="arrow starred-messages-sidebar-arrow"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</li>
</ul>
<div id="streams_list" class="zoom-out">
left sidebar: Fix hover title for "STREAMS". If you click on STREAMS, it opens the streams filter, so now the hover reflects that. The wording here is consistent with what you see when you hover over USERS. Maybe we want to say "Search ..." instead of "Filter ..." for these two headings. Maybe this is just a bit of a misfeature, though, since we already have search icons, and we don't have consistent behavior for the GROUP PMs header.
2019-03-26 18:15:30 +01:00
<div id="streams_header" class="zoom-in-hide"><h4 class="sidebar-title" data-toggle="tooltip" title="{{ _('Filter streams') }}">{{ _('STREAMS') }}</h4>
left_sidebar.html: Upgrade to use font-awesome 4.7 icon prefixes.
2018-07-02 02:53:50 +02:00
<i id="streams_inline_cog" class='fa fa-cog' aria-hidden="true" data-toggle="tooltip" title="{{ _('Subscribe, add, or configure streams') }}"></i>
<i id="streams_filter_icon" class='fa fa-search' aria-hidden="true" data-toggle="tooltip" title="{{ _('Filter streams') }} (q)"></i>
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-09 19:09:56 +01:00
<div class="input-append notdisplayed stream_search_section">
sidebars: Disable autocomplete for user and stream search inputs. Fixes #9269.
2018-05-01 06:42:36 +02:00
<input class="stream-list-filter" type="text" autocomplete="off" placeholder="{{ _('Search streams') }}" />
left-sidebar: Fix styling of Streams header to not use links.
2018-01-04 18:14:27 +01:00
<button type="button" class="btn clear_search_button" id="clear_search_stream_button">
left_sidebar.html: Upgrade to use font-awesome 4.7 icon prefixes.
2018-07-02 02:53:50 +02:00
<i class="fa fa-remove" aria-hidden="true"></i>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</button>
</div>
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-09 19:09:56 +01:00
</div>
<div id="topics_header">
<a href="" class="show-all-streams"> <i class="fa fa-chevron-left" aria-hidden="true"></i>{{ _('All streams') }}</a>
</div>
ui: Replace set_up_scrollbar with data-simplebar attribute. With perfectScrollbar, we needed to call a function from JavaScript to enable a scrollbar on a new element, but simplebar has a much simpler default API one can do by using data-simplebar attributes in the HTML. So we can delete all the scrollbar creation/deletion code. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-05-17 23:11:33 +02:00
<div id="stream-filters-container" class="scrolling_list" data-simplebar>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
<ul id="stream_filters" class="filters"></ul>
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-11 19:44:27 +02:00
{% if show_add_streams %}
<a id="add-stream-link" href="#streams/all"><i class="fa fa-plus-circle" aria-hidden="true"></i>{{ _('Add streams') }}</a>
{% endif %}
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</div>
</div>
</div>
</div>