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

subscriptions: Use tooltips for stream info hover content. 

Fixes #8718.
This commit is contained in:
Cynthia Lin 2018-03-14 21:24:00 -07:00 committed by Tim Abbott
parent 646700b144
commit 333b8b095c
4 changed files with 30 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend_tests/node_tests/subs.js
View File

@ -15,6 +15,8 @@ zrequire('subs');
var jsdom = require("jsdom");
var window = jsdom.jsdom().defaultView;
global.$ = require('jquery')(window);
set_global('window', window);
zrequire('bootstrap', 'third/bootstrap/js/bootstrap');
subs.stream_name_match_stream_ids = [];
subs.stream_description_match_stream_ids = [];

4
static/js/subs.js
View File

@ -343,6 +343,10 @@ exports.filter_table = function (query) {
$(row).addClass("notdisplayed");
others.push($(row).detach());
}
$(row).find('.sub-info-box [class$="-bar"] [class$="-count"]').tooltip({
placement: 'left', animation: false,
});
});
ui.update_scrollbar($("#subscription_overlay .streams-list"));

48
static/styles/subscriptions.css
View File

@ -678,18 +678,32 @@ form#add_new_subscription {
width: calc(100% - 90px);
}
.stream-row .sub-info-box .top-bar,
.stream-row .sub-info-box .bottom-bar {
display: flex;
justify-content: space-between;
position: relative;
}
.stream-row .sub-info-box .top-bar > div {
display: inline-block;
vertical-align: top;
}
.stream-row .sub-info-box .top-bar .stream-name,
.stream-row .sub-info-box .bottom-bar .description {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stream-row .sub-info-box .top-bar .stream-name {
font-weight: 600;
}
.stream-row .sub-info-box .top-bar .subscriber-count,
.stream-row .sub-info-box .bottom-bar .stream-message-count {
float: right;
white-space: nowrap;
color: hsl(0, 0%, 66%);
}
@ -699,46 +713,16 @@ form#add_new_subscription {
margin-right: 5px;
}
.stream-row .sub-info-box .top-bar .subscriber-count:hover .subscriber-count-hover-content,
.stream-row .sub-info-box .bottom-bar .stream-message-count:hover .stream-message-hover-content {
display: inline-block;
}
.stream-row .sub-info-box .top-bar .subscriber-count .subscriber-count-hover-content {
display: none;
width: 110px;
margin-right: 3px;
float: left;
text-align: center;
background-color: #a9a9a9;
color: #fff;
border-radius: 6px;
}
.stream-row .sub-info-box .bottom-bar > div {
display: inline-block;
vertical-align: bottom;
}
.stream-row .sub-info-box .bottom-bar .description {
.stream-row .sub-info-box .bottom-bar {
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
}
.stream-row .sub-info-box .bottom-bar .stream-message-count .stream-message-hover-content {
display: none;
width: 175px;
margin-right: 3px;
float: left;
text-align: center;
background-color: #a9a9a9;
color: #fff;
border-radius: 6px;
}
#subscription_overlay .stream-description .stream-description-editable:empty:after,
.stream-row .sub-info-box .description:empty:after {
content: attr(data-no-description);

15
static/templates/subscription.handlebars
View File

@ -10,23 +10,22 @@
<div class="sub-info-box">
<div class="top-bar">
<div class="stream-name">{{name}}</div>
<div class="subscriber-count">
<div class="subscriber-count" data-toggle="tooltip" title="{{t 'Subscriber count' }}">
{{partial "subscription_count"}}
<div class="subscriber-count-hover-content">{{t "Subscriber count" }}</div>
</div>
</div>
<div class="bottom-bar">
<div class="description" data-no-description="{{t 'No description.'}}">{{{rendered_description}}}</div>
<div class="stream-message-count">
{{#if is_old_stream}}
<div class="stream-message-count" data-toggle="tooltip" title="{{t 'Average messages per week' }}">
<i class="fa fa-bar-chart"></i>
<span class="stream-message-count-text">{{stream_weekly_traffic}}</span>
<div class="stream-message-hover-content">{{t "Average messages per week" }}</div>
{{else}}
<span class="stream-message-count-text">{{t "New" }}</span>
<div class="stream-message-hover-content">{{t "Stream created recently" }}</div>
{{/if}}
</div>
{{else}}
<div class="stream-message-count" data-toggle="tooltip" title="{{t 'Stream created recently' }}">
<span class="stream-message-count-text">{{t "New" }}</span>
</div>
{{/if}}
</div>
</div>
</div>