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

left-sidebar: Restyle to have new look.

Browse Source 
This restyles the color swatches to either be locks or hashes,
and changes the notifications to be rounded rather than squared.
This commit is contained in:
Brock Whittaker
2017-04-17 13:19:47 -07:00
committed by Tim Abbott
parent faf47fe147
commit c506a92d05
9 changed files with 132 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend_tests/node_tests/stream_list.js
View File

@@ -76,7 +76,6 @@ function clear_filters() {
var li = stream_list.get_stream_li('social');
assert.equal(li.attr('data-name'), 'social');
assert.equal(li.find('.streamlist_swatch').attr('style'), 'background-color: green');
assert.equal(li.find('a.stream-name').text().trim(), 'social');
assert(li.find('.arrow').find("i").hasClass("icon-vector-chevron-down"));

12
frontend_tests/node_tests/templates.js
View File

@@ -511,8 +511,6 @@ function render(template_name, args) {
var row_2 = $(html).find(".draft-row[data-draft-id='2']");
assert.equal(row_2.find(".stream_label").text().trim(), "You and Jordan, Michael");
assert(row_2.find(".message_row").hasClass("private-message"));
assert.equal(row_2.find(".messagebox").css("box-shadow"),
"inset 2px 0px 0px 0px #444444, -1px 0px 0px 0px #444444");
assert.equal(row_2.find(".message_content").text().trim(), "Private draft");
}());
@@ -897,10 +895,16 @@ function render(template_name, args) {
html += render('stream_sidebar_row', args);
html += '</ul>';
// because it won't mark the template as read otherwise.
render('stream_privacy');
global.write_handlebars_output("stream_sidebar_row", html);
var swatch = $(html).find(".streamlist_swatch");
assert.equal(swatch.attr('id'), 'stream_sidebar_swatch_999');
var swatch = $(html).find(".stream-privacy");
assert.equal(swatch.attr('id'), 'stream_sidebar_privacy_swatch_999');
// test to ensure that the hashtag element from stream_privacy exists.
assert.equal($(html).find(".stream-privacy").children("*").attr("class"), "hashtag");
}());

7
static/js/stream_list.js
View File

