From 71604ebd5cfc4ffb996cbc47ebe18990759a901e Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 30 Nov 2017 15:12:36 +0000
Subject: [PATCH 01/16] Create uiConfig Pug local; render it in the HTML.

---
 .../web/app/coffee/infrastructure/ExpressLocals.coffee   | 9 +++++++++
 services/web/app/views/project/editor.pug                | 1 +
 2 files changed, 10 insertions(+)

diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
index fa9a223ad7..318513e5dc 100644
--- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee
+++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
@@ -290,3 +290,12 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 		res.locals.moduleIncludes = Modules.moduleIncludes
 		res.locals.moduleIncludesAvailable = Modules.moduleIncludesAvailable
 		next()
+
+	webRouter.use (req, res, next) ->
+		isOl = (Settings.brandPrefix == 'ol-')
+		res.locals.uiConfig = 
+			defaultResizerSizeOpen   : if isOl then 2 else 24
+			defaultResizerSizeClosed : if isOl then 2 else 24
+			chatResizerSizeOpen      : if isOl then 2 else 6
+			chatResizerSizeClosed    : 0
+		next()
diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug
index 1e1f2c982b..9d930776a6 100644
--- a/services/web/app/views/project/editor.pug
+++ b/services/web/app/views/project/editor.pug
@@ -157,6 +157,7 @@ block requirejs
 		window.aceFingerprint = "#{fingerprint(jsPath + lib('ace') + '/ace.js')}"
 		window.aceWorkerPath = "#{aceWorkerPath}";
 		window.pdfCMapsPath = "#{pdfCMapsPath}"
