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

Fix toolbar issues

Browse Source
master
David Benqué 3 years ago
parent a574cfe1e2
commit aa356d6dff
5 changed files with 53 additions and 37 deletions
Show Stats Download Patch File Download Diff File

6
customize.dist/src/less2/include/colortheme-dark.less
Unescape Escape View File

@ -297,8 +297,8 @@
// Toolbar // Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_900; @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-bg: @cryptpad_text_col;
@cp_toolbar-bottom-fg: @cryptpad_text_col; @cp_toolbar-bottom-fg: @cryptpad_color_grey_900;
@cp_toolbar-logo-bg: @cryptpad_color_grey_200; @cp_toolbar-logo-bg: @cryptpad_color_grey_200;
@cp_toolbar-fade1: fade(@cryptpad_text_col, 10%); @cp_toolbar-fade1: fade(@cryptpad_text_col, 10%);
@ -308,7 +308,7 @@
@cp_history-line-bg: @cryptpad_color_grey_900; @cp_history-line-bg: @cryptpad_color_grey_900;
@cp_history-bg1: @cryptpad_color_grey_600; @cp_history-bg1: @cryptpad_color_grey_600;
@cp_history-bg2: @cryptpad_color_grey_800; @cp_history-bg2: @cryptpad_color_grey_800;
@cp_history-fg: @cp_toolbar-bottom-fg; @cp_history-fg: @cp_toolbar-fg;
// Tokenfield // Tokenfield
@cp_token-bg: @cryptpad_color_grey_700; @cp_token-bg: @cryptpad_color_grey_700;

5
customize.dist/src/less2/include/colortheme.less
Unescape Escape View File

@ -294,8 +294,9 @@
@cp_support-header-bg: @cryptpad_color_grey_300; @cp_support-header-bg: @cryptpad_color_grey_300;
// Toolbar // Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_200; @cp_toolbar-bg: @cryptpad_color_white;
@cp_toolbar-fg: @cryptpad_text_col; @cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-bottom-bg: @cryptpad_color_grey_200;
@cp_toolbar-bottom-fg: @cryptpad_text_col; @cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-logo-bg: @cryptpad_color_white; @cp_toolbar-logo-bg: @cryptpad_color_white;
@ -306,7 +307,7 @@
@cp_history-line-bg: @cryptpad_color_white; @cp_history-line-bg: @cryptpad_color_white;
@cp_history-bg1: #DDD; @cp_history-bg1: #DDD;
@cp_history-bg2: #BBB; @cp_history-bg2: #BBB;
@cp_history-fg: @cp_toolbar-bottom-fg; @cp_history-fg: @cp_toolbar-fg;
// Tokenfield // Tokenfield
@cp_token-bg: @cryptpad_color_grey_400; @cp_token-bg: @cryptpad_color_grey_400;

8
customize.dist/src/less2/include/toolbar-history.less
Unescape Escape View File

