Merge pull request #1781 from OpenC3/margins

Add computedStyle to ROLLUP, LED, and SIGNAL widgets
OpenC3 · Dec 19, 2024 · 620b543 · 620b543
2 parents e9ecd6e + af5eea1
commit 620b543
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"