CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bugfix: workaround for dashboard panel sorting on mobile devices

Browse Source 
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-08-04 22:05:28 +02:00
parent 0f6168dc04
commit adea64249a
4 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/settings/SettingsDashboardTabDesktop.vue
View File

@ -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>

13
src/components/settings/SettingsDashboardTabMobile.vue
View File

@ -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>

10
src/components/settings/SettingsDashboardTabTablet.vue
View File

@ -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>

15
src/components/settings/SettingsDashboardTabWidescreen.vue
View File

@ -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>