mirror of https://github.com/zulip/zulip.git
CUSTOMER7-specific left side user list at narrow widths.
(imported from commit 7504d86fe57e4e96f85dee18ede663c542d0144d)
This commit is contained in:
Allen Rabinovich
parent
3419619234
commit
5622e59b48
|
|
@ -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;
|
||||
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
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;
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -30,9 +30,14 @@
|
|||
<p id="onboarding-header">Get started with Zulip!</p>
|
||||
<div id="onboarding-checklist">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue