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}"
+						:class="{'done': t.done, 'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id, 'has-light-text': !t.hasDarkColor(), 'has-dark-text': t.hasDarkColor()}"
-						:isActive="true"
+                        :style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
+                        :isActive="true"
 						:x="t.offsetDays * dayWidth - 6"
 						:y="0"
 						:w="t.durationDays * dayWidth"

src/models/task.js

@@ -29,6 +29,14 @@ export default class TaskModel extends AbstractModel {
 		this.labels = this.labels.map(l => {
 			return new LabelModel(l)
 		})
+
+		// Set the default color
+		if (this.hexColor === '') {
+			this.hexColor = '198CFF'
+		}
+		if (this.hexColor.substring(0, 1) !== '#') {
+			this.hexColor = '#' + this.hexColor
+		}
 	}
 	
 	defaults() {
@@ -48,7 +56,8 @@ export default class TaskModel extends AbstractModel {
 			reminderDates: [],
 			subtasks: [],
 			parentTaskID: 0,
-			
+			hexColor: '',
+
 			createdBy: UserModel,
 			created: 0,
 			updated: 0,
@@ -101,4 +110,23 @@ export default class TaskModel extends AbstractModel {
 			}
 		}
 	}
+
+	/**
+	 * Checks if the hexColor of a task is dark.
+	 * @returns {boolean}
+	 */
+	hasDarkColor() {
+		if (this.hexColor === '#') {
+			return true // Defaults to dark
+		}
+
+		let rgb = parseInt(this.hexColor.substring(1, 7), 16);   // convert rrggbb to decimal
+		let r = (rgb >> 16) & 0xff;  // extract red
+		let g = (rgb >>  8) & 0xff;  // extract green
+		let b = (rgb >>  0) & 0xff;  // extract blue
+
+		// luma will be a value 0..255 where 0 indicates the darkest, and 255 the brightest
+		let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
+		return luma > 128
+	}
 }

src/services/task.js

@@ -69,6 +69,10 @@ export default class TaskService extends AbstractService {
 		}
 		model.repeatAfter = repeatAfterSeconds
 
+		if (model.hexColor.substring(0, 1) === '#') {
+			model.hexColor = model.hexColor.substring(1, 7)
+		}
+
 		return model
 	}
 }

src/styles/gantt.scss

@@ -78,8 +78,31 @@ $gantt-vertical-border-color: lighten($grey, 45);
         user-select: none; // Non-prefixed version, currently  supported by Chrome and Opera
 
         &.is-current-edit {
-          border-color: $orange;
+          border-color: $orange !important;
-          background: lighten($orange, 40);
+        }
+
+        &.has-light-text {
+          color: $light;
+
+          &.done span:after {
+            border-top: 1px solid $light;
+          }
+
+          .edit-toggle {
+            color: $light;
+          }
+        }
+
+        &.has-dark-text {
+          color: $dark;
+
+          &.done span:after {
+            border-top: 1px solid $dark;
+          }
+
+          .edit-toggle {
+            color: $dark;
+          }
         }
 
         &.done span {
@@ -87,7 +110,6 @@ $gantt-vertical-border-color: lighten($grey, 45);
 
           &:after {
             content: '';
-            border-top: 1px solid $dark;
             position: absolute;
             right: 0;
             left: 0;

todo.md

@@ -50,7 +50,7 @@
   * [x] Overdue rot anzeigen
 * [x] Beim Team bearbeiten Nutzer suchen einbauen
 * [ ] Keyboard shortcuts
-* [ ] Gantt chart
+* [x] Gantt chart
   * [x] Basics
   * [x] Add tasks without dates set
   * [x] Edit tasks with a kind of popup when clicking on them - needs refactoring edit task into an own component
@@ -58,7 +58,7 @@
   * [x] Be able to choose the range for the chart
   * [x] Show task priority
   * [x] Show task done or not done
-  * [ ] Colors - needs api change before 
+  * [x] Colors - needs api change before 
   * [x] More view modes
     * [x] Month: "The big picture"
     * [x] Day: 3-hour slices of a day