From 3e7027d9caa178876b8b362123677ae1a1a7500b Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 28 Jun 2017 15:31:28 +0100
Subject: [PATCH] Disable individual users TC control when TC is on for
 everyone; add styling for disabled toggles.

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

diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug
index 27e3d9bf1e..a05afd7f8f 100644
--- a/services/web/app/views/project/editor/review-panel.pug
+++ b/services/web/app/views/project/editor/review-panel.pug
@@ -57,28 +57,32 @@
 				review-panel-toggle(
 					ng-model="reviewPanel.trackChangesOnForEveryone"
 					on-toggle="toggleTrackChangesForEveryone(isOn);"
-					disabled="!project.features.trackChanges"
-					on-disabled-click="openTrackChangesUpgradeModal"
 				)
+					//- disabled="!project.features.trackChanges"
+					//- on-disabled-click="openTrackChangesUpgradeModal"
 			li.rp-tc-state-item
 				span.rp-tc-state-item-name.rp-tc-state-item-self(
+					ng-class="{ 'rp-tc-state-item-name-disabled' : reviewPanel.trackChangesOnForEveryone}"
 					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]"
+					ng-model="reviewPanel.trackChangesOnForEveryone || reviewPanel.trackChangesState[user.id]"
 					on-toggle="toggleTrackChangesForUser(isOn, user.id);"
+					disabled="reviewPanel.trackChangesOnForEveryone"
 				)
 			li.rp-tc-state-item(ng-repeat="member in project.members")
 				span.rp-tc-state-item-name(
+					ng-class="{ 'rp-tc-state-item-name-disabled' : reviewPanel.trackChangesOnForEveryone}"
 					style="color: hsl({{ users[member._id].hue }}, 70%, 40%);"
 				) {{ users[member._id].name }}
 				//- {{member._id}}
 				review-panel-toggle(
-					ng-model="reviewPanel.trackChangesState[member._id]"
+					ng-model="reviewPanel.trackChangesOnForEveryone || reviewPanel.trackChangesState[member._id]"
 					on-toggle="toggleTrackChangesForUser(isOn, member._id);"
+					disabled="reviewPanel.trackChangesOnForEveryone"
 				)
 			
 		//- span.review-panel-toolbar-label(ng-if="permissions.write")
diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less
index df1f74471d..6a3e827599 100644
--- a/services/web/public/stylesheets/app/editor/review-panel.less
+++ b/services/web/public/stylesheets/app/editor/review-panel.less
@@ -182,6 +182,9 @@
 			.rp-tc-state-item-name-everyone {
 				color: @red;
 			}
+			.rp-tc-state-item-name-disabled {
+				opacity: .35;
+			}
 
 .rp-entry-list {
 	display: none;
@@ -802,6 +805,11 @@
 				background-color: #FFF;
 			}
 		}
+
+		&:disabled + .rp-toggle-btn {
+			cursor: default;
+			opacity: .35;
+		}
 	}
 
 .ace-editor-wrapper {