added Toggle Grid/List View into the spotlight

This commit is contained in:
Čarodej
2022-01-06 15:05:45 +01:00
parent 31ec9b4fda
commit 86dac75071
8 changed files with 45 additions and 19 deletions

View File

@@ -3,7 +3,7 @@
<!--Overlay component-->
<div
@click.capture="hidePopover"
class="absolute top-12 z-20 w-52 dark:bg-dark-foreground bg-white shadow-xl rounded-lg overflow-hidden"
class="absolute top-12 z-20 w-60 dark:bg-dark-foreground bg-white shadow-xl rounded-lg overflow-hidden"
:class="{'right-0': side === 'left', 'left-0': side === 'right'}"
>
<slot></slot>

View File

@@ -81,7 +81,7 @@ export default {
this.$getDataByLocation()
},
changePreview(previewType) {
this.$store.dispatch('changePreviewType', previewType)
this.$store.dispatch('togglePreviewType', previewType)
}
},
mounted() {

View File

@@ -22,7 +22,7 @@
<!--Password Switch-->
<div>
<AppInputSwitch :title="$t('shared_form.label_password_protection')" :description="$t('popup.share.password_description')">
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0" />
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="shareOptions.isPassword" />
</AppInputSwitch>
<!--Set password-->
@@ -36,7 +36,7 @@
<!--Expiration switch-->
<div>
<AppInputSwitch :title="$t('expiration')" :description="$t('popup.share.expiration_description')">
<SwitchInput v-model="isExpiration" class="switch" :state="0" />
<SwitchInput v-model="isExpiration" class="switch" :state="isExpiration" />
</AppInputSwitch>
<!--Set expiration-->
@@ -48,7 +48,7 @@
<!--Send on emails switch-->
<div>
<AppInputSwitch :title="$t('popup.share.email_send')" :description="$t('popup.share.email_description')">
<SwitchInput v-model="isEmailSharing" class="switch" :state="0" />
<SwitchInput v-model="isEmailSharing" class="switch" :state="isEmailSharing" />
</AppInputSwitch>
<!--Set expiration-->

View File

@@ -99,6 +99,7 @@
<maximize2-icon v-if="result.action.value === 'full-screen-mode'" size="18" class="vue-feather text-theme"/>
<power-icon v-if="result.action.value === 'log-out'" size="18" class="vue-feather text-theme"/>
<trash-icon v-if="result.action.value === 'empty-trash'" size="18" class="vue-feather text-theme"/>
<grid-icon v-if="result.action.value === 'toggle-grid-list'" size="18" class="vue-feather text-theme"/>
<b class="font-bold text-sm ml-3.5">
{{ result.title }}
@@ -187,6 +188,7 @@
<script>
import {
GridIcon,
Maximize2Icon,
ArrowDownIcon,
ArrowUpIcon,
@@ -225,6 +227,7 @@ import axios from "axios"
export default {
name: 'Spotlight',
components: {
GridIcon,
CategoryName,
FilterSuggestion,
Maximize2Icon,
@@ -424,6 +427,13 @@ export default {
]
let functionList = [
{
title: this.$t('Toggle Grid/List View'),
action: {
type: 'function',
value: 'toggle-grid-list',
},
},
{
title: this.$t('Toggle Dark/Light Mode'),
action: {
@@ -564,6 +574,10 @@ export default {
if (arg.action.type === 'function') {
if (arg.action.value === 'toggle-grid-list') {
this.$store.dispatch('togglePreviewType')
}
if (arg.action.value === 'dark-mode') {
this.$store.dispatch('toggleDarkMode', !this.isDarkMode)
}