From 5e0198e259608934c26b12c45bade5851d9880af Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 28 Oct 2021 00:07:54 +0200
Subject: [PATCH] feat: add a compact console style option

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/console/ConsoleTableEntry.vue  |  28 +++-
 src/components/panels/MiniconsolePanel.vue    | 125 ++++++++++--------
 .../settings/SettingsConsoleTab.vue           |  24 ++++
 src/locales/en.json                           |   5 +-
 src/store/gui/index.ts                        |   1 +
 5 files changed, 120 insertions(+), 63 deletions(-)

diff --git a/src/components/console/ConsoleTableEntry.vue b/src/components/console/ConsoleTableEntry.vue
index c1904cfd..10bb0acd 100644
--- a/src/components/console/ConsoleTableEntry.vue
+++ b/src/components/console/ConsoleTableEntry.vue
@@ -3,16 +3,30 @@
         font-family: 'Roboto Mono', monospace;
         font-size: .95em;
 
-        &+.consoleTableRow .col {
-            border-top: 1px solid rgba(255, 255, 255, 0.12);
+        &.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-col class="col-auto pr-0 py-2">{{ event.formatTime }}</v-col>
-        <v-col class="py-2" :class="colorConsoleMessage(event)" v-html="event.formatMessage" @click.capture="commandClick"></v-col>
+    <v-row :class="'ma-0 '+entryStyle">
+        <v-col class="col-auto pr-0">{{ event.formatTime }}</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'
 
diff --git a/src/components/panels/MiniconsolePanel.vue b/src/components/panels/MiniconsolePanel.vue
index 182b881a..f296bd29 100644
--- a/src/components/panels/MiniconsolePanel.vue
+++ b/src/components/panels/MiniconsolePanel.vue
@@ -17,63 +17,65 @@
         :collapsible="true"
         card-class="miniconsole-panel"
     >
-        <v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'">
-            <v-row>
-                <v-col>
-                    <v-textarea
-                        v-model="gcode"
-                        :items="items"
-                        :label="$t('Panels.MiniconsolePanel.SendCode')"
-                        solo
-                        class="gcode-command-field"
-                        ref="gcodeCommandField"
-                        autocomplete="off"
-                        no-resize
-                        auto-grow
-                        :rows="rows"
-                        @keydown.enter.prevent.stop="doSend"
-                        @keyup.up="onKeyUp"
-                        @keyup.down="onKeyDown"
-                        @keydown.tab="getAutocomplete"
-                        hide-details
-                        outlined
-                        dense
-                        append-icon="mdi-send"
-                        @click:append="doSend"
-                    ></v-textarea>
-                </v-col>
-                <v-col class="col-auto">
-                    <command-help-modal @onCommand="gcode = $event" ></command-help-modal>
-                    <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')">
-                        <template v-slot:activator="{ on, attrs }">
-                            <v-btn class="px-2 minwidth-0" color="grey darken-3 ml-3" v-bind="attrs" v-on="on"><v-icon>mdi-filter</v-icon></v-btn>
-                        </template>
-                        <v-list>
-                            <v-list-item class="minHeight36">
-                                <v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Panels.MiniconsolePanel.HideTemperatures')"></v-checkbox>
-                            </v-list-item>
-                            <v-list-item class="minHeight36" v-for="(filter, index) in customFilters" v-bind:key="index">
-                                <v-checkbox class="mt-0" v-model="filter.bool" @change="toggleFilter(filter)" hide-details :label="filter.name"></v-checkbox>
-                            </v-list-item>
-                        </v-list>
-                    </v-menu>
-                </v-col>
-            </v-row>
-        </v-card-text>
-        <v-card-text :class="(consoleDirection === 'table' ? 'order-2' : 'order-1') + ' pa-0'">
-            <v-row>
-                <v-col>
-                    <perfect-scrollbar ref="miniConsoleScroll" :style="'height: '+consoleHeight+'px;'">
-                        <console-table ref="console"
-                                       :events="events"
-                                       :is-mini="true"
-                                       @command-click="commandClick"
-                        />
-                        <v-divider></v-divider>
-                    </perfect-scrollbar>
-                </v-col>
-            </v-row>
-        </v-card-text>
+        <div class="d-flex flex-column">
+            <v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'">
+                <v-row>
+                    <v-col>
+                        <v-textarea
+                            v-model="gcode"
+                            :items="items"
+                            :label="$t('Panels.MiniconsolePanel.SendCode')"
+                            solo
+                            class="gcode-command-field"
+                            ref="gcodeCommandField"
+                            autocomplete="off"
+                            no-resize
+                            auto-grow
+                            :rows="rows"
+                            @keydown.enter.prevent.stop="doSend"
+                            @keyup.up="onKeyUp"
+                            @keyup.down="onKeyDown"
+                            @keydown.tab="getAutocomplete"
+                            hide-details
+                            outlined
+                            dense
+                            append-icon="mdi-send"
+                            @click:append="doSend"
+                        ></v-textarea>
+                    </v-col>
+                    <v-col class="col-auto">
+                        <command-help-modal @onCommand="gcode = $event" ></command-help-modal>
+                        <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.MiniconsolePanel.SetupConsole')">
+                            <template v-slot:activator="{ on, attrs }">
+                                <v-btn class="px-2 minwidth-0" color="grey darken-3 ml-3" v-bind="attrs" v-on="on"><v-icon>mdi-filter</v-icon></v-btn>
+                            </template>
+                            <v-list>
+                                <v-list-item class="minHeight36">
+                                    <v-checkbox class="mt-0" v-model="hideWaitTemperatures" hide-details :label="$t('Panels.MiniconsolePanel.HideTemperatures')"></v-checkbox>
+                                </v-list-item>
+                                <v-list-item class="minHeight36" v-for="(filter, index) in customFilters" v-bind:key="index">
+                                    <v-checkbox class="mt-0" v-model="filter.bool" @change="toggleFilter(filter)" hide-details :label="filter.name"></v-checkbox>
+                                </v-list-item>
+                            </v-list>
+                        </v-menu>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-card-text :class="(consoleDirection === 'table' ? 'order-2' : 'order-1') + ' pa-0'">
+                <v-row>
+                    <v-col>
+                        <perfect-scrollbar ref="miniConsoleScroll" :style="'height: '+consoleHeight+'px;'">
+                            <console-table ref="console"
+                                           :events="events"
+                                           :is-mini="true"
+                                           @command-click="commandClick"
+                            />
+                            <v-divider></v-divider>
+                        </perfect-scrollbar>
+                    </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>
diff --git a/src/components/settings/SettingsConsoleTab.vue b/src/components/settings/SettingsConsoleTab.vue
index 5a5c3610..b38519c2 100644
--- a/src/components/settings/SettingsConsoleTab.vue
+++ b/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
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index 34e71557..a68837af 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 1cc5600f..fb43d37f 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -121,6 +121,7 @@ export const getDefaultState = (): GuiState => {
         console: {
             hideWaitTemperatures: true,
             direction: 'table',
+            entryStyle: 'default',
             height: 300,
             customFilters: [],
         },