fix: adds missing File Browser button tooltips (#1094)

Signed-off-by: Pedro Lamas <[email protected]>
fluidd-core · Apr 28, 2023 · 44d94e6 · 44d94e6
1 parent 3d5daf3
commit 44d94e6
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 32 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -38,6 +38,7 @@ declare module 'vue' {
     AppSetting: typeof import('./src/components/ui/AppSetting.vue')['default']
     AppSettingsNav: typeof import('./src/components/layout/AppSettingsNav.vue')['default']
     AppTextField: typeof import('./src/components/ui/AppTextField.vue')['default']
+    AppThumbnailSize: typeof import('./src/components/ui/AppThumbnailSize.vue')['default']
     AppToolsDrawer: typeof import('./src/components/layout/AppToolsDrawer.vue')['default']
     AppUploadAndPrintBtn: typeof import('./src/components/layout/AppUploadAndPrintBtn.vue')['default']
     AppUserMenu: typeof import('./src/components/layout/AppUserMenu.vue')['default']

diff --git a/src/components/ui/AppColumnPicker.vue b/src/components/ui/AppColumnPicker.vue
@@ -7,19 +7,24 @@
     min-width="150"
     :close-on-content-click="false"
   >
-    <template #activator="{ on, attrs }">
-      <v-btn
-        :disabled="disabled"
-        fab
-        small
-        text
-        v-bind="attrs"
-        v-on="on"
-      >
-        <v-icon>
-          $cogs
-        </v-icon>
-      </v-btn>
+    <template #activator="{ on: menu, attrs }">
+      <v-tooltip bottom>
+        <template #activator="{ on: tooltip }">
+          <v-btn
+            :disabled="disabled"
+            fab
+            small
+            text
+            v-bind="attrs"
+            v-on="{ ...tooltip, ...menu }"
+          >
+            <v-icon>
+              $tableColumn
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t('app.general.btn.select_columns') }}</span>
+      </v-tooltip>
     </template>
     <v-list
       dense

diff --git a/src/components/ui/AppThumbnailSize.vue b/src/components/ui/AppThumbnailSize.vue
@@ -0,0 +1,55 @@
+<template>
+  <v-menu
+    bottom
+    left
+    offset-y
+    transition="slide-y-transition"
+    min-width="150"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ on: menu, attrs }">
+      <v-tooltip bottom>
+        <template #activator="{ on: tooltip }">
+          <v-btn
+            :disabled="disabled"
+            fab
+            small
+            text
+            v-bind="attrs"
+            v-on="{ ...tooltip, ...menu }"
+          >
+            <v-icon>
+              $imageSizeSelectLarge
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t('app.general.btn.thumbnail_size') }}</span>
+      </v-tooltip>
+    </template>
+    <v-sheet class="pa-2">
+      <app-named-slider
+        v-model="thumbnailSize"
+        class="ma-1"
+        :label="$t('app.general.label.thumbnail_size')"
+        :min="32"
+        :max="192"
+        :step="16"
+        :reset-value="32"
+        suffix="px"
+      />
+    </v-sheet>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { Component, Prop, VModel, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class FileSystemToolbar extends Vue {
+  @VModel({ type: Number, required: true })
+    thumbnailSize!: number
+
+  @Prop({ type: Boolean, default: false })
+  readonly disabled!: boolean
+}
+</script>
diff --git a/src/components/widgets/filesystem/FileSystemToolbar.vue b/src/components/widgets/filesystem/FileSystemToolbar.vue
@@ -56,23 +56,10 @@
       </slot>
     </v-tooltip>
 
-    <app-btn-collapse-group
+    <app-thumbnail-size
       v-if="['gcodes', 'timelapse'].includes(root)"
-      collapsed
-      menu-icon="$imageSizeSelectLarge"
-      size="small"
-    >
-      <app-named-slider
-        v-model="thumbnailSize"
-        class="ma-1"
-        :label="$t('app.general.label.thumbnail_size')"
-        :min="32"
-        :max="192"
-        :step="16"
-        :reset-value="32"
-        suffix="px"
-      />
-    </app-btn-collapse-group>
+      v-model="thumbnailSize"
+    />
 
     <app-column-picker
       v-if="headers && rootProperties.canConfigure"

diff --git a/src/globals.ts b/src/globals.ts
@@ -139,6 +139,7 @@ import {
   mdiTrayFull,
   mdiTrayPlus,
   mdiFolderArrowUp,
+  mdiTableColumn,
   mdiShape
 } from '@mdi/js'
 
@@ -357,6 +358,7 @@ export const Icons = Object.freeze({
   moves: mdiVectorLine,
   extrusions: mdiPrinter3dNozzle,
   retractions: mdiSwapVertical,
+  tableColumn: mdiTableColumn,
   parts: mdiShape,
   folderOpen: mdiFolderOpen,
   fileZip: mdiArchive,

diff --git a/src/locales/en.yaml b/src/locales/en.yaml
@@ -175,7 +175,7 @@ app:
       refresh: Refresh
       reload: Reload
       remove: Remove
-      remove_all: Remove All
+      remove_all: Remove all
       rename: Rename
       reprint: Re-Print
       reset_file: Clear File
@@ -192,13 +192,15 @@ app:
       save_as: Save As
       save_restart: Save & Restart
       save_config_and_restart: Save config & restart
+      select_columns: Select columns
       send: Send
       set_color: Set Color
       set_default_layout: Set as Default Layout
       shutdown: Shutdown
       snooze: Snooze
       socket_reconnect: Re-Connect
       socket_refresh: Force refresh
+      thumbnail_size: Thumbnail size
       upload: Upload
       upload_files: Upload Files
       upload_folder: Upload Folder

diff --git a/src/store/files/getters.ts b/src/store/files/getters.ts
@@ -56,7 +56,7 @@ export const getters: GetterTree<FilesState, RootState> = {
           canView: true,
           canPrint: false,
           canConfigure: false,
-          filterTypes: []
+          filterTypes: ['hidden_files']
         }
       case 'docs':
         return {
@@ -66,7 +66,7 @@ export const getters: GetterTree<FilesState, RootState> = {
           canView: true,
           canPrint: false,
           canConfigure: false,
-          filterTypes: []
+          filterTypes: ['hidden_files']
         }
       case 'logs':
         return {