@ -90,8 +90,8 @@
button { button {
margin: 0 5px; margin: 0 5px;
border: 1px solid @cp_toolbar-fg; border: 1px solid @cp_toolbar-fg;
background-color: @cp_toolbar-fg; background-color: @cp_toolbar-bg;
color: @cp_toolbar-fg-inv; color: @cp_toolbar-fg;
border-radius: @variables_radius; border-radius: @variables_radius;
text-transform: uppercase; text-transform: uppercase;
display: inline-flex; display: inline-flex;
@ -100,7 +100,8 @@
margin-right: 5px; margin-right: 5px;
} }
&:hover { &:hover {
background-color: fade(@cp_toolbar-fg, 70%); // XXX DB: check hover in light/dark themes
background-color: fade(@cp_toolbar-fg, 30%);
} }
&:disabled { &:disabled {
cursor: not-allowed !important; cursor: not-allowed !important;
@ -243,6 +244,7 @@
margin: 5px 0px 5px 40px; margin: 5px 0px 5px 40px;
button { button {
width: 50px; width: 50px;
color: @cp_toolbar-fg;
border-radius: @variables_radius; border-radius: @variables_radius;
.fa:first-child:not(:last-child) { .fa:first-child:not(:last-child) {
margin-right: 5px; margin-right: 5px;

69
customize.dist/src/less2/include/toolbar.less
Unescape Escape View File

@ -15,6 +15,8 @@
@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;
// XXX Todo: clean up unused variables
// XXX: check contrasts of app colors used as btn background
@toolbar-bg-color-fade: fade(@toolbar-bg-color, 70%); @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%));
@ -504,7 +506,7 @@
.cp-toolbar-link { .cp-toolbar-link {
height: @toolbar_line-height; height: @toolbar_line-height;
width: @toolbar_line-height; width: @toolbar_line-height;
transform: scale(0.5); //transform: scale(0.5);
.cp-toolbar-link-logo { .cp-toolbar-link-logo {
padding: 5px; padding: 5px;
} }
@ -724,7 +726,7 @@
line-height: @toolbar_top-height; line-height: @toolbar_top-height;
width: @toolbar_top-height; width: @toolbar_top-height;
height: @toolbar_top-height; height: @toolbar_top-height;
padding: 0; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
} }
@ -736,9 +738,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: @toolbar_top-height; width: @toolbar_top-height - 10px;
font-size: 1em; font-size: 1em;
height: @toolbar_top-height; height: @toolbar_top-height - 10px;
border-radius: @variables_radius;
padding: 0px; padding: 0px;
margin: 0; margin: 0;
&::before { &::before {
@ -797,21 +800,25 @@
height: auto; height: auto;
padding: 10px; padding: 10px;
svg { span {
#outline, #squares { font-size: 45px;
fill: @toolbar-bg-color;
fill: var(--toolbar-bg-color);
}
#background {
fill: @cp_toolbar-logo-bg;
}
} }
img { // svg {
cursor: pointer; // #outline, #squares {
height: 100%; // fill: @toolbar-bg-color;
width: 100%; // fill: var(--toolbar-bg-color);
} // }
// #background {
// fill: @cp_toolbar-logo-bg;
// }
// }
// img {
// cursor: pointer;
// height: 100%;
// width: 100%;
// }
} }
} }
.cp-toolbar-user { .cp-toolbar-user {
@ -955,7 +962,7 @@
} }
button { button {
border: 1px solid @cp_toolbar-bottom-fg; border: 1px solid @cp_toolbar-bottom-bg;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
margin: 0px; margin: 0px;
@ -967,38 +974,44 @@
margin-right: 5px; margin-right: 5px;
} }
&:hover { &:hover {
background-color: fade(@cp_toolbar-bottom-fg, 70%); // XXX DB: not working well in dark/light
background-color: fade(@cp_toolbar-bottom-bg, 70%);
} }
} }
.cp-toolbar-bottom-left > button, .cp-toolbar-bottom-left > button,
.cp-toolbar-bottom-mid > button, .cp-toolbar-bottom-mid > button,
.cp-toolbar-bottom-right > button, .cp-toolbar-bottom-right > button,
.cp-toolbar-bottom-right > span > button { .cp-toolbar-bottom-right > span > button {
background-color: @cp_toolbar-bottom-fg; background-color: @cp_toolbar-bottom-bg;
color: @cp_toolbar-fg-inv; color: @cp_toolbar-bottom-fg;
&:hover { &:hover {
background-color: fade(@cp_toolbar-bottom-fg, 70%); // XXX DB: not working well in dark/light
background-color: fade(@cp_toolbar-bottom-bg, 50%);
border-color: fade(@cp_toolbar-bottom-bg, 50%);
} }
&.cp-toolbar-button-active { &.cp-toolbar-button-active {
background-color: @cp_toolbar-bg; background-color: @cp_toolbar-bg;
border-color: @cp_toolbar-bottom-fg; border-color: @cp_toolbar-fg;
color: @cp_toolbar-bottom-fg; color: @cp_toolbar-fg;
&:hover { &:hover {
background-color: fade(@cp_toolbar-bottom-fg, 30%); // XXX DB: not working well in dark/light
background-color: fade(@cp_toolbar-bottom-bg, 50%);
} }
} }
} }
button.cp-toolbar-button-primary { button.cp-toolbar-button-primary {
background-color: @toolbar-bg-color; background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color); background-color: var(--toolbar-bg-color);
border-color: @toolbar-bg-color; border-color: @toolbar-bg-color;
border-color: var(--toolbar-bg-color); border-color: var(--toolbar-bg-color);
color: @cp_toolbar-fg-inv; color: @cp_toolbar-bottom-fg;
&:hover { &:hover {
background-color: fade(@toolbar-bg-color, 70%); // XXX DB: not working well in dark/light
background-color: fade(@toolbar-bg-color, 50%);
background-color: var(--toolbar-bg-color-fade); background-color: var(--toolbar-bg-color-fade);
border-color: fade(@toolbar-bg-color, 50%);
border-color: var(--toolbar-bg-color-fade);
} }
} }
button.cp-toolbar-collapse { button.cp-toolbar-collapse {

2
www/common/toolbar.js
Unescape Escape View File

@ -896,7 +896,7 @@ MessengerUI, Messages, Pages) {
href: href, href: href,
title: buttonTitle, title: buttonTitle,
'class': "cp-toolbar-link-logo" 'class': "cp-toolbar-link-logo"
}).append(UIElements.getSvgLogo()); }).append(UI.getIcon(privateData.app));
var onClick = function (e) { var onClick = function (e) {
e.preventDefault(); e.preventDefault();

Write Preview
Loading…
Cancel
Save