From 6913d28abb25f09c1de99d9148c1fa0e0ff9fb48 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 13 Nov 2017 12:03:28 +0000 Subject: [PATCH 01/19] Editor header styling. --- services/web/public/stylesheets/app/base.less | 2 +- .../web/public/stylesheets/app/editor.less | 4 +-- .../public/stylesheets/app/editor/chat.less | 4 +-- .../stylesheets/app/editor/history.less | 6 ++--- .../public/stylesheets/app/editor/search.less | 2 +- .../stylesheets/app/editor/toolbar.less | 17 ++++++------ .../public/stylesheets/app/translations.less | 2 +- .../stylesheets/core/_common-variables.less | 27 ++++++++++++++----- .../public/stylesheets/core/ol-variables.less | 12 +++++++++ 9 files changed, 51 insertions(+), 25 deletions(-) diff --git a/services/web/public/stylesheets/app/base.less b/services/web/public/stylesheets/app/base.less index a78e1a7cfa..7f2d9a55ed 100644 --- a/services/web/public/stylesheets/app/base.less +++ b/services/web/public/stylesheets/app/base.less @@ -2,7 +2,7 @@ padding: (@line-height-computed / 4) (@line-height-computed / 2); background-color: @state-warning-bg; color: #333; - border-bottom: 1px solid @toolbar-border-color; + border-bottom: 1px solid @common-border-color; } .clickable { diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 75b7121094..017ea2ecc8 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -250,8 +250,8 @@ .ui-layout-resizer { width: 6px; background-color: #f4f4f4; - border-left: 1px solid @toolbar-border-color; - border-right: 1px solid @toolbar-border-color; + border-left: 1px solid @editor-border-color; + border-right: 1px solid @editor-border-color; .ui-layout-toggler { color: #999; font-family: FontAwesome; diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less index d0ad76fe9c..c782384cb7 100644 --- a/services/web/public/stylesheets/app/editor/chat.less +++ b/services/web/public/stylesheets/app/editor/chat.less @@ -126,12 +126,12 @@ height: @new-message-height; background-color: @gray-lightest; padding: @line-height-computed / 4; - border-top: 1px solid @toolbar-border-color; + border-top: 1px solid @editor-border-color; textarea { overflow: auto; resize: none; border-radius: @border-radius-base; - border: 1px solid @toolbar-border-color; + border: 1px solid @editor-border-color; height: 100%; width: 100%; color: @gray-dark; diff --git a/services/web/public/stylesheets/app/editor/history.less b/services/web/public/stylesheets/app/editor/history.less index 81af8f989f..b6dca4b7cc 100644 --- a/services/web/public/stylesheets/app/editor/history.less +++ b/services/web/public/stylesheets/app/editor/history.less @@ -70,7 +70,7 @@ } aside.change-list { - border-left: 1px solid @toolbar-border-color; + border-left: 1px solid @editor-border-color; height: 100%; width: @changesListWidth; position: absolute; @@ -91,7 +91,7 @@ .day { background-color: #fafafa; - border-bottom: 1px solid @toolbar-border-color; + border-bottom: 1px solid @editor-border-color; padding: 4px; font-weight: bold; text-align: center; @@ -132,7 +132,7 @@ padding: (@line-height-computed / 4); padding-left: 38px; min-height: 38px; - border-bottom: 1px solid @toolbar-border-color; + border-bottom: 1px solid @editor-border-color; cursor: pointer; &:hover { background-color: @gray-lightest; diff --git a/services/web/public/stylesheets/app/editor/search.less b/services/web/public/stylesheets/app/editor/search.less index 93e7e507d6..f31c59dd6f 100644 --- a/services/web/public/stylesheets/app/editor/search.less +++ b/services/web/public/stylesheets/app/editor/search.less @@ -1,6 +1,6 @@ .ace_search { background-color: @gray-lightest; - border: 1px solid @toolbar-border-color; + border: 1px solid @editor-border-color; border-top: 0 none; width: 350px; overflow: hidden; diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index 1bb5f62bdc..cb20c1354f 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -48,18 +48,18 @@ border: none; border-radius: 0; border-right: 1px solid @toolbar-border-color; - color: @link-color; + color: @toolbar-btn-color; padding: 3px 10px 5px; font-size: 20px; &:hover { - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); - background-color: darken(white, 10%); - color: @link-hover-color; + text-shadow: @toolbar-btn-hover-text-shadow; + background-color: @toolbar-btn-hover-bg-color; + color: @toolbar-btn-hover-color; } &.active, &:active { - color: white; - background-color: @link-color; - .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225)); + color: @toolbar-btn-active-color; + background-color: @toolbar-btn-active-bg-color; + box-shadow: @toolbar-btn-active-shadow; } .label { top: 4px; @@ -96,7 +96,8 @@ } &.toolbar-header { - box-shadow: 0 0 2px #ccc; + background-color: @toolbar-header-bg-color; + box-shadow: @toolbar-header-shadow; position: absolute; top: 0; left: 0; diff --git a/services/web/public/stylesheets/app/translations.less b/services/web/public/stylesheets/app/translations.less index 3b79b94aff..7ae7532b6c 100644 --- a/services/web/public/stylesheets/app/translations.less +++ b/services/web/public/stylesheets/app/translations.less @@ -3,7 +3,7 @@ padding: (@line-height-computed / 4) (@line-height-computed / 2); background-color: @state-warning-bg; color: #333; - border-bottom: 1px solid @toolbar-border-color; + border-bottom: 1px solid @common-border-color; text-align:center; img { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 0b5d3bf744..1809597f37 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -794,6 +794,8 @@ @left-menu-animation-duration: 0.35s; @toolbar-border-color: @gray-lighter; +@common-border-color: @gray-lighter; +@editor-border-color: @gray-lighter; @file-tree-droppable-background-color: rgb(252, 231, 199); @editor-dark-background-color: #333; @@ -876,15 +878,26 @@ @folders-untagged-line-height : 1.7; // Progress bars -@progress-border-radius : @border-radius-base; -@progress-border-width : 1px; -@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15); +@progress-border-radius : @border-radius-base; +@progress-border-width : 1px; +@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15); // Footer -@footer-link-color : @link-color; -@footer-link-hover-color : @link-hover-color; -@footer-bg-color : transparent; -@footer-padding : 2em; +@footer-link-color : @link-color; +@footer-link-hover-color : @link-hover-color; +@footer-bg-color : transparent; +@footer-padding : 2em; + +// Editor header +@toolbar-header-bg-color : transparent; +@toolbar-header-shadow : 0 0 2px #ccc; +@toolbar-btn-color : @link-color; +@toolbar-btn-hover-color : @link-hover-color; +@toolbar-btn-hover-bg-color : @link-hover-color; +@toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15); +@toolbar-btn-active-color : white; +@toolbar-btn-active-bg-color : @link-color; +@toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225); // Tags @tag-border-radius : 0.25em; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 43646ec542..4443de13ae 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -156,6 +156,18 @@ @footer-link-hover-color : @ol-dark-green; @footer-padding : 2em 0; +// Editor header +@toolbar-header-bg-color : @ol-blue-gray-6; +@toolbar-header-shadow : none; +@toolbar-btn-color : #FFF; +@toolbar-btn-hover-color : #FFF; +@toolbar-btn-hover-bg-color : @ol-blue-gray-5; +@toolbar-btn-hover-text-shadow : none; +@toolbar-btn-active-color : #FFF; +@toolbar-btn-active-bg-color : @ol-green; +@toolbar-btn-active-shadow : none; +@toolbar-border-color : @ol-blue-gray-5; + //== Colors // //## Gray and brand colors for use across Bootstrap. From 269975560f37a3a9ecff93b778971ef1140ba3ee Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 20 Nov 2017 12:24:00 +0000 Subject: [PATCH 02/19] Basic filetree skinning, still WIP. --- .../stylesheets/app/editor/file-tree.less | 28 +++++++++++++++---- .../stylesheets/app/editor/toolbar.less | 2 +- .../stylesheets/core/_common-variables.less | 7 +++++ .../public/stylesheets/core/ol-variables.less | 9 +++++- 4 files changed, 38 insertions(+), 8 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index 7847822bf9..ef481ce083 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -7,6 +7,7 @@ aside#file-tree { left: 0; right: 0; overflow-y: auto; + background-color: @file-tree-bg; &.no-toolbar { top: 0; @@ -20,10 +21,13 @@ aside#file-tree { margin: (@line-height-computed / 2); } - ul.file-tree-list { + ul.file-tree-list when (@is-overleaf = false) { font-size: 0.8rem; - margin: 0; padding: (@line-height-computed / 4) 0; + } + + ul.file-tree-list { + margin: 0; overflow-x: hidden; height: 100%; @@ -40,13 +44,13 @@ aside#file-tree { } .entity-name { - color: @gray-darker; + color: @file-tree-item-color; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &:hover { - background-color: @gray-lightest; + background-color: @file-tree-item-hover-bg; } input { line-height: 1.6; @@ -57,7 +61,7 @@ aside#file-tree { } i.fa { - color: @gray-light; + color: @file-tree-item-color; font-size: 14px; } @@ -111,7 +115,7 @@ aside#file-tree { &:not(.multi-selected) { ul.file-tree-list li.selected { - > .entity > .entity-name { + > .entity > .entity-name when (@is-overleaf = false) { color: @link-color; border-right: 4px solid @link-color; font-weight: bold; @@ -123,6 +127,18 @@ aside#file-tree { display: inline; } } + + > .entity when (@is-overleaf = true) { + background-color: @file-tree-item-selected-bg; + > .entity-name { + font-weight: bold; + padding-right: 32px; + + .entity-menu-toggle { + display: inline; + } + } + } } } diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index cb20c1354f..fa08126027 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -139,7 +139,7 @@ } &.toolbar-alt { - background-color: #fafafa; + background-color: @toolbar-alt-bg-color; } } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 1809597f37..487a45e5de 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -898,7 +898,14 @@ @toolbar-btn-active-color : white; @toolbar-btn-active-bg-color : @link-color; @toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225); +@toolbar-alt-bg-color : #fafafa; +// Editor file-tree +@file-tree-bg : transparent; +@file-tree-item-color : @gray-darker; +@file-tree-item-icon-color : @gray-light; +@file-tree-item-hover-bg : @gray-lightest; +@file-tree-item-selected-bg : transparent; // Tags @tag-border-radius : 0.25em; @tag-bg-color : @label-default-bg; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 4443de13ae..eb379e8d64 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -8,7 +8,7 @@ @ol-blue-gray-1 : #E4E8EE; @ol-blue-gray-2 : #9DA7B7; @ol-blue-gray-3 : #5D6879; -@ol-blue-gray-4 : #485973; +@ol-blue-gray-4 : #455265; @ol-blue-gray-5 : #2C3645; @ol-blue-gray-6 : #1E2530; @@ -167,7 +167,14 @@ @toolbar-btn-active-bg-color : @ol-green; @toolbar-btn-active-shadow : none; @toolbar-border-color : @ol-blue-gray-5; +@toolbar-alt-bg-color : @ol-blue-gray-5; +// Editor file-tree +@file-tree-bg : @ol-blue-gray-4; +@file-tree-item-color : white; +@file-tree-item-icon-color : @file-tree-item-color +@file-tree-item-hover-bg : @ol-blue-gray-5; +@file-tree-item-selected-bg : @ol-green; //== Colors // //## Gray and brand colors for use across Bootstrap. From 0de57885b19901dc9582fd6d3c2b2f7e4c0bc40c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 21 Nov 2017 11:20:39 +0000 Subject: [PATCH 03/19] Make full-width backgrounds, even with indented filetree items. --- .../stylesheets/app/editor/file-tree.less | 33 ++++++++++++++----- .../stylesheets/app/editor/toolbar.less | 6 ++-- .../stylesheets/core/_common-variables.less | 17 +++++++--- .../public/stylesheets/core/ol-variables.less | 17 +++++++--- 4 files changed, 52 insertions(+), 21 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index ef481ce083..9ceb415ec3 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -31,7 +31,11 @@ aside#file-tree { overflow-x: hidden; height: 100%; - ul { + ul when (@is-overleaf = false) { + margin-left: (@line-height-computed / 2); + } + + ul when (@is-overleaf = true) { margin-left: (@line-height-computed / 2); } @@ -52,6 +56,13 @@ aside#file-tree { &:hover { background-color: @file-tree-item-hover-bg; } + &:hover when (@is-overleaf = true) { + // 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) + // 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. + box-shadow: -200px 0 0 @file-tree-item-hover-bg; + } input { line-height: 1.6; } @@ -61,12 +72,12 @@ aside#file-tree { } i.fa { - color: @file-tree-item-color; + color: @file-tree-item-icon-color; font-size: 14px; } i.fa-folder-open, i.fa-folder { - color: lighten(desaturate(@link-color, 10%), 5%); + color: @file-tree-item-folder-color; font-size: 14px; } @@ -74,7 +85,7 @@ aside#file-tree { width: 24px; padding: 6px; font-size: 0.7rem; - color: @gray + color: @file-tree-item-toggle-color; } &.multi-selected { @@ -129,8 +140,16 @@ aside#file-tree { } > .entity when (@is-overleaf = true) { - background-color: @file-tree-item-selected-bg; + i.fa { + color: #FFF; + } > .entity-name { + background-color: @file-tree-item-selected-bg; + // 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) + // 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. + box-shadow: -200px 0 0 @file-tree-item-selected-bg; font-weight: bold; padding-right: 32px; @@ -147,7 +166,7 @@ aside#file-tree { } } -.editor-dark { +.editor-dark when (@is-overleaf = false) { aside#file-tree { // background-color: lighten(@editor-dark-background-color, 10%); @@ -175,6 +194,4 @@ aside#file-tree { } } } - - } diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index fa08126027..6eaede0d37 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -22,13 +22,13 @@ .toolbar-left > a:not(.btn), .toolbar-right > a:not(.btn) { display: inline-block; - color: @gray-light; + color: @toolbar-icon-btn-color; padding: 4px 10px 5px; margin: 1px 2px; border-radius: @border-radius-small; &:hover { - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - color: @gray-dark; + text-shadow: @toolbar-icon-btn-hover-shadow; + color: @toolbar-icon-btn-hover-color; text-decoration: none; } &.active, &:active { diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 487a45e5de..20bf83a34b 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -899,13 +899,20 @@ @toolbar-btn-active-bg-color : @link-color; @toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225); @toolbar-alt-bg-color : #fafafa; +@toolbar-icon-btn-color : @gray-light; +@toolbar-icon-btn-hover-color : @gray-dark; +@toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25); // Editor file-tree -@file-tree-bg : transparent; -@file-tree-item-color : @gray-darker; -@file-tree-item-icon-color : @gray-light; -@file-tree-item-hover-bg : @gray-lightest; -@file-tree-item-selected-bg : transparent; +@file-tree-bg : transparent; +@file-tree-item-color : @gray-darker; +@file-tree-item-toggle-color : @gray; +@file-tree-item-icon-color : @gray-light; +@file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%); +@file-tree-item-hover-bg : @gray-lightest; +@file-tree-item-selected-bg : transparent; +@file-tree-multiselect-bg : lighten(@brand-info, 40%); +@file-tree-multiselect-hover-bg : lighten(@brand-info, 30%); // Tags @tag-border-radius : 0.25em; @tag-bg-color : @label-default-bg; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index eb379e8d64..30d11f7a83 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -168,13 +168,20 @@ @toolbar-btn-active-shadow : none; @toolbar-border-color : @ol-blue-gray-5; @toolbar-alt-bg-color : @ol-blue-gray-5; +@toolbar-icon-btn-color : #FFF; +@toolbar-icon-btn-hover-color : #FFF; +@toolbar-icon-btn-hover-shadow : none; // Editor file-tree -@file-tree-bg : @ol-blue-gray-4; -@file-tree-item-color : white; -@file-tree-item-icon-color : @file-tree-item-color -@file-tree-item-hover-bg : @ol-blue-gray-5; -@file-tree-item-selected-bg : @ol-green; +@file-tree-bg : @ol-blue-gray-4; +@file-tree-item-color : #FFF; +@file-tree-item-toggle-color : #FFF; +@file-tree-item-icon-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-selected-bg : @ol-green; +@file-tree-multiselect-bg : lighten(@brand-warning, 10%); +@file-tree-multiselect-hover-bg : lighten(@brand-warning, 20%); //== Colors // //## Gray and brand colors for use across Bootstrap. From 1fd29253e653b11dc1e4792e02fc2bb4a00b013a Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 21 Nov 2017 11:45:06 +0000 Subject: [PATCH 04/19] Handle filetree multiselection. --- .../stylesheets/app/editor/file-tree.less | 21 ++++++++++++++++--- .../public/stylesheets/core/ol-variables.less | 4 ++-- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index 9ceb415ec3..ea485d590e 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -14,6 +14,7 @@ aside#file-tree { } } + // TODO; Consolidate with "Project files" in Overleaf h3 { font-size: 1rem; border-bottom: 1px solid @gray; @@ -67,6 +68,7 @@ aside#file-tree { line-height: 1.6; } &.droppable-hover { + // TODO background-color: fade(@file-tree-droppable-background-color, 60%); } } @@ -89,10 +91,23 @@ aside#file-tree { } &.multi-selected { - > .entity > .entity-name { - background-color: lighten(@brand-info, 40%); + > .entity > .entity-name when (@is-overleaf = false) { + background-color: @file-tree-multiselect-bg; &:hover { - background-color: lighten(@brand-info, 30%); + background-color: @file-tree-multiselect-hover-bg; + } + } + > .entity when (@is-overleaf = true) { + i.fa { + color: #FFF; + } + > .entity-name { + background-color: @file-tree-multiselect-bg; + box-shadow: -200px 0 0 @file-tree-multiselect-bg; + &:hover { + background-color: @file-tree-multiselect-hover-bg; + box-shadow: -200px 0 0 @file-tree-multiselect-hover-bg; + } } } } diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 30d11f7a83..caee24c450 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -180,8 +180,8 @@ @file-tree-item-folder-color : @ol-blue-gray-2; @file-tree-item-hover-bg : @ol-blue-gray-5; @file-tree-item-selected-bg : @ol-green; -@file-tree-multiselect-bg : lighten(@brand-warning, 10%); -@file-tree-multiselect-hover-bg : lighten(@brand-warning, 20%); +@file-tree-multiselect-bg : @ol-blue; +@file-tree-multiselect-hover-bg : @ol-dark-blue; //== Colors // //## Gray and brand colors for use across Bootstrap. From 8758119e62eb7099c60951ce1ed55409c2ea6189 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 21 Nov 2017 16:10:07 +0000 Subject: [PATCH 05/19] Handle multi-selection. --- .../stylesheets/app/editor/file-tree.less | 26 ++++++++++++------- .../public/stylesheets/core/ol-variables.less | 2 +- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index ea485d590e..a8fdf35ce2 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -68,7 +68,7 @@ aside#file-tree { line-height: 1.6; } &.droppable-hover { - // TODO + // TODO pick right color for the OL Beta theme. background-color: fade(@file-tree-droppable-background-color, 60%); } } @@ -98,10 +98,14 @@ aside#file-tree { } } > .entity when (@is-overleaf = true) { - i.fa { - color: #FFF; - } > .entity-name { + > div > i.fa, + > i.fa, + .entity-menu-toggle i.fa { + color: #FFF; + } + color: #FFF; + font-weight: bold; background-color: @file-tree-multiselect-bg; box-shadow: -200px 0 0 @file-tree-multiselect-bg; &:hover { @@ -155,18 +159,20 @@ aside#file-tree { } > .entity when (@is-overleaf = true) { - i.fa { - color: #FFF; - } > .entity-name { + > div > i.fa, + > i.fa, + .entity-menu-toggle i.fa { + color: #FFF; + } 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 // 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 // hack to paint the unfilled left-hand region. box-shadow: -200px 0 0 @file-tree-item-selected-bg; - font-weight: bold; - padding-right: 32px; .entity-menu-toggle { display: inline; @@ -176,11 +182,13 @@ aside#file-tree { } } + // TODO pick right color for the OL Beta theme. ul.droppable-hover { 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) { aside#file-tree { // background-color: lighten(@editor-dark-background-color, 10%); diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index caee24c450..fd4a41fe97 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -175,7 +175,7 @@ // Editor file-tree @file-tree-bg : @ol-blue-gray-4; @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-folder-color : @ol-blue-gray-2; @file-tree-item-hover-bg : @ol-blue-gray-5; From ead190bf23f7fad58659e9d7495683e24099e7e5 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 22 Nov 2017 11:54:57 +0000 Subject: [PATCH 06/19] Style drag and drop, also renaming and inputs. --- .../stylesheets/app/editor/file-tree.less | 21 +++++++++++++------ .../stylesheets/core/_common-variables.less | 3 ++- .../public/stylesheets/core/ol-variables.less | 20 ++++++++++-------- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index a8fdf35ce2..51c0197e59 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -67,10 +67,15 @@ aside#file-tree { input { line-height: 1.6; } - &.droppable-hover { - // TODO pick right color for the OL Beta theme. - background-color: fade(@file-tree-droppable-background-color, 60%); + &.droppable-hover when (@is-overleaf = false) { + background-color: fade(@file-tree-droppable-bg-color, 60%); } + + &.droppable-hover when (@is-overleaf = true) { + background-color: @file-tree-droppable-bg-color; + box-shadow: -200px 0 0 @file-tree-droppable-bg-color; + } + } i.fa { @@ -130,6 +135,7 @@ aside#file-tree { top: 1px; left: 44px; right: 32px; + color: @file-tree-item-input-color; input { width: 100%; } @@ -182,9 +188,12 @@ aside#file-tree { } } - // TODO pick right color for the OL Beta theme. - ul.droppable-hover { - background-color: fade(@file-tree-droppable-background-color, 60%); + ul.droppable-hover when (@is-overleaf = false) { + background-color: fade(@file-tree-droppable-bg-color, 60%); + } + ul.droppable-hover when (@is-overleaf = true) { + background-color: @file-tree-droppable-bg-color; + box-shadow: -200px 0 0 @file-tree-droppable-bg-color; } } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 20bf83a34b..6e22383496 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -796,7 +796,7 @@ @toolbar-border-color: @gray-lighter; @common-border-color: @gray-lighter; @editor-border-color: @gray-lighter; -@file-tree-droppable-background-color: rgb(252, 231, 199); +@file-tree-droppable-bg-color: rgb(252, 231, 199); @editor-dark-background-color: #333; @editor-dark-toolbar-border-color: #222; @@ -908,6 +908,7 @@ @file-tree-item-color : @gray-darker; @file-tree-item-toggle-color : @gray; @file-tree-item-icon-color : @gray-light; +@file-tree-item-input-color : inherit; @file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%); @file-tree-item-hover-bg : @gray-lightest; @file-tree-item-selected-bg : transparent; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index fd4a41fe97..325fbd28d5 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -173,15 +173,17 @@ @toolbar-icon-btn-hover-shadow : none; // Editor file-tree -@file-tree-bg : @ol-blue-gray-4; -@file-tree-item-color : #FFF; -@file-tree-item-toggle-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-hover-bg : @ol-blue-gray-5; -@file-tree-item-selected-bg : @ol-green; -@file-tree-multiselect-bg : @ol-blue; -@file-tree-multiselect-hover-bg : @ol-dark-blue; +@file-tree-bg : @ol-blue-gray-4; +@file-tree-item-color : #FFF; +@file-tree-item-input-color : @ol-blue-gray-5; +@file-tree-item-toggle-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-hover-bg : @ol-blue-gray-5; +@file-tree-item-selected-bg : @ol-green; +@file-tree-multiselect-bg : @ol-blue; +@file-tree-multiselect-hover-bg : @ol-dark-blue; +@file-tree-droppable-bg-color : tint(@ol-green, 5%); //== Colors // //## Gray and brand colors for use across Bootstrap. From 8cf82178e12170d1c0125d0307acaf1cfb099301 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 22 Nov 2017 12:10:33 +0000 Subject: [PATCH 07/19] Only highlight hovered folder when dragging. --- services/web/public/stylesheets/app/editor/file-tree.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index 51c0197e59..8d69d8f76b 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -188,10 +188,10 @@ aside#file-tree { } } - ul.droppable-hover when (@is-overleaf = false) { + ul.droppable-hover.file-tree-list when (@is-overleaf = false) { background-color: fade(@file-tree-droppable-bg-color, 60%); } - ul.droppable-hover when (@is-overleaf = true) { + ul.droppable-hover.file-tree-list when (@is-overleaf = true) { background-color: @file-tree-droppable-bg-color; box-shadow: -200px 0 0 @file-tree-droppable-bg-color; } From 9e109ccaaa2583d711c91c424124b8f0cf780ddd Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 22 Nov 2017 12:14:02 +0000 Subject: [PATCH 08/19] Fix wrong hover color in SL theme. --- services/web/public/stylesheets/core/_common-variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 6e22383496..8739ab48be 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -893,7 +893,7 @@ @toolbar-header-shadow : 0 0 2px #ccc; @toolbar-btn-color : @link-color; @toolbar-btn-hover-color : @link-hover-color; -@toolbar-btn-hover-bg-color : @link-hover-color; +@toolbar-btn-hover-bg-color : darken(white, 10%); @toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15); @toolbar-btn-active-color : white; @toolbar-btn-active-bg-color : @link-color; From f55ffff9609afaf4a41a9c096183368698a6db15 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 23 Nov 2017 15:21:06 +0000 Subject: [PATCH 09/19] Refactor toolbar variants as mixins. --- .../app/views/project/editor/file-tree.pug | 2 +- services/web/app/views/project/editor/pdf.pug | 2 +- .../stylesheets/app/editor/file-tree.less | 6 +- .../public/stylesheets/app/editor/pdf.less | 9 +++ .../stylesheets/app/editor/toolbar.less | 68 +++++++++++-------- 5 files changed, 56 insertions(+), 31 deletions(-) diff --git a/services/web/app/views/project/editor/file-tree.pug b/services/web/app/views/project/editor/file-tree.pug index 03c2bd79b7..1e5eaa73aa 100644 --- a/services/web/app/views/project/editor/file-tree.pug +++ b/services/web/app/views/project/editor/file-tree.pug @@ -1,5 +1,5 @@ aside#file-tree(ng-controller="FileTreeController", ng-class="{ 'multi-selected': multiSelectedCount > 0 }").full-size - .toolbar.toolbar-small.toolbar-alt(ng-if="permissions.write") + .toolbar.toolbar-filetree(ng-if="permissions.write") a( href, ng-click="openNewDocModal()", diff --git a/services/web/app/views/project/editor/pdf.pug b/services/web/app/views/project/editor/pdf.pug index eb2b4bfefd..057cacb222 100644 --- a/services/web/app/views/project/editor/pdf.pug +++ b/services/web/app/views/project/editor/pdf.pug @@ -1,5 +1,5 @@ div.full-size.pdf(ng-controller="PdfController") - .toolbar.toolbar-tall + .toolbar.toolbar-pdf .btn-group#recompile( dropdown, tooltip-html="'"+translate('recompile_pdf')+" ({{modifierKey}} + Enter)'" diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index 8d69d8f76b..a79775a057 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -1,5 +1,9 @@ +.toolbar.toolbar-filetree { + .toolbar-small-mixin; + .toolbar-alt-mixin; +} -aside#file-tree { +#file-tree { .file-tree-inner { position: absolute; top: 32px; diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index 0c98050242..0351a64e03 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -1,3 +1,12 @@ +.toolbar.toolbar-pdf when (@is-overleaf = true) { + .toolbar-small-mixin; + .toolbar-alt-mixin; +} + +.toolbar.toolbar-pdf when (@is-overleaf = false) { + .toolbar-tall-mixin; +} + .pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled { .full-size; top: 58px; diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index 6eaede0d37..bca14e15da 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -106,43 +106,55 @@ } &.toolbar-small { - height: 32px; - > a, .toolbar-right > a { - padding: 2px 4px 1px 4px; - margin: 0; - margin-top: 2px; - } - > a { - margin-left: 2px; - } - .toolbar-right > a { - margin-left: 0; - margin-right: 2px; - } + .toolbar-small-mixin; } &.toolbar-tall { - height: 58px; - padding-top: 10px; - > a, .toolbar-right > a { - padding: 4px 10px 5px; - } - > a.btn, .toolbar-right > a.btn { - margin: 0 (@line-height-computed / 2); - } - .btn-group { - margin: 0 (@line-height-computed / 2); - > .btn-group { - margin: 0; - } - } + .toolbar-small-mixin; } &.toolbar-alt { - background-color: @toolbar-alt-bg-color; + .toolbar-alt-mixin; } } + +.toolbar-small-mixin() { + height: 32px; + > a, .toolbar-right > a { + padding: 2px 4px 1px 4px; + margin: 0; + margin-top: 2px; + } + > a { + margin-left: 2px; + } + .toolbar-right > a { + margin-left: 0; + margin-right: 2px; + } +} + +.toolbar-tall-mixin() { + height: 58px; + padding-top: 10px; + > a, .toolbar-right > a { + padding: 4px 10px 5px; + } + > a.btn, .toolbar-right > a.btn { + margin: 0 (@line-height-computed / 2); + } + .btn-group { + margin: 0 (@line-height-computed / 2); + > .btn-group { + margin: 0; + } + } +} +.toolbar-alt-mixin() { + background-color: @toolbar-alt-bg-color; +} + .toolbar-label { display: none; margin: 0 4px; From 2464bec280ca1a7a307b6710261a0228c50f28f0 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 23 Nov 2017 16:42:38 +0000 Subject: [PATCH 10/19] Style the recompile button; use flexbox for the toolbar. --- services/web/app/views/project/editor/pdf.pug | 6 +-- .../stylesheets/app/editor/file-tree.less | 9 +++-- .../public/stylesheets/app/editor/pdf.less | 24 ++++++++++-- .../stylesheets/app/editor/toolbar.less | 37 +++++-------------- .../stylesheets/core/_common-variables.less | 1 + .../public/stylesheets/core/ol-variables.less | 2 +- 6 files changed, 40 insertions(+), 39 deletions(-) diff --git a/services/web/app/views/project/editor/pdf.pug b/services/web/app/views/project/editor/pdf.pug index 057cacb222..5bb2d5173a 100644 --- a/services/web/app/views/project/editor/pdf.pug +++ b/services/web/app/views/project/editor/pdf.pug @@ -1,6 +1,6 @@ div.full-size.pdf(ng-controller="PdfController") .toolbar.toolbar-pdf - .btn-group#recompile( + .btn-group.btn-recompile-group#recompile( dropdown, tooltip-html="'"+translate('recompile_pdf')+" ({{modifierKey}} + Enter)'" tooltip-class="keyboard-tooltip" @@ -8,7 +8,7 @@ div.full-size.pdf(ng-controller="PdfController") tooltip-append-to-body="true" tooltip-placement="bottom" ) - a.btn.btn-info( + a.btn.btn-recompile( href, ng-disabled="pdf.compiling", ng-click="recompile()" @@ -19,7 +19,7 @@ div.full-size.pdf(ng-controller="PdfController") |    span(ng-show="!pdf.compiling") #{translate("recompile")} span(ng-show="pdf.compiling") #{translate("compiling")}... - a.btn.btn-info.dropdown-toggle( + a.btn.btn-recompile.dropdown-toggle( href, ng-disabled="pdf.compiling", dropdown-toggle diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index a79775a057..b27a492406 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -1,9 +1,10 @@ -.toolbar.toolbar-filetree { - .toolbar-small-mixin; - .toolbar-alt-mixin; -} #file-tree { + .toolbar.toolbar-filetree { + .toolbar-small-mixin; + .toolbar-alt-mixin; + } + .file-tree-inner { position: absolute; top: 32px; diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index 0351a64e03..edf0846bee 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -1,9 +1,9 @@ -.toolbar.toolbar-pdf when (@is-overleaf = true) { +.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) { .toolbar-small-mixin; .toolbar-alt-mixin; } -.toolbar.toolbar-pdf when (@is-overleaf = false) { +.pdf .toolbar.toolbar-pdf when (@is-overleaf = false) { .toolbar-tall-mixin; } @@ -22,6 +22,25 @@ } } +.btn-recompile-group when (@is-overleaf = true) { + height: 100%; +} + +.btn-recompile when (@is-overleaf = true) { + height: 100%; + .btn-primary; + padding-top: 3px; + padding-bottom: 3px; + &:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +} + +.btn-recompile when (@is-overleaf = false) { + .btn-info; +} + .pdf-viewer { iframe { width: 100%; @@ -91,7 +110,6 @@ .pdf .toolbar { .toolbar-right { - margin-right: @line-height-computed / 2; a { &:hover { i { diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index bca14e15da..8883b3bb2c 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -1,6 +1,8 @@ .toolbar { + display: flex; + align-items: center; height: 40px; - border-bottom: 1px solid @toolbar-border-color; + border-bottom: @toolbar-border-bottom; > a, .toolbar-right > a { position: relative; @@ -23,8 +25,8 @@ .toolbar-right > a:not(.btn) { display: inline-block; color: @toolbar-icon-btn-color; - padding: 4px 10px 5px; - margin: 1px 2px; + padding: 0 5px; + // margin: 1px 2px; border-radius: @border-radius-small; &:hover { text-shadow: @toolbar-icon-btn-hover-shadow; @@ -72,12 +74,15 @@ } .toolbar-left { + display: flex; float: left; text-align: center; } .toolbar-right { - float: right; + display: flex; + flex-grow: 1; + justify-content: flex-end; .btn-full-height { border-right: 0; border-left: 1px solid @toolbar-border-color; @@ -121,35 +126,11 @@ .toolbar-small-mixin() { height: 32px; - > a, .toolbar-right > a { - padding: 2px 4px 1px 4px; - margin: 0; - margin-top: 2px; - } - > a { - margin-left: 2px; - } - .toolbar-right > a { - margin-left: 0; - margin-right: 2px; - } } .toolbar-tall-mixin() { height: 58px; padding-top: 10px; - > a, .toolbar-right > a { - padding: 4px 10px 5px; - } - > a.btn, .toolbar-right > a.btn { - margin: 0 (@line-height-computed / 2); - } - .btn-group { - margin: 0 (@line-height-computed / 2); - > .btn-group { - margin: 0; - } - } } .toolbar-alt-mixin() { background-color: @toolbar-alt-bg-color; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 8739ab48be..47030d08ff 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -902,6 +902,7 @@ @toolbar-icon-btn-color : @gray-light; @toolbar-icon-btn-hover-color : @gray-dark; @toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25); +@toolbar-border-bottom : 1px solid @toolbar-border-color; // Editor file-tree @file-tree-bg : transparent; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 325fbd28d5..d6d925a8ca 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -171,7 +171,7 @@ @toolbar-icon-btn-color : #FFF; @toolbar-icon-btn-hover-color : #FFF; @toolbar-icon-btn-hover-shadow : none; - +@toolbar-border-bottom : 0; // Editor file-tree @file-tree-bg : @ol-blue-gray-4; @file-tree-item-color : #FFF; From f4f2fa4e19b3f35ab738ee1030f17028a1438e9c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 24 Nov 2017 15:33:48 +0000 Subject: [PATCH 11/19] Use Overleaf logo as the main menu icon. --- .../web/app/views/project/editor/header.pug | 2 +- .../public/img/ol-brand/overleaf-o-white.svg | 18 ++++++++++++++++++ .../web/public/stylesheets/app/editor.less | 10 ++++++++++ .../public/stylesheets/core/ol-variables.less | 2 +- 4 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 services/web/public/img/ol-brand/overleaf-o-white.svg diff --git a/services/web/app/views/project/editor/header.pug b/services/web/app/views/project/editor/header.pug index 8bd37f707c..4eaae86373 100644 --- a/services/web/app/views/project/editor/header.pug +++ b/services/web/app/views/project/editor/header.pug @@ -7,7 +7,7 @@ header.toolbar.toolbar-header.toolbar-with-labels( href, ng-click="ui.leftMenuShown = true;", ) - i.fa.fa-fw.fa-bars + i.fa.fa-fw.fa-bars.editor-menu-icon p.toolbar-label #{translate("menu")} a( href="/project" diff --git a/services/web/public/img/ol-brand/overleaf-o-white.svg b/services/web/public/img/ol-brand/overleaf-o-white.svg new file mode 100644 index 0000000000..be896abcc3 --- /dev/null +++ b/services/web/public/img/ol-brand/overleaf-o-white.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 017ea2ecc8..46b85fde26 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -26,6 +26,16 @@ } } +.editor-menu-icon when (@is-overleaf = true) { + &.fa::before { + // Disable the font-awesome icon when in Overleaf by replacing it with a + // non-breakable space instead (otherwise the browser would render a + // zero-width element). + content: "\00a0"; + } + background: url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat; +} + .full-size { position: absolute; top: 0; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index d6d925a8ca..4911a9d2c4 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -171,7 +171,7 @@ @toolbar-icon-btn-color : #FFF; @toolbar-icon-btn-hover-color : #FFF; @toolbar-icon-btn-hover-shadow : none; -@toolbar-border-bottom : 0; +@toolbar-border-bottom : 1px solid @toolbar-border-color; // Editor file-tree @file-tree-bg : @ol-blue-gray-4; @file-tree-item-color : #FFF; From 39602d78ede43612e196be1cac6dedbe635074ab Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 24 Nov 2017 15:36:23 +0000 Subject: [PATCH 12/19] Make sure all toolbar icons and buttons are vertically centered. --- services/web/public/stylesheets/app/editor/toolbar.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index 8883b3bb2c..4ea41c0b95 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -77,10 +77,12 @@ display: flex; float: left; text-align: center; + align-items: center; } .toolbar-right { display: flex; + align-items: center; flex-grow: 1; justify-content: flex-end; .btn-full-height { From 926fd69bb536d85360721943d675bd2cd8a47c57 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 24 Nov 2017 15:53:49 +0000 Subject: [PATCH 13/19] Use resizer icons in Overleaf, to switch the PDF layout. --- services/web/app/views/project/editor/pdf.pug | 2 ++ .../public/stylesheets/app/editor/pdf.less | 28 +++++++++++++++++-- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/services/web/app/views/project/editor/pdf.pug b/services/web/app/views/project/editor/pdf.pug index 5bb2d5173a..a3b3a2e2f9 100644 --- a/services/web/app/views/project/editor/pdf.pug +++ b/services/web/app/views/project/editor/pdf.pug @@ -102,6 +102,7 @@ div.full-size.pdf(ng-controller="PdfController") tooltip-placement="bottom" tooltip-append-to-body="true" ) + i.fa.fa-expand i.full-screen a( href, @@ -111,6 +112,7 @@ div.full-size.pdf(ng-controller="PdfController") tooltip-placement="bottom" tooltip-append-to-body="true" ) + i.fa.fa-compress i.split-screen i.split-screen // end of toolbar diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index edf0846bee..58d8a9427b 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -41,6 +41,17 @@ .btn-info; } +.btn-split-screen when (@is-overleaf = false) { + .fa { + display: none; + } +} +.btn-split-screen when (@is-overleaf = true) { + .fa { + display: none; + } +} + .pdf-viewer { iframe { width: 100%; @@ -112,28 +123,41 @@ .toolbar-right { a { &:hover { - i { + i when (@is-overleaf = false) { box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); border-color: @gray-dark; } } - i { + i when (@is-overleaf = false) { display: inline-block; width: 16px; height: 16px; border: 1px solid @gray-light; margin-top: 5px; } + i.full-screen { border-top-width: 3px; border-radius: 2px; } + + i.full-screen when (@is-overleaf = true) { + display: none; + } i.split-screen { width: 7px; border-top-width: 3px; border-radius: 2px; margin-left: 2px; } + + i.split-screen when (@is-overleaf = true) { + display: none; + } + + i.fa when (@is-overleaf = false) { + display: none; + } } } } From 860399d9de5b9dc4937f698de38a445d42631cc4 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 24 Nov 2017 16:03:30 +0000 Subject: [PATCH 14/19] Adjust toolbar paddings; adjust Overleaf menu icon width. --- services/web/public/stylesheets/app/editor.less | 16 ++++++++++------ .../public/stylesheets/app/editor/file-tree.less | 1 + .../web/public/stylesheets/app/editor/pdf.less | 4 +++- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 46b85fde26..e37d829710 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -27,13 +27,17 @@ } .editor-menu-icon when (@is-overleaf = true) { - &.fa::before { - // Disable the font-awesome icon when in Overleaf by replacing it with a - // non-breakable space instead (otherwise the browser would render a - // zero-width element). - content: "\00a0"; + &.fa { + width: 1em; + background: url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat; + + &::before { + // Disable the font-awesome icon when in Overleaf by replacing it with a + // non-breakable space instead (otherwise the browser would render a + // zero-width element). + content: "\00a0"; + } } - background: url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat; } .full-size { diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index b27a492406..328d484d06 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -3,6 +3,7 @@ .toolbar.toolbar-filetree { .toolbar-small-mixin; .toolbar-alt-mixin; + padding: 0 5px; } .file-tree-inner { diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index 58d8a9427b..843617387b 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -1,6 +1,8 @@ .pdf .toolbar.toolbar-pdf when (@is-overleaf = true) { .toolbar-small-mixin; .toolbar-alt-mixin; + border-bottom: 0; + padding-right: 5px; } .pdf .toolbar.toolbar-pdf when (@is-overleaf = false) { @@ -23,7 +25,7 @@ } .btn-recompile-group when (@is-overleaf = true) { - height: 100%; + margin-right: 5px; } .btn-recompile when (@is-overleaf = true) { From 1177f3412584d7fd003e9703ec99ff68d6e40c45 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 24 Nov 2017 16:43:02 +0000 Subject: [PATCH 15/19] Adjustments to keep the current SL look and feel. --- services/web/public/stylesheets/app/editor/pdf.less | 7 +++++++ services/web/public/stylesheets/app/editor/toolbar.less | 1 - 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index 843617387b..a873cd5e8f 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -7,6 +7,7 @@ .pdf .toolbar.toolbar-pdf when (@is-overleaf = false) { .toolbar-tall-mixin; + padding: 0 (@line-height-computed / 2); } .pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled { @@ -25,9 +26,15 @@ } .btn-recompile-group when (@is-overleaf = true) { + align-self: stretch; margin-right: 5px; } +.btn-recompile-group when (@is-overleaf = false) { + margin-right: (@line-height-computed / 2); +} + + .btn-recompile when (@is-overleaf = true) { height: 100%; .btn-primary; diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index 4ea41c0b95..ca9464b30a 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -26,7 +26,6 @@ display: inline-block; color: @toolbar-icon-btn-color; padding: 0 5px; - // margin: 1px 2px; border-radius: @border-radius-small; &:hover { text-shadow: @toolbar-icon-btn-hover-shadow; From e94cef12b73e0f0761a938c940a41879a2de3551 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 27 Nov 2017 17:11:32 +0000 Subject: [PATCH 16/19] Use ::before to fill empty space in indented filetree items. --- .../stylesheets/app/editor/file-tree.less | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index 328d484d06..5f63e7c1a4 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -1,3 +1,13 @@ +.fake-full-width-bg(@bg-color) { + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + right: 100%; + background-color: @bg-color; + } +} #file-tree { .toolbar.toolbar-filetree { @@ -66,9 +76,9 @@ &:hover when (@is-overleaf = true) { // 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) - // 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. - box-shadow: -200px 0 0 @file-tree-item-hover-bg; + // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill + // the empty space. + .fake-full-width-bg(@file-tree-item-hover-bg); } input { line-height: 1.6; @@ -79,7 +89,7 @@ &.droppable-hover when (@is-overleaf = true) { background-color: @file-tree-droppable-bg-color; - box-shadow: -200px 0 0 @file-tree-droppable-bg-color; + .fake-full-width-bg(@file-tree-droppable-bg-color); } } @@ -118,10 +128,10 @@ color: #FFF; font-weight: bold; background-color: @file-tree-multiselect-bg; - box-shadow: -200px 0 0 @file-tree-multiselect-bg; + .fake-full-width-bg(@file-tree-multiselect-bg); &:hover { background-color: @file-tree-multiselect-hover-bg; - box-shadow: -200px 0 0 @file-tree-multiselect-hover-bg; + .fake-full-width-bg(@file-tree-multiselect-hover-bg); } } } @@ -180,11 +190,7 @@ 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 - // 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 - // hack to paint the unfilled left-hand region. - box-shadow: -200px 0 0 @file-tree-item-selected-bg; + .fake-full-width-bg(@file-tree-item-selected-bg); .entity-menu-toggle { display: inline; @@ -199,7 +205,7 @@ } ul.droppable-hover.file-tree-list when (@is-overleaf = true) { background-color: @file-tree-droppable-bg-color; - box-shadow: -200px 0 0 @file-tree-droppable-bg-color; + .fake-full-width-bg(@file-tree-droppable-bg-color); } } From b66e28df19d6122cf59389e4bf4508cb3c9115d2 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 27 Nov 2017 17:12:14 +0000 Subject: [PATCH 17/19] Use a non-breakable space to give height. --- services/web/public/stylesheets/app/editor/file-tree.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index 5f63e7c1a4..b15c6f17a3 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -1,9 +1,8 @@ .fake-full-width-bg(@bg-color) { &::before { - content: ''; + content: '\00a0'; position: absolute; width: 100%; - height: 100%; right: 100%; background-color: @bg-color; } From 0091d639bf903fae8b2f0bcda096bca59e409d9c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 28 Nov 2017 10:49:04 +0000 Subject: [PATCH 18/19] Use white review icon in OL. --- .../web/public/stylesheets/app/editor/review-panel.less | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 15ed39f6a7..5e846be008 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -902,6 +902,13 @@ } } +.review-icon when (@is-overleaf) { + background-position-y: -60px; + .toolbar .btn-full-height:hover & { + background-position-y: -60px; + } +} + .resolved-comments-toggle { font-size: 14px; color: lighten(@rp-type-blue, 25%); From 2c0fcb51e0499ce3b1af80952a761013124f76db Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 28 Nov 2017 11:27:45 +0000 Subject: [PATCH 19/19] Unneeded LESS guard. --- services/web/public/stylesheets/app/editor/file-tree.less | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less index b15c6f17a3..1ccbc6859c 100644 --- a/services/web/public/stylesheets/app/editor/file-tree.less +++ b/services/web/public/stylesheets/app/editor/file-tree.less @@ -47,11 +47,7 @@ overflow-x: hidden; height: 100%; - ul when (@is-overleaf = false) { - margin-left: (@line-height-computed / 2); - } - - ul when (@is-overleaf = true) { + ul { margin-left: (@line-height-computed / 2); }