From adea64249a34a532eb42932b0641fede1e324d52 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 4 Aug 2021 22:05:28 +0200
Subject: [PATCH] bugfix: workaround for dashboard panel sorting on mobile
 devices

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../settings/SettingsDashboardTabDesktop.vue      | 10 ++++++----
 .../settings/SettingsDashboardTabMobile.vue       | 13 ++++++++-----
 .../settings/SettingsDashboardTabTablet.vue       | 10 ++++++----
 .../settings/SettingsDashboardTabWidescreen.vue   | 15 +++++++++------
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/components/settings/SettingsDashboardTabDesktop.vue b/src/components/settings/SettingsDashboardTabDesktop.vue
index fd495a08..84e0e054 100644
--- a/src/components/settings/SettingsDashboardTabDesktop.vue
+++ b/src/components/settings/SettingsDashboardTabDesktop.vue
@@ -23,11 +23,12 @@
                                     <v-icon color="grey lighten-1">mdi-lock</v-icon>
                                 </v-list-item-action>
                             </v-list-item>
-                            <draggable v-model="desktopLayout1" class="v-list-item-group" ghost-class="ghost" group="desktopViewport">
+                            <draggable v-model="desktopLayout1" :handle="isMobile ? '.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-list-item-icon>
-                                            <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-icon v-if="isMobile" class="handle">mdi-arrow-up-down</v-icon>
+                                            <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                         </v-list-item-icon>
                                         <v-list-item-content>
                                             <v-list-item-title>{{ $t('Panels.'+capitalize(element.name)+'Panel.Headline') }}</v-list-item-title>
@@ -45,11 +46,12 @@
                 <v-col class="col-12 col-md-6">
                     <v-card class="mx-auto" max-width="300" tile >
                         <v-list dense>
-                            <draggable v-model="desktopLayout2" class="v-list-item-group" ghost-class="ghost" group="desktopViewport">
+                            <draggable v-model="desktopLayout2" :handle="isMobile ? '.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-list-item-icon>
-                                            <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-icon v-if="isMobile" class="handle">mdi-arrow-up-down</v-icon>
+                                            <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                         </v-list-item-icon>
                                         <v-list-item-content>
                                             <v-list-item-title>{{ $t('Panels.'+capitalize(element.name)+'Panel.Headline') }}</v-list-item-title>
diff --git a/src/components/settings/SettingsDashboardTabMobile.vue b/src/components/settings/SettingsDashboardTabMobile.vue
index 2a487fbd..77bcb5c3 100644
--- a/src/components/settings/SettingsDashboardTabMobile.vue
+++ b/src/components/settings/SettingsDashboardTabMobile.vue
@@ -23,18 +23,21 @@
                                     <v-icon color="grey lighten-1">mdi-lock</v-icon>
                                 </v-list-item-action>
                             </v-list-item>
-                            <draggable v-model="mobileLayout" class="v-list-item-group" ghost-class="ghost" group="mobileViewport">
+                            <draggable v-model="mobileLayout" :handle="isMobile ? '.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-list-item-icon>
-                                            <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-icon v-if="isMobile" class="handle">mdi-arrow-up-down</v-icon>
+                                            <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                         </v-list-item-icon>
                                         <v-list-item-content>
-                                            <v-list-item-title>{{ $t('Panels.'+capitalize(element.name)+'Panel.Headline') }}</v-list-item-title>
+                                            <v-list-item-title>
+                                                {{ $t('Panels.'+capitalize(element.name)+'Panel.Headline') }}
+                                            </v-list-item-title>
                                         </v-list-item-content>
                                         <v-list-item-action>
-                                            <v-icon v-if="!element.visable" color="grey lighten-1" @click.stop="changeState(element.name,true)">mdi-checkbox-blank-outline</v-icon>
-                                            <v-icon v-else color="primary" @click.stop="changeState(element.name,false)">mdi-checkbox-marked</v-icon>
+                                            <v-icon v-if="!element.visable" color="grey lighten-1" @click="changeState(element.name, true)">mdi-checkbox-blank-outline</v-icon>
+                                            <v-icon v-else color="primary" @click="changeState(element.name, false)">mdi-checkbox-marked</v-icon>
                                         </v-list-item-action>
                                     </v-list-item>
                                 </template>
