fix: file edit should now be enabled on smaller screens and mobile

Signed-off-by: Craig Bassett <[email protected]>
fluidd-core · Apr 9, 2021 · dc47eae · dc47eae
1 parent 13e8fb4
commit dc47eae
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 35 deletions.
diff --git a/src/components/widgets/filesystem/FileEditor.vue b/src/components/widgets/filesystem/FileEditor.vue
@@ -34,7 +34,15 @@ export default class FileEditor extends Vue {
     fontSize: 16,
     scrollbar: {
       useShadows: false
-    }
+    },
+    minimap: {
+      enabled: (!this.isMobile)
+    },
+    rulers: (this.isMobile) ? [80, 120] : []
+  }
+
+  get isMobile () {
+    return this.$vuetify.breakpoint.mobile
   }
 
   async mounted () {
@@ -145,20 +153,4 @@ export default class FileEditor extends Vue {
     height: 90%;
     height: calc(100% - 48px);
   }
-
-  // .file-editor {
-  //   background: transparent;
-  //   color: #ccc;
-
-  //   /* you must provide font-family font-size line-height. Example: */
-  //   font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
-  //   font-size: 14px;
-  //   line-height: 1.5;
-  //   padding: 5px;
-  // }
-
-  // /* optional class for removing the outline */
-  // .prism-editor__textarea:focus {
-  //   outline: none;
-  // }
 </style>
diff --git a/src/components/widgets/filesystem/FileEditorDialog.vue b/src/components/widgets/filesystem/FileEditorDialog.vue
@@ -16,6 +16,7 @@
         style="z-index: 1"
       >
         <app-btn
+          v-if="!$vuetify.breakpoint.smAndDown"
           icon
           :disabled="!ready"
           color=""
@@ -30,27 +31,27 @@
             v-if="!printerPrinting && rootProperties.showConfigRef"
             :href="$globals.DOCS_KLIPPER_CONFIG_REF"
             target="_blank">
-            <v-icon small :left="!isMobile">$help</v-icon>
-            <span class="d-none d-md-inline-block">{{ $t('app.general.btn.config_reference') }}</span>
+            <v-icon small :left="!$vuetify.breakpoint.smAndDown">$help</v-icon>
+            <span v-if="!$vuetify.breakpoint.smAndDown">{{ $t('app.general.btn.config_reference') }}</span>
           </app-btn>
           <app-btn
             v-if="!readonly && !printerPrinting && rootProperties.showSaveRestart"
             :disabled="!ready"
             @click="emitSave(true)">
-            <v-icon small :left="!isMobile">$restart</v-icon>
-            <span class="d-none d-md-inline-block">{{ $t('app.general.btn.save_restart') }}</span>
+            <v-icon small :left="!$vuetify.breakpoint.smAndDown">$restart</v-icon>
+            <span v-if="!$vuetify.breakpoint.smAndDown">{{ $t('app.general.btn.save_restart') }}</span>
           </app-btn>
           <app-btn
             v-if="!readonly"
             :disabled="!ready"
             @click="emitSave(false)">
-            <v-icon small :left="!isMobile">$save</v-icon>
-            <span class="d-none d-md-inline-block">{{ $t('app.general.btn.save') }}</span>
+            <v-icon small :left="!$vuetify.breakpoint.smAndDown">$save</v-icon>
+            <span v-if="!$vuetify.breakpoint.smAndDown">{{ $t('app.general.btn.save') }}</span>
           </app-btn>
           <app-btn
             @click="emitClose()">
-            <v-icon small :left="!isMobile">$close</v-icon>
-            <span class="d-none d-md-inline-block">{{ $t('app.general.btn.close') }}</span>
+            <v-icon small :left="!$vuetify.breakpoint.smAndDown">$close</v-icon>
+            <span v-if="!$vuetify.breakpoint.smAndDown">{{ $t('app.general.btn.close') }}</span>
           </app-btn>
         </v-toolbar-items>
       </v-toolbar>
@@ -122,10 +123,6 @@ export default class FileEditorDialog extends Mixins(StateMixin) {
     return this.$store.getters['files/getRootProperties'](this.root)
   }
 
-  get isMobile () {
-    return this.$vuetify.breakpoint.sm
-  }
-
   mounted () {
     this.updatedContent = this.contents
   }

diff --git a/src/components/widgets/filesystem/FileSystemContextMenu.vue b/src/components/widgets/filesystem/FileSystemContextMenu.vue
@@ -38,7 +38,7 @@
             <v-list-item
               link
               @click="$emit('edit', file)"
-              v-if="file.type !== 'directory' && rootProperties.canEdit && !isMobile">
+              v-if="file.type !== 'directory' && rootProperties.canEdit">
               <v-list-item-icon>
                 <v-icon>$pencil</v-icon>
               </v-list-item-icon>
@@ -47,7 +47,7 @@
             <v-list-item
               link
               @click="$emit('view', file)"
-              v-if="file.type !== 'directory' && rootProperties.canView && !isMobile">
+              v-if="file.type !== 'directory' && rootProperties.canView">
               <v-list-item-icon>
                 <v-icon>$magnify</v-icon>
               </v-list-item-icon>
@@ -124,10 +124,6 @@ export default class FileSystemContextMenu extends Mixins(StateMixin, FilesMixin
     return this.$store.getters['files/getRootProperties'](this.root)
   }
 
-  get isMobile () {
-    return this.$vuetify.breakpoint.mobile
-  }
-
   get canPreheat () {
     return (
       'first_layer_extr_temp' in this.file &&

diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
@@ -6,6 +6,9 @@ import colors from 'vuetify/lib/util/colors'
 Vue.use(Vuetify)
 
 export default new Vuetify({
+  breakpoint: {
+    mobileBreakpoint: 'xs'
+  },
   icons: {
     iconfont: 'mdiSvg',
     values: Icons