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; } -