diff --git a/src/components/panels/Status/PrintstatusThumbnail.vue b/src/components/panels/Status/PrintstatusThumbnail.vue index 59495795e..11207d17b 100644 --- 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"> - + {{ mdiFileOutline }} {{ 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); +} diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue index 5c84b5d8a..cef4286d9 100644 --- a/src/components/settings/SettingsUiSettingsTab.vue +++ b/src/components/settings/SettingsUiSettingsTab.vue @@ -70,32 +70,41 @@ :dynamic-slot-width="true"> - - - - {{ mdiRestart }} - - - - - - + { 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 index dffa3a873..d54ab0203 100644 --- 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