github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Handle multi-selection.

Browse source
This commit is contained in:
Paulo Reis 2017-11-21 16:10:07 +00:00
parent 1fd29253e6
commit 8758119e62
2 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
services/web/public/stylesheets/app/editor/file-tree.less
View file

@ -68,7 +68,7 @@ aside#file-tree {
line-height: 1.6; line-height: 1.6;
} }
&.droppable-hover { &.droppable-hover {
// TODO // TODO pick right color for the OL Beta theme.
background-color: fade(@file-tree-droppable-background-color, 60%); background-color: fade(@file-tree-droppable-background-color, 60%);
} }
} }
@ -98,10 +98,14 @@ aside#file-tree {
} }
} }
> .entity when (@is-overleaf = true) { > .entity when (@is-overleaf = true) {
i.fa { > .entity-name {
> div > i.fa,
> i.fa,
.entity-menu-toggle i.fa {
color: #FFF; color: #FFF;
} }
> .entity-name { color: #FFF;
font-weight: bold;
background-color: @file-tree-multiselect-bg; background-color: @file-tree-multiselect-bg;
box-shadow: -200px 0 0 @file-tree-multiselect-bg; box-shadow: -200px 0 0 @file-tree-multiselect-bg;
&:hover { &:hover {
@ -155,18 +159,20 @@ aside#file-tree {
} }
> .entity when (@is-overleaf = true) { > .entity when (@is-overleaf = true) {
i.fa { > .entity-name {
> div > i.fa,
> i.fa,
.entity-menu-toggle i.fa {
color: #FFF; color: #FFF;
} }
> .entity-name {
background-color: @file-tree-item-selected-bg; background-color: @file-tree-item-selected-bg;
font-weight: bold;
padding-right: 32px;
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin) // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
// and, in consequence, the background gets clipped. The negative (in the x axis) box-shadow is a // and, in consequence, the background gets clipped. The negative (in the x axis) box-shadow is a
// hack to paint the unfilled left-hand region. // hack to paint the unfilled left-hand region.
box-shadow: -200px 0 0 @file-tree-item-selected-bg; box-shadow: -200px 0 0 @file-tree-item-selected-bg;
font-weight: bold;
padding-right: 32px;
.entity-menu-toggle { .entity-menu-toggle {
display: inline; display: inline;
@ -176,11 +182,13 @@ aside#file-tree {
} }
} }
// TODO pick right color for the OL Beta theme.
ul.droppable-hover { ul.droppable-hover {
background-color: fade(@file-tree-droppable-background-color, 60%); background-color: fade(@file-tree-droppable-background-color, 60%);
} }
} }
// TODO check if the OL Beta theme is OK with darker themes.
.editor-dark when (@is-overleaf = false) { .editor-dark when (@is-overleaf = false) {
aside#file-tree { aside#file-tree {
// background-color: lighten(@editor-dark-background-color, 10%); // background-color: lighten(@editor-dark-background-color, 10%);

2
services/web/public/stylesheets/core/ol-variables.less
View file

@ -175,7 +175,7 @@
// Editor file-tree // Editor file-tree
@file-tree-bg : @ol-blue-gray-4; @file-tree-bg : @ol-blue-gray-4;
@file-tree-item-color : #FFF; @file-tree-item-color : #FFF;
@file-tree-item-toggle-color : #FFF; @file-tree-item-toggle-color : @ol-blue-gray-2;
@file-tree-item-icon-color : @ol-blue-gray-2; @file-tree-item-icon-color : @ol-blue-gray-2;
@file-tree-item-folder-color : @ol-blue-gray-2; @file-tree-item-folder-color : @ol-blue-gray-2;
@file-tree-item-hover-bg : @ol-blue-gray-5; @file-tree-item-hover-bg : @ol-blue-gray-5;