fixup! feat(editors): redesign editors

css/app-sidebar.scss

@@ -231,6 +231,18 @@
 	.property-title-time-picker {
 		width: 100%;
 
+		&--readonly {
+			display: flex;
+			align-items: center;
+		}
+
+		&__icon {
+			width: 34px;
+			height: 34px;
+			margin-left: -5px;
+			margin-right: 5px;
+		}
+
 		&__time-pickers,
 		&__all-day {
 			display: flex;
@@ -671,8 +683,16 @@
 
 	.property-text {
 		&__icon {
+			// Prevent icon misalignment on vertically growing inputs
+			height: unset;
 			align-self: flex-start;
-			padding-top: 4px;
+			padding-top: 12px;
+		}
+
+		&--readonly {
+			.property-text__icon {
+				padding-top: 10px;
+			}
 		}
 
 		&__input {
@@ -711,12 +731,21 @@
 				}
 			}
 		}
+
+		// Fix weird height
+		&__input {
+			max-height: 44px;
+		}
 	}
 
 	.property-title {
-		input {
+		&__input, input {
 			font-weight: bold;
 		}
+
+		&__input--readonly {
+			font-size: 18px;
+		}
 	}
 
 	// Normalize gaps between all properties. We use outer margins between each row so a padding
@@ -734,6 +763,20 @@
 
 }
 
