fix: moves estop to floating button in mobile view

Signed-off-by: Craig Bassett <[email protected]>
fluidd-core · May 1, 2021 · 0d0cb68 · 0d0cb68
1 parent 28364df
commit 0d0cb68
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 46 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -23,6 +23,18 @@
       :timeout="flashMessage.timeout"
     />
 
+    <v-btn
+      v-if="isMobile"
+      x-small
+      fab
+      fixed
+      bottom left
+      color="error"
+      @click="emergencyStop()"
+    >
+      <v-icon>$estop</v-icon>
+    </v-btn>
+
     <v-main>
       <router-view v-if="socketConnected" />
       <socket-disconnected v-if="!socketConnected"></socket-disconnected>
@@ -38,6 +50,7 @@ import { Component, Mixins } from 'vue-property-decorator'
 import { EventBus, FlashMessage } from '@/eventBus'
 import StateMixin from './mixins/state'
 import { Waits } from './globals'
+import { SocketActions } from './socketActions'
 
 @Component({})
 export default class App extends Mixins(StateMixin) {
@@ -62,6 +75,10 @@ export default class App extends Mixins(StateMixin) {
     return progress
   }
 
+  get isMobile () {
+    return this.$vuetify.breakpoint.mobile
+  }
+
   get pageTitle () {
     const instanceName = this.$store.state.config.uiSettings.general.instanceName || ''
     const pageName = this.$route.name
@@ -136,6 +153,10 @@ export default class App extends Mixins(StateMixin) {
     })
   }
 
+  emergencyStop () {
+    SocketActions.printerEmergencyStop()
+  }
+
   handleToolsDrawerChange () {
     this.toolsdrawer = !this.toolsdrawer
   }

diff --git a/src/components/common/SystemPrinters.vue b/src/components/common/SystemPrinters.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import consola from 'consola'
-import { InitConfig, InstanceConfig, ApiConfig } from '@/store/config/types'
+import { InitConfig, InstanceConfig } from '@/store/config/types'
 import StateMixin from '@/mixins/state'
 import { appInit } from '@/init'
 import { Waits } from '@/globals'

diff --git a/src/components/layout/AppBar.vue b/src/components/layout/AppBar.vue
@@ -51,9 +51,10 @@
     </div>
 
     <div class="toolbar-suplimental">
-      <v-tooltip bottom v-if="socketConnected">
+      <v-tooltip bottom v-if="socketConnected && !isMobile">
         <template v-slot:activator="{ on, attrs }">
           <app-btn
+            v-if="!isMobile"
             :disabled="!klippyReady"
             icon
             class="ml-4"
@@ -115,6 +116,10 @@ export default class AppBar extends Mixins(StateMixin) {
     return this.$store.getters['config/getTheme']
   }
 
+  get isMobile () {
+    return this.$vuetify.breakpoint.mobile
+  }
+
   emergencyStop () {
     SocketActions.printerEmergencyStop()
   }

diff --git a/src/components/widgets/status/ReprintMenu.vue b/src/components/widgets/status/ReprintMenu.vue
@@ -19,43 +19,38 @@
         <v-icon small class="ml-1" dense :class="{ 'rotate-180': value }">$chevronDown</v-icon>
       </app-btn>
     </template>
