Merge pull request #1166 from FlowFuse/1095-compact-view

Theme: Add Row Height option (including "Compact")

docs/nodes/config/ui-theme.md

@@ -7,6 +7,7 @@ colors:
     Groups - Background: The background color of any groups rendered on the page
     Groups - Outline: The color of the border of any groups rendered on the page
 sizes:
+    Row Height: How tall a single row (unit of height) should render in the Dashboard. Options here are Default (48px), Comfortable (36px) and Compact (32px).
     Page Padding: The spacing that surrounds all of the groups on a page. Applicable for Grid & Fixed layouts and Notebook layouts where the screen width is narrower than 1024px.</br></br>You can define the padding for each side of the page separately by using <a href="https://www.w3schools.com/css/css_padding.asp#:~:text=Padding%20%2D%20Shorthand%20Property" target="_blank">CSS Shorthand notation</a>
     Group Gap: "The gap between each group in a layout. Default: 12px"
     Group Border Radius: "The border radius of the surrounding of each group on a page. Default: 4px"
@@ -28,7 +29,9 @@ Each page can be assigned a theme, which will be used to render the page. The th
 
 <PropsTable property="sizes" :hide-dynamic="true"/>
 
-## Example
+## Examples
+
+### Modified Colours & Spacing
 
 Example Config of `ui-theme` in Node-RED:
 
@@ -38,4 +41,11 @@ Resulting Dashboard with the theme applied:
 
 ![Resulting Dashboard with applied theme](/images/theme-example.png "Resulting Dashboard with applied theme"){data-zoomable}
 
-Colors here were chosen to make it easier to differentiate between the different groups rather than it being aesthetically pleasing.
+Colors here were chosen to make it easier to differentiate between the different groups rather than it being aesthetically pleasing.
+
+### Row Height
+
+![Default (Left), Comfortable (Middle), Compact (Right) row height comparisons for a UI Table element](/images/node-examples/ui-theme-row-height.png "Default (Left), Comfortable (Middle), Compact (Right) row height comparisons for a UI Table element"){data-zoomable}
+_Default (Left), Comfortable (Middle), Compact (Right) row height comparisons for a UI Table element_
+
+The Row Height controls how tall a single row (unit of height) should render in the Dashboard. Options here are Default (48px), Comfortable (36px) and Compact (32px).

nodes/config/locales/en-US/ui_theme.json

@@ -14,7 +14,11 @@
             "pagePadding": "Page Padding",
             "groupGap": "Group Gap",
             "groupBorderRadius": "Group Border Radius",
-            "widgetGap": "Widget Gap"
+            "widgetGap": "Widget Gap",
+            "default": "Default (48px)",
+            "comfortable": "Comfortable (38px)",
+            "compact": "Compact (32px)",
+            "density": "Row Height"
         }
     }
 }

nodes/config/ui_theme.html

