From f1025207782230175f86c0996320aa71f54810fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 7 Feb 2022 10:56:00 +0000 Subject: [PATCH] Polish Drive sidebar --- .../src/less2/include/colortheme-dark.less | 6 ++- .../src/less2/include/colortheme.less | 6 ++- .../src/less2/include/contextmenu.less | 4 +- customize.dist/src/less2/include/drive.less | 49 ++++++++++++++----- .../src/less2/include/leftside-menu.less | 6 ++- .../src/less2/include/variables.less | 4 ++ 6 files changed, 57 insertions(+), 18 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 1c71d4f05..c8997147a 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -168,11 +168,13 @@ @cp_buttons-cancel-border: @cryptpad_color_grey_400; // Sidebar layout -@cp_sidebar-left-bg: @cryptpad_color_grey_850; +@cp_sidebar-left-bg: @cryptpad_color_grey_900; @cp_sidebar-left-fg: @cryptpad_text_col; +@cp_sidebar-left-item-bg: @cryptpad_color_grey_800; @cp_sidebar-right-bg: @cryptpad_color_grey_900; @cp_sidebar-right-fg: @cryptpad_text_col; -@cp_sidebar-left-active: @cp_sidebar-right-bg; +@cp_sidebar-left-active: @cryptpad_color_grey_400; +@cp_sidebar-left-active-fg: @cryptpad_color_grey_900; // XXX create text_col_inv ? @cp_sidebar-hint: fade(@cryptpad_text_col, 80%); // Drive diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 8817f9312..9063af5fc 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -167,11 +167,13 @@ @cp_buttons-cancel-border: #949494; // Sidebar layout -@cp_sidebar-left-bg: @cryptpad_color_grey_200; +@cp_sidebar-left-bg: @cryptpad_color_white; @cp_sidebar-left-fg: @cryptpad_text_col; +@cp_sidebar-left-item-bg: @cryptpad_color_grey_200; @cp_sidebar-right-bg: @cryptpad_color_white; @cp_sidebar-right-fg: @cryptpad_text_col; -@cp_sidebar-left-active: @cp_sidebar-right-bg; +@cp_sidebar-left-active: @cryptpad_color_grey_700; +@cp_sidebar-left-active-fg: @cryptpad_color_grey_200; @cp_sidebar-hint: @cryptpad_color_grey_600; // Drive diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index 08c7f1d9c..7767cf9c5 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .contextmenu_main() { --LessLoader_require: LessLoader_currentFile(); @@ -11,7 +12,7 @@ & > ul { border: 1px solid @cp_context-border; background-color: @cp_context-bg; - border-radius: 0px; + border-radius: @variables_radius; .dropdown-divider { border-top: 1px solid @cp_context-border; } @@ -46,6 +47,7 @@ cursor: pointer; color: @cp_context-fg; padding-left: 10px; + border-radius: @variables_radius; &:hover { background-color: @cp_context-bg-hover; color: @cp_context-fg; diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index c6a218653..3a1e654d8 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -270,7 +270,7 @@ white-space: nowrap; max-width: 500px; min-width: 200px; - padding: 0px; + padding: 10px 0px 0px 0px; color: @cp_sidebar-left-fg; display: flex; flex-flow: column; @@ -279,6 +279,7 @@ .cp-app-drive-tree-categories-container { flex: 1; overflow: auto; + padding: 0px 5px; } img.cp-app-drive-icon { margin-bottom: 3px; @@ -288,6 +289,8 @@ margin-top: 15px; //padding: 0 0 0 20px; padding: 0; + background-color: @cp_sidebar-left-item-bg; + border-radius: @variables_radius; cursor: auto; &li, li { padding: 0; @@ -307,7 +310,7 @@ text-overflow: ellipsis; //min-width: ~"calc(100% + 5px)"; .leftside-menu-category_main(); - width: ~"calc(100% + 5px)"; + //width: ~"calc(100% + 5px)"; // XXX remove margin: 0; //margin-bottom: -6px; display: flex; @@ -318,8 +321,9 @@ .fa, .cptools { display: inline-block; min-width: 0; - width: 25px; + width: 20px; margin-right: 0px; + z-index: 99; } .cp-app-drive-element { flex: 1; @@ -335,7 +339,10 @@ } .cp-app-drive-tree-category { margin: 0; - margin-top: 15px; + margin-top: 10px; + background-color: @cp_sidebar-left-item-bg; + border-radius: @variables_radius; + box-shadow: 0px 0px 5px 1px #00000030; // XXX .cp-app-drive-tree-root { .fa-trash-o { padding-left: 2px; @@ -361,11 +368,11 @@ margin-left: -10px; font-size: 14px; position: absolute; - left: -20px; - top: 10px; + left: -17px; + top: 11px; width: 11px !important; height: 11px !important; - background-color: @cp_sidebar-left-bg; + background-color: @cp_sidebar-left-item-bg; padding: 0; margin: 0; z-index: 10; @@ -376,17 +383,36 @@ } } .cp-app-drive-tree-docs { + box-shadow: 0px 0px 5px 1px #00000030; // XXX + padding: 2px; + + .cp-app-drive-element-row { + &.cp-leftside-active { + .cp-app-drive-icon-expcol { + color: @cryptpad_text_col; // +/- expand icon for folders + } + } + } + .cp-app-drive-tree-root > .cp-app-drive-element-row { + margin-left: 0px; + &.cp-app-drive-element-active { + .cp-app-drive-icon-expcol { + color: @cp_sidebar-left-active-fg; // +/- expand icon for drive + } + } + } .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol { position: relative; top: 0; left: -10px; + background-color: transparent; } .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder { margin-left: -5px; } .cp-app-drive-tree-root { &> .cp-app-drive-element-row { - padding-left: 20px; + padding-left: 15px; } &> ul { padding-left: 30px; @@ -403,8 +429,8 @@ position: relative; &:before { position: absolute; - left: -15px; - top: -11px; + left: -12px; + top: -10px; content: ''; display: block; border-left: 1px solid @cp_drive-tree-branch; @@ -414,7 +440,7 @@ } &:after { position: absolute; - left: -15px; + left: -12px; bottom: -7px; content: ''; display: block; @@ -448,6 +474,7 @@ box-sizing: border-box; background: @cp_sidebar-right-bg; color: @cp_sidebar-right-fg; + padding-top: 10px; overflow-y: auto; flex: 1; display: flex; diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less index 5a69f528f..9ec56f9af 100644 --- a/customize.dist/src/less2/include/leftside-menu.less +++ b/customize.dist/src/less2/include/leftside-menu.less @@ -4,20 +4,22 @@ .leftside-menu-category_main() { .unselectable_make(); - padding: 5px 15px; + padding: 5px; margin: 15px 0; cursor: pointer; height: @variables_bar-height; + border-radius: @variables_radius; .fa, .cptools { display: inline-flex; justify-content: center; margin-right: 5px; - min-width: 25px; + min-width: 20px; } &:hover { background: fade(@cryptpad_text_col, 10%); } &.cp-leftside-active { background: @cp_sidebar-left-active; + color: @cp_sidebar-left-active-fg; } } diff --git a/customize.dist/src/less2/include/variables.less b/customize.dist/src/less2/include/variables.less index 077e32d52..815fe11be 100644 --- a/customize.dist/src/less2/include/variables.less +++ b/customize.dist/src/less2/include/variables.less @@ -10,3 +10,7 @@ // Used in modal.less and alertify.less @variables_padding: 12px; @variables_shadow: 0 8px 32px 0 @cp_shadow-color; + +// Rounded corners +@variables_radius: 5px; +@variables_radius_L: 10px; \ No newline at end of file