From af5eea16d0c9acaea40312380f27281d4f8bf6f0 Mon Sep 17 00:00:00 2001
From: Jason Thomas <jason@openc3.com>
Date: Wed, 18 Dec 2024 15:29:31 -0700
Subject: [PATCH] Add computedStyle to ROLLUP, LED, and SIGNAL widgets

---
 docs.openc3.com/docs/guides/scripting-api.md    |  2 +-
 .../openc3-vue-common/src/widgets/LedWidget.vue | 17 +++++++++++------
 .../src/widgets/RollupWidget.vue                |  2 +-
 .../src/widgets/SignalWidget.vue                |  4 +++-
 .../src/widgets/VerticalWidget.vue              |  2 +-
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/docs.openc3.com/docs/guides/scripting-api.md b/docs.openc3.com/docs/guides/scripting-api.md
index 4720da2d9..890984742 100644
--- a/docs.openc3.com/docs/guides/scripting-api.md
+++ b/docs.openc3.com/docs/guides/scripting-api.md
@@ -3238,7 +3238,7 @@ The local_screen allows you to create a local screen directly from a script whic
 Python / Ruby Syntax:
 
 ```ruby
-local_screen("<Screen Name>" "<Definition>", <X Position (optional)>, <Y Position (optional)>)
+local_screen("<Screen Name>", "<Definition>", <X Position (optional)>, <Y Position (optional)>)
 ```
 
 | Parameter   | Description                                               |
diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/LedWidget.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/LedWidget.vue
index bb7c9b273..7e8972991 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/LedWidget.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/LedWidget.vue
@@ -23,7 +23,11 @@
 <template>
   <v-tooltip location="top">
     <template v-slot:activator="{ props }">
-      <div class="led mt-1" :style="cssProps" v-bind="props"></div>
+      <div
+        class="ledwidget mt-1"
+        :style="[cssProps, computedStyle]"
+        v-bind="props"
+      ></div>
     </template>
     <span>{{ fullName }}</span>
   </v-tooltip>
@@ -59,8 +63,6 @@ export default {
         color = 'openc3-black'
       }
       return {
-        '--height': this.height + 'px',
-        '--width': this.width + 'px',
         '--color': color,
       }
     },
@@ -81,6 +83,11 @@ export default {
           break
       }
     })
+    // Throw width and height into the appliedSettings so they are set
+    // and we don't get the default flex value
+    this.appliedSettings.push(['WIDTH', this.width])
+    this.appliedSettings.push(['HEIGHT', this.height])
+
     if (!this.parameters[3]) {
       this.parameters[3] = 'CONVERTED'
     }
@@ -94,9 +101,7 @@ export default {
 </script>
 
 <style scoped>
-.led {
-  height: var(--height);
-  width: var(--width);
+.ledwidget {
   background-color: var(--color);
   border-radius: 50%;
 }
diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/RollupWidget.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/RollupWidget.vue
index 9c5815f2f..8ae57f7e2 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/RollupWidget.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/RollupWidget.vue
@@ -19,7 +19,7 @@
 <template>
   <rux-monitoring-icon
     class="rux-icon"
-    :style="pointerStyle"
+    :style="[pointerStyle, computedStyle]"
     :icon="icon"
     :status="status"
     :label="label"
diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/SignalWidget.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/SignalWidget.vue
index e5e2304c4..d7a0a4888 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/SignalWidget.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/SignalWidget.vue
@@ -17,7 +17,9 @@
 -->
 
 <template>
-  <v-icon @click="clickHandler"> {{ displayedIcon }} </v-icon>
+  <v-icon @click="clickHandler" :style="computedStyle">
+    {{ displayedIcon }}
+  </v-icon>
 </template>
 
 <script>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/VerticalWidget.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/VerticalWidget.vue
index 1d8e75e46..574fe05b0 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/VerticalWidget.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/VerticalWidget.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div ref="container" class="d-flex flex-column" :style="computedStyle">
+  <div ref="container" :style="computedStyle">
     <component
       v-bind="listeners"
       v-for="(widget, index) in widgets"