Add option to remove color from label, task, namespace or list (#157)

Add reset to color picker

Move all usages of verte to seperate component

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/157

src/components/global/colorPicker.vue

@@ -0,0 +1,59 @@
+<template>
+	<div class="color-picker-container">
+		<verte
+				v-model="color"
+				menuPosition="top"
+				picker="square"
+				model="hex"
+				:enableAlpha="false"
+				:rgbSliders="true"/>
+		<a @click="reset" class="reset">
+			Reset Color
+		</a>
+	</div>
+</template>
+
+<script>
+	import verte from 'verte'
+	import 'verte/dist/verte.css'
+
+	export default {
+		name: 'colorPicker',
+		data() {
+			return {
+				color: '',
+			}
+		},
+		components: {
+			verte,
+		},
+		props: {
+			value: {
+				required: true,
+			},
+		},
+		watch: {
+			value(newVal) {
+				this.color = newVal
+			},
+			color() {
+				this.update()
+			}
+		},
+		mounted() {
+			this.color = this.value
+		},
+		methods: {
+			update() {
+				this.$emit('input', this.color)
+				this.$emit('change')
+			},
+			reset() {
+				// FIXME: I havn't found a way to make it clear to the user the color war reset.
+				//  Not sure if verte is capable of this - it does not show the change when setting this.color = ''
+				this.color = ''
+				this.update()
+			},
+		},
+	}
+</script>

src/components/labels/ListLabels.vue

@@ -64,14 +64,7 @@
 							<div class="field">
 								<label class="label">Color</label>
 								<div class="control">
-									<verte
+									<color-picker v-model="labelEditLabel.hexColor"/>
-											v-model="labelEditLabel.hexColor"
-											menuPosition="top"
-											picker="square"
-											model="hex"
-											:enableAlpha="false"
-											:rgbSliders="true">
-									</verte>
 								</div>
 							</div>
 							<div class="field has-addons">
@@ -100,17 +93,16 @@
 </template>
 
 <script>
-	import verte from 'verte'
-	import 'verte/dist/verte.css'
 	import {mapState} from 'vuex'
 
 	import LabelService from '../../services/label'
 	import LabelModel from '../../models/label'
+	import ColorPicker from '../global/colorPicker'
 
 	export default {
 		name: 'ListLabels',
 		components: {
-			verte,
+			ColorPicker,
 		},
 		data() {
 			return {

src/components/lists/EditList.vue

@@ -73,13 +73,7 @@
 						<div class="field">
 							<label class="label">Color</label>
 							<div class="control">
-								<verte
+								<color-picker v-model="list.hexColor"/>
-										v-model="list.hexColor"
-										menuPosition="top"
-										picker="square"
-										model="hex"
-										:enableAlpha="false"
-										:rgbSliders="true"/>
 							</div>
 						</div>
 					</form>
@@ -133,9 +127,6 @@
 </template>
 
 <script>
-	import verte from 'verte'
-	import 'verte/dist/verte.css'
-
 	import router from '../../router'
 	import manageSharing from '../sharing/userTeam'
 	import LinkSharing from '../sharing/linkSharing'
@@ -145,6 +136,7 @@
 	import Fancycheckbox from '../global/fancycheckbox'
 	import Background from './settings/background'
 	import {CURRENT_LIST} from '../../store/mutation-types'
+	import ColorPicker from '../global/colorPicker'
 
 	export default {
 		name: "EditList",
@@ -160,11 +152,11 @@
 			}
 		},
 		components: {
+			ColorPicker,
 			Background,
 			Fancycheckbox,
 			LinkSharing,
 			manageSharing,
-			verte,
 		},
 		created() {
 			this.listService = new ListService()

src/components/namespaces/EditNamespace.vue

@@ -52,13 +52,7 @@
 						<div class="field">
 							<label class="label">Color</label>
 							<div class="control">
-								<verte
+								<color-picker v-model="namespace.hexColor"/>
-										v-model="namespace.hexColor"
-										menuPosition="top"
-										picker="square"
-										model="hex"
-										:enableAlpha="false"
-										:rgbSliders="true"/>
 							</div>
 						</div>
 					</form>
@@ -108,15 +102,13 @@
 </template>
 
 <script>
-	import verte from 'verte'
-	import 'verte/dist/verte.css'
-
 	import router from '../../router'
 	import manageSharing from '../sharing/userTeam'
 
 	import NamespaceService from '../../services/namespace'
 	import NamespaceModel from '../../models/namespace'
 	import Fancycheckbox from '../global/fancycheckbox'
+	import ColorPicker from '../global/colorPicker'
 
 	export default {
 		name: "EditNamespace",
@@ -131,9 +123,9 @@
 			}
 		},
 		components: {
+			ColorPicker,
 			Fancycheckbox,
 			manageSharing,
-			verte,
 		},
 		beforeMount() {
 			this.namespace.id = this.$route.params.id

src/components/tasks/edit-task.vue

@@ -88,15 +88,7 @@
 		<div class="field">
 			<label class="label">Color</label>
 			<div class="control">
-				<verte
+				<color-picker v-model="taskEditTask.hexColor"/>
-						v-model="taskEditTask.hexColor"
-						menuPosition="top"
-						picker="square"
-						model="hex"
-						:enableAlpha="false"
-						:rgbSliders="true"
-						@change="editTaskSubmit()"
-				/>
 			</div>
 		</div>
 
@@ -142,8 +134,6 @@
 <script>
 	import flatPickr from 'vue-flatpickr-component'
 	import 'flatpickr/dist/flatpickr.css'
-	import verte from 'verte'
-	import 'verte/dist/verte.css'
 
 	import ListService from '../../services/list'
 	import TaskService from '../../services/task'
@@ -156,6 +146,7 @@
 	import RelatedTasks from './reusable/relatedTasks'
 	import RepeatAfter from './reusable/repeatAfter'
 	import Reminders from './reusable/reminders'
+	import ColorPicker from '../global/colorPicker'
 
 	export default {
 		name: 'edit-task',
@@ -181,6 +172,7 @@
 			}
 		},
 		components: {
+			ColorPicker,
 			Reminders,
 			RepeatAfter,
 			RelatedTasks,
@@ -189,7 +181,6 @@
 			PercentDoneSelect,
 			PrioritySelect,
 			flatPickr,
-			verte,
 		},
 		props: {
 			task: {

src/styles/components/_all.scss

@@ -17,3 +17,4 @@
 @import 'kanban';
 @import 'modal';
 @import 'list-backgrounds';
+@import 'color-picker';

src/styles/components/color-picker.scss

@@ -0,0 +1,15 @@
+.color-picker-container {
+  display: flex;
+  justify-content: center;
+
+  .verte__guide {
+    border-radius: 100%;
+    border: 1px solid $grey-light;
+    box-shadow: $card-shadow;
+  }
+
+  a.reset {
+    font-size: .9em;
+    padding-left: .5rem;
+  }
+}

src/styles/theme/theme.scss

@@ -61,8 +61,3 @@ button.table {
 .pagination {
   padding-bottom: 1em;
 }
-
-.verte__guide {
-  border: 2px dashed $dark;
-  border-radius: 100%;
-}