From 89d9a4365270d4658ad7265b12d8e23af13828aa Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Fri, 23 Mar 2018 10:16:03 +0000
Subject: [PATCH] Make resizer bar larger; add a chevron inside the toggler;
 make the toggler itself darker.

---
 .../web/public/stylesheets/app/editor.less    | 82 +++++++++++++------
 .../public/stylesheets/core/ol-variables.less |  2 +-
 2 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index bf59fd3e8c..569ce2fe7b 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -107,7 +107,7 @@
 			height: 0;
 			background: @editor-loading-logo-background-url no-repeat bottom / 100%;
 
-    		&::after {
+			&::after {
 				content: '';
 				position: absolute;
 				height: inherit;
@@ -116,7 +116,7 @@
 				left: 0;
 				background: @editor-loading-logo-foreground-url no-repeat bottom / 100%;
 				transition: height .5s;
-    		}
+			}
 		}
 		.loading-screen-label {
 			margin: 0;
@@ -310,11 +310,34 @@
 	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 + 2px),
-		transparent (@ui-resizer-extra-hit-area + 2px),
+		transparent @ui-resizer-extra-hit-area - 3px,
+		@editor-resizer-bg-color @ui-resizer-extra-hit-area - 3px,
+		@editor-resizer-bg-color @ui-resizer-extra-hit-area + 4px,
+		transparent @ui-resizer-extra-hit-area + 4px,
 		transparent);
+
+	&.ui-layout-resizer-closed {
+		background-image: linear-gradient(90deg, 
+			@editor-resizer-bg-color,
+			@editor-resizer-bg-color);
+	}
+
+	&::before,
+	&::after {
+		content: '\2847';
+		display: block;
+		position: absolute;
+		text-align: center;
+		left: 1px;
+		-webkit-font-smoothing: antialiased;
+		width: 100%;
+		font-size: 24px;
+		top: 25%;
+		color: @ol-blue-gray-2;
+	}
+	&::after {
+		top: 75%;
+	}
 }
 
 .ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
@@ -340,16 +363,17 @@
 	position: absolute;
 	display: flex;
 	align-items: center;
-	width: 9px;	
+	justify-content: center;
+	width: 7px;	
 	height: 50px;
 	margin-top: -25px;
 	top: 50%;
 	z-index: 6;
 	background-color: @editor-toggler-bg-color;
-	border-radius: 4px;
-
+	
 	&:hover,
 	&:focus {
+		outline: none;
 		text-decoration: none;
 	}
 	// Increase hit area
@@ -363,39 +387,49 @@
 		left: -3px;
 	}
 
+	&::after {
+    	font-family: FontAwesome;
+    	-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+    	font-size: 75%;
+    	font-weight: bold;
+		color: #FFF;
+		user-select: none;
+		pointer-events: none;
+	}
+
 	&:hover {
 		background-color: @editor-toggler-hover-bg-color;
 	}
 }
 	.custom-toggler-east {
-		margin-right: -4px;
+		margin-right: -3px;
+		&::after {
+			content: '\f105';
+		}
+
 	}
 	.custom-toggler-west {
-		margin-left: -4px;
+		margin-left: -3px;
+		&::after {
+			content: '\f104';
+		}
+
 	}
 
 	.custom-toggler-closed {
-		width: 12px;
 		&.custom-toggler-east {
-			margin-right: -6px;
+			margin-right: 0;
 			&::after {
-				margin-left: -2px;
+				content: '\f104';
 			}
 		}
 		&.custom-toggler-west {
-			margin-left: -6px;
+			margin-left: 0;
 			&::after {
-				margin-left: 3px;
+				content: '\f105';
 			}
 		}
-		&::after {
-			content: "\22EE"; // Vertical ellipsis
-			color: #FFF;
-			font-weight: 700;
-			font-size: @font-size-h2;
-			user-select: none;
-			pointer-events: none;
-		}
 	}
 
 .ui-layout-resizer-dragging {
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 6ffceaf176..9699f25f41 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -229,7 +229,7 @@
 // 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-bg-color          : darken(@ol-blue-gray-2, 15%);
 @editor-toggler-hover-bg-color    : @ol-green;
 @synctex-controls-z-index         : 6;
 @synctex-controls-padding         : 0;