+		window.uiConfig = JSON.parse('!{JSON.stringify(uiConfig).replace(/\//g, "\\/")}');
 
 	script(
 		data-main=buildJsPath("ide.js", {fingerprint:false}),

From 024741ac51c536ba24f9fa2113f96fcb2193e9af Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 30 Nov 2017 15:24:10 +0000
Subject: [PATCH 02/16] Correct chat resizer values.

---
 services/web/app/coffee/infrastructure/ExpressLocals.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
index 318513e5dc..ba4fe961e6 100644
--- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee
+++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
@@ -296,6 +296,6 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 		res.locals.uiConfig = 
 			defaultResizerSizeOpen   : if isOl then 2 else 24
 			defaultResizerSizeClosed : if isOl then 2 else 24
-			chatResizerSizeOpen      : if isOl then 2 else 6
+			chatResizerSizeOpen      : if isOl then 2 else 12
 			chatResizerSizeClosed    : 0
 		next()

From 826f49b9a4b9fe1ea233e57f72d1bab2524069e5 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 30 Nov 2017 15:24:39 +0000
Subject: [PATCH 03/16] Add default resizer values to layout directive.

---
 services/web/public/coffee/ide/directives/layout.coffee | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee
index 21d9230b52..d4e98fb0d3 100644
--- a/services/web/public/coffee/ide/directives/layout.coffee
+++ b/services/web/public/coffee/ide/directives/layout.coffee
@@ -11,12 +11,12 @@ define [
 					if attrs.spacingOpen?
 						spacingOpen = parseInt(attrs.spacingOpen, 10)
 					else
-						spacingOpen = 24
+						spacingOpen = window.uiConfig.defaultResizerSizeOpen
 
 					if attrs.spacingClosed?
 						spacingClosed = parseInt(attrs.spacingClosed, 10)
 					else
-						spacingClosed = 24
+						spacingClosed = window.uiConfig.defaultResizerSizeClosed
 
 					options =
 						spacing_open: spacingOpen

From 3a959cccfd6b020710656d7355e4c63076f458b9 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 30 Nov 2017 15:24:48 +0000
Subject: [PATCH 04/16] Use custom chat resizer values.

---
 services/web/app/views/project/editor.pug | 4 ++--
 services/web/public/coffee/ide.coffee     | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug
index 9d930776a6..a5cb46819f 100644
--- a/services/web/app/views/project/editor.pug
+++ b/services/web/app/views/project/editor.pug
@@ -43,8 +43,8 @@ block content
 
 		#chat-wrapper.full-size(
 			layout="chat",
-			spacing-open="12",
-			spacing-closed="0",
+			spacing-open="{{ui.chatResizerSizeOpen}}",
+			spacing-closed="{{ui.chatResizerSizeClosed}}",
 			initial-size-east="250",
 			init-closed-east="true",
 			open-east="ui.chatOpen",
diff --git a/services/web/public/coffee/ide.coffee b/services/web/public/coffee/ide.coffee
index 728300456c..c934f6297b 100644
--- a/services/web/public/coffee/ide.coffee
+++ b/services/web/public/coffee/ide.coffee
@@ -76,6 +76,8 @@ define [
 			pdfWidth: 0
 			reviewPanelOpen: localStorage("ui.reviewPanelOpen.#{window.project_id}")
 			miniReviewPanelVisible: false
+			chatResizerSizeOpen: window.uiConfig.chatResizerSizeOpen
+			chatResizerSizeClosed: window.uiConfig.chatResizerSizeClosed
 		}
 		$scope.onboarding = {
 			autoCompile: if window.showAutoCompileOnboarding then 'unseen' else 'dismissed'

From ce3e410250136ee0d75885a9c7be95092c76a3f8 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 30 Nov 2017 17:00:25 +0000
Subject: [PATCH 05/16] Configure resizer colors.

---
 .../web/public/stylesheets/app/editor.less    | 25 ++++++++-
 .../stylesheets/core/_common-variables.less   | 52 ++++++++++---------
 .../public/stylesheets/core/ol-variables.less |  2 +
 3 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index e37d829710..3f735e4e5f 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -261,9 +261,9 @@
 	}
 }
 
-.ui-layout-resizer {
+.ui-layout-resizer when (@is-overleaf = false) {
 	width: 6px;
-	background-color: #f4f4f4;
+	background-color: @editor-resizer-bg-color;
 	border-left: 1px solid @editor-border-color;
 	border-right: 1px solid @editor-border-color;
 	.ui-layout-toggler {
@@ -282,6 +282,27 @@
 		}
 	}
 }
+
+.ui-layout-resizer when (@is-overleaf = true) {
+	background-color: @editor-resizer-bg-color;
+
+	// .ui-layout-toggler {
+	// 	color: #999;
+	// 	font-family: FontAwesome;
+	// 	font-style: normal;
+	// 	font-weight: normal;
+	// 	line-height: 1;
+	// 	-webkit-font-smoothing: antialiased;
+	// 	-moz-osx-font-smoothing: grayscale;
+	// 	font-size: 16px !important;
+	// 	line-height: 50px;
+	// 	&:hover {
+	// 		background-color: #ddd;
+	// 		color: #333;
+	// 	}
+	// }
+}
+
 .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
 	.ui-layout-toggler {
 		&:before {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 47030d08ff..11d3e3681c 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -889,32 +889,36 @@
 @footer-padding                : 2em;
 
 // Editor header
-@toolbar-header-bg-color       : transparent;
-@toolbar-header-shadow         : 0 0 2px #ccc;
-@toolbar-btn-color             : @link-color;
-@toolbar-btn-hover-color       : @link-hover-color;
-@toolbar-btn-hover-bg-color    : darken(white, 10%);
-@toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15);
-@toolbar-btn-active-color      : white;
-@toolbar-btn-active-bg-color   : @link-color;
-@toolbar-btn-active-shadow     : inset 0 3px 5px rgba(0, 0, 0, 0.225);
-@toolbar-alt-bg-color          : #fafafa;
-@toolbar-icon-btn-color        : @gray-light;
-@toolbar-icon-btn-hover-color  : @gray-dark;
-@toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25);
-@toolbar-border-bottom         : 1px solid @toolbar-border-color;
+@toolbar-header-bg-color        : transparent;
+@toolbar-header-shadow          : 0 0 2px #ccc;
+@toolbar-btn-color              : @link-color;
+@toolbar-btn-hover-color        : @link-hover-color;
+@toolbar-btn-hover-bg-color     : darken(white, 10%);
+@toolbar-btn-hover-text-shadow  : 0 1px 0 rgba(0, 0, 0, 0.15);
+@toolbar-btn-active-color       : white;
+@toolbar-btn-active-bg-color    : @link-color;
+@toolbar-btn-active-shadow      : inset 0 3px 5px rgba(0, 0, 0, 0.225);
+@toolbar-alt-bg-color           : #fafafa;
+@toolbar-icon-btn-color         : @gray-light;
+@toolbar-icon-btn-hover-color   : @gray-dark;
+@toolbar-icon-btn-hover-shadow  : 0 1px 0 rgba(0, 0, 0, 0.25);
+@toolbar-border-bottom          : 1px solid @toolbar-border-color;
 
 // Editor file-tree
-@file-tree-bg                    : transparent;
-@file-tree-item-color            : @gray-darker;
-@file-tree-item-toggle-color     : @gray;
-@file-tree-item-icon-color       : @gray-light;
-@file-tree-item-input-color      : inherit;
-@file-tree-item-folder-color     : lighten(desaturate(@link-color, 10%), 5%);
-@file-tree-item-hover-bg         : @gray-lightest;
-@file-tree-item-selected-bg      : transparent;
-@file-tree-multiselect-bg        : lighten(@brand-info, 40%);
-@file-tree-multiselect-hover-bg  : lighten(@brand-info, 30%);
+@file-tree-bg                   : transparent;
+@file-tree-item-color           : @gray-darker;
+@file-tree-item-toggle-color    : @gray;
+@file-tree-item-icon-color      : @gray-light;
+@file-tree-item-input-color     : inherit;
+@file-tree-item-folder-color    : lighten(desaturate(@link-color, 10%), 5%);
+@file-tree-item-hover-bg        : @gray-lightest;
+@file-tree-item-selected-bg     : transparent;
+@file-tree-multiselect-bg       : lighten(@brand-info, 40%);
+@file-tree-multiselect-hover-bg : lighten(@brand-info, 30%);
+
+// Editor resizers
+@editor-resizer-bg-color        : #F4F4F4;
+
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 4911a9d2c4..4cf789c666 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -184,6 +184,8 @@
 @file-tree-multiselect-bg       : @ol-blue;
 @file-tree-multiselect-hover-bg : @ol-dark-blue;
 @file-tree-droppable-bg-color   : tint(@ol-green, 5%);
+// Editor resizers
+@editor-resizer-bg-color        : @ol-blue-gray-6;
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.

From cd6b51a1f6474cc915be10e45d495af1f6a659d8 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 30 Nov 2017 17:00:42 +0000
Subject: [PATCH 06/16] Increase v2 resizer hit area.

---
 services/web/public/stylesheets/app/editor.less | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 3f735e4e5f..56c620c16d 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -284,7 +284,19 @@
 }
 
 .ui-layout-resizer when (@is-overleaf = true) {
-	background-color: @editor-resizer-bg-color;
+	@extra-hit-area: 8px;
+	margin-left: -(@extra-hit-area) !important;
+	margin-right: -(@extra-hit-area - 1px) !important;
+	padding-left: @extra-hit-area !important;
+	padding-right: @extra-hit-area !important;
+	box-sizing: content-box;
+	background-image: linear-gradient(90deg, 
+		transparent,
+		transparent (@extra-hit-area - 1px),
+		@editor-resizer-bg-color (@extra-hit-area - 1px),
+		@editor-resizer-bg-color (@extra-hit-area + 1px),
+		transparent (@extra-hit-area + 1px),
+		transparent);
 
 	// .ui-layout-toggler {
 	// 	color: #999;

From aeffe1cea9b80937b3d3d6340cf63555c27d08e1 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Fri, 1 Dec 2017 11:22:12 +0000
Subject: [PATCH 07/16] Style resizers while dragging.

---
 .../web/public/stylesheets/app/editor.less    |  2 +-
 .../stylesheets/core/_common-variables.less   |  4 +-
 .../public/stylesheets/core/ol-variables.less | 56 ++++++++++---------
 3 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 56c620c16d..e280f92779 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -330,7 +330,7 @@
 	}
 }
 .ui-layout-resizer-dragging {
-	background-color: #ddd;
+	background-color: @editor-resizer-bg-color-dragging;
 }
 
 .context-menu {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 11d3e3681c..c5bd633b15 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -917,8 +917,8 @@
 @file-tree-multiselect-hover-bg : lighten(@brand-info, 30%);
 
 // Editor resizers
-@editor-resizer-bg-color        : #F4F4F4;
-
+@editor-resizer-bg-color          : #F4F4F4;
+@editor-resizer-bg-color-dragging : #ddd;
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 4cf789c666..54fdddf309 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -157,35 +157,37 @@
 @footer-padding                 : 2em 0;
 
 // Editor header
-@toolbar-header-bg-color        : @ol-blue-gray-6;
-@toolbar-header-shadow          : none;
-@toolbar-btn-color              : #FFF;
-@toolbar-btn-hover-color        : #FFF;
-@toolbar-btn-hover-bg-color     : @ol-blue-gray-5;
-@toolbar-btn-hover-text-shadow  : none;
-@toolbar-btn-active-color       : #FFF;
-@toolbar-btn-active-bg-color    : @ol-green;
-@toolbar-btn-active-shadow      : none;
-@toolbar-border-color           : @ol-blue-gray-5;
-@toolbar-alt-bg-color           : @ol-blue-gray-5;
-@toolbar-icon-btn-color         : #FFF;
-@toolbar-icon-btn-hover-color   : #FFF;
-@toolbar-icon-btn-hover-shadow  : none;
-@toolbar-border-bottom          : 1px solid @toolbar-border-color;
+@toolbar-header-bg-color          : @ol-blue-gray-6;
+@toolbar-header-shadow            : none;
+@toolbar-btn-color                : #FFF;
+@toolbar-btn-hover-color          : #FFF;
+@toolbar-btn-hover-bg-color       : @ol-blue-gray-5;
+@toolbar-btn-hover-text-shadow    : none;
+@toolbar-btn-active-color         : #FFF;
+@toolbar-btn-active-bg-color      : @ol-green;
+@toolbar-btn-active-shadow        : none;
+@toolbar-border-color             : @ol-blue-gray-5;
+@toolbar-alt-bg-color             : @ol-blue-gray-5;
+@toolbar-icon-btn-color           : #FFF;
+@toolbar-icon-btn-hover-color     : #FFF;
+@toolbar-icon-btn-hover-shadow    : none;
+@toolbar-border-bottom            : 1px solid @toolbar-border-color;
 // Editor file-tree
-@file-tree-bg                   : @ol-blue-gray-4;
-@file-tree-item-color           : #FFF;
-@file-tree-item-input-color     : @ol-blue-gray-5;
-@file-tree-item-toggle-color    : @ol-blue-gray-2;
-@file-tree-item-icon-color      : @ol-blue-gray-2;
-@file-tree-item-folder-color    : @ol-blue-gray-2;
-@file-tree-item-hover-bg        : @ol-blue-gray-5;
-@file-tree-item-selected-bg     : @ol-green;
-@file-tree-multiselect-bg       : @ol-blue;
-@file-tree-multiselect-hover-bg : @ol-dark-blue;
-@file-tree-droppable-bg-color   : tint(@ol-green, 5%);
+@file-tree-bg                     : @ol-blue-gray-4;
+@file-tree-item-color             : #FFF;
+@file-tree-item-input-color       : @ol-blue-gray-5;
+@file-tree-item-toggle-color      : @ol-blue-gray-2;
+@file-tree-item-icon-color        : @ol-blue-gray-2;
+@file-tree-item-folder-color      : @ol-blue-gray-2;
+@file-tree-item-hover-bg          : @ol-blue-gray-5;
+@file-tree-item-selected-bg       : @ol-green;
+@file-tree-multiselect-bg         : @ol-blue;
+@file-tree-multiselect-hover-bg   : @ol-dark-blue;
+@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-6;
+@editor-resizer-bg-color-dragging : transparent;
+
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.

From fd852004fe1055b51480b8a1bb8b5ab8a6922b32 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 4 Dec 2017 12:25:40 +0000
Subject: [PATCH 08/16] Refactor synctex controls z-index handling.

---
 .../web/app/views/project/editor/editor.pug   |  8 ++--
 .../coffee/ide/directives/layout.coffee       |  4 +-
 .../web/public/stylesheets/app/editor.less    |  1 +
 .../public/stylesheets/app/editor/pdf.less    | 37 ++++++++++++++++++-
 .../stylesheets/core/_common-variables.less   |  2 +
 .../public/stylesheets/core/ol-variables.less |  3 +-
 6 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug
index dc40d7b9ba..787beab01b 100644
--- a/services/web/app/views/project/editor/editor.pug
+++ b/services/web/app/views/project/editor/editor.pug
@@ -73,21 +73,21 @@ div.full-size(
 		ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'"
 		ng-controller="PdfSynctexController"
 	)
-		a.btn.btn-default.btn-xs(
+		a.synctex-control-goto-pdf(
 			tooltip=translate('go_to_code_location_in_pdf')
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToPdf()"
 		)
-			i.fa.fa-long-arrow-right
+			i.synctex-control-icon
 		br
-		a.btn.btn-default.btn-xs(
+		a.synctex-control-goto-code(
 			tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'"
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToCode()"
 		)
-			i.fa.fa-long-arrow-left
+			i.synctex-control-icon
 			
 div.full-size(
 	ng-if="ui.pdfLayout == 'flat'"
diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee
index d4e98fb0d3..86058447ed 100644
--- a/services/web/public/coffee/ide/directives/layout.coffee
+++ b/services/web/public/coffee/ide/directives/layout.coffee
@@ -53,9 +53,7 @@ define [
 							else
 								controls.show()
 								controls.css({
-									position: "absolute"
 									right: state.east.size
-									"z-index": 3
 								})
 
 					resetOpenStates = () ->
@@ -112,7 +110,7 @@ define [
 						# Set the panel as overflowing (gives it higher z-index and sets overflow rules)
 						layoutObj.allowOverflow overflowPane
 						# Read the given z-index value and increment it, so that it's higher than synctex controls.
-						overflowPaneZVal = overflowPaneEl.css "z-index"
+						overflowPaneZVal = overflowPaneEl.zIndex()
 						overflowPaneEl.css "z-index", overflowPaneZVal + 1
 
 					resetOpenStates()
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index e280f92779..1c45fd6a1c 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -289,6 +289,7 @@
 	margin-right: -(@extra-hit-area - 1px) !important;
 	padding-left: @extra-hit-area !important;
 	padding-right: @extra-hit-area !important;
+	z-index: 5 !important;
 	box-sizing: content-box;
 	background-image: linear-gradient(90deg, 
 		transparent,
diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less
index a873cd5e8f..96097df1bf 100644
--- a/services/web/public/stylesheets/app/editor/pdf.less
+++ b/services/web/public/stylesheets/app/editor/pdf.less
@@ -229,14 +229,49 @@
 }
 
 .synctex-controls {
+	position: absolute;
+	z-index: @synctex-controls-z-index;
 	top: 68px;
 	padding: 0px 2px;
 	.btn-xs {
 		line-height: 1.3;
-		padding: 0 2px 0;
+		padding: @synctex-controls-btn-padding;
 	}
 }
 
+.synctex-controls when (@is-overleaf = true) {
+	margin-right: -9px;
+}
+	.synctex-control-goto-pdf,
+	.synctex-control-goto-code {
+		.btn;
+		.btn-default;
+		.btn-xs;
+
+		> .synctex-control-icon {
+			display: inline-block;
+			font: normal normal normal 14px/1 FontAwesome;
+			font-size: inherit;
+			text-rendering: auto;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+		}
+	}
+	
+	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = true) {
+		content: "\f061";		
+	}
+	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = true) {
+		content: "\f060";		
+	}
+	
+	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = false) {
+		content: "\f178";		
+	}
+	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = false) {
+		content: "\f177";		
+	}
+
 .editor-dark {
 	.pdf-logs {
 		background-color: lighten(@editor-dark-background-color, 10%);
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index c5bd633b15..958c5a1a10 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -919,6 +919,8 @@
 // Editor resizers
 @editor-resizer-bg-color          : #F4F4F4;
 @editor-resizer-bg-color-dragging : #ddd;
+@synctex-controls-z-index         : 3;
+@synctex-controls-btn-padding     : 0 2px 0;
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 54fdddf309..812cd3e8f9 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -187,7 +187,8 @@
 // Editor resizers
 @editor-resizer-bg-color          : @ol-blue-gray-6;
 @editor-resizer-bg-color-dragging : transparent;
-
+@synctex-controls-z-index         : 6;
+@synctex-controls-btn-padding     : 4px;
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.

From 0bad7d8549deaf7fe10afd1878a50c8cea4f4733 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 4 Dec 2017 15:12:13 +0000
Subject: [PATCH 09/16] Adjustments to synctex controls.

---
 .../web/app/views/project/editor/editor.pug   |  5 +-
 .../public/stylesheets/app/editor/pdf.less    | 47 ++++++++++++++-----
 .../stylesheets/core/_common-variables.less   |  2 +-
 .../public/stylesheets/core/ol-variables.less |  2 +-
 4 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug
index 787beab01b..6e0e1ecca9 100644
--- a/services/web/app/views/project/editor/editor.pug
+++ b/services/web/app/views/project/editor/editor.pug
@@ -73,15 +73,14 @@ div.full-size(
 		ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'"
 		ng-controller="PdfSynctexController"
 	)
-		a.synctex-control-goto-pdf(
+		a.synctex-control.synctex-control-goto-pdf(
 			tooltip=translate('go_to_code_location_in_pdf')
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToPdf()"
 		)
 			i.synctex-control-icon
-		br
-		a.synctex-control-goto-code(
+		a.synctex-control.synctex-control-goto-code(
 			tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'"
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less
index 96097df1bf..70bf06545c 100644
--- a/services/web/public/stylesheets/app/editor/pdf.less
+++ b/services/web/public/stylesheets/app/editor/pdf.less
@@ -231,19 +231,14 @@
 .synctex-controls {
 	position: absolute;
 	z-index: @synctex-controls-z-index;
+	padding: @synctex-controls-padding;
 	top: 68px;
-	padding: 0px 2px;
-	.btn-xs {
-		line-height: 1.3;
-		padding: @synctex-controls-btn-padding;
-	}
 }
 
 .synctex-controls when (@is-overleaf = true) {
-	margin-right: -9px;
+	margin-right: -11px;
 }
-	.synctex-control-goto-pdf,
-	.synctex-control-goto-code {
+	.synctex-control {
 		.btn;
 		.btn-default;
 		.btn-xs;
@@ -257,12 +252,38 @@
 			-moz-osx-font-smoothing: grayscale;
 		}
 	}
-	
-	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = true) {
-		content: "\f061";		
+
+	.synctex-control when (@is-overleaf = true) {
+		@ol-synctex-control-size: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1em;
+		width: @ol-synctex-control-size;
+		height: @ol-synctex-control-size;
+		border-radius: @ol-synctex-control-size / 2;
+		padding: 0 0 2px;
+		background-color: fade(@btn-default-bg, 80%);
+		transition: background 0.15s ease;
+		margin-bottom: @ol-synctex-control-size / 2;
 	}
-	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = true) {
-		content: "\f060";		
+
+	.synctex-control when (@is-overleaf = false) {
+		line-height: 1.3;
+		padding: 0 2px;
+	}
+	
+	.synctex-control-goto-pdf > .synctex-control-icon when (@is-overleaf = true) {
+		text-indent: 1px; // "Optical" adjustment.
+		&::before {
+			content: "\f061";		
+		}
+	}
+	.synctex-control-goto-code > .synctex-control-icon when (@is-overleaf = true) {
+		text-indent: -1px; // "Optical" adjustment.
+		&::before {
+			content: "\f060";		
+		}
 	}
 	
 	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = false) {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 958c5a1a10..3689e6c10e 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -920,7 +920,7 @@
 @editor-resizer-bg-color          : #F4F4F4;
 @editor-resizer-bg-color-dragging : #ddd;
 @synctex-controls-z-index         : 3;
-@synctex-controls-btn-padding     : 0 2px 0;
+@synctex-controls-padding         : 0 2px;
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 812cd3e8f9..4452e0e956 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -188,7 +188,7 @@
 @editor-resizer-bg-color          : @ol-blue-gray-6;
 @editor-resizer-bg-color-dragging : transparent;
 @synctex-controls-z-index         : 6;
-@synctex-controls-btn-padding     : 4px;
+@synctex-controls-padding         : 0;
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.

From 963ad4fece710f0963cfba247d246641fb5cd261 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 4 Dec 2017 15:48:23 +0000
Subject: [PATCH 10/16] Style resizer togglers.

---
 .../web/public/stylesheets/app/editor.less    | 38 +++++++++++--------
 .../stylesheets/core/_common-variables.less   |  2 +
 .../public/stylesheets/core/ol-variables.less |  2 +
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 1c45fd6a1c..ccd03aea47 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -276,8 +276,9 @@
 		-moz-osx-font-smoothing: grayscale;
 		font-size: 16px !important;
 		line-height: 50px;
+		background-color: @editor-toggler-bg-color;
 		&:hover {
-			background-color: #ddd;
+			background-color: @editor-toggler-hover-bg-color;
 			color: #333;
 		}
 	}
@@ -299,21 +300,26 @@
 		transparent (@extra-hit-area + 1px),
 		transparent);
 
-	// .ui-layout-toggler {
-	// 	color: #999;
-	// 	font-family: FontAwesome;
-	// 	font-style: normal;
-	// 	font-weight: normal;
-	// 	line-height: 1;
-	// 	-webkit-font-smoothing: antialiased;
-	// 	-moz-osx-font-smoothing: grayscale;
-	// 	font-size: 16px !important;
-	// 	line-height: 50px;
-	// 	&:hover {
-	// 		background-color: #ddd;
-	// 		color: #333;
-	// 	}
-	// }
+	.ui-layout-toggler {
+		padding: 0 @extra-hit-area !important;
+		background-image: linear-gradient(90deg, 
+			transparent,
+			transparent (@extra-hit-area - 1px),
+			@editor-toggler-bg-color (@extra-hit-area - 1px),
+			@editor-toggler-bg-color (@extra-hit-area + 1px),
+			transparent (@extra-hit-area + 1px),
+			transparent);
+
+		&:hover {
+			background-image: linear-gradient(90deg, 
+				transparent,
+				transparent (@extra-hit-area - 2px),
+				@editor-toggler-hover-bg-color (@extra-hit-area - 2px),
+				@editor-toggler-hover-bg-color (@extra-hit-area + 2px),
+				transparent (@extra-hit-area + 2px),
+				transparent);
+		}
+	}
 }
 
 .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 3689e6c10e..d4f5a168ec 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -919,6 +919,8 @@
 // Editor resizers
 @editor-resizer-bg-color          : #F4F4F4;
 @editor-resizer-bg-color-dragging : #ddd;
+@editor-toggler-bg-color          : transparent;
+@editor-toggler-hover-bg-color    : #DDD;
 @synctex-controls-z-index         : 3;
 @synctex-controls-padding         : 0 2px;
 // Tags
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 4452e0e956..e86b9de8a7 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -187,6 +187,8 @@
 // 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-hover-bg-color    : @ol-green;
 @synctex-controls-z-index         : 6;
 @synctex-controls-padding         : 0;
 //== Colors

From 7498ead1f5e8b2c9b9cbd75a5336fa16d51a7c87 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 4 Dec 2017 15:58:40 +0000
Subject: [PATCH 11/16] Make sure SL synctex controls remain the same.

---
 services/web/public/stylesheets/app/editor/pdf.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less
index 70bf06545c..b8ddfc5efd 100644
--- a/services/web/public/stylesheets/app/editor/pdf.less
+++ b/services/web/public/stylesheets/app/editor/pdf.less
@@ -242,6 +242,8 @@
 		.btn;
 		.btn-default;
 		.btn-xs;
+		display: block;
+		margin-bottom: 3px;
 
 		> .synctex-control-icon {
 			display: inline-block;

From 09dcbcf3b78fbb68b7a39bc41b4f7ecacbe86a7c Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 7 Dec 2017 10:35:43 +0000
Subject: [PATCH 12/16] Fix missing variables.

---
 services/web/public/stylesheets/core/_common-variables.less | 3 ++-
 services/web/public/stylesheets/core/ol-variables.less      | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 84a4f552d2..ab3ef2ccc9 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -902,10 +902,12 @@
 @toolbar-icon-btn-color         : @gray-light;
 @toolbar-icon-btn-hover-color   : @gray-dark;
 @toolbar-icon-btn-hover-shadow  : 0 1px 0 rgba(0, 0, 0, 0.25);
+@toolbar-icon-btn-hover-boxshadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
 @toolbar-border-bottom          : 1px solid @toolbar-border-color;
 
 // Editor file-tree
 @file-tree-bg                   : transparent;
+@file-tree-line-height          : 2.6;
 @file-tree-item-color           : @gray-darker;
 @file-tree-item-toggle-color    : @gray;
 @file-tree-item-icon-color      : @gray-light;
@@ -923,7 +925,6 @@
 @editor-toggler-hover-bg-color    : #DDD;
 @synctex-controls-z-index         : 3;
 @synctex-controls-padding         : 0 2px;
-
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index e86b9de8a7..004bc343d8 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -172,8 +172,10 @@
 @toolbar-icon-btn-hover-color     : #FFF;
 @toolbar-icon-btn-hover-shadow    : none;
 @toolbar-border-bottom            : 1px solid @toolbar-border-color;
+@toolbar-icon-btn-hover-boxshadow : none;
 // Editor file-tree
 @file-tree-bg                     : @ol-blue-gray-4;
+@file-tree-line-height            : 2.05;
 @file-tree-item-color             : #FFF;
 @file-tree-item-input-color       : @ol-blue-gray-5;
 @file-tree-item-toggle-color      : @ol-blue-gray-2;
@@ -191,8 +193,6 @@
 @editor-toggler-hover-bg-color    : @ol-green;
 @synctex-controls-z-index         : 6;
 @synctex-controls-padding         : 0;
-//== Colors
-//
 //## Gray and brand colors for use across Bootstrap.
 @gray-darker:           #252525;
 @gray-dark:             #505050;

From 9575e802915553cf16dd130e4fb386ab896d11b6 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Fri, 8 Dec 2017 10:31:31 +0000
Subject: [PATCH 13/16] Pseudo elements in togglers where causing artifacts in
 v2; only allow those in SL.

---
 services/web/public/stylesheets/app/editor.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index ccd03aea47..fb8e825cb3 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -323,14 +323,14 @@
 }
 
 .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
-	.ui-layout-toggler {
+	.ui-layout-toggler when (@is-overleaf = false) {
 		&:before {
 			content: "\f104"
 		}
 	}
 }
 .ui-layout-resizer-east.ui-layout-resizer-open, .ui-layout-resizer-west.ui-layout-resizer-closed {
-	.ui-layout-toggler {
+	.ui-layout-toggler when (@is-overleaf = false) {
 		&:before {
 			content: "\f105"
 		}

From 97129b5dda1a0eae9262d4fd355261799ae0e73c Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Fri, 8 Dec 2017 15:29:05 +0000
Subject: [PATCH 14/16] Make the togglers more obvious when panes are closed.

---
 .../web/public/stylesheets/app/editor.less    | 70 ++++++++++++++-----
 1 file changed, 52 insertions(+), 18 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index fb8e825cb3..5257e9c519 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -14,6 +14,9 @@
 @import "./editor/review-panel.less";
 @import "./editor/feature-onboarding.less";
 
+@ui-layout-toggler-def-height: 50px;
+@ui-resizer-extra-hit-area: 8px;
+
 @keyframes blink {
 	0% { 
 		opacity: 0.2;
@@ -285,38 +288,37 @@
 }
 
 .ui-layout-resizer when (@is-overleaf = true) {
-	@extra-hit-area: 8px;
-	margin-left: -(@extra-hit-area) !important;
-	margin-right: -(@extra-hit-area - 1px) !important;
-	padding-left: @extra-hit-area !important;
-	padding-right: @extra-hit-area !important;
+	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 (@extra-hit-area - 1px),
-		@editor-resizer-bg-color (@extra-hit-area - 1px),
-		@editor-resizer-bg-color (@extra-hit-area + 1px),
-		transparent (@extra-hit-area + 1px),
+		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),
 		transparent);
 
 	.ui-layout-toggler {
-		padding: 0 @extra-hit-area !important;
+		padding: 0 @ui-resizer-extra-hit-area !important;
 		background-image: linear-gradient(90deg, 
 			transparent,
-			transparent (@extra-hit-area - 1px),
-			@editor-toggler-bg-color (@extra-hit-area - 1px),
-			@editor-toggler-bg-color (@extra-hit-area + 1px),
-			transparent (@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),
+			transparent (@ui-resizer-extra-hit-area + 1px),
 			transparent);
 
 		&:hover {
 			background-image: linear-gradient(90deg, 
 				transparent,
-				transparent (@extra-hit-area - 2px),
-				@editor-toggler-hover-bg-color (@extra-hit-area - 2px),
-				@editor-toggler-hover-bg-color (@extra-hit-area + 2px),
-				transparent (@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),
+				transparent (@ui-resizer-extra-hit-area + 2px),
 				transparent);
 		}
 	}
@@ -336,6 +338,38 @@
 		}
 	}
 }
+
+.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-resizer-dragging {
 	background-color: @editor-resizer-bg-color-dragging;
 }

From 0652fc62a06fbee5f9cd4120efe66137ee3558e7 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 11 Dec 2017 15:33:00 +0000
Subject: [PATCH 15/16] Configure resizer cursors for v2.

---
 services/web/app/coffee/infrastructure/ExpressLocals.coffee | 2 ++
 services/web/public/coffee/ide/directives/layout.coffee     | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
index 8c2257aa25..b126819f56 100644
--- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee
+++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
@@ -298,6 +298,8 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 		res.locals.uiConfig = 
 			defaultResizerSizeOpen   : if isOl then 2 else 24
 			defaultResizerSizeClosed : if isOl then 2 else 24
+			eastResizerCursor        : if isOl then "ew-resize" else null
+			westResizerCursor        : if isOl then "ew-resize" else null
 			chatResizerSizeOpen      : if isOl then 2 else 12
 			chatResizerSizeClosed    : 0
 		next()
diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee
index 86058447ed..fcc75b29a1 100644
--- a/services/web/public/coffee/ide/directives/layout.coffee
+++ b/services/web/public/coffee/ide/directives/layout.coffee
@@ -44,6 +44,12 @@ define [
 							if !attrs.minimumRestoreSizeWest? or (state.west.size >= attrs.minimumRestoreSizeWest and !state.west.initClosed)
 								options.west = state.west
 
+					if window.uiConfig.eastResizerCursor?
+						options.east.resizerCursor = window.uiConfig.eastResizerCursor
+
+					if window.uiConfig.westResizerCursor?
+						options.west.resizerCursor = window.uiConfig.westResizerCursor
+						
 					repositionControls = () ->
 						state = element.layout().readState()
 						if state.east?

From ab46e3930ad288a56350cb8cf43acb07bb6de75f Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 11 Dec 2017 15:41:07 +0000
Subject: [PATCH 16/16] Configure toggler cursors for v2.

---
 .../web/public/stylesheets/app/editor.less     | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 5257e9c519..9224dbe181 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -370,6 +370,24 @@
 	}
 }
 
+.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;
 }