feat(statusPanel): add option to disable the thumbnail zoom (#1905)

Co-authored-by: rackrick <[email protected]>
mainsail-crew · Jun 23, 2024 · e2e3fed · e2e3fed
1 parent 9701877
commit e2e3fed
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 44 deletions.
diff --git a/src/components/panels/Status/PrintstatusThumbnail.vue b/src/components/panels/Status/PrintstatusThumbnail.vue
@@ -8,11 +8,11 @@
             class="d-flex align-end statusPanel-big-thumbnail"
             height="200"
             :style="thumbnailStyle"
-            @focus="focusBigThumbnail"
-            @blur="blurBigThumbnail">
+            @focus="focus = true"
+            @blur="focus = false">
             <v-card-title class="white--text py-2 px-2" :style="styleThumbnailOverlay">
                 <v-row>
-                    <v-col style="width: 100px">
+                    <v-col>
                         <span class="subtitle-2 text-truncate px-0 text--disabled d-block">
                             <v-icon small class="mr-2">{{ mdiFileOutline }}</v-icon>
                             {{ current_filename }}
@@ -93,6 +93,9 @@ export default class StatusPanelPrintstatusThumbnail extends Mixins(BaseMixin) {
     mdiFileOutline = mdiFileOutline
     mdiFile = mdiFile
 
+    focus = false
+    thumbnailFactor = 0
+
     declare $refs: {
         bigThumbnail: any
     }
@@ -188,11 +191,23 @@ export default class StatusPanelPrintstatusThumbnail extends Mixins(BaseMixin) {
     }
 
     get thumbnailStyle() {
+        let output: { height: string; backgroundColor?: string } = {
+            height: '200px',
+        }
+
+        if (!this.printstatusThumbnailZoom) {
+            output.height = '100%'
+        } else if (this.focus && this.thumbnailBlurHeight > 0) {
+            output.height = `${this.thumbnailBlurHeight}px`
+        }
+
         if (defaultBigThumbnailBackground.toLowerCase() !== this.bigThumbnailBackground.toLowerCase()) {
-            return { backgroundColor: this.bigThumbnailBackground }
+            output.backgroundColor = this.bigThumbnailBackground
+
+            return output
         }
 
-        return {}
+        return output
     }
 
     get styleThumbnailOverlay() {
@@ -208,27 +223,27 @@ export default class StatusPanelPrintstatusThumbnail extends Mixins(BaseMixin) {
         return style
     }
 
-    focusBigThumbnail() {
-        if (this.$refs.bigThumbnail) {
-            const clientWidth = this.$refs.bigThumbnail.$el.clientWidth
-            const thumbnailWidth = this.thumbnailBigWidth
-            const factor = clientWidth / thumbnailWidth
+    get thumbnailBlurHeight() {
+        if (this.thumbnailFactor === 0) return 0
 
-            this.$refs.bigThumbnail.$el.style.height = (this.thumbnailBigHeight * factor).toFixed() + 'px'
-        }
+        return (this.thumbnailBigHeight * this.thumbnailFactor).toFixed()
     }
 
-    blurBigThumbnail() {
-        if (this.$refs.bigThumbnail) {
-            this.$refs.bigThumbnail.$el.style.height = '200px'
-        }
+    get printstatusThumbnailZoom() {
+        return this.$store.state.gui.uiSettings.printstatusThumbnailZoom ?? true
+    }
+
+    calcThumbnailFactor() {
+        const thumbnailClientWidth = this.$refs.bigThumbnail?.$el.clientWidth ?? 0
+        if (!thumbnailClientWidth || !this.thumbnailBigWidth) this.thumbnailFactor = 0
+
+        return (this.thumbnailFactor = thumbnailClientWidth / this.thumbnailBigWidth)
     }
 
     @Debounce(200)
     handleResize() {
         this.$nextTick(() => {
-            const isFocused = document.activeElement === this.$refs.bigThumbnail?.$el
-            if (isFocused) this.focusBigThumbnail()
+            this.calcThumbnailFactor()
         })
     }
 }
@@ -242,4 +257,9 @@ export default class StatusPanelPrintstatusThumbnail extends Mixins(BaseMixin) {
 .statusPanel-printstatus-thumbnail {
     position: relative;
 }
+
+.statusPanel-thumbnail-overlay {
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(3px);
+}
 </style>
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
@@ -70,32 +70,41 @@
                     :dynamic-slot-width="true">
                     <v-switch v-model="boolBigThumbnail" hide-details class="mt-0" />
                 </settings-row>
-                <v-divider class="my-2" />
-                <settings-row :title="$t('Settings.UiSettingsTab.BigThumbnailBackground')">
-                    <v-btn
-                        v-if="bigThumbnailBackground.toLowerCase() !== defaultBigThumbnailBackground.toLowerCase()"
-                        small
-                        text
-                        class="minwidth-0"
-                        @click="bigThumbnailBackground = defaultBigThumbnailBackground">
-                        <v-icon small>{{ mdiRestart }}</v-icon>
-                    </v-btn>
-                    <v-menu bottom left offset-y :close-on-content-click="false">
-                        <template #activator="{ on, attrs }">
-                            <v-btn
-                                v-bind="attrs"
-                                :color="bigThumbnailBackground"
-                                class="minwidth-0 px-5"
-                                small
-                                v-on="on" />
-                        </template>
-                        <v-color-picker
-                            :value="bigThumbnailBackground"
-                            hide-mode-switch
-                            mode="rgba"
-                            @update:color="updateBigThumbnailBackground" />
-                    </v-menu>
-                </settings-row>
+                <template v-if="boolBigThumbnail">
+                    <v-divider class="my-2" />
+                    <settings-row
+                        :title="$t('Settings.UiSettingsTab.PrintstatusThumbnailZoom')"
+                        :sub-title="$t('Settings.UiSettingsTab.PrintstatusThumbnailZoomDescription')"
+                        :dynamic-slot-width="true">
+                        <v-switch v-model="printstatusThumbnailZoom" hide-details class="mt-0" />
+                    </settings-row>
+                    <v-divider class="my-2" />
+                    <settings-row :title="$t('Settings.UiSettingsTab.BigThumbnailBackground')">
+                        <v-btn
+                            v-if="bigThumbnailBackground.toLowerCase() !== defaultBigThumbnailBackground.toLowerCase()"
+                            small
+                            text
+                            class="minwidth-0"
+                            @click="bigThumbnailBackground = defaultBigThumbnailBackground">
+                            <v-icon small>{{ mdiRestart }}</v-icon>
+                        </v-btn>
+                        <v-menu bottom left offset-y :close-on-content-click="false">
+                            <template #activator="{ on, attrs }">
+                                <v-btn
+                                    v-bind="attrs"
+                                    :color="bigThumbnailBackground"
+                                    class="minwidth-0 px-5"
+                                    small
+                                    v-on="on" />
+                            </template>
+                            <v-color-picker
+                                :value="bigThumbnailBackground"
+                                hide-mode-switch
+                                mode="rgba"
+                                @update:color="updateBigThumbnailBackground" />
+                        </v-menu>
+                    </settings-row>
+                </template>
                 <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINT')"
@@ -529,6 +538,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.boolScrewsTiltAdjustDialog', value: newVal })
     }
 
+    get printstatusThumbnailZoom() {
+        return this.$store.state.gui.uiSettings.printstatusThumbnailZoom ?? true
+    }
+
+    set printstatusThumbnailZoom(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.printstatusThumbnailZoom', value: newVal })
+    }
+
     get tempchartHeight() {
         return this.$store.state.gui.uiSettings.tempchartHeight ?? 250
     }

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1224,6 +1224,8 @@
             "PowerDeviceName": "Printer power device",
             "PowerDeviceNameDescription": "Select which Moonraker power device should be used to power on the printer.",
             "Primary": "Primary",
+            "PrintstatusThumbnailZoom": "Large thumbnail zoom",
+            "PrintstatusThumbnailZoomDescription": "This will deactivate the zoom effect of the thumbnail in the status panel.",
             "ProgressAsFavicon": "Show progress as favicon",
             "ProgressAsFaviconDescription": "Change the Mainsail logo favicon to a progress circle.",
             "ScrewsTiltAdjustDialog": "Screws Tilt Adjust Dialog",

diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
@@ -174,6 +174,7 @@ export const getDefaultState = (): GuiState => {
             boolScrewsTiltAdjustDialog: true,
             tempchartHeight: 250,
             hideUpdateWarnings: false,
+            printstatusThumbnailZoom: true,
         },
         view: {
             blockFileUpload: false,

diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
@@ -122,6 +122,7 @@ export interface GuiState {
         boolScrewsTiltAdjustDialog: boolean
         tempchartHeight: number
         hideUpdateWarnings: boolean
+        printstatusThumbnailZoom: boolean
     }
     view: {
         blockFileUpload: boolean