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

Polish Drive sidebar

Browse Source
master
David Benqué 3 years ago
parent fe7531c137
commit f102520778
6 changed files with 57 additions and 18 deletions
Show Stats Download Patch File Download Diff File

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

@ -168,11 +168,13 @@
@cp_buttons-cancel-border: @cryptpad_color_grey_400; @cp_buttons-cancel-border: @cryptpad_color_grey_400;
// Sidebar layout // 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-fg: @cryptpad_text_col;
@cp_sidebar-left-item-bg: @cryptpad_color_grey_800;
@cp_sidebar-right-bg: @cryptpad_color_grey_900; @cp_sidebar-right-bg: @cryptpad_color_grey_900;
@cp_sidebar-right-fg: @cryptpad_text_col; @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%); @cp_sidebar-hint: fade(@cryptpad_text_col, 80%);
// Drive // Drive

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

@ -167,11 +167,13 @@
@cp_buttons-cancel-border: #949494; @cp_buttons-cancel-border: #949494;
// Sidebar layout // 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-fg: @cryptpad_text_col;
@cp_sidebar-left-item-bg: @cryptpad_color_grey_200;
@cp_sidebar-right-bg: @cryptpad_color_white; @cp_sidebar-right-bg: @cryptpad_color_white;
@cp_sidebar-right-fg: @cryptpad_text_col; @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; @cp_sidebar-hint: @cryptpad_color_grey_600;
// Drive // Drive

4
customize.dist/src/less2/include/contextmenu.less
Unescape Escape View File

