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

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("
 							<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())

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);
-
-		&: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-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 {
@@ -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-east when (@is-overleaf = true) {
-	&.ui-layout-toggler-open {
-		cursor: e-resize !important
-	}
-	&.ui-layout-toggler-closed {
-		cursor: w-resize !important
-	}
+.ui-layout-toggler when (@is-overleaf = true) {
+	display: none !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
-	}
-}
+.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);
+// 		}
+// 	}
+// }
+
+// .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;
 }
-