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

86 lines
4.6 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. #}
recent_topics: Make it the default view. Go to Recent Topics on "#", no hash and "#recent_topics". Go to Recent Topics as the last destination for escape key. Map `a` key to All messages and change its hash to `#all_messages`.
2020-09-20 10:14:24 +02:00
<li class="top_left_all_messages top_left_row" title="{{ _('All messages') }} (a)">
<a href="#all_messages" class="home-link">
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
<span class="filter-icon">
all_messages: Change default icon from home to align-left. 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.
2020-11-10 09:17:07 +01:00
<i class="fa fa-align-left" 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>
top_left_corner: Directly use `span.unread_count` to display unreads. 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.
2021-04-09 09:20:15 +02:00
<span class="unread_count"></span>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</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>
left_sidebar: Place the title at private_messages_header div. The title in li.top_left_private_messages applies the title to private-container too. This causes to show "Private message" title to private message elements. To fix this, the title is placed at div.private_messages_header.
2021-03-15 12:50:39 +01:00
<li class="top_left_private_messages">
<div class="private_messages_header top_left_row" title="{{ _('Private messages') }} (P)">
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
<a href="#narrow/is/private">
<span class="filter-icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
{#- squash whitespace -#}
left_sidebar: Show title when mouse hover anywhere on the button. Instead of showing title text when user hovers over the text in the button, show title when user hovers anywhere on the button.
2020-11-24 03:52:21 +01:00
<span>{{ _('Private messages') }}</span>
top_left_corner: Directly use `span.unread_count` to display unreads. 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.
2021-04-09 09:20:15 +02:00
<span class="unread_count"></span>
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
</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>
top_left_corner: Directly use `span.unread_count` to display unreads. 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.
2021-04-09 09:20:15 +02:00
<span class="unread_count"></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>
top_left_corner: Directly use `span.unread_count` to display unreads. 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.
2021-04-09 09:20:15 +02:00
<span class="unread_count"></span>
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</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>
left_sidebar: Add tooltip for recent topics shortcut key.
2020-11-18 07:39:49 +01:00
<li class="top_left_recent_topics top_left_row" title="{{ _('Recent topics') }} (t)">
display_settings: Allow user to set default_view. TextField is used to allow users to set long stream + topic narrow names in the urls. We currently restrict users to only set "all_messages" and "recent_topics" as narrows. This commit achieves 3 things: * Removes recent topics as the default view which loads when hash is empty. * Loads default_view when hash is empty. * Loads default_view on pressing escape key when it is unhandled by other present UI elements. NOTE: After this commit loading zulip with an empty hash will automatically set hash to default_view. Ideally, we'd just display the default view without a hash, but that involves extra complexity. One exception is when user is trying to load an overlay directly, i.e. zulip is loaded with an overlay hash. In this case, we render recent topics is background irrespective of default_view. We consider this last detail to be a bug not important enough to block adding this setting.
2021-03-10 13:56:10 +01:00
<a href="#recent_topics">
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
<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">
stream_header: Use consistent tooltip text.
2021-02-25 04:32:24 +01:00
<div id="streams_header" class="zoom-in-hide"><h4 class="sidebar-title tippy-zulip-tooltip" data-tippy-content="{{ _('Filter streams') }} (q)">{{ _('STREAMS') }}</h4>
streams_nav: Use tippy for tooltip. Tippyjs automatically places it to right, placement can change to bottom if there is no space available to right.
2021-02-25 04:31:10 +01:00
<i id="streams_inline_cog" class='fa fa-cog tippy-zulip-tooltip' aria-hidden="true" data-tippy-content="{{ _('Subscribe, add, or configure streams') }}"></i>
<i id="streams_filter_icon" class='fa fa-search tippy-zulip-tooltip' aria-hidden="true" data-tippy-content="{{ _('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">
left sidebar: Fix misleading "search streams" label. This widget only filters the user's subscription -- it's only suggest public streams that the user is not subscribed to. "Filter" is the correct label for a widget with this use case.
2021-04-15 21:01:42 +02:00
<input class="stream-list-filter home-page-input" type="text" autocomplete="off" placeholder="{{ _('Filter 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">
left sidebar: Change label for exiting topic zoom to Back to Streams. All streams in left-side bar cause discrepancy as it is unable to express if it is heading for the current column as "Streams" is in previous column or is it text description for the back icon. Renaming "All streams" to "Back to streams" removes discrepancy.
2021-04-09 18:57:35 +02:00
<a href="" class="show-all-streams"> <i class="fa fa-chevron-left" aria-hidden="true"></i>{{ _('Back to streams') }}</a>
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>
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>
</div>
left-sidebar: Remove add-streams option out of scrollbar. 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.
2021-03-01 06:33:11 +01:00
{% if show_add_streams %}
<div id="add-stream-link">
<a href="#streams/all"><i class="fa fa-plus-circle" aria-hidden="true"></i>{{ _('Subscribe to more streams') }}</a>
</div>
{% endif %}
Clean left_sidebar.html to use 4 space indentation.
2017-06-05 23:10:26 +02:00
</div>
</div>
</div>