mirror of
https://github.com/zulip/zulip.git
synced 2025-11-06 06:53:25 +00:00
Modify crumbbar style to look like an arrowbar
Also: * Change fixed element positioning and fix bugs * Move settings dropdown back to the right and add left padding to left sidebar (imported from commit fcf903b59617687f94618a01ce7544b69f408130)
This commit is contained in:
Allen Rabinovich
@@ -49,7 +49,9 @@ exports.getLighterColor = function (rgb, lightness) {
|
||||
};
|
||||
|
||||
exports.getHexColor = function (rgb) {
|
||||
return "#" + parseInt(rgb.r, 10).toString(16) + parseInt(rgb.g, 10).toString(16) + parseInt(rgb.b, 10).toString(16);
|
||||
return "#" + parseInt(rgb.r, 10).toString(16) +
|
||||
parseInt(rgb.g, 10).toString(16) +
|
||||
parseInt(rgb.b, 10).toString(16);
|
||||
};
|
||||
|
||||
return exports;
|
||||
|
||||
@@ -107,16 +107,24 @@ exports.colorize_tab_bar = function () {
|
||||
|
||||
var color_for_stream = stream_data.get_color(stream_name);
|
||||
var stream_dark = stream_color.get_color_class(color_for_stream);
|
||||
var stream_light = colorspace.getHexColor(colorspace.getLighterColor(colorspace.getDecimalColor(color_for_stream), 0.2));
|
||||
var stream_light = colorspace.getHexColor(
|
||||
colorspace.getLighterColor(
|
||||
colorspace.getDecimalColor(color_for_stream), 0.2));
|
||||
|
||||
if (stream_tab.hasClass("stream")) {
|
||||
stream_tab.css('border-left-color', color_for_stream).css('background-color', color_for_stream);
|
||||
stream_tab.css('border-left-color',
|
||||
color_for_stream).css('background-color',
|
||||
color_for_stream);
|
||||
if (stream_tab.hasClass("inactive")) {
|
||||
stream_tab.hover (
|
||||
function () {
|
||||
$(this).css('border-left-color', stream_light).css('background-color', stream_light);
|
||||
$(this).css('border-left-color',
|
||||
stream_light).css('background-color',
|
||||
stream_light);
|
||||
}, function () {
|
||||
$(this).css('border-left-color', color_for_stream).css('background-color', color_for_stream);
|
||||
$(this).css('border-left-color',
|
||||
color_for_stream).css('background-color',
|
||||
color_for_stream);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@@ -487,7 +487,6 @@ exports.resize_page_components = function () {
|
||||
} else {
|
||||
desired_width = $("#main_div").outerWidth();
|
||||
}
|
||||
tab_bar_under.width(desired_width);
|
||||
|
||||
var h;
|
||||
var sidebar;
|
||||
@@ -495,6 +494,8 @@ exports.resize_page_components = function () {
|
||||
if (feature_flags.left_side_userlist) {
|
||||
var css_narrow_mode = viewport.is_narrow();
|
||||
|
||||
$("#top_navbar").removeClass("rightside-userlist");
|
||||
|
||||
if (css_narrow_mode && !narrow_window) {
|
||||
// move stuff to the left sidebar (skinny mode)
|
||||
narrow_window = true;
|
||||
|
||||
@@ -86,10 +86,16 @@ a {
|
||||
max-width: 1200px;
|
||||
min-width: 950px;
|
||||
margin: 0px auto;
|
||||
padding: 0px 5px 0px 5px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fixed-app {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 98;
|
||||
}
|
||||
|
||||
.column-left,
|
||||
.column-right {
|
||||
width: 200px;
|
||||
@@ -113,7 +119,12 @@ a {
|
||||
position: fixed;
|
||||
margin-top: 50px;
|
||||
width: 200px;
|
||||
z-index:3;
|
||||
z-index:99;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.app-main .column-left .left-sidebar {
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.app-main .column-right .right-sidebar {
|
||||
@@ -123,6 +134,7 @@ a {
|
||||
.column-middle {
|
||||
margin-right: 200px;
|
||||
margin-left: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
textarea,
|
||||
@@ -1630,7 +1642,6 @@ input.recipient_box {
|
||||
#searchbox {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
box-shadow: 1px 0px 1px -1px #c4c4c4;
|
||||
}
|
||||
|
||||
#tab_bar {
|
||||
@@ -1663,6 +1674,7 @@ input.recipient_box {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
text-overflow: ellipsis;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#tab_list li.inactive {
|
||||
@@ -1686,7 +1698,7 @@ input.recipient_box {
|
||||
width: 0px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
margin-top: -32px;
|
||||
margin-top: -25px;
|
||||
border-style: solid;
|
||||
border-width: 25px 0 25px 12px;
|
||||
border-color: inherit;
|
||||
@@ -1702,7 +1714,7 @@ input.recipient_box {
|
||||
width: 0px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
margin-top: -35px;
|
||||
margin-top: -28px;
|
||||
border-style: solid;
|
||||
border-width: 28px 0 28px 14px;
|
||||
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ffffff;
|
||||
@@ -1770,11 +1782,11 @@ input.recipient_box {
|
||||
}
|
||||
|
||||
#tab_bar_underpadding {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 74px;
|
||||
background-color: #FFF;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 40px;
|
||||
height: 20px;
|
||||
z-index:99;
|
||||
}
|
||||
|
||||
|
||||
@@ -1807,6 +1819,7 @@ input.recipient_box {
|
||||
position: relative;
|
||||
background-color: #e4e4e4;
|
||||
width: 40px;
|
||||
height: 19px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
@@ -1837,21 +1850,23 @@ input.recipient_box {
|
||||
right: 0px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border-left: 1px solid #777;
|
||||
border-left: 2px solid #afbfca;
|
||||
}
|
||||
|
||||
#userlist-toggle-button {
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
background-color: #e4e4e4;
|
||||
color: #858585;
|
||||
display: block;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
width: 40px;
|
||||
height: 19px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
.nav .dropdown-menu {
|
||||
left: -31px;
|
||||
left: auto;
|
||||
right: 0px;
|
||||
top: 30px;
|
||||
min-width: 180px;
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
@@ -1864,7 +1879,7 @@ input.recipient_box {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
top: -7px;
|
||||
left: 5px;
|
||||
right: 10px;
|
||||
display: inline-block;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #aaa;
|
||||
@@ -1920,6 +1935,8 @@ input.recipient_box {
|
||||
width: auto;
|
||||
float: none;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid #e4e4e4;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#search_query {
|
||||
@@ -2009,7 +2026,7 @@ input.recipient_box {
|
||||
position: fixed;
|
||||
/* .message_list max-width */
|
||||
text-decoration: none;
|
||||
top: 70px; /* should really be the same as the height of navbar-spacer + height of the tab bar*/
|
||||
top: 60px; /* should really be the same as the height of navbar-spacer + height of the tab bar*/
|
||||
visibility: hidden; /* so that we pass clicks through to underneath us */
|
||||
/* If zhome has opacity on it, it suddenly starts getting drawn on top
|
||||
of top_statusbar -- unless we specify a z-index. */
|
||||
@@ -2019,14 +2036,14 @@ input.recipient_box {
|
||||
}
|
||||
|
||||
.recipient-bar-content {
|
||||
max-width: 1210px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.recipient-bar-main {
|
||||
margin-left: 220px;
|
||||
margin-right: 210px;
|
||||
margin-left: 215px;
|
||||
margin-right: 205px;
|
||||
}
|
||||
|
||||
div.floating_recipient {
|
||||
@@ -3624,25 +3641,19 @@ div.edit_bot {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
|
||||
#top_navbar.rightside-userlist .navbar-search {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
#top_navbar.rightside-userlist #navbar-buttons {
|
||||
margin-right: 41px;
|
||||
}
|
||||
|
||||
.navbar-search {
|
||||
margin-right: 5px;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
#searchbox {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
#navbar-buttons.right-userlist .settings-dropdown-caret {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#navbar-buttons.right-userlist #settings-dropdown {
|
||||
right: 37px;
|
||||
}
|
||||
|
||||
#navbar-buttons.right-userlist .nav .dropdown-menu {
|
||||
left: -223px;
|
||||
}
|
||||
|
||||
#userlist-toggle {
|
||||
display: block;
|
||||
@@ -3667,28 +3678,17 @@ div.edit_bot {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.column-middle {
|
||||
margin-left: -200px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.column-middle-inner {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
.app-main .column-middle {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.app-main .column-middle .column-middle-inner {
|
||||
margin-left: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.recipient-bar-main {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.column-middle {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.app .column-middle-inner {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 775px) {
|
||||
@@ -3721,6 +3721,7 @@ div.edit_bot {
|
||||
padding-top: 10px;
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
body, html,
|
||||
@@ -3761,12 +3762,19 @@ div.edit_bot {
|
||||
}
|
||||
|
||||
.recipient-bar-main {
|
||||
margin-left: 20px;
|
||||
margin-right: 25px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
#searchbox {
|
||||
margin-left: 37px;
|
||||
margin-left: 42px;
|
||||
}
|
||||
|
||||
#top_navbar.rightside-userlist .navbar-search {
|
||||
margin-right: 127px;
|
||||
}
|
||||
|
||||
.navbar-search {
|
||||
margin-right: 81px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tab_bar_underpadding">
|
||||
</div>
|
||||
|
||||
<div id="floating_recipient_bar">
|
||||
<div class="recipient-bar-content">
|
||||
<div class="recipient-bar-main">
|
||||
|
||||
@@ -56,6 +56,18 @@ var page_params = {{ page_params }};
|
||||
<div id="right-screen" class="screen"></div>
|
||||
<div id="clear-screen" class="screen"></div>
|
||||
|
||||
<div class="fixed-app">
|
||||
<div class="app-main">
|
||||
<div class="column-left column-overlay">
|
||||
</div>
|
||||
<div class="column-middle column-overlay">
|
||||
<div id="tab_bar_underpadding"></div>
|
||||
</div>
|
||||
<div class="column-right column-overlay">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "zerver/navbar.html" %}
|
||||
|
||||
<div class="app">
|
||||
|
||||
@@ -1,8 +1,37 @@
|
||||
<div class="header">
|
||||
<div class="header-main" id="top_navbar">
|
||||
<div class="header-main rightside-userlist" id="top_navbar">
|
||||
<div class="column-left">
|
||||
<a class="brand logo" href="#"><img src="/static/images/logo/zulipcornerlogo@2x.png" class="logoimage" alt="Zulip" content="Zulip" /></a>
|
||||
<div id="navbar-buttons" {%if embedded %} style="visibility: hidden"{% endif %}>
|
||||
</div>
|
||||
<div class="column-middle" id="navbar-middle">
|
||||
<div class="column-middle-inner">
|
||||
<div id="streamlist-toggle" {%if embedded %} style="visibility: hidden"{% endif %}>
|
||||
<a href="#" id="streamlist-toggle-button" role="button"><i class="icon-vector-reorder"></i>
|
||||
<span id="streamlist-toggle-unreadcount">0</span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="searchbox" class="searchbox-rightmargin">
|
||||
<div id="tab_bar" class="notdisplayed">
|
||||
</div>
|
||||
<form id="searchbox_form" class="form-search navbar-search">
|
||||
<div id="search_arrows" class="input-append">
|
||||
<i class="icon-vector-search"></i>
|
||||
<input class="search-query input-block-level" id="search_query" type="text" placeholder="Search"
|
||||
autocomplete="off" />
|
||||
{# Start the button off disabled since there is no active search #}
|
||||
<button class="btn search_button" type="button" id="search_exit" disabled="disabled"><i class="icon-vector-remove"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>{# /searchbox #}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<div id="userlist-toggle">
|
||||
<a href="#" id="userlist-toggle-button" role="button"><i class="icon-vector-group"></i>
|
||||
<span id="userlist-toggle-unreadcount">0</span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbar-buttons" {%if embedded %} style="visibility: hidden"{% endif %}>
|
||||
<ul class="nav" role="navigation">
|
||||
<li class="dropdown actual-dropdown-menu" id="gear-menu">
|
||||
<a id="settings-dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
|
||||
@@ -103,34 +132,5 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-middle" id="navbar-middle">
|
||||
<div class="column-middle-inner">
|
||||
<div id="streamlist-toggle" {%if embedded %} style="visibility: hidden"{% endif %}>
|
||||
<a href="#" id="streamlist-toggle-button" role="button"><i class="icon-vector-reorder"></i>
|
||||
<span id="streamlist-toggle-unreadcount">0</span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="searchbox">
|
||||
<div id="tab_bar" class="notdisplayed">
|
||||
</div>
|
||||
<form id="searchbox_form" class="form-search navbar-search">
|
||||
<div id="search_arrows" class="input-append">
|
||||
<i class="icon-vector-search"></i>
|
||||
<input class="search-query input-block-level" id="search_query" type="text" placeholder="Search"
|
||||
autocomplete="off" />
|
||||
{# Start the button off disabled since there is no active search #}
|
||||
<button class="btn search_button" type="button" id="search_exit" disabled="disabled"><i class="icon-vector-remove"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>{# /searchbox #}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<div id="userlist-toggle">
|
||||
<a href="#" id="userlist-toggle-button" role="button"><i class="icon-vector-group"></i>
|
||||
<span id="userlist-toggle-unreadcount">0</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user