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

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

@ -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,16 +75,10 @@ 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()
@ -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("
<a href
class=\"custom-toggler\"
tooltip=\"{{ customTogglerTooltip }}\"
tooltip-placement=\"#{ if customTogglerPane == "east" then "left" else "right" }\">
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())

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

@ -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;
&::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 when (@is-overleaf = true) {
display: none !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
}
.custom-toggler {
position: absolute;
width: 8px;
height: 50px;
margin-top: -25px;
top: 50%;
background: red;
z-index: 6;
margin-right: -3px;
}
.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.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;
@ -624,4 +639,3 @@
height: auto;
border-bottom: 1px solid @modal-header-border-color;
}