44-->
55
66<template >
7- <div class =" stack" :data-cy-stack =" stack.title" >
7+ <div class =" stack" :class = " {'stack--done-column': isDoneColumn} " : data-cy-stack =" stack.title" >
88 <div v-click-outside =" stopCardCreation"
99 class =" stack__header"
10- :class =" {'stack__header--add': showAddCard}"
10+ :class =" {'stack__header--add': showAddCard, 'stack__header--done-column': isDoneColumn }"
1111 :aria-label =" stack.title" >
1212 <transition name =" fade" mode =" out-in" >
1313 <h3 v-if =" !canManage || isArchived" tabindex =" 0" >
1414 {{ stack.title }}
15+ <CheckCircleOutline v-if =" isDoneColumn"
16+ class =" stack__done-icon"
17+ decorative />
1518 </h3 >
1619 <h3 v-else-if =" !editing"
17- dir =" auto"
1820 tabindex =" 0"
1921 :aria-label =" stack.title"
2022 :title =" stack.title"
2123 class =" stack__title"
2224 @click =" startEditing(stack)"
2325 @keydown.enter =" startEditing(stack)" >
24- {{ stack.title }}
26+ <span dir =" auto" >{{ stack.title }}</span >
27+ <CheckCircleOutline v-if =" isDoneColumn"
28+ class =" stack__done-icon"
29+ decorative />
2530 </h3 >
2631 <form v-else-if =" editing"
2732 v-click-outside =" cancelEdit"
5257 </template >
5358 {{ t('deck', 'Unarchive all cards') }}
5459 </NcActionButton >
60+ <NcActionButton close-after-click @click =" toggleDoneColumn" >
61+ <template #icon >
62+ <CheckCircleOutline decorative />
63+ </template >
64+ {{ isDoneColumn ? t('deck', 'Do not set cards as "done"') : t('deck', 'Set cards as "done"') }}
65+ </NcActionButton >
5566 <NcActionButton icon =" icon-delete" @click =" deleteStack(stack)" >
5667 {{ t('deck', 'Delete list') }}
5768 </NcActionButton >
@@ -140,6 +151,7 @@ import { mapGetters, mapState } from 'vuex'
140151import { Container , Draggable } from ' vue-smooth-dnd'
141152import ArchiveIcon from ' vue-material-design-icons/ArchiveOutline.vue'
142153import CardPlusOutline from ' vue-material-design-icons/CardPlusOutline.vue'
154+ import CheckCircleOutline from ' vue-material-design-icons/CheckCircleOutline.vue'
143155import { NcActions , NcActionButton , NcModal } from ' @nextcloud/vue'
144156import { showError , showUndo } from ' @nextcloud/dialogs'
145157
@@ -158,6 +170,7 @@ export default {
158170 NcModal,
159171 ArchiveIcon,
160172 CardPlusOutline,
173+ CheckCircleOutline,
161174 },
162175 directives: {
163176 ClickOutside,
@@ -205,6 +218,9 @@ export default {
205218 return ! card .archived
206219 })
207220 },
221+ isDoneColumn () {
222+ return !! this .stack .isDoneColumn
223+ },
208224 dragHandleSelector () {
209225 return this .canEdit && ! this .showArchived ? null : ' .no-drag'
210226 },
@@ -267,6 +283,13 @@ export default {
267283 return this .cardsByStack [index]
268284 }
269285 },
286+ toggleDoneColumn () {
287+ this .$store .dispatch (' setDoneStack' , {
288+ stackId: this .stack .id ,
289+ boardId: this .stack .boardId ,
290+ isDone: ! this .isDoneColumn ,
291+ })
292+ },
270293 deleteStack (stack ) {
271294 this .$store .dispatch (' deleteStack' , stack)
272295 showUndo (t (' deck' , ' List deleted' ), () => this .$store .dispatch (' stackUndoDelete' , stack))
@@ -370,6 +393,12 @@ export default {
370393 .dnd-container {
371394 flex-grow : 1 ;
372395 }
396+
397+ & .stack--done-column {
398+ .stack__header--done-column {
399+ border-bottom : 2px solid var (--color-success );
400+ }
401+ }
373402 }
374403
375404 .stack__header {
@@ -422,12 +451,30 @@ export default {
422451 padding : $card-padding ;
423452 font-size : var (--default-font-size );
424453
454+ span {
455+ overflow : hidden ;
456+ text-overflow : ellipsis ;
457+ }
458+
425459 & :focus-visible {
426460 outline : 2px solid var (--color-border-dark );
427461 border-radius : 3px ;
428462 }
429463 }
430464
465+ .stack__done-icon {
466+ flex-shrink : 0 ;
467+ color : var (--color-main-text );
468+ margin-inline-start : 2px ;
469+ width : 1em ;
470+ height : 1em ;
471+
472+ :deep (svg ) {
473+ width : 1em ;
474+ height : 1em ;
475+ }
476+ }
477+
431478 form {
432479 input {
433480 font-weight : bold ;
0 commit comments