Basic widget for toggling TC state.

services/web/app/views/project/editor/review-panel.pug

@@ -46,31 +46,43 @@
 			is-loading="reviewPanel.dropdown.loading"
 			permissions="permissions"
 		)
-		div
-			span On for everyone
-			review-panel-toggle(
-				ng-model="reviewPanel.trackChangesOnForEveryone"
-				on-toggle="toggleTrackChangesForEveryone"
-				disabled="!project.features.trackChanges"
-				on-disabled-click="openTrackChangesUpgradeModal"
-			)
-		div
-			span You {{user.id}}
-			//- Missing on-toggle attribute because we also need to pass user_id to the toggleTrackChangesForUser
-			//- method, and it's not clear how.
-			review-panel-toggle(
-				ng-model="reviewPanel.trackChangesState[user.id]"
-				disabled="!project.features.trackChanges"
-				on-disabled-click="openTrackChangesUpgradeModal"
-			)
-		div(ng-repeat="member in project.members")
-			span {{member.email}} {{member._id}}
-			review-panel-toggle(
-				ng-model="reviewPanel.trackChangesState[member._id]"
-				disabled="!project.features.trackChanges"
-				on-disabled-click="openTrackChangesUpgradeModal"
-			)
-		
+		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")}
+		ul.rp-tc-state(
+			review-panel-collapse-height="reviewPanel.fullTCStateCollapsed"
+		)
+			li.rp-tc-state-item
+				span.rp-tc-state-item-name.rp-tc-state-item-name-everyone Everyone
+				review-panel-toggle(
+					ng-model="reviewPanel.trackChangesOnForEveryone"
+					on-toggle="toggleTrackChangesForEveryone"
+					disabled="!project.features.trackChanges"
+					on-disabled-click="openTrackChangesUpgradeModal"
+				)
+			li.rp-tc-state-item
+				span.rp-tc-state-item-name.rp-tc-state-item-self(
+					style="color: hsl({{ users[user.id].hue }}, 70%, 40%);"
+				) {{ users[user.id].name }}
+				//- {{user.id}}
+				//- Missing on-toggle attribute because we also need to pass user_id to the toggleTrackChangesForUser
+				//- method, and it's not clear how.
+				review-panel-toggle(
+					ng-model="reviewPanel.trackChangesState[user.id]"
+					disabled="!project.features.trackChanges"
+					on-disabled-click="openTrackChangesUpgradeModal"
+				)
+			li.rp-tc-state-item(ng-repeat="member in project.members")
+				span.rp-tc-state-item-name(
+					style="color: hsl({{ users[member._id].hue }}, 70%, 40%);"
+				) {{ users[member._id].name }}
+				//- {{member._id}}
+				review-panel-toggle(
+					ng-model="reviewPanel.trackChangesState[member._id]"
+					disabled="!project.features.trackChanges"
+					on-disabled-click="openTrackChangesUpgradeModal"
+				)
+			
 		//- span.review-panel-toolbar-label(ng-if="permissions.write")
 		//- 	span(ng-click="toggleTrackChanges(true)", ng-if="editor.wantTrackChanges === false") !{translate("track_changes_is_off")}
 		//- 	span(ng-click="toggleTrackChanges(false)", ng-if="editor.wantTrackChanges === true") !{translate("track_changes_is_on")}

services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee

@@ -28,6 +28,7 @@ define [
 			commentThreads: {}
 			resolvedThreadIds: {}
 			rendererData: {}
+			fullTCStateCollapsed: true
 			loadingThreads: false
 			# All selected changes. If a aggregated change (insertion + deletion) is selection, the two ids
 			# will be present. The length of this array will differ from the count below (see explanation).
@@ -602,6 +603,9 @@ define [
 				event_tracking.sendMB "rp-trackchanges-toggle", { state }
 			else
 				$scope.openTrackChangesUpgradeModal()
+
+		$scope.toggleFullTCStateCollapse = () ->
+			reviewPanel.fullTCStateCollapsed = !reviewPanel.fullTCStateCollapsed
 		
 		$scope.toggleTrackChangesForEveryone = (onForEveryone) ->
 			console.log "[toggleTrackChangesForEveryone]", onForEveryone

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

@@ -124,15 +124,13 @@
 .review-panel-toolbar {
 	display: none;
 	.rp-size-expanded & {
-		display: block;
-		// display: flex; TODO
+		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 0 5px;
 	}
 
 	position: relative;
-	// height: @rp-toolbar-height; TODO
 	border-bottom: 1px solid @rp-border-grey;
 	background-color: @rp-bg-dim-blue;
 	text-align: center;
@@ -152,6 +150,38 @@
 	.review-panel-toolbar-spinner {
 		margin-left: 5px;
 	}
+	.rp-tc-state {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		overflow: hidden;
+		list-style: none;
+		padding: 0 5px;
+		margin: 0;
+		border-bottom: 1px solid @rp-border-grey;
+		background-color: @rp-bg-dim-blue;
+		text-align: left;
+	}
+		.rp-tc-state-item {
+			display: flex;
+			align-items: center;
+			border-bottom: 1px solid @rp-border-grey;
+			padding: 3px 0;	
+			&:last-of-type {
+				padding-bottom: 5px;
+			}
+		}
+			.rp-tc-state-item-name {
+				flex-grow: 1;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				font-weight: @rp-semibold-weight;
+			}
+			.rp-tc-state-item-name-everyone {
+				color: @red;
+			}
 
 .rp-entry-list {
 	display: none;