diff --git a/src/components/settings/SettingsDashboardTabTablet.vue b/src/components/settings/SettingsDashboardTabTablet.vue
index e75531c2..a803b22e 100644
--- a/src/components/settings/SettingsDashboardTabTablet.vue
+++ b/src/components/settings/SettingsDashboardTabTablet.vue
@@ -23,11 +23,12 @@
                                     <v-icon color="grey lighten-1">mdi-lock</v-icon>
                                 </v-list-item-action>
                             </v-list-item>
-                            <draggable v-model="tabletLayout1" class="v-list-item-group" ghost-class="ghost" group="tabletViewport">
+                            <draggable v-model="tabletLayout1" :handle="isMobile ? '.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-list-item-icon>
-                                            <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-icon v-if="isMobile" class="handle">mdi-arrow-up-down</v-icon>
+                                            <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                         </v-list-item-icon>
                                         <v-list-item-content>
                                             <v-list-item-title>{{ $t('Panels.'+capitalize(element.name)+'Panel.Headline') }}</v-list-item-title>
@@ -45,11 +46,12 @@
                 <v-col class="col-12 col-md-6">
                     <v-card class="mx-auto" max-width="300" tile >
                         <v-list dense>
-                            <draggable v-model="tabletLayout2" class="v-list-item-group" ghost-class="ghost" group="tabletViewport">
+                            <draggable v-model="tabletLayout2" :handle="isMobile ? '.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-list-item-icon>
-                                            <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-icon v-if="isMobile" class="handle">mdi-arrow-up-down</v-icon>
+                                            <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                         </v-list-item-icon>
                                         <v-list-item-content>
                                             <v-list-item-title>{{ $t('Panels.'+capitalize(element.name)+'Panel.Headline') }}</v-list-item-title>
diff --git a/src/components/settings/SettingsDashboardTabWidescreen.vue b/src/components/settings/SettingsDashboardTabWidescreen.vue
index ee420a8d..455e8610 100644
--- a/src/components/settings/SettingsDashboardTabWidescreen.vue
+++ b/src/components/settings/SettingsDashboardTabWidescreen.vue
@@ -23,11 +23,12 @@
                                     <v-icon color="grey lighten-1">mdi-lock</v-icon>
                                 </v-list-item-action>
                             </v-list-item>
-                            <draggable v-model="widescreenLayout1" class="v-list-item-group" ghost-class="ghost" group="widescreenViewport">
+                            <draggable v-model="widescreenLayout1" :handle="isMobile ? '.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-list-item-icon>
-                                            <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-icon v-if="isMobile" class="handle">mdi-arrow-up-down</v-icon>
+                                            <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                         </v-list-item-icon>
                                         <v-list-item-content>
                                             <v-list-item-title>{{ $t('Panels.'+capitalize(element.name)+'Panel.Headline') }}</v-list-item-title>
@@ -45,11 +46,12 @@
                 <v-col class="col-12 col-md-4">
                     <v-card class="mx-auto" max-width="300" tile >
                         <v-list dense>
-                            <draggable v-model="widescreenLayout2" class="v-list-item-group" ghost-class="ghost" group="widescreenViewport">
+                            <draggable v-model="widescreenLayout2" :handle="isMobile ? '.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-list-item-icon>
-                                            <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-icon v-if="isMobile" class="handle">mdi-arrow-up-down</v-icon>
+                                            <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                         </v-list-item-icon>
                                         <v-list-item-content>
                                             <v-list-item-title>{{ $t('Panels.'+capitalize(element.name)+'Panel.Headline') }}</v-list-item-title>
@@ -67,11 +69,12 @@
                 <v-col class="col-12 col-md-4">
                     <v-card class="mx-auto" max-width="300" tile >
                         <v-list dense>
-                            <draggable v-model="widescreenLayout3" class="v-list-item-group" ghost-class="ghost" group="widescreenViewport">
+                            <draggable v-model="widescreenLayout3" :handle="isMobile ? '.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-list-item-icon>
-                                            <v-icon v-text="convertPanelnameToIcon(element.name)"></v-icon>
+                                            <v-icon v-if="isMobile" class="handle">mdi-arrow-up-down</v-icon>
+                                            <v-icon v-else v-text="convertPanelnameToIcon(element.name)"></v-icon>
                                         </v-list-item-icon>
                                         <v-list-item-content>
                                             <v-list-item-title>{{ $t('Panels.'+capitalize(element.name)+'Panel.Headline') }}</v-list-item-title>