Add setting to toggle between the modal and the sidebar

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/App.vue

@@ -27,13 +27,13 @@
 			<router-view />
 		</div>
 
-		<Modal v-if="cardDetailsInModal" :title="t('deck', 'Card details')" @close="hideModal()">
+		<Modal v-if="cardDetailsInModal && $route.params.cardId" :title="t('deck', 'Card details')" @close="hideModal()">
 			<div class="modal__content">
 				<router-view name="sidebar" />
 			</div>
 		</Modal>
 
-		<router-view v-show="!cardDetailsInModal" name="sidebar" />
+		<router-view v-show="!cardDetailsInModal || !$route.params.cardId" name="sidebar" />
 	</div>
 </template>
 
@@ -93,7 +93,8 @@ export default {
 	},
 	methods: {
 		hideModal() {
-			this.$store.dispatch('setCardDetailsInModal', false)
+			// this.$store.dispatch('setCardDetailsInModal', false)
+			this.$router.push({ name: 'board' })
 		},
 	},
 	provide() {

src/components/navigation/AppNavigation.vue

@@ -52,6 +52,13 @@
 		<template #footer>
 			<AppNavigationSettings>
 				<div>
+					<input id="toggle-modal"
+						   v-model="cardDetailsInModal"
+						   type="checkbox"
+						   class="checkbox">
+					<label for="toggle-modal">
+						{{ t('deck', 'Use modal card view') }}
+					</label>
 					<Multiselect v-model="groupLimit"
 						:class="{'icon-loading-small': groupLimitDisabled}"
 						open-direction="bottom"
@@ -119,6 +126,14 @@ export default {
 			// eslint-disable-next-line
 			return OC.isUserAdmin()
 		},
+		cardDetailsInModal: {
+			get() {
+				return this.$store.getters.cardDetailsInModal
+			},
+			set(newValue) {
+				this.$store.dispatch('setCardDetailsInModal', newValue)
+			},
+		},
 	},
 	beforeMount() {
 		if (this.isAdmin) {