Merge pull request #2047 from nextcloud/enh/cardDetailsInExt

src/App.vue

@@ -26,7 +26,14 @@
 		<div id="app-content">
 			<router-view />
 		</div>
-		<router-view name="sidebar" />
+
+		<Modal v-if="cardDetailsInModal && $route.params.cardId" :title="t('deck', 'Card details')" @close="hideModal()">
+			<div class="modal__content modal__card">
+				<router-view name="sidebar" />
+			</div>
+		</Modal>
+
+		<router-view v-show="!cardDetailsInModal || !$route.params.cardId" name="sidebar" />
 	</div>
 </template>
 
@@ -34,6 +41,7 @@
 
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation'
+import { Modal } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi'
 
 const boardApi = new BoardApi()
@@ -42,6 +50,7 @@ export default {
 	name: 'App',
 	components: {
 		AppNavigation,
+		Modal,
 	},
 	data() {
 		return {
@@ -67,6 +76,7 @@ export default {
 			navShown: state => state.navShown,
 			sidebarShownState: state => state.sidebarShown,
 			currentBoard: state => state.currentBoard,
+			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		// TODO: properly handle sidebar showing for route subview and board sidebar
 		sidebarRouterView() {
@@ -77,17 +87,21 @@ export default {
 			return this.sidebarRouterView || this.sidebarShownState
 		},
 	},
+	created() {
+		this.$store.dispatch('loadBoards')
+		this.$store.dispatch('loadSharees')
+	},
+	methods: {
+		hideModal() {
+			this.$router.push({ name: 'board' })
+		},
+	},
 	provide() {
 		return {
 			boardApi,
 		}
 	},
-	created() {
-		this.$store.dispatch('loadBoards')
-		this.$store.dispatch('loadSharees')
-	},
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -117,11 +131,19 @@ export default {
 			}
 		}
 	}
-
 </style>
 
-<style>
+<style lang="scss">
+
 	.multiselect {
 		width: 100%;
 	}
+
+	.modal__card {
+		min-width: 320px;
+		width: 50vw;
+		max-width: 800px;
+		min-height: 200px;
+		height: 80vh;
+	}
 </style>

src/components/card/CardSidebar.vue

@@ -27,7 +27,16 @@
 		:title-editable.sync="titleEditable"
 		@update:title="updateTitle"
 		@close="closeSidebar">
-		<template #secondary-actions />
+		<template #secondary-actions>
+			<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>
+
 		<AppSidebarTab id="details"
 			:order="0"
 			:name="t('deck', 'Details')"
@@ -278,6 +287,7 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
+			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		...mapGetters(['canEdit', 'assignables']),
 		attachments() {
@@ -505,6 +515,9 @@ export default {
 		parse(value) {
 			return moment(value, 'LLL', this.locale).toDate()
 		},
+		showModal() {
+			this.$store.dispatch('setCardDetailsInModal', true)
+		},
 	},
 }
 </script>
@@ -532,6 +545,42 @@ export default {
 
 <style lang="scss" scoped>
 
+	// FIXME: Obivously we should at some point not randomly reuse the sidebar component
+	// since this is not oficially supported
+	.modal__card .app-sidebar {
+		border: 0;
+		min-width: 100%;
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		max-width: 100%;
+		max-height: 100%;
+		&::v-deep {
+			.app-sidebar-header {
+				position: sticky;
+				top: 0;
+				z-index: 100;
+				background-color: var(--color-main-background);
+			}
+			.app-sidebar-tabs__nav {
+				position: sticky;
+				top: 87px;
+				margin: 0;
+				z-index: 100;
+				background-color: var(--color-main-background);
+			}
+
+			section {
+				min-height: auto;
+			}
+
+			#emptycontent, .emptycontent {
+				margin-top: 88px;
+			}
+		}
+	}
+
 	h5 {
 		border-bottom: 1px solid var(--color-border);
 		margin-top: 20px;

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) {

src/store/main.js

@@ -59,6 +59,7 @@ export default new Vuex.Store({
 		showArchived: false,
 		navShown: true,
 		compactMode: localStorage.getItem('deck.compactMode') === 'true',
+		cardDetailsInModal: localStorage.getItem('deck.cardDetailsInModal') === 'true',
 		sidebarShown: false,
 		currentBoard: null,
 		currentCard: null,
@@ -72,6 +73,9 @@ export default new Vuex.Store({
 		filter: { tags: [], users: [], due: '' },
 	},
 	getters: {
+		cardDetailsInModal: state => {
+			return state.cardDetailsInModal
+		},
 		getSearchQuery: state => {
 			return state.searchQuery
 		},
@@ -202,6 +206,10 @@ export default new Vuex.Store({
 			state.compactMode = !state.compactMode
 			localStorage.setItem('deck.compactMode', state.compactMode)
 		},
+		setCardDetailsInModal(state) {
+			state.cardDetailsInModal = !state.cardDetailsInModal
+			localStorage.setItem('deck.cardDetailsInModal', state.cardDetailsInModal)
+		},
 		setBoards(state, boards) {
 			state.boards = boards
 		},
@@ -276,6 +284,7 @@ export default new Vuex.Store({
 				Vue.delete(state.currentBoard.acl, removeIndex)
 			}
 		},
+
 	},
 	actions: {
 		setFilter({ commit }, filter) {
@@ -389,6 +398,9 @@ export default new Vuex.Store({
 		toggleCompactMode({ commit }) {
 			commit('toggleCompactMode')
 		},
+		setCardDetailsInModal({ commit }, show) {
+			commit('setCardDetailsInModal', show)
+		},
 		setCurrentBoard({ commit }, board) {
 			commit('setCurrentBoard', board)
 		},