Merge branch 'master' into bugfix/1806

src/BoardSelector.vue

@@ -24,6 +24,7 @@
 	<Modal @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h1>{{ t('deck', 'Select the board to link to a project') }}</h1>
+			<input v-model="filter" type="text" :placeholder="t('deck', 'Search by board title')">
 			<ul v-if="!loading">
 				<li v-for="board in availableBoards"
 					:key="board.id"
@@ -46,8 +47,15 @@
 		padding: 20px;
 	}
 
+	input {
+		width: 100%;
+		margin-bottom: 15px;
+	}
+
 	ul {
-		min-height: 100px;
+		min-height: 50vh;
+		max-height: 300px;
+		overflow: scroll;
 	}
 
 	li {
@@ -80,7 +88,7 @@
 
 </style>
 <script>
-import { Modal } from '@nextcloud/vue/dist/Components/Modal'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
 import axios from '@nextcloud/axios'
 
 export default {
@@ -90,6 +98,7 @@ export default {
 	},
 	data() {
 		return {
+			filter: '',
 			boards: [],
 			selectedBoard: null,
 			loading: true,
@@ -98,12 +107,16 @@ export default {
 	},
 	computed: {
 		availableBoards() {
-			return this.boards.filter((board) => ('' + board.id !== '' + this.currentBoard))
+			return this.boards.filter((board) => (
+				'' + board.id !== '' + this.currentBoard
+				&& board.title.match(this.filter)
+			))
 		},
 	},
 	beforeMount() {
 		this.fetchBoards()
-		this.currentBoard = window.location.hash.match(/\/boards\/([0-9]+)/)[1] || null
+		const hash = window.location.hash.match(/\/boards\/([0-9]+)/)
+		this.currentBoard = hash.length > 0 ? hash[1] : null
 	},
 	methods: {
 		fetchBoards() {

src/CardSelector.vue

@@ -45,8 +45,8 @@
 </template>
 
 <script>
-import { Modal } from '@nextcloud/vue/dist/Components/Modal'
-import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 import axios from '@nextcloud/axios'
 
 export default {

src/components/Controls.vue

@@ -54,14 +54,14 @@
 			</div>
 			<div class="board-action-buttons">
 				<Popover>
-					<Actions slot="trigger" :style="filterOpacity" :title="t('deck', 'Apply filter')">
-						<ActionButton icon="icon-filter" />
+					<Actions slot="trigger" :title="t('deck', 'Apply filter')">
+						<ActionButton v-if="isFilterActive" icon="icon-filter_set" />
+						<ActionButton v-else icon="icon-filter" />
 					</Actions>
 
 					<template>
 						<div class="filter">
 							<h3>{{ t('deck', 'Filter by tag') }}</h3>
-							{{ filter }}
 							<div v-for="label in board.labels" :key="label.id" class="filter--item">
 								<input
 									:id="label.id"
@@ -219,11 +219,14 @@ export default {
 			}
 			return 'opacity: .5;'
 		},
-		filterOpacity() {
+		isFilterActive() {
 			if (this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== '') {
-				return 'opacity: 1;'
+				return true
 			}
-			return 'opacity: .5;'
+			return false
+		},
+		labelsSorted() {
+			return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
 	},
 	methods: {

src/components/board/Stack.vue

@@ -28,7 +28,10 @@
 				<h3 v-if="!canManage">
 					{{ stack.title }}
 				</h3>
-				<h3 v-else-if="!editing" @click="startEditing(stack)">
+				<h3 v-else-if="!editing"
+					v-tooltip="stack.title"
+					class="stack--title"
+					@click="startEditing(stack)">
 					{{ stack.title }}
 				</h3>
 				<form v-else @submit.prevent="finishedEdit(stack)">
@@ -234,12 +237,14 @@ export default {
 		margin: 3px -3px;
 		margin-right: -10px;
 		margin-top: 0;
-		margin-bottom: 0;
+		margin-bottom: 3px;
 		background-color: var(--color-main-background-translucent);
+		cursor: grab;
 
 		h3, form {
 			flex-grow: 1;
 			display: flex;
+			cursor: inherit;
 
 			input[type=text] {
 				flex-grow: 1;
@@ -247,6 +252,13 @@ export default {
 		}
 	}
 
+	.stack--title {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: calc($stack-width - 60px);
+	}
+
 	.stack--card-add {
 		position: sticky;
 		top: 52px;

src/components/board/TagsTabSidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<ul class="labels">
-			<li v-for="label in labels" :key="label.id" :class="{editing: (editingLabelId === label.id)}">
+			<li v-for="label in labelsSorted" :key="label.id" :class="{editing: (editingLabelId === label.id)}">
 				<!-- Edit Tag -->
 				<template v-if="editingLabelId === label.id">
 					<form class="label-form" @submit.prevent="updateLabel(label)">
@@ -111,6 +111,9 @@ export default {
 
 			return true
 		},
+		labelsSorted() {
+			return [...this.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+		},
 
 	},
 	methods: {

src/components/boards/Boards.vue

@@ -83,6 +83,11 @@ export default {
 			display: flex;
 		}
 
+		.board-list-row:not(.board-list-header-row):hover {
+			transition: background-color 0.3s ease;
+			background-color: var(--color-background-dark);
+		}
+
 		.board-list-header-row {
 			color: var(--color-text-lighter);
 		}

src/components/card/CardSidebar.vue

@@ -203,7 +203,9 @@ import { formatFileSize } from '@nextcloud/files'
 import relativeDate from '../../mixins/relativeDate'
 import AttachmentList from './AttachmentList'
 
-const markdownIt = new MarkdownIt()
+const markdownIt = new MarkdownIt({
+	linkify: true,
+})
 markdownIt.use(MarkdownItTaskLists, { enabled: true, label: true, labelAfter: true })
 
 const capabilities = window.OC.getCapabilities()
@@ -325,7 +327,7 @@ export default {
 			},
 		},
 		renderedDescription() {
-			return markdownIt.render(this.copiedCard.description)
+			return markdownIt.render(this.copiedCard.description || '')
 		},
 	},
 	watch: {
@@ -600,15 +602,23 @@ export default {
 	#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;
-		height: 120px;
+		min-height: 120px;
 		text-align: center;
 		margin: 20px 20px 60px 20px;
 		padding-bottom: 20px;

src/components/cards/CardBadges.vue

@@ -34,138 +34,32 @@
 
 		<AvatarList :users="card.assignedUsers" />
 
-		<div @click.stop.prevent>
-			<Actions v-if="canEdit">
-				<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
-					{{ t('deck', 'Assign to me') }}
-				</ActionButton>
-				<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">
-					{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}
-				</ActionButton>
-				<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
-					{{ t('deck', 'Delete card') }}
-				</ActionButton>
-				<ActionButton icon="icon-external" @click.stop="modalShow=true">
-					{{ t('deck', 'Move card') }}
-				</ActionButton>
-				<ActionButton icon="icon-settings-dark" @click="openCard">
-					{{ t('deck', 'Card details') }}
-				</ActionButton>
-			</Actions>
-		</div>
-		<Modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
-			<div class="modal__content">
-				<Multiselect v-model="selectedBoard"
-					:placeholder="t('deck', 'Select a board')"
-					:options="boards"
-					label="title"
-					@select="loadStacksFromBoard" />
-				<Multiselect v-model="selectedStack"
-					:placeholder="t('deck', 'Select a stack')"
-					:options="stacksFromBoard"
-					label="title" />
-
-				<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
-					{{ t('deck', 'Move card') }}
-				</button>
-				<button @click="modalShow=false">
-					{{ t('deck', 'Cancel') }}
-				</button>
-			</div>
-		</Modal>
+		<CardMenu :id="id" />
 	</div>
 </template>
 <script>
 import AvatarList from './AvatarList'
-import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
-import { mapGetters, mapState } from 'vuex'
-import axios from '@nextcloud/axios'
+import CardMenu from './CardMenu'
 
 export default {
 	name: 'CardBadges',
-	components: { AvatarList, Actions, ActionButton, Modal, Multiselect },
+	components: { AvatarList, CardMenu },
 	props: {
 		id: {
 			type: Number,
 			default: null,
 		},
 	},
-	data() {
-		return {
-			modalShow: false,
-			selectedBoard: '',
-			selectedStack: '',
-			stacksFromBoard: [],
-		}
-	},
 	computed: {
-		...mapGetters([
-			'canEdit',
-		]),
-		...mapState({
-			showArchived: state => state.showArchived,
-			currentBoard: state => state.currentBoard,
-		}),
 		checkListCount() {
 			return (this.card.description.match(/^\s*(\*|-|(\d\.))\s+\[\s*(\s|x)\s*\](.*)$/gim) || []).length
 		},
 		checkListCheckedCount() {
 			return (this.card.description.match(/^\s*(\*|-|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
 		},
-		compactMode() {
-			return false
-		},
 		card() {
 			return this.$store.getters.cardById(this.id)
 		},
-		isBoardAndStackChoosen() {
-			if (this.selectedBoard === '' || this.selectedStack === '') {
-				return false
-			}
-			return true
-		},
-		boards() {
-			return this.$store.getters.boards.filter(board => {
-				return board.id !== this.currentBoard.id
-			})
-		},
-	},
-	methods: {
-		openCard() {
-			this.$router.push({ name: 'card', params: { cardId: this.id } })
-		},
-		deleteCard() {
-			this.$store.dispatch('deleteCard', this.card)
-		},
-		archiveUnarchiveCard() {
-			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
-		},
-		assignCardToMe() {
-			this.copiedCard = Object.assign({}, this.card)
-			this.$store.dispatch('assignCardToUser', {
-				card: this.copiedCard,
-				assignee: {
-					userId: OC.getCurrentUser().uid,
-					type: 0,
-				},
-			})
-		},
-		moveCard() {
-			this.copiedCard = Object.assign({}, this.card)
-			this.copiedCard.stackId = this.selectedStack.id
-			this.$store.dispatch('moveCard', this.copiedCard)
-			this.modalShow = false
-		},
-		async loadStacksFromBoard(board) {
-			try {
-				console.debug(board)
-				const url = OC.generateUrl('/apps/deck/stacks/' + board.id)
-				const response = await axios.get(url)
-				this.stacksFromBoard = response.data
-			} catch (err) {
-				return err
-			}
-		},
 	},
 }
 </script>
@@ -236,20 +130,4 @@ export default {
 	.fade-enter, .fade-leave-to {
 		opacity: 0;
 	}
-
-	.modal__content {
-		width: 25vw;
-		min-width: 250px;
-		height: 120px;
-		text-align: center;
-		margin: 20px 20px 60px 20px;
-
-		.multiselect {
-			margin-bottom: 10px;
-		}
-	}
-
-	.modal__content button {
-		float: right;
-	}
 </style>

src/components/cards/CardItem.vue

@@ -54,6 +54,8 @@
 						</div>
 					</transition>
 				</div>
+
+				<CardMenu v-if="!editing && compactMode" :id="id" class="right" />
 			</div>
 			<transition-group name="zoom"
 				tag="ul"
@@ -78,10 +80,11 @@ import CardBadges from './CardBadges'
 import Color from '../../mixins/color'
 import labelStyle from '../../mixins/labelStyle'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
+import CardMenu from './CardMenu'
 
 export default {
 	name: 'CardItem',
-	components: { CardBadges, AttachmentDragAndDrop },
+	components: { CardBadges, AttachmentDragAndDrop, CardMenu },
 	directives: {
 		ClickOutside,
 	},
@@ -137,16 +140,9 @@ export default {
 			return moment(this.card.duedate).format('LLLL')
 		},
 	},
-	watch: {
-		currentCard(newValue) {
-			if (newValue) {
-				this.$nextTick(() => this.$el.scrollIntoView())
-			}
-		},
-	},
 	methods: {
 		openCard() {
-			this.$router.push({ name: 'card', params: { cardId: this.id } })
+			this.$router.push({ name: 'card', params: { cardId: this.id } }).catch(() => {})
 		},
 		startEditing(card) {
 			this.copiedCard = Object.assign({}, card)
@@ -175,6 +171,10 @@ export default {
 		border: 1px solid var(--color-border);
 	}
 
+	.card:hover {
+		box-shadow: 0 0 5px 1px var(--color-box-shadow);
+	}
+
 	.card {
 		transition: box-shadow 0.1s ease-in-out;
 		box-shadow: 0 0 2px 0 var(--color-box-shadow);

src/components/cards/CardMenu.vue

@@ -0,0 +1,171 @@
+<!--
+  - @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 @click.stop.prevent>
+			<Actions v-if="canEdit">
+				<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
+					{{ t('deck', 'Assign to me') }}
+				</ActionButton>
+				<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">
+					{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}
+				</ActionButton>
+				<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
+					{{ t('deck', 'Delete card') }}
+				</ActionButton>
+				<ActionButton icon="icon-external" @click.stop="modalShow=true">
+					{{ t('deck', 'Move card') }}
+				</ActionButton>
+				<ActionButton icon="icon-settings-dark" @click="openCard">
+					{{ t('deck', 'Card details') }}
+				</ActionButton>
+			</Actions>
+		</div>
+		<Modal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
+			<div class="modal__content">
+				<h3>{{ t('deck', 'Move card to another board') }}</h3>
+				<Multiselect v-model="selectedBoard"
+					:placeholder="t('deck', 'Select a board')"
+					:options="boards"
+					:max-height="100"
+					label="title"
+					@select="loadStacksFromBoard" />
+				<Multiselect v-model="selectedStack"
+					:placeholder="t('deck', 'Select a stack')"
+					:options="stacksFromBoard"
+					:max-height="100"
+					label="title" />
+
+				<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
+					{{ t('deck', 'Move card') }}
+				</button>
+				<button @click="modalShow=false">
+					{{ t('deck', 'Cancel') }}
+				</button>
+			</div>
+		</Modal>
+	</div>
+</template>
+<script>
+import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
+import { mapGetters, mapState } from 'vuex'
+import axios from '@nextcloud/axios'
+
+export default {
+	name: 'CardMenu',
+	components: { Actions, ActionButton, Modal, Multiselect },
+	props: {
+		id: {
+			type: Number,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			modalShow: false,
+			selectedBoard: '',
+			selectedStack: '',
+			stacksFromBoard: [],
+		}
+	},
+	computed: {
+		...mapGetters([
+			'canEdit',
+		]),
+		...mapState({
+			showArchived: state => state.showArchived,
+			currentBoard: state => state.currentBoard,
+		}),
+
+		card() {
+			return this.$store.getters.cardById(this.id)
+		},
+		isBoardAndStackChoosen() {
+			if (this.selectedBoard === '' || this.selectedStack === '') {
+				return false
+			}
+			return true
+		},
+		boards() {
+			return this.$store.getters.boards.filter(board => {
+				return board.id !== this.currentBoard.id
+			})
+		},
+	},
+	methods: {
+		openCard() {
+			this.$router.push({ name: 'card', params: { cardId: this.id } })
+		},
+		deleteCard() {
+			this.$store.dispatch('deleteCard', this.card)
+		},
+		archiveUnarchiveCard() {
+			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
+		},
+		assignCardToMe() {
+			this.copiedCard = Object.assign({}, this.card)
+			this.$store.dispatch('assignCardToUser', {
+				card: this.copiedCard,
+				assignee: {
+					userId: OC.getCurrentUser().uid,
+					type: 0,
+				},
+			})
+		},
+		moveCard() {
+			this.copiedCard = Object.assign({}, this.card)
+			this.copiedCard.stackId = this.selectedStack.id
+			this.$store.dispatch('moveCard', this.copiedCard)
+			this.modalShow = false
+		},
+		async loadStacksFromBoard(board) {
+			try {
+				const url = OC.generateUrl('/apps/deck/stacks/' + board.id)
+				const response = await axios.get(url)
+				this.stacksFromBoard = response.data
+			} catch (err) {
+				return err
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	.modal__content {
+		width: 25vw;
+		min-width: 250px;
+		min-height: 120px;
+		text-align: center;
+		margin: 20px 20px 100px 20px;
+
+		.multiselect {
+			margin-bottom: 10px;
+		}
+	}
+
+	.modal__content button {
+		float: right;
+		margin-top: 50px;
+	}
+</style>

src/components/navigation/AppNavigationBoard.vue

@@ -149,26 +149,27 @@ export default {
 						text: t('deck', 'Edit board'),
 					})
 				}
-
-				actions.push({
-					action: async() => {
-						this.hideMenu()
-						this.loading = true
-						try {
-							const newBoard = await this.$store.dispatch('cloneBoard', this.board)
-							this.loading = false
-							const route = this.routeTo
-							route.params.id = newBoard.id
-							this.$router.push(route)
-						} catch (e) {
-							OC.Notification.showTemporary(t('deck', 'An error occurred'))
-							console.error(e)
-						}
-					},
-					icon: 'icon-clone',
-					text: t('deck', 'Clone board'),
-				})
 				if (canManage) {
+
+					actions.push({
+						action: async() => {
+							this.hideMenu()
+							this.loading = true
+							try {
+								const newBoard = await this.$store.dispatch('cloneBoard', this.board)
+								this.loading = false
+								const route = this.routeTo
+								route.params.id = newBoard.id
+								this.$router.push(route)
+							} catch (e) {
+								OC.Notification.showTemporary(t('deck', 'An error occurred'))
+								console.error(e)
+							}
+						},
+						icon: 'icon-clone',
+						text: t('deck', 'Clone board'),
+					})
+
 					if (!this.board.archived) {
 						actions.push({
 							action: () => {

src/components/navigation/AppNavigationBoardCategory.vue

@@ -29,7 +29,7 @@
 			{{ text }}
 		</a>
 		<ul v-if="boards.length > 0">
-			<AppNavigationBoard v-for="board in boards" :key="board.id" :board="board" />
+			<AppNavigationBoard v-for="board in boardsSorted" :key="board.id" :board="board" />
 		</ul>
 	</li>
 </template>
@@ -78,6 +78,9 @@ export default {
 		}
 	},
 	computed: {
+		boardsSorted() {
+			return [...this.boards].sort((a, b) => (a.title < b.title) ? -1 : 1)
+		},
 		collapsible() {
 			return this.boards.length > 0
 		},

src/css/markdown.scss

@@ -0,0 +1,102 @@
+p {
+	margin-bottom: 15px;
+}
+
+* {
+	white-space: normal;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+}
+
+a {
+	opacity: 0.5;
+	text-decoration: underline;
+}
+
+ol,
+ul {
+	margin-left: 20px;
+	margin-bottom: 10px;
+}
+
+ul {
+	list-style-type: disc;
+}
+
+h1 {
+	font-size: 18px;
+	font-weight: 600;
+	margin-bottom: 5px;
+}
+
+h2 {
+	font-size: 16px;
+	font-weight: 600;
+}
+
+h3 {
+	font-size: 14px;
+	font-weight: 600;
+}
+
+h4 {
+	font-size: 13px;
+	font-weight: 600;
+}
+
+h6 {
+	font-size: 12px;
+	font-weight: 600;
+}
+
+pre {
+	background-color: var(--color-background-dark);
+	padding: 3px;
+	overflow: auto;
+
+	code {
+		white-space: pre;
+	}
+}
+
+img {
+	max-width: 100%;
+	max-height: 50vh;
+	margin: auto;
+	display: block;
+}
+
+input[type=checkbox] {
+	margin: 0px 10px 0px 0px;
+	line-height: 10px;
+	font-size: 10px;
+	display: inline-block;
+	min-height: 12px;
+}
+
+li 	input[type="checkbox"].checkbox + label::before {
+	margin-left: -15px;
+
+}
+input[type="checkbox"].checkbox + label::before {
+	position: relative;
+	z-index: 100;
+	margin-right: 10px;
+	margin-top: 0;
+}
+li input[type="checkbox"].checkbox:not(:checked) + label::before {
+	background-color: var(--color-main-background);
+}
+
+table {
+	margin-bottom: 10px;
+	border-collapse: collapse;
+
+	thead {
+		background-color: var(--color-background-dark);
+	}
+	td, th {
+		border: 1px solid var(--color-background-darker);
+		padding: 3px;
+	}
+}

src/main.js

@@ -62,7 +62,7 @@ Vue.config.errorHandler = (err, vm, info) => {
 		const errorMessage = t('deck', 'Something went wrong')
 		OCP.Toast.error(`${errorMessage}: ${err.response.data.status} ${err.response.data.message}`)
 	}
-	throw err
+	console.error(err)
 }
 
 /* eslint-disable-next-line no-new */