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

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
This commit is contained in:
SiddharthVarshney 2020-06-06 04:57:23 +05:30 committed by Tim Abbott
parent 47ece353e6
commit 177ec5b2d5
6 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/styles/left-sidebar.scss
View File

@ -366,6 +366,7 @@ li.top_left_starred_messages {
padding-right: 0.25em; padding-right: 0.25em;
display: inline-block; display: inline-block;
width: 13px; width: 13px;
vertical-align: middle;
} }
/* /*
@ -379,29 +380,35 @@ li.top_left_starred_messages {
} }
/* /*
The All Messages and Stream chevrons are The All Messages and Stream ellipsis-v(vertical 3 dots) are
pretty similar. pretty similar.
*/ */
.all-messages-sidebar-menu-icon, .all-messages-sidebar-menu-icon,
.starred-messages-sidebar-menu-icon, .starred-messages-sidebar-menu-icon,
.stream-sidebar-menu-icon { .stream-sidebar-menu-icon {
top: 3px; top: 1px;
font-size: 0.8em; right: 0px;
font-size: 1.0em;
text-align: center;
padding: 0px 6px 0px 6px;
} }
/* /*
For topic chevrons we use a slightly smaller For topic ellipsis-v(vertical 3 dots) we use a slightly smaller
font to show they're "lower" in the hierarchy, font to show they're "lower" in the hierarchy,
which also affects it positioning. which also affects it positioning.
*/ */
.topic-sidebar-menu-icon { .topic-sidebar-menu-icon {
top: 1px; top: 0px;
font-size: 0.7em; right: 0px;
font-size: 0.9em;
text-align: center;
padding: 1px 6px 0px 6px;
} }
/* /*
When you hover over list items, we hover When you hover over list items, we hover
the relevant chevrons in light gray. the relevant ellipsis-v(vertical 3 dots) in light gray.
*/ */
li.top_left_all_messages:hover .all-messages-sidebar-menu-icon, li.top_left_all_messages:hover .all-messages-sidebar-menu-icon,
li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon, li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon,

9
static/styles/right-sidebar.scss
View File

@ -29,15 +29,18 @@
.user-list-sidebar-menu-icon { .user-list-sidebar-menu-icon {
position: absolute; position: absolute;
top: 0px; top: 1px;
right: 10px; right: 0px;
font-size: 0.8em; font-size: 1.0em;
display: none; display: none;
text-align: center;
padding: 0px 6px 0px 6px;
i { i {
padding-right: 0.25em; padding-right: 0.25em;
display: inline-block; display: inline-block;
width: 13px; width: 13px;
vertical-align: middle;
} }
&:hover { &:hover {

2
static/templates/stream_sidebar_row.hbs
View File

@ -12,6 +12,6 @@
<div class="count"><div class="value"></div></div> <div class="count"><div class="value"></div></div>
</div> </div>
<span class="stream-sidebar-menu-icon"><i class="fa fa-chevron-down" aria-hidden="true"></i></span> <span class="stream-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
</div> </div>
</li> </li>

2
static/templates/topic_list_item.hbs
View File

@ -8,6 +8,6 @@
</div> </div>
</span> </span>
<span class="topic-sidebar-menu-icon"> <span class="topic-sidebar-menu-icon">
<i class="fa fa-chevron-down" aria-hidden="true"></i> <i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i>
</span> </span>
</li> </li>

2
static/templates/user_presence_row.hbs
View File

@ -12,5 +12,5 @@
</a> </a>
<span class="count"><span class="value">{{#if num_unread}}{{num_unread}}{{/if}}</span></span> <span class="count"><span class="value">{{#if num_unread}}{{num_unread}}{{/if}}</span></span>
</div> </div>
<span class="user-list-sidebar-menu-icon"><i class="fa fa-chevron-down" aria-hidden="true"></i></span> <span class="user-list-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
</li> </li>

4
templates/zerver/app/left_sidebar.html
View File

@ -13,7 +13,7 @@
<span class="value"></span> <span class="value"></span>
</span> </span>
</a> </a>
<span class="arrow all-messages-sidebar-menu-icon"><i class="fa fa-chevron-down" aria-hidden="true"></i></span> <span class="arrow all-messages-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
</li> </li>
<li class="top_left_private_messages"> <li class="top_left_private_messages">
<div class="private_messages_header top_left_row"> <div class="private_messages_header top_left_row">
@ -54,7 +54,7 @@
<span class="value"></span> <span class="value"></span>
</span> </span>
</a> </a>
<span class="arrow starred-messages-sidebar-menu-icon"><i class="fa fa-chevron-down" aria-hidden="true"></i></span> <span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
</li> </li>
</ul> </ul>
<div id="streams_list" class="zoom-out"> <div id="streams_list" class="zoom-out">