Merge pull request #673 from OpenC3/matrix

Fix matrix layout, default 0px margin
OpenC3 · May 22, 2023 · 7d90f5c · 7d90f5c
2 parents 2ed0df5 + b566193
commit 7d90f5c
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 77 deletions.
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/targets/INST/screens/params.txt b/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/targets/INST/screens/params.txt
@@ -4,14 +4,45 @@ VERTICAL
   TITLE Params
 
   HORIZONTAL
-    VERTICALBOX
-      LABELVALUE <%= target_name %> PARAMS VALUE5
-      LABELVALUE <%= target_name %> PARAMS VALUE4
-      LABELVALUE <%= target_name %> PARAMS VALUE3
-      LABELVALUE <%= target_name %> PARAMS VALUE2
-      LABELVALUE <%= target_name %> PARAMS VALUE1
+    MATRIXBYCOLUMNS 3
+      LABEL VALUE5
+        SETTING WIDTH 100 # Only need width on the first row
+      VALUE <%= target_name %> PARAMS VALUE5
+      LABELLED <%= target_name %> PARAMS VALUE5
+        SETTING LED_COLOR GOOD GREEN
+        SETTING LED_COLOR BAD RED
+
+      LABEL VALUE4
+        SETTING TEXTALIGN CENTER
+      VALUE <%= target_name %> PARAMS VALUE4
+        SETTING TEXTALIGN CENTER
+      LABELLED <%= target_name %> PARAMS VALUE4
+        SETTING LED_COLOR GOOD GREEN
+        SETTING LED_COLOR BAD RED
+
+      LABEL VALUE3
+        SETTING TEXTALIGN RIGHT
+      VALUE <%= target_name %> PARAMS VALUE3
+        SETTING TEXTALIGN RIGHT
+      LABELLED <%= target_name %> PARAMS VALUE3
+        SETTING LED_COLOR GOOD GREEN
+        SETTING LED_COLOR BAD RED
+
+      LABEL VALUE2
+        SETTING TEXTALIGN CENTER
+      VALUE <%= target_name %> PARAMS VALUE2
+        SETTING TEXTALIGN CENTER
+      LABELLED <%= target_name %> PARAMS VALUE2
+        SETTING LED_COLOR GOOD GREEN
+        SETTING LED_COLOR BAD RED
+
+      LABEL VALUE1
+      VALUE <%= target_name %> PARAMS VALUE1
+      LABELLED <%= target_name %> PARAMS VALUE1
+        SETTING LED_COLOR GOOD GREEN
+        SETTING LED_COLOR BAD RED
     END
-    VERTICALBOX
+    VERTICAL
       LED <%= target_name %> PARAMS VALUE5 RAW 25 20 # Ellipse
         SETTING LED_COLOR 0 GREEN
         SETTING LED_COLOR 1 RED
@@ -29,26 +60,10 @@ VERTICAL
         SETTING LED_COLOR GOOD GREEN
         SETTING LED_COLOR BAD RED
     END
-    VERTICALBOX
-      LABELLED <%= target_name %> PARAMS VALUE5
-        SETTING LED_COLOR GOOD GREEN
-        SETTING LED_COLOR BAD RED
-      LABELLED <%= target_name %> PARAMS VALUE4
-        SETTING LED_COLOR GOOD GREEN
-        SETTING LED_COLOR BAD RED
-      LABELLED <%= target_name %> PARAMS VALUE3
-        SETTING LED_COLOR GOOD GREEN
-        SETTING LED_COLOR BAD RED
-      LABELLED <%= target_name %> PARAMS VALUE2
-        SETTING LED_COLOR GOOD GREEN
-        SETTING LED_COLOR BAD RED
-      LABELLED <%= target_name %> PARAMS VALUE1
-        SETTING LED_COLOR GOOD GREEN
-        SETTING LED_COLOR BAD RED
-    END
+    SETTING RAW margin-left 20px
   END
 
-  VERTICALBOX
+  VERTICAL
     LABELVALUE <%= target_name %> PARAMS PACKET_TIMEFORMATTED WITH_UNITS 20
   END
 END
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EditScreenDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EditScreenDialog.vue
@@ -18,7 +18,7 @@
 
 <template>
   <!-- Edit dialog -->
-  <v-dialog v-model="show" width="75vw">
+  <v-dialog persistent v-model="show" width="75vw">
     <v-card>
       <v-system-bar>
         <div class="mx-2">

