Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: replace drag handle icons #879

Merged
merged 9 commits into from
Jun 11, 2022
Merged

refactor: replace drag handle icons #879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0c165b7
refactor: tweak dashboard settings visuals
dw-0 Jun 10, 2022
2ba7229
refactor: remove unused import
dw-0 Jun 10, 2022
fd08ba7
refactor(GcodefilesPanel.vue): replace drag handle icons
dw-0 Jun 10, 2022
1cd1796
refactor(SettingsMacrosTabExpert.vue): replace drag handle icons
dw-0 Jun 10, 2022
6f1425d
style(GcodefilesPanel.vue): styleguide - move styles to the end
dw-0 Jun 10, 2022
2f0a70c
refactor: move cursor on drag handle hover
dw-0 Jun 10, 2022
fc66908
refactor: center align icons
dw-0 Jun 10, 2022
da334c2
fix: prevent viewport settings being "off-toggled"
dw-0 Jun 10, 2022
7b67892
refactor: move cursor on drag handle hover
dw-0 Jun 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 46 additions & 43 deletions src/components/panels/GcodefilesPanel.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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