@ -1,4 +1,5 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";
.contextmenu_main() { .contextmenu_main() {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -11,7 +12,7 @@
& > ul { & > ul {
border: 1px solid @cp_context-border; border: 1px solid @cp_context-border;
background-color: @cp_context-bg; background-color: @cp_context-bg;
border-radius: 0px; border-radius: @variables_radius;
.dropdown-divider { .dropdown-divider {
border-top: 1px solid @cp_context-border; border-top: 1px solid @cp_context-border;
} }
@ -46,6 +47,7 @@
cursor: pointer; cursor: pointer;
color: @cp_context-fg; color: @cp_context-fg;
padding-left: 10px; padding-left: 10px;
border-radius: @variables_radius;
&:hover { &:hover {
background-color: @cp_context-bg-hover; background-color: @cp_context-bg-hover;
color: @cp_context-fg; color: @cp_context-fg;

49
customize.dist/src/less2/include/drive.less
Unescape Escape View File

@ -270,7 +270,7 @@
white-space: nowrap; white-space: nowrap;
max-width: 500px; max-width: 500px;
min-width: 200px; min-width: 200px;
padding: 0px; padding: 10px 0px 0px 0px;
color: @cp_sidebar-left-fg; color: @cp_sidebar-left-fg;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -279,6 +279,7 @@
.cp-app-drive-tree-categories-container { .cp-app-drive-tree-categories-container {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
padding: 0px 5px;
} }
img.cp-app-drive-icon { img.cp-app-drive-icon {
margin-bottom: 3px; margin-bottom: 3px;
@ -288,6 +289,8 @@
margin-top: 15px; margin-top: 15px;
//padding: 0 0 0 20px; //padding: 0 0 0 20px;
padding: 0; padding: 0;
background-color: @cp_sidebar-left-item-bg;
border-radius: @variables_radius;
cursor: auto; cursor: auto;
&li, li { &li, li {
padding: 0; padding: 0;
@ -307,7 +310,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
//min-width: ~"calc(100% + 5px)"; //min-width: ~"calc(100% + 5px)";
.leftside-menu-category_main(); .leftside-menu-category_main();
width: ~"calc(100% + 5px)"; //width: ~"calc(100% + 5px)"; // XXX remove
margin: 0; margin: 0;
//margin-bottom: -6px; //margin-bottom: -6px;
display: flex; display: flex;
@ -318,8 +321,9 @@
.fa, .cptools { .fa, .cptools {
display: inline-block; display: inline-block;
min-width: 0; min-width: 0;
width: 25px; width: 20px;
margin-right: 0px; margin-right: 0px;
z-index: 99;
} }
.cp-app-drive-element { .cp-app-drive-element {
flex: 1; flex: 1;
@ -335,7 +339,10 @@
} }
.cp-app-drive-tree-category { .cp-app-drive-tree-category {
margin: 0; 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 { .cp-app-drive-tree-root {
.fa-trash-o { .fa-trash-o {
padding-left: 2px; padding-left: 2px;
@ -361,11 +368,11 @@
margin-left: -10px; margin-left: -10px;
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
left: -20px; left: -17px;
top: 10px; top: 11px;
width: 11px !important; width: 11px !important;
height: 11px !important; height: 11px !important;
background-color: @cp_sidebar-left-bg; background-color: @cp_sidebar-left-item-bg;
padding: 0; padding: 0;
margin: 0; margin: 0;
z-index: 10; z-index: 10;
@ -376,17 +383,36 @@
} }
} }
.cp-app-drive-tree-docs { .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 { .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol {
position: relative; position: relative;
top: 0; top: 0;
left: -10px; left: -10px;
background-color: transparent;
} }
.cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder { .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder {
margin-left: -5px; margin-left: -5px;
} }
.cp-app-drive-tree-root { .cp-app-drive-tree-root {
&> .cp-app-drive-element-row { &> .cp-app-drive-element-row {
padding-left: 20px; padding-left: 15px;
} }
&> ul { &> ul {
padding-left: 30px; padding-left: 30px;
@ -403,8 +429,8 @@
position: relative; position: relative;
&:before { &:before {
position: absolute; position: absolute;
left: -15px; left: -12px;
top: -11px; top: -10px;
content: ''; content: '';
display: block; display: block;
border-left: 1px solid @cp_drive-tree-branch; border-left: 1px solid @cp_drive-tree-branch;
@ -414,7 +440,7 @@
} }
&:after { &:after {
position: absolute; position: absolute;
left: -15px; left: -12px;
bottom: -7px; bottom: -7px;
content: ''; content: '';
display: block; display: block;
@ -448,6 +474,7 @@
box-sizing: border-box; box-sizing: border-box;
background: @cp_sidebar-right-bg; background: @cp_sidebar-right-bg;
color: @cp_sidebar-right-fg; color: @cp_sidebar-right-fg;
padding-top: 10px;
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
display: flex; display: flex;

6
customize.dist/src/less2/include/leftside-menu.less
Unescape Escape View File

@ -4,20 +4,22 @@
.leftside-menu-category_main() { .leftside-menu-category_main() {
.unselectable_make(); .unselectable_make();
padding: 5px 15px; padding: 5px;
margin: 15px 0; margin: 15px 0;
cursor: pointer; cursor: pointer;
height: @variables_bar-height; height: @variables_bar-height;
border-radius: @variables_radius;
.fa, .cptools { .fa, .cptools {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
margin-right: 5px; margin-right: 5px;
min-width: 25px; min-width: 20px;
} }
&:hover { &:hover {
background: fade(@cryptpad_text_col, 10%); background: fade(@cryptpad_text_col, 10%);
} }
&.cp-leftside-active { &.cp-leftside-active {
background: @cp_sidebar-left-active; background: @cp_sidebar-left-active;
color: @cp_sidebar-left-active-fg;
} }
} }

4
customize.dist/src/less2/include/variables.less
Unescape Escape View File

@ -10,3 +10,7 @@
// Used in modal.less and alertify.less // Used in modal.less and alertify.less
@variables_padding: 12px; @variables_padding: 12px;
@variables_shadow: 0 8px 32px 0 @cp_shadow-color; @variables_shadow: 0 8px 32px 0 @cp_shadow-color;
// Rounded corners
@variables_radius: 5px;
@variables_radius_L: 10px;
Write Preview
Loading…
Cancel
Save