Colors for lists and namespaces (#74)

Show colors for namespaces bigger

Show colors for lists and namespaces

Add changing color for lists

Add changing color for namespace

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

src/App.vue

@@ -134,7 +134,8 @@
 										</span>
 									</router-link>
 									<label class="menu-label" v-tooltip="n.name + ' (' + n.lists.length + ')'" :for="n.id + 'checker'">
-										<span>
+										<span class="name">
+											<span class="color-bubble" v-if="n.hex_color !== ''" :style="{ backgroundColor: n.hex_color }"></span>
 											{{n.name}} ({{n.lists.length}})
 										</span>
 										<span class="is-archived" v-if="n.is_archived">
@@ -147,7 +148,10 @@
 									<ul class="menu-list can-be-hidden" >
 										<li v-for="l in n.lists" :key="l.id">
 											<router-link :to="{ name: 'showList', params: { id: l.id} }">
-												<span>{{l.title}}</span>
+												<span class="name">
+													<span class="color-bubble" v-if="l.hex_color !== ''" :style="{ backgroundColor: l.hex_color }"></span>
+													{{l.title}}
+												</span>
 												<span class="is-archived" v-if="l.is_archived">
 													Archived
 												</span>

src/components/lists/EditList.vue

@@ -34,6 +34,18 @@
 								</label>
 							</div>
 						</div>
+						<div class="field">
+							<label class="label">Color</label>
+							<div class="control">
+								<verte
+										v-model="list.hex_color"
+										menuPosition="top"
+										picker="square"
+										model="hex"
+										:enableAlpha="false"
+										:rgbSliders="true"/>
+							</div>
+						</div>
 					</form>
 
 					<div class="columns bigbuttons">
@@ -71,6 +83,9 @@
 </template>
 
 <script>
+	import verte from 'verte'
+	import 'verte/dist/verte.css'
+
 	import auth from '../../auth'
 	import router from '../../router'
 	import manageSharing from '../sharing/userTeam'
@@ -97,6 +112,7 @@
 		components: {
 			LinkSharing,
 			manageSharing,
+			verte,
 		},
 		beforeMount() {
 			// Check if the user is already logged in, if so, redirect him to the homepage

src/components/namespaces/EditNamespace.vue

@@ -42,6 +42,18 @@
 								</div>
 							</div>
 						</div>
+						<div class="field">
+							<label class="label">Color</label>
+							<div class="control">
+								<verte
+										v-model="namespace.hex_color"
+										menuPosition="top"
+										picker="square"
+										model="hex"
+										:enableAlpha="false"
+										:rgbSliders="true"/>
+							</div>
+						</div>
 					</form>
 
 					<div class="columns bigbuttons">
@@ -77,6 +89,9 @@
 </template>
 
 <script>
+	import verte from 'verte'
+	import 'verte/dist/verte.css'
+
 	import auth from '../../auth'
 	import router from '../../router'
 	import manageSharing from '../sharing/userTeam'
@@ -100,6 +115,7 @@
 		},
 		components: {
 			manageSharing,
+			verte,
 		},
 		beforeMount() {
 			// Check if the user is already logged in, if so, redirect him to the homepage

src/models/list.js

@@ -6,7 +6,11 @@ export default class ListModel extends AbstractModel {
 	
 	constructor(data) {
 		super(data)
-		
+
+		if (this.hex_color !== '' && this.hex_color.substring(0, 1) !== '#') {
+			this.hex_color = '#' + this.hex_color
+		}
+
 		// Make all tasks to task models
 		this.tasks = this.tasks.map(t => {
 			return new TaskModel(t)
@@ -28,6 +32,7 @@ export default class ListModel extends AbstractModel {
 			tasks: [],
 			namespaceID: 0,
 			is_archived: false,
+			hex_color: '',
 
 			created: null,
 			updated: null,

src/models/namespace.js

@@ -6,6 +6,10 @@ export default class NamespaceModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 
+		if (this.hex_color !== '' && this.hex_color.substring(0, 1) !== '#') {
+			this.hex_color = '#' + this.hex_color
+		}
+
 		this.lists = this.lists.map(l => {
 			return new ListModel(l)
 		})
@@ -24,6 +28,7 @@ export default class NamespaceModel extends AbstractModel {
 			owner: UserModel,
 			lists: [],
 			is_archived: false,
+			hex_color: '',
 
 			created: null,
 			updated: null,

src/services/list.js

@@ -28,6 +28,12 @@ export default class ListService extends AbstractService {
 		model.tasks = model.tasks.map(task => {
 			return taskService.beforeUpdate(task)
 		})
+		model.hex_color = model.hex_color.substring(1, 7)
 		return model
 	}
+
+	beforeCreate(list) {
+		list.hex_color = list.hex_color.substring(1, 7)
+		return list
+	}
 }

src/services/namespace.js

@@ -22,4 +22,14 @@ export default class NamespaceService extends AbstractService {
 	modelFactory(data) {
 		return new NamespaceModel(data)
 	}
+
+	beforeUpdate(namespace) {
+		namespace.hex_color = namespace.hex_color.substring(1, 7)
+		return namespace
+	}
+
+	beforeCreate(namespace) {
+		namespace.hex_color = namespace.hex_color.substring(1, 7)
+		return namespace
+	}
 }

src/styles/theme/navigation.scss

@@ -130,9 +130,18 @@
         align-items: center;
         justify-content: space-between;
 
-        span:not(.icon) {
+        span.name:not(.icon) {
           overflow: hidden;
           text-overflow: ellipsis;
+
+          .color-bubble {
+            display: inline-block;
+            vertical-align: initial;
+            width: 12px;
+            height: 12px;
+            border-radius: 100%;
+            margin-right: 2px;
+          }
         }
 
         .is-archived {
@@ -149,8 +158,15 @@
         }
       }
 
-      .menu-label .is-archived {
+      .menu-label {
-        min-width: 85px;
+        .color-bubble {
+          width: 14px !important;
+          height: 14px !important;
+        }
+
+        .is-archived {
+          min-width: 85px;
+        }
       }
 
       .nsettings{