@@ -19,6 +19,7 @@
             // sizes
             sizes: {
                 value: {
+                    density: 'default',
                     pagePadding: '12px',
                     groupGap: '12px',
                     groupBorderRadius: '4px',
@@ -47,6 +48,9 @@
                 this.sizes = {}
             }
             // set default values
+            if (!hasProperty(this.sizes, 'density')) {
+                this.sizes.density = 'default'
+            }
             if (!hasProperty(this.sizes, 'pagePadding')) {
                 this.sizes.pagePadding = '12px'
             }
@@ -164,6 +168,14 @@ <h4 style="margin-bottom: 0;"><i class="fa fa-table"></i> <span data-i18n="ui-th
         </div>
     </div>
     <h3 style="margin: 12px 0 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.sizings"></h3>
+    <div class="form-row">
+        <label for="node-config-input-density" data-i18n="ui-theme.label.density"></label>
+        <select type="text" id="node-config-input-density">
+            <option value="default" data-i18n="ui-theme.label.default"></option>
+            <option value="comfortable" data-i18n="ui-theme.label.comfortable"></option>
+            <option value="compact" data-i18n="ui-theme.label.compact"></option>
+        </select>
+    </div>
     <div class="form-row">
         <label for="node-config-input-pagePadding" data-i18n="ui-theme.label.pagePadding"></label>
         <input type="text" id="node-config-input-pagePadding">

ui/src/layouts/Baseline.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-app class="nrdb-app nrdb-app--baseline" :style="customThemeDefinitions">
+    <v-app class="nrdb-app nrdb-app--baseline" :class="`nrdb-view-density--${density}`" :style="customThemeDefinitions">
         <v-app-bar v-if="appBarStyle !== 'hidden'" :style="{'position': navPosition}" :elevation="1">
             <template v-if="!['none', 'fixed', 'hidden'].includes(navigationStyle)" #prepend>
                 <v-app-bar-nav-icon @click="handleNavigationClick" />
@@ -121,7 +121,6 @@ export default {
     computed: {
         ...mapState('ui', ['dashboards', 'pages', 'themes', 'pageData', 'widgets']),
         ...mapGetters('ui', ['siteTemplates', 'pageTemplates']),
-
         theme: function () {
             const page = this.pages[this.$route.meta.id]
             if (page) {
@@ -164,6 +163,9 @@ export default {
         },
         navPosition: function () {
             return this.appBarStyle === 'fixed' ? 'fixed' : 'absolute'
+        },
+        density: function () {
+            return this.theme?.sizes.density || 'default'
         }
     },
     watch: {
@@ -225,6 +227,8 @@ export default {
                 sizes['--group-gap'] = this.theme.sizes.groupGap
                 sizes['--group-border-radius'] = this.theme.sizes.groupBorderRadius
                 sizes['--widget-gap'] = this.theme.sizes.widgetGap
+
+                this.$vuetify.defaults.global.density = this.density
             }
         },
         getPageLabel (page) {

ui/src/layouts/Flex.vue

@@ -15,7 +15,7 @@
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" :row-height="rowHeight" />
+                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" />
                     </template>
                 </v-card>
             </div>
@@ -47,8 +47,9 @@ export default {
         WidgetGroup
     },
     data () {
+        const rowHeight = getComputedStyle(document.body).getPropertyValue('--widget-row-height')
         return {
-            rowHeight: 45
+            rowHeight
         }
     },
     computed: {

ui/src/layouts/Grid.vue

@@ -15,7 +15,7 @@
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" :row-height="rowHeight" />
+                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" />
                     </template>
                 </v-card>
             </div>
@@ -116,7 +116,6 @@ export default {
 .nrdb-layout--grid {
     --layout-card-width: 320px;
     --layout-gap: 12px;
-    --widget-row-height: 48px;
 }
 .nrdb-layout--grid {
     --layout-columns: 12;

ui/src/layouts/Group.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="nrdb-layout-group--grid" :style="`grid-template-columns: repeat(min(${ columns }, var(--layout-columns)), 1fr); grid-template-rows: repeat(${group.height}, minmax(${rowHeight}px, auto)); `">
+    <div class="nrdb-layout-group--grid" :style="`grid-template-columns: repeat(min(${ columns }, var(--layout-columns)), 1fr); grid-template-rows: repeat(${group.height}, minmax(var(--widget-row-height), auto)); `">
         <div
             v-for="w in widgets"
             :id="'nrdb-ui-widget-' + w.id"
             :key="w.id"
             class="nrdb-ui-widget"
             :class="getWidgetClass(w)"
             style="display: grid"
-            :style="`grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(${w.props.height}, minmax(${rowHeight}px, auto)); grid-row-end: span ${w.props.height}; grid-column-end: span min(${ w.props.width || columns }, var(--layout-columns))`"
+            :style="`grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(${w.props.height}, minmax(var(--widget-row-height), auto)); grid-row-end: span ${w.props.height}; grid-column-end: span min(${ w.props.width || columns }, var(--layout-columns))`"
         >
             <component :is="w.component" :id="w.id" :props="w.props" :state="w.state" :style="`grid-row-end: span ${w.props.height}`" />
         </div>
@@ -26,10 +26,6 @@ export default {
         widgets: {
             type: Array,
             required: true
-        },
-        rowHeight: {
-            type: Number,
-            default: 48
         }
     },
     computed: {

ui/src/layouts/Notebook.vue

@@ -14,7 +14,7 @@
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" :row-height="rowHeight" />
+                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" />
                     </template>
                 </v-card>
             </div>
@@ -46,8 +46,9 @@ export default {
         WidgetGroup
     },
     data () {
+        const rowHeight = getComputedStyle(document.body).getPropertyValue('--widget-row-height')
         return {
-            rowHeight: 45
+            rowHeight
         }
     },
     computed: {

ui/src/layouts/Tabs.vue

@@ -26,7 +26,7 @@
                     >
                         <v-card variant="outlined" class="bg-group-background">
                             <template #text>
-                                <widget-group :group="t" :widgets="widgetsByGroup(t.id)" :row-height="rowHeight" />
+                                <widget-group :group="t" :widgets="widgetsByGroup(t.id)" />
                             </template>
                         </v-card>
                     </div>
@@ -52,7 +52,6 @@ export default {
     },
     data () {
         return {
-            rowHeight: 48,
             tab: 0
         }
     },

ui/src/layouts/grid-groups.css

@@ -1,8 +1,3 @@
-/** https://github.com/vuejs/vue-loader/releases/tag/v12.2.0 */
-:deep(.v-field__input) {
-    --v-field-input-min-height: calc(var(--widget-row-height) - 4px);
-}
-
 :deep(.v-field--variant-outlined) {
     --v-field-input-padding-top: 12px;
     --v-field-input-padding-bottom: 12px;

ui/src/stylesheets/common.css

@@ -12,8 +12,16 @@
     --nrdb-header-text-color: white;
     /* main */
     --nrdb-main-padding: 12px;
-    /* widget sizing */
-    --widget-row-height: 42px;
+    /* widget sizing - default */
+    --widget-row-height: 48px;
+}
+
+.nrdb-view-density--compact {
+    --widget-row-height: 32px;
+}
+
+.nrdb-view-density--comfortable {
+    --widget-row-height: 38px;
 }
 
 body {
@@ -166,10 +174,10 @@ main {
     min-height: 0;
 }
 .nrdb-ui-form-actions {
-    margin-top: 1rem; 
+    margin-top: 0.5rem; 
 }
 .nrdb-ui-form-actions button {
-    margin-right: 1rem; 
+    margin-right: 0.5rem; 
 }
 .nrdb-ui-form-row .v-text-field .v-input__details {
     padding-inline-start: 0;
@@ -455,3 +463,19 @@ NB! supresses the gridarea for messages, but those are not in use*/
     background: rgb(var(--v-theme-navigation-background));
     color: rgba(var(--v-theme-on-navigation-background), var(--v-high-emphasis-opacity));
 }
+
+/* Text Field Overrides */
+/* Ensures we have consistent height across all widgets */
+.v-input .v-field__input {
+    min-height: var(--widget-row-height);
+    padding-top: initial;
+    padding-bottom: initial;
+}
+
+/* Button Overrides */
+/* Vuetify compact buttons are _very_ small, so we need to override the height */
+.v-btn.v-btn--density-default,
+.v-btn.v-btn--density-compact, 
+.v-btn.v-btn--density-comfortable {
+    height: var(--widget-row-height);
+}