feat: add Done component

src/components/misc/Done.vue

@@ -0,0 +1,55 @@
+<template>
+    <div
+			v-if="isDone"
+			class="is-done"
+			:class="{ 'is-done--small': variant === variants.SMALL }"
+		>
+			{{ $t('task.attributes.done') }}
+		</div>
+</template>
+
+<script>
+const VARIANTS = {
+	DEFAULT: 'default',
+	SMALL: 'small',
+}
+
+export default {
+	name: 'Done',
+
+	data() {
+		return {
+			variants: VARIANTS,
+		}
+	},
+
+	props: {
+		isDone: {
+			type: Boolean,
+			default: false,
+		},
+		variant: {
+			type: String,
+			default: VARIANTS.DEFAULT,
+			validator: (variant) => Object.values(VARIANTS).includes(variant),
+		},
+	},
+}
+</script>
+
+
+<style lang="scss" scoped>
+.is-done {
+  background: $green;
+  color: $white;
+  padding: .5rem;
+  font-weight: bold;
+  line-height: 1;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.is-done--small {
+	padding: .2rem .3rem;
+}
+</style>

src/components/tasks/partials/heading.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="heading">
 		<h1 class="title task-id">{{ textIdentifier }}</h1>
-		<div class="is-done" v-if="task.done">Done</div>
+		<Done class="heading__done" :is-done="task.done" />
 		<h1
 			class="title input"
 			:class="{'disabled': !canWrite}"
@@ -28,8 +28,13 @@
 <script>
 import {mapState} from 'vuex'
 
+import Done from '@/components/misc/Done.vue'
+
 export default {
 	name: 'heading',
+	components: {
+		Done,
+	},
 	data() {
 		return {
 			showSavedMessage: false,
@@ -90,3 +95,8 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.heading__done {
+	margin-left: .5rem;
+}
+</style>

src/components/tasks/partials/kanban-card.vue

@@ -12,7 +12,7 @@
 		class="task loader-container draggable"
 	>
 		<span class="task-id">
-			<span class="is-done" v-if="task.done">Done</span>
+			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
 			<template v-if="task.identifier === ''">
 				#{{ task.index }}
 			</template>
@@ -66,6 +66,7 @@
 import {playPop} from '../../../helpers/playPop'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import User from '../../../components/misc/user'
+import Done from '@/components/misc/Done.vue'
 import Labels from '../../../components/tasks/partials/labels'
 import ChecklistSummary from './checklist-summary'
 
@@ -73,6 +74,7 @@ export default {
 	name: 'kanban-card',
 	components: {
 		ChecklistSummary,
+		Done,
 		PriorityLabel,
 		User,
 		Labels,
@@ -230,12 +232,6 @@ $task-background: $white;
 		display: flex;
 	}
 
-	.is-done {
-		font-size: .75rem;
-		padding: .2rem .3rem;
-		margin: 0 .25rem 0 0;
-	}
-
 	&.is-moving {
 		opacity: .5;
 	}
@@ -264,4 +260,8 @@ $task-background: $white;
 		}
 	}
 }
+
+.kanban-card__done {
+	margin-right: .25rem;
+}
 </style>

src/styles/components/task.scss

@@ -3,24 +3,6 @@
   background: transparent;
 }
 
-// FIXME: create <Done> component
-// used in
-// - heading.vue
-// - kanban-card.vue
-// - Kanban.vue
-// - Table.vue
-.is-done {
-  background: $green;
-  color: $white;
-  padding: .5rem;
-  font-size: 1rem;
-  margin-left: .5rem;
-  font-weight: bold;
-  line-height: 1;
-  border-radius: 4px;
-  text-align: center;
-}
-
 // FIXME: should be a prop of TaskDetailView.vue
 .modal-container .task-view {
   border-radius: $radius;

src/views/list/views/Table.vue

@@ -134,7 +134,7 @@
 							</router-link>
 						</td>
 						<td v-if="activeColumns.done">
-							<div class="is-done" v-if="t.done">Done</div>
+							<Done :is-done="t.done" variant="small" />
 						</td>
 						<td v-if="activeColumns.title">
 							<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
@@ -190,6 +190,7 @@
 
 <script>
 import taskList from '../../../components/tasks/mixins/taskList'
+import Done from '@/components/misc/Done.vue'
 import User from '../../../components/misc/user'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import Labels from '../../../components/tasks/partials/labels'
@@ -203,6 +204,7 @@ import Pagination from '@/components/misc/pagination.vue'
 export default {
 	name: 'Table',
 	components: {
+		Done,
 		FilterPopup,
 		Sort,
 		Fancycheckbox,
@@ -319,11 +321,6 @@ export default {
 		.user {
 			margin: 0;
 		}
-
-		.is-done {
-			font-size: .9rem;
-			margin: 0;
-		}
 	}
 }
 </style>