Added support for task pinning

css/src/style.scss

@@ -698,7 +698,7 @@
 				display: inline-block;
 				min-height: 24px;
 				margin: 13px 0;
-				width: calc(100% - 116px);
+				width: calc(100% - (41px + 16px + 45px + 45px + 14px)); /* checkbox (41px), status display (16px),  star (45px), pin (45px), safety distance (14px) */
 				padding: 0 6px;
 				line-height: 22px;
 				// this border is to adjust the size of the div to the size
@@ -721,7 +721,7 @@
 				padding: 0 6px;
 				display: none !important;
 				margin: 13px 0;
-				width: calc(100% - 116px);
+				width: calc(100% - (41px + 16px + 45px + 45px + 14px)); /* checkbox (41px), status display (16px),  star (45px), pin (45px), safety distance (14px) */
 				line-height: 24px;
 				min-height: 24px;
 
@@ -748,11 +748,13 @@
 					height: 24px;
 					width: 24px;
 					&.icon-color {
-						background-size: 96px 72px;
+						/* 16px per icon, 4 rows, scale by factor 1.5, keep aspect ratio */
+						background-size: calc(1.5 * 4 * 16px) auto;
 					}
 
 					&.icon-bw {
-						background-size: 120px 120px;
+						/* 16px per icon, 6 rows, scale by factor 1.5, keep aspect ratio */
+						background-size: calc(1.5 * 6 * 16px) auto;
 					}
 				}
 			}

src/components/Task.vue

@@ -79,6 +79,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				<div v-if="task.due" :class="{overdue: overdue(task.due)}" class="duedate">
 					{{ task.due | formatDate }}
 				</div>
+				<div v-if="task.pinned">
+					<span class="icon icon-bw icon-pinned" />
+				</div>
 				<div v-if="task.note!=''">
 					<span class="icon icon-bw icon-note" />
 				</div>

src/components/TheDetails.vue

@@ -40,12 +40,14 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					>
 					<label :for="'detailsToggleCompleted_' + task.uid" />
 				</span>
-
 				<a class="star reactive" @click="toggleStarred(task)">
 					<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
 						class="icon"
 					/>
 				</a>
+				<a class="star reactive" @click="togglePinned(task)">
+					<span :class="[{'disabled': task.calendar.readOnly}, iconPinned]" class="icon" />
+				</a>
 				<TaskStatusDisplay :task="task" />
 				<div v-click-outside="() => finishEditing('summary')">
 					<div v-linkify="task.summary"
@@ -587,6 +589,13 @@ export default {
 				return 'icon-bw icon-task-star'
 			}
 		},
