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

CUSTOMER7-specific left side user list at narrow widths. 

(imported from commit 7504d86fe57e4e96f85dee18ede663c542d0144d)
This commit is contained in:
Allen Rabinovich 2013-09-12 13:02:55 -07:00
parent 3419619234
commit 5622e59b48
6 changed files with 123 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/js/feature_flags.js
View File

@ -32,6 +32,9 @@ exports.alert_words = page_params.staging ||
exports.muting = page_params.staging;
exports.left_side_userlist = page_params.staging ||
_.contains(['customer7.invalid'], page_params.domain);
return exports;
}());

14
static/js/popovers.js
View File

@ -5,6 +5,8 @@ var exports = {};
var current_actions_popover_elem;
var current_message_info_popover_elem;
var userlist_placement = "right";
function show_message_info_popover(element, id) {
var last_popover_elem = current_message_info_popover_elem;
popovers.hide_all();
@ -148,6 +150,7 @@ var current_stream_sidebar_elem;
var current_topic_sidebar_elem;
var current_user_sidebar_elem;
function user_sidebar_popped() {
return current_user_sidebar_elem !== undefined;
}
@ -210,8 +213,9 @@ exports.register_click_handlers = function () {
var last_sidebar_elem = current_user_sidebar_elem;
popovers.hide_all();
popovers.show_userlist_sidebar();
if (userlist_placement === "right") {
popovers.show_userlist_sidebar();
}
var target = $(elt).closest('li');
var email = target.find('a').attr('data-email');
var name = target.find('a').attr('data-name');
@ -219,7 +223,7 @@ exports.register_click_handlers = function () {
target.popover({
content: templates.render('user_sidebar_actions', {'email': email,
'name': name}),
placement: "left",
placement: userlist_placement === "left" ? "right" : "left",
trigger: "manual",
fixed: true
});
@ -542,5 +546,9 @@ exports.hide_all = function () {
popovers.hide_streamlist_sidebar();
};
exports.set_userlist_placement = function (placement) {
userlist_placement = placement || "right";
};
return exports;
}());

93
static/js/ui.js
View File

@ -3,6 +3,7 @@ var ui = (function () {
var exports = {};
var actively_scrolling = false;
var narrow_window = false;
exports.actively_scrolling = function () {
return actively_scrolling;
@ -328,10 +329,7 @@ function get_new_heights() {
- $(".upper_sidebar").outerHeight(true)
- 40;
res.right_sidebar_height =
viewport_height - top_navbar_height
- $("#notifications-area").outerHeight(true)
- 14; // margin for right sidebar
res.right_sidebar_height = viewport_height - parseInt($("#right-sidebar").css("marginTop"), 10);
res.stream_filters_max_height =
res.bottom_sidebar_height
@ -348,8 +346,67 @@ function get_new_heights() {
// Don't let us crush the stream sidebar completely out of view
res.stream_filters_max_height = Math.max(40, res.stream_filters_max_height);
res.user_presences_max_height =
res.right_sidebar_height * 0.90 - invite_user_link_height;
res.user_presences_max_height = res.right_sidebar_height
- $("#feedback_section").outerHeight(true)
- parseInt($("#user_presences").css("marginTop"),10)
- parseInt($("#user_presences").css("marginBottom"), 10)
- invite_user_link_height;
return res;
}
function left_userlist_get_new_heights() {
var res = {};
var viewport_height = viewport.height();
var viewport_width = viewport.width();
var top_navbar_height = $(".header").outerHeight(true);
var invite_user_link_height = $("#invite-user-link").outerHeight(true) || 0;
var share_the_love_height = $("#share-the-love").is(":visible") ? $("#share-the-love").outerHeight(true) : 0;
var stream_filters_real_height = $("#stream_filters").prop("scrollHeight");
var user_list_real_height = $("#user_presences").prop("scrollHeight");
res.bottom_whitespace_height = viewport_height * 0.4;
res.main_div_min_height = viewport_height - top_navbar_height;
res.bottom_sidebar_height = viewport_height
- parseInt($("#left-sidebar").css("marginTop"),10)
- $(".upper_sidebar").outerHeight(true)
- parseInt($(".bottom_sidebar").css("marginTop"),10);
res.total_leftlist_height = res.bottom_sidebar_height
- $("#global_filters").outerHeight(true)
- $("#streams_header").outerHeight(true)
- $("#userlist-header").outerHeight(true)
- parseInt($("#stream_filters").css("marginBottom"),10)
- parseInt($("#user_presences").css("marginTop"), 10)
- parseInt($("#user_presences").css("marginBottom"), 10)
- invite_user_link_height
- share_the_love_height
- 15;
res.stream_filters_max_height = Math.max (40, res.total_leftlist_height / 2);
res.user_presences_max_height = Math.max(40, res.total_leftlist_height / 2);
if (res.stream_filters_max_height > stream_filters_real_height) {
res.stream_filters_max_height = stream_filters_real_height;
res.user_presences_max_height = Math.max(40, res.total_leftlist_height
- stream_filters_real_height);
}
else if (res.user_presences_max_height > user_list_real_height) {
res.user_presences_max_height = user_list_real_height;
res.stream_filters_max_height = Math.max (40, res.total_leftlist_height
- user_list_real_height);
}
res.viewport_height = viewport_height;
res.viewport_width = viewport_width;
return res;
}
@ -368,13 +425,30 @@ exports.resize_page_components = function () {
tab_bar.width(desired_width);
tab_bar_under.width(desired_width);
var h = get_new_heights();
var h;
if (viewport.width() < 975 && feature_flags.left_side_userlist && !narrow_window) {
narrow_window = true;
popovers.set_userlist_placement("left");
$(".bottom_sidebar").append($("#user-list")).append($("#share-the-love"));
$("#user_presences").css("margin", "0px");
$("#userlist-toggle").css("display", "none");
}
else if (viewport.width() > 975 && feature_flags.left_side_userlist && narrow_window) {
narrow_window = false;
popovers.set_userlist_placement("right");
$("#right-sidebar").append($("#user-list"));
$("#user_presences").css("margin", '');
$("#userlist-toggle").css("display", '');
}
h = narrow_window ? left_userlist_get_new_heights() : get_new_heights();
$("#bottom_whitespace").height(h.bottom_whitespace_height);
$(".bottom_sidebar").height(h.bottom_sidebar_height);
$("#right-sidebar").height(h.right_sidebar_height);
$("#stream_filters").css('max-height', h.stream_filters_max_height);
$("#user_presences").css('max-height', h.user_presences_max_height);
popovers.hide_all();
};
function resizehandler(e) {
@ -1665,5 +1739,6 @@ $(function () {
}
});
return exports;
}());

24
static/styles/zulip.css
View File

@ -346,13 +346,13 @@ a:hover code {
margin-top: 1em;
}
.streams_title {
font-size: 0.9em;
.sidebar-title, .share-the-love-title {
font-size: 11px;
font-weight: normal;
display: inline;
}
#streams_list:hover #streams_inline_cog {
visibility: visible;
opacity: 0.5;
@ -376,7 +376,6 @@ a:hover code {
}
#stream_filters {
border-bottom: 1px solid #eee;
overflow-x: visible;
overflow-y: hidden;
margin: 2px 0px 0px 0px;
@ -2485,8 +2484,8 @@ li.expanded_subject {
margin-right: 5px;
}
#streams_header {
border-top: 1px solid #eee;
#streams_header, #userlist-header, #sharethelove-header {
border-top: 1px solid #ddd;
margin-top: 5px;
margin-right: 10px;
}
@ -2772,7 +2771,7 @@ div.edit_bot {
#share-the-love {
margin-left: 0px;
margin-right: 18px;
margin-right: 0px;
margin-bottom: 5px;
line-height: 18px;
display: none;
@ -2815,11 +2814,17 @@ div.edit_bot {
#share-the-love .still-have-invites {
clear: both;
margin-right: 10px;
}
#share-the-love .no-more-invites {
clear: both;
display: none;
margin-right: 10px;
}
#share-the-love .invite-count-area {
margin-right: 10px;
}
#share-the-love .alert {
@ -2874,6 +2879,7 @@ div.edit_bot {
border-left: 1px solid #dddddd;
margin-top: 40px;
padding-top: 10px;
height: 100%;
}
.header-main .column-right {
@ -2960,7 +2966,7 @@ div.edit_bot {
display: block;
position: absolute;
float: none;
left: 15px;
left: 0px;
top: 0px;
}
@ -2970,6 +2976,8 @@ div.edit_bot {
border-right: 1px solid #dddddd;
margin-top: 40px;
padding-top: 10px;
height: 100%;
padding-left: 10px;
}
body, html,

4
templates/zerver/left-sidebar.html
View File

@ -19,14 +19,14 @@
<li data-name="mentioned" class="global-filter"><i class="icon-vector-tag"></i> <a href="#narrow/is/mentioned">@-mentions<span class="count"><span class="value"></span></span></a></li>
</ul>
<div id="streams_list">
<div id="streams_header"><h4 class="streams_title">STREAMS</h4>
<div id="streams_header"><h4 class="sidebar-title">STREAMS</h4>
<a href=""><i id="streams_inline_cog" class='icon-vector-cog' data-toggle="tooltip" title="Subscribe, add, or configure streams"></i></a>
</div>
<ul id="stream_filters" class="filters scrolling_list"></ul>
</div>
<div id="share-the-love">
<div id="share-the-love-expand-collapse">
<i class="toggle icon-vector-caret-right"></i> <h4 class="streams_title">SHARE THE LOVE<span class="still-have-invites"> (<span class="invite-count">0</span>)</span></h4>
<i class="toggle icon-vector-caret-right"></i><div id="sharethelove-header"><h4 class="share-the-love-title">SHARE THE LOVE<span class="still-have-invites"> (<span class="invite-count">0</span>)</span></h4></div>
</div>
<div id="share-the-love-contents">
<div id="tell-a-friend-success" class="alert alert-success">

9
templates/zerver/right-sidebar.html
View File

@ -31,8 +31,13 @@
<div id="onboarding-checklist">
</div>
</div>
<ul id="user_presences" class="filters scrolling_list"></ul>
<div id="user-list">
<div id="userlist-header">
<h4 class='sidebar-title' id='userlist-title'>USERS</h4>
</div>
<ul id="user_presences" class="filters scrolling_list"></ul>
{% if show_invites %}
<a id="invite-user-link" href="#invite-user" data-toggle="modal"><i class="icon-vector-plus-sign"></i>Invite coworkers</a>
<a id="invite-user-link" href="#invite-user" data-toggle="modal"><i class="icon-vector-plus-sign"></i>Invite coworkers</a>
{% endif %}
</div>
</div>