Basic review minimized state.

services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee

@@ -14,6 +14,7 @@ define [
 					entries = []
 					for el in element.find(".rp-entry-wrapper")
 						entries.push {
+							$indicator_el: $(el).find(".rp-entry-indicator")
 							$box_el: $(el).find(".rp-entry")
 							$callout_el: $(el).find(".rp-entry-callout")
 							scope: angular.element(el).scope()
@@ -39,6 +40,7 @@ define [
 					# Put the focused entry exactly where it wants to be
 					focused_entry_top = Math.max(TOOLBAR_HEIGHT, focused_entry.scope.entry.screenPos.y)
 					focused_entry.$box_el.css(top: focused_entry_top)
+					focused_entry.$indicator_el.css(top: focused_entry_top)
 					focused_entry.$callout_el.css(top: focused_entry_top + line_height, height: 0)
 					
 					previousBottom = focused_entry_top + focused_entry.$box_el.height()
@@ -48,6 +50,7 @@ define [
 						top = Math.max(original_top, previousBottom + ENTRY_PADDING)
 						previousBottom = top + height
 						entry.$box_el.css(top: top, bottom: 'auto')
+						entry.$indicator_el.css(top: top, bottom: 'auto')
 						entry.$callout_el.removeClass("rp-entry-callout-inverted")
 						entry.$callout_el.css(top: original_top + line_height, height: top - original_top)
 						sl_console.log "ENTRY", {entry: entry.scope.entry, top}
@@ -62,6 +65,7 @@ define [
 						top = bottom - height
 						previousTop = top
 						entry.$box_el.css(top: top)
+						entry.$indicator_el.css(top: top, bottom: 'auto')
 						entry.$callout_el.addClass("rp-entry-callout-inverted")
 						entry.$callout_el.css(top: top + line_height + 1, height: original_top - top)
 						sl_console.log "ENTRY", {entry: entry.scope.entry, top}

services/web/public/stylesheets/app/editor/review-panel.less

@@ -21,24 +21,24 @@
 @rp-entry-ribbon-width	: 4px;
 @rp-semibold-weight		: 600;
 @review-panel-width		: 230px;
+@review-off-width		: 20px;
 
 @rp-scroller-offset		: 30px;
 
 #review-panel {
 	position: absolute;
-	width: @review-panel-width;
+	width: @review-off-width; 
 	top: 0px;
 	bottom: 0px;
 	right: 0px;
 	background-color: @rp-bg-blue;
 	border-left: solid 1px @rp-border-grey;
-	overflow: hidden;
-	display: none;
 	font-size: @rp-base-font-size;
 	color: @rp-type-blue;
 }
 
 .review-panel-toolbar {
+	display: none;
 	height: 32px;
 	padding: 6px;
 	border-bottom: 1px solid @rp-border-grey;
@@ -58,18 +58,34 @@
 	left: 0;
 	// TODO: Use a more cross-browser method of hiding the scroll bar
 	right: -@rp-scroller-offset; // Hide scroll bar
-	overflow-y: scroll;
 }
 
 .rp-entry-list {
 	position: relative;
-	width: @review-panel-width;;
+	width: @review-off-width;
+}
+
+.rp-entry-indicator {
+	display: block;
+	position: absolute;
+	left: 1px;
+	right: 1px;
+	text-align: center;
+	background-color: @rp-highlight-blue;
+	border-radius: 3px;
+	color: #FFF;
+	cursor: pointer;
+
+	&:hover + .rp-entry {
+		display: block;
+	}
 }
 
 .rp-entry {
+	display: none;
 	position: absolute;
-	left: 5px;
-	right: 5px;
+	left: @review-off-width; 
+	width: @review-panel-width;
 	border-left: solid @rp-entry-ribbon-width transparent;
 	border-radius: 3px;
 	background-color: #FFF;
@@ -106,7 +122,7 @@
 		z-index: 1;
 	}
 }
-	
+
 	.rp-entry-header {
 		display: flex;
 		align-items: center;
@@ -314,17 +330,41 @@
 
 .has-review-panel {
 	#editor {
-		right: @review-panel-width;;
+		right: @review-panel-width;
 		left: 0px;
 		width: auto;
 		.ace-editor-body {
 			overflow: visible;
 			.ace_scrollbar-v {
-				right: -@review-panel-width;;
+				right: -@review-panel-width;
 			}
 		}
 	}
+
+	.review-panel-scroller {
+		overflow-y: scroll;
+	}
+
 	#review-panel {
-		display: block;
+		width: @review-panel-width;
+		overflow: hidden;
 	}
+
+		.review-panel-toolbar {
+			display: block;
+		}
+
+		.rp-entry-list {
+			width: @review-panel-width;
+		}
+
+			.rp-entry {
+				display: block;
+				left: 5px;
+				right: 5px;
+			}
+
+			.rp-entry-indicator {
+				display: none;
+			}
 }