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

Create new dropdown & -item component

This commit is contained in:
kolaente 2021-01-30 13:27:18 +01:00
parent ba033e17b3
commit f49bc6242b
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
5 changed files with 134 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/misc/dropdown-item.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<router-link
:to="to"
class="dropdown-item">
<span class="icon" v-if="icon !== ''">
<icon :icon="icon"/>
</span>
<span>
<slot></slot>
</span>
</router-link>
</template>
<script>
export default {
name: 'dropdown-item',
props: {
to: {
required: true,
},
icon: {
type: String,
required: false,
default: '',
}
},
}
</script>

48
src/components/misc/dropdown.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="dropdown is-right is-active" ref="dropdown">
<div class="dropdown-trigger">
<icon :icon="triggerIcon" @click="open = !open" class="icon"/>
</div>
<transition name="fade">
<div class="dropdown-menu" v-if="open">
<div class="dropdown-content">
<slot></slot>
</div>
</div>
</transition>
</div>
</template>
<script>
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
export default {
name: 'dropdown',
data() {
return {
open: false,
}
},
mounted() {
document.addEventListener('click', this.hide)
},
beforeDestroy() {
document.removeEventListener('click', this.hide)
},
props: {
triggerIcon: {
type: String,
default: 'ellipsis-h',
},
},
methods: {
hide(e) {
if (this.open) {
closeWhenClickedOutside(e, this.$refs.dropdown, () => {
this.open = false
})
}
},
},
}
</script>

108
src/components/namespace/namespace-settings-dropdown.vue
View File

@ -1,80 +1,58 @@
<template>
<div class="dropdown is-right is-active" ref="dropdown">
<div class="dropdown-trigger">
<icon icon="ellipsis-h" @click="open = !open" class="icon"/>
</div>
<transition name="fade">
<div class="dropdown-menu" v-if="open">
<div class="dropdown-content">
<template v-if="namespace.isArchived">
<router-link
:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
class="dropdown-item">
Un-Archive this namespace
</router-link>
</template>
<template v-else>
<router-link
:to="{ name: 'namespace.settings.edit', params: { id: namespace.id } }"
class="dropdown-item">
Edit this namespace
</router-link>
<router-link
:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
class="dropdown-item">
Share this namespace
</router-link>
<router-link
:to="{ name: 'list.create', params: { id: namespace.id } }"
class="dropdown-item">
Create a new list
</router-link>
<router-link
:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
class="dropdown-item">
Archive this namespace
</router-link>
<router-link
:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"
class="dropdown-item">
Delete this namespace
</router-link>
</template>
</div>
</div>
</transition>
</div>
<dropdown>
<template v-if="namespace.isArchived">
<dropdown-item
:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
icon="archive"
>
Un-Archive this namespace
</dropdown-item>
</template>
<template v-else>
<dropdown-item
:to="{ name: 'namespace.settings.edit', params: { id: namespace.id } }"
>
Edit this namespace
</dropdown-item>
<dropdown-item
:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
>
Share this namespace
</dropdown-item>
<dropdown-item
:to="{ name: 'list.create', params: { id: namespace.id } }"
>
Create a new list
</dropdown-item>
<dropdown-item
:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
icon="archive"
>
Archive this namespace
</dropdown-item>
<dropdown-item
:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"
>
Delete this namespace
</dropdown-item>
</template>
</dropdown>
</template>
<script>
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
import Dropdown from '@/components/misc/dropdown'
import DropdownItem from '@/components/misc/dropdown-item'
export default {
name: 'namespace-settings-dropdown',
data() {
return {
open: false,
}
},
mounted() {
document.addEventListener('click', this.hide)
},
beforeDestroy() {
document.removeEventListener('click', this.hide)
components: {
DropdownItem,
Dropdown,
},
props: {
namespace: {
required: true,
},
},
methods: {
hide(e) {
if (this.open) {
closeWhenClickedOutside(e, this.$refs.dropdown, () => {
this.open = false
})
}
},
},
}
</script>

2
src/main.js
View File

@ -58,6 +58,7 @@ import {
faCoffee,
faCocktail,
faEllipsisH,
faArchive,
} from '@fortawesome/free-solid-svg-icons'
import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle, faSun} from '@fortawesome/free-regular-svg-icons'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
@ -146,6 +147,7 @@ library.add(faChessKnight)
library.add(faCoffee)
library.add(faCocktail)
library.add(faEllipsisH)
library.add(faArchive)
Vue.component('icon', FontAwesomeIcon)

17
src/styles/theme/theme.scss
View File

@ -72,11 +72,20 @@ button.table {
margin-bottom: 0 !important;
}
.dropdown-item.is-disabled {
cursor: not-allowed;
.dropdown-item {
display: flex;
align-items: center;
&:hover {
background-color: transparent;
.icon {
padding-right: .5rem;
}
&.is-disabled {
cursor: not-allowed;
&:hover {
background-color: transparent;
}
}
}