feat: add a compact console style option

Signed-off-by: Stefan Dej <meteyou@gmail.com>

src/components/console/ConsoleTableEntry.vue

@@ -3,16 +3,30 @@
         font-family: 'Roboto Mono', monospace;
         font-size: .95em;
 
+        &.default {
+            .col {
+                padding-top: 8px !important;
+                padding-bottom: 8px !important;
+            }
+
             &+.consoleTableRow .col {
                 border-top: 1px solid rgba(255, 255, 255, 0.12);
             }
         }
+
+        &.compact {
+            .col {
+                padding-top: 2px !important;
+                padding-bottom: 2px !important;
+            }
+        }
+    }
 </style>
 
 <template>
-    <v-row class="ma-0">
+    <v-row :class="'ma-0 '+entryStyle">
-        <v-col class="col-auto pr-0 py-2">{{ event.formatTime }}</v-col>
+        <v-col class="col-auto pr-0">{{ event.formatTime }}</v-col>
-        <v-col class="py-2" :class="colorConsoleMessage(event)" v-html="event.formatMessage" @click.capture="commandClick"></v-col>
+        <v-col  :class="colorConsoleMessage(event)" v-html="event.formatMessage" @click.capture="commandClick"></v-col>
     </v-row>
 </template>
 
@@ -27,6 +41,10 @@ export default class ConsoleTableEntry extends Vue {
     @Prop({ required: true })
     readonly event!: ServerStateEvent
 
+    get entryStyle() {
+        return this.$store.state.gui.console.entryStyle ?? 'default'
+    }
+
     colorConsoleMessage(item: ServerStateEvent): string {
         if (item.message.startsWith('!! ')) return 'red--text'
 

src/components/panels/MiniconsolePanel.vue

@@ -17,6 +17,7 @@
         :collapsible="true"
         card-class="miniconsole-panel"
     >
+        <div class="d-flex flex-column">
             <v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'">
                 <v-row>
                     <v-col>
@@ -74,6 +75,7 @@
                     </v-col>
                 </v-row>
             </v-card-text>
+        </div>
     </panel>
 </template>
 
@@ -250,5 +252,14 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
             }
         })
     }
+
+    scrollToTop() {
+        this.$nextTick(() => {
+            if (this.$refs.miniConsoleScroll) {
+                const perfectScroll = ((this.$refs.miniConsoleScroll as Vue).$el as HTMLDivElement)
+                perfectScroll.scrollTop = 0
+            }
+        })
+    }
 }
 </script>

src/components/settings/SettingsConsoleTab.vue

@@ -10,6 +10,10 @@
                     <v-select v-model="consoleDirection" :items="availableDirections" hide-details outlined dense></v-select>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
+                <settings-row :title="$t('Settings.ConsoleTab.EntryStyle')">
+                    <v-select v-model="entryStyle" :items="availableEntryStyles" hide-details outlined dense></v-select>
+                </settings-row>
+                <v-divider class="my-2"></v-divider>
                 <settings-row :title="$t('Settings.ConsoleTab.Height')">
                     <v-slider v-model="consoleHeightTmp" @change="updateConsoleHeight" hide-details :min="200" :max="900" :step="10" :label="consoleHeightTmp+'px'" ></v-slider>
                 </settings-row>
@@ -135,6 +139,26 @@ export default class SettingsConsoleTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'console.direction', value: newVal })
     }
 
+    get availableEntryStyles() {
+        return [
+            {
+                text: this.$t('Settings.ConsoleTab.EntryStyleDefault'),
+                value: 'default'
+            }, {
+                text: this.$t('Settings.ConsoleTab.EntryStyleCompact'),
+                value: 'compact'
+            }
+        ]
+    }
+
+    get entryStyle() {
+        return this.$store.state.gui.console.entryStyle ?? 'default'
+    }
+
+    set entryStyle(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.entryStyle', value: newVal })
+    }
+
     get consoleHeight() {
         return this.$store.state.gui.console.height ?? 300
     }

src/locales/en.json

@@ -630,7 +630,10 @@
 			"StoreButton": "Store filter",
 			"UpdateButton": "Update filter",
 			"EditHeadline": "Edit filter",
-			"AddFilter": "add filter"
+			"AddFilter": "add filter",
+			"EntryStyle": "Entry-Design",
+			"EntryStyleDefault": "default",
+			"EntryStyleCompact": "compact"
 		},
 		"PresetsTab": {
 			"PreheatPresets": "Presets",

src/store/gui/index.ts

@@ -121,6 +121,7 @@ export const getDefaultState = (): GuiState => {
         console: {
             hideWaitTemperatures: true,
             direction: 'table',
+            entryStyle: 'default',
             height: 300,
             customFilters: [],
         },