Added colors to tasks

src/components/tasks/edit-task.vue

@@ -107,6 +107,20 @@
             </div>
         </div>
 
+        <div class="field">
+            <label class="label">Color</label>
+            <div class="control">
+                <verte
+                        v-model="taskEditTask.hexColor"
+                        menuPosition="top"
+                        picker="square"
+                        model="hex"
+                        :enableAlpha="false"
+                        :rgbSliders="true">
+                </verte>
+            </div>
+        </div>
+
         <div class="field">
             <label class="label" for="">Assignees</label>
             <ul class="assingees">
@@ -224,6 +238,8 @@
     import 'flatpickr/dist/flatpickr.css'
     import multiselect from 'vue-multiselect'
     import {differenceWith} from 'lodash'
+	import verte from 'verte'
+	import 'verte/dist/verte.css'
 
     import ListService from '../../services/list'
     import TaskService from '../../services/task'
@@ -273,6 +289,7 @@
         components: {
             flatPickr,
             multiselect,
+            verte,
         },
         props: {
             task: {

src/components/tasks/gantt-component.vue

@@ -28,8 +28,9 @@
 			<div class="row" v-for="(t, k) in theTasks" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
 				<VueDragResize
 						class="task"
-						:class="{'done': t.done, 'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id}"
-						:isActive="true"
+						:class="{'done': t.done, 'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id, 'has-light-text': !t.hasDarkColor(), 'has-dark-text': t.hasDarkColor()}"
+                        :style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
+                        :isActive="true"
 						:x="t.offsetDays * dayWidth - 6"
 						:y="0"
 						:w="t.durationDays * dayWidth"