Skip to content

Commit

Permalink
refactor: replace drag handle icons (#879)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dw-0
dw-0 authored Jun 11, 2022
1 parent 76c04be commit a6c09bc
Show file tree
Hide file tree
Showing 7 changed files with 184 additions and 170 deletions.
89 changes: 46 additions & 43 deletions src/components/panels/GcodefilesPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -143,11 +105,10 @@
<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">{{ mdiArrowUpDown }}</v-icon>
<v-icon class="handle">{{ mdiDragVertical }}</v-icon>
</v-col>
<v-col>
{{ header.text }}
Expand Down Expand Up @@ -541,7 +502,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,
Expand Down Expand Up @@ -614,7 +575,7 @@ export default class GcodefilesPanel extends Mixins(BaseMixin) {
mdiCloseThick = mdiCloseThick
mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
mdiCheckboxMarked = mdiCheckboxMarked
mdiArrowUpDown = mdiArrowUpDown
mdiDragVertical = mdiDragVertical
validGcodeExtensions = validGcodeExtensions
formatDate = formatDate
Expand Down Expand Up @@ -1377,3 +1338,45 @@ 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;
}
.handle {
cursor: move;
}
</style>
2 changes: 1 addition & 1 deletion src/components/settings/SettingsDashboardTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
68 changes: 35 additions & 33 deletions src/components/settings/SettingsDashboardTabDesktop.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
<style scoped>
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
</style>

<template>
<v-card flat>
<v-card-text>
Expand All @@ -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-list-item :key="'item-desktop-' + element.name">
<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>
</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"
Expand All @@ -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-list-item :key="'item-desktop-' + element.name">
<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>
</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"
Expand Down Expand Up @@ -116,29 +109,27 @@
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, mdiArrowUpDown } from '@mdi/js'
import { mdiInformation, mdiCheckboxMarked, mdiCheckboxBlankOutline, mdiLock, mdiDragVertical } from '@mdi/js'
@Component({
components: {
draggable,
},
})
export default class SettingsDashboardTabDesktop extends Mixins(DashboardMixin) {
capitalize = capitalize
convertPanelnameToIcon = convertPanelnameToIcon
/**
* Icons
*/
mdiLock = mdiLock
mdiInformation = mdiInformation
mdiArrowUpDown = mdiArrowUpDown
mdiDragVertical = mdiDragVertical
mdiCheckboxMarked = mdiCheckboxMarked
mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
convertPanelnameToIcon = convertPanelnameToIcon
get desktopLayout1() {
let panels = this.$store.getters['gui/getPanels']('desktopLayout1')
panels = panels.concat(this.missingPanelsDesktop)
Expand Down Expand Up @@ -188,3 +179,14 @@ export default class SettingsDashboardTabDesktop extends Mixins(DashboardMixin)
}
}
</script>

<style scoped>
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.handle {
cursor: move;
}
</style>
47 changes: 25 additions & 22 deletions src/components/settings/SettingsDashboardTabMobile.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
<style scoped>
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
</style>

<template>
<v-card flat>
<v-card-text>
Expand All @@ -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-list-item :key="'item-mobile-' + element.name">
<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>
</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"
Expand Down Expand Up @@ -77,8 +70,8 @@ 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 { mdiArrowUpDown, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiInformation, mdiLock } from '@mdi/js'
import { convertPanelnameToIcon } from '@/plugins/helpers'
import { mdiDragVertical, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiInformation, mdiLock } from '@mdi/js'
@Component({
components: {
draggable,
Expand All @@ -90,11 +83,10 @@ export default class SettingsDashboardTabMobile extends Mixins(DashboardMixin) {
*/
mdiLock = mdiLock
mdiInformation = mdiInformation
mdiArrowUpDown = mdiArrowUpDown
mdiDragVertical = mdiDragVertical
mdiCheckboxMarked = mdiCheckboxMarked
mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
capitalize = capitalize
convertPanelnameToIcon = convertPanelnameToIcon
get mobileLayout() {
Expand Down Expand Up @@ -124,3 +116,14 @@ export default class SettingsDashboardTabMobile extends Mixins(DashboardMixin) {
}
}
</script>

<style scoped>
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.handle {
cursor: move;
}
</style>
Loading

0 comments on commit a6c09bc

Please sign in to comment.