Move all day checkbox into component

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

.stylelintrc

@@ -19,6 +19,12 @@
 		"selector-list-comma-newline-after": null,
 		"no-descending-specificity": null,
 		"string-quotes": "single",
+		"selector-pseudo-element-no-unknown": [
+			true,
+			{
+				ignorePseudoElements: ['v-deep']
+			}
+		],
 		"selector-combinator-space-before": "always",
 		"selector-combinator-space-after": "always",
 		"declaration-block-no-duplicate-properties": true,

src/components/AppSidebar/CheckboxItem.vue

@@ -0,0 +1,99 @@
+<!--
+Nextcloud - Tasks
+
+@author Raimund Schlüßler
+@copyright 2021 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+License as published by the Free Software Foundation; either
+version 3 of the License, or any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+
+You should have received a copy of the GNU Affero General Public
+License along with this library. If not, see <http://www.gnu.org/licenses/>.
+
+-->
+
+<template>
+	<PropertyItem
+		:property-string="propertyString"
+		:allow-editing="false"
+		v-on="$listeners">
+		<template #content__title>
+			<input :id="checkBoxId"
+				type="checkbox"
+				class="checkbox"
+				:name="checkBoxId"
+				:class="{disabled}"
+				:aria-checked="checked"
+				:checked="checked"
+				:disabled="disabled"
+				@click="$emit('setChecked', checked)">
+			<label :for="checkBoxId">
+				<span>{{ propertyString }}</span>
+			</label>
+		</template>
+	</PropertyItem>
+</template>
+
+<script>
+import PropertyItem from './PropertyItem'
+
+export default {
+	components: {
+		PropertyItem,
+	},
+	props: {
+		checkBoxId: {
+			type: String,
+			required: true,
+		},
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		propertyString: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+		}
+	},
+	methods: {
+		setDate(date) {},
+		setTime(time) {},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.property__item::v-deep .item__content .content__title {
+	padding-right: 0;
+}
+
+input[type='checkbox'].checkbox + label {
+	padding-left: 14px;
+	width: 100%;
+
+	&::before {
+		margin-left: 0;
+		border-width: 2px;
+		border-radius: var(--border-radius);
+	}
+	> span {
+		font-weight: bold;
+		margin-left: 7px;
+	}
+}
+</style>

src/components/AppSidebar/PropertyItem.vue

@@ -25,12 +25,14 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		<div v-click-outside="() => setEditing(false)"
 			class="item__content"
 			@click="setEditing(true)">
-			<span class="content__icon">
+			<span v-if="icon" class="content__icon">
 				<span :class="icon"
 					class="icon" />
 			</span>
 			<span class="content__title">
-				{{ propertyString }}
+				<slot name="content__title">
+					{{ propertyString }}
+				</slot>
 			</span>
 			<div v-if="editing" class="content__input">
 				<slot />
@@ -69,6 +71,10 @@ export default {
 			type: String,
 			default: '',
 		},
+		allowEditing: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {
@@ -77,6 +83,8 @@ export default {
 	},
 	methods: {
 		setEditing(editing) {
+			if (!this.allowEditing) { return }
+
 			this.editing = editing
 			this.$emit('editing', this.editing)
 		},
@@ -121,8 +129,9 @@ $blue: #4271a6;
 				}
 
 				&__title {
+					display: flex;
 					font-weight: bold;
-					width: calc(100% - 44px);
+					flex-grow: 1;
 					padding-right: 14px;
 					cursor: pointer;
 					overflow: hidden;

src/views/AppSidebar.vue

@@ -31,7 +31,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		@update:title="updateTitle"
 		@submit-title="saveTitle"
 		@close="closeAppSidebar()">
-		<!-- <template v-if="task" v-slot:primary-actions>
+		<!-- <template v-if="task" #primary-actions>
 			<ul class="sections">
 			</ul>
 		</template> -->
@@ -95,23 +95,13 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					@editing="(editing) => editingDue = editing"
 					@setDate="setDueDate"
 					@clearProperty="setDueDate(null)" />
-				<li v-show="showAllDayToggle"
-					class="section detail-all-day reactive">
-					<div class="section-content">
-						<input id="allDayToggle"
-							type="checkbox"
-							class="checkbox"
-							name="allDayToggle"
-							:class="{'disabled': readOnly}"
-							:aria-checked="allDay"
-							:checked="allDay"
-							:disabled="readOnly"
-							@click="toggleAllDay(task)">
-						<label for="allDayToggle">
-							<span>{{ $t('tasks', 'All day') }}</span>
-						</label>
-					</div>
-				</li>
+				<CheckboxItem
+					v-show="showAllDayToggle"
+					:checked="allDay"
+					:disabled="readOnly"
+					:property-string="$t('tasks', 'All day')"
+					check-box-id="allDayToggle"
+					@setChecked="toggleAllDay(task)" />
 				<li class="section detail-calendar reactive">
 					<div v-click-outside="() => finishEditing('calendar')"
 						class="section-content"
@@ -333,6 +323,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
+import CheckboxItem from '../components/AppSidebar/CheckboxItem.vue'
 import DatetimePickerItem from '../components/AppSidebar/DatetimePickerItem.vue'
 import Markdown from '../components/Markdown.vue'
 // import TaskStatusDisplay from '../components/TaskStatusDisplay.vue'
@@ -356,8 +347,9 @@ export default {
 		AppSidebarTab,
 		ActionButton,
 		ActionLink,
-		EmptyContent,
+		CheckboxItem,
 		DatetimePickerItem,
+		EmptyContent,
 		Multiselect,
 		Markdown,
 		// TaskStatusDisplay,