Skip to content

Commit 3bef5c8

Browse files
enjeckenjeck
committed
fix: Replace icon attributes with template slots
Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
1 parent 01e01f9 commit 3bef5c8

2 files changed

Lines changed: 71 additions & 23 deletions

File tree

‎src/components/cards/CardMenuEntries.vue‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,35 @@
1616
{{ t('deck', 'Edit title') }}
1717
</NcActionButton>
1818
<NcActionButton v-if="canEdit && !isCurrentUserAssigned"
19-
icon="icon-user"
2019
:close-after-click="true"
2120
@click="assignCardToMe()">
21+
<template #icon>
22+
<AccountPlusIcon :size="20" decorative />
23+
</template>
2224
{{ t('deck', 'Assign to me') }}
2325
</NcActionButton>
2426
<NcActionButton v-if="canEdit && isCurrentUserAssigned"
25-
icon="icon-user"
2627
:close-after-click="true"
2728
@click="unassignCardFromMe()">
29+
<template #icon>
30+
<AccountMinusIcon :size="20" decorative />
31+
</template>
2832
{{ t('deck', 'Unassign myself') }}
2933
</NcActionButton>
3034
<NcActionButton v-if="canEdit"
31-
icon="icon-checkmark"
3235
:close-after-click="true"
3336
@click="changeCardDoneStatus()">
37+
<template #icon>
38+
<CheckIcon :size="20" decorative />
39+
</template>
3440
{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
3541
</NcActionButton>
3642
<NcActionButton v-if="canEdit"
37-
icon="icon-external"
3843
:close-after-click="true"
3944
@click="openCardMoveDialog">
45+
<template #icon>
46+
<OpenInNewIcon :size="20" decorative />
47+
</template>
4048
{{ t('deck', 'Move/copy card') }}
4149
</NcActionButton>
4250
<NcActionButton v-for="action in cardActions"
@@ -53,9 +61,11 @@
5361
{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
5462
</NcActionButton>
5563
<NcActionButton v-if="canEdit"
56-
icon="icon-delete"
5764
:close-after-click="true"
5865
@click="deleteCard()">
66+
<template #icon>
67+
<DeleteIcon :size="20" decorative />
68+
</template>
5969
{{ t('deck', 'Delete card') }}
6070
</NcActionButton>
6171
</div>
@@ -66,6 +76,11 @@ import { mapGetters, mapState } from 'vuex'
6676
import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
6777
import CardBulletedIcon from 'vue-material-design-icons/CardBulletedOutline.vue'
6878
import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
79+
import AccountPlusIcon from 'vue-material-design-icons/AccountPlus.vue'
80+
import AccountMinusIcon from 'vue-material-design-icons/AccountMinus.vue'
81+
import CheckIcon from 'vue-material-design-icons/Check.vue'
82+
import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
83+
import DeleteIcon from 'vue-material-design-icons/DeleteOutline.vue'
6984
import { generateUrl } from '@nextcloud/router'
7085
import { getCurrentUser } from '@nextcloud/auth'
7186
import { showUndo } from '@nextcloud/dialogs'
@@ -75,7 +90,7 @@ import { emit } from '@nextcloud/event-bus'
7590
7691
export default {
7792
name: 'CardMenuEntries',
78-
components: { NcActionButton, ArchiveIcon, CardBulletedIcon, PencilIcon },
93+
components: { NcActionButton, ArchiveIcon, CardBulletedIcon, PencilIcon, AccountPlusIcon, AccountMinusIcon, CheckIcon, OpenInNewIcon, DeleteIcon },
7994
props: {
8095
card: {
8196
type: Object,

‎src/components/navigation/AppNavigationBoard.vue‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,19 @@
2828

2929
<template v-if="!deleted" slot="actions">
3030
<template v-if="!isDueSubmenuActive">
31-
<NcActionButton icon="icon-info"
32-
:close-after-click="true"
31+
<NcActionButton :close-after-click="true"
3332
@click="actionDetails">
33+
<template #icon>
34+
<InformationOutlineIcon :size="20" decorative />
35+
</template>
3436
{{ t('deck', 'Board details') }}
3537
</NcActionButton>
3638
<NcActionButton v-if="canManage && !board.archived"
37-
icon="icon-rename"
3839
:close-after-click="true"
3940
@click="actionEdit">
41+
<template #icon>
42+
<PencilIcon :size="20" decorative />
43+
</template>
4044
{{ t('deck', 'Edit board') }}
4145
</NcActionButton>
4246
<NcActionButton v-if="canCreate && !board.archived"
@@ -64,9 +68,11 @@
6468
{{ t('deck', 'Archive board') }}
6569
</NcActionButton>
6670
<NcActionButton v-if="canManage && !board.archived"
67-
icon="icon-download"
6871
:close-after-click="true"
6972
@click="actionExport">
73+
<template #icon>
74+
<DownloadIcon :size="20" decorative />
75+
</template>
7076
{{ t('deck', 'Export board') }}
7177
</NcActionButton>
7278
<NcActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
@@ -76,50 +82,62 @@
7682

7783
<!-- Due date reminder settings -->
7884
<template v-if="isDueSubmenuActive">
79-
<NcActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
80-
:disabled="updateDueSetting"
85+
<NcActionButton :disabled="updateDueSetting"
8186
@click="isDueSubmenuActive=false">
87+
<template #icon>
88+
<NcLoadingIcon v-if="updateDueSetting" :size="20" />
89+
<ChevronLeftIcon v-else :size="20" decorative />
90+
</template>
8291
{{ t('deck', 'Due date reminders') }}
8392
</NcActionButton>
8493

8594
<NcActionButton name="notification"
86-
icon="icon-sound"
8795
:disabled="updateDueSetting"
8896
:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
8997
@click="updateSetting('notify-due', 'all')">
98+
<template #icon>
99+
<BellOutlineIcon :size="20" decorative />
100+
</template>
90101
{{ t('deck', 'All cards') }}
91102
</NcActionButton>
92103
<NcActionButton name="notification"
93-
icon="icon-user"
94104
:disabled="updateDueSetting"
95105
:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
96106
@click="updateSetting('notify-due', 'assigned')">
107+
<template #icon>
108+
<AccountIcon :size="20" decorative />
109+
</template>
97110
{{ t('deck', 'Assigned cards') }}
98111
</NcActionButton>
99112
<NcActionButton name="notification"
100-
icon="icon-sound-off"
101113
:disabled="updateDueSetting"
102114
:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
103115
@click="updateSetting('notify-due', 'off')">
116+
<template #icon>
117+
<BellOffOutlineIcon :size="20" decorative />
118+
</template>
104119
{{ t('deck', 'No notifications') }}
105120
</NcActionButton>
106121
</template>
107122
<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
108123
:name="t('deck', 'Due date reminders')"
109-
:icon="dueDateReminderIcon"
110124
@click="isDueSubmenuActive=true">
125+
<template #icon>
126+
<component :is="dueDateReminderIcon" :size="20" decorative />
127+
</template>
111128
{{ dueDateReminderText }}
112129
</NcActionButton>
113130

114131
<NcActionButton v-if="canManage && !isDueSubmenuActive"
115-
icon="icon-delete"
116132
:close-after-click="true"
117133
@click="actionDelete">
134+
<template #icon>
135+
<DeleteIcon :size="20" decorative />
136+
</template>
118137
{{ t('deck', 'Delete board') }}
119138
</NcActionButton>
120139

121140
<NcActionButton v-if="canLeave && !isDueSubmenuActive"
122-
icon="icon-delete"
123141
:close-after-click="true"
124142
@click="actionLeave">
125143
<template #icon>
@@ -164,14 +182,21 @@
164182
</template>
165183

166184
<script>
167-
import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton } from '@nextcloud/vue'
185+
import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
168186
import ClickOutside from 'vue-click-outside'
169187
import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
170188
import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
171189
import LeaveIcon from 'vue-material-design-icons/ExitRun.vue'
172190
import AccountIcon from 'vue-material-design-icons/AccountOutline.vue'
173191
import CloseIcon from 'vue-material-design-icons/Close.vue'
174192
import CheckIcon from 'vue-material-design-icons/Check.vue'
193+
import InformationOutlineIcon from 'vue-material-design-icons/InformationOutline.vue'
194+
import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
195+
import DownloadIcon from 'vue-material-design-icons/DownloadOutline.vue'
196+
import DeleteIcon from 'vue-material-design-icons/DeleteOutline.vue'
197+
import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
198+
import BellOutlineIcon from 'vue-material-design-icons/BellOutline.vue'
199+
import BellOffOutlineIcon from 'vue-material-design-icons/BellOffOutline.vue'
175200
176201
import { loadState } from '@nextcloud/initial-state'
177202
import { emit } from '@nextcloud/event-bus'
@@ -193,12 +218,20 @@ export default {
193218
NcButton,
194219
NcTextField,
195220
NcActionButton,
221+
NcLoadingIcon,
196222
AccountIcon,
197223
ArchiveIcon,
198224
CloneIcon,
199225
CloseIcon,
200226
CheckIcon,
201227
LeaveIcon,
228+
InformationOutlineIcon,
229+
PencilIcon,
230+
DownloadIcon,
231+
DeleteIcon,
232+
ChevronLeftIcon,
233+
BellOutlineIcon,
234+
BellOffOutlineIcon,
202235
BoardCloneModal,
203236
BoardExportModal,
204237
},
@@ -257,13 +290,13 @@ export default {
257290
},
258291
dueDateReminderIcon() {
259292
if (this.board.settings['notify-due'] === 'all') {
260-
return 'icon-sound'
293+
return 'BellOutlineIcon'
261294
} else if (this.board.settings['notify-due'] === 'assigned') {
262-
return 'icon-user'
295+
return 'AccountIcon'
263296
} else if (this.board.settings['notify-due'] === 'off') {
264-
return 'icon-sound-off'
297+
return 'BellOffOutlineIcon'
265298
}
266-
return ''
299+
return 'BellOutlineIcon'
267300
},
268301
dueDateReminderText() {
269302
if (this.board.settings['notify-due'] === 'all') {

0 commit comments

Comments
 (0)