From 0c165b74da388c4ce7d2c6ae842ed843e3adb70f Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 10 Jun 2022 21:04:54 +0200
Subject: [PATCH 1/9] refactor: tweak dashboard settings visuals

- replace old drag handles with proper dragging icons
- always show drag handles
- truncate text if viewport too narrow

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../settings/SettingsDashboardTabDesktop.vue  | 48 +++++++--------
 .../settings/SettingsDashboardTabMobile.vue   | 36 +++++------
 .../settings/SettingsDashboardTabTablet.vue   | 48 +++++++--------
 .../SettingsDashboardTabWidescreen.vue        | 60 +++++++++----------
 4 files changed, 96 insertions(+), 96 deletions(-)

diff --git a/src/components/settings/SettingsDashboardTabDesktop.vue b/src/components/settings/SettingsDashboardTabDesktop.vue
index 03a4c151b..4134ab551 100644
--- a/src/components/settings/SettingsDashboardTabDesktop.vue
+++ b/src/components/settings/SettingsDashboardTabDesktop.vue
@@ -1,10 +1,3 @@
-<style scoped>
-.ghost {
-    opacity: 0.5;
-    background: #c8ebfb;
-}
-</style>
-
 <template>
     <v-card flat>
         <v-card-text>
@@ -14,34 +7,34 @@
                         <v-list dense>
                             <v-list-item>
                                 <v-row>
-                                    <v-col class="col-auto pr-0">
+                                    <v-col class="col-auto pr-0 pl-8">
                                         <v-icon>{{ mdiInformation }}</v-icon>
                                     </v-col>
-                                    <v-col>
+                                    <v-col class="pr-0 text-truncate">
                                         {{ $t('Panels.StatusPanel.Headline') }}
                                     </v-col>
-                                    <v-col class="col-auto">
+                                    <v-col class="col-auto pl-0">
                                         <v-icon color="grey lighten-1">{{ mdiLock }}</v-icon>
                                     </v-col>
                                 </v-row>
                             </v-list-item>
                             <draggable
                                 v-model="desktopLayout1"
-                                :handle="isMobile ? '.handle' : ''"
+                                handle=".handle"
                                 class="v-list-item-group"
                                 ghost-class="ghost"
                                 group="desktopViewport">
                                 <template v-for="element in desktopLayout1">
                                     <v-list-item :key="'item-desktop-' + element.name" link>
                                         <v-row>
-                                            <v-col class="col-auto pr-0">
-                                                <v-icon v-if="isMobile" class="handle">{{ mdiArrowUpDown }}</v-icon>
-                                                <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-col class="col-auto px-0">
+                                                <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
+                                                <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                             </v-col>
-                                            <v-col class="pr-0">
+                                            <v-col class="pr-0 text-truncate">
                                                 {{ getPanelName(element.name) }}
                                             </v-col>
-                                            <v-col class="col-auto pl-0">
+                                            <v-col class="col-auto pl-2">
                                                 <v-icon
                                                     v-if="!element.visible"
                                                     color="grey lighten-1"
@@ -67,21 +60,21 @@
                         <v-list dense>
                             <draggable
                                 v-model="desktopLayout2"
-                                :handle="isMobile ? '.handle' : ''"
+                                handle=".handle"
                                 class="v-list-item-group"
                                 ghost-class="ghost"
                                 group="desktopViewport">
                                 <template v-for="element in desktopLayout2">
                                     <v-list-item :key="'item-desktop-' + element.name" link>
                                         <v-row>
-                                            <v-col class="col-auto pr-0">
-                                                <v-icon v-if="isMobile" class="handle">{{ mdiArrowUpDown }}</v-icon>
-                                                <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-col class="col-auto px-0">
+                                                <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
+                                                <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                             </v-col>
-                                            <v-col class="pr-0">
+                                            <v-col class="pr-0 text-truncate">
                                                 {{ getPanelName(element.name) }}
                                             </v-col>
-                                            <v-col class="col-auto pl-0">
+                                            <v-col class="col-auto pl-2">
                                                 <v-icon
                                                     v-if="!element.visible"
                                                     color="grey lighten-1"
@@ -118,7 +111,7 @@ import { Mixins } from 'vue-property-decorator'
 import draggable from 'vuedraggable'
 import { capitalize, convertPanelnameToIcon } from '@/plugins/helpers'
 import DashboardMixin from '@/components/mixins/dashboard'
