paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

left_sidebar: Fix the layout for filter names that are long.

Browse Source
This commit is contained in:
Daniil Fadeev
2023-08-10 15:07:22 +03:00
committed by Tim Abbott
parent efa3c4a2c6
commit 198ef43ced
2 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/styles/left_sidebar.css
View File

@@ -452,6 +452,19 @@ li.active-sub-filter {
#global_filters { #global_filters {
margin-bottom: $sections_vertical_gutter; margin-bottom: $sections_vertical_gutter;
.global-filter-container {
display: flex;
padding-right: 20px;
.global-filter-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
}
}
.filter-icon { .filter-icon {
display: inline-block; display: inline-block;
min-width: $left_col_size; min-width: $left_col_size;
@@ -459,7 +472,6 @@ li.active-sub-filter {
} }
.top_left_row .unread_count { .top_left_row .unread_count {
margin-right: 20px;
margin-top: 2px; margin-top: 2px;
display: none; display: none;
} }

24
web/templates/left_sidebar.hbs
View File

@@ -3,64 +3,64 @@
<ul id="global_filters" class="filters"> <ul id="global_filters" class="filters">
{{!-- Special-case this link so we don't actually go to page top. --}} {{!-- Special-case this link so we don't actually go to page top. --}}
<li class="top_left_all_messages top_left_row"> <li class="top_left_all_messages top_left_row">
<a href="#all_messages" class="home-link tippy-left-sidebar-tooltip" data-tooltip-template-id="all-message-tooltip-template"> <a href="#all_messages" class="home-link tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="all-message-tooltip-template">
<span class="filter-icon"> <span class="filter-icon">
<i class="fa fa-align-left" aria-hidden="true"></i> <i class="fa fa-align-left" aria-hidden="true"></i>
</span> </span>
{{~!-- squash whitespace --~}} {{~!-- squash whitespace --~}}
<span>{{t 'All messages' }}</span> <span class="global-filter-name">{{t 'All messages' }}</span>
<span class="unread_count"></span> <span class="unread_count"></span>
</a> </a>
<span class="arrow all-messages-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span> <span class="arrow all-messages-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
</li> </li>
<li class="top_left_recent_topics top_left_row"> <li class="top_left_recent_topics top_left_row">
<a href="#recent" class="tippy-left-sidebar-tooltip" data-tooltip-template-id="recent-conversations-tooltip-template"> <a href="#recent" class="tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="recent-conversations-tooltip-template">
<span class="filter-icon"> <span class="filter-icon">
<i class="fa fa-clock-o" aria-hidden="true"></i> <i class="fa fa-clock-o" aria-hidden="true"></i>
</span> </span>
{{~!-- squash whitespace --~}} {{~!-- squash whitespace --~}}
<span>{{t 'Recent conversations' }}</span> <span class="global-filter-name">{{t 'Recent conversations' }}</span>
</a> </a>
</li> </li>
<li class="top_left_mentions top_left_row hidden-for-spectators"> <li class="top_left_mentions top_left_row hidden-for-spectators">
<a href="#narrow/is/mentioned"> <a class="global-filter-container" href="#narrow/is/mentioned">
<span class="filter-icon"> <span class="filter-icon">
<i class="fa fa-at" aria-hidden="true"></i> <i class="fa fa-at" aria-hidden="true"></i>
</span> </span>
{{~!-- squash whitespace --~}} {{~!-- squash whitespace --~}}
<span>{{t 'Mentions' }}</span> <span class="global-filter-name">{{t 'Mentions' }}</span>
<span class="unread_count"></span> <span class="unread_count"></span>
</a> </a>
</li> </li>
<li class="top_left_starred_messages top_left_row hidden-for-spectators"> <li class="top_left_starred_messages top_left_row hidden-for-spectators">
<a href="#narrow/is/starred"> <a class="global-filter-container" href="#narrow/is/starred">
<span class="filter-icon"> <span class="filter-icon">
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i>
</span> </span>
{{~!-- squash whitespace --~}} {{~!-- squash whitespace --~}}
<span>{{t 'Starred messages' }}</span> <span class="global-filter-name">{{t 'Starred messages' }}</span>
<span class="unread_count"></span> <span class="unread_count"></span>
</a> </a>
<span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span> <span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
</li> </li>
<li class="top_left_drafts top_left_row hidden-for-spectators"> <li class="top_left_drafts top_left_row hidden-for-spectators">
<a href="#drafts" class="tippy-left-sidebar-tooltip" data-tooltip-template-id="drafts-tooltip-template"> <a href="#drafts" class="tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="drafts-tooltip-template">
<span class="filter-icon"> <span class="filter-icon">
<i class="fa fa-pencil" aria-hidden="true"></i> <i class="fa fa-pencil" aria-hidden="true"></i>
</span> </span>
{{~!-- squash whitespace --~}} {{~!-- squash whitespace --~}}
<span>{{t 'Drafts' }}</span> <span class="global-filter-name">{{t 'Drafts' }}</span>
<span class="unread_count"></span> <span class="unread_count"></span>
</a> </a>
<span class="arrow drafts-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span> <span class="arrow drafts-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
</li> </li>
<li class="top_left_scheduled_messages top_left_row hidden-for-spectators"> <li class="top_left_scheduled_messages top_left_row hidden-for-spectators">
<a href="#scheduled"> <a class="global-filter-container" href="#scheduled">
<span class="filter-icon"> <span class="filter-icon">
<i class="fa fa-calendar" aria-hidden="true"></i> <i class="fa fa-calendar" aria-hidden="true"></i>
</span> </span>
{{~!-- squash whitespace --~}} {{~!-- squash whitespace --~}}
<span>{{t 'Scheduled messages' }}</span> <span class="global-filter-name">{{t 'Scheduled messages' }}</span>
<span class="unread_count"></span> <span class="unread_count"></span>
</a> </a>
</li> </li>