feat: adjustable thumbnail size on Job Queue and History (#1668)

pedrolamas · web-flow · commit 0b7cbfd0d029 · 2025-04-09T16:24:55.000+01:00
Signed-off-by: Pedro Lamas &lt;pedrolamas@gmail.com&gt;
diff --git a/src/components/widgets/filesystem/FileSystemBrowser.vue b/src/components/widgets/filesystem/FileSystemBrowser.vue
@@ -179,8 +179,8 @@ export default class FileSystemBrowser extends Mixins(FilesMixin) {
     return this.rootProperties.readonly
   }
 
-  get thumbnailSize () {
-    const thumbnailSize: number = this.$typedState.config.uiSettings.general.thumbnailSize
+  get thumbnailSize (): number {
+    const thumbnailSize: number = this.$typedState.config.uiSettings.thumbnailSizes[this.root] ?? 32
 
     return this.dense ? thumbnailSize / 2 : thumbnailSize
   }
diff --git a/src/components/widgets/filesystem/FileSystemToolbar.vue b/src/components/widgets/filesystem/FileSystemToolbar.vue
@@ -218,15 +218,11 @@ export default class FileSystemToolbar extends Mixins(StatesMixin) {
   }
 
   get thumbnailSize (): number {
-    return this.$typedState.config.uiSettings.general.thumbnailSize
+    return this.$typedState.config.uiSettings.thumbnailSizes[this.root] ?? 32
   }
 
   set thumbnailSize (value: number) {
-    this.$typedDispatch('config/saveByPath', {
-      path: 'uiSettings.general.thumbnailSize',
-      value,
-      server: true
-    })
+    this.$typedDispatch('config/updateThumbnailSizes', { name: this.root, size: value })
   }
 
   handleUpload (files: FileList | File[], print: boolean) {
diff --git a/src/components/widgets/history/JobHistory.vue b/src/components/widgets/history/JobHistory.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="file-system">
-    <v-toolbar
-      dense
-    >
+    <v-toolbar dense>
       <v-spacer />
 
+      <app-thumbnail-size v-model="thumbnailSize" />
+
       <app-column-picker
         v-if="headers"
         key-name="history"
@@ -32,7 +32,6 @@
       :items="history"
       :headers="headers"
       :items-per-page="15"
-      single-expand
       :search="search"
       mobile-breakpoint="0"
       item-key="job_id"
@@ -51,32 +50,38 @@
           :custom-getter="getItemValue"
         >
           <template #[`item.data-table-icons`]>
-            <!-- If the item no longer exists. -->
-            <v-icon
-              v-if="!item.exists"
-              class="mr-2"
-              color="grey"
-            >
-              $fileCancel
-            </v-icon>
-
-            <!-- If the item exists, but has no thumbnail data. -->
-            <v-icon
-              v-else-if="!item.metadata.thumbnails?.length"
-              class="mr-2"
-              color="grey"
-            >
-              $file
-            </v-icon>
-
-            <!-- If the item exists, and we have thumbnail data. -->
-            <img
-              v-else
-              class="mr-2 file-icon-thumb"
-              :src="getThumbUrl(item.metadata, 'gcodes', getFilePaths(item.filename).path, false, item.metadata.modified)"
-              :width="24"
-              @error="handleJobThumbnailError(item)"
+            <v-layout
+              justify-center
+              class="no-pointer-events"
             >
+              <!-- If the item no longer exists. -->
+              <v-icon
+                v-if="!item.exists"
+                color="grey"
+              >
+                $fileCancel
+              </v-icon>
+
+              <!-- If the item exists, but has no thumbnail data. -->
+              <v-icon
+                v-else-if="!item.metadata.thumbnails?.length"
+                color="grey"
+              >
+                $file
+              </v-icon>
+
+              <!-- If the item exists, and we have thumbnail data. -->
+              <img
+                v-else
+                class="file-icon-thumb"
+                :style="{
+                  'max-width': `${thumbnailSize}px`,
+                  'max-height': `${thumbnailSize}px`
+                }"
+                :src="getThumbUrl(item.metadata, 'gcodes', getFilePaths(item.filename).path, thumbnailSize > 16, item.metadata.modified)"
+                @error="handleJobThumbnailError(item)"
+              >
+            </v-layout>
           </template>
 
           <template #[`item.status`]>
@@ -386,6 +391,14 @@ export default class JobHistory extends Mixins(FilesMixin) {
     ]
   }
 
+  get thumbnailSize (): number {
+    return this.$typedState.config.uiSettings.thumbnailSizes.history ?? 32
+  }
+
+  set thumbnailSize (value: number) {
+    this.$typedDispatch('config/updateThumbnailSizes', { name: 'history', size: value })
+  }
+
   get sensors (): MoonrakerSensor[] {
     return this.$typedGetters['sensors/getSensors']
   }
diff --git a/src/components/widgets/job-queue/JobQueueBrowser.vue b/src/components/widgets/job-queue/JobQueueBrowser.vue
@@ -70,8 +70,11 @@
                 <img
                   v-else
                   class="file-icon-thumb"
-                  :src="getThumbUrl(item.file, 'gcodes', getFilePaths(item.filename).path, dense != true, item.file.modified)"
-                  :width="dense ? 16 : 32"
+                  :style="{
+                    'max-width': `${thumbnailSize}px`,
+                    'max-height': `${thumbnailSize}px`
+                  }"
+                  :src="getThumbUrl(item.file, 'gcodes', getFilePaths(item.filename).path, thumbnailSize > 16, item.file.modified)"
                 >
               </v-layout>
             </template>