+		iconPinned: function() {
+			if (this.task.pinned) {
+				return 'icon-bw icon-pinned'
+			} else {
+				return 'icon-bw icon-pinned-off'
+			}
+		},
 		iconPercent: function() {
 			if (this.task.complete > 0) {
 				return 'icon-color icon-percent-active'
@@ -666,6 +675,7 @@ export default {
 			'setClassification',
 			'setStatus',
 			'getTaskByUri',
+			'togglePinned',
 		]),
 
 		async loadTask() {

src/models/task.js

@@ -104,6 +104,7 @@ export default class Task {
 		this._modified = this.vtodo.getFirstPropertyValue('last-modified')
 		this._created = this.vtodo.getFirstPropertyValue('created')
 		this._class = this.vtodo.getFirstPropertyValue('class') || 'PUBLIC'
+		this._pinned = this.vtodo.getFirstPropertyValue('x-pinned') === 'true'
 
 		this._searchQuery = ''
 		this._matchesSearchQuery = true
@@ -347,6 +348,20 @@ export default class Task {
 		this._related = this.vtodo.getFirstPropertyValue('related-to') || null
 	}
 
+	get pinned() {
+		return this._pinned
+	}
+
+	set pinned(pinned) {
+		if (pinned === true) {
+			this.vtodo.updatePropertyWithValue('x-pinned', 'true')
+		} else {
+			this.vtodo.removeProperty('x-pinned')
+		}
+		this.updateLastModified()
+		this._pinned = this.vtodo.getFirstPropertyValue('x-pinned') === 'true'
+	}
+
 	get hideSubtasks() {
 		return this._hideSubtaks
 	}

src/store/storeHelper.js

@@ -125,35 +125,35 @@ function sort(tasks, sortOrder, sortDirection) {
 	var comparators
 	switch (sortOrder) {
 	case 'alphabetically': {
-		comparators = [sortAlphabetically, sortByPriority]
+		comparators = [sortByPinned, sortAlphabetically, sortByPriority]
 		break
 	}
 	case 'priority': {
-		comparators = [sortByPriority, sortAlphabetically]
+		comparators = [sortByPinned, sortByPriority, sortAlphabetically]
 		break
 	}
 	case 'due': {
-		comparators = [sortByDue, sortAlphabetically]
+		comparators = [sortByPinned, sortByDue, sortAlphabetically]
 		break
 	}
 	case 'start': {
-		comparators = [sortByStart, sortAlphabetically]
+		comparators = [sortByPinned, sortByStart, sortAlphabetically]
 		break
 	}
 	case 'created': {
-		comparators = [sortByCreated, sortAlphabetically]
+		comparators = [sortByPinned, sortByCreated, sortAlphabetically]
 		break
 	}
 	case 'modified': {
-		comparators = [sortByModified, sortAlphabetically]
+		comparators = [sortByPinned, sortByModified, sortAlphabetically]
 		break
 	}
 	case 'completedDate': {
-		comparators = [sortByCompletedDate, sortAlphabetically]
+		comparators = [sortByPinned, sortByCompletedDate, sortAlphabetically]
 		break
 	}
 	default:
-		comparators = [sortByCompleted, sortByDue, sortByPriority, sortByStart, sortAlphabetically]
+		comparators = [sortByPinned, sortByCompleted, sortByDue, sortByPriority, sortByStart, sortAlphabetically]
 	}
 	var sortedTasks = tasks.sort((taskA, taskB) => {
 		var compIndex = 0
@@ -168,7 +168,21 @@ function sort(tasks, sortOrder, sortDirection) {
 }
 
 /**
- * Comparator two compare two tasks by completed state in ascending order
+ * Comparator to compare two tasks by pinned state
+ *
+ * @param {Task} taskA The first task
+ * @param {Task} taskB The second task
+ * @returns {Integer}
+ */
+function sortByPinned(taskA, taskB) {
+	if (taskA.pinned && taskB.pinned) return 0
+	if (taskA.pinned) return -1
+	if (taskB.pinned) return 1
+	return 0
+}
+
+/**
+ * Comparator to compare two tasks by completed state in ascending order
  *
  * @param {Task} taskA The first task
  * @param {Task} taskB The second task

src/store/tasks.js

@@ -331,6 +331,16 @@ const mutations = {
 		}
 	},
 
+	/**
+	 * Toggles the pinned state of a task
+	 *
+	 * @param {Object} state The store data
+	 * @param {Task} task The task
+	 */
+	togglePinned(state, task) {
+		Vue.set(task, 'pinned', !task.pinned)
+	},
+
 	/**
 	 * Toggles the visibility of the subtasks
 	 *
@@ -894,6 +904,21 @@ const actions = {
 		context.dispatch('scheduleTaskUpdate', task)
 	},
 
+	/**
+	 * Toggles the pinned state of a task
+	 *
+	 * @param {Object} context The store context
+	 * @param {Task} task The task to update
+	 */
+	async togglePinned(context, task) {
+		// Don't try to edit tasks in read-only calendars
+		if (task.calendar.readOnly) {
+			return
+		}
+		context.commit('togglePinned', task)
+		context.dispatch('scheduleTaskUpdate', task)
+	},
+
 	/**
 	 * Sets the summary of a task
 	 *