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

Make custom togglers react to opening and closing panes. Dynamically add CSS classes.

Browse source
This commit is contained in:
Paulo Reis 2018-03-20 16:02:01 +00:00
parent a3034fc79f
commit fb7d902038
2 changed files with 120 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
services/web/public/coffee/ide/directives/layout.coffee
View file

@ -28,6 +28,10 @@ define [
spacing_closed: spacingClosed spacing_closed: spacingClosed
slidable: false slidable: false
enableCursorHotkey: false enableCursorHotkey: false
onopen: (pane) =>
onPaneOpen(pane)
onclose: (pane) =>
onPaneClose(pane)
onresize: () => onresize: () =>
onInternalResize() onInternalResize()
maskIframesOnResize: scope.$eval( maskIframesOnResize: scope.$eval(
@ -71,17 +75,11 @@ define [
if !customTogglerEl? if !customTogglerEl?
return return
state = element.layout().readState() state = element.layout().readState()
if customTogglerPane == "east" positionAnchor = if customTogglerPane == "east" then "right" else "left"
if state.east? paneState = state[customTogglerPane]
customTogglerEl.css({ if paneState?
right: if state.east.initClosed then 0 else state.east.size customTogglerEl.css(positionAnchor, if paneState.initClosed then 0 else paneState.size)
})
else if customTogglerPane == "west"
if state.west?
customTogglerEl.css({
left: if state.west.initClosed then 0 else state.west.size
})
resetOpenStates = () -> resetOpenStates = () ->
state = element.layout().readState() state = element.layout().readState()
if attrs.openEast? and state.east? if attrs.openEast? and state.east?
@ -119,21 +117,42 @@ define [
if hasCustomToggler if hasCustomToggler
state = element.layout().readState() state = element.layout().readState()
customTogglerScope = scope.$new() customTogglerScope = scope.$new()
if state.east?.initClosed
customTogglerScope.customTogglerTooltip = customTogglerTooltipOpen customTogglerScope.isOpen = true
else
customTogglerScope.customTogglerTooltip = customTogglerTooltipClose 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(" customTogglerEl = $compile("
<a href <a href
class=\"custom-toggler\" class=\"custom-toggler #{ 'custom-toggler-' + customTogglerPane }\"
tooltip=\"{{ customTogglerTooltip }}\" ng-class=\"isOpen ? 'custom-toggler-open' : 'custom-toggler-closed'\"
tooltip-placement=\"#{ if customTogglerPane == "east" then "left" else "right" }\"> tooltip=\"{{ isOpen ? tooltipMsgClose : tooltipMsgOpen }}\"
tooltip-placement=\"{{ tooltipPlacement }}\"
ng-click=\"handleClick()\">
")(customTogglerScope) ")(customTogglerScope)
element.append(customTogglerEl) element.append(customTogglerEl)
# if hasCustomToggler
# element.find("> .custom-toggler").on "click", () -> onPaneOpen = (pane) ->
# element.layout().toggle("east") if !hasCustomToggler and pane != customTogglerPane
# repositionCustomToggler() 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 # Save state when exiting
$(window).unload () -> $(window).unload () ->
ide.localStorage("layout.#{name}", element.layout().readState()) ide.localStorage("layout.#{name}", element.layout().readState())

144
services/web/public/stylesheets/app/editor.less
View file

@ -316,26 +316,26 @@
transparent (@ui-resizer-extra-hit-area + 2px), transparent (@ui-resizer-extra-hit-area + 2px),
transparent); transparent);
.ui-layout-toggler { // .ui-layout-toggler {
padding: 0 @ui-resizer-extra-hit-area !important; // padding: 0 @ui-resizer-extra-hit-area !important;
background-image: linear-gradient(90deg, // background-image: linear-gradient(90deg,
transparent, // transparent,
transparent (@ui-resizer-extra-hit-area - 1px), // 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),
@editor-toggler-bg-color (@ui-resizer-extra-hit-area + 2px), // @editor-toggler-bg-color (@ui-resizer-extra-hit-area + 2px),
transparent (@ui-resizer-extra-hit-area + 2px), // transparent (@ui-resizer-extra-hit-area + 2px),
transparent); // transparent);
&:hover { // &:hover {
background-image: linear-gradient(90deg, // background-image: linear-gradient(90deg,
transparent, // transparent,
transparent (@ui-resizer-extra-hit-area - 2px), // 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),
@editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 3px), // @editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 3px),
transparent (@ui-resizer-extra-hit-area + 3px), // transparent (@ui-resizer-extra-hit-area + 3px),
transparent); // transparent);
} // }
} // }
} }
.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed { .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) { .ui-layout-toggler when (@is-overleaf = true) {
background-color: @editor-resizer-bg-color; display: none !important;
background-image: none; }
line-height: @ui-layout-toggler-def-height;
.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 { // &::before {
content: "\22EE"; // Vertical ellipsis // content: "\22EE"; // Vertical ellipsis
display: block; // display: block;
color: #FFF; // color: #FFF;
font-weight: 700; // font-weight: 700;
font-size: @font-size-h2; // font-size: @font-size-h2;
width: @ui-resizer-extra-hit-area / 2; // width: @ui-resizer-extra-hit-area / 2;
} // }
&:hover { // &:hover {
background-color: @editor-toggler-hover-bg-color; // background-color: @editor-toggler-hover-bg-color;
background-image: none; // background-image: none;
} // }
.ui-layout-resizer-west > & { // .ui-layout-resizer-west > & {
border-radius: 0 @border-radius-base @border-radius-base 0; // border-radius: 0 @border-radius-base @border-radius-base 0;
&::before { // &::before {
margin-left: -2px; // margin-left: -2px;
} // }
} // }
.ui-layout-resizer-east > & { // .ui-layout-resizer-east > & {
border-radius: @border-radius-base 0 0 @border-radius-base; // border-radius: @border-radius-base 0 0 @border-radius-base;
&::before { // &::before {
margin-left: (-1 - @ui-resizer-extra-hit-area); // margin-left: (-1 - @ui-resizer-extra-hit-area);
} // }
} // }
} // }
.ui-layout-toggler-east when (@is-overleaf = true) { // .ui-layout-toggler-east when (@is-overleaf = true) {
&.ui-layout-toggler-open { // &.ui-layout-toggler-open {
cursor: e-resize !important // cursor: e-resize !important
} // }
&.ui-layout-toggler-closed { // &.ui-layout-toggler-closed {
cursor: w-resize !important // cursor: w-resize !important
} // }
} // }
.ui-layout-toggler-west when (@is-overleaf = true) { // .ui-layout-toggler-west when (@is-overleaf = true) {
&.ui-layout-toggler-open { // &.ui-layout-toggler-open {
cursor: w-resize !important // cursor: w-resize !important
} // }
&.ui-layout-toggler-closed { // &.ui-layout-toggler-closed {
cursor: e-resize !important // cursor: e-resize !important
} // }
} // }
.ui-layout-resizer-dragging { .ui-layout-resizer-dragging {
background-color: @editor-resizer-bg-color-dragging; background-color: @editor-resizer-bg-color-dragging;
@ -624,4 +639,3 @@
height: auto; height: auto;
border-bottom: 1px solid @modal-header-border-color; border-bottom: 1px solid @modal-header-border-color;
} }