+.event-popover .event-popover__inner {
+	.event-popover__response-buttons {
+		margin-top: 8px;
+		margin-bottom: 0;
+	}
+
+	.property-text,
+	.property-title-time-picker {
+		&__icon {
+			margin: 0 !important;
+		}
+	}
+}
+
 .timezone-popover-wrapper {
 	.popover__inner {
 		padding: 20px;
@@ -765,7 +808,7 @@
 			padding: 50px 0;
 		}
 
-		.property-title-time-picker {
+		.property-title-time-picker:not(.property-title-time-picker--readonly) {
 			margin-bottom: 12px;
 		}
 

src/components/Editor/CalendarPickerHeader.vue

@@ -21,30 +21,31 @@
   -->
 
 <template>
-	<NcActions type="tertiary"
-		class="calendar-picker-header"
-		:menu-title="value.displayName"
-		:force-title="true"
-		:disabled="isDisabled">
-		<template #icon>
-			<div class="calendar-picker-header__icon">
-				<div class="calendar-picker-header__icon__dot"
-					:style="{ 'background-color': value.color }" />
-			</div>
-		</template>
-		<NcActionButton v-for="calendar in calendars"
-			:key="calendar.id"
-			:close-after-click="true"
-			@click="$emit('update:value', calendar)">
+	<div class="calendar-picker-header">
+		<NcActions type="tertiary"
+			:menu-title="value.displayName"
+			:force-title="true"
+			:disabled="isDisabled">
 			<template #icon>
 				<div class="calendar-picker-header__icon">
 					<div class="calendar-picker-header__icon__dot"
-						:style="{ 'background-color': calendar.color }" />
+						:style="{ 'background-color': value.color }" />
 				</div>
 			</template>
-			{{ calendar.displayName }}
-		</NcActionButton>
-	</NcActions>
+			<NcActionButton v-for="calendar in calendars"
+				:key="calendar.id"
+				:close-after-click="true"
+				@click="$emit('update:value', calendar)">
+				<template #icon>
+					<div class="calendar-picker-header__icon">
+						<div class="calendar-picker-header__icon__dot"
+							:style="{ 'background-color': calendar.color }" />
+					</div>
+				</template>
+				{{ calendar.displayName }}
+			</NcActionButton>
+		</NcActions>
+	</div>
 </template>
 
 <script>
@@ -81,22 +82,45 @@ export default {
 }
 </script>
 
+<style lang="scss">
+// Align button and its contents with property icons
+.event-popover .calendar-picker-header button {
+	margin-left: -9px;
+
+	.button-vue__text {
+		margin-left: 2px;
+	}
+}
+
+.app-sidebar .calendar-picker-header button {
+	margin-left: -14px;
+
+	.button-vue__text {
+		margin-left: 6px;
+	}
+}
+</style>
+
 <style lang="scss" scoped>
 .calendar-picker-header {
 	align-self: flex-start;
 	margin-bottom: 5px;
 
-	&:disabled, :deep(:disabled) {
+	:deep(:disabled) {
 		opacity: 1 !important;
 		filter: unset !important;
 	}
 
+	:deep(button) {
+		.button-vue__icon {
+			width: 34px;
+		}
+	}
+
 	&__icon {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 44px;
-		height: 44px;
 
 		&__dot {
 			$dot-size: 16px;

src/components/Editor/InvitationResponseButtons.vue

@@ -21,7 +21,8 @@
   -->
 
 <template>
-	<div class="invitation-response-buttons">
+	<div class="invitation-response-buttons"
+		:class="{ 'invitation-response-buttons--grow': growHorizontally }">
 		<NcButton v-if="!isAccepted"
 			type="primary"
 			class="invitation-response-buttons__button"
@@ -87,6 +88,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		growHorizontally: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -165,12 +170,16 @@ export default {
 <style lang="scss" scoped>
 .invitation-response-buttons {
 	display: flex;
-	width: 100%;
+	justify-content: flex-end;
 	gap: 5px;
-	margin-bottom: 12px;
+	margin-bottom: 8px;
 
-	&__button {
-		flex: 1 auto;
+	&--grow {
+		width: 100%;
+
+		.invitation-response-buttons__button {
+			flex: 1 auto;
+		}
 	}
 }
 </style>

src/components/Editor/Properties/PropertyTitleTimePicker.vue

@@ -24,7 +24,12 @@
   -->
 
 <template>
-	<div class="property-title-time-picker">
+	<div class="property-title-time-picker"
+		:class="{ 'property-title-time-picker--readonly': isReadOnly }">
+		<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"
@@ -84,6 +89,7 @@
 import moment from '@nextcloud/moment'
 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 { mapState } from 'vuex'
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
@@ -92,6 +98,7 @@ export default {
 	components: {
 		DatePicker,
 		IconTimezone,
+		CalendarIcon,
 		NcCheckboxRadioSwitch,
 	},
 	props: {

src/components/Editor/Repeat/RepeatSummary.vue

@@ -26,7 +26,7 @@
 		{{ recurrenceRule | formatRecurrenceRule(locale) }}
 	</span>
 	<span v-else>
-		{{ $t('calendar', 'No recurrence') }}
+		{{ $t('calendar', 'Does not repeat') }}
 	</span>
 </template>
 

src/components/Editor/SaveButtons.vue

@@ -33,12 +33,18 @@
 			type="primary"
 			:disabled="disabled"
 			@click="saveThisOnly">
+			<template #icon>
+				<CheckIcon :size="20" />
+			</template>
 			{{ $t('calendar', 'Save') }}
 		</NcButton>
 		<NcButton v-if="showUpdateButton"
 			type="primary"
 			:disabled="disabled"
 			@click="saveThisOnly">
+			<template #icon>
+				<CheckIcon :size="20" />
+			</template>
 			{{ $t('calendar', 'Update') }}
 		</NcButton>
 		<NcButton v-if="showUpdateOnlyThisButton"
@@ -61,11 +67,13 @@
 
 <script>
 import { NcButton } from '@nextcloud/vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
 
 export default {
 	name: 'SaveButtons',
 	components: {
 		NcButton,
+		CheckIcon,
 	},
 	props: {
 		canCreateRecurrenceException: {
@@ -109,7 +117,7 @@ export default {
 			return !this.isReadOnly && !this.isNew && !this.canCreateRecurrenceException
 		},
 		showUpdateOnlyThisButton() {
-			return this.canCreateRecurrenceException && !this.forceThisAndAllFuture
+			return !this.isReadOnly && this.canCreateRecurrenceException && !this.forceThisAndAllFuture
 		},
 		showUpdateThisAndFutureButton() {
 			return !this.isReadOnly && this.canCreateRecurrenceException

src/views/EditSidebar.vue

@@ -102,12 +102,6 @@
 				@update-end-timezone="updateEndTimezone"
 				@toggle-all-day="toggleAllDay" />
 
-			<InvitationResponseButtons v-if="isViewedByAttendee"
-				:attendee="userAsAttendee"
-				:calendar-id="calendarId"
-				:narrow="true"
-				@close="closeEditorAndSkipAction" />
-
 			<PropertyText class="property-location"
 				:is-read-only="isReadOnly"
 				:prop-model="rfcProps.location"
@@ -120,6 +114,13 @@
 				:value="description"
 				:linkify-links="true"
 				@update:value="updateDescription" />
+
+			<InvitationResponseButtons v-if="isViewedByAttendee"
+				:attendee="userAsAttendee"
+				:calendar-id="calendarId"
+				:narrow="true"
+				:grow-horizontally="true"
+				@close="closeEditorAndSkipAction" />
 		</template>
 
 		<NcAppSidebarTab v-if="!isLoading && !isError"

src/views/EditSimple.vue

@@ -121,11 +121,6 @@
 					@update-end-timezone="updateEndTimezone"
 					@toggle-all-day="toggleAllDay" />
 
-				<InvitationResponseButtons v-if="isViewedByAttendee"
-					:attendee="userAsAttendee"
-					:calendar-id="calendarId"
-					@close="closeEditorAndSkipAction" />
-
 				<PropertyText :is-read-only="isReadOnlyOrViewing"
 					:prop-model="rfcProps.location"
 					:value="location"
@@ -147,6 +142,12 @@
 					:calendar-object-instance="calendarObjectInstance"
 					:limit="3" />
 
+				<InvitationResponseButtons v-if="isViewedByAttendee && isViewing"
+					class="event-popover__response-buttons"
+					:attendee="userAsAttendee"
+					:calendar-id="calendarId"
+					@close="closeEditorAndSkipAction" />
+
 				<SaveButtons class="event-popover__buttons"
 					:can-create-recurrence-exception="canCreateRecurrenceException"
 					:is-new="isNew"
@@ -160,7 +161,11 @@
 					@save-this-and-all-future="saveAndView(true)"
 					@show-more="showMore">
 					<NcButton v-if="!isReadOnly && isViewing"
+						:type="isViewedByAttendee ? 'tertiary' : undefined"
 						@click="isViewing = false">
+						<template #icon>
+							<EditIcon :size="20" />
+						</template>
 						{{ $t('calendar', 'Edit') }}
 					</NcButton>
 				</SaveButtons>
@@ -196,6 +201,7 @@ import Close from 'vue-material-design-icons/Close.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import ContentDuplicate from 'vue-material-design-icons/ContentDuplicate.vue'
+import EditIcon from 'vue-material-design-icons/Pencil.vue'
 import { mapState } from 'vuex'
 
 export default {
@@ -220,6 +226,7 @@ export default {
 		CalendarPickerHeader,
 		InviteesList,
 		NcButton,
+		EditIcon,
 	},
 	mixins: [
 		EditorMixin,