refactor: adds pixels value string formatter

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

src/components/widgets/bedmesh/BedMeshCard.vue

@@ -57,7 +57,7 @@
         :options="options"
         :data="series"
         :graphics="graphics"
-        :height="(isMobileViewport) ? '225px' : '525px'"
+        :height="(isMobileViewport) ? 225 : 525"
       />
 
       <span v-else>{{ $t('app.bedmesh.msg.not_loaded') }}</span>

src/components/widgets/bedmesh/BedMeshChart.vue

@@ -1,7 +1,9 @@
 <template>
   <div
     class="chart"
-    :style="{ 'height': height }"
+    :style="{
+      height: $filters.getPixelsString(height)
+    }"
   >
     <e-chart
       ref="chart"
@@ -35,8 +37,8 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
   @Prop({ type: Object, default: () => {} })
   readonly options!: Record<string, unknown>
 
-  @Prop({ type: String, default: '100%' })
-  readonly height!: string
+  @Prop({ type: [String, Number], default: '100%' })
+  readonly height!: string | number
 
   @Ref('chart')
   readonly chart!: ECharts

src/components/widgets/filesystem/FileSystem.vue

@@ -487,7 +487,7 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
         text: '',
         value: 'data-table-icons',
         sortable: false,
-        width: this.dense ? '28px' : '56px'
+        width: this.dense ? 28 : 56
       },
       {
         text: this.$tc('app.general.table.header.name'),

src/components/widgets/history/JobHistory.vue

@@ -369,7 +369,7 @@ export default class JobHistory extends Mixins(FilesMixin) {
         text: '',
         value: 'data-table-icons',
         sortable: false,
-        width: '24px'
+        width: 24
       },
       {
         text: this.$tc('app.general.table.header.name'),

src/components/widgets/job-queue/JobQueue.vue

@@ -134,13 +134,13 @@ export default class JobQueue extends Vue {
         text: '',
         value: 'handle',
         sortable: false,
-        width: '24px'
+        width: 24
       },
       {
         text: '',
         value: 'data-table-icons',
         sortable: false,
-        width: this.dense ? '28px' : '56px'
+        width: this.dense ? 28 : 56
       },
       {
         text: this.$tc('app.general.table.header.name'),

src/components/widgets/spoolman/SpoolmanCard.vue

@@ -7,7 +7,7 @@
   >
     <template #menu>
       <app-btn
-        v-if="!targetableMacros.length"
+        v-if="!klippyReady || !targetableMacros.length"
         small
         class="me-1 my-1"
         :disabled="!isConnected"
@@ -42,6 +42,7 @@
             </v-icon>
           </app-btn>
         </template>
+
         <v-list dense>
           <v-list-item @click="handleSelectSpool">
             <v-list-item-content>
@@ -109,7 +110,7 @@
               <status-label
                 :key="`spoolman-card-${field}`"
                 :label="$t(`app.spoolman.label.${field}`)"
-                :label-width="labelWidth"
+                :label-width="86"
               >
                 <template v-if="field === 'remaining_weight'">
                   <span v-if="remainingFilamentUnit === 'weight'">
@@ -162,21 +163,21 @@
           <v-icon
             v-if="activeSpool"
             :color="getSpoolColor(activeSpool)"
-            size="110px"
+            size="110"
             class="spool-icon"
           >
             $filament
           </v-icon>
           <v-icon
             v-else-if="isConnected"
-            size="55px"
+            size="55"
           >
             $progressQuestion
           </v-icon>
           <v-icon
             v-else
             color="warning"
-            size="55px"
+            size="55"
           >
             $warning
           </v-icon>
@@ -204,8 +205,6 @@ type MacroWithSpoolId = Macro & {
   components: { StatusLabel }
 })
 export default class SpoolmanCard extends Mixins(StateMixin) {
-  labelWidth = '86px'
-
   handleSelectSpool (targetMacro?: Macro) {
     this.$typedCommit('spoolman/setDialogState', {
       show: true,

src/components/widgets/status/ReprintTab.vue

@@ -111,7 +111,7 @@ export default class ReprintTab extends Mixins(StateMixin, FilesMixin) {
 
   get headers () {
     const headers = [
-      { text: '', value: 'data-table-icons', sortable: false, width: '24px' },
+      { text: '', value: 'data-table-icons', sortable: false, width: 24 },
       { text: this.$tc('app.general.table.header.name'), value: 'filename', sortable: false },
       { text: this.$tc('app.general.table.header.status'), value: 'status', sortable: false },
       { text: this.$tc('app.general.table.header.print_duration'), value: 'print_duration', sortable: false }

src/components/widgets/status/StatusLabel.vue

@@ -2,7 +2,10 @@
   <v-layout align-center>
     <span
       class="label body-2 secondary--text"
-      :style="`width: ${labelWidth}; min-width: ${labelWidth};`"
+      :style="{
+        width: $filters.getPixelsString(labelWidth),
+        'min-width': $filters.getPixelsString(labelWidth)
+      }"
       v-html="label"
     />
     <span class="value"><slot /></span>
@@ -22,7 +25,7 @@ export default class AppSwitch extends Mixins(StateMixin) {
   @Prop({ type: String, required: true })
   readonly label!: string
 
-  @Prop({ type: [String, Number], default: '70px' })
+  @Prop({ type: [String, Number], default: 70 })
   readonly labelWidth!: string | number
 }
 </script>

src/components/widgets/thermals/TemperatureCard.vue

@@ -102,7 +102,7 @@
 
       <thermal-chart
         ref="thermalchart"
-        :height="(isMobileViewport) ? '180px' : '260px'"
+        :height="(isMobileViewport) ? 180 : 260"
       />
     </template>
   </collapsable-card>

src/components/widgets/thermals/ThermalChart.vue

@@ -1,7 +1,9 @@
 <template>
   <div
     class="chart"
-    :style="{ 'height': height }"
+    :style="{
+      height: $filters.getPixelsString(height)
+    }"
   >
     <e-chart
       ref="chart"
@@ -26,8 +28,8 @@ import type { ChartData, ChartSelectedLegends } from '@/store/charts/types'
 
 @Component({})
 export default class ThermalChart extends Mixins(BrowserMixin) {
-  @Prop({ type: String, default: '100%' })
-  readonly height!: string
+  @Prop({ type: [String, Number], default: '100%' })
+  readonly height!: string | number
 
   @Ref('chart')
   readonly chart!: ECharts