dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

New topbar in toolbar

This commit is contained in:
yflory 2020-05-07 14:58:27 +02:00
parent 079329cc28
commit a1d9294036
3 changed files with 174 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
customize.dist/src/less2/include/toolbar.less
View File

@ -17,11 +17,13 @@
@warn-color: @colortheme_default-warn // color of the warning text in the toolbar
) {
@toolbar-color: @color;
//@toolbar-color: @bg-color;
@toolbar-color-l20: lighten(@color, 20%);
@toolbar-color-d20: darken(@color, 20%);
@toolbar-color-d15: darken(@color, 15%);
@toolbar-bg-color: @bg-color;
//@toolbar-bg-color: #FFFFFF;
@toolbar-bg-color-l8: lighten(@bg-color, 8%);
@toolbar-bg-color-l20: lighten(@bg-color, 20%);
@toolbar-bg-color-d5: darken(@bg-color, 5%);
@ -88,7 +90,7 @@
.toolbar_vars();
@toolbar_line-height: 32px;
@toolbar_top-height: 64px;
@toolbar_top-height: 76px;
@toolbar_button-font: @colortheme_app-font;
// if we spell 'share' correctly, then adblock plus hides the share button
@ -166,7 +168,7 @@
padding: 0;
box-sizing: border-box;
position: relative;
order: -2;
order: 99;
resize: horizontal;
z-index: 1;
#cp-app-contacts-container {
@ -196,7 +198,7 @@
overflow-x: hidden;
padding: 10px;
box-sizing: border-box;
order: -3;
order: 100;
z-index: 1;
.cp-toolbar-userlist-drawer-close {
position: absolute;
@ -438,10 +440,17 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/*
// XXX
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
color: @toolbar-color;
color: var(--toolbar-color);
*/
background-color: #ffffff;
color: @toolbar-bg-color;
color: var(--toolbar-bg-color);
.fa {
font: normal normal normal 14px/1 FontAwesome;
@ -628,57 +637,9 @@
margin: 0;
}
}
/*
.cp-toolbar-top-filler {
flex: 1;
}
.cp-toolbar-title {
flex: auto;
width: 100%;
order: 10;
height: @toolbar_line-height;
line-height: initial;
margin: 0;
.cp-toolbar-title-hoverable {
width: 100%;
}
.cp-toolbar-title-editable {
max-width: ~"calc(100vw - 26px)";
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
font-size: @colortheme_app-font-size;
height: @toolbar_line-height;
box-sizing: border-box;
line-height: 20px;
}
.cp-toolbar-title-edit, .cp-toolbar-title-save {
box-sizing: border-box;
height: @toolbar_line-height;
line-height: @colortheme_app-font-size;
display: inline-block;
.fa {
font-size: @colortheme_app-font-size;
}
}
input {
height: @toolbar_line-height;
font-size: @colortheme_app-font-size;
flex: 1;
max-width: none;
line-height: calc(@toolbar_line-height - 12px); // padding + border
}
}
*/
}
}
.cp-toolbar-spinner {
font-size: @colortheme_app-font-size;
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-limit {
text-shadow: -1px 0 @toolbar-color, 0 1px @toolbar-color, 1px 0 @toolbar-color, 0 -1px @toolbar-color;
text-shadow: -1px 0 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color);
@ -688,45 +649,7 @@
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: @toolbar-bg-color-l8;
background-color: var(--toolbar-bg-color-l8);
button:hover, button.cp-toolbar-button-active {
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
transition: all 0.15s;
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-title-editable {
cursor: text;
}
}
.cp-toolbar-title-save {
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
&:hover {
background: @toolbar-bg-color-d5;
background: var(--toolbar-bg-color-d5);
}
}
input {
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
color: #FFF; // XXX
}
.cp-dropdown-content.cp-dropdown-left a {
color: black;
@ -784,34 +707,32 @@
//flex: 1;
}
.cp-toolbar-title {
color: @cryptpad_text_col;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
order: 3;
height: 100%;
display: inline-flex;
align-items: center;
line-height: @toolbar_top-height;
flex-flow: column;
justify-content: center;
margin: 0 10px;
.cp-toolbar-title-value {
border: 1px solid transparent;
padding: 5px;
font-size: 25px;
padding: 0 5px;
font-size: 30px;
vertical-align: middle;
line-height: 25px;
white-space: nowrap;
}
.cp-toolbar-title-value-page {
border: 1px solid transparent;
padding: 0 5px;
line-height: 48px;
}
.cp-toolbar-title-edit, .cp-toolbar-title-save {
display: flex;
align-items: center;
font-size: 20px;
vertical-align: middle;
line-height: 20px;
.fa {
font-size: 20px;
}
@ -825,17 +746,30 @@
.cp-toolbar-title-hoverable {
display: inline-flex;
overflow: hidden;
align-self: baseline;
&:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
transition: all 0.15s;
}
.cp-toolbar-title-editable {
cursor: text;
}
}
}
.cp-toolbar-title-edit {
cursor: pointer;
border: 1px solid transparent;
padding: 5px;
padding: 0 5px;
border-collapse: collapse;
span {
cursor: pointer;
}
}
.cp-toolbar-title-save {
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
cursor: pointer;
padding: 5px;
border-collapse: collapse;
@ -849,38 +783,48 @@
border-collapse: collapse;
}
input {
color: @cryptpad_text_col;
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
max-width: ~"calc(100% - 40px)";
//flex: 1;
vertical-align: middle;
box-sizing: border-box;
cursor: auto;
width: 300px;
font-size: 20px;
padding: 5px 5px;
height: 40px;
line-height: 28px; // padding + border
font-size: 30px;
padding: 0 5px;
height: 43px;
}
}
.cp-toolbar-link, .cp-toolbar-new, .cp-toolbar-notifications {
font-size: 48px;
line-height: 64px;
width: @toolbar_top-height;
line-height: @toolbar_top-height;
width: 64px;
height: @toolbar_top-height;
padding: 0;
box-sizing: border-box;
display: inline-block;
/*
// XXX
color: white;
a {
color: white;
}
transition: all 0.15s;
*/
}
.cp-toolbar-notifications, .cp-toolbar-new {
/*
// XXX
background-color: rgba(0,0,0,0.2);
&:hover {
background-color: rgba(0,0,0,0.3);
}
*/
text-align: center;
font-size: 32px;
&> button {
@ -890,7 +834,7 @@
width: 64px;
font-size: 1em;
color: inherit;
height: 64px;
height: @toolbar_top-height;
padding: 0px;
margin: 0;
&::before {
@ -899,7 +843,6 @@
padding-top: 4px;
}
&:hover {
background-color: initial;
border-color: transparent;
}
span {
@ -940,10 +883,15 @@
align-items: center;
justify-content: center;
cursor: pointer;
/*
// XXX
background-color: rgba(0,0,0,0.4);
&:hover {
background-color: rgba(0,0,0,0.5);
}
*/
order: 1;
.fa {
margin: 0;
@ -955,6 +903,13 @@
height: auto;
padding: 10px;
svg {
* {
fill: @toolbar-bg-color;
fill: var(--toolbar-bg-color);
}
}
img {
cursor: pointer;
height: 100%;
@ -967,7 +922,11 @@
display: inline-flex;
order: 6;
line-height: @toolbar_top-height;
color: white;
/*
// XXX
color: white;
*/
.cp-toolbar-notifications { order: 1; }
.cp-toolbar-new { order: 2; }
.cp-toolbar-user-dropdown { order: 3; }
@ -980,16 +939,20 @@
.cp-toolbar-user-dropdown {
z-index: 10000; //Z cp-toolbar-user-dropdown
//margin-left: 20px;
height: 64px;
height: @toolbar_top-height;
width: 64px;
padding: 0px;
box-sizing: border-box;
text-align: center;
/*
background-color: rgba(0,0,0,0.3);
transition: all 0.15s;
&:hover {
background-color: rgba(0,0,0,0.4);
}
*/
.cp-dropdown-content {
margin: 0;
overflow: visible;
@ -998,7 +961,7 @@
display: flex;
justify-content: center;
align-items: center;
height: 64px;
height: @toolbar_top-height;
width: 64px;
padding: 0;
span {
@ -1037,6 +1000,58 @@
}
}
.cp-toolbar-bottom {
background-color: @toolbar-bg-color-l8;
background-color: var(--toolbar-bg-color-l8);
color: #FFF; // XXX
button:hover, button.cp-toolbar-button-active {
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
}
display: inline-flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
flex: 1 1 auto;
&:empty {
height: 0;
}
.cp-toolbar-users {
pre {
/* needed for ckeditor */
white-space: pre;
margin: 5px 0px;
}
}
button {
margin: 0px;
border-radius: 0;
height: 100%;
}
.cp-dropdown-content {
margin-top: -1px;
}
& > span {
height: @toolbar_line-height;
}
.cp-toolbar-bottom-left {
order: 1;
}
.cp-toolbar-bottom-mid {
order: 2;
}
.cp-toolbar-bottom-right {
order: 3;
display: flex;
#cp-toolbar-chat-drawer-open { order: 0; }
#cp-toolbar-userlist-drawer-open { order: 1; }
}
}
.cp-toolbar-leftside {
//height: @toolbar_line-height;
&:empty {
@ -1188,13 +1203,17 @@
}
}
.cp-toolbar-spinner {
line-height: @toolbar_line-height;
padding: 0 20px;
color: @cryptpad_text_col;
font-size: 14px;
padding: 0 8px;
height: 20px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 200px;
box-sizing: border-box;
margin-bottom: 5px;
&> span.fa {
height: 20px;
width: 20px;

18
www/common/common-ui-elements.js
View File

@ -21,6 +21,24 @@ define([
Messages, AppConfig, Pages, NThen, InviteInner, Visible) {
var UIElements = {};
UIElements.getSvgLogo = function () {
var svg = (function(){/*
<svg width="45" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<path d="m22.422 1.4356-14.641 2.7035c-0.51734-0.36799-1.1561-0.57696-1.8393-0.57696a3.1356 3.1339 0 0 0-3.1373 3.1355 3.1602 3.1585 0 0 0 1.6227 2.7575v21.103c0 1.9871 0.88906 4.1328 2.6508 6.3801 1.5602 1.9878 3.7668 4.027 6.5635 6.0547 1.9912 1.4389 3.9942 2.6545 5.6782 3.6005a3.1431 3.1413 0 0 0 5.9855 0.12499c1.7264-0.96163 3.8202-2.224 5.8986-3.7254 2.7979-2.0277 5.0033-4.0668 6.5635-6.0547 1.7624-2.2501 2.6508-4.393 2.6508-6.3801v-21.12c0.95814-0.53813 1.622-1.5642 1.622-2.74 0-1.733-1.4213-3.1355-3.1556-3.1355a3.1075 3.1059 0 0 0-1.8028 0.57696zm-0.03584 3.118 13.379 2.4687c0.01952 0.19629 0.03611 0.37448 0.08998 0.55867l-7.8432 5.1004c-1.4028-1.5215-3.4192-2.4877-5.6439-2.4877-2.2404 0-4.2687 0.98212-5.6797 2.5235l-7.7539-5.028c0.071056-0.21736 0.10472-0.44988 0.12659-0.68519zm14.426 4.4869c0.2616 0.22946 0.5738 0.4256 0.90137 0.55867v20.526c0 0.27043-0.02367 0.55955-0.07169 0.84677-0.31548 1.2546-1.0076 2.5682-2.0734 3.9289-1.3362 1.7018-3.231 3.4367-5.6264 5.172-1.9203 1.3873-3.8601 2.5452-5.3983 3.3932a3.1431 3.1413 0 0 0-4.3574-0.06325c-1.5186-0.84169-3.4128-1.979-5.2825-3.3299-2.3934-1.7353-4.2716-3.4702-5.6072-5.172-1.2729-1.6234-2.017-3.1789-2.2176-4.6492v-20.616c0.31859-0.12253 0.60591-0.30939 0.86477-0.52285l9.9357 6.3976a5.0789 5.0761 0 0 1 4.4893-2.685c1.9639 0 3.6499 1.0816 4.4901 2.7027zm-21.812 6.6849c-0.20732 0.69421-0.33324 1.4177-0.33324 2.1767 0 2.1872 0.94799 4.1262 2.4242 5.5287l-2.7125 5.4541c-0.01034-1.35e-4 -0.02017-0.0015-0.03051-0.0015-1.2807 0-2.3266 1.045-2.3266 2.3246 0 1.2799 1.046 2.3063 2.3266 2.3063a2.3009 2.2996 0 0 0 1.7349-0.78198h3.999v-2.6119h-3.3974l3.1938-6.4136c0.27643-0.55529 0.08702-1.2992-0.42094-1.6546-1.3154-0.91704-2.178-2.4154-2.178-4.1499 0-0.22399 0.03023-0.43738 0.05796-0.65318zm14.737 0.01524-2.3518 1.5372c0.02538 0.20682 0.04347 0.40998 0.04347 0.62422 0 1.7288-0.83863 3.2165-2.149 4.1356-0.50796 0.3555-0.69738 1.0994-0.42094 1.6546l3.1655 6.4281h-3.3829v2.6112h4.1363c0.42696 0.47986 1.0501 0.78274 1.744 0.78274a2.3009 2.2996 0 0 0 2.3076-2.3056c0-1.2799-1.0273-2.3253-2.3076-2.3253-0.05792 0-0.1147 0.0049-0.17158 0.0092l-2.7186-5.4769c1.4697-1.401 2.4106-3.3321 2.4106-5.5143 0-0.74898-0.10409-1.475-0.30503-2.1607zm-7.4398 0.2477a2.1129 2.1118 0 0 0-2.078 2.1111 2.1132 2.1119 0 1 0 4.2262 0 2.1129 2.1118 0 0 0-2.1482-2.1111z" style="stroke-width:1.2608"/>
</svg>
*/}).toString().slice(14,-3);
return svg;
};
UIElements.prettySize = function (bytes) {
var kB = Util.bytesToKilobytes(bytes);
if (kB < 1024) { return kB + Messages.KB; }

32
www/common/toolbar.js
View File

@ -24,6 +24,10 @@ MessengerUI, Messages) {
// Toolbar parts
var TOOLBAR_CLS = Bar.constants.toolbar = 'cp-toolbar';
var TOP_CLS = Bar.constants.top = 'cp-toolbar-top';
var BOTTOM_CLS = Bar.constants.bottom = 'cp-toolbar-bottom';
var BOTTOM_LEFT_CLS = Bar.constants.bottomL = 'cp-toolbar-bottom-left';
var BOTTOM_MID_CLS = Bar.constants.bottomM = 'cp-toolbar-bottom-mid';
var BOTTOM_RIGHT_CLS = Bar.constants.bottomR = 'cp-toolbar-bottom-right';
var LEFTSIDE_CLS = Bar.constants.leftside = 'cp-toolbar-leftside';
var RIGHTSIDE_CLS = Bar.constants.rightside = 'cp-toolbar-rightside';
var DRAWER_CLS = Bar.constants.drawer = 'cp-toolbar-drawer-content';
@ -77,10 +81,19 @@ MessengerUI, Messages) {
$('<span>', {'class': NEWPAD_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
$('<span>', {'class': USERADMIN_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
/*
$toolbar.append($topContainer)
.append($('<div>', {'class': LEFTSIDE_CLS}))
.append($('<div>', {'class': RIGHTSIDE_CLS}))
.append($('<div>', {'class': HISTORY_CLS}));
*/
$toolbar.append($topContainer);
var $bottom = $(h('div.'+BOTTOM_CLS, [
h('div.'+BOTTOM_LEFT_CLS),
h('div.'+BOTTOM_MID_CLS),
h('div.'+BOTTOM_RIGHT_CLS)
])).appendTo($toolbar);
$toolbar.append(h('div.'+HISTORY_CLS));
var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
if (!config.hideDrawer) {
@ -398,7 +411,7 @@ MessengerUI, Messages) {
var $button = $('<button>').appendTo($container);
$('<span>',{'class': 'cp-dropdown-button-title'}).appendTo($button);
toolbar.$leftside.prepend($container);
toolbar.$bottomR.prepend($container);
if (config.$contentContainer) {
config.$contentContainer.prepend($content);
@ -465,7 +478,7 @@ MessengerUI, Messages) {
var $button = $('<button>', {'class': 'fa fa-comments'}).appendTo($container);
$('<span>',{'class': 'cp-dropdown-button-title'}).appendTo($button);
toolbar.$leftside.prepend($container);
toolbar.$bottomR.prepend($container);
if (config.$contentContainer) {
config.$contentContainer.prepend($content);
@ -812,9 +825,12 @@ MessengerUI, Messages) {
href: href,
title: buttonTitle,
'class': "cp-toolbar-link-logo"
}).append($('<img>', {
src: '/customize/images/logo_white.png?' + ApiConfig.requireConf.urlArgs
}));
}).append(UIElements.getSvgLogo());
/*.append($('<img>', {
//src: '/customize/images/logo_white.png?' + ApiConfig.requireConf.urlArgs
src: '/customize/main-favicon.png?' + ApiConfig.requireConf.urlArgs
}));*/
var onClick = function (e) {
e.preventDefault();
if (e.ctrlKey) {
@ -867,7 +883,7 @@ MessengerUI, Messages) {
};
};
var createSpinner = function (toolbar, config) {
var $spin = $('<span>', {'class': SPINNER_CLS}).appendTo(toolbar.$leftside);
var $spin = $('<span>', {'class': SPINNER_CLS}).appendTo(toolbar.title);
$spin.text(Messages.synchronizing);
if (config.realtime) {
@ -1207,6 +1223,10 @@ MessengerUI, Messages) {
toolbar.firstConnection = true;
var $toolbar = toolbar.$toolbar = createRealtimeToolbar(config);
toolbar.$bottom = $toolbar.find('.'+Bar.constants.bottom);
toolbar.$bottomL = $toolbar.find('.'+Bar.constants.bottomL);
toolbar.$bottomM = $toolbar.find('.'+Bar.constants.bottomM);
toolbar.$bottomR = $toolbar.find('.'+Bar.constants.bottomR);
toolbar.$leftside = $toolbar.find('.'+Bar.constants.leftside);
toolbar.$rightside = $toolbar.find('.'+Bar.constants.rightside);
toolbar.$drawer = $toolbar.find('.'+Bar.constants.drawer);