infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Start toolbar redesign

master
David Benqué 2022-02-17 13:30:35 +00:00
parent d4bb7743c0
commit c2c9857387
6 changed files with 70 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
customize.dist/src/less2/include/colortheme-dark.less
View File

@ -295,8 +295,9 @@
@cp_support-header-bg: @cryptpad_color_grey_700;
// Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_850;
@cp_toolbar-bg: @cryptpad_color_grey_900;
@cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-fg-inv: @cryptpad_color_grey_900;
@cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-logo-bg: @cryptpad_color_grey_200;

13
customize.dist/src/less2/include/drive.less
View File

@ -486,7 +486,7 @@
position: absolute;
z-index: 50;
}
&.cp-app-drive-readonly {
&.cp-app-drive-readonly { // XXX NOW
background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
}
h1 {
@ -942,6 +942,17 @@
.cp-toolbar-bottom {
.cp-toolbar-bottom-left {
.cp-app-drive-toolbar-new {
border-radius: @variables_radius;
color: @cp_toolbar-bottom-fg;
border-color: var(--toolbar-bg-color);
background-color: var(--toolbar-bg-color);
&:hover {
background-color: var(--toolbar-bg-color-fade);
}
}
}
.cp-toolbar-bottom-right {
.fa-history { order: 50; }
// .fa-list, .fa-th-large,

7
customize.dist/src/less2/include/dropdown.less
View File

@ -60,6 +60,8 @@
position: absolute;
background-color: @cp_dropdown-bg;
min-width: 250px;
padding: 5px;
border-radius: @variables_radius;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000; //Z dropdown content
max-height: 300px;
@ -77,7 +79,8 @@
& > a, & > span {
color: @cp_dropdown-fg;
padding: 5px 16px;
border-radius: @variables_radius;
padding: 5px;
text-decoration: none;
display: flex;
cursor: pointer;
@ -160,7 +163,7 @@
height: 1px;
background: @cp_dropdown-bg-active;
border: 0 !important;
border-top: 1px solid rgba(0,0,0,.1) !important;
//border-top: 1px solid rgba(0,0,0,.1) !important; // XXX
& + hr {
display: none;
}

2
customize.dist/src/less2/include/toolbar-history.less
View File

@ -1,4 +1,5 @@
@import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";
.history_main () {
--LessLoader_require: LessLoader_currentFile();
@ -89,6 +90,7 @@
button {
margin: 0 5px;
border: 1px solid @cryptpad_text_col;
border-radius: @variables_radius;
text-transform: uppercase;
display: inline-flex;
align-items: center;

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

@ -15,6 +15,7 @@
@bg-color: @colortheme_apps[default], // color of the toolbar background
) {
@toolbar-bg-color: @bg-color;
@toolbar-bg-color-fade: fade(@toolbar-bg-color, 70%);
@desat-color: desaturate(@bg-color, 20%);
@toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%));
@toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%));
@ -27,6 +28,7 @@
.toolbar_vars(@bg-color);
--toolbar-bg-color: @toolbar-bg-color;
--toolbar-bg-color-fade: @toolbar-bg-color-fade;
--toolbar-bg-color-light: @toolbar-bg-color-light;
--toolbar-bg-color-active: @toolbar-bg-color-active;
@ -392,7 +394,6 @@
//display: inline-block;
button {
height: 100%;
border-radius: 0;
margin: 0;
background: transparent;
}
@ -896,7 +897,7 @@
}
.cp-toolbar-history, .cp-toolbar-snapshots {
background-color: @toolbar-bg-color-light;
background-color: @toolbar-bg-color-light; // XXX NOW
background-color: var(--toolbar-bg-color-light);
color: @toolbar-color;
}
@ -935,24 +936,9 @@
}
}
.cp-toolbar-bottom {
background-color: @toolbar-bg-color-light;
background-color: var(--toolbar-bg-color-light);
color: @cp_toolbar-bottom-fg;
button:hover, button.cp-toolbar-button-active {
background-color: @toolbar-bg-color-active;
background-color: var(--toolbar-bg-color-active);
}
button.cp-toolbar-button-active {
border-color: @toolbar-bg-color-active;
border-color: var(--toolbar-bg-color-active);
}
button:hover, button:focus {
border-color: @toolbar-bg-color-active;
border-color: var(--toolbar-bg-color-active);
//border-color: @cryptpad_text_col;
}
display: inline-flex;
margin: 5px 0px;
align-items: center;
justify-content: space-between;
max-width: 100%;
@ -967,18 +953,45 @@
margin: 5px 0px;
}
}
button {
border: 1px solid transparent;
border: 1px solid @cp_toolbar-bottom-fg;
background-color: @cp_toolbar-bottom-fg;
color: @cp_toolbar-fg-inv;
//border-color: var(--toolbar-bg-color-active);
box-sizing: border-box;
position: relative;
margin: 0px;
border-radius: 0;
border-radius: @variables_radius;
height: @toolbar_line-height;
display: inline-flex;
align-items: center;
.fa, .cptools {
margin-right: 5px;
}
&:hover {
background-color: fade(@cp_toolbar-bottom-fg, 70%);
}
}
button.cp-toolbar-button-active {
background-color: @cp_toolbar-bg;
border-color: @cp_toolbar-bottom-fg;
color: @cp_toolbar-bottom-fg;
&:hover {
background-color: fade(@cp_toolbar-bottom-fg, 30%);
}
}
button.cp-toolbar-button-primary {
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
border-color: @toolbar-bg-color;
border-color: var(--toolbar-bg-color);
color: @cp_toolbar-fg-inv;
&:hover {
background-color: fade(@toolbar-bg-color, 70%);
background-color: var(--toolbar-bg-color-fade);
}
}
button.cp-toolbar-collapse {
/*
@ -1013,14 +1026,25 @@
.cp-toolbar-bottom-left {
display: flex;
order: 1;
padding-left: 5px;
button {
margin-right: 5px;
}
}
.cp-toolbar-bottom-mid {
display: flex;
order: 2;
button {
margin-right: 5px;
}
}
.cp-toolbar-bottom-right {
order: 3;
display: flex;
padding-right: 5px;
button {
margin-left: 5px;
}
#cp-toolbar-chat-drawer-open { order: 0; }
#cp-toolbar-userlist-drawer-open { order: 1; }
& > .cp-dropdown-container {
@ -1091,11 +1115,11 @@
top: @toolbar_line-height;
margin: -1px;
min-width: 50px;
background: @cp_dropdown-bg;
background: @cp_dropdown-bg; // XXX not applied
display: flex;
flex-flow: column;
z-index: 10000; //Z cp-toolbar-drawer-content
color: @cp_dropdown-fg;
color: @cp_dropdown-fg; // XXX not applied
.tools_unselectable();
.fa {
font-size: 17px;

6
www/common/toolbar.js
View File

@ -574,7 +574,7 @@ MessengerUI, Messages, Pages) {
throw new Error("You must provide a `metadataMgr` to display the share button");
}
var $shareBlock = $(h('button.cp-toolar-share-button', [
var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [
h('i.fa.fa-shhare-alt'),
h('span.cp-button-name', Messages.shareButton)
]));
@ -605,7 +605,7 @@ MessengerUI, Messages, Pages) {
throw new Error("You must provide a `metadataMgr` to display the access button");
}
var $accessBlock = $(h('button.cp-toolar-access-button', [
var $accessBlock = $(h('button.cp-toolar-access-button.cp-toolbar-button-primary', [
h('i.fa.fa-unlock-alt'),
h('span.cp-button-name', Messages.accessButton)
]));
@ -632,7 +632,7 @@ MessengerUI, Messages, Pages) {
throw new Error("You must provide a `metadataMgr` to display the userlist");
}
var $shareBlock = $(h('button.cp-toolar-share-button', [
var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [
h('i.fa.fa-shhare-alt'),
h('span.cp-button-name', Messages.shareButton)
]));