@@ -118,7 +121,7 @@
               small
               class="ma-1"
             >
-              {{ $t('app.job_queue.label.eta') }}: {{ $filters.formatDateTime(Date.now() + jobTotals.time * 1000) }}
+              {{ $t('app.job_queue.label.eta') }}: {{ $filters.formatAbsoluteDateTime(Date.now() + jobTotals.time * 1000) }}
             </v-chip>
           </div>
         </template>
@@ -208,6 +211,12 @@ export default class JobQueueBrowser extends Mixins(StateMixin, FilesMixin) {
     }, { filamentLength: 0, filamentWeight: 0, time: 0, withoutFile: 0 })
   }
 
+  get thumbnailSize () {
+    const thumbnailSize: number = this.$typedState.config.uiSettings.thumbnailSizes.jobQueue ?? 32
+
+    return this.dense ? thumbnailSize / 2 : thumbnailSize
+  }
+
   getFilePaths (filename: string) {
     return getFilePaths(filename, 'gcodes')
   }
diff --git a/src/components/widgets/job-queue/JobQueueToolbar.vue b/src/components/widgets/job-queue/JobQueueToolbar.vue
@@ -2,6 +2,8 @@
   <v-toolbar dense>
     <v-spacer />
 
+    <app-thumbnail-size v-model="thumbnailSize" />
+
     <app-column-picker
       v-if="headers"
       key-name="job_queue"
@@ -48,5 +50,13 @@ import type { AppDataTableHeader } from '@/types'
 export default class JobQueueToolbar extends Vue {
   @Prop({ type: Array })
   readonly headers?: AppDataTableHeader[]
+
+  get thumbnailSize (): number {
+    return this.$typedState.config.uiSettings.thumbnailSizes.jobQueue ?? 32
+  }
+
+  set thumbnailSize (value: number) {
+    this.$typedDispatch('config/updateThumbnailSizes', { name: 'jobQueue', size: value })
+  }
 }
 </script>
diff --git a/src/store/config/actions.ts b/src/store/config/actions.ts
@@ -192,6 +192,14 @@ export const actions = {
     }
   },
 
