From d0f451df2efd64bf0db868a424ab237898b4f71e Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 15 Nov 2016 12:23:39 +0000
Subject: [PATCH] Improve hover behaviour on review entries.

---
 .../web/public/stylesheets/app/editor.less    |  1 +
 .../stylesheets/app/editor/review-panel.less  | 81 +++++++++++++++----
 2 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index d702106ddd..fd81a94952 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -43,6 +43,7 @@
 
 #editor {
 	.full-size;
+	right: @review-off-width;
 }
 
 .loading-screen {
diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less
index 6b65fe292c..f965786cd4 100644
--- a/services/web/public/stylesheets/app/editor/review-panel.less
+++ b/services/web/public/stylesheets/app/editor/review-panel.less
@@ -19,12 +19,46 @@
 @rp-type-darkgrey		: #3f3f3f;
 
 @rp-entry-ribbon-width	: 4px;
+@rp-entry-arrow-width	: 4px;
 @rp-semibold-weight		: 600;
 @review-panel-width		: 230px;
 @review-off-width		: 20px;
 
 @rp-scroller-offset		: 30px;
 
+
+.triangle(@_, @width, @height, @color) {
+	position: absolute;
+	border-color: transparent;
+	border-style: solid;
+	width: 0;
+	height: 0;
+}
+	.triangle(top, @width, @height, @color) {
+		border-width: 0 @width/2 @height @width/2;
+		border-bottom-color: @color;
+		border-left-color: transparent;
+		border-right-color: transparent;
+	}
+	.triangle(bottom, @width, @height, @color) {
+		border-width: @height @width/2 0 @width/2;
+		border-top-color: @color;
+		border-left-color: transparent;
+		border-right-color: transparent;
+	}
+	.triangle(right, @width, @height, @color) {
+		border-width: @height/2 0 @height/2 @width;
+		border-left-color: @color;
+		border-top-color: transparent;
+		border-bottom-color: transparent;
+	}
+	.triangle(left, @width, @height, @color) {
+		border-width: @height/2 @width @height/2 0;
+		border-right-color: @color;
+		border-top-color: transparent;
+		border-bottom-color: transparent;
+	}
+
 #review-panel {
 	position: absolute;
 	width: @review-off-width; 
@@ -75,8 +109,10 @@
 	border-radius: 3px;
 	color: #FFF;
 	cursor: pointer;
+}
 
-	&:hover + .rp-entry {
+.rp-entry-wrapper {
+	&:hover > .rp-entry {
 		display: block;
 	}
 }
@@ -84,23 +120,31 @@
 .rp-entry {
 	display: none;
 	position: absolute;
-	left: @review-off-width; 
+	left: @review-off-width + @rp-entry-arrow-width;
 	width: @review-panel-width;
 	border-left: solid @rp-entry-ribbon-width transparent;
 	border-radius: 3px;
 	background-color: #FFF;
 	transition: top 0.3s, left 0.1s, right 0.1s;
+	box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2);
+
+	&::before {
+		.triangle(left, @rp-entry-arrow-width, 6px, inherit);
+		top: (@review-off-width / 2) - @rp-entry-arrow-width;
+		left: -(@rp-entry-ribbon-width  + @rp-entry-arrow-width);
+		content: '';
+	}
 
 	&-insert {
-		border-left-color: @rp-green;
+		border-color: @rp-green;
 	}
 
 	&-delete {
-		border-left-color: @rp-red;
+		border-color: @rp-red;
 	}
 
 	&-comment {
-		border-left-color: @rp-yellow;
+		border-color: @rp-yellow;
 	}
 
 	&-focus-position {
@@ -115,12 +159,6 @@
 			border-left-color: @rp-yellow;
 		}
 	}
-	
-	&-focused {
-		left: 0px;
-		right: 10px;
-		z-index: 1;
-	}
 }
 
 	.rp-entry-header {
@@ -285,7 +323,7 @@
 	width: 3px;
 	border-top: 1px solid grey;
 	border-right: 1px dashed grey;
-	&:after {
+	&::after {
 		content: "";
 		position: absolute;
 		width: 3px;
@@ -298,7 +336,7 @@
 	&-inverted {
 		border-top: none;
 		border-bottom: 1px solid grey;
-		&:after {
+		&::after {
 			top: 0px;
 			bottom: -1px;
 			border-top: 1px solid grey;
@@ -308,21 +346,21 @@
 	
 	&-insert {
 		border-color: @rp-green;
-		&:after {
+		&::after {
 			border-color: @rp-green;
 		}
 	}
 	
 	&-delete {
 		border-color: @rp-red;
-		&:after {
+		&::after {
 			border-color: @rp-red;
 		}
 	}
 	
 	&-comment {
 		border-color: @rp-yellow;
-		&:after {
+		&::after {
 			border-color: @rp-yellow;
 		}
 	}
@@ -362,6 +400,17 @@
 				display: block;
 				left: 5px;
 				right: 5px;
+				box-shadow: none;
+
+				&::before {
+					content: none;
+				}
+
+				&-focused {
+					left: 0px;
+					right: 10px;
+					z-index: 1;
+				}
 			}
 
 			.rp-entry-indicator {