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

94 lines
4.8 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)">
app: Add an unused home-link class to left sidebar for Ferdi/Franz. Because Franz has been to fix their broken Zulip recipe, and as a result, currently the Franz/Fedri Zulip integration throws an exception on every new message (fixed in https://github.com/adambirds/recipe-zulip/pull/6/files), it is probably worth re-introducing a version of the element it's looking for to unbreak it.
2020-04-09 15:12:06 +02:00
<a href="#" class="home-link">
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
<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>
sidebars: Replace chevron with ellipsis-v icon from the sidebars. The chevron sometime can be confused as an icon for expanding the stream topics especially for the new users. This commit replaces the confusing chevron icon from the stream-sidebar, topic-list, user-presence-row, all-messages and starred-messages with ellipsis-v icon(vertical three dots). Fixes: #7115
2020-06-06 01:27:23 +02:00
<span class="arrow all-messages-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" 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>
sidebars: Replace chevron with ellipsis-v icon from the sidebars. The chevron sometime can be confused as an icon for expanding the stream topics especially for the new users. This commit replaces the confusing chevron icon from the stream-sidebar, topic-list, user-presence-row, all-messages and starred-messages with ellipsis-v icon(vertical three dots). Fixes: #7115
2020-06-06 01:27:23 +02:00
<span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</li>
recent_topics: Move launch button to top left sidebar. Make dispaly `a` tag a block to so that it is clickable on anywhere in the button space.
2020-06-26 09:24:23 +02:00
<li class="top_left_recent_topics top_left_row">
<a href="#recent_topics">
<span class="filter-icon">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
{#- squash whitespace -#}
<span>{{ _('Recent topics') }}</span>
</a>
</li>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</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: Add data-placement to settings icon to prevent flickering. Changing the position of tooltip using data-placement=bottom fixes this flickering artifact. Fixes: #16676
2020-11-17 02:22:18 +01:00
<i id="streams_inline_cog" class='fa fa-cog' aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="{{ _('Subscribe, add, or configure streams') }}"></i>
left_sidebar.html: Upgrade to use font-awesome 4.7 icon prefixes.
2018-07-02 02:53:50 +02:00
<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 %}
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-15 17:43:33 +02:00
<div id="add-stream-link">
<a href="#streams/all"><i class="fa fa-plus-circle" aria-hidden="true"></i>{{ _('Add streams') }}</a>
</div>
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
{% endif %}
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</div>
</div>
</div>
</div>