feat: pin files to top of gcode files list

Icons for dashboard status card Separated pinned files tab Small pin icon without overriding preview thumbnails Signed-off-by: Arno Pigeon <[email protected]>
mainsail-crew · Dec 18, 2023 · 3756ed3 · 3756ed3
1 parent 027a520
commit 3756ed3
Show file tree

Hide file tree

Showing 4 changed files with 634 additions and 16 deletions.
diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
@@ -235,13 +235,10 @@
                                 class="pa-0 mr-0"
                                 @click.stop="select(!isSelected)"></v-simple-checkbox>
                         </td>
-                        <td class="px-0 text-center" style="width: 32px">
+                        <td class="px-0 text-center fileicon-container" style="width: 32px">
                             <template v-if="item.isDirectory">
                                 <v-icon>{{ mdiFolder }}</v-icon>
                             </template>
-                            <template v-else-if="item.isPinned">
-                                <v-icon>{{ mdiPin }}</v-icon>
-                            </template>
                             <template v-else-if="item.small_thumbnail">
                                 <v-tooltip
                                     top
@@ -274,6 +271,10 @@
                             <template v-else>
                                 <v-icon>{{ mdiFile }}</v-icon>
                             </template>
+
+                            <span v-if="item.isPinned" class="pin">
+                                <v-icon>{{ mdiPin }}</v-icon>
+                            </span>
                         </td>
                         <td class=" ">{{ item.filename }}</td>
                         <td class="text-right text-no-wrap">
@@ -1621,4 +1622,15 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
 .handle {
     cursor: move;
 }
+
+.fileicon-container {
+    position: relative;
+}
+
+.pin {
+    position: absolute;
+    top: 0;
+    right: 0;
+    filter: drop-shadow(0 0 4px black);
+}
 </style>
diff --git a/src/components/panels/Status/Gcodefiles.vue b/src/components/panels/Status/Gcodefiles.vue
@@ -4,7 +4,6 @@
             :items="gcodeFiles"
             hide-default-footer
             class="dashboard-gcodes-table"
-            :custom-sort="sortFiles"
             sort-by="time_added"
             mobile-breakpoint="0"
             @current-items="setFirst">
@@ -20,10 +19,7 @@
                     @contextmenu="showContextMenu($event, item)"
                     @click="showDialog(item)">
                     <td class="pr-0 text-center" style="width: 32px">
-                        <template v-if="item.isPinned">
-                            <v-icon>{{ mdiPin }}</v-icon>
-                        </template>
-                        <template v-else-if="item.small_thumbnail">
+                        <template v-if="item.small_thumbnail">
                             <v-tooltip
                                 top
                                 content-class="tooltip__content-opacity1"
@@ -260,7 +256,6 @@ import {
 } from '@mdi/js'
 import Panel from '@/components/ui/Panel.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
-import { sortFiles } from '@/plugins/helpers'
 
 interface dialogRenameObject {
     show: boolean
@@ -275,7 +270,6 @@ interface dialogAddBatchToQueue {
 }
 
 @Component({
-    methods: { sortFiles },
     components: {
         Panel,
         StartPrintDialog,