From 78eb56a262e51a50f55f8486e810fabffb723566 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 16 Mar 2018 17:00:33 +0000 Subject: [PATCH 01/13] Increase resizer width; decrease hit area. --- services/web/public/stylesheets/app/editor.less | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index fa39552c27..7665cbc4c5 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -14,7 +14,7 @@ @import "./editor/review-panel.less"; @ui-layout-toggler-def-height: 50px; -@ui-resizer-extra-hit-area: 8px; +@ui-resizer-extra-hit-area: 6px; @keyframes blink { 0% { @@ -312,8 +312,8 @@ transparent, transparent (@ui-resizer-extra-hit-area - 1px), @editor-resizer-bg-color (@ui-resizer-extra-hit-area - 1px), - @editor-resizer-bg-color (@ui-resizer-extra-hit-area + 1px), - transparent (@ui-resizer-extra-hit-area + 1px), + @editor-resizer-bg-color (@ui-resizer-extra-hit-area + 2px), + transparent (@ui-resizer-extra-hit-area + 2px), transparent); .ui-layout-toggler { @@ -322,8 +322,8 @@ transparent, transparent (@ui-resizer-extra-hit-area - 1px), @editor-toggler-bg-color (@ui-resizer-extra-hit-area - 1px), - @editor-toggler-bg-color (@ui-resizer-extra-hit-area + 1px), - transparent (@ui-resizer-extra-hit-area + 1px), + @editor-toggler-bg-color (@ui-resizer-extra-hit-area + 2px), + transparent (@ui-resizer-extra-hit-area + 2px), transparent); &:hover { @@ -331,8 +331,8 @@ transparent, transparent (@ui-resizer-extra-hit-area - 2px), @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area - 2px), - @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 2px), - transparent (@ui-resizer-extra-hit-area + 2px), + @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 3px), + transparent (@ui-resizer-extra-hit-area + 3px), transparent); } } From fc0be22c6d170753fdb98cca9f3d367eb5634dc0 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 20 Mar 2018 15:08:34 +0000 Subject: [PATCH 02/13] Extend layout directive to support custom togglers. --- .../coffee/ide/directives/layout.coffee | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee index fcc75b29a1..d35ab50162 100644 --- a/services/web/public/coffee/ide/directives/layout.coffee +++ b/services/web/public/coffee/ide/directives/layout.coffee @@ -2,12 +2,17 @@ define [ "base" "libs/jquery-layout" ], (App) -> - App.directive "layout", ["$parse", "ide", ($parse, ide) -> + App.directive "layout", ["$parse", "$compile", "ide", ($parse, $compile, ide) -> return { compile: () -> pre: (scope, element, attrs) -> name = attrs.layout + customTogglerPane = scope.$eval(attrs.customTogglerPane) + customTogglerTooltipOpen = scope.$eval(attrs.customTogglerTooltipOpen) + customTogglerTooltipClose = scope.$eval(attrs.customTogglerTooltipClose) + hasCustomToggler = customTogglerPane? and customTogglerTooltipOpen? and customTogglerTooltipClose? + if attrs.spacingOpen? spacingOpen = parseInt(attrs.spacingOpen, 10) else @@ -62,6 +67,21 @@ define [ right: state.east.size }) + repositionCustomToggler = () -> + if !customTogglerEl? + return + state = element.layout().readState() + if customTogglerPane == "east" + if state.east? + customTogglerEl.css({ + right: if state.east.initClosed then 0 else state.east.size + }) + else if customTogglerPane == "west" + if state.west? + customTogglerEl.css({ + left: if state.west.initClosed then 0 else state.west.size + }) + resetOpenStates = () -> state = element.layout().readState() if attrs.openEast? and state.east? @@ -73,6 +93,8 @@ define [ state = element.layout().readState() scope.$broadcast "layout:#{name}:resize", state repositionControls() + if hasCustomToggler + repositionCustomToggler() resetOpenStates() oldWidth = element.width() @@ -94,6 +116,24 @@ define [ if attrs.resizeOn? scope.$on attrs.resizeOn, () -> onExternalResize() + if hasCustomToggler + state = element.layout().readState() + customTogglerScope = scope.$new() + if state.east?.initClosed + customTogglerScope.customTogglerTooltip = customTogglerTooltipOpen + else + customTogglerScope.customTogglerTooltip = customTogglerTooltipClose + customTogglerEl = $compile(" + + ")(customTogglerScope) + element.append(customTogglerEl) + # if hasCustomToggler + # element.find("> .custom-toggler").on "click", () -> + # element.layout().toggle("east") + # repositionCustomToggler() # Save state when exiting $(window).unload () -> ide.localStorage("layout.#{name}", element.layout().readState()) From a3034fc79f2ece0a6da52a2d9d5029be7fb72236 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 20 Mar 2018 15:24:52 +0000 Subject: [PATCH 03/13] Enable custom togglers. --- services/web/app/views/project/editor.pug | 3 +++ services/web/app/views/project/editor/editor.pug | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index aac2cf1c0b..ccedf23cc6 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -62,6 +62,9 @@ block content ng-hide="state.loading", resize-on="layout:chat:resize", minimum-restore-size-west="130" + custom-toggler-pane="'west'" + custom-toggler-tooltip-open="'Click to open the file tree'" + custom-toggler-tooltip-close="'Click to close the file tree'" ) .ui-layout-west include ./editor/file-tree diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 15da9cdedf..48e081fec1 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -8,6 +8,9 @@ div.full-size( initial-size-east="'50%'" minimum-restore-size-east="300" allow-overflow-on="'center'" + custom-toggler-pane="'east'" + custom-toggler-tooltip-open="'Click to open the PDF'" + custom-toggler-tooltip-close="'Click to close the PDF'" ) .ui-layout-center( ng-controller="ReviewPanelController", @@ -100,7 +103,6 @@ div.full-size( ng-click="syncToCode()" ) i.synctex-control-icon - div.full-size( ng-if="ui.pdfLayout == 'flat'" ng-show="ui.view == 'pdf'" From fb7d9020380d52e5d8422e7f9aba6017a09987fd Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 20 Mar 2018 16:02:01 +0000 Subject: [PATCH 04/13] Make custom togglers react to opening and closing panes. Dynamically add CSS classes. --- .../coffee/ide/directives/layout.coffee | 63 +++++--- .../web/public/stylesheets/app/editor.less | 144 ++++++++++-------- 2 files changed, 120 insertions(+), 87 deletions(-) diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee index d35ab50162..402143e213 100644 --- a/services/web/public/coffee/ide/directives/layout.coffee +++ b/services/web/public/coffee/ide/directives/layout.coffee @@ -28,6 +28,10 @@ define [ spacing_closed: spacingClosed slidable: false enableCursorHotkey: false + onopen: (pane) => + onPaneOpen(pane) + onclose: (pane) => + onPaneClose(pane) onresize: () => onInternalResize() maskIframesOnResize: scope.$eval( @@ -71,17 +75,11 @@ define [ if !customTogglerEl? return state = element.layout().readState() - if customTogglerPane == "east" - if state.east? - customTogglerEl.css({ - right: if state.east.initClosed then 0 else state.east.size - }) - else if customTogglerPane == "west" - if state.west? - customTogglerEl.css({ - left: if state.west.initClosed then 0 else state.west.size - }) - + positionAnchor = if customTogglerPane == "east" then "right" else "left" + paneState = state[customTogglerPane] + if paneState? + customTogglerEl.css(positionAnchor, if paneState.initClosed then 0 else paneState.size) + resetOpenStates = () -> state = element.layout().readState() if attrs.openEast? and state.east? @@ -119,21 +117,42 @@ define [ if hasCustomToggler state = element.layout().readState() customTogglerScope = scope.$new() - if state.east?.initClosed - customTogglerScope.customTogglerTooltip = customTogglerTooltipOpen - else - customTogglerScope.customTogglerTooltip = customTogglerTooltipClose + + customTogglerScope.isOpen = true + + if state[customTogglerPane]?.initClosed == true + customTogglerScope.isOpen = false + + console.log customTogglerScope.isOpen + customTogglerScope.tooltipMsgOpen = customTogglerTooltipOpen + customTogglerScope.tooltipMsgClose = customTogglerTooltipClose + + customTogglerScope.tooltipPlacement = if customTogglerPane == "east" then "left" else "right" + customTogglerScope.handleClick = () -> + element.layout().toggle(customTogglerPane) + repositionCustomToggler() customTogglerEl = $compile(" + class=\"custom-toggler #{ 'custom-toggler-' + customTogglerPane }\" + ng-class=\"isOpen ? 'custom-toggler-open' : 'custom-toggler-closed'\" + tooltip=\"{{ isOpen ? tooltipMsgClose : tooltipMsgOpen }}\" + tooltip-placement=\"{{ tooltipPlacement }}\" + ng-click=\"handleClick()\"> ")(customTogglerScope) element.append(customTogglerEl) - # if hasCustomToggler - # element.find("> .custom-toggler").on "click", () -> - # element.layout().toggle("east") - # repositionCustomToggler() + + onPaneOpen = (pane) -> + if !hasCustomToggler and pane != customTogglerPane + return + customTogglerEl.scope().$applyAsync () -> + customTogglerEl.scope().isOpen = true + + onPaneClose = (pane) -> + if !hasCustomToggler and pane != customTogglerPane + return + customTogglerEl.scope().$applyAsync () -> + customTogglerEl.scope().isOpen = false + # Save state when exiting $(window).unload () -> ide.localStorage("layout.#{name}", element.layout().readState()) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 7665cbc4c5..9cfcb04428 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -316,26 +316,26 @@ transparent (@ui-resizer-extra-hit-area + 2px), transparent); - .ui-layout-toggler { - padding: 0 @ui-resizer-extra-hit-area !important; - background-image: linear-gradient(90deg, - transparent, - transparent (@ui-resizer-extra-hit-area - 1px), - @editor-toggler-bg-color (@ui-resizer-extra-hit-area - 1px), - @editor-toggler-bg-color (@ui-resizer-extra-hit-area + 2px), - transparent (@ui-resizer-extra-hit-area + 2px), - transparent); + // .ui-layout-toggler { + // padding: 0 @ui-resizer-extra-hit-area !important; + // background-image: linear-gradient(90deg, + // transparent, + // transparent (@ui-resizer-extra-hit-area - 1px), + // @editor-toggler-bg-color (@ui-resizer-extra-hit-area - 1px), + // @editor-toggler-bg-color (@ui-resizer-extra-hit-area + 2px), + // transparent (@ui-resizer-extra-hit-area + 2px), + // transparent); - &:hover { - background-image: linear-gradient(90deg, - transparent, - transparent (@ui-resizer-extra-hit-area - 2px), - @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area - 2px), - @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 3px), - transparent (@ui-resizer-extra-hit-area + 3px), - transparent); - } - } + // &:hover { + // background-image: linear-gradient(90deg, + // transparent, + // transparent (@ui-resizer-extra-hit-area - 2px), + // @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area - 2px), + // @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 3px), + // transparent (@ui-resizer-extra-hit-area + 3px), + // transparent); + // } + // } } .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed { @@ -353,54 +353,69 @@ } } -.ui-layout-toggler.ui-layout-toggler-closed when (@is-overleaf = true) { - background-color: @editor-resizer-bg-color; - background-image: none; - line-height: @ui-layout-toggler-def-height; +.ui-layout-toggler when (@is-overleaf = true) { + display: none !important; +} + +.custom-toggler { + position: absolute; + width: 8px; + height: 50px; + margin-top: -25px; + top: 50%; + background: red; + z-index: 6; + margin-right: -3px; +} + +// .ui-layout-toggler.ui-layout-toggler-closed when (@is-overleaf = true) { +// background-color: @editor-resizer-bg-color; +// background-image: none; +// line-height: @ui-layout-toggler-def-height; - &::before { - content: "\22EE"; // Vertical ellipsis - display: block; - color: #FFF; - font-weight: 700; - font-size: @font-size-h2; - width: @ui-resizer-extra-hit-area / 2; - } - &:hover { - background-color: @editor-toggler-hover-bg-color; - background-image: none; - } - .ui-layout-resizer-west > & { - border-radius: 0 @border-radius-base @border-radius-base 0; - &::before { - margin-left: -2px; - } - } - .ui-layout-resizer-east > & { - border-radius: @border-radius-base 0 0 @border-radius-base; - &::before { - margin-left: (-1 - @ui-resizer-extra-hit-area); - } - } -} +// &::before { +// content: "\22EE"; // Vertical ellipsis +// display: block; +// color: #FFF; +// font-weight: 700; +// font-size: @font-size-h2; +// width: @ui-resizer-extra-hit-area / 2; +// } +// &:hover { +// background-color: @editor-toggler-hover-bg-color; +// background-image: none; +// } +// .ui-layout-resizer-west > & { +// border-radius: 0 @border-radius-base @border-radius-base 0; +// &::before { +// margin-left: -2px; +// } +// } +// .ui-layout-resizer-east > & { +// border-radius: @border-radius-base 0 0 @border-radius-base; +// &::before { +// margin-left: (-1 - @ui-resizer-extra-hit-area); +// } +// } +// } -.ui-layout-toggler-east when (@is-overleaf = true) { - &.ui-layout-toggler-open { - cursor: e-resize !important - } - &.ui-layout-toggler-closed { - cursor: w-resize !important - } -} +// .ui-layout-toggler-east when (@is-overleaf = true) { +// &.ui-layout-toggler-open { +// cursor: e-resize !important +// } +// &.ui-layout-toggler-closed { +// cursor: w-resize !important +// } +// } -.ui-layout-toggler-west when (@is-overleaf = true) { - &.ui-layout-toggler-open { - cursor: w-resize !important - } - &.ui-layout-toggler-closed { - cursor: e-resize !important - } -} +// .ui-layout-toggler-west when (@is-overleaf = true) { +// &.ui-layout-toggler-open { +// cursor: w-resize !important +// } +// &.ui-layout-toggler-closed { +// cursor: e-resize !important +// } +// } .ui-layout-resizer-dragging { background-color: @editor-resizer-bg-color-dragging; @@ -624,4 +639,3 @@ height: auto; border-bottom: 1px solid @modal-header-border-color; } - From 3f073c2341c7519015c560f722ac84d59012202f Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 20 Mar 2018 16:06:44 +0000 Subject: [PATCH 05/13] Rename attributes and vars for clarity --- services/web/app/views/project/editor.pug | 4 ++-- services/web/app/views/project/editor/editor.pug | 4 ++-- .../web/public/coffee/ide/directives/layout.coffee | 12 ++++++------ 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index ccedf23cc6..c2dabadb3e 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -63,8 +63,8 @@ block content resize-on="layout:chat:resize", minimum-restore-size-west="130" custom-toggler-pane="'west'" - custom-toggler-tooltip-open="'Click to open the file tree'" - custom-toggler-tooltip-close="'Click to close the file tree'" + custom-toggler-msg-when-open="'Click to close the file tree'" + custom-toggler-msg-when-closed="'Click to open the file tree'" ) .ui-layout-west include ./editor/file-tree diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 48e081fec1..a2368b98e1 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -9,8 +9,8 @@ div.full-size( minimum-restore-size-east="300" allow-overflow-on="'center'" custom-toggler-pane="'east'" - custom-toggler-tooltip-open="'Click to open the PDF'" - custom-toggler-tooltip-close="'Click to close the PDF'" + custom-toggler-msg-when-open="'Click to close the PDF'" + custom-toggler-msg-when-closed="'Click to open the PDF'" ) .ui-layout-center( ng-controller="ReviewPanelController", diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee index 402143e213..9e9fae5e99 100644 --- a/services/web/public/coffee/ide/directives/layout.coffee +++ b/services/web/public/coffee/ide/directives/layout.coffee @@ -9,9 +9,9 @@ define [ name = attrs.layout customTogglerPane = scope.$eval(attrs.customTogglerPane) - customTogglerTooltipOpen = scope.$eval(attrs.customTogglerTooltipOpen) - customTogglerTooltipClose = scope.$eval(attrs.customTogglerTooltipClose) - hasCustomToggler = customTogglerPane? and customTogglerTooltipOpen? and customTogglerTooltipClose? + customTogglerMsgWhenOpen = scope.$eval(attrs.customTogglerMsgWhenOpen) + customTogglerMsgWhenClosed = scope.$eval(attrs.customTogglerMsgWhenClosed) + hasCustomToggler = customTogglerPane? and customTogglerMsgWhenOpen? and customTogglerMsgWhenClosed? if attrs.spacingOpen? spacingOpen = parseInt(attrs.spacingOpen, 10) @@ -124,8 +124,8 @@ define [ customTogglerScope.isOpen = false console.log customTogglerScope.isOpen - customTogglerScope.tooltipMsgOpen = customTogglerTooltipOpen - customTogglerScope.tooltipMsgClose = customTogglerTooltipClose + customTogglerScope.tooltipMsgWhenOpen = customTogglerMsgWhenOpen + customTogglerScope.tooltipMsgWhenClosed = customTogglerMsgWhenClosed customTogglerScope.tooltipPlacement = if customTogglerPane == "east" then "left" else "right" customTogglerScope.handleClick = () -> @@ -135,7 +135,7 @@ define [ ")(customTogglerScope) From db68134f81cb2be49c75db803621ad58eb6db9e3 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 22 Mar 2018 11:48:14 +0000 Subject: [PATCH 06/13] Add i18n. --- services/web/app/views/project/editor.pug | 4 ++-- services/web/app/views/project/editor/editor.pug | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index c2dabadb3e..9f72d364cf 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -63,8 +63,8 @@ block content resize-on="layout:chat:resize", minimum-restore-size-west="130" custom-toggler-pane="'west'" - custom-toggler-msg-when-open="'Click to close the file tree'" - custom-toggler-msg-when-closed="'Click to open the file tree'" + custom-toggler-msg-when-open="'" + translate("tooltip_hide_filetree") + "'" + custom-toggler-msg-when-closed="'" + translate("tooltip_show_filetree") + "'" ) .ui-layout-west include ./editor/file-tree diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index a2368b98e1..52620b6a81 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -9,8 +9,8 @@ div.full-size( minimum-restore-size-east="300" allow-overflow-on="'center'" custom-toggler-pane="'east'" - custom-toggler-msg-when-open="'Click to close the PDF'" - custom-toggler-msg-when-closed="'Click to open the PDF'" + custom-toggler-msg-when-open="'" + translate("tooltip_hide_pdf") + "'" + custom-toggler-msg-when-closed="'" + translate("tooltip_show_pdf") + "'" ) .ui-layout-center( ng-controller="ReviewPanelController", From 38f95359e15ce0a209c27a4ab2adb9fb9ce9f44e Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 22 Mar 2018 11:48:34 +0000 Subject: [PATCH 07/13] Style adjustments. --- .../web/public/stylesheets/app/editor.less | 68 ++++++++++++------- 1 file changed, 43 insertions(+), 25 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 9cfcb04428..bc146d66da 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -315,27 +315,6 @@ @editor-resizer-bg-color (@ui-resizer-extra-hit-area + 2px), transparent (@ui-resizer-extra-hit-area + 2px), transparent); - - // .ui-layout-toggler { - // padding: 0 @ui-resizer-extra-hit-area !important; - // background-image: linear-gradient(90deg, - // transparent, - // transparent (@ui-resizer-extra-hit-area - 1px), - // @editor-toggler-bg-color (@ui-resizer-extra-hit-area - 1px), - // @editor-toggler-bg-color (@ui-resizer-extra-hit-area + 2px), - // transparent (@ui-resizer-extra-hit-area + 2px), - // transparent); - - // &:hover { - // background-image: linear-gradient(90deg, - // transparent, - // transparent (@ui-resizer-extra-hit-area - 2px), - // @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area - 2px), - // @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 3px), - // transparent (@ui-resizer-extra-hit-area + 3px), - // transparent); - // } - // } } .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed { @@ -357,16 +336,55 @@ display: none !important; } -.custom-toggler { +.custom-toggler when (@is-overleaf = true) { position: absolute; - width: 8px; + width: 9px; height: 50px; margin-top: -25px; top: 50%; - background: red; z-index: 6; - margin-right: -3px; + background-color: @editor-toggler-bg-color; + border-radius: 4px; + + // Increase hit area + &::before { + content: ''; + display: block; + position: absolute; + top: 0; + right: -3px; + bottom: 0; + left: -3px; + } + + &:hover { + background-color: @editor-toggler-hover-bg-color; + } } + .custom-toggler-east { + margin-right: -4px; + } + .custom-toggler-west { + margin-left: -4px; + } + + .custom-toggler-closed { + width: 12px; + &.custom-toggler-east { + margin-right: -6px; + } + .custom-toggler-west { + margin-left: -6px; + } + &::before { + content: "\22EE"; // Vertical ellipsis + color: #FFF; + font-weight: 700; + font-size: @font-size-h2; + width: @ui-resizer-extra-hit-area / 2; + } + } + // .ui-layout-toggler.ui-layout-toggler-closed when (@is-overleaf = true) { // background-color: @editor-resizer-bg-color; From 906f4899aa54c87befc42291823b7869da4aa399 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 22 Mar 2018 12:10:34 +0000 Subject: [PATCH 08/13] Only use custom togglers in v2. --- services/web/app/coffee/infrastructure/Features.coffee | 2 ++ services/web/app/views/project/editor.pug | 6 +++--- services/web/app/views/project/editor/editor.pug | 6 +++--- services/web/public/coffee/ide/directives/layout.coffee | 8 ++++---- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/services/web/app/coffee/infrastructure/Features.coffee b/services/web/app/coffee/infrastructure/Features.coffee index 6e39ee6370..5dfe73f05f 100644 --- a/services/web/app/coffee/infrastructure/Features.coffee +++ b/services/web/app/coffee/infrastructure/Features.coffee @@ -16,5 +16,7 @@ module.exports = Features = return Settings.accountMerge? and Settings.overleaf? when 'rich-text' return Settings.showRichText + when 'custom-togglers' + return Settings.overleaf? else throw new Error("unknown feature: #{feature}") diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index 9f72d364cf..8a0c7a8222 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -62,9 +62,9 @@ block content ng-hide="state.loading", resize-on="layout:chat:resize", minimum-restore-size-west="130" - custom-toggler-pane="'west'" - custom-toggler-msg-when-open="'" + translate("tooltip_hide_filetree") + "'" - custom-toggler-msg-when-closed="'" + translate("tooltip_show_filetree") + "'" + custom-toggler-pane=hasFeature('custom-togglers') ? "'west'" : "false" + custom-toggler-msg-when-open=hasFeature('custom-togglers') ? "'" + translate("tooltip_hide_filetree") + "'" : "false" + custom-toggler-msg-when-closed=hasFeature('custom-togglers') ? "'" + translate("tooltip_show_filetree") + "'" : "false" ) .ui-layout-west include ./editor/file-tree diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 52620b6a81..761911d2e8 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -8,9 +8,9 @@ div.full-size( initial-size-east="'50%'" minimum-restore-size-east="300" allow-overflow-on="'center'" - custom-toggler-pane="'east'" - custom-toggler-msg-when-open="'" + translate("tooltip_hide_pdf") + "'" - custom-toggler-msg-when-closed="'" + translate("tooltip_show_pdf") + "'" + custom-toggler-pane=hasFeature('custom-togglers') ? "'east'" : "false" + custom-toggler-msg-when-open=hasFeature('custom-togglers') ? "'" + translate("tooltip_hide_pdf") + "'" : "false" + custom-toggler-msg-when-closed=hasFeature('custom-togglers') ? "'" + translate("tooltip_show_pdf") + "'" : "false" ) .ui-layout-center( ng-controller="ReviewPanelController", diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee index 9e9fae5e99..b411849cc9 100644 --- a/services/web/public/coffee/ide/directives/layout.coffee +++ b/services/web/public/coffee/ide/directives/layout.coffee @@ -8,10 +8,10 @@ define [ pre: (scope, element, attrs) -> name = attrs.layout - customTogglerPane = scope.$eval(attrs.customTogglerPane) - customTogglerMsgWhenOpen = scope.$eval(attrs.customTogglerMsgWhenOpen) - customTogglerMsgWhenClosed = scope.$eval(attrs.customTogglerMsgWhenClosed) - hasCustomToggler = customTogglerPane? and customTogglerMsgWhenOpen? and customTogglerMsgWhenClosed? + customTogglerPane = scope.$eval(attrs.customTogglerPane or "false") + customTogglerMsgWhenOpen = scope.$eval(attrs.customTogglerMsgWhenOpen or "false") + customTogglerMsgWhenClosed = scope.$eval(attrs.customTogglerMsgWhenClosed or "false") + hasCustomToggler = customTogglerPane != false and customTogglerMsgWhenOpen != false and customTogglerMsgWhenClosed != false if attrs.spacingOpen? spacingOpen = parseInt(attrs.spacingOpen, 10) From 9ddd4543e19149eed91a48c360280c016a3ad985 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 22 Mar 2018 13:50:48 +0000 Subject: [PATCH 09/13] More style adjustments; remove commented code. --- .../web/public/stylesheets/app/editor.less | 69 +++++-------------- 1 file changed, 16 insertions(+), 53 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index bc146d66da..bf59fd3e8c 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -338,6 +338,8 @@ .custom-toggler when (@is-overleaf = true) { position: absolute; + display: flex; + align-items: center; width: 9px; height: 50px; margin-top: -25px; @@ -346,6 +348,10 @@ background-color: @editor-toggler-bg-color; border-radius: 4px; + &:hover, + &:focus { + text-decoration: none; + } // Increase hit area &::before { content: ''; @@ -372,69 +378,26 @@ width: 12px; &.custom-toggler-east { margin-right: -6px; + &::after { + margin-left: -2px; + } } - .custom-toggler-west { + &.custom-toggler-west { margin-left: -6px; + &::after { + margin-left: 3px; + } } - &::before { + &::after { content: "\22EE"; // Vertical ellipsis color: #FFF; font-weight: 700; font-size: @font-size-h2; - width: @ui-resizer-extra-hit-area / 2; + user-select: none; + pointer-events: none; } } - -// .ui-layout-toggler.ui-layout-toggler-closed when (@is-overleaf = true) { -// background-color: @editor-resizer-bg-color; -// background-image: none; -// line-height: @ui-layout-toggler-def-height; - -// &::before { -// content: "\22EE"; // Vertical ellipsis -// display: block; -// color: #FFF; -// font-weight: 700; -// font-size: @font-size-h2; -// width: @ui-resizer-extra-hit-area / 2; -// } -// &:hover { -// background-color: @editor-toggler-hover-bg-color; -// background-image: none; -// } -// .ui-layout-resizer-west > & { -// border-radius: 0 @border-radius-base @border-radius-base 0; -// &::before { -// margin-left: -2px; -// } -// } -// .ui-layout-resizer-east > & { -// border-radius: @border-radius-base 0 0 @border-radius-base; -// &::before { -// margin-left: (-1 - @ui-resizer-extra-hit-area); -// } -// } -// } - -// .ui-layout-toggler-east when (@is-overleaf = true) { -// &.ui-layout-toggler-open { -// cursor: e-resize !important -// } -// &.ui-layout-toggler-closed { -// cursor: w-resize !important -// } -// } - -// .ui-layout-toggler-west when (@is-overleaf = true) { -// &.ui-layout-toggler-open { -// cursor: w-resize !important -// } -// &.ui-layout-toggler-closed { -// cursor: e-resize !important -// } -// } - .ui-layout-resizer-dragging { background-color: @editor-resizer-bg-color-dragging; } From 2447e85f3f3bf0d3bbba6546b637bbe3e272e444 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 22 Mar 2018 14:08:16 +0000 Subject: [PATCH 10/13] Remove stray console.log(). --- services/web/public/coffee/ide/directives/layout.coffee | 1 - 1 file changed, 1 deletion(-) diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee index b411849cc9..3c8f2900f1 100644 --- a/services/web/public/coffee/ide/directives/layout.coffee +++ b/services/web/public/coffee/ide/directives/layout.coffee @@ -123,7 +123,6 @@ define [ if state[customTogglerPane]?.initClosed == true customTogglerScope.isOpen = false - console.log customTogglerScope.isOpen customTogglerScope.tooltipMsgWhenOpen = customTogglerMsgWhenOpen customTogglerScope.tooltipMsgWhenClosed = customTogglerMsgWhenClosed From 89d9a4365270d4658ad7265b12d8e23af13828aa Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 23 Mar 2018 10:16:03 +0000 Subject: [PATCH 11/13] Make resizer bar larger; add a chevron inside the toggler; make the toggler itself darker. --- .../web/public/stylesheets/app/editor.less | 82 +++++++++++++------ .../public/stylesheets/core/ol-variables.less | 2 +- 2 files changed, 59 insertions(+), 25 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index bf59fd3e8c..569ce2fe7b 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -107,7 +107,7 @@ height: 0; background: @editor-loading-logo-background-url no-repeat bottom / 100%; - &::after { + &::after { content: ''; position: absolute; height: inherit; @@ -116,7 +116,7 @@ left: 0; background: @editor-loading-logo-foreground-url no-repeat bottom / 100%; transition: height .5s; - } + } } .loading-screen-label { margin: 0; @@ -310,11 +310,34 @@ box-sizing: content-box; background-image: linear-gradient(90deg, transparent, - transparent (@ui-resizer-extra-hit-area - 1px), - @editor-resizer-bg-color (@ui-resizer-extra-hit-area - 1px), - @editor-resizer-bg-color (@ui-resizer-extra-hit-area + 2px), - transparent (@ui-resizer-extra-hit-area + 2px), + transparent @ui-resizer-extra-hit-area - 3px, + @editor-resizer-bg-color @ui-resizer-extra-hit-area - 3px, + @editor-resizer-bg-color @ui-resizer-extra-hit-area + 4px, + transparent @ui-resizer-extra-hit-area + 4px, transparent); + + &.ui-layout-resizer-closed { + background-image: linear-gradient(90deg, + @editor-resizer-bg-color, + @editor-resizer-bg-color); + } + + &::before, + &::after { + content: '\2847'; + display: block; + position: absolute; + text-align: center; + left: 1px; + -webkit-font-smoothing: antialiased; + width: 100%; + font-size: 24px; + top: 25%; + color: @ol-blue-gray-2; + } + &::after { + top: 75%; + } } .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed { @@ -340,16 +363,17 @@ position: absolute; display: flex; align-items: center; - width: 9px; + justify-content: center; + width: 7px; height: 50px; margin-top: -25px; top: 50%; z-index: 6; background-color: @editor-toggler-bg-color; - border-radius: 4px; - + &:hover, &:focus { + outline: none; text-decoration: none; } // Increase hit area @@ -363,39 +387,49 @@ left: -3px; } + &::after { + font-family: FontAwesome; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 75%; + font-weight: bold; + color: #FFF; + user-select: none; + pointer-events: none; + } + &:hover { background-color: @editor-toggler-hover-bg-color; } } .custom-toggler-east { - margin-right: -4px; + margin-right: -3px; + &::after { + content: '\f105'; + } + } .custom-toggler-west { - margin-left: -4px; + margin-left: -3px; + &::after { + content: '\f104'; + } + } .custom-toggler-closed { - width: 12px; &.custom-toggler-east { - margin-right: -6px; + margin-right: 0; &::after { - margin-left: -2px; + content: '\f104'; } } &.custom-toggler-west { - margin-left: -6px; + margin-left: 0; &::after { - margin-left: 3px; + content: '\f105'; } } - &::after { - content: "\22EE"; // Vertical ellipsis - color: #FFF; - font-weight: 700; - font-size: @font-size-h2; - user-select: none; - pointer-events: none; - } } .ui-layout-resizer-dragging { diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 6ffceaf176..9699f25f41 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -229,7 +229,7 @@ // Editor resizers @editor-resizer-bg-color : @ol-blue-gray-6; @editor-resizer-bg-color-dragging : transparent; -@editor-toggler-bg-color : @ol-blue-gray-2; +@editor-toggler-bg-color : darken(@ol-blue-gray-2, 15%); @editor-toggler-hover-bg-color : @ol-green; @synctex-controls-z-index : 6; @synctex-controls-padding : 0; From a1545a688e75422ef13249131363581483494d16 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 23 Mar 2018 11:16:41 +0000 Subject: [PATCH 12/13] Make resizers lighter; make chevron smaller; hide ellipsis when panes are collapsed. --- services/web/public/stylesheets/app/editor.less | 7 +++++-- services/web/public/stylesheets/core/ol-variables.less | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 569ce2fe7b..791ecaffa5 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -320,6 +320,9 @@ background-image: linear-gradient(90deg, @editor-resizer-bg-color, @editor-resizer-bg-color); + &::after { + content: none; + } } &::before, @@ -370,7 +373,7 @@ top: 50%; z-index: 6; background-color: @editor-toggler-bg-color; - + &:hover, &:focus { outline: none; @@ -391,7 +394,7 @@ font-family: FontAwesome; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: 75%; + font-size: 65%; font-weight: bold; color: #FFF; user-select: none; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 9699f25f41..48499a3609 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -227,7 +227,7 @@ @file-tree-droppable-bg-color : tint(@ol-green, 5%); // Editor resizers -@editor-resizer-bg-color : @ol-blue-gray-6; +@editor-resizer-bg-color : @ol-blue-gray-5; @editor-resizer-bg-color-dragging : transparent; @editor-toggler-bg-color : darken(@ol-blue-gray-2, 15%); @editor-toggler-hover-bg-color : @ol-green; From 6c8ffcd055c9c143b20b0c58d7fd87122b6e5ce7 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 23 Mar 2018 11:54:17 +0000 Subject: [PATCH 13/13] Remove extra hit area. --- .../web/public/stylesheets/app/editor.less | 59 +++++-------------- .../public/stylesheets/app/editor/pdf.less | 2 +- .../public/stylesheets/core/ol-variables.less | 2 +- 3 files changed, 17 insertions(+), 46 deletions(-) diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 791ecaffa5..d53cd1dba7 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -14,7 +14,7 @@ @import "./editor/review-panel.less"; @ui-layout-toggler-def-height: 50px; -@ui-resizer-extra-hit-area: 6px; +@ui-resizer-size: 7px; @keyframes blink { 0% { @@ -302,24 +302,11 @@ } .ui-layout-resizer when (@is-overleaf = true) { - margin-left: -(@ui-resizer-extra-hit-area) !important; - margin-right: -(@ui-resizer-extra-hit-area - 1px) !important; - padding-left: @ui-resizer-extra-hit-area !important; - padding-right: @ui-resizer-extra-hit-area !important; z-index: 5 !important; - box-sizing: content-box; - background-image: linear-gradient(90deg, - transparent, - transparent @ui-resizer-extra-hit-area - 3px, - @editor-resizer-bg-color @ui-resizer-extra-hit-area - 3px, - @editor-resizer-bg-color @ui-resizer-extra-hit-area + 4px, - transparent @ui-resizer-extra-hit-area + 4px, - transparent); - + width: @ui-resizer-size !important; + background-color: @editor-resizer-bg-color; &.ui-layout-resizer-closed { - background-image: linear-gradient(90deg, - @editor-resizer-bg-color, - @editor-resizer-bg-color); + &::before, &::after { content: none; } @@ -331,7 +318,7 @@ display: block; position: absolute; text-align: center; - left: 1px; + left: -2px; -webkit-font-smoothing: antialiased; width: 100%; font-size: 24px; @@ -367,7 +354,7 @@ display: flex; align-items: center; justify-content: center; - width: 7px; + width: @ui-resizer-size !important;; height: 50px; margin-top: -25px; top: 50%; @@ -405,34 +392,18 @@ background-color: @editor-toggler-hover-bg-color; } } - .custom-toggler-east { - margin-right: -3px; - &::after { - content: '\f105'; - } - + .custom-toggler-east::after { + content: '\f105'; } - .custom-toggler-west { - margin-left: -3px; - &::after { - content: '\f104'; - } - + .custom-toggler-west::after { + content: '\f104'; } - .custom-toggler-closed { - &.custom-toggler-east { - margin-right: 0; - &::after { - content: '\f104'; - } - } - &.custom-toggler-west { - margin-left: 0; - &::after { - content: '\f105'; - } - } + .custom-toggler-closed.custom-toggler-east::after { + content: '\f104'; + } + .custom-toggler-closed.custom-toggler-west::after { + content: '\f105'; } .ui-layout-resizer-dragging { diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less index 0f76816fd5..af597933ea 100644 --- a/services/web/public/stylesheets/app/editor/pdf.less +++ b/services/web/public/stylesheets/app/editor/pdf.less @@ -270,7 +270,7 @@ } .synctex-controls when (@is-overleaf = true) { - margin-right: -11px; + margin-right: -8px; } .synctex-control { display: block; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 48499a3609..45dd0232dd 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -228,7 +228,7 @@ // Editor resizers @editor-resizer-bg-color : @ol-blue-gray-5; -@editor-resizer-bg-color-dragging : transparent; +@editor-resizer-bg-color-dragging : @ol-blue-gray-5; @editor-toggler-bg-color : darken(@ol-blue-gray-2, 15%); @editor-toggler-hover-bg-color : @ol-green; @synctex-controls-z-index : 6;