From 1fe3e30da6ff712bd2035ef90a9ac6140d6adde3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Fri, 26 Jun 2020 10:34:03 +0200
Subject: [PATCH] Add a button to the modal to switch back to the sidebar view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 src/App.vue                         |  1 -
 src/components/card/CardSidebar.vue | 14 +++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 29ad67698..d1ac8069e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -93,7 +93,6 @@ export default {
 	},
 	methods: {
 		hideModal() {
-			// this.$store.dispatch('setCardDetailsInModal', false)
 			this.$router.push({ name: 'board' })
 		},
 	},
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 14172f492..a3c153fae 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -24,9 +24,14 @@
 	<AppSidebar v-if="currentBoard && currentCard && copiedCard"
 		:title="currentCard.title"
 		:subtitle="subtitle"
+		:class="{ 'app-sidebar-modal': cardDetailsInModal}"
 		@close="closeSidebar">
 		<template #secondary-actions>
-			<ActionButton icon="icon-external" @click.stop="showModal()">
+			<ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="showModal()">
+				{{ t('deck', 'Open in sidebar view') }}
+			</ActionButton>
+
+			<ActionButton v-else icon="icon-external" @click.stop="showModal()">
 				{{ t('deck', 'Open in bigger view') }}
 			</ActionButton>
 		</template>
@@ -137,6 +142,7 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
+			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		...mapGetters(['canEdit', 'assignables']),
 		attachments() {
@@ -375,6 +381,12 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+	.app-sidebar-modal {
+		border-left: 0;
+		width: 800px;
+		max-width: 780px;
+		top: 0px;
+	}
 
 	h5 {
 		border-bottom: 1px solid var(--color-border);