feat/Separate date and time picker

css/app-sidebar.scss

@@ -227,7 +227,11 @@
 
 		&--readonly {
 			display: flex;
-			align-items: center;
+			align-items: flex-start;
+
+			& > *:not([align-self="center"]) {
+				align-self: flex-start !important;
+			}
 		}
 
 		&__icon {
@@ -258,21 +262,24 @@
 
 			&--readonly {
 				justify-content: start;
+				margin-top: var(--default-grid-baseline);
 
 				.property-title-time-picker-read-only-wrapper {
 					display: flex;
 					align-items: center;
-					padding: 8px 7px;
+					padding-left: 8px !important;
 					background-color: var(--color-main-background);
 					color: var(--color-main-text);
 					outline: none;
+					gap: var(--default-grid-baseline);
+					margin-bottom: var(--default-grid-baseline);
 
 					&--start-date {
-						padding-right: 0;
+						padding: 0;
 					}
 
 					&--end-date {
-						padding-left: 0;
+						padding: 0;
 					}
 
 					&__icon {
@@ -608,6 +615,11 @@
 
 		&--readonly {
 			margin-bottom: 0;
+			align-content: center;
+
+			& > *:not([align-self="flex-start"]) {
+				align-self: center !important;
+			}
 		}
 	}
 
@@ -650,7 +662,7 @@
 
 		&--readonly {
 			.property-text__icon {
-				padding-top: 10px;
+				padding-top: 0;
 			}
 		}
 

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue

@@ -57,7 +57,7 @@
 } from '../../../utils/date.js'
 import { mapState, mapStores } from 'pinia'
 import formatDateRange from '../../../filters/dateRangeFormat.js'
-import DatePicker from '../../Shared/DatePicker.vue'
+import DatePicker from '../../Shared/DatePickerOld.vue'
 import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 import { NcButton } from '@nextcloud/vue'

src/components/Editor/Properties/PropertyTitleTimePicker.vue

@@ -5,30 +5,54 @@
 
 <template>
 	<div class="property-title-time-picker"
-		:class="{ 'property-title-time-picker--readonly': isReadOnly }">
+		:class="{ 'property-title-time-picker--readonly': isReadOnly, 'property-title-time-picker__wrap': wrap }">
 		<CalendarIcon v-if="isReadOnly"
 			class="property-title-time-picker__icon"
 			:size="20" />
 
 		<div v-if="!isReadOnly"
 			class="property-title-time-picker__time-pickers">
-			<DatePicker :date="startDate"
-				:timezone-id="startTimezone"
-				prefix="from"
-				:is-all-day="isAllDay"
-				:append-to-body="appendToBody"
-				:user-timezone-id="userTimezone"
-				@change="changeStart"
-				@change-timezone="changeStartTimezone" />
+			<div :class="{ 'property-title-time-picker__time-pickers--all-day': isAllDay}"
+				class="property-title-time-picker__time-pickers__inner">
+				<div class="property-title-time-picker__time-pickers-from">
+					<span>{{ $t('calendar', 'From') }}</span>
+					<div class="property-title-time-picker__time-pickers-from-inner">
+						<DatePicker :date="startDate"
+							prefix="from"
+							@change="changeStartDate" />
+						<DatePicker v-if="!isAllDay"
+							:date="startDate"
+							type="time"
+							@change="changeStartTime" />
+						<NcTimezonePicker v-if="showTimezoneSelect && !isAllDay" :value="startTimezone" @input="changeStartTimezone" />
+					</div>
+				</div>
 
-			<DatePicker :date="endDate"
-				:timezone-id="endTimezone"
-				prefix="to"
-				:is-all-day="isAllDay"
-				:append-to-body="appendToBody"
-				:user-timezone-id="userTimezone"
-				@change="changeEnd"
-				@change-timezone="changeEndTimezone" />
+				<div class="property-title-time-picker__time-pickers-to">
+					<span>{{ $t('calendar', 'To') }}</span>
+					<div class="property-title-time-picker__time-pickers-to-inner">
+						<DatePicker :date="endDate"
+							prefix="to"
+							@change="changeEndDate" />
+						<DatePicker v-if="!isAllDay"
+							:date="endDate"
+							type="time"
+							@change="changeEndTime" />
+						<NcTimezonePicker v-if="showTimezoneSelect && !isAllDay" :value="endTimezone" @input="changeEndTimezone" />
+					</div>
+				</div>
+			</div>
+			<NcButton v-if="!showTimezoneSelect && !isAllDay"
+				type="tertiary"
+				@click="showTimezoneSelect = !showTimezoneSelect">
+				<template>
+					<span class="property-title-time-picker__button">
+						<IconTimezone :size="20" />
+						{{ startTimezone }}
+						<EditIcon :size="20" />
+					</span>
+				</template>
+			</NcButton>
 		</div>
 		<div v-if="isReadOnly"
 			class="property-title-time-picker__time-pickers property-title-time-picker__time-pickers--readonly">
@@ -37,20 +61,25 @@
 					{{ formattedStart }}
 				</div>
 				<IconTimezone v-if="!isAllDay"
-					:name="endTimezone"
+					:name="startTimezone"
 					:class="{ 'highlighted-timezone-icon': highlightStartTimezone }"
 					:size="20" />
+				<div v-if="highlightStartTimezone && startTimezone !== 'floating'" class="property-title-time-picker-read-only-wrapper__timezone">
+					{{ startTimezone }}
+				</div>
 			</div>
 			<template v-if="!isAllDayOneDayEvent">
-				<div>-</div>
 				<div class="property-title-time-picker-read-only-wrapper property-title-time-picker-read-only-wrapper--end-date">
 					<div class="property-title-time-picker-read-only-wrapper__label">
 						{{ formattedEnd }}
 					</div>
 					<IconTimezone v-if="!isAllDay"
 						:title="endTimezone"
-						:class="{ 'highlighted-timezone-icon': highlightStartTimezone }"
+						:class="{ 'highlighted-timezone-icon': highlightEndTimezone }"
 						:size="20" />
+					<div v-if="highlightEndTimezone && endTimezone !== 'floating'" class="property-title-time-picker-read-only-wrapper__timezone">
+						{{ endTimezone }}
+					</div>
 				</div>
 			</template>
 		</div>
@@ -70,7 +99,8 @@
 import DatePicker from '../../Shared/DatePicker.vue'
 import IconTimezone from 'vue-material-design-icons/Web.vue'
 import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
-import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import EditIcon from 'vue-material-design-icons/Pencil.vue'
+import { NcCheckboxRadioSwitch, NcTimezonePicker, NcButton } from '@nextcloud/vue'
 import { mapState } from 'pinia'
 import useSettingsStore from '../../../store/settings.js'
 
@@ -80,7 +110,10 @@
 		DatePicker,
 		IconTimezone,
 		CalendarIcon,
+		NcButton,
 		NcCheckboxRadioSwitch,
+		NcTimezonePicker,
+		EditIcon,
 	},
 	props: {
 		/**
@@ -141,20 +174,17 @@
 			type: String,
 			required: true,
 		},
-		/**
-		 * Whether to append the datepickers to body or not.
-		 * Necessary in the AppSidebar, otherwise it will be cut off be the
-		 * AppSidebar edges.
-		 */
-		appendToBody: {
+		wrap: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 	},
 	data() {
 		return {
-			showStartTimezone: false,
-			showEndTimezone: false,
+			/**
+			 * Whether to show the timezone selector
+			 */
+			showTimezoneSelect: false,
 		}
 	},
 	computed: {
@@ -224,15 +254,28 @@
 				&& this.startDate.getFullYear() === this.endDate.getFullYear()
 		},
 	},
+	mounted() {
+		if (this.startTimezone !== this.endTimezone) {
+			this.showTimezoneSelect = true
+		}
+	},
 	methods: {
 		/**
 		 * Update the start date
 		 *
 		 * @param {Date} value The new start date
 		 */
-		changeStart(value) {
+		changeStartDate(value) {
 			this.$emit('update-start-date', value)
 		},
+		/**
+		 * Update the start time
+		 *
+		 * @param {Date} value The new start time
+		 */
+		changeStartTime(value) {
+			this.$emit('update-start-time', value)
+		},
 		/**
 		 * Updates the timezone of the start date
 		 *
@@ -245,15 +288,24 @@
 			}
 
 			this.$emit('update-start-timezone', value)
+			this.$emit('update-end-timezone', value)
 		},
 		/**
 		 * Update the end date
 		 *
 		 * @param {Date} value The new end date
 		 */
-		changeEnd(value) {
+		changeEndDate(value) {
 			this.$emit('update-end-date', value)
 		},
+		/**
+		 * Update the end time
+		 *
+		 * @param {Date} value The new end time
+		 */
+		changeEndTime(value) {
+			this.$emit('update-end-time', value)
+		},
 		/**
 		 * Updates the timezone of the end date
 		 *
@@ -280,3 +332,96 @@
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.button-vue--icon-only), :deep(.button-vue__icon) {
+	width: 7rem !important;
+}
+
+/* Needed because the timezone picker has old styling */
+:deep(.vs__dropdown-toggle), :deep(.v-select) {
+	height: var(--default-clickable-area);
+	overflow-y: clip !important;
+	flex-grow: 2;
+	min-width: 170px;
+	flex-shrink: 1;
+	margin: 0;
+}
+
+.property-title-time-picker__time-pickers {
+	flex-direction: column;
+	align-items: stretch !important;
+	flex-wrap: nowrap !important;
+}
+
+.property-title-time-picker__time-pickers__inner {
+	display: flex;
+	gap: var(--default-grid-baseline);
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.property-title-time-picker__time-pickers-from, .property-title-time-picker__time-pickers-to {
+	display: flex;
+	flex-wrap: nowrap;
+	gap: var(--default-grid-baseline);
+	justify-content: flex-start;
+	width: 100%;
+	align-items: center;
+
+	&-inner {
+		display: flex;
+		gap: var(--default-grid-baseline);
+		align-content: stretch;
+		align-items: stretch;
+	}
+
+	:deep(input) {
+		flex-grow: 1;
+	}
+
+	:deep(input[type="time"]) {
+		min-width: calc(var(--clickable-area-large) * 0.5);
+	}
+
+	:deep(input[type="date"]) {
+		min-width: var(--clickable-area-large);
+	}
+
+	.native-datetime-picker {
+		display: inline-block;
+		flex-grow: 1;
+	}
+
+	span {
+		flex-basis: 3rem;
+		padding-right: var(--default-grid-baseline);
+		text-align: right;
+	}
+}
+
+.property-title-time-picker__button {
+	display: flex;
+	gap: var(--default-grid-baseline);
+}
+
+.property-title-time-picker__time-pickers--all-day {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	width: 100%;
+	gap: calc(var(--default-grid-baseline) * 2);
+}
+
+:deep(button.vs__open-indicator-button) {
+	padding: 0 !important;
+}
+
+.property-title-time-picker__wrap {
+	.property-title-time-picker__time-pickers-from, .property-title-time-picker__time-pickers-to {
+		&-inner {
+			flex-wrap: wrap;
+		}
+	}
+}
+</style>

src/components/Editor/Repeat/RepeatEndRepeat.vue

@@ -19,7 +19,7 @@
 			class="repeat-option-end__until"
 			:min="minimumDate"
 			:date="until"
-			:is-all-day="true"
+			type="date"
 			@change="changeUntil" />
 		<input v-if="isCount"
 			class="repeat-option-end__count"