diff --git a/...smos-init/plugins/packages/openc3-tool-common/src/components/widgets/HorizontalWidget.vue b/...smos-init/plugins/packages/openc3-tool-common/src/components/widgets/HorizontalWidget.vue
@@ -43,16 +43,21 @@ import Layout from './Layout'
 export default {
   mixins: [Layout],
   created: function () {
-    let margin = '1px'
     if (this.parameters[0]) {
-      margin = this.parameters[0]
+      let margin = this.parameters[0]
+      this.widgets.forEach((widget) => {
+        // Don't push MARGIN on a widget that's already defined it
+        const found = widget.settings.find(
+          (setting) =>
+            setting[0] === 'MARGIN' ||
+            (setting[0] === 'RAW' &&
+              setting[1].toUpperCase().includes('MARGIN'))
+        )
+        if (found === undefined) {
+          widget.settings.push(['MARGIN', margin])
+        }
+      })
     }
-    this.widgets.forEach((widget) => {
-      const found = widget.settings.find((element) => element[0] == 'MARGIN')
-      if (found === undefined) {
-        widget.settings.push(['MARGIN', margin])
-      }
-    })
   },
 }
 </script>
diff --git a/...c3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/LabelWidget.vue b/...c3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/LabelWidget.vue
@@ -21,13 +21,13 @@
 -->
 
 <template>
-  <span
+  <div
     data-test="label"
     class="pa-1 mt-1 label"
     :style="[cssProps, computedStyle]"
   >
     {{ labelText }}
-  </span>
+  </div>
 </template>
 
 <script>

diff --git a/...init/plugins/packages/openc3-tool-common/src/components/widgets/MatrixbycolumnsWidget.vue b/...init/plugins/packages/openc3-tool-common/src/components/widgets/MatrixbycolumnsWidget.vue
@@ -21,13 +21,9 @@
 -->
 
 <template>
-  <v-container class="pa-0" :style="computedStyle">
-    <v-row
-      no-gutters
-      v-for="(chunk, rindex) in widgetChunks"
-      :key="'r' + rindex"
-    >
-      <v-col v-for="(widget, cindex) in chunk" :key="'c' + cindex">
+  <table :style="computedStyle">
+    <tr v-for="(chunk, rindex) in widgetChunks" :key="'r' + rindex">
+      <td v-for="(widget, cindex) in chunk" :key="'c' + cindex">
         <component
           v-on="$listeners"
           :is="widget.type"
@@ -39,9 +35,9 @@
           :line="widget.line"
           :lineNumber="widget.lineNumber"
         />
-      </v-col>
-    </v-row>
-  </v-container>
+      </td>
+    </tr>
+  </table>
 </template>
 
 <script>
@@ -58,16 +54,20 @@ export default {
     },
   },
   created: function () {
-    let margin = '1px'
     if (this.parameters[1]) {
-      margin = this.parameters[1]
+      let margin = this.parameters[1]
+      this.widgets.forEach((widget) => {
+        const found = widget.settings.find(
+          (setting) =>
+            setting[0] === 'MARGIN' ||
+            (setting[0] === 'RAW' &&
+              setting[1].toUpperCase().includes('MARGIN'))
+        )
+        if (found === undefined) {
+          widget.settings.push(['MARGIN', margin])
+        }
+      })
     }
-    this.widgets.forEach((widget) => {
-      const found = widget.settings.find((element) => element[0] == 'MARGIN')
-      if (found === undefined) {
-        widget.settings.push(['MARGIN', margin])
-      }
-    })
   },
 }
 </script>