+  async updateThumbnailSizes ({ commit, state }, payload: { name: string; size: number }) {
+    commit('setupdateThumbnailSizes', payload)
+
+    if (state.uiSettings.thumbnailSizes[payload.name]) {
+      SocketActions.serverWrite(`uiSettings.thumbnailSizes.${payload.name}`, state.uiSettings.thumbnailSizes[payload.name])
+    }
+  },
+
   async updateTheme ({ state, dispatch }, payload: Partial<ThemeConfig>) {
     const updatedTheme: ThemeConfig = {
       ...state.uiSettings.theme,
diff --git a/src/store/config/mutations.ts b/src/store/config/mutations.ts
@@ -205,5 +205,9 @@ export const mutations = {
 
   setUpdateHeaders (state, payload: { name: string; headers: ConfiguredTableHeader[] }) {
     Vue.set(state.uiSettings.tableHeaders, payload.name, payload.headers)
+  },
+
+  setupdateThumbnailSizes (state, payload: { name: string; size: number }) {
+    Vue.set(state.uiSettings.thumbnailSizes, payload.name, payload.size)
   }
 } satisfies MutationTree<ConfigState>
diff --git a/src/store/config/state.ts b/src/store/config/state.ts
@@ -68,7 +68,6 @@ export const defaultState = (): ConfigState => {
         printProgressCalculation: ['file'],
         printEtaCalculation: ['file'],
         enableDiagnostics: false,
-        thumbnailSize: 32,
         colorPickerValueRange: 'absolute'
       },
       theme: {
@@ -90,6 +89,7 @@ export const defaultState = (): ConfigState => {
         tempPresets: []
       },
       tableHeaders: {},
+      thumbnailSizes: {},
       gcodePreview: {
         extrusionLineWidth: 0.3,
         moveLineWidth: 0.1,
diff --git a/src/store/config/types.ts b/src/store/config/types.ts
@@ -18,6 +18,7 @@ export interface UiSettings {
   editor: EditorConfig;
   dashboard: DashboardConfig;
   tableHeaders: TableHeadersConfig;
+  thumbnailSizes: ThumbnailSizesConfig;
   gcodePreview: GcodePreviewConfig;
   fileSystem: FileSystemConfig;
   toolhead: ToolheadConfig;
@@ -121,7 +122,6 @@ export interface GeneralConfig {
   printProgressCalculation: PrintProgressCalculation[];
   printEtaCalculation: PrintEtaCalculation[];
   enableDiagnostics: boolean;
-  thumbnailSize: number;
   colorPickerValueRange: ColorPickerValueRange;
 }
 
@@ -222,7 +222,10 @@ export interface TemperaturePresetValue {
   active: boolean;
 }
 
-export interface TableHeadersConfig extends Record<string, ConfiguredTableHeader[]> {
+export interface TableHeadersConfig extends Record<string, ConfiguredTableHeader[] | undefined> {
+}
+
+export interface ThumbnailSizesConfig extends Record<string, number | undefined> {
 }
 
 export interface ConfiguredTableHeader {

Original file line number	Diff line number	Diff line change
`@@ -179,8 +179,8 @@ export default class FileSystemBrowser extends Mixins(FilesMixin) {`
`179`	`179`	`return this.rootProperties.readonly`
`180`	`180`	`}`
`181`	`181`
`182`		`- get thumbnailSize () {`
`183`		`- const thumbnailSize: number = this.$typedState.config.uiSettings.general.thumbnailSize`
	`182`	`+ get thumbnailSize (): number {`
	`183`	`+ const thumbnailSize: number = this.$typedState.config.uiSettings.thumbnailSizes[this.root] ?? 32`
`184`	`184`
`185`	`185`	`return this.dense ? thumbnailSize / 2 : thumbnailSize`
`186`	`186`	`}`
Original file line number	Diff line number	Diff line change
`@@ -218,15 +218,11 @@ export default class FileSystemToolbar extends Mixins(StatesMixin) {`
`218`	`218`	`}`
`219`	`219`
`220`	`220`	`get thumbnailSize (): number {`
`221`		`- return this.$typedState.config.uiSettings.general.thumbnailSize`
	`221`	`+ return this.$typedState.config.uiSettings.thumbnailSizes[this.root] ?? 32`
`222`	`222`	`}`
`223`	`223`
`224`	`224`	`set thumbnailSize (value: number) {`
`225`		`- this.$typedDispatch('config/saveByPath', {`
`226`		`- path: 'uiSettings.general.thumbnailSize',`
`227`		`- value,`
`228`		`- server: true`
`229`		`- })`
	`225`	`+ this.$typedDispatch('config/updateThumbnailSizes', { name: this.root, size: value })`
`230`	`226`	`}`
`231`	`227`
`232`	`228`	`handleUpload (files: FileList \| File[], print: boolean) {`
Original file line number	Diff line number	Diff line change
`@@ -205,5 +205,9 @@ export const mutations = {`
`205`	`205`
`206`	`206`	`setUpdateHeaders (state, payload: { name: string; headers: ConfiguredTableHeader[] }) {`
`207`	`207`	`Vue.set(state.uiSettings.tableHeaders, payload.name, payload.headers)`
	`208`	`+ },`
	`209`	`+`
	`210`	`+ setupdateThumbnailSizes (state, payload: { name: string; size: number }) {`
	`211`	`+ Vue.set(state.uiSettings.thumbnailSizes, payload.name, payload.size)`
`208`	`212`	`}`
`209`	`213`	`} satisfies MutationTree<ConfigState>`