@@ -257,7 +257,6 @@ exports.create_sidebar_row = function (sub) {
exports.redraw_stream_privacy = function (stream_name) {
var li = exports.get_stream_li(stream_name);
var div = li.find('.stream-privacy');
var swatch = li.find('.streamlist_swatch');
var sub = stream_data.get_sub(stream_name);
var color = stream_data.get_color(stream_name);
var dark_background = stream_color.get_color_class(color);
@@ -267,12 +266,6 @@ exports.redraw_stream_privacy = function (stream_name) {
dark_background: dark_background,
};
if (sub.invite_only) {
swatch.addClass("private-stream-swatch");
} else {
swatch.removeClass("private-stream-swatch");
}
var html = templates.render('stream_privacy', args);
div.html(html);
};

151
static/styles/left-sidebar.css
View File

@@ -1,3 +1,8 @@
#left-sidebar {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#left-sidebar .brand {
display: table-row;
}
@@ -11,25 +16,31 @@
#streams_filter_icon,
#join_unsub_stream {
float: right;
color: #000;
color: #ccc;
font-size: 13px;
margin-top: 3px;
margin-left: 6px;
opacity: 0.5;
margin-left: 10px;
}
#streams_inline_cog:hover,
#streams_filter_icon:hover {
opacity: 1.0;
#streams_filter_icon:hover,
#join_unsub_stream:hover {
color: #555;
}
#join_unsub_stream {
#streams_header #join_unsub_stream {
margin-top: 1px;
}
#streams_header a {
color: inherit;
text-decoration: none;
#streams_inline_cog {
margin-right: 10px;
}
.hashtag:empty:after {
content: "#";
font-size: 1.3rem;
font-weight: 800;
line-height: 1;
}
.tooltip {
@@ -43,6 +54,19 @@
font-weight: normal;
}
#stream_filters li {
padding: 0px;
}
#stream_filters li ul {
margin-left: 0px;
}
#stream_filters li ul.topic-list li {
padding-left: 29px;
padding-top: 1px;
}
#stream-filters-container {
overflow-x: hidden;
overflow-y: hidden;
@@ -94,6 +118,11 @@ li.active-sub-filter {
position: relative;
}
.left-sidebar .sidebar-title a {
color: inherit;
text-decoration: none;
}
li.hidden-filter {
visibility: hidden;
display: none;
@@ -113,9 +142,18 @@ li.hidden-filter {
#global_filters .global-filter {
position: relative;
padding: 1px 10px;
font-size: 16px;
font-weight: 300;
padding-left: 10px;
padding-right: 10px;
}
.left-sidebar li a {
color: #555;
}
.left-sidebar li {
font-size: 1em;
padding-top: 2px;
padding-bottom: 2px;
}
#global_filters .global-filter i {
@@ -124,27 +162,31 @@ li.hidden-filter {
#global_filters .count,
#stream_filters .count {
position: absolute;
right: 25px;
top: 2px;
padding: 2px 3px 1px 3px;
float: right;
margin-top: 3px;
background: #80837f;
padding: 2px 4px 1px 4px;
border-radius: 0px;
color: #ffffff;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.6px;
border-radius: 4px;
}
#stream_filters .count,
#global_filters .count {
margin-left: 0.5em;
margin-right: 15px;
display: none;
}
#stream_filters .count {
margin-right: 10px;
}
#global_filters .count {
line-height: 13px;
top: 3px;
margin-right: 15px;
}
.topic-name {
@@ -162,22 +204,24 @@ li.hidden-filter {
display: block;
position: absolute;
line-height: 1em;
top: 2px;
padding: 2px 3px 0px 3px;
top: 4px;
padding: 2px 4px 1px 4px;
background: #a6ada4;
color: #ffffff;
border-radius: 1px;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.6px;
border-radius: 4px;
}
.topic-unread-count {
right: 25px;
top: 2px;
}
.private_message_count {
right: 10px;
right: 15px;
}
ul.filters i {
@@ -189,7 +233,7 @@ ul.filters i {
ul.filters .arrow {
position: absolute;
right: 0px;
right: 2px;
top: 2px;
right: 4px;
font-size: 0.8em;
@@ -243,11 +287,11 @@ ul.filters li.out_of_home_view li.muted_topic {
}
#stream_filters .subscription_block {
padding-bottom: 3px;
padding: 0 0 0 10px;
line-height: 12px;
padding-top: 4px;
margin-right: 15px;
padding-left: 28px;
padding: 2px 0px;
margin-right: 18px;
margin-left: 10px;
}
#stream_filters .subscription_block .stream-name {
@@ -255,51 +299,50 @@ ul.filters li.out_of_home_view li.muted_topic {
}
#stream_filters .subscription_block.stream-with-count {
margin-right: 38px;
}
.streamlist_swatch {
display: block;
width: 11px;
height: 11px;
vertical-align: middle;
float: left;
position: absolute;
left: 10px;
top: 5px;
box-shadow: inset 0px 0px 3px -2px #000;
}
.streamlist_swatch.private-stream-swatch {
visibility: hidden;
margin-right: 15px;
}
.stream-privacy {
position: absolute;
left: 11px;
top: 3px;
font-size: 15px;
}
.stream-privacy .icon-vector-lock {
display: inline-block;
width: 9px;
margin-right: 2px;
margin-left: 1px;
position: relative;
top: 1px;
}
.stream-privacy .hashtag {
position: relative;
top: 2px;
margin-right: 5px;
}
ul.topic-list {
list-style-type: none;
font-weight: normal;
margin-left: 0px;
padding-bottom: 2px;
}
#streams_header a {
text-decoration: none;
}
ul.expanded_private_messages {
list-style-type: none;
font-weight: 300;
font-size: 84%;
font-size: 0.9em;
font-weight: 400;
margin-left: 0px;
padding-bottom: 2px;
margin-top: 3px;
}
li.show-more-topics,
li.topic-list-item {
position: relative;
padding-left: 28px;
padding-right: 5px;
}
@@ -311,6 +354,10 @@ li.expanded_private_message {
padding-top: 2px;
}
li.expanded_private_message a {
margin-top: 3px;
}
.show-all-streams a {
color: #333;
}
@@ -326,6 +373,10 @@ li.expanded_private_message {
margin-right: 38px;
}
.pm-box {
line-height: 1;
}
.zero-subject-unreads .pm-box,
.zero-subject-unreads .topic-box {
margin-right: 15px;

12
static/styles/right-sidebar.css
View File

@@ -1,3 +1,8 @@
.right-sidebar {
-webkit-font-smoothing: antialiased;
color: #555;
}
#group-pms li:hover,
#user_presences li:hover {
background-color: #e2e8dd;
@@ -36,6 +41,11 @@
list-style-type: none;
}
#group-pm-title {
margin: 10px 0px 0px 0px;
display: inline-block;
}
.user-status-indicator,
.group-pm-status-indicator {
display: block;
@@ -75,7 +85,7 @@
#user_presences a,
#group-pms a {
color: #333;
color: inherit;
}
#invite-user-link i {