-
-    <v-card flat>
-      <v-card-text class="pa-2">
-        <div class="file-system">
-          <v-simple-table dense>
-            <tbody>
-              <tr
-                v-for="job in history"
-                :key="job.job_id"
-                @click="$emit('print', job.filename)"
-                class="row-select">
-                <td class="text-no-wrap">
-                  <v-icon
-                    v-if="!job.metadata.thumbnails || !job.metadata.thumbnails.length"
-                    small
-                    color="grey darken-2">
-                    $fileDocument
-                  </v-icon>
-                  <img
-                    v-if="job.metadata.thumbnails && job.metadata.thumbnails.length"
-                    class="file-icon-thumb"
-                    :src="getThumbUrl(job.metadata.thumbnails, getFilePaths(job.filename).path)"
-                    :width="16"
-                  />
-                </td>
-                <td class="grey--text">
-                  <span>
-                    <job-history-item-status :job="job" dense></job-history-item-status>
-                    {{ getFilePaths(job.filename).filename }}
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </v-simple-table>
-        </div>
-      </v-card-text>
-    </v-card>
+      <div class="file-system">
+        <v-simple-table dense>
+          <tbody>
+            <tr
+              v-for="job in history"
+              :key="job.job_id"
+              @click="$emit('print', job.filename)"
+              class="row-select">
+              <td class="text-no-wrap">
+                <v-icon
+                  v-if="!job.metadata.thumbnails || !job.metadata.thumbnails.length"
+                  small
+                  color="grey darken-2">
+                  $fileDocument
+                </v-icon>
+                <img
+                  v-if="job.metadata.thumbnails && job.metadata.thumbnails.length"
+                  class="file-icon-thumb"
+                  :src="getThumbUrl(job.metadata.thumbnails, getFilePaths(job.filename).path)"
+                  :width="16"
+                />
+              </td>
+              <td class="grey--text">
+                <span>
+                  <job-history-item-status :job="job" dense></job-history-item-status>
+                  {{ getFilePaths(job.filename).filename }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </div>
   </v-menu>
 </template>
 

diff --git a/src/mixins/files.ts b/src/mixins/files.ts
@@ -3,7 +3,6 @@ import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
 import { getThumb } from '@/store/helpers'
 import { AxiosRequestConfig, CancelTokenSource } from 'axios'
-import consola from 'consola'
 
 @Component
 export default class FilesMixin extends Vue {

diff --git a/src/store/config/getters.ts b/src/store/config/getters.ts
@@ -1,11 +1,10 @@
 import { GetterTree } from 'vuex'
 import vuetify from '@/plugins/vuetify'
-import { AppTableConfiguredHeaders, ConfigState, TemperaturePreset, ThemeConfig } from './types'
+import { ConfigState, TemperaturePreset, ThemeConfig } from './types'
 import { RootState } from '../types'
 import { Heater, Fan } from '../printer/types'
 import tinycolor from '@ctrl/tinycolor'
 import { AppTableHeader } from '@/types'
-import { filter } from 'vue/types/umd'
 import { AppTablePartialHeader } from '@/types/tableheaders'
 
 export const getters: GetterTree<ConfigState, RootState> = {

diff --git a/src/store/config/mutations.ts b/src/store/config/mutations.ts
@@ -3,11 +3,10 @@ import { MutationTree } from 'vuex'
 import { ConfigState, UiSettings, SaveByPath, InstanceConfig, InitConfig } from './types'
 import { defaultState } from './index'
 import { Globals } from '@/globals'
-import { merge, set, cloneDeep } from 'lodash-es'
+import { merge, set } from 'lodash-es'
 import { v4 as uuidv4 } from 'uuid'
 import { AppTableHeader } from '@/types'
 import { AppTablePartialHeader } from '@/types/tableheaders'
-import consola from 'consola'
 
 export const mutations: MutationTree<ConfigState> = {
   /**

diff --git a/src/store/helpers.ts b/src/store/helpers.ts
@@ -3,8 +3,6 @@ import { FileChangeItem, FilePaths, AppFile, AppFileWithMeta, KlipperFile, Klipp
 import { SocketActions } from '@/socketActions'
 import store from '@/store'
 import { KlipperMesh, ProcessedMesh } from './mesh/types'
-import { AppTableHeader } from '@/types'
-import { AppTablePartialHeader } from '@/types/tableheaders'
 
 export const isOfType = <T>(
   varToBeChecked: any,

diff --git a/todo.md b/todo.md
@@ -2,6 +2,7 @@
 
 ## Next Up
 
+- Update mesh box to center on mesh center if no relative index set
 - Power on graph toggles back off on a klipper restart
 - Authorization
 - add cpu time / resource monitoring

diff --git a/vue.config.js b/vue.config.js