Merge pull request #572 from nextcloud/checkbox

first try to implement the nextcloud checkbox design

css/src/style.scss

@@ -853,6 +853,15 @@
 					span {
 						cursor: pointer;
 					}
+					input[type='checkbox'].checkbox + label {
+						&::before {
+							margin-left: 0;
+						}
+						>span {
+							font-weight: bold;
+							margin-left: 10px;
+						}
+					}
 				}
 
 				&.editing {
@@ -1181,6 +1190,29 @@
 	}
 }
 
+.task-checkbox,
+.detail-checkbox {
+	float: left;
+	margin: 7px;
+	margin-right: 3px;
+	opacity: 0.5;
+}
+
+.detail-checkbox {
+	padding: 8px;
+}
+
+input[type='checkbox'].checkbox {
+	&:checked + label::before {
+		background-image: var(--icon-checkmark-000);
+		background-color: unset;
+		border-color: unset;
+	}
+	&:disabled + label::before {
+		background-color: var(--color-background-darker) !important;
+	}
+}
+
 .icon {
 	height: 16px;
 	width: 16px;
@@ -1212,27 +1244,6 @@
 		opacity: 1 !important;
 	}
 
-	&.task-checkbox,
-	&.detail-checkbox {
-		border-radius: 3px;
-		border: 1px solid var(--color-main-text);
-		float: left;
-		margin: 9px;
-		opacity: 0.5;
-
-		&:not(.icon-checkmark) {
-			background: unset;
-		}
-
-		&:not(.disabled):hover {
-			opacity: 0.7;
-		}
-
-		&.disabled {
-			cursor: not-allowed;
-		}
-	}
-
 	&.right {
 		float: right;
 	}

img/src/bw/checkmark.svg

@@ -1 +1 @@
-<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m7.1754 13.693c2.5618-5.7886 5.8526-9.6003 7.3076-11.335 1.183-1.401 0.719-1.177 0.199-0.8234-2.137 1.4563-6.1287 6.1399-7.6559 7.7638-0.2793 0.299-0.9223 1.0036-1.067 1.0036-0.1596 0-0.7052-0.263-1.0197-0.4552-1.1895-0.7316-2.3298-1.4514-3.0451-1.7203-1.5226-0.5738-1.0921-0.0263-1.0048 0.1568 0.2709 0.5679 3.9479 3.6637 5.1652 5.1237 0.66413 0.7746 0.72507 1.2925 1.1207 0.286z" stroke="#000" stroke-miterlimit="10" stroke-width=".535"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16"><path d="m2.35 7.3 4 4l7.3-7.3" stroke="#000" stroke-width="2" fill="none"/></svg>

img/src/color/checkmark-color.svg

@@ -1 +1 @@
-<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m7.1754 13.693c2.5618-5.7886 5.8526-9.6003 7.3076-11.335 1.183-1.401 0.719-1.177 0.199-0.8234-2.137 1.4563-6.1287 6.1399-7.6559 7.7638-0.2793 0.299-0.9223 1.0036-1.067 1.0036-0.1596 0-0.7052-0.263-1.0197-0.4552-1.1895-0.7316-2.3298-1.4514-3.0451-1.7203-1.5226-0.5738-1.0921-0.0263-1.0048 0.1568 0.2709 0.5679 3.9479 3.6637 5.1652 5.1237 0.66413 0.7746 0.72507 1.2925 1.1207 0.286z" fill="#71b73d" stroke="#71b73d" stroke-miterlimit="10" stroke-width=".535"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16"><path d="m2.35 7.3 4 4l7.3-7.3" stroke="#71b73d" stroke-width="2" fill="none"/></svg>

src/components/Task.vue

@@ -40,14 +40,19 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				/>
 			</div>
 
-			<span :aria-checked="task.completed"
+			<span class="task-checkbox">
-				:aria-label="t('tasks', 'Task is completed')"
+				<input :id="'toggleCompleted_' + task.uid"
-				class="task-checkbox"
+					type="checkbox"
+					class="checkbox"
 					name="toggleCompleted"
-				role="checkbox"
+					:class="{'disabled': task.calendar.readOnly}"
+					:checked="task.completed"
+					:aria-checked="task.completed"
+					:disabled="task.calendar.readOnly"
+					:aria-label="t('tasks', 'Task is completed')"
 					@click="toggleCompleted(task)"
 				>
-				<span :class="{'icon-checkmark': task.completed, 'disabled': task.calendar.readOnly}" class="icon icon-bw task-checkbox reactive no-nav" />
+				<label class="reactive no-nav" :for="'toggleCompleted_' + task.uid" />
 			</span>
 			<span class="icon task-separator" />
 			<span class="task-star" @click="toggleStarred(task)">

src/components/TheDetails.vue

@@ -26,14 +26,21 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			class="flex-container"
 		>
 			<div :class="{'editing': edit=='summary'}" class="title">
-				<a :aria-checked="task.completed"
+				<span class="detail-checkbox">
+					<input :id="'detailsToggleCompleted_' + task.uid"
+						type="checkbox"
+						class="checkbox"
+						name="detailsToggleCompleted"
+						:class="{'disabled': task.calendar.readOnly}"
+						:checked="task.completed"
+						:aria-checked="task.completed"
+						:disabled="task.calendar.readOnly"
 						:aria-label="t('tasks', 'Task is completed')"
-					class="checkbox reactive"
-					role="checkbox"
 						@click="toggleCompleted(task)"
 					>
-					<span :class="{'icon-checkmark': task.completed, 'disabled': task.calendar.readOnly}" class="icon icon-bw detail-checkbox" />
+					<label :for="'detailsToggleCompleted_' + task.uid" />
-				</a>
+				</span>
+
 				<a class="star reactive" @click="toggleStarred(task)">
 					<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
 						class="icon"
@@ -130,16 +137,22 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 					</li>
 					<li v-show="isAllDayPossible"
-						:aria-checked="task.allDay"
 						class="section detail-all-day reactive"
-						role="checkbox"
-						@click="toggleAllDay(task)"
 					>
 						<div>
-							<span :class="{'icon-checkmark': task.allDay, 'disabled': task.calendar.readOnly}" class="icon icon-bw detail-checkbox" />
+							<input id="isAllDayPossible"
-							<span class="section-title">
+								type="checkbox"
-								{{ t('tasks', 'All day') }}
+								class="checkbox"
-							</span>
+								name="isAllDayPossible"
+								:class="{'disabled': task.calendar.readOnly}"
+								:aria-checked="task.allDay"
+								:checked="task.allDay"
+								:disabled="task.calendar.readOnly"
+								@click="toggleAllDay(task)"
+							>
+							<label for="isAllDayPossible">
+								<span>{{ t('tasks', 'All day') }}</span>
+							</label>
 						</div>
 					</li>
 					<li class="section detail-calendar reactive">