7
static/styles/zulip.css
View File

@@ -473,7 +473,8 @@ a:hover code {
}
.sidebar-title {
font-size: 11px;
font-size: 1em;
color: #aaa;
font-weight: normal;
display: inline;
}
@@ -2130,8 +2131,8 @@ div.floating_recipient {
}
.conversation-partners {
display: block;
line-height: 1.2em;
display: inline-block;
line-height: 1.2;
width: 90%;
overflow: hidden;
}

2
static/templates/stream_privacy.handlebars
View File

@@ -1,4 +1,6 @@
{{! This controls whether the swatchnext to streams in the left sidebar has a lock icon. }}
{{#if invite_only}}
<i class="icon-vector-lock"></i>
{{ else }}
<span class="hashtag"></span>
{{/if}}

19
static/templates/stream_sidebar_row.handlebars
View File

@@ -2,25 +2,16 @@
<li data-name="{{name}}" class="narrow-filter{{#if not_in_home_view}} out_of_home_view{{/if}}"
id="stream_sidebar_{{id}}">
{{! For some reason, even though the span is inline-block, if it is empty it
takes up no space and you don't see the background color. Thus, add a
&nbsp; to get the inline-block behavior we want. }}
<div class="subscription_block selectable_sidebar_block" data-name="{{name}}">
<div id="stream_sidebar_swatch_{{id}}" class="streamlist_swatch{{#if invite_only}} private-stream-swatch{{/if}}"
style="background-color: {{color}}">&nbsp;</div>
<a href="{{uri}}" class="stream-name">{{name}}
</a>
<div class="count"><div class="value"></div></div>
<span id="stream_sidebar_privacy_swatch_{{id}}" class="stream-privacy" style="color: {{color}}">
{{partial "stream_privacy"}}
{{! This controls whether the swatchnext to streams in the left sidebar has a lock icon. }}
{{ partial "stream_privacy" }}
</span>
<a href="{{uri}}" class="stream-name">{{name}}</a>
<div class="count"><div class="value"></div></div>
</div>
<span class="arrow stream-sidebar-arrow"><i class="icon-vector-chevron-down"></i></span>

2
templates/zerver/left_sidebar.html
View File

@@ -15,7 +15,7 @@
</a>
<a href=""><i id='streams_filter_icon' class='icon-vector-search' data-toggle="tooltip" title="{{ _('Filter streams list') }}"></i></a>
<a href="" id="join_unsub_stream">
<i class="icon-vector-plus" title="{{ _('Join stream')}}"></i>
<i class="icon-vector-plus" title="{{ _('Join stream')}}" data-toggle="tooltip"></i>
</a>
</div>
<div id="topics_header">