From 8bb5a766669e944997a761af39cbc285056d0687 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 24 Jun 2020 20:07:51 +0200
Subject: [PATCH] Add setting to toggle between the modal and the sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.vue                                 |  7 ++++---
 src/components/navigation/AppNavigation.vue | 15 +++++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 71dfb99da..29ad67698 100644
--- a/src/App.vue
+++ b/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() {
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index 9da7f47c6..465eecbc6 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -51,6 +51,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"
@@ -118,6 +125,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) {