From 0cae61444d614868ac4099c8b80be36ecf14665d Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Wed, 25 Mar 2020 19:47:21 -0700
Subject: [PATCH] New Condition Widget, WIP

- Refine base styling;
- Fix so that edited properties are reactive;
---
 .../components/ConditionWidget.vue            | 23 +++++++++++++++----
 .../components/condition-widget.scss          |  2 ++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/plugins/conditionWidget/components/ConditionWidget.vue b/src/plugins/conditionWidget/components/ConditionWidget.vue
index d882d42776..1377478606 100644
--- a/src/plugins/conditionWidget/components/ConditionWidget.vue
+++ b/src/plugins/conditionWidget/components/ConditionWidget.vue
@@ -1,9 +1,11 @@
 <template>
-<div class="c-condition-widget">
+<a class="c-condition-widget"
+   :href="internalDomainObject.url"
+>
     <div class="c-condition-widget__label">
-        {{ currentDomainObject.label }}
+        {{ internalDomainObject.label }}
     </div>
-</div>
+</a>
 </template>
 
 <script>
@@ -11,7 +13,20 @@ export default {
     inject: ['openmct', 'domainObject'],
     data: function () {
         return {
-            currentDomainObject: this.domainObject
+            internalDomainObject: this.domainObject
+        }
+    },
+    mounted() {
+        this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
+    },
+    beforeDestroy() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+    },
+    methods: {
+        updateInternalDomainObject(domainObject) {
+            this.internalDomainObject = domainObject;
         }
     }
 }
diff --git a/src/plugins/conditionWidget/components/condition-widget.scss b/src/plugins/conditionWidget/components/condition-widget.scss
index 16075ce74d..2bb8aac225 100644
--- a/src/plugins/conditionWidget/components/condition-widget.scss
+++ b/src/plugins/conditionWidget/components/condition-widget.scss
@@ -1,5 +1,7 @@
 .c-condition-widget {
+    $shdwSize: 3px;
     @include userSelectNone();
+    background-color: rgba($colorBodyFg, 0.1); // Give a little presence if the user hasn't defined a fill color
     border-radius: $basicCr;
     border: 1px solid transparent;
     display: inline-block;