Move list settings dropdown to new component
This commit is contained in:
parent
63f70fed58
commit
1ec794fb5e
|
@ -32,29 +32,7 @@
|
||||||
{{ currentList.title === '' ? 'Loading...' : currentList.title }}
|
{{ currentList.title === '' ? 'Loading...' : currentList.title }}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div class="dropdown is-right is-active" v-if="canWriteCurrentList">
|
<list-settings-dropdown v-if="canWriteCurrentList" :current-list="currentList"/>
|
||||||
<div class="dropdown-trigger">
|
|
||||||
<icon icon="ellipsis-h" @click.stop="listSettingsOpen = !listSettingsOpen"/>
|
|
||||||
</div>
|
|
||||||
<transition name="fade">
|
|
||||||
<div class="dropdown-menu" v-if="listSettingsOpen">
|
|
||||||
<div class="dropdown-content">
|
|
||||||
<router-link :to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }" class="dropdown-item">
|
|
||||||
Edit this list
|
|
||||||
</router-link>
|
|
||||||
<router-link :to="{ name: 'list.list.settings.background', params: { id: currentList.id } }" class="dropdown-item">
|
|
||||||
Set the background
|
|
||||||
</router-link>
|
|
||||||
<router-link :to="{ name: 'list.list.settings.duplicate', params: { id: currentList.id } }" class="dropdown-item">
|
|
||||||
Duplicate this list
|
|
||||||
</router-link>
|
|
||||||
<router-link :to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }" class="dropdown-item">
|
|
||||||
Delete this list
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
|
@ -63,9 +41,9 @@
|
||||||
<img :src="userAvatar" alt="" class="avatar"/>
|
<img :src="userAvatar" alt="" class="avatar"/>
|
||||||
<div class="dropdown is-right is-active">
|
<div class="dropdown is-right is-active">
|
||||||
<div class="dropdown-trigger">
|
<div class="dropdown-trigger">
|
||||||
<x-button
|
<x-button
|
||||||
@click.stop="userMenuActive = !userMenuActive"
|
@click.stop="userMenuActive = !userMenuActive"
|
||||||
type="secondary"
|
type="secondary"
|
||||||
:shadow="false">
|
:shadow="false">
|
||||||
<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
|
<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
|
||||||
<span class="icon is-small">
|
<span class="icon is-small">
|
||||||
|
@ -112,22 +90,22 @@ import {mapState} from 'vuex'
|
||||||
import {CURRENT_LIST} from '@/store/mutation-types'
|
import {CURRENT_LIST} from '@/store/mutation-types'
|
||||||
import Rights from '@/models/rights.json'
|
import Rights from '@/models/rights.json'
|
||||||
import Update from '@/components/home/update'
|
import Update from '@/components/home/update'
|
||||||
|
import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'topNavigation',
|
name: 'topNavigation',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userMenuActive: false,
|
userMenuActive: false,
|
||||||
listSettingsOpen: false,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
ListSettingsDropdown,
|
||||||
Update,
|
Update,
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
// This will hide the menu once clicked outside of it
|
// This will hide the menu once clicked outside of it
|
||||||
this.$nextTick(() => document.addEventListener('click', () => this.userMenuActive = false))
|
this.$nextTick(() => document.addEventListener('click', () => this.userMenuActive = false))
|
||||||
this.$nextTick(() => document.addEventListener('click', () => this.listSettingsOpen = false))
|
|
||||||
},
|
},
|
||||||
computed: mapState({
|
computed: mapState({
|
||||||
userInfo: state => state.auth.info,
|
userInfo: state => state.auth.info,
|
||||||
|
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<div class="dropdown is-right is-active">
|
||||||
|
<div class="dropdown-trigger">
|
||||||
|
<icon icon="ellipsis-h" @click.stop="listSettingsOpen = !listSettingsOpen"/>
|
||||||
|
</div>
|
||||||
|
<transition name="fade">
|
||||||
|
<div class="dropdown-menu" v-if="listSettingsOpen">
|
||||||
|
<div class="dropdown-content">
|
||||||
|
<router-link
|
||||||
|
:to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }"
|
||||||
|
class="dropdown-item">
|
||||||
|
Edit this list
|
||||||
|
</router-link>
|
||||||
|
<router-link
|
||||||
|
:to="{ name: 'list.list.settings.background', params: { id: currentList.id } }"
|
||||||
|
v-if="backgroundsEnabled"
|
||||||
|
class="dropdown-item">
|
||||||
|
Change the background
|
||||||
|
</router-link>
|
||||||
|
<router-link
|
||||||
|
:to="{ name: 'list.list.settings.duplicate', params: { id: currentList.id } }"
|
||||||
|
class="dropdown-item">
|
||||||
|
Duplicate this list
|
||||||
|
</router-link>
|
||||||
|
<router-link
|
||||||
|
:to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }"
|
||||||
|
class="dropdown-item">
|
||||||
|
Delete this list
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'list-settings-dropdown',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
listSettingsOpen: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.$nextTick(() => document.addEventListener('click', () => this.listSettingsOpen = false))
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
currentList: {
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: mapState({
|
||||||
|
backgroundsEnabled: state => state.config.enabledBackgroundProviders.length > 0,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
</script>
|
Reference in New Issue