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.9 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>
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>
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>
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
<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>
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">
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">
recent_topics: Don't revive focus when user is trying to type.
2021-02-15 15:33:37 +01:00
<input class="stream-list-filter home-page-input" 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>
</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>