Merge pull request #195 from sharelatex/pr-style-v2-resizers

Style v2 resizers and synctex controls

services/web/app/coffee/infrastructure/ExpressLocals.coffee

@@ -292,3 +292,14 @@ 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
+			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()

services/web/app/views/project/editor.pug

@@ -43,8 +43,8 @@ block content
 
 		#chat-wrapper.full-size(
 			layout="chat",
-			spacing-open="12",
+			spacing-open="{{ui.chatResizerSizeOpen}}",
-			spacing-closed="0",
+			spacing-closed="{{ui.chatResizerSizeClosed}}",
 			initial-size-east="250",
 			init-closed-east="true",
 			open-east="ui.chatOpen",
@@ -158,6 +158,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}),

services/web/app/views/project/editor/editor.pug

@@ -73,21 +73,20 @@ div.full-size(
 		ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'"
 		ng-controller="PdfSynctexController"
 	)
-		a.btn.btn-default.btn-xs(
+		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.fa.fa-long-arrow-right
+			i.synctex-control-icon
-		br
+		a.synctex-control.synctex-control-goto-code(
-		a.btn.btn-default.btn-xs(
 			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'"

services/web/public/coffee/ide.coffee

@@ -77,6 +77,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'

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
@@ -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?
@@ -53,9 +59,7 @@ define [
 							else
 								controls.show()
 								controls.css({
-									position: "absolute"
 									right: state.east.size
-									"z-index": 3
 								})
 
 					resetOpenStates = () ->
@@ -112,7 +116,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()

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;
@@ -261,9 +264,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 {
@@ -276,28 +279,117 @@
 		-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;
 		}
 	}
 }
-.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
+
+.ui-layout-resizer when (@is-overleaf = true) {
+	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 (@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 @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 + 1px),
+			transparent (@ui-resizer-extra-hit-area + 1px),
+			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 + 2px),
+				transparent (@ui-resizer-extra-hit-area + 2px),
+				transparent);
+		}
+	}
+}
+
+.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
+	.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"
 		}
 	}
 }
+
+.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: #ddd;
+	background-color: @editor-resizer-bg-color-dragging;
 }
 
 .context-menu {

services/web/public/stylesheets/app/editor/pdf.less

@@ -229,12 +229,70 @@
 }
 
 .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: 0 2px 0;
 }
+
+.synctex-controls when (@is-overleaf = true) {
+	margin-right: -11px;
+}
+	.synctex-control {
+		.btn;
+		.btn-default;
+		.btn-xs;
+		display: block;
+		margin-bottom: 3px;
+
+		> .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 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 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) {
+		content: "\f178";		
+	}
+	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = false) {
+		content: "\f177";		
 	}
 
 .editor-dark {

services/web/public/stylesheets/core/_common-variables.less

@@ -917,6 +917,14 @@
 @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;
+@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
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;

services/web/public/stylesheets/core/ol-variables.less

@@ -171,8 +171,8 @@
 @toolbar-icon-btn-color           : #FFF;
 @toolbar-icon-btn-hover-color     : #FFF;
 @toolbar-icon-btn-hover-shadow    : none;
-@toolbar-icon-btn-hover-boxshadow : 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;
@@ -186,8 +186,13 @@
 @file-tree-multiselect-bg         : @ol-blue;
 @file-tree-multiselect-hover-bg   : @ol-dark-blue;
 @file-tree-droppable-bg-color     : tint(@ol-green, 5%);
-//== Colors
+// 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;
 //## Gray and brand colors for use across Bootstrap.
 @gray-darker:           #252525;
 @gray-dark:             #505050;