Move edit sidebar into a modal

src/components/CalendarGrid.vue

@@ -63,7 +63,7 @@
 			type: Boolean,
 			default: false,
 		},
 		url: {
 			type: String,
 			required: false,
 		},
@@ -158,7 +158,7 @@
 		/**
 		 * FullCalendar Plugins
 		 *
 		 * @return {(PluginDef)[]}
 		 */
 		plugins() {
 			return [
@@ -175,7 +175,7 @@
 			// We do not allow drag and drop when the editor is open.
 			return this.isAuthenticatedUser
 				&& this.$route?.name !== 'EditPopoverView'
-				&& this.$route?.name !== 'EditSidebarView'
+				&& this.$route?.name !== 'EditFullView'
 		},
 	},
 	watch: {
@@ -250,9 +250,9 @@
 					this.saveNewView(to.params.view)
 				}
 
-				if ((from.name === 'NewPopoverView' || from.name === 'NewSidebarView')
+				if ((from.name === 'NewPopoverView' || from.name === 'NewFullView')
 				&& to.name !== 'NewPopoverView'
-				&& to.name !== 'NewSidebarView') {
+				&& to.name !== 'NewFullView') {
 					const calendarApi = this.$refs.fullCalendar.getApi()
 					calendarApi.unselect()
 				}
@@ -263,7 +263,7 @@
 			// Trigger the select event programmatically on initial page load to show the new event
 			// in the grid. Wait for the next tick because the ref isn't available right away.
 			await this.$nextTick()
-			if (['NewPopoverView', 'NewSidebarView'].includes(this.$route.name)) {
+			if (['NewPopoverView', 'NewFullView'].includes(this.$route.name)) {
 				const start = new Date(parseInt(this.$route.params.dtstart) * 1000)
 				const end = new Date(parseInt(this.$route.params.dtend) * 1000)
 				if (!isNaN(start.getTime()) && !isNaN(end.getTime())) {

src/components/Editor/Attachments/AttachmentsList.vue

@@ -283,7 +283,7 @@ export default {
 		span {
 			width: 34px;
 			height: 34px;
-			margin-left: -10px;
+			margin-left: -15px;
 			margin-right: 5px;
 		}
 

src/components/Editor/Properties/PropertyTitle.vue

@@ -51,3 +51,9 @@
 	},
 }
 </script>
+
+<style scoped>
+input {
+	width: 100% !important;
+}
+</style>

src/components/Editor/SaveButtons.vue

@@ -12,7 +12,7 @@
 			{{ $t('calendar', 'More details') }}
 		</NcButton>
 		<NcButton v-if="showSaveButton"
-			type="primary"
+			type="secondary"
 			:disabled="disabled"
 			@click="saveThisOnly">
 			<template #icon>
@@ -21,7 +21,7 @@
 			{{ $t('calendar', 'Save') }}
 		</NcButton>
 		<NcButton v-if="showUpdateButton"
-			type="primary"
+			type="secondary"
 			:disabled="disabled"
 			@click="saveThisOnly">
 			<template #icon>
@@ -36,7 +36,7 @@
 			{{ $t('calendar', 'Update this and all future') }}
 		</NcButton>
 		<NcButton v-if="showUpdateOnlyThisButton"
-			type="primary"
+			type="secondary"
 			:disabled="disabled"
 			@click="saveThisOnly">
 			{{ $t('calendar', 'Update this occurrence') }}

src/fullcalendar/interaction/eventClick.js

@@ -59,13 +59,13 @@ function handleEventClick(event, router, route, window, isWidget = false) {
 		return
 	}
 	let desiredRoute = settingsStore.skipPopover
-		? 'EditSidebarView'
+		? 'EditFullView'
 		: 'EditPopoverView'
 
 	// Don't show the popover if the window size is too small (less then its max width of 450 px + a bit)
 	// The mobile breakpoint of the reworked modals is 1024 px / 2 so simply use that.
 	if (window.innerWidth <= 1024 / 2 && desiredRoute === 'EditPopoverView') {
-		desiredRoute = 'EditSidebarView'
+		desiredRoute = 'EditFullView'
 	}
 
 	const name = getPrefixedRoute(route.name, desiredRoute)
@@ -75,7 +75,7 @@ function handleEventClick(event, router, route, window, isWidget = false) {
 	})
 
 	// Don't push new route when day didn't change
-	if ((getPrefixedRoute(route.name, 'EditPopoverView') === route.name || getPrefixedRoute(route.name, 'EditSidebarView') === route.name)
+	if ((getPrefixedRoute(route.name, 'EditPopoverView') === route.name || getPrefixedRoute(route.name, 'EditFullView') === route.name)
 		&& params.object === route.params.object
 		&& params.recurrenceId === route.params.recurrenceId) {
 		return

src/fullcalendar/interaction/select.js

@@ -20,17 +20,17 @@ export default function(router, route, window) {
 
 	return function({ start, end, allDay }) {
 		let name = settingsStore.skipPopover
-			? 'NewSidebarView'
+			? 'NewFullView'
 			: 'NewPopoverView'
 
 		// Don't show the popover if the window size is too small (less then its max width of 450 px + a bit)
 		// The mobile breakpoint of the reworked modals is 1024 px / 2 so simply use that.
 		if (window.innerWidth <= 1024 / 2 && name === 'NewPopoverView') {
-			name = 'NewSidebarView'
+			name = 'NewFullView'
 		}
 
 		// If we are already in a new event view, don't change it
-		if (['NewSidebarView', 'NewPopoverView'].includes(route.name)) {
+		if (['NewFullView', 'NewPopoverView'].includes(route.name)) {
 			name = route.name
 		}
 

src/mixins/EditorMixin.js

@@ -677,7 +677,7 @@ export default {
 	 * @param {Function} next Function to be called when ready to load the next view
 	 */
 	async beforeRouteEnter(to, from, next) {
-		if (to.name === 'NewSidebarView' || to.name === 'NewPopoverView') {
+		if (to.name === 'NewFullView' || to.name === 'NewPopoverView') {
 			next(async vm => {
 				vm.resetState()
 
@@ -752,7 +752,7 @@ export default {
 	 */
 	async beforeRouteUpdate(to, from, next) {
 		// If we are in the New Event dialog, we want to update the selected time
-		if (to.name === 'NewSidebarView' || to.name === 'NewPopoverView') {
+		if (to.name === 'NewFullView' || to.name === 'NewPopoverView') {
 			// If allDay, dtstart and dtend are the same there is no need to update.
 			// This is usally the case when navigating through the calendar while the editor is open
 			if (to.params.allDay === from.params.allDay
@@ -837,7 +837,7 @@ export default {
 
 		try {
 			if ((from.name !== 'NewPopoverView' || to.name !== 'EditPopoverView')
-			&& (from.name !== 'NewPopoverView' || to.name !== 'EditSideBarView')) {
+			&& (from.name !== 'NewPopoverView' || to.name !== 'EditFullView')) {
 				await this.save()
 			}
 			next()

src/router.js

@@ -9,7 +9,7 @@ import { getRootUrl, generateUrl } from '@nextcloud/router'
 
 import Calendar from './views/Calendar.vue'
 import EditSimple from './views/EditSimple.vue'
-import EditSidebar from './views/EditSidebar.vue'
+import EditFull from './views/EditFull.vue'
 import {
 	getDefaultEndDateForNewEvent,
 	getDefaultStartDateForNewEvent,
@@ -40,9 +40,9 @@ const router = new Router({
 					component: EditSimple,
 				},
 				{
-					path: '/p/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
-					name: 'PublicEditSidebarView',
-					component: EditSidebar,
+					path: '/p/:tokens/:view/:firstDay/view/full/:object/:recurrenceId',
+					name: 'PublicEditFullView',
+					component: EditFull,
 				},
 			],
 		},
@@ -57,9 +57,9 @@ const router = new Router({
 					component: EditSimple,
 				},
 				{
-					path: '/embed/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
-					name: 'EmbedEditSidebarView',
-					component: EditSidebar,
+					path: '/embed/:tokens/:view/:firstDay/view/full/:object/:recurrenceId',
+					name: 'EmbedEditFullView',
+					component: EditFull,
 				},
 			],
 		},
@@ -117,19 +117,19 @@ const router = new Router({
 					component: EditSimple,
 				},
 				{
-					path: '/:view/:firstDay/edit/sidebar/:object/:recurrenceId',
-					name: 'EditSidebarView',
-					component: EditSidebar,
+					path: '/:view/:firstDay/edit/full/:object/:recurrenceId',
+					name: 'EditFullView',
+					component: EditFull,
 				},
 				{
 					path: '/:view/:firstDay/new/popover/:allDay/:dtstart/:dtend',
 					name: 'NewPopoverView',
 					component: EditSimple,
 				},
 				{
-					path: '/:view/:firstDay/new/sidebar/:allDay/:dtstart/:dtend',
-					name: 'NewSidebarView',
-					component: EditSidebar,
+					path: '/:view/:firstDay/new/full/:allDay/:dtstart/:dtend',
+					name: 'NewFullView',
+					component: EditFull,
 				},
 			],
 		},

src/views/Calendar.vue

@@ -172,7 +172,7 @@ export default {
 				&& !this.isEmbedded
 				&& !this.isWidget
 				&& this.$route?.name !== 'EditPopoverView'
-				&& this.$route?.name !== 'EditSidebarView'
+				&& this.$route?.name !== 'EditFullView'
 		},
 		isSelectable() {
 			return !this.isPublicShare && !this.isEmbedded && !this.isWidget