feat: move exclude objects list to StatusControls (#935)

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

src/components/widgets/exclude-objects/ExcludeObjectsDialog.vue

@@ -1,19 +1,17 @@
 <template>
   <v-dialog
     :value="value"
-    max-width="500"
-    persistent
+    :max-width="500"
+    scrollable
+    @input="$emit('input', $event)"
   >
     <v-card>
-      <v-card-title class="card-heading py-2 px-5">
-        <v-icon left>
-          $cancelled
-        </v-icon>
-        <span class="focus--text">
-          {{ $t('app.gcode.label.exclude_object') }}
-        </span>
+      <v-card-title class="card-heading py-2">
+        <span class="focus--text">{{ $t('app.gcode.label.exclude_object') }}</span>
       </v-card-title>
 
+      <v-divider />
+
       <v-card-text class="py-3 px-5">
         <v-simple-table>
           <tbody>
@@ -26,10 +24,12 @@
               </td>
               <td class="actions">
                 <app-btn
+                  color=""
                   x-small
                   fab
+                  text
                   :disabled="isPartExcluded(part.name)"
-                  @click="$emit('cancelObject', part.name)"
+                  @click="cancelObject(part.name)"
                 >
                   <v-icon color="error">
                     $cancelled
@@ -40,19 +40,6 @@
           </tbody>
         </v-simple-table>
       </v-card-text>
-
-      <v-divider />
-
-      <v-card-actions class="py-2 px-5">
-        <v-spacer />
-        <app-btn
-          color="primary"
-          text
-          @click="$emit('close')"
-        >
-          {{ $t('app.general.btn.close') }}
-        </app-btn>
-      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
@@ -73,6 +60,19 @@ export default class ExcludeObjectDialog extends Mixins(StateMixin) {
   isPartExcluded (name: string) {
     return this.$store.getters['parts/getIsPartExcluded'](name)
   }
+
+  async cancelObject (id: string) {
+    const res = await this.$confirm(
+      this.$tc('app.general.simple_form.msg.confirm_exclude_object'),
+      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+    )
+
+    if (res) {
+      const reqId = id.toUpperCase().replace(/\s/g, '_')
+
+      this.sendGcode(`EXCLUDE_OBJECT NAME=${reqId}`)
+    }
+  }
 }
 </script>
 

src/components/widgets/gcode-preview/GcodePreviewCard.vue

@@ -29,17 +29,6 @@
         <v-icon>{{ autoZoom ? '$magnifyMinus' : '$magnifyPlus' }}</v-icon>
       </app-btn>
 
-      <app-btn
-        color=""
-        fab
-        x-small
-        text
-        :disabled="!klippyReady || !(printerPrinting || printerPaused) || !parts.length"
-        @click="excludeObjectDialog = true"
-      >
-        <v-icon>$cancelled</v-icon>
-      </app-btn>
-
       <app-btn-collapse-group
         :collapsed="true"
         menu-icon="$cog"
@@ -63,13 +52,6 @@
         @cancel="abortParser"
       />
 
-      <ExcludeObjectsDialog
-        v-if="excludeObjectDialog"
-        :value="excludeObjectDialog"
-        @close="excludeObjectDialog = false"
-        @cancelObject="cancelObject($event)"
-      />
-
       <v-row>
         <v-col
           cols="12"
@@ -171,15 +153,13 @@ import { AppFile } from '@/store/files/types'
 import GcodePreviewParserProgressDialog from '@/components/widgets/gcode-preview/GcodePreviewParserProgressDialog.vue'
 import { MinMax } from '@/store/gcodePreview/types'
 import AppBtnCollapseGroup from '@/components/ui/AppBtnCollapseGroup.vue'
-import ExcludeObjectsDialog from '@/components/widgets/exclude-objects/ExcludeObjectsDialog.vue'
 
 @Component({
   components: {
     AppBtnCollapseGroup,
     GcodePreviewParserProgressDialog,
     GcodePreview,
-    GcodePreviewControls,
-    ExcludeObjectsDialog
+    GcodePreviewControls
   }
 })
 export default class GcodePreviewCard extends Mixins(StateMixin, FilesMixin) {
@@ -194,7 +174,6 @@ export default class GcodePreviewCard extends Mixins(StateMixin, FilesMixin) {
 
   currentLayer = 0
   moveProgress = 0
-  excludeObjectDialog = false
 
   @Watch('layerCount')
   onLayerCountChanged () {
@@ -395,14 +374,14 @@ export default class GcodePreviewCard extends Mixins(StateMixin, FilesMixin) {
   }
 
   async cancelObject (id: string) {
-    const reqId = id.toUpperCase().replace(/\s/g, '_')
-
     const res = await this.$confirm(
       this.$tc('app.general.simple_form.msg.confirm_exclude_object'),
       { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
     )
 
     if (res) {
+      const reqId = id.toUpperCase().replace(/\s/g, '_')
+
       this.sendGcode(`EXCLUDE_OBJECT NAME=${reqId}`)
     }
   }

src/components/widgets/status/PrinterStatusCard.vue

@@ -23,7 +23,7 @@
           {{ $t('app.printer.state.' + printerState) || printerState }}
         </v-tab>
         <v-tab
-          v-if="supportsHistoryComponent"
+          v-if="supportsHistoryComponent && !(printerPrinting || printerPaused)"
           key="reprint"
         >
           {{ $t('app.general.btn.reprint') }}

src/components/widgets/status/StatusControls.vue

@@ -1,6 +1,6 @@
 <template>
-  <app-btn-collapse-group>
-    <div>
+  <div>
+    <app-btn-collapse-group>
       <app-btn
         v-if="printerPrinting || printerPaused"
         :loading="hasWait($waits.onPrintCancel)"
@@ -81,22 +81,53 @@
         </v-icon>
         <span>{{ $t('app.general.btn.reprint') }}</span>
       </app-btn>
-    </div>
-  </app-btn-collapse-group>
+    </app-btn-collapse-group>
+
+    <v-tooltip
+      v-if="printerPrinting || printerPaused"
+      bottom
+    >
+      <template #activator="{ on, attrs }">
+        <app-btn
+          v-bind="attrs"
+          :disabled="!hasParts"
+          color=""
+          fab
+          x-small
+          text
+          class="ml-1"
+          v-on="on"
+          @click="showExcludeObjectDialog = true"
+        >
+          <v-icon>$listStatus</v-icon>
+        </app-btn>
+      </template>
+      <span>{{ $t('app.gcode.label.exclude_object') }}</span>
+    </v-tooltip>
+
+    <ExcludeObjectsDialog
+      v-if="showExcludeObjectDialog"
+      v-model="showExcludeObjectDialog"
+    />
+  </div>
 </template>
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import { SocketActions } from '@/api/socketActions'
 import JobHistoryItemStatus from '@/components/widgets/history/JobHistoryItemStatus.vue'
+import ExcludeObjectsDialog from '@/components/widgets/exclude-objects/ExcludeObjectsDialog.vue'
 
 @Component({
   components: {
-    JobHistoryItemStatus
+    JobHistoryItemStatus,
+    ExcludeObjectsDialog
   }
 })
 export default class StatusControls extends Mixins(StateMixin) {
+  showExcludeObjectDialog = false
+
   get filename () {
     return this.$store.state.printer.printer.print_stats.filename
   }
@@ -105,6 +136,10 @@ export default class StatusControls extends Mixins(StateMixin) {
     return this.$store.getters['server/componentSupport']('history')
   }
 
+  get hasParts () {
+    return Object.keys(this.$store.getters['parts/getParts']).length > 0
+  }
+
   cancelPrint () {
     this.$tc('app.general.simple_form.msg.confirm')
     this.$confirm(

src/globals.ts

@@ -19,7 +19,6 @@ import {
   mdiFileDocumentOutline,
   mdiPause,
   mdiWindowClose,
-  mdiPlayBoxOutline,
   mdiPrinter,
   mdiCamera,
   mdiFan,
@@ -125,7 +124,8 @@ import {
   mdiAxisArrow,
   mdiVectorLine,
   mdiOpenInNew,
-  mdiImageSizeSelectLarge
+  mdiImageSizeSelectLarge,
+  mdiListStatus
 } from '@mdi/js'
 
 /**
@@ -283,7 +283,7 @@ export const Icons = Object.freeze({
   cancel: mdiWindowClose,
   cancelled: mdiCancel,
   play: mdiPlay,
-  resume: mdiPlayBoxOutline,
+  resume: mdiPlay,
   stop: mdiStop,
   reprint: mdiPrinter,
   printer: mdiPrinter,
@@ -330,7 +330,8 @@ export const Icons = Object.freeze({
   absolutePositioning: mdiAxisArrow,
   relativePositioning: mdiVectorLine,
   openInNew: mdiOpenInNew,
-  imageSizeSelectLarge: mdiImageSizeSelectLarge
+  imageSizeSelectLarge: mdiImageSizeSelectLarge,
+  listStatus: mdiListStatus
 })
 
 export const Waits = Object.freeze({