blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start toolbar redesign

Browse source
This commit is contained in:
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; @cp_support-header-bg: @cryptpad_color_grey_700;
// Toolbar // Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_850; @cp_toolbar-bg: @cryptpad_color_grey_900;
@cp_toolbar-fg: @cryptpad_text_col; @cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-fg-inv: @cryptpad_color_grey_900;
@cp_toolbar-bottom-fg: @cryptpad_text_col; @cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-logo-bg: @cryptpad_color_grey_200; @cp_toolbar-logo-bg: @cryptpad_color_grey_200;

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

@ -486,7 +486,7 @@
position: absolute; position: absolute;
z-index: 50; 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%)); background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
} }
h1 { h1 {
@ -942,6 +942,17 @@
.cp-toolbar-bottom { .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 { .cp-toolbar-bottom-right {
.fa-history { order: 50; } .fa-history { order: 50; }
// .fa-list, .fa-th-large, // .fa-list, .fa-th-large,

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

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

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

@ -1,4 +1,5 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";
.history_main () { .history_main () {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -89,6 +90,7 @@
button { button {
margin: 0 5px; margin: 0 5px;
border: 1px solid @cryptpad_text_col; border: 1px solid @cryptpad_text_col;
border-radius: @variables_radius;
text-transform: uppercase; text-transform: uppercase;
display: inline-flex; display: inline-flex;
align-items: center; 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 @bg-color: @colortheme_apps[default], // color of the toolbar background
) { ) {
@toolbar-bg-color: @bg-color; @toolbar-bg-color: @bg-color;
@toolbar-bg-color-fade: fade(@toolbar-bg-color, 70%);
@desat-color: desaturate(@bg-color, 20%); @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-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%)); @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_vars(@bg-color);
--toolbar-bg-color: @toolbar-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-light: @toolbar-bg-color-light;
--toolbar-bg-color-active: @toolbar-bg-color-active; --toolbar-bg-color-active: @toolbar-bg-color-active;
@ -392,7 +394,6 @@
//display: inline-block; //display: inline-block;
button { button {
height: 100%; height: 100%;
border-radius: 0;
margin: 0; margin: 0;
background: transparent; background: transparent;
} }
@ -896,7 +897,7 @@
} }
.cp-toolbar-history, .cp-toolbar-snapshots { .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); background-color: var(--toolbar-bg-color-light);
color: @toolbar-color; color: @toolbar-color;
} }
@ -935,24 +936,9 @@
} }
} }
.cp-toolbar-bottom { .cp-toolbar-bottom {
background-color: @toolbar-bg-color-light;
background-color: var(--toolbar-bg-color-light);
color: @cp_toolbar-bottom-fg; 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; display: inline-flex;
margin: 5px 0px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
max-width: 100%; max-width: 100%;
@ -967,18 +953,45 @@
margin: 5px 0px; margin: 5px 0px;
} }
} }
button { 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; box-sizing: border-box;
position: relative; position: relative;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: @variables_radius;
height: @toolbar_line-height; height: @toolbar_line-height;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
.fa, .cptools { .fa, .cptools {
margin-right: 5px; 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 { button.cp-toolbar-collapse {
/* /*
@ -1013,14 +1026,25 @@
.cp-toolbar-bottom-left { .cp-toolbar-bottom-left {
display: flex; display: flex;
order: 1; order: 1;
padding-left: 5px;
button {
margin-right: 5px;
}
} }
.cp-toolbar-bottom-mid { .cp-toolbar-bottom-mid {
display: flex; display: flex;
order: 2; order: 2;
button {
margin-right: 5px;
}
} }
.cp-toolbar-bottom-right { .cp-toolbar-bottom-right {
order: 3; order: 3;
display: flex; display: flex;
padding-right: 5px;
button {
margin-left: 5px;
}
#cp-toolbar-chat-drawer-open { order: 0; } #cp-toolbar-chat-drawer-open { order: 0; }
#cp-toolbar-userlist-drawer-open { order: 1; } #cp-toolbar-userlist-drawer-open { order: 1; }
& > .cp-dropdown-container { & > .cp-dropdown-container {
@ -1091,11 +1115,11 @@
top: @toolbar_line-height; top: @toolbar_line-height;
margin: -1px; margin: -1px;
min-width: 50px; min-width: 50px;
background: @cp_dropdown-bg; background: @cp_dropdown-bg; // XXX not applied
display: flex; display: flex;
flex-flow: column; flex-flow: column;
z-index: 10000; //Z cp-toolbar-drawer-content z-index: 10000; //Z cp-toolbar-drawer-content
color: @cp_dropdown-fg; color: @cp_dropdown-fg; // XXX not applied
.tools_unselectable(); .tools_unselectable();
.fa { .fa {
font-size: 17px; 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"); 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('i.fa.fa-shhare-alt'),
h('span.cp-button-name', Messages.shareButton) 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"); 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('i.fa.fa-unlock-alt'),
h('span.cp-button-name', Messages.accessButton) 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"); 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('i.fa.fa-shhare-alt'),
h('span.cp-button-name', Messages.shareButton) h('span.cp-button-name', Messages.shareButton)
])); ]));