fixup! feat(TimePicker): to native

Signed-off-by: Grigory Vodyanov <[email protected]>
nextcloud · Nov 12, 2024 · 2bc13af · 2bc13af
1 parent e98bafc
commit 2bc13af
Showing 1 changed file with 9 additions and 19 deletions.
diff --git a/src/components/Editor/Properties/PropertyTitleTimePicker.vue b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
@@ -12,7 +12,7 @@
 
 		<div v-if="!isReadOnly"
 			class="property-title-time-picker__time-pickers">
-			<div :class="{ 'property-title-time-picker__time-pickers--all-day': isAllDay && !showTimezoneSelect}"
+			<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>
@@ -23,7 +23,7 @@
 						:date="startDate"
 						type="time"
 						@change="changeStartTime" />
-					<NcTimezonePicker v-if="showTimezoneSelect" :value="startTimezone" @input="changeStartTimezone" />
+					<NcTimezonePicker v-if="showTimezoneSelect && !isAllDay" :value="startTimezone" @input="changeStartTimezone" />
 				</div>
 
 				<div class="property-title-time-picker__time-pickers-to">
@@ -35,10 +35,10 @@
 						:date="endDate"
 						type="time"
 						@change="changeEndTime" />
-					<NcTimezonePicker v-if="showTimezoneSelect" :value="endTimezone" @input="changeEndTimezone" />
+					<NcTimezonePicker v-if="showTimezoneSelect && !isAllDay" :value="endTimezone" @input="changeEndTimezone" />
 				</div>
 			</div>
-			<NcButton v-if="!showTimezoneSelect"
+			<NcButton v-if="!showTimezoneSelect && !isAllDay"
 				type="tertiary"
 				@click="showTimezoneSelect = !showTimezoneSelect">
 				<template>
@@ -339,7 +339,7 @@ export default {
 	height: var(--default-clickable-area);
 	overflow-y: clip !important;
 	flex-grow: 2;
-	min-width: 200px !important;
+	min-width: 200px;
 	flex-shrink: 1;
 	margin: 0;
 }
@@ -358,9 +358,9 @@ export default {
 
 .property-title-time-picker__time-pickers-from, .property-title-time-picker__time-pickers-to {
 	display: flex;
-	flex-wrap: nowrap;
+	flex-wrap: wrap;
 	gap: var(--default-grid-baseline);
-	justify-content: stretch;
+	justify-content: flex-end;
 	width: 100%;
 	align-items: center;
 
@@ -369,11 +369,11 @@ export default {
 	}
 
 	:deep(input[type="time"]) {
-		min-width: 7rem;
+		min-width: calc(var(--clickable-area-large) * 0.5);
 	}
 
 	:deep(input[type="date"]) {
-		min-width: 10rem;
+		min-width: var(--clickable-area-large);
 	}
 
 	.native-datetime-picker {
@@ -396,19 +396,9 @@ export default {
 .property-title-time-picker__time-pickers--all-day {
 	display: flex;
 	flex-direction: row;
-	flex-wrap: nowrap;
 	align-items: center;
 	width: 100%;
 	gap: calc(var(--default-grid-baseline) * 2);
-
-	.property-title-time-picker__time-pickers-from, .property-title-time-picker__time-pickers-to {
-		flex-wrap: wrap !important;
-		flex-basis: 300px;
-	}
-
-	:deep(.v-select) {
-		min-width: 100px !important;
-	}
 }
 
 :deep(button.vs__open-indicator-button) {