-import { mdiInformation, mdiCheckboxMarked, mdiCheckboxBlankOutline, mdiLock, mdiArrowUpDown } from '@mdi/js'
+import { mdiInformation, mdiCheckboxMarked, mdiCheckboxBlankOutline, mdiLock, mdiDragVertical } from '@mdi/js'
 
 @Component({
     components: {
@@ -135,7 +128,7 @@ export default class SettingsDashboardTabDesktop extends Mixins(DashboardMixin)
 
     mdiLock = mdiLock
     mdiInformation = mdiInformation
-    mdiArrowUpDown = mdiArrowUpDown
+    mdiDragVertical = mdiDragVertical
     mdiCheckboxMarked = mdiCheckboxMarked
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
 
@@ -188,3 +181,10 @@ export default class SettingsDashboardTabDesktop extends Mixins(DashboardMixin)
     }
 }
 </script>
+
+<style scoped>
+.ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+</style>
diff --git a/src/components/settings/SettingsDashboardTabMobile.vue b/src/components/settings/SettingsDashboardTabMobile.vue
index b504942ac..ffc721759 100644
--- a/src/components/settings/SettingsDashboardTabMobile.vue
+++ b/src/components/settings/SettingsDashboardTabMobile.vue
@@ -1,10 +1,3 @@
-<style scoped>
-.ghost {
-    opacity: 0.5;
-    background: #c8ebfb;
-}
-</style>
-
 <template>
     <v-card flat>
         <v-card-text>
@@ -14,34 +7,34 @@
                         <v-list dense>
                             <v-list-item>
                                 <v-row>
-                                    <v-col class="col-auto pr-0">
+                                    <v-col class="col-auto pr-0 pl-8">
                                         <v-icon>{{ mdiInformation }}</v-icon>
                                     </v-col>
-                                    <v-col>
+                                    <v-col class="pr-0 text-truncate">
                                         {{ $t('Panels.StatusPanel.Headline') }}
                                     </v-col>
-                                    <v-col class="col-auto">
+                                    <v-col class="col-auto pl-0">
                                         <v-icon color="grey lighten-1">{{ mdiLock }}</v-icon>
                                     </v-col>
                                 </v-row>
                             </v-list-item>
                             <draggable
                                 v-model="mobileLayout"
-                                :handle="isMobile ? '.handle' : ''"
+                                handle=".handle"
                                 class="v-list-item-group"
                                 ghost-class="ghost"
                                 group="mobileViewport">
                                 <template v-for="element in mobileLayout">
                                     <v-list-item :key="'item-mobile-' + element.name" link>
                                         <v-row>
-                                            <v-col class="col-auto pr-0">
-                                                <v-icon v-if="isMobile" class="handle">{{ mdiArrowUpDown }}</v-icon>
-                                                <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-col class="col-auto px-0">
+                                                <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
+                                                <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                             </v-col>
-                                            <v-col class="pr-0">
+                                            <v-col class="pr-0 text-truncate">
                                                 {{ getPanelName(element.name) }}
                                             </v-col>
-                                            <v-col class="col-auto pl-0">
+                                            <v-col class="col-auto pl-2">
                                                 <v-icon
                                                     v-if="!element.visible"
                                                     color="grey lighten-1"
@@ -78,7 +71,7 @@ import { Mixins } from 'vue-property-decorator'
 import DashboardMixin from '@/components/mixins/dashboard'
 import draggable from 'vuedraggable'
 import { capitalize, convertPanelnameToIcon } from '@/plugins/helpers'
-import { mdiArrowUpDown, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiInformation, mdiLock } from '@mdi/js'
+import { mdiDragVertical, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiInformation, mdiLock } from '@mdi/js'
 @Component({
     components: {
         draggable,
@@ -90,7 +83,7 @@ export default class SettingsDashboardTabMobile extends Mixins(DashboardMixin) {
      */
     mdiLock = mdiLock
     mdiInformation = mdiInformation
-    mdiArrowUpDown = mdiArrowUpDown
+    mdiDragVertical = mdiDragVertical
     mdiCheckboxMarked = mdiCheckboxMarked
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
 
@@ -124,3 +117,10 @@ export default class SettingsDashboardTabMobile extends Mixins(DashboardMixin) {
     }
 }
 </script>
+
+<style scoped>
+.ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+</style>
diff --git a/src/components/settings/SettingsDashboardTabTablet.vue b/src/components/settings/SettingsDashboardTabTablet.vue
index 288f55a5c..0ad539a43 100644
--- a/src/components/settings/SettingsDashboardTabTablet.vue
+++ b/src/components/settings/SettingsDashboardTabTablet.vue
@@ -1,10 +1,3 @@
-<style scoped>
-.ghost {
-    opacity: 0.5;
-    background: #c8ebfb;
-}
-</style>
-
 <template>
     <v-card flat>
         <v-card-text>
@@ -14,34 +7,34 @@
                         <v-list dense>
                             <v-list-item>
                                 <v-row>
-                                    <v-col class="col-auto pr-0">
+                                    <v-col class="col-auto pr-0 pl-8">
                                         <v-icon>{{ mdiInformation }}</v-icon>
                                     </v-col>
-                                    <v-col>
+                                    <v-col class="pr-0 text-truncate">
                                         {{ $t('Panels.StatusPanel.Headline') }}
                                     </v-col>
-                                    <v-col class="col-auto">
+                                    <v-col class="col-auto pl-0">
                                         <v-icon color="grey lighten-1">{{ mdiLock }}</v-icon>
                                     </v-col>
                                 </v-row>
                             </v-list-item>
                             <draggable
                                 v-model="tabletLayout1"
-                                :handle="isMobile ? '.handle' : ''"
+                                handle=".handle"
                                 class="v-list-item-group"
                                 ghost-class="ghost"
                                 group="tabletViewport">
                                 <template v-for="element in tabletLayout1">
                                     <v-list-item :key="'item-tablet-' + element.name" link>
                                         <v-row>
-                                            <v-col class="col-auto pr-0">
-                                                <v-icon v-if="isMobile" class="handle">{{ mdiArrowUpDown }}</v-icon>
-                                                <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-col class="col-auto px-0">
+                                                <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
+                                                <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                             </v-col>
-                                            <v-col class="pr-0">
+                                            <v-col class="pr-0 text-truncate">
                                                 {{ getPanelName(element.name) }}
                                             </v-col>
-                                            <v-col class="col-auto pl-0">
+                                            <v-col class="col-auto pl-2">
                                                 <v-icon
                                                     v-if="!element.visible"
                                                     color="grey lighten-1"
@@ -67,21 +60,21 @@
                         <v-list dense>
                             <draggable
                                 v-model="tabletLayout2"
-                                :handle="isMobile ? '.handle' : ''"
+                                handle=".handle"
                                 class="v-list-item-group"
                                 ghost-class="ghost"
                                 group="tabletViewport">
                                 <template v-for="element in tabletLayout2">
                                     <v-list-item :key="'item-tablet-' + element.name" link>
                                         <v-row>
-                                            <v-col class="col-auto pr-0">
-                                                <v-icon v-if="isMobile" class="handle">{{ mdiArrowUpDown }}</v-icon>
-                                                <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-col class="col-auto px-0">
+                                                <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
+                                                <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                             </v-col>
-                                            <v-col class="pr-0">
+                                            <v-col class="pr-0 text-truncate">
                                                 {{ getPanelName(element.name) }}
                                             </v-col>
-                                            <v-col class="col-auto pl-0">
+                                            <v-col class="col-auto pl-2">
                                                 <v-icon
                                                     v-if="!element.visible"
                                                     color="grey lighten-1"
@@ -118,7 +111,7 @@ import { Mixins } from 'vue-property-decorator'
 import DashboardMixin from '@/components/mixins/dashboard'
 import draggable from 'vuedraggable'
 import { capitalize, convertPanelnameToIcon } from '@/plugins/helpers'
-import { mdiLock, mdiInformation, mdiArrowUpDown, mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@mdi/js'
+import { mdiLock, mdiInformation, mdiDragVertical, mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@mdi/js'
 @Component({
     components: {
         draggable,
@@ -130,7 +123,7 @@ export default class SettingsDashboardTabTablet extends Mixins(DashboardMixin) {
      */
     mdiLock = mdiLock
     mdiInformation = mdiInformation
-    mdiArrowUpDown = mdiArrowUpDown
+    mdiDragVertical = mdiDragVertical
     mdiCheckboxMarked = mdiCheckboxMarked
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
 
@@ -186,3 +179,10 @@ export default class SettingsDashboardTabTablet extends Mixins(DashboardMixin) {
     }
 }
 </script>
+
+<style scoped>
+.ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+</style>
diff --git a/src/components/settings/SettingsDashboardTabWidescreen.vue b/src/components/settings/SettingsDashboardTabWidescreen.vue
index 56d64d097..eb85aa929 100644
--- a/src/components/settings/SettingsDashboardTabWidescreen.vue
+++ b/src/components/settings/SettingsDashboardTabWidescreen.vue
@@ -1,10 +1,3 @@
-<style scoped>
-.ghost {
-    opacity: 0.5;
-    background: #c8ebfb;
-}
-</style>
-
 <template>
     <v-card flat>
         <v-card-text>
@@ -14,34 +7,34 @@
                         <v-list dense>
                             <v-list-item>
                                 <v-row>
-                                    <v-col class="col-auto pr-0">
+                                    <v-col class="col-auto pr-0 pl-8">
                                         <v-icon>{{ mdiInformation }}</v-icon>
                                     </v-col>
-                                    <v-col>
+                                    <v-col class="pr-0 text-truncate">
                                         {{ $t('Panels.StatusPanel.Headline') }}
                                     </v-col>
-                                    <v-col class="col-auto">
+                                    <v-col class="col-auto pl-0">
                                         <v-icon color="grey lighten-1">{{ mdiLock }}</v-icon>
                                     </v-col>
                                 </v-row>
                             </v-list-item>
                             <draggable
                                 v-model="widescreenLayout1"
-                                :handle="isMobile ? '.handle' : ''"
+                                handle=".handle"
                                 class="v-list-item-group"
                                 ghost-class="ghost"
                                 group="widescreenViewport">
                                 <template v-for="element in widescreenLayout1">
                                     <v-list-item :key="'item-widescreen-' + element.name" link>
                                         <v-row>
-                                            <v-col class="col-auto pr-0">
-                                                <v-icon v-if="isMobile" class="handle">{{ mdiArrowUpDown }}</v-icon>
-                                                <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-col class="col-auto px-0">
+                                                <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
+                                                <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                             </v-col>
-                                            <v-col class="pr-0">
+                                            <v-col class="pr-0 text-truncate">
                                                 {{ getPanelName(element.name) }}
                                             </v-col>
-                                            <v-col class="col-auto pl-0">
+                                            <v-col class="col-auto pl-2">
                                                 <v-icon
                                                     v-if="!element.visible"
                                                     color="grey lighten-1"
@@ -67,21 +60,21 @@
                         <v-list dense>
                             <draggable
                                 v-model="widescreenLayout2"
-                                :handle="isMobile ? '.handle' : ''"
+                                handle=".handle"
                                 class="v-list-item-group"
                                 ghost-class="ghost"
                                 group="widescreenViewport">
                                 <template v-for="element in widescreenLayout2">
                                     <v-list-item :key="'item-widescreen-' + element.name" link>
                                         <v-row>
-                                            <v-col class="col-auto pr-0">
-                                                <v-icon v-if="isMobile" class="handle">{{ mdiArrowUpDown }}</v-icon>
-                                                <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-col class="col-auto px-0">
+                                                <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
+                                                <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                             </v-col>
-                                            <v-col class="pr-0">
+                                            <v-col class="pr-0 text-truncate">
                                                 {{ getPanelName(element.name) }}
                                             </v-col>
-                                            <v-col class="col-auto pl-0">
+                                            <v-col class="col-auto pl-2">
                                                 <v-icon
                                                     v-if="!element.visible"
                                                     color="grey lighten-1"
@@ -107,21 +100,21 @@
                         <v-list dense>
                             <draggable
                                 v-model="widescreenLayout3"
-                                :handle="isMobile ? '.handle' : ''"
+                                handle=".handle"
                                 class="v-list-item-group"
                                 ghost-class="ghost"
                                 group="widescreenViewport">
                                 <template v-for="element in widescreenLayout3">
                                     <v-list-item :key="'item-widescreen-' + element.name" link>
                                         <v-row>
-                                            <v-col class="col-auto pr-0">
-                                                <v-icon v-if="isMobile" class="handle">{{ mdiArrowUpDown }}</v-icon>
-                                                <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-col class="col-auto px-0">
+                                                <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
+                                                <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                             </v-col>
-                                            <v-col class="pr-0">
+                                            <v-col class="pr-0 text-truncate">
                                                 {{ getPanelName(element.name) }}
                                             </v-col>
-                                            <v-col class="col-auto pl-0">
+                                            <v-col class="col-auto pl-2">
                                                 <v-icon
                                                     v-if="!element.visible"
                                                     color="grey lighten-1"
@@ -158,7 +151,7 @@ import { Mixins } from 'vue-property-decorator'
 import draggable from 'vuedraggable'
 import { capitalize, convertPanelnameToIcon } from '@/plugins/helpers'
 import DashboardMixin from '@/components/mixins/dashboard'
-import { mdiArrowUpDown, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiInformation, mdiLock } from '@mdi/js'
+import { mdiDragVertical, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiInformation, mdiLock } from '@mdi/js'
 @Component({
     components: {
         draggable,
@@ -170,7 +163,7 @@ export default class SettingsDashboardTabWidescreen extends Mixins(DashboardMixi
      */
     mdiLock = mdiLock
     mdiInformation = mdiInformation
-    mdiArrowUpDown = mdiArrowUpDown
+    mdiDragVertical = mdiDragVertical
     mdiCheckboxMarked = mdiCheckboxMarked
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
 
@@ -257,3 +250,10 @@ export default class SettingsDashboardTabWidescreen extends Mixins(DashboardMixi
     }
 }
 </script>
+
+<style scoped>
+.ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+</style>

From 2ba7229b9a6d0bdf0d4897e3277ec9031829afea Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 10 Jun 2022 21:24:37 +0200
Subject: [PATCH 2/9] refactor: remove unused import

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/settings/SettingsDashboardTabDesktop.vue    | 3 +--
 src/components/settings/SettingsDashboardTabMobile.vue     | 3 +--
 src/components/settings/SettingsDashboardTabTablet.vue     | 3 +--
 src/components/settings/SettingsDashboardTabWidescreen.vue | 3 +--
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/settings/SettingsDashboardTabDesktop.vue b/src/components/settings/SettingsDashboardTabDesktop.vue
index 4134ab551..b78212ef7 100644
--- a/src/components/settings/SettingsDashboardTabDesktop.vue
+++ b/src/components/settings/SettingsDashboardTabDesktop.vue
@@ -109,7 +109,7 @@
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import draggable from 'vuedraggable'
-import { capitalize, convertPanelnameToIcon } from '@/plugins/helpers'
+import { convertPanelnameToIcon } from '@/plugins/helpers'
 import DashboardMixin from '@/components/mixins/dashboard'
 import { mdiInformation, mdiCheckboxMarked, mdiCheckboxBlankOutline, mdiLock, mdiDragVertical } from '@mdi/js'
 
@@ -119,7 +119,6 @@ import { mdiInformation, mdiCheckboxMarked, mdiCheckboxBlankOutline, mdiLock, md
     },
 })
 export default class SettingsDashboardTabDesktop extends Mixins(DashboardMixin) {
-    capitalize = capitalize
     convertPanelnameToIcon = convertPanelnameToIcon
 
     /**
diff --git a/src/components/settings/SettingsDashboardTabMobile.vue b/src/components/settings/SettingsDashboardTabMobile.vue
index ffc721759..ba61a40b1 100644
--- a/src/components/settings/SettingsDashboardTabMobile.vue
+++ b/src/components/settings/SettingsDashboardTabMobile.vue
@@ -70,7 +70,7 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import DashboardMixin from '@/components/mixins/dashboard'
 import draggable from 'vuedraggable'
-import { capitalize, convertPanelnameToIcon } from '@/plugins/helpers'
+import { convertPanelnameToIcon } from '@/plugins/helpers'
 import { mdiDragVertical, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiInformation, mdiLock } from '@mdi/js'
 @Component({
     components: {
@@ -87,7 +87,6 @@ export default class SettingsDashboardTabMobile extends Mixins(DashboardMixin) {
     mdiCheckboxMarked = mdiCheckboxMarked
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
 
-    capitalize = capitalize
     convertPanelnameToIcon = convertPanelnameToIcon
 
     get mobileLayout() {
diff --git a/src/components/settings/SettingsDashboardTabTablet.vue b/src/components/settings/SettingsDashboardTabTablet.vue
index 0ad539a43..58f559aab 100644
--- a/src/components/settings/SettingsDashboardTabTablet.vue
+++ b/src/components/settings/SettingsDashboardTabTablet.vue
@@ -110,7 +110,7 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import DashboardMixin from '@/components/mixins/dashboard'
 import draggable from 'vuedraggable'
-import { capitalize, convertPanelnameToIcon } from '@/plugins/helpers'
+import { convertPanelnameToIcon } from '@/plugins/helpers'
 import { mdiLock, mdiInformation, mdiDragVertical, mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@mdi/js'
 @Component({
     components: {
@@ -127,7 +127,6 @@ export default class SettingsDashboardTabTablet extends Mixins(DashboardMixin) {
     mdiCheckboxMarked = mdiCheckboxMarked
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
 
-    capitalize = capitalize
     convertPanelnameToIcon = convertPanelnameToIcon
 
     get tabletLayout1() {
diff --git a/src/components/settings/SettingsDashboardTabWidescreen.vue b/src/components/settings/SettingsDashboardTabWidescreen.vue
index eb85aa929..b8daa0875 100644
--- a/src/components/settings/SettingsDashboardTabWidescreen.vue
+++ b/src/components/settings/SettingsDashboardTabWidescreen.vue
@@ -149,7 +149,7 @@
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import draggable from 'vuedraggable'
-import { capitalize, convertPanelnameToIcon } from '@/plugins/helpers'
+import { convertPanelnameToIcon } from '@/plugins/helpers'
 import DashboardMixin from '@/components/mixins/dashboard'
 import { mdiDragVertical, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiInformation, mdiLock } from '@mdi/js'
 @Component({
@@ -167,7 +167,6 @@ export default class SettingsDashboardTabWidescreen extends Mixins(DashboardMixi
     mdiCheckboxMarked = mdiCheckboxMarked
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
 
-    capitalize = capitalize
     convertPanelnameToIcon = convertPanelnameToIcon
 
     get widescreenLayout1() {

From fd08ba71b49aeae0227d486c91da36bff911a5cf Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 10 Jun 2022 22:14:59 +0200
Subject: [PATCH 3/9] refactor(GcodefilesPanel.vue): replace drag handle icons

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 2bba85cf3..de9181dd2 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -147,7 +147,7 @@
                                         link>
                                         <v-row>
                                             <v-col class="col-auto pr-0">
-                                                <v-icon class="handle">{{ mdiArrowUpDown }}</v-icon>
+                                                <v-icon class="handle">{{ mdiDragVertical }}</v-icon>
                                             </v-col>
                                             <v-col>
                                                 {{ header.text }}
@@ -541,7 +541,7 @@ import Panel from '@/components/ui/Panel.vue'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import draggable from 'vuedraggable'
 import {
-    mdiArrowUpDown,
+    mdiDragVertical,
     mdiCheckboxBlankOutline,
     mdiCheckboxMarked,
     mdiCloseThick,
@@ -614,7 +614,7 @@ export default class GcodefilesPanel extends Mixins(BaseMixin) {
     mdiCloseThick = mdiCloseThick
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
     mdiCheckboxMarked = mdiCheckboxMarked
-    mdiArrowUpDown = mdiArrowUpDown
+    mdiDragVertical = mdiDragVertical
 
     validGcodeExtensions = validGcodeExtensions
     formatDate = formatDate

From 1cd17967b60e01559decf76465f817adebc788c0 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 10 Jun 2022 22:46:30 +0200
Subject: [PATCH 4/9] refactor(SettingsMacrosTabExpert.vue): replace drag
 handle icons

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/settings/SettingsMacrosTabExpert.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/settings/SettingsMacrosTabExpert.vue b/src/components/settings/SettingsMacrosTabExpert.vue
index 0a14648d1..0a3ff8dee 100644
--- a/src/components/settings/SettingsMacrosTabExpert.vue
+++ b/src/components/settings/SettingsMacrosTabExpert.vue
@@ -145,7 +145,7 @@
                             <div :key="macro.name">
                                 <v-row>
                                     <v-col class="col-auto pr-0 d-flex">
-                                        <v-icon class="handle">{{ mdiArrowUpDown }}</v-icon>
+                                        <v-icon class="handle">{{ mdiDragVertical }}</v-icon>
                                     </v-col>
                                     <v-col>
                                         <settings-row
@@ -309,7 +309,7 @@ import {
     mdiPause,
     mdiPrinter3dNozzle,
     mdiPlus,
-    mdiArrowUpDown,
+    mdiDragVertical,
     mdiPalette,
     mdiPencil,
 } from '@mdi/js'
@@ -319,15 +319,15 @@ import {
 })
 export default class SettingsMacrosTabExpert extends Mixins(BaseMixin) {
     /**
-Icons
-*/
+     * Icons
+     */
     mdiPencil = mdiPencil
     mdiDelete = mdiDelete
     mdiSleep = mdiSleep
     mdiPause = mdiPause
     mdiPrinter3dNozzle = mdiPrinter3dNozzle
     mdiPlus = mdiPlus
-    mdiArrowUpDown = mdiArrowUpDown
+    mdiDragVertical = mdiDragVertical
     mdiPalette = mdiPalette
 
     private rules = {

From 6f1425db13badb27103beb81e727d72d1967a6fb Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 10 Jun 2022 22:47:29 +0200
Subject: [PATCH 5/9] style(GcodefilesPanel.vue): styleguide - move styles to
 the end

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue | 76 +++++++++++------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index de9181dd2..1111a495b 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -1,41 +1,3 @@
-<style>
-/*noinspection CssUnusedSymbol*/
-.files-table .v-data-table-header__icon {
-    margin-left: 7px;
-}
-
-.files-table .file-list-cursor:hover {
-    cursor: pointer;
-}
-
-/*noinspection CssUnusedSymbol*/
-.file-list--select-td {
-    width: 20px;
-}
-
-/*noinspection CssUnusedSymbol*/
-.files-table th.text-start {
-    padding-right: 0 !important;
-}
-
-/*noinspection CssUnusedSymbol*/
-.v-chip.minimum-chip {
-    padding: 0;
-    min-width: 24px;
-}
-
-/*noinspection CssUnusedSymbol*/
-.v-chip.minimum-chip .v-chip__content {
-    margin: 0 auto;
-}
-
-/*noinspection CssUnusedSymbol*/
-.file-list__count_printed {
-    position: relative;
-    top: 1px;
-}
-</style>
-
 <template>
     <div>
         <panel
@@ -1377,3 +1339,41 @@ export default class GcodefilesPanel extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style>
+/*noinspection CssUnusedSymbol*/
+.files-table .v-data-table-header__icon {
+    margin-left: 7px;
+}
+
+.files-table .file-list-cursor:hover {
+    cursor: pointer;
+}
+
+/*noinspection CssUnusedSymbol*/
+.file-list--select-td {
+    width: 20px;
+}
+
+/*noinspection CssUnusedSymbol*/
+.files-table th.text-start {
+    padding-right: 0 !important;
+}
+
+/*noinspection CssUnusedSymbol*/
+.v-chip.minimum-chip {
+    padding: 0;
+    min-width: 24px;
+}
+
+/*noinspection CssUnusedSymbol*/
+.v-chip.minimum-chip .v-chip__content {
+    margin: 0 auto;
+}
+
+/*noinspection CssUnusedSymbol*/
+.file-list__count_printed {
+    position: relative;
+    top: 1px;
+}
+</style>

From 2f0a70c8895ee89944a4ccf2f7fad67aa67b62c1 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 10 Jun 2022 23:45:26 +0200
Subject: [PATCH 6/9] refactor: move cursor on drag handle hover

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../settings/SettingsDashboardTabDesktop.vue        | 13 ++++++++-----
 .../settings/SettingsDashboardTabMobile.vue         |  6 +++++-
 .../settings/SettingsDashboardTabTablet.vue         |  8 ++++++--
 .../settings/SettingsDashboardTabWidescreen.vue     | 10 +++++++---
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/settings/SettingsDashboardTabDesktop.vue b/src/components/settings/SettingsDashboardTabDesktop.vue
index b78212ef7..099d93068 100644
--- a/src/components/settings/SettingsDashboardTabDesktop.vue
+++ b/src/components/settings/SettingsDashboardTabDesktop.vue
@@ -25,7 +25,7 @@
                                 ghost-class="ghost"
                                 group="desktopViewport">
                                 <template v-for="element in desktopLayout1">
-                                    <v-list-item :key="'item-desktop-' + element.name" link>
+                                    <v-list-item :key="'item-desktop-' + element.name">
                                         <v-row>
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
@@ -65,7 +65,7 @@
                                 ghost-class="ghost"
                                 group="desktopViewport">
                                 <template v-for="element in desktopLayout2">
-                                    <v-list-item :key="'item-desktop-' + element.name" link>
+                                    <v-list-item :key="'item-desktop-' + element.name">
                                         <v-row>
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
@@ -119,18 +119,17 @@ import { mdiInformation, mdiCheckboxMarked, mdiCheckboxBlankOutline, mdiLock, md
     },
 })
 export default class SettingsDashboardTabDesktop extends Mixins(DashboardMixin) {
-    convertPanelnameToIcon = convertPanelnameToIcon
-
     /**
      * Icons
      */
-
     mdiLock = mdiLock
     mdiInformation = mdiInformation
     mdiDragVertical = mdiDragVertical
     mdiCheckboxMarked = mdiCheckboxMarked
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
 
+    convertPanelnameToIcon = convertPanelnameToIcon
+
     get desktopLayout1() {
         let panels = this.$store.getters['gui/getPanels']('desktopLayout1')
         panels = panels.concat(this.missingPanelsDesktop)
@@ -186,4 +185,8 @@ export default class SettingsDashboardTabDesktop extends Mixins(DashboardMixin)
     opacity: 0.5;
     background: #c8ebfb;
 }
+
+.handle {
+    cursor: move;
+}
 </style>
diff --git a/src/components/settings/SettingsDashboardTabMobile.vue b/src/components/settings/SettingsDashboardTabMobile.vue
index ba61a40b1..bc02de942 100644
--- a/src/components/settings/SettingsDashboardTabMobile.vue
+++ b/src/components/settings/SettingsDashboardTabMobile.vue
@@ -25,7 +25,7 @@
                                 ghost-class="ghost"
                                 group="mobileViewport">
                                 <template v-for="element in mobileLayout">
-                                    <v-list-item :key="'item-mobile-' + element.name" link>
+                                    <v-list-item :key="'item-mobile-' + element.name">
                                         <v-row>
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
@@ -122,4 +122,8 @@ export default class SettingsDashboardTabMobile extends Mixins(DashboardMixin) {
     opacity: 0.5;
     background: #c8ebfb;
 }
+
+.handle {
+    cursor: move;
+}
 </style>
diff --git a/src/components/settings/SettingsDashboardTabTablet.vue b/src/components/settings/SettingsDashboardTabTablet.vue
index 58f559aab..77120258c 100644
--- a/src/components/settings/SettingsDashboardTabTablet.vue
+++ b/src/components/settings/SettingsDashboardTabTablet.vue
@@ -25,7 +25,7 @@
                                 ghost-class="ghost"
                                 group="tabletViewport">
                                 <template v-for="element in tabletLayout1">
-                                    <v-list-item :key="'item-tablet-' + element.name" link>
+                                    <v-list-item :key="'item-tablet-' + element.name">
                                         <v-row>
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
@@ -65,7 +65,7 @@
                                 ghost-class="ghost"
                                 group="tabletViewport">
                                 <template v-for="element in tabletLayout2">
-                                    <v-list-item :key="'item-tablet-' + element.name" link>
+                                    <v-list-item :key="'item-tablet-' + element.name">
                                         <v-row>
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
@@ -184,4 +184,8 @@ export default class SettingsDashboardTabTablet extends Mixins(DashboardMixin) {
     opacity: 0.5;
     background: #c8ebfb;
 }
+
+.handle {
+    cursor: move;
+}
 </style>
diff --git a/src/components/settings/SettingsDashboardTabWidescreen.vue b/src/components/settings/SettingsDashboardTabWidescreen.vue
index b8daa0875..60121ce04 100644
--- a/src/components/settings/SettingsDashboardTabWidescreen.vue
+++ b/src/components/settings/SettingsDashboardTabWidescreen.vue
@@ -25,7 +25,7 @@
                                 ghost-class="ghost"
                                 group="widescreenViewport">
                                 <template v-for="element in widescreenLayout1">
-                                    <v-list-item :key="'item-widescreen-' + element.name" link>
+                                    <v-list-item :key="'item-widescreen-' + element.name">
                                         <v-row>
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
@@ -65,7 +65,7 @@
                                 ghost-class="ghost"
                                 group="widescreenViewport">
                                 <template v-for="element in widescreenLayout2">
-                                    <v-list-item :key="'item-widescreen-' + element.name" link>
+                                    <v-list-item :key="'item-widescreen-' + element.name">
                                         <v-row>
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
@@ -105,7 +105,7 @@
                                 ghost-class="ghost"
                                 group="widescreenViewport">
                                 <template v-for="element in widescreenLayout3">
-                                    <v-list-item :key="'item-widescreen-' + element.name" link>
+                                    <v-list-item :key="'item-widescreen-' + element.name">
                                         <v-row>
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
@@ -255,4 +255,8 @@ export default class SettingsDashboardTabWidescreen extends Mixins(DashboardMixi
     opacity: 0.5;
     background: #c8ebfb;
 }
+
+.handle {
+    cursor: move;
+}
 </style>

From fc6690892b92b30a23487f006fc2dfd6ed12396d Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 10 Jun 2022 23:53:07 +0200
Subject: [PATCH 7/9] refactor: center align icons

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/settings/SettingsDashboardTabDesktop.vue    | 4 ++--
 src/components/settings/SettingsDashboardTabMobile.vue     | 2 +-
 src/components/settings/SettingsDashboardTabTablet.vue     | 4 ++--
 src/components/settings/SettingsDashboardTabWidescreen.vue | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/settings/SettingsDashboardTabDesktop.vue b/src/components/settings/SettingsDashboardTabDesktop.vue
index 099d93068..32f38fd20 100644
--- a/src/components/settings/SettingsDashboardTabDesktop.vue
+++ b/src/components/settings/SettingsDashboardTabDesktop.vue
@@ -26,7 +26,7 @@
                                 group="desktopViewport">
                                 <template v-for="element in desktopLayout1">
                                     <v-list-item :key="'item-desktop-' + element.name">
-                                        <v-row>
+                                        <v-row class="d-flex align-center">
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
                                                 <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
@@ -66,7 +66,7 @@
                                 group="desktopViewport">
                                 <template v-for="element in desktopLayout2">
                                     <v-list-item :key="'item-desktop-' + element.name">
-                                        <v-row>
+                                        <v-row class="d-flex align-center">
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
                                                 <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
diff --git a/src/components/settings/SettingsDashboardTabMobile.vue b/src/components/settings/SettingsDashboardTabMobile.vue
index bc02de942..92f8468b5 100644
--- a/src/components/settings/SettingsDashboardTabMobile.vue
+++ b/src/components/settings/SettingsDashboardTabMobile.vue
@@ -26,7 +26,7 @@
                                 group="mobileViewport">
                                 <template v-for="element in mobileLayout">
                                     <v-list-item :key="'item-mobile-' + element.name">
-                                        <v-row>
+                                        <v-row class="d-flex align-center">
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
                                                 <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
diff --git a/src/components/settings/SettingsDashboardTabTablet.vue b/src/components/settings/SettingsDashboardTabTablet.vue
index 77120258c..2bb7a9eeb 100644
--- a/src/components/settings/SettingsDashboardTabTablet.vue
+++ b/src/components/settings/SettingsDashboardTabTablet.vue
@@ -26,7 +26,7 @@
                                 group="tabletViewport">
                                 <template v-for="element in tabletLayout1">
                                     <v-list-item :key="'item-tablet-' + element.name">
-                                        <v-row>
+                                        <v-row class="d-flex align-center">
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
                                                 <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
@@ -66,7 +66,7 @@
                                 group="tabletViewport">
                                 <template v-for="element in tabletLayout2">
                                     <v-list-item :key="'item-tablet-' + element.name">
-                                        <v-row>
+                                        <v-row class="d-flex align-center">
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
                                                 <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
diff --git a/src/components/settings/SettingsDashboardTabWidescreen.vue b/src/components/settings/SettingsDashboardTabWidescreen.vue
index 60121ce04..2c8eb5084 100644
--- a/src/components/settings/SettingsDashboardTabWidescreen.vue
+++ b/src/components/settings/SettingsDashboardTabWidescreen.vue
@@ -106,7 +106,7 @@
                                 group="widescreenViewport">
                                 <template v-for="element in widescreenLayout3">
                                     <v-list-item :key="'item-widescreen-' + element.name">
-                                        <v-row>
+                                        <v-row class="d-flex align-center">
                                             <v-col class="col-auto px-0">
                                                 <v-icon class="handle pr-2">{{ mdiDragVertical }}</v-icon>
                                                 <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>

From da334c2af4661a17474ddb6d7b6302d3a561b4a3 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 10 Jun 2022 23:59:19 +0200
Subject: [PATCH 8/9] fix: prevent viewport settings being "off-toggled"

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/settings/SettingsDashboardTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings/SettingsDashboardTab.vue b/src/components/settings/SettingsDashboardTab.vue
index baaf0a22b..e01a4a75d 100644
--- a/src/components/settings/SettingsDashboardTab.vue
+++ b/src/components/settings/SettingsDashboardTab.vue
@@ -5,7 +5,7 @@
         <v-card-text>
             <v-row>
                 <v-col class="text-center">
-                    <v-btn-toggle v-model="currentViewport" class="mx-auto">
+                    <v-btn-toggle v-model="currentViewport" class="mx-auto" mandatory>
                         <v-btn value="mobile">
                             <span class="hidden-sm-and-down">{{ $t('Settings.DashboardTab.Mobile') }}</span>
                             <v-icon right class="hidden-sm-and-down">{{ mdiCellphone }}</v-icon>

From 7b6789207866c5003c75cc16cafe3f942f6dd96d Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Sat, 11 Jun 2022 00:06:21 +0200
Subject: [PATCH 9/9] refactor: move cursor on drag handle hover

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 1111a495b..c579cc5fd 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -105,8 +105,7 @@
                                     <v-list-item
                                         v-for="header of configurableHeaders"
                                         :key="header.value"
-                                        class="minHeight36"
-                                        link>
+                                        class="minHeight36">
                                         <v-row>
                                             <v-col class="col-auto pr-0">
                                                 <v-icon class="handle">{{ mdiDragVertical }}</v-icon>
@@ -1376,4 +1375,8 @@ export default class GcodefilesPanel extends Mixins(BaseMixin) {
     position: relative;
     top: 1px;
 }
+
+.handle {
+    cursor: move;
+}
 </style>