Add disabled state for task titles

src/components/tasks/partials/heading.vue

@@ -8,10 +8,11 @@
 		</h1>
 		<div class="is-done" v-if="task.done">Done</div>
 		<h1
+			class="title input"
+			:class="{'disabled': !canWrite}"
 			@focusout="save()"
 			@keyup.ctrl.enter="save()"
-			class="title input"
+			:contenteditable="canWrite ? 'true' : 'false'"
-			contenteditable="true"
 			ref="taskTitle">
 			{{ task.title }}
 		</h1>
@@ -49,6 +50,10 @@ export default {
 		value: {
 			required: true,
 		},
+		canWrite: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	watch: {
 		value(newVal) {

src/styles/theme/form.scss

@@ -179,6 +179,14 @@
     background: $input-background-color;
     border-color: $input-focus-border-color;
   }
+
+  &.disabled {
+    &:focus, &:hover {
+      background: transparent !important;
+      border-color: transparent !important;
+      cursor: default !important;
+    }
+  }
 }
 
 h1, h2, h3 {

src/views/tasks/TaskDetailView.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="{ 'is-loading': taskService.loading}" class="loader-container task-view-container">
 		<div class="task-view">
-			<heading v-model="task"/>
+			<heading v-model="task" :can-write="canWrite"/>
 			<h6 class="subtitle" v-if="parent && parent.namespace && parent.list">
 				{{ parent.namespace.title }} >
 				<router-link :to="{ name: listViewName, params: { listId: parent.list.id } }">