vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Move list settings dropdown to new component

This commit is contained in:
kolaente 2021-01-26 21:57:31 +01:00
parent 63f70fed58
commit 1ec794fb5e
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 63 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/home/topNavigation.vue
View File

@ -32,29 +32,7 @@
{{ currentList.title === '' ? 'Loading...' : currentList.title }}
</h1>
<div class="dropdown is-right is-active" v-if="canWriteCurrentList">
<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>
<list-settings-dropdown v-if="canWriteCurrentList" :current-list="currentList"/>
</div>
<div class="navbar-end">
@ -63,9 +41,9 @@
<img :src="userAvatar" alt="" class="avatar"/>
<div class="dropdown is-right is-active">
<div class="dropdown-trigger">
<x-button
<x-button
@click.stop="userMenuActive = !userMenuActive"
type="secondary"
type="secondary"
:shadow="false">
<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
<span class="icon is-small">
@ -112,22 +90,22 @@ import {mapState} from 'vuex'
import {CURRENT_LIST} from '@/store/mutation-types'
import Rights from '@/models/rights.json'
import Update from '@/components/home/update'
import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
export default {
name: 'topNavigation',
data() {
return {
userMenuActive: false,
listSettingsOpen: false,
}
},
components: {
ListSettingsDropdown,
Update,
},
created() {
// This will hide the menu once clicked outside of it
this.$nextTick(() => document.addEventListener('click', () => this.userMenuActive = false))
this.$nextTick(() => document.addEventListener('click', () => this.listSettingsOpen = false))
},
computed: mapState({
userInfo: state => state.auth.info,

58
src/components/list/list-settings-dropdown.vue Normal file
View File

@ -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>