feat/Separate date and time picker

src/components/Editor/Properties/PropertyTitleTimePicker.vue

@@ -12,23 +12,25 @@
 
 		<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-from">
+				<DatePicker :date="startDate"
+					prefix="from"
+					@change="changeStartDate" />
+				<DatePicker :date="startDate"
+					type="time"
+					@change="changeStartTime" />
+				<NcTimezonePicker :value="startTimezone" @input="changeStartTimezone" />
+			</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">
+				<DatePicker :date="endDate"
+					prefix="from"
+					@change="changeEndDate" />
+				<DatePicker :date="endDate"
+					type="time"
+					@change="changeEndTime" />
+				<NcTimezonePicker :value="endTimezone" @input="changeEndTimezone" />
+			</div>
 		</div>
 		<div v-if="isReadOnly"
 			class="property-title-time-picker__time-pickers property-title-time-picker__time-pickers--readonly">
@@ -68,19 +70,22 @@
 <script>
 import moment from '@nextcloud/moment'
 import DatePicker from '../../Shared/DatePicker.vue'
+import TimePicker from '../../Shared/TimePicker.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 { NcCheckboxRadioSwitch, NcTimezonePicker } from '@nextcloud/vue'
 import { mapState } from 'pinia'
 import useSettingsStore from '../../../store/settings.js'
 
 export default {
 	name: 'PropertyTitleTimePicker',
 	components: {
 		DatePicker,
+		TimePicker,
 		IconTimezone,
 		CalendarIcon,
 		NcCheckboxRadioSwitch,
+		NcTimezonePicker,
 	},
 	props: {
 		/**
@@ -230,9 +235,17 @@
 		 *
 		 * @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
 		 *
@@ -251,9 +264,17 @@
 		 *
 		 * @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 +301,36 @@
 	},
 }
 </script>
+
+<style scoped>
+:deep(.button-vue--icon-only), :deep(.button-vue__icon) {
+	width: 7rem !important;
+}
+
+.property-title-time-picker__time-pickers-from, .property-title-time-picker__time-pickers-to {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--default-grid-baseline);
+
+	:deep(input) {
+		max-width: 10rem;
+	}
+
+	.native-datetime-picker {
+		display: inline-block;
+	}
+
+}
+
+/* Needed because the timezone picker has old styling */
+:deep(.vs__dropdown-toggle), :deep(.v-select) {
+	height: var(--default-clickable-area);
+	overflow-y: clip !important;
+	max-width: 200px;
+	min-width: 200px !important;
+}
+
+:deep(button.vs__open-indicator-button) {
+	padding: 0 !important;
+}
+</style>