From 4c76bf34ab946c9d60a7aaeb5fd1b760ccbb7431 Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Tue, 5 May 2020 09:55:42 -0700
Subject: [PATCH] Highlight currently winning Condition in Condition Set Edit
 and Read-only views (#2936)

* Preview condition styles on selecting that condition or one of it's styles

Co-authored-by: charlesh88 <charlesh88@gmail.com>
---
 src/plugins/condition/StyleRuleManager.js                  | 1 -
 src/plugins/condition/components/Condition.vue             | 6 ++++++
 src/plugins/condition/components/ConditionCollection.vue   | 5 ++++-
 src/plugins/condition/components/conditionals.scss         | 7 +++++++
 .../condition/components/inspector/conditional-styles.scss | 2 +-
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/plugins/condition/StyleRuleManager.js b/src/plugins/condition/StyleRuleManager.js
index f371bf8026..fb585455cb 100644
--- a/src/plugins/condition/StyleRuleManager.js
+++ b/src/plugins/condition/StyleRuleManager.js
@@ -157,7 +157,6 @@ export default class StyleRuleManager extends EventEmitter {
         delete this.stopProvidingTelemetry;
         this.conditionSetIdentifier = undefined;
         this.isEditing = undefined;
-        this.callback = undefined;
     }
 
 }
diff --git a/src/plugins/condition/components/Condition.vue b/src/plugins/condition/components/Condition.vue
index 3d93f5d9f0..6f1deb7d3c 100644
--- a/src/plugins/condition/components/Condition.vue
+++ b/src/plugins/condition/components/Condition.vue
@@ -30,6 +30,7 @@
 >
     <div class="c-condition-h__drop-target"></div>
     <div v-if="isEditing"
+         :class="{'is-current': condition.id === currentConditionId}"
          class="c-condition c-condition--edit"
     >
         <!-- Edit view -->
@@ -167,6 +168,7 @@
     </div>
     <div v-else
          class="c-condition c-condition--browse"
+         :class="{'is-current': condition.id === currentConditionId}"
     >
         <!-- Browse view -->
         <div class="c-condition__header">
@@ -199,6 +201,10 @@ export default {
         ConditionDescription
     },
     props: {
+        currentConditionId: {
+            type: String,
+            default: ''
+        },
         condition: {
             type: Object,
             required: true
diff --git a/src/plugins/condition/components/ConditionCollection.vue b/src/plugins/condition/components/ConditionCollection.vue
index ea5f601e40..4cb042b7b7 100644
--- a/src/plugins/condition/components/ConditionCollection.vue
+++ b/src/plugins/condition/components/ConditionCollection.vue
@@ -58,6 +58,7 @@
             <Condition v-for="(condition, index) in conditionCollection"
                        :key="condition.id"
                        :condition="condition"
+                       :current-condition-id="currentConditionId"
                        :condition-index="index"
                        :telemetry="telemetryObjs"
                        :is-editing="isEditing"
@@ -107,7 +108,8 @@ export default {
             moveIndex: undefined,
             isDragging: false,
             defaultOutput: undefined,
-            dragCounter: 0
+            dragCounter: 0,
+            currentConditionId: ''
         };
     },
     watch: {
@@ -145,6 +147,7 @@ export default {
     },
     methods: {
         handleConditionSetResultUpdated(data) {
+            this.currentConditionId = data.conditionId;
             this.$emit('conditionSetResultUpdated', data)
         },
         observeForChanges() {
diff --git a/src/plugins/condition/components/conditionals.scss b/src/plugins/condition/components/conditionals.scss
index 481cc1f0f7..bd1195ff97 100644
--- a/src/plugins/condition/components/conditionals.scss
+++ b/src/plugins/condition/components/conditionals.scss
@@ -190,6 +190,7 @@
 }
 
 .c-condition {
+    border: 1px solid transparent;
     flex-direction: column;
     min-width: 400px;
 
@@ -234,6 +235,12 @@
     &__summary {
         flex: 1 1 auto;
     }
+
+    &.is-current {
+        $c: $colorBodyFg;
+        border-color: rgba($c, 0.2);
+        background: rgba($c, 0.2);
+    }
 }
 
 /***************************** CONDITION DEFINITION, EDITING */
diff --git a/src/plugins/condition/components/inspector/conditional-styles.scss b/src/plugins/condition/components/inspector/conditional-styles.scss
index bbcf2888c3..eb8c8622a5 100644
--- a/src/plugins/condition/components/inspector/conditional-styles.scss
+++ b/src/plugins/condition/components/inspector/conditional-styles.scss
@@ -65,7 +65,7 @@
 
         &.is-current {
             $c: $colorBodyFg;
-            border-color: rgba($c, 0.5);
+            border-color: rgba($c, 0.2);
             background: rgba($c, 0.2);
         }