overworked

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

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">
+				<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>
@@ -124,4 +138,13 @@ export default {
 	.multiselect {
 		width: 100%;
 	}
+
+	.modal__content {
+		width: 800px;
+		height: 600px;
+		min-width: 450px;
+		min-height: 450px;
+		margin: 20px 20px 60px 20px;
+		padding-bottom: 20px;
+	}
 </style>

src/components/card/CardSidebar.vue

@@ -24,140 +24,23 @@
 	<AppSidebar v-if="currentBoard && currentCard && copiedCard"
 		:title="currentCard.title"
 		:subtitle="subtitle"
+		:class="{ 'app-sidebar-modal': cardDetailsInModal}"
 		@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')"
 			icon="icon-home">
-			<div class="section-wrapper">
-				<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag">
-					<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
-				</div>
-				<div class="section-details">
-					<Multiselect v-model="allLabels"
-						:multiple="true"
-						:disabled="!canEdit"
-						:options="currentBoard.labels"
-						:placeholder="t('deck', 'Assign a tag to this card…')"
-						:taggable="true"
-						label="title"
-						track-by="id"
-						@select="addLabelToCard"
-						@remove="removeLabelFromCard">
-						<template #option="scope">
-							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
-								{{ scope.option.title }}
-							</div>
-						</template>
-						<template #tag="scope">
-							<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
-								{{ scope.option.title }}
-							</div>
-						</template>
-					</Multiselect>
-				</div>
-			</div>
-
-			<div class="section-wrapper">
-				<div v-tooltip="t('deck', 'Assign to users')" class="section-label icon-group">
-					<span class="hidden-visually">{{ t('deck', 'Assign to users/groups/circles') }}</span>
-				</div>
-				<div class="section-details">
-					<Multiselect v-if="canEdit"
-						v-model="assignedUsers"
-						:multiple="true"
-						:options="formatedAssignables"
-						:user-select="true"
-						:auto-limit="false"
-						:placeholder="t('deck', 'Assign a user to this card…')"
-						label="displayname"
-						track-by="multiselectKey"
-						@select="assignUserToCard"
-						@remove="removeUserFromCard">
-						<template #tag="scope">
-							<div class="avatarlist--inline">
-								<Avatar :user="scope.option.uid"
-									:display-name="scope.option.displayname"
-									:size="24"
-									:is-no-user="scope.option.isNoUser"
-									:disable-menu="true" />
-							</div>
-						</template>
-					</Multiselect>
-					<div v-else class="avatar-list--readonly">
-						<Avatar v-for="option in assignedUsers"
-							:key="option.primaryKey"
-							:user="option.uid"
-							:display-name="option.displayname"
-							:is-no-user="option.isNoUser"
-							:size="32" />
-					</div>
-				</div>
-			</div>
-
-			<div class="section-wrapper">
-				<div v-tooltip="t('deck', 'Due date')" class="section-label icon-calendar-dark">
-					<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
-				</div>
-				<div class="section-details">
-					<DatetimePicker v-model="duedate"
-						:placeholder="t('deck', 'Set a due date')"
-						type="datetime"
-						:minute-step="5"
-						:show-second="false"
-						:format="format"
-						:disabled="saving || !canEdit"
-						confirm />
-					<Actions v-if="canEdit">
-						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
-							{{ t('deck', 'Remove due date') }}
-						</ActionButton>
-					</Actions>
-				</div>
-			</div>
-
-			<div class="section-wrapper">
-				<CollectionList v-if="currentCard.id"
-					:id="`${currentCard.id}`"
-					:name="currentCard.title"
-					type="deck-card" />
-			</div>
-
-			<h5>
-				{{ t('deck', 'Description') }}
-				<span v-if="copiedCard.descriptionLastEdit && !descriptionSaving">{{ t('deck', '(Unsaved)') }}</span>
-				<span v-if="descriptionSaving">{{ t('deck', '(Saving…)') }}</span>
-				<a v-tooltip="t('deck', 'Formatting help')"
-					href="https://deck.readthedocs.io/en/latest/Markdown/"
-					target="_blank"
-					class="icon icon-info" />
-				<Actions v-if="canEdit">
-					<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
-						{{ t('deck', 'Edit description') }}
-					</ActionButton>
-					<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
-						{{ t('deck', 'View description') }}
-					</ActionButton>
-				</Actions>
-				<Actions v-if="canEdit">
-					<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
-						{{ t('deck', 'Add Attachment') }}
-					</ActionButton>
-				</Actions>
-			</h5>
-
-			<div v-if="!descriptionEditing"
-				id="description-preview"
-				@click="clickedPreview"
-				v-html="renderedDescription" />
-			<VueEasymde v-else
-				:key="copiedCard.id"
-				ref="markdownEditor"
-				v-model="copiedCard.description"
-				:configs="mdeConfig"
-				@input="updateDescription"
-				@blur="saveDescription" />
+			<CardSidebarTabDetails :id="id" />
 		</AppSidebarTab>
 
 		<AppSidebarTab id="attachments"
@@ -182,23 +65,15 @@
 			icon="icon-activity">
 			<CardSidebarTabActivity :card="currentCard" />
 		</AppSidebarTab>
-		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
-			<div class="modal__content">
-				<h3>{{ t('deck', 'Choose attachment') }}</h3>
-				<AttachmentList
-					:card-id="currentCard.id"
-					:selectable="true"
-					@selectAttachment="addAttachment" />
-			</div>
-		</Modal>
 	</AppSidebar>
 </template>
 
 <script>
-import { Avatar, Actions, ActionButton, Multiselect, AppSidebar, AppSidebarTab, DatetimePicker, Modal } from '@nextcloud/vue'
+import { ActionButton, AppSidebar, AppSidebarTab } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
 import Color from '../../mixins/color'
-import { CollectionList } from 'nextcloud-vue-collections'
+
+import CardSidebarTabDetails from './CardSidebarTabDetails'
 import CardSidebarTabAttachments from './CardSidebarTabAttachments'
 import CardSidebarTabComments from './CardSidebarTabComments'
 import CardSidebarTabActivity from './CardSidebarTabActivity'
@@ -206,7 +81,7 @@ import MarkdownIt from 'markdown-it'
 import MarkdownItTaskLists from 'markdown-it-task-lists'
 import { formatFileSize } from '@nextcloud/files'
 import relativeDate from '../../mixins/relativeDate'
-import AttachmentList from './AttachmentList'
+
 import { generateUrl } from '@nextcloud/router'
 import { getLocale } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
@@ -223,18 +98,11 @@ export default {
 	components: {
 		AppSidebar,
 		AppSidebarTab,
-		Multiselect,
-		DatetimePicker,
-		VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
-		Actions,
 		ActionButton,
-		Avatar,
-		CollectionList,
+		CardSidebarTabDetails,
 		CardSidebarTabAttachments,
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
-		Modal,
-		AttachmentList,
 	},
 	mixins: [Color, relativeDate],
 	props: {
@@ -265,7 +133,6 @@ export default {
 			descriptionSaving: false,
 			hasActivity: capabilities && capabilities.activity,
 			hasComments: !!OC.appswebroots['comments'],
-			modalShow: false,
 			format: {
 				stringify: this.stringify,
 				parse: this.parse,
@@ -275,6 +142,7 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
+			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		...mapGetters(['canEdit', 'assignables']),
 		attachments() {
@@ -383,19 +251,7 @@ export default {
 		hideEditor() {
 			this.descriptionEditing = false
 		},
-		showAttachmentModal() {
-			this.modalShow = true
-		},
-		addAttachment(attachment) {
-			const descString = this.$refs.markdownEditor.easymde.value()
-			let embed = ''
-			if (attachment.extendedData.mimetype.includes('image')) {
-				embed = '!'
-			}
-			const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentUrl(attachment) + ')'
-			this.$refs.markdownEditor.easymde.value(descString + '\n' + attachmentString)
-			this.modalShow = false
-		},
+
 		clickedPreview(e) {
 			if (e.target.getAttribute('type') === 'checkbox') {
 				const clickedIndex = [...document.querySelector('#description-preview').querySelectorAll('input')].findIndex((li) => li.id === e.target.id)
@@ -496,6 +352,9 @@ export default {
 		parse(value) {
 			return moment(value, 'LLL', this.locale).toDate()
 		},
+		showModal() {
+			this.$store.dispatch('setCardDetailsInModal', true)
+		},
 	},
 }
 </script>
@@ -522,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);

src/components/card/CardSidebarTabDetails.vue

@@ -0,0 +1,615 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div>
+		<div class="section-wrapper">
+			<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag">
+				<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
+			</div>
+			<div class="section-details">
+				<Multiselect v-model="allLabels"
+					:multiple="true"
+					:disabled="!canEdit"
+					:options="currentBoard.labels"
+					:placeholder="t('deck', 'Assign a tag to this card…')"
+					:taggable="true"
+					label="title"
+					track-by="id"
+					@select="addLabelToCard"
+					@remove="removeLabelFromCard">
+					<template #option="scope">
+						<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
+							{{ scope.option.title }}
+						</div>
+					</template>
+					<template #tag="scope">
+						<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
+							{{ scope.option.title }}
+						</div>
+					</template>
+				</Multiselect>
+			</div>
+		</div>
+
+		<div class="section-wrapper">
+			<div v-tooltip="t('deck', 'Assign to users')" class="section-label icon-group">
+				<span class="hidden-visually">{{ t('deck', 'Assign to users/groups/circles') }}</span>
+			</div>
+			<div class="section-details">
+				<Multiselect v-if="canEdit"
+					v-model="assignedUsers"
+					:multiple="true"
+					:options="formatedAssignables"
+					:user-select="true"
+					:auto-limit="false"
+					:placeholder="t('deck', 'Assign a user to this card…')"
+					label="displayname"
+					track-by="multiselectKey"
+					@select="assignUserToCard"
+					@remove="removeUserFromCard">
+					<template #tag="scope">
+						<div class="avatarlist--inline">
+							<Avatar :user="scope.option.uid"
+								:display-name="scope.option.displayname"
+								:size="24"
+								:is-no-user="scope.option.isNoUser"
+								:disable-menu="true" />
+						</div>
+					</template>
+				</Multiselect>
+				<div v-else class="avatar-list--readonly">
+					<Avatar v-for="option in assignedUsers"
+						:key="option.primaryKey"
+						:user="option.uid"
+						:display-name="option.displayname"
+						:is-no-user="option.isNoUser"
+						:size="32" />
+				</div>
+			</div>
+		</div>
+
+		<div class="section-wrapper">
+			<div v-tooltip="t('deck', 'Due date')" class="section-label icon-calendar-dark">
+				<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
+			</div>
+			<div class="section-details">
+				<DatetimePicker v-model="duedate"
+					:placeholder="t('deck', 'Set a due date')"
+					type="datetime"
+					:minute-step="5"
+					:show-second="false"
+					:format="format"
+					:disabled="saving || !canEdit"
+					confirm />
+				<Actions v-if="canEdit">
+					<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
+						{{ t('deck', 'Remove due date') }}
+					</ActionButton>
+				</Actions>
+			</div>
+		</div>
+
+		<div class="section-wrapper">
+			<CollectionList v-if="currentCard.id"
+				:id="`${currentCard.id}`"
+				:name="currentCard.title"
+				type="deck-card" />
+		</div>
+
+		<h5>
+			{{ t('deck', 'Description') }}
+			<span v-if="copiedCard.descriptionLastEdit && !descriptionSaving">{{ t('deck', '(Unsaved)') }}</span>
+			<span v-if="descriptionSaving">{{ t('deck', '(Saving…)') }}</span>
+			<a v-tooltip="t('deck', 'Formatting help')"
+				href="https://deck.readthedocs.io/en/latest/Markdown/"
+				target="_blank"
+				class="icon icon-info" />
+			<Actions v-if="canEdit">
+				<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
+					{{ t('deck', 'Edit description') }}
+				</ActionButton>
+				<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
+					{{ t('deck', 'View description') }}
+				</ActionButton>
+			</Actions>
+			<Actions v-if="canEdit">
+				<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
+					{{ t('deck', 'Add Attachment') }}
+				</ActionButton>
+			</Actions>
+		</h5>
+
+		<div v-if="!descriptionEditing"
+			id="description-preview"
+			@click="clickedPreview"
+			v-html="renderedDescription" />
+		<VueEasymde v-else
+			:key="copiedCard.id"
+			ref="markdownEditor"
+			v-model="copiedCard.description"
+			:configs="mdeConfig"
+			@input="updateDescription"
+			@blur="saveDescription" />
+
+		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
+			<div class="modal__content">
+				<h3>{{ t('deck', 'Choose attachment') }}</h3>
+				<AttachmentList
+					:card-id="currentCard.id"
+					:selectable="true"
+					@selectAttachment="addAttachment" />
+			</div>
+		</Modal>
+	</div>
+</template>
+
+<script>
+import { Avatar, Actions, ActionButton, Multiselect, DatetimePicker, Modal } from '@nextcloud/vue'
+import { mapState, mapGetters } from 'vuex'
+import Color from '../../mixins/color'
+import { CollectionList } from 'nextcloud-vue-collections'
+
+import MarkdownIt from 'markdown-it'
+import MarkdownItTaskLists from 'markdown-it-task-lists'
+import { formatFileSize } from '@nextcloud/files'
+import relativeDate from '../../mixins/relativeDate'
+import AttachmentList from './AttachmentList'
+import { generateUrl } from '@nextcloud/router'
+import { getLocale } from '@nextcloud/l10n'
+import moment from '@nextcloud/moment'
+
+const markdownIt = new MarkdownIt({
+	linkify: true,
+})
+markdownIt.use(MarkdownItTaskLists, { enabled: true, label: true, labelAfter: true })
+
+const capabilities = window.OC.getCapabilities()
+
+export default {
+	name: 'CardSidebarTabDetails',
+	components: {
+		Multiselect,
+		DatetimePicker,
+		VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
+		Actions,
+		ActionButton,
+		Avatar,
+		CollectionList,
+		Modal,
+		AttachmentList,
+	},
+	mixins: [Color, relativeDate],
+	props: {
+		id: {
+			type: Number,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			assignedUsers: null,
+			addedLabelToCard: null,
+			copiedCard: null,
+			allLabels: null,
+			locale: getLocale(),
+
+			saving: false,
+			markdownIt: null,
+			descriptionEditing: false,
+			mdeConfig: {
+				autoDownloadFontAwesome: false,
+				spellChecker: false,
+				autofocus: true,
+				autosave: { enabled: false, uniqueId: 'unique' },
+				toolbar: false,
+			},
+			lastModifiedRelative: null,
+			lastCreatedRemative: null,
+			descriptionSaveTimeout: null,
+			descriptionSaving: false,
+			hasActivity: capabilities && capabilities.activity,
+			hasComments: !!OC.appswebroots['comments'],
+			modalShow: false,
+			format: {
+				stringify: this.stringify,
+				parse: this.parse,
+			},
+		}
+	},
+	computed: {
+		...mapState({
+			currentBoard: state => state.currentBoard,
+		}),
+		...mapGetters(['canEdit', 'assignables']),
+		attachments() {
+			return [...this.$store.getters.attachmentsByCard(this.id)].sort((a, b) => b.id - a.id)
+		},
+		mimetypeForAttachment() {
+			return (mimetype) => {
+				const url = OC.MimeType.getIconUrl(mimetype)
+				const styles = {
+					'background-image': `url("${url}")`,
+				}
+				return styles
+			}
+		},
+		attachmentUrl() {
+			return (attachment) => generateUrl(`/apps/deck/cards/${attachment.cardId}/attachment/${attachment.id}`)
+		},
+		formattedFileSize() {
+			return (filesize) => formatFileSize(filesize)
+		},
+		currentCard() {
+			return this.$store.getters.cardById(this.id)
+		},
+		subtitle() {
+			return t('deck', 'Modified') + ': ' + this.lastModifiedRelative + ' ' + t('deck', 'Created') + ': ' + this.lastCreatedRemative
+		},
+		formatedAssignables() {
+			return this.assignables.map(item => {
+				const assignable = {
+					...item,
+					user: item.primaryKey,
+					displayName: item.displayname,
+					icon: 'icon-user',
+					isNoUser: false,
+					multiselectKey: item.type + ':' + item.uid,
+				}
+
+				if (item.type === 1) {
+					assignable.icon = 'icon-group'
+					assignable.isNoUser = true
+				}
+				if (item.type === 7) {
+					assignable.icon = 'icon-circles'
+					assignable.isNoUser = true
+				}
+
+				return assignable
+			})
+		},
+		duedate: {
+			get() {
+				return this.currentCard.duedate ? new Date(this.currentCard.duedate) : null
+			},
+			async set(val) {
+				this.saving = true
+				await this.$store.dispatch('updateCardDue', {
+					...this.copiedCard,
+					duedate: val ? (new Date(val)).toISOString() : null,
+				})
+				this.saving = false
+			},
+		},
+		renderedDescription() {
+			return markdownIt.render(this.copiedCard.description || '')
+		},
+	},
+	watch: {
+		currentCard() {
+			this.initialize()
+		},
+	},
+	created() {
+		setInterval(this.updateRelativeTimestamps, 10000)
+	},
+	destroyed() {
+		clearInterval(this.updateRelativeTimestamps)
+	},
+	mounted() {
+		this.initialize()
+	},
+	methods: {
+		async initialize() {
+			if (!this.currentCard) {
+				return
+			}
+
+			if (this.copiedCard) {
+				await this.saveDescription()
+			}
+
+			this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
+			this.allLabels = this.currentCard.labels
+
+			if (this.currentCard.assignedUsers && this.currentCard.assignedUsers.length > 0) {
+				this.assignedUsers = this.currentCard.assignedUsers.map((item) => ({
+					...item.participant,
+					isNoUser: item.participant.type !== 0,
+					multiselectKey: item.participant.type + ':' + item.participant.primaryKey,
+				}))
+			} else {
+				this.assignedUsers = []
+			}
+
+			this.desc = this.currentCard.description
+			this.updateRelativeTimestamps()
+		},
+		showEditor() {
+			if (!this.canEdit) {
+				return
+			}
+			this.descriptionEditing = true
+		},
+		hideEditor() {
+			this.descriptionEditing = false
+		},
+		showAttachmentModal() {
+			this.modalShow = true
+		},
+		addAttachment(attachment) {
+			const descString = this.$refs.markdownEditor.easymde.value()
+			let embed = ''
+			if (attachment.extendedData.mimetype.includes('image')) {
+				embed = '!'
+			}
+			const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentUrl(attachment) + ')'
+			this.$refs.markdownEditor.easymde.value(descString + '\n' + attachmentString)
+			this.modalShow = false
+		},
+		clickedPreview(e) {
+			if (e.target.getAttribute('type') === 'checkbox') {
+				const clickedIndex = [...document.querySelector('#description-preview').querySelectorAll('input')].findIndex((li) => li.id === e.target.id)
+				const reg = /\[(X|\s|_|-)\]/ig
+				let nth = 0
+				const updatedDescription = this.copiedCard.description.replace(reg, (match, i, original) => {
+					let result = match
+					if ('' + nth++ === '' + clickedIndex) {
+						if (match.match(/^\[\s\]/i)) {
+							result = match.replace(/\[\s\]/i, '[x]')
+						}
+						if (match.match(/^\[x\]/i)) {
+							result = match.replace(/\[x\]/i, '[ ]')
+						}
+						return result
+					}
+					return match
+				})
+				this.updateDescription(updatedDescription)
+			}
+		},
+		updateRelativeTimestamps() {
+			this.lastModifiedRelative = OC.Util.relativeModifiedDate(this.currentCard.lastModified * 1000)
+			this.lastCreatedRemative = OC.Util.relativeModifiedDate(this.currentCard.createdAt * 1000)
+		},
+		setDue() {
+			this.$store.dispatch('updateCardDue', this.copiedCard)
+		},
+		removeDue() {
+			this.copiedCard.duedate = null
+			this.$store.dispatch('updateCardDue', this.copiedCard)
+		},
+		async saveDescription() {
+			if (!Object.prototype.hasOwnProperty.call(this.copiedCard, 'descriptionLastEdit') || this.descriptionSaving) {
+				return
+			}
+			this.descriptionSaving = true
+			await this.$store.dispatch('updateCardDesc', this.copiedCard)
+			delete this.copiedCard.descriptionLastEdit
+			this.descriptionSaving = false
+		},
+		updateDescription(text) {
+			this.copiedCard.descriptionLastEdit = Date.now()
+			clearTimeout(this.descriptionSaveTimeout)
+			this.descriptionSaveTimeout = setTimeout(async() => {
+				 await this.saveDescription()
+			}, 2500)
+		},
+
+		closeSidebar() {
+			this.$router.push({ name: 'board' })
+		},
+
+		assignUserToCard(user) {
+			this.$store.dispatch('assignCardToUser', {
+				card: this.copiedCard,
+				assignee: {
+					userId: user.uid,
+					type: user.type,
+				},
+			})
+		},
+
+		removeUserFromCard(user) {
+			this.$store.dispatch('removeUserFromCard', {
+				card: this.copiedCard,
+				assignee: {
+					userId: user.uid,
+					type: user.type,
+				},
+			})
+		},
+
+		addLabelToCard(newLabel) {
+			this.copiedCard.labels.push(newLabel)
+			const data = {
+				card: this.copiedCard,
+				labelId: newLabel.id,
+			}
+			this.$store.dispatch('addLabel', data)
+		},
+
+		removeLabelFromCard(removedLabel) {
+
+			const removeIndex = this.copiedCard.labels.findIndex((label) => {
+				return label.id === removedLabel.id
+			})
+			if (removeIndex !== -1) {
+				this.copiedCard.labels.splice(removeIndex, 1)
+			}
+
+			const data = {
+				card: this.copiedCard,
+				labelId: removedLabel.id,
+			}
+			this.$store.dispatch('removeLabel', data)
+		},
+		stringify(date) {
+			return moment(date).locale(this.locale).format('LLL')
+		},
+		parse(value) {
+			return moment(value, 'LLL', this.locale).toDate()
+		},
+	},
+}
+</script>
+
+<style>
+	@import '~easymde/dist/easymde.min.css';
+
+	.vue-easymde, .CodeMirror {
+		border: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.editor-preview,
+	.editor-statusbar {
+		display: none;
+	}
+
+	#app-sidebar .app-sidebar-header__desc h4 {
+		font-size: 12px !important;
+	}
+</style>
+
+<style lang="scss" scoped>
+
+	h5 {
+		border-bottom: 1px solid var(--color-border);
+		margin-top: 20px;
+		margin-bottom: 5px;
+		color: var(--color-text-maxcontrast);
+
+		.icon-info {
+			display: inline-block;
+			width: 32px;
+			height: 16px;
+			float: right;
+			opacity: .7;
+		}
+
+		.icon-attach {
+			background-size: 16px;
+			float: right;
+			margin-top: -14px;
+			opacity: .7;
+		}
+
+		.icon-toggle, .icon-rename {
+			float: right;
+			margin-top: -14px;
+		}
+	}
+
+	aside::v-deep section {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.section-wrapper {
+		display: flex;
+		max-width: 100%;
+		margin-top: 10px;
+
+		.section-label {
+			background-position: 0px center;
+			width: 28px;
+			margin-left: 9px;
+			flex-shrink: 0;
+		}
+
+		.section-details {
+			flex-grow: 1;
+
+			button.action-item--single {
+				margin-top: -6px;
+			}
+		}
+	}
+
+	.tag {
+		flex-grow: 0;
+		flex-shrink: 1;
+		overflow: hidden;
+		padding: 1px 3px;
+		border-radius: 3px;
+		font-size: 85%;
+		margin-right: 3px;
+	}
+
+	.avatarLabel {
+		padding: 6px
+	}
+
+	.section-details::v-deep .multiselect__tags-wrap {
+		flex-wrap: wrap;
+	}
+
+	.avatar-list--readonly .avatardiv {
+		margin-right: 3px;
+	}
+
+	.avatarlist--inline {
+		display: flex;
+		align-items: center;
+		margin-right: 3px;
+		.avatarLabel {
+			padding: 0;
+		}
+	}
+
+	.multiselect::v-deep .multiselect__tags-wrap {
+		z-index: 2;
+	}
+
+	.multiselect.multiselect--active::v-deep .multiselect__tags-wrap {
+		z-index: 0;
+	}
+
+	#description-preview {
+		min-height: 100px;
+
+		&::v-deep {
+			@import './../../css/markdown';
+		}
+
+		&::v-deep input {
+			min-height: auto;
+		}
+
+		&::v-deep a {
+			text-decoration: underline;
+		}
+	}
+
+	.modal__content {
+		width: 25vw;
+		min-width: 250px;
+		min-height: 120px;
+		text-align: center;
+		margin: 20px 20px 60px 20px;
+		padding-bottom: 20px;
+	}
+
+</style>

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

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
 		},
@@ -184,6 +188,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
 		},
@@ -258,6 +266,7 @@ export default new Vuex.Store({
 				Vue.delete(state.currentBoard.acl, removeIndex)
 			}
 		},
+
 	},
 	actions: {
 		setFilter({ commit }, filter) {
@@ -368,6 +377,9 @@ export default new Vuex.Store({
 		toggleCompactMode({ commit }) {
 			commit('toggleCompactMode')
 		},
+		setCardDetailsInModal({ commit }, show) {
+			commit('setCardDetailsInModal', show)
+		},
 		setCurrentBoard({ commit }, board) {
 			commit('setCurrentBoard', board)
 		},