diff --git a/...c3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/ValueWidget.vue b/...c3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/ValueWidget.vue
@@ -117,6 +117,9 @@ export default {
 .value-widget-container :deep(.v-input__slot) {
   background: rgba(var(--aging), var(--aging), var(--aging), 1) !important;
 }
+.value-widget-container :deep(input) {
+  text-align: var(--text-align) !important;
+}
 .value :deep(div) {
   min-height: 24px !important;
   display: flex !important;

diff --git a/...cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/VerticalWidget.vue b/...cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/VerticalWidget.vue
@@ -43,16 +43,21 @@ import Layout from './Layout'
 export default {
   mixins: [Layout],
   created: function () {
-    let margin = '1px'
     if (this.parameters[0]) {
-      margin = this.parameters[0]
+      let margin = this.parameters[0]
+      this.widgets.forEach((widget) => {
+        // Don't push MARGIN on a widget that's already defined it
+        const found = widget.settings.find(
+          (setting) =>
+            setting[0] === 'MARGIN' ||
+            (setting[0] === 'RAW' &&
+              setting[1].toUpperCase().includes('MARGIN'))
+        )
+        if (found === undefined) {
+          widget.settings.push(['MARGIN', margin])
+        }
+      })
     }
-    this.widgets.forEach((widget) => {
-      const found = widget.settings.find((element) => element[0] == 'MARGIN')
-      if (found === undefined) {
-        widget.settings.push(['MARGIN', margin])
-      }
-    })
   },
 }
 </script>
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/Widget.js b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/Widget.js
@@ -86,31 +86,33 @@ export default {
     applySetting(style, setting) {
       switch (setting[0]) {
         case 'TEXTALIGN':
-          style['text-align'] = setting[1].toLowerCase()
+          style['text-align'] = setting[1].toLowerCase() + ' !important'
+          style['--text-align'] = setting[1].toLowerCase()
           break
         case 'PADDING':
           if (!isNaN(Number(setting[1]))) {
             setting[1] += 'px'
           }
-          style['padding'] = setting[1] + '!important'
+          style['padding'] = setting[1] + ' !important'
           break
         case 'MARGIN':
           if (!isNaN(Number(setting[1]))) {
             setting[1] += 'px'
           }
-          style['margin'] = setting[1] + '!important'
+          style['margin'] = setting[1] + ' !important'
           break
         case 'BACKCOLOR':
           style['background-color'] =
-            this.getColor(setting.slice(1)) + '!important'
+            this.getColor(setting.slice(1)) + ' !important'
           break
         case 'TEXTCOLOR':
-          style['color'] = this.getColor(setting.slice(1)) + '!important'
+          style['color'] = this.getColor(setting.slice(1)) + ' !important'
           break
         case 'BORDERCOLOR':
-          style['border-width'] = '1px'
-          style['border-style'] = 'solid'
-          style['border-color'] = this.getColor(setting.slice(1))
+          style['border-width'] = '1px!important'
+          style['border-style'] = 'solid!important'
+          style['border-color'] =
+            this.getColor(setting.slice(1)) + ' !important'
           break
         case 'WIDTH':
           if (!isNaN(Number(setting[1]))) {
@@ -125,7 +127,7 @@ export default {
           style['height'] = setting[1] + ' !important'
           break
         case 'RAW':
-          style[setting[1].toLowerCase()] = setting[2]
+          style[setting[1].toLowerCase()] = setting[2] + ' !important'
           break
       }
     },

diff --git a/openc3/data/config/widgets.yaml b/openc3/data/config/widgets.yaml
@@ -12,7 +12,7 @@ Layout Widgets:
       parameters:
         - name: Margin
           required: false
-          description: Margin between widgets (default = 1px)
+          description: Margin between widgets (default = 0px)
           values: .*
       example: |
         VERTICAL 5px
@@ -30,7 +30,7 @@ Layout Widgets:
           values: .*
         - name: Margin
           required: false
-          description: Margin between widgets (default = 1px)
+          description: Margin between widgets (default = 0px)
           values: .*
       example: |
         VERTICALBOX Info
@@ -43,7 +43,7 @@ Layout Widgets:
       parameters:
         - name: Margin
           required: false
-          description: Margin between widgets (default = 1px)
+          description: Margin between widgets (default = 0px)
           values: .*
       example: |
         HORIZONTAL 100
@@ -60,7 +60,7 @@ Layout Widgets:
           values: .*
         - name: Margin
           required: false
-          description: Margin between widgets (default = 1px)
+          description: Margin between widgets (default = 0px)
           values: .*
       example: |
         HORIZONTALBOX Info 10
@@ -77,7 +77,7 @@ Layout Widgets:
           values: .*
         - name: Margin
           required: false
-          description: Margin between widgets (default = 1px)
+          description: Margin between widgets (default = 0px)
           values: .*
       example: |
         MATRIXBYCOLUMNS 3 10
@@ -98,7 +98,7 @@ Layout Widgets:
           values: .*
         - name: Margin
           required: false
-          description: Margin between widgets (default = 1px)
+          description: Margin between widgets (default = 0px)
           values: .*
       example: |
         SCROLLWINDOW 100 10