Skip to content

Commit

Permalink
UI / UX: menus: improve design and consistency, add new features
Browse files Browse the repository at this point in the history
  • Loading branch information
@aleksey-hoffman
aleksey-hoffman committed Nov 13, 2021
1 parent 83021e0 commit 487a4fd
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 25 deletions.
103 changes: 91 additions & 12 deletions src/components/ClipboardToolbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,14 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
{{itemClipboardDescription}}
</div>

<v-menu top offset-y>
<template v-slot:activator="{ on }">
<v-menu
v-if="fsClipboard.type === 'copy'"
v-model="clipboardMenuValue"
:close-on-content-click="false"
top
offset-y
>
<template v-slot:activator="{on}">
<v-btn
class="clipboard-toolbar__button"
v-on="on"
Expand All @@ -66,15 +72,37 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
</div>
</v-btn>
</template>
<v-list dense max-width="300" max-height="280">
<v-list
class="custom-scrollbar"
width="300"
height="280"
dense
>
<v-list-item>
<v-text-field
class="pt-0 mb-2"
v-model="clipboardMenuFilter"
label="Filter"
single-line
hide-details
></v-text-field>
</v-list-item>
<v-list-item
v-for="(item, index) in fsClipboard.items"
v-for="(item, index) in fsClipboardItemsFiltered"
:key="index"
>
<v-list-item-content>
<v-list-item-title>{{item.name}}</v-list-item-title>
<v-list-item-subtitle>{{item.path}}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar>
<v-btn
@click="removeDirItemFromFsClipboard(item)"
small
icon
><v-icon size="18px">mdi-close</v-icon>
</v-btn>
</v-list-item-avatar>
</v-list-item>
</v-list>
</v-menu>
Expand Down Expand Up @@ -116,8 +144,14 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
{{itemClipboardDescription}}
</div>

<v-menu top offset-y>
<template v-slot:activator="{ on }">
<v-menu
v-if="fsClipboard.type === 'move'"
v-model="clipboardMenuValue"
:close-on-content-click="false"
top
offset-y
>
<template v-slot:activator="{on}">
<v-btn
class="clipboard-toolbar__button"
v-on="on"
Expand All @@ -131,26 +165,48 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
</div>
</v-btn>
</template>
<v-list dense max-width="300" max-height="280">
<v-list
class="custom-scrollbar"
width="300"
height="280"
dense
>
<v-list-item>
<v-text-field
class="pt-0 mb-2"
v-model="clipboardMenuFilter"
label="Filter"
single-line
hide-details
></v-text-field>
</v-list-item>
<v-list-item
v-for="(item, index) in fsClipboard.items"
v-for="(item, index) in fsClipboardItemsFiltered"
:key="index"
>
<v-list-item-content>
<v-list-item-title>{{item.name}}</v-list-item-title>
<v-list-item-subtitle>{{item.path}}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar>
<v-btn
@click="removeDirItemFromFsClipboard(item)"
small
icon
><v-icon size="18px">mdi-close</v-icon>
</v-btn>
</v-list-item-avatar>
</v-list-item>
</v-list>
</v-menu>

