Merge pull request #3169 from nextcloud/fix/3122/fix-date-time-picker

Fix calendar and date picker

src/components/Shared/CalendarPicker.vue

@@ -6,10 +6,10 @@
 		:options="calendars"
 		:value="calendar"
 		@select="change">
-		<template slot="singleLabel" slot-scope="scope">
+		<template v-slot:singleLabel="scope">
 			<CalendarPickerOption v-bind="scope.option" />
 		</template>
-		<template slot="option" slot-scope="scope">
+		<template v-slot:option="scope">
 			<CalendarPickerOption v-bind="scope.option" />
 		</template>
 	</Multiselect>
@@ -64,3 +64,9 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+::v-deep .multiselect__tags {
+	margin: 3px 0;
+}
+</style>

src/components/Shared/DatePicker.vue

@@ -40,8 +40,7 @@
 		@close="close"
 		@change="change"
 		@pick="pickDate">
-		<template
-			slot="icon-calendar">
+		<template v-slot:icon-calendar>
 			<button
 				class="datetime-picker-inline-icon icon"
 				:class="{'icon-timezone': !isAllDay, 'icon-new-calendar': isAllDay, 'datetime-picker-inline-icon--highlighted': highlightTimezone}"
@@ -63,7 +62,7 @@
 		</template>
 		<template
 			v-if="!isAllDay"
-			slot="footer">
+			v-slot:footer>
 			<button
 				v-if="!showTimePanel"
 				class="mx-btn mx-btn-text"

src/views/EditSidebar.vue

@@ -46,32 +46,6 @@
 			</EmptyContent>
 		</template>
 
-		<template
-			v-if="!isLoading && !isError"
-			v-slot:primary-actions>
-			<PropertyCalendarPicker
-				v-if="showCalendarPicker"
-				:calendars="calendars"
-				:calendar="selectedCalendar"
-				:is-read-only="isReadOnly"
-				@selectCalendar="changeCalendar" />
-
-			<PropertyTitleTimePicker
-				:start-date="startDate"
-				:start-timezone="startTimezone"
-				:end-date="endDate"
-				:end-timezone="endTimezone"
-				:is-all-day="isAllDay"
-				:is-read-only="isReadOnly"
-				:can-modify-all-day="canModifyAllDay"
-				:user-timezone="currentUserTimezone"
-				@updateStartDate="updateStartDate"
-				@updateStartTimezone="updateStartTimezone"
-				@updateEndDate="updateEndDate"
-				@updateEndTimezone="updateEndTimezone"
-				@toggleAllDay="toggleAllDay" />
-		</template>
-
 		<template v-slot:header>
 			<IllustrationHeader :color="illustrationColor" :illustration-url="backgroundImage" />
 		</template>
@@ -95,6 +69,32 @@
 			</ActionButton>
 		</template>
 
+		<template
+			v-if="!isLoading && !isError"
+			v-slot:description>
+			<PropertyCalendarPicker
+				v-if="showCalendarPicker"
+				:calendars="calendars"
+				:calendar="selectedCalendar"
+				:is-read-only="isReadOnly"
+				@selectCalendar="changeCalendar" />
+
+			<PropertyTitleTimePicker
+				:start-date="startDate"
+				:start-timezone="startTimezone"
+				:end-date="endDate"
+				:end-timezone="endTimezone"
+				:is-all-day="isAllDay"
+				:is-read-only="isReadOnly"
+				:can-modify-all-day="canModifyAllDay"
+				:user-timezone="currentUserTimezone"
+				@updateStartDate="updateStartDate"
+				@updateStartTimezone="updateStartTimezone"
+				@updateEndDate="updateEndDate"
+				@updateEndTimezone="updateEndTimezone"
+				@toggleAllDay="toggleAllDay" />
+		</template>
+
 		<AppSidebarTab
 			v-if="!isLoading && !isError"
 			id="app-sidebar-tab-details"
@@ -368,3 +368,9 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+::v-deep .app-sidebar-header__description {
+	flex-direction: column;
+}
+</style>