From f9ed50bcb491869f20d9d4f920becec245974e05 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 4 Jul 2017 14:05:03 +0100
Subject: [PATCH] Add collapse state indicator.

---
 .../app/views/project/editor/review-panel.pug |  4 ++++
 .../stylesheets/app/editor/review-panel.less  | 22 ++++++++++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug
index 18b5ae7403..f5d2173aaa 100644
--- a/services/web/app/views/project/editor/review-panel.pug
+++ b/services/web/app/views/project/editor/review-panel.pug
@@ -49,6 +49,10 @@
 		span.review-panel-toolbar-label(ng-if="permissions.write")
 			span(ng-click="toggleFullTCStateCollapse();", ng-if="editor.wantTrackChanges === false") !{translate("track_changes_is_off")}
 			span(ng-click="toggleFullTCStateCollapse();", ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")}
+			span.rp-tc-state-collapse(
+				ng-class="{ 'rp-tc-state-collapse-on': reviewPanel.fullTCStateCollapsed }"
+			)
+				i.fa.fa-angle-down
 		ul.rp-tc-state(
 			review-panel-collapse-height="reviewPanel.fullTCStateCollapsed"
 		)
diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less
index 6a3e827599..bb90b743e3 100644
--- a/services/web/public/stylesheets/app/editor/review-panel.less
+++ b/services/web/public/stylesheets/app/editor/review-panel.less
@@ -57,6 +57,15 @@
 	}
 }
 
+.rp-collapse-arrow() {
+	display: inline-block;
+	transform: rotateZ(0deg);
+	transition: transform 0.15s ease;
+	&-on {
+		transform: rotateZ(-90deg);
+	}
+}
+
 .triangle(@_, @width, @height, @color) {
 	position: absolute;
 	border-color: transparent;
@@ -163,6 +172,10 @@
 		background-color: @rp-bg-dim-blue;
 		text-align: left;
 	}
+		.rp-tc-state-collapse {
+			.rp-collapse-arrow;
+			margin-left: 5px;
+		}
 		.rp-tc-state-item {
 			display: flex;
 			align-items: center;
@@ -663,16 +676,9 @@
 		font-size: 0.9em;
 	}
 	.rp-overview-file-header-collapse {
-		display: inline-block;
+		.rp-collapse-arrow;
 		float: left;
-		transform: rotateZ(0deg);
-		transition: transform 0.15s ease
 	}
-	
-	.rp-overview-file-header-collapse-on {
-		transform: rotateZ(-90deg);
-	}
-
 	.rp-overview-file-entries {
 		overflow: hidden;
 	}