<v-tooltip top :disabled="!movePreparedDirItemsIsDisabled">
<template v-slot:activator="{ on }">
<v-tooltip top :disabled="!canMoveClipboardItems">
<template v-slot:activator="{on}">
<div v-on="on">
<v-btn
class="clipboard-toolbar__button"
v-if="fsClipboard.items.length !== 0"
:disabled="movePreparedDirItemsIsDisabled"
:disabled="canMoveClipboardItems"
@click="$store.dispatch('PASTE_FS_CLIPBOARD_DIR_ITEMS')"
:text="$vuetify.breakpoint.mdAndUp"
:icon="$vuetify.breakpoint.smAndDown"
Expand Down Expand Up @@ -189,6 +245,22 @@ import {mapFields} from 'vuex-map-fields'
const PATH = require('path')
export default {
data () {
return {
clipboardMenuValue: false,
clipboardMenuFilter: '',
}
},
watch: {
'fsClipboard.items' () {
if (this.fsClipboard.items.length === 0) {
this.clipboardMenuValue = false
}
},
clipboardMenuValue () {
this.clipboardMenuFilter = ''
}
},
computed: {
...mapFields({
currentDir: 'navigatorView.currentDir',
Expand Down Expand Up @@ -228,7 +300,10 @@ export default {
const itemWord = this.$localizeUtils.pluralize(itemLength, 'item')
return `${type}: ${itemLength} ${itemWord}`
},
movePreparedDirItemsIsDisabled () {
fsClipboardItemsFiltered () {
return this.fsClipboard.items.filter(item => item.name.includes(this.clipboardMenuFilter))
},
canMoveClipboardItems () {
return this.fsClipboard.items.some(item => {
return this.currentDir.path === PATH.parse(item.path).dir
})
Expand All @@ -242,6 +317,10 @@ export default {
},
discardFsClipboardItems () {
this.$store.dispatch('CLEAR_FS_CLIPBOARD')
},
removeDirItemFromFsClipboard (item) {
let itemIndex = this.fsClipboard.items.findIndex(listItem => listItem.path === item.path)
this.fsClipboard.items.splice(itemIndex, 1)
}
}
}
Expand Down
25 changes: 17 additions & 8 deletions src/styles/globalVuetifyOverrides.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
.v-input--selection-controls__input {
margin-right: 12px;
}

#app
.v-icon {
color: var(--icon-color-2);
}

#app
.v-navigation-drawer,
Expand Down Expand Up @@ -29,15 +34,19 @@
transition: 0s ease !important;
}

.v-menu__content {
box-shadow: var(--context-menu-shadow) !important;
z-index: 10;
}
#app
.v-menu__content {
z-index: 10;
background-color: var(--context-menu-bg-color);
box-shadow: var(--context-menu-shadow);
}

.v-menu__content .v-list {
background: var(--context-menu-bg-color) !important;
border-radius: 0 !important;
}
#app
.v-menu__content
.v-list {
background-color: var(--context-menu-bg-color);
border-radius: 0;
}

.v-list-item__action:first-child,
.v-list-item__icon:first-child {
Expand Down
23 changes: 18 additions & 5 deletions src/views/Settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,14 +472,19 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
</v-layout>

<v-layout align-center>
<v-select
<v-autocomplete
v-model="windowTransparencyEffectDataBackgroundSelected"
:items="windowTransparencyEffectDataBackgroundItems"
item-text="fileNameBase"
return-object
label="Overlay background"
:menu-props="{
contentClass: 'custom-scrollbar',
offsetY: true
}"
attach
return-object
style="max-width: 400px"
></v-select>
></v-autocomplete>

<v-tooltip bottom>
<template v-slot:activator="{ on }">
Expand Down Expand Up @@ -1357,6 +1362,10 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
:items="globalSearchAutoScanIntervalItems"
:label="`Auto scan period ${disabledInDev}`"
:disabled="scanInProgress"
:menu-props="{
contentClass: 'custom-scrollbar',
offsetY: true
}"
style="max-width: 200px"
>
<template v-slot:selection="{ item }">
Expand All @@ -1375,13 +1384,17 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
>
<template v-slot:activator="{ on }">
<div v-on="on" style="display: inline-block;">
<v-combobox
<v-select
class="mt-0"
v-model="globalSearchScanDepth"
:items="suggestedGlobalSearchScanDepthItems"
:disabled="scanInProgress"
@blur="handleBlurGlobalSearchScanDepth"
label="Scan depth"
:menu-props="{
contentClass: 'custom-scrollbar',
offsetY: true
}"
style="max-width: 200px"
>
<template v-slot:selection>
Expand All @@ -1390,7 +1403,7 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
<template v-slot:item="{item}">
{{item}} directories
</template>
</v-combobox>
</v-select>
</div>
</template>
<span>
Expand Down

0 comments on commit 487a4fd

Please sign in to comment.