ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Move to vue-material-design-icons

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2022-05-11 21:39:54 +02:00
parent cb27f36f66
commit 9de6a61ea5
26 changed files with 183 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Controls.vue
View File

@@ -76,10 +76,16 @@
:aria-label="t('deck', 'Active filters')"
@show="filterVisible=true"
@hide="filterVisible=false">
<Actions slot="trigger" :title="t('deck', 'Apply filter')">
<ActionButton v-if="isFilterActive" icon="icon-filter_set" />
<ActionButton v-else icon="icon-filter" />
</Actions>
<!-- We cannot use Actions here are the popover trigger does not update on reactive icons -->
<Button slot="trigger"
:title="t('deck', 'Apply filter')"
class="filter-button"
type="tertiary-no-background">
<template #icon>
<FilterIcon v-if="isFilterActive" :size="20" decorative />
<FilterOffIcon v-else :size="20" decorative />
</template>
</Button>
<div v-if="filterVisible" class="filter">
<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -179,18 +185,20 @@
</div>
<Actions>
<ActionButton icon="icon-archive"
@click="toggleShowArchived">
<ActionButton @click="toggleShowArchived">
<template #icon>
<ArchiveIcon :size="20" decorative />
</template>
{{ showArchived ? t('deck', 'Hide archived cards') : t('deck', 'Show archived cards') }}
</ActionButton>
<ActionButton v-if="compactMode"
icon="icon-toggle-compact-collapsed"
@click="toggleCompactMode">
<ArrowExpandVerticalIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Toggle compact mode') }}
</ActionButton>
<ActionButton v-else
icon="icon-toggle-compact-expanded"
@click="toggleCompactMode">
<ArrowCollapseVerticalIcon slot="icon" :size="20" decorative />
{{ t('deck', 'Toggle compact mode') }}
</ActionButton>
</Actions>
@@ -208,11 +216,26 @@ import { mapState, mapGetters } from 'vuex'
import { Actions, ActionButton, Avatar, Button, Popover } from '@nextcloud/vue'
import labelStyle from '../mixins/labelStyle'
import CardCreateDialog from '../CardCreateDialog'
import ArchiveIcon from 'vue-material-design-icons/Archive'
import FilterIcon from 'vue-material-design-icons/Filter'
import FilterOffIcon from 'vue-material-design-icons/FilterOff'
import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical'
import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical'
export default {
name: 'Controls',
components: {
Actions, ActionButton, Avatar, Button, Popover, CardCreateDialog,
Actions,
ActionButton,
Button,
Popover,
Avatar,
CardCreateDialog,
ArchiveIcon,
FilterIcon,
FilterOffIcon,
ArrowCollapseVerticalIcon,
ArrowExpandVerticalIcon,
},
mixins: [labelStyle],
props: {
@@ -255,10 +278,7 @@ export default {
}
},
isFilterActive() {
if (this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== '') {
return true
}
return false
return this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== ''
},
labelsSorted() {
return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
@@ -443,6 +463,17 @@ export default {
margin-top: 0px;
margin-bottom: 5px;
}
.filter-button {
padding: 0;
border-radius: 50%;
width: 44px;
height: 44px;
&:hover, &:focus {
background-color: rgba(127,127,127,0.25) !important;
}
}
</style>
<style lang="scss">
.popover:focus {