General design enhancements and scroll area changes

Signed-off-by: Julius Härtl <jus@bitgrid.net>

appinfo/info.xml

@@ -36,7 +36,7 @@
         <database min-version="9.4">pgsql</database>
         <database>sqlite</database>
         <database min-version="5.5">mysql</database>
-        <nextcloud min-version="17" max-version="18" />
+        <nextcloud min-version="17" max-version="19" />
     </dependencies>
     <background-jobs>
         <job>OCA\Deck\Cron\DeleteCron</job>

css/animations.scss

@@ -1,43 +0,0 @@
-/*
- * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
- *
- * @author 2018 Michael Weimann <mail@michael-weimann.eu>
- *
- * @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/>.
- *
- */
-
-.compact-item.ng-enter,
-.compact-item.ng-leave {
-  overflow: hidden;
-  transition: all 250ms linear;
-}
-
-.compact-item.ng-enter {
-  max-height: 0;
-
-  &.ng-enter-active {
-    max-height: 50px;
-  }
-}
-
-.compact-item.ng-leave {
-  max-height: 50px;
-
-  &.ng-leave-active {
-    max-height: 0;
-  }
-}

css/autocomplete.scss

@@ -1,77 +0,0 @@
-/**
- * based upon apps/comments/js/vendor/At.js/dist/css/jquery.atwho.css,
- * only changed colors and font-weight
- */
-
-.atwho-view {
-	position:absolute;
-	top: 0;
-	left: 0;
-	display: none;
-	margin-top: 18px;
-	background: var(--color-main-background);
-	color: var(--color-main-text);
-	border: 1px solid var(--color-border);
-	border-radius: var(--border-radius);
-	box-shadow: 0 0 5px var(--color-box-shadow);
-	min-width: 120px;
-	z-index: 11110 !important;
-}
-
-.atwho-view .atwho-header {
-	padding: 5px;
-	margin: 5px;
-	cursor: pointer;
-	border-bottom: solid 1px var(--color-border);
-	color: var(--color-main-text);
-	font-size: 11px;
-	font-weight: bold;
-}
-
-.atwho-view .atwho-header .small {
-	color: var(--color-main-text);
-	float: right;
-	padding-top: 2px;
-	margin-right: -5px;
-	font-size: 12px;
-	font-weight: normal;
-}
-
-.atwho-view .atwho-header:hover {
-	cursor: default;
-}
-
-.atwho-view .cur {
-	background: var(--color-primary);
-	color: var(--color-primary-text);
-}
-.atwho-view .cur small {
-	color: var(--color-primary-text);
-}
-.atwho-view strong {
-	color: var(--color-main-text);
-	font-weight: normal;
-}
-.atwho-view .cur strong {
-	color: var(--color-primary-text);
-	font-weight: normal;
-}
-.atwho-view ul {
-	/* width: 100px; */
-	list-style:none;
-	padding:0;
-	margin:auto;
-	max-height: 200px;
-	overflow-y: auto;
-}
-.atwho-view ul li {
-	display: block;
-	padding: 5px 10px;
-	border-bottom: 1px solid var(--color-border);
-	cursor: pointer;
-}
-.atwho-view small {
-	font-size: smaller;
-	color: var(--color-main-text);
-	font-weight: normal;
-}

css/comments.scss

@@ -1,261 +0,0 @@
-/*
- * Copyright (c) 2016
- *
- * This file is licensed under the Affero General Public License version 3
- * or later.
- *
- * See the COPYING-README file.
- *
- */
-
-#commentsTabView .emptycontent {
-	margin-top: 0;
-}
-
-#commentsTabView .newCommentForm {
-	margin-left: 36px;
-	position: relative;
-}
-
-#commentsTabView .newCommentForm .message {
-	width: 100%;
-	padding: 10px;
-	min-height: 44px;
-	margin: 0;
-
-	/* Prevent the text from overlapping with the submit button. */
-	padding-right: 30px;
-}
-
-#commentsTabView .newCommentForm {
-	.submit,
-	.submitLoading {
-		width: 44px;
-		height: 44px;
-		margin: 0;
-		padding: 13px;
-		background-color: transparent;
-		border: none;
-		opacity: .3;
-		position: absolute;
-		bottom: 0;
-		right: 0;
-	}
-}
-
-#commentsTabView .deleteLoading {
-	padding: 14px;
-	vertical-align: middle;
-}
-
-#commentsTabView .newCommentForm .submit:not(:disabled):hover,
-#commentsTabView .newCommentForm .submit:not(:disabled):focus {
-	opacity: 1;
-}
-
-#commentsTabView .newCommentForm div.message {
-	resize: none;
-}
-
-#commentsTabView .newCommentForm div.message:empty:before {
-	content: attr(data-placeholder);
-	color: grey;
-}
-
-#commentsTabView .comment {
-	position: relative;
-	/** padding bottom is little more so that the top and bottom gap look uniform **/
-	padding: 10px 0 15px;
-}
-
-#commentsTabView .comments .comment {
-	border-top: 1px solid var(--color-border);
-}
-
-#commentsTabView .comment .avatar,
-.atwho-view-ul * .avatar{
-	width: 32px;
-	height: 32px;
-	line-height: 32px;
-	margin-right: 5px;
-}
-
-#commentsTabView .comment .message .avatar,
-.atwho-view-ul * .avatar
-{
-	display: inline-block;
-}
-
-#activityTabView li.comment.collapsed .activitymessage,
-#commentsTabView .comment.collapsed .message {
-	white-space: pre-wrap;
-}
-
-#activityTabView li.comment.collapsed .activitymessage,
-#commentsTabView .comment.collapsed .message {
-	max-height: 70px;
-	overflow: hidden;
-}
-
-#activityTabView li.comment .message-overlay,
-#commentsTabView .comment .message-overlay {
-	display: none;
-}
-
-#activityTabView li.comment.collapsed .message-overlay,
-#commentsTabView .comment.collapsed .message-overlay {
-	display: block;
-	position: absolute;
-	z-index: 2;
-	height: 50px;
-	pointer-events: none;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: -moz-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background));
-	background: -webkit-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background));
-	background: -o-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background));
-	background: -ms-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background));
-	background: linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background));
-	background-repeat: no-repeat;
-}
-
-#commentsTabView .hidden {
-	display: none !important;
-}
-
-/** set min-height as 44px to ensure that it fits the button sizes. **/
-#commentsTabView .comment .authorRow {
-	min-height: 44px;
-}
-#commentsTabView .comment .authorRow .tooltip {
-	/** because of the padding on the element, the tooltip appear too far up,
-	 adding this brings them closer to the element**/
-	margin-top: 5px;
-}
-
-.atwho-view-ul * .avatar-name-wrapper,
-#commentsTabView .comment .authorRow {
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	width: 100%;
-}
-
-#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser),
-#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar,
-#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar img,
-#commentsTabView .comment .authorRow .avatar:not(.currentUser),
-#commentsTabView .comment .authorRow .author:not(.currentUser) {
-	cursor: pointer;
-}
-
-.atwho-view-ul .avatar-name-wrapper,
-.atwho-view-ul .avatar-name-wrapper .avatar,
-.atwho-view-ul .avatar-name-wrapper .avatar img {
-	cursor: pointer;
-}
-
-#commentsTabView .comments li .message .atwho-inserted,
-#commentsTabView .newCommentForm .atwho-inserted {
-	.avatar-name-wrapper {
-		/* Make the wrapper the positioning context of its child contacts
-		 * menu. */
-		position: relative;
-
-		display: inline;
-		vertical-align: top;
-		background-color: var(--color-background-dark);
-		border-radius: 50vh;
-		padding: 1px 7px 1px 1px;
-
-		/* Ensure that the avatar and the user name will be kept together. */
-		white-space: nowrap;
-
-		.avatar {
-			img {
-				vertical-align: top;
-			}
-			height: 16px;
-			width: 16px;
-			vertical-align: middle;
-			padding: 1px;
-			margin-top: -3px;
-			margin-left: 0;
-			margin-right: 2px;
-		}
-		strong {
-			/* Ensure that the user name is shown in bold, as different browsers
-			 * use different font weights for strong elements. */
-			font-weight: bold;
-		}
-	}
-	.avatar-name-wrapper.currentUser {
-		background-color: var(--color-primary);
-		color: var(--color-primary-text);
-	}
-}
-
-.atwho-view-ul * .avatar-name-wrapper {
-	white-space: nowrap;
-}
-#commentsTabView .comment .author,
-#commentsTabView .comment .date {
-	opacity: .5;
-}
-#commentsTabView .comment .author {
-	max-width: 210px;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-}
-#commentsTabView .comment .date {
-	margin-left: auto;
-	/** this is to fix the tooltip being too close due to the margin-top applied
-	 to bring the tooltip closer for the action icons **/
-	padding: 10px 0px;
-}
-
-#commentsTabView .comments > li:not(.newCommentRow) .message {
-	padding-left: 40px;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-}
-
-#commentsTabView .comment .action {
-	opacity: 0.3;
-	padding: 14px;
-	display: block;
-}
-
-#commentsTabView .comment .action:hover,
-#commentsTabView .comment .action:focus {
-	opacity: 1;
-}
-
-#commentsTabView .newCommentRow .action-container {
-	margin-left: auto;
-}
-
-#commentsTabView .comment.disabled .message {
-	opacity: 0.3;
-}
-
-#commentsTabView .comment.disabled .action {
-	display: none;
-}
-
-#commentsTabView .message.error {
-	color: #e9322d;
-	border-color: #e9322d;
-	box-shadow: 0 0 6px #f8b9b7;
-}
-
-.app-files .action-comment {
-	padding: 16px 14px;
-}
-
-#commentsTabView .comment .message .contactsmenu-popover {
-	left: -6px;
-	top: 24px;
-}

css/comp-appnav.scss

@@ -1,113 +0,0 @@
-/*
- * @copyright Copyright (c) 2017 Julius Härtl <jus@bitgrid.net>
- * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @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/>.
- *
- */
-
-/**
- * Hotfix for support <NC13 with new app sidebar
- */
-#app-navigation {
-  .app-navigation-entry-menu.open {
-    ul li a {
-      background-position: 10px center;
-      padding: 0 10px 0 36px !important;
-    }
-  }
-  .app-navigation-entry-edit {
-    display: none;
-  }
-  .editing {
-    .app-navigation-entry-edit {
-      display: block;
-      position: absolute;
-      background: $color-main-background;
-      height: auto;
-      z-index: 250;
-    }
-  }
-}
-
-
-/**
- * copied styles from core/css/styles.scss
- * to have the same breadcrumb styling in NC12
- */
-.breadcrumb {
-  display: inline-flex;
-}
-div.crumb {
-  display: inline-flex;
-  background-repeat: no-repeat;
-  background-position: right center;
-  height: 44px;
-  background-size: auto 24px;
-  flex: 0 0 auto;
-  order: 1;
-  padding-right: 7px;
-  &.crumbmenu {
-    order: 2;
-    position: relative;
-    a {
-      opacity: 0.5
-    }
-  }
-  &.hidden {
-    display: none;
-    ~ .crumb {
-      order: 3;
-    }
-  }
-  > a,
-  > span {
-    position: relative;
-    padding: 12px;
-    opacity: 0.5;
-    top: 0 !important;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    flex: 0 0 auto;
-    &.icon-home {
-      // Hide home text
-      text-indent: -9999px;
-    }
-  }
-  > a[class^='icon-'] {
-    padding: 0;
-    width: 44px;
-  }
-  &:not(:first-child) a {
-  }
-  &:last-child {
-    font-weight: 600;
-    margin-right: 10px;
-    // Allow multiple span next to the main 'a'
-    a ~ span {
-      padding-left: 0;
-    }
-  }
-  &:hover, &:focus, a:focus, &:active {
-    > a,
-    > span {
-      opacity: .7;
-    }
-  }
-}

css/compact-mode.scss

@@ -1,43 +0,0 @@
-/*
- * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
- *
- * @author 2018 Michael Weimann <mail@michael-weimann.eu>
- *
- * @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/>.
- *
- */
-
-.compact-mode {
-  .card {
-    margin: $compact-board-item-margin;
-
-    &:last-child {
-      margin: $compact-board-last-item-margin;
-    }
-  }
-
-  .stack {
-    .as-sortable-placeholder {
-      margin: $compact-board-item-margin;
-      min-height: 43px;
-      height: 43px;
-
-      &:last-child {
-        margin: $compact-board-last-item-margin;
-      }
-    }
-  }
-}

css/globalstyles.scss

@@ -24,17 +24,5 @@
  *
  */
 
-// colors
-$color-warning-light: nc-lighten($color-warning, 15%);
-$color-lightgrey: nc-darken($color-main-background, 4%);
-$color-grey: nc-darken($color-main-background, 7%);
-$color-darkgrey: nc-darken($color-main-background, 32%);
-
-// margins/paddings
-$board-item-margin: 10px 10px 20px 10px;
-$board-last-item-margin: 10px;
-
-$compact-board-item-margin: 5px 10px 10px 10px;
-$compact-board-last-item-margin: 5px 10px 10px;
-
 @import 'icons';
+@import 'print';

src/App.vue

@@ -95,6 +95,9 @@ export default {
 	#content {
 		#app-content {
 			transition: margin-left 100ms ease;
+			position: relative;
+			overflow-x: hidden;
+			align-items: stretch;
 		}
 
 		#app-sidebar {

src/components/ActivityEntry.vue

@@ -45,7 +45,7 @@ export default {
 		},
 		parseMessage(activity) {
 			const subject = activity.subject_rich[0]
-			const parameters = activity.subject_rich[1]
+			const parameters = JSON.parse(JSON.stringify(activity.subject_rich[1]))
 			if (parameters.after && typeof parameters.after.id === 'string' && parameters.after.id.startsWith('dt:')) {
 				const dateTime = parameters.after.id.substr(3)
 				parameters.after.name = window.moment(dateTime).format('L LTS')

src/components/Controls.vue

@@ -23,21 +23,16 @@
 <template>
 	<div class="controls">
 		<div id="app-navigation-toggle-custom" class="icon-menu" @click="toggleNav" />
-		<div class="breadcrumb">
+		<div v-if="board" class="board-title">
-			<div class="crumb svg last">
-				<router-link to="/boards" class="icon-home" title="All Boards">
-					<span class="hidden-visually">All Boards</span>
-				</router-link>
-			</div>
-		</div>
-		<div v-if="board" class="crumb svg">
 			<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
-			<a href="#">{{ board.title }}</a>
+			<h2><a href="#">{{ board.title }}</a></h2>
-			<router-link :to="{name: 'board.details'}" class="icon-shared" />
 		</div>
 		<div v-if="board" class="board-actions">
-			<div id="stack-add">
+			<div id="stack-add" v-click-outside="hideAddStack">
-				<form @submit.prevent="clickAddNewStack()">
+				<Actions v-if="!isAddStackVisible">
+					<ActionButton icon="icon-add" :title="t('deck', 'Add new stack')" @click.stop="showAddStack" />
+				</Actions>
+				<form v-else @submit.prevent="addNewStack()">
 					<label for="new-stack-input-main" class="hidden-visually">Add a new stack</label>
 					<input id="new-stack-input-main"
 						v-model="newStackTitle"
@@ -45,25 +40,37 @@
 						class="no-close"
 						placeholder="Add a new stack"
 						required>
-					<input v-tooltip="t('deck', 'clickAddNewStack')"
+					<input v-tooltip="t('deck', 'Add new stack')"
 						class="icon-confirm"
 						type="submit"
 						value="">
 				</form>
 			</div>
 			<div class="board-action-buttons">
-				<button :style="archivStyle"
+				<Actions style="opacity: .5;">
-					title="Show archived cards"
+					<ActionButton v-if="showArchived"
-					class="icon icon-archive"
+						icon="icon-archive"
-					@click="toggleShowArchived" />
+						:title="t('deck', 'Show archived cards')"
-				<button :class="[(compactMode ? 'icon-toggle-compact-collapsed' : 'icon-toggle-compact-expanded')]"
+						@click="toggleShowArchived" />
-					title="Toggle compact mode"
+					<ActionButton v-else
-					class="icon"
+						icon="icon-archive"
-					@click="toggleCompactMode" />
+						:title="t('deck', 'Hide archived cards')"
-				<router-link v-tooltip="t('deck', 'Board settings')"
+						@click="toggleShowArchived" />
-					:to="{name: 'board.details'}"
+				</Actions>
-					class="icon-settings-dark"
+				<Actions>
-					tag="button" />
+					<ActionButton v-if="compactMode"
+						icon="icon-toggle-compact-collapsed"
+						:title="t('deck', 'Toggle compact mode')"
+						@click="toggleCompactMode" />
+					<ActionButton v-else
+						icon="icon-toggle-compact-expanded"
+						:title="t('deck', 'Toggle compact mode')"
+						@click="toggleCompactMode" />
+				</Actions>
+				<!-- FIXME: ActionRouter currently doesn't work as an inline action -->
+				<Actions>
+					<ActionButton icon="icon-share" @click="toggleDetailsView" />
+				</Actions>
 			</div>
 		</div>
 	</div>
@@ -71,8 +78,13 @@
 
 <script>
 import { mapState } from 'vuex'
+import { Actions, ActionButton } from '@nextcloud/vue'
+
 export default {
 	name: 'Controls',
+	components: {
+		Actions, ActionButton,
+	},
 	props: {
 		board: {
 			type: Object,
@@ -85,27 +97,23 @@ export default {
 			newStackTitle: '',
 			stack: '',
 			showArchived: false,
+			isAddStackVisible: false,
 		}
 	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode,
 		}),
-		archivStyle() {
+		detailsRoute() {
-
+			return {
-			if (this.showArchived === true) {
+				name: 'board.details',
-				return 'opacity: 1.0'
 			}
-			return 'opacity: 0.3'
 		},
 	},
 	methods: {
 		toggleNav() {
 			this.$store.dispatch('toggleNav')
 		},
-		toggleSidebar: function() {
-			this.$store.dispatch('toggleSidebar')
-		},
 		toggleCompactMode() {
 			this.$store.dispatch('toggleCompactMode')
 		},
@@ -113,11 +121,25 @@ export default {
 			this.$store.dispatch('toggleShowArchived')
 			this.showArchived = !this.showArchived
 		},
-		clickAddNewStack() {
+		addNewStack() {
 			this.stack = { title: this.newStackTitle }
 			this.$store.dispatch('createStack', this.stack)
 			this.newStackTitle = ''
 			this.stack = null
+			this.isAddStackVisible = false
+		},
+		showAddStack() {
+			this.isAddStackVisible = true
+		},
+		hideAddStack() {
+			this.isAddStackVisible = false
+		},
+		toggleDetailsView() {
+			if (this.$route.name === 'board.details') {
+				this.$router.push({ name: 'board' })
+			} else {
+				this.$router.push({ name: 'board.details' })
+			}
 		},
 	},
 }
@@ -125,17 +147,13 @@ export default {
 
 <style lang="scss" scoped>
 	.controls {
-		.crumb {
+		.board-title {
-			order: 0;
+			display: flex;
+			align-items: center;
 
-			a:nth-child(2),
+			h2 {
-			a:nth-child(3) {
+				margin: 0;
-				padding-left: 0;
+				margin-right: 10px;
-				margin-left: -5px;
-			}
-
-			a .icon {
-				margin-top: 2px;
 			}
 
 			.board-bullet {
@@ -181,17 +199,11 @@ export default {
 
 	.board-action-buttons {
 		display: flex;
-		padding: 3px 4px 7px 4px;
 		button {
-			border-radius: 0;
+			border: 0;
 			width: 44px;
 			margin: 0 0 0 -1px;
-		}
+			background-color: transparent;
-		button:first-child {
-			border-radius: 3px 0 0 3px;
-		}
-		button:last-child {
-			border-radius: 0 3px 3px 0;
 		}
 	}
 

src/components/board/Board.vue

@@ -21,11 +21,16 @@
   -->
 
 <template>
-	<div>
+	<div class="board-wrapper">
 		<Controls :board="board" />
-		<div v-if="board" class="board">
+		<div v-if="loading" class="emptycontent">
+			<div class="icon icon-loading" />
+			<h2>{{ t('deck', 'Loading board') }}</h2>
+			<p />
+		</div>
+		<div v-else-if="board" class="board">
 			<Container lock-axix="y" orientation="horizontal" @drop="onDropStack">
-				<Draggable v-for="stack in stacksByBoard" :key="stack.id" class="stack">
+				<Draggable v-for="stack in stacksByBoard" :key="stack.id">
 					<Stack :stack="stack" />
 				</Draggable>
 			</Container>
@@ -75,9 +80,6 @@ export default {
 		stacksByBoard() {
 			return this.$store.getters.stacksByBoard(this.board.id)
 		},
-		/* cardsByStack() {
-			return (id) => this.$store.getters.cardsByStack(id)
-		} */
 	},
 	watch: {
 		id: 'fetchData',
@@ -89,34 +91,17 @@ export default {
 		this.fetchData()
 	},
 	methods: {
-		fetchData() {
+		async fetchData() {
-
+			this.loading = true
-			this.$store.dispatch('loadBoardById', this.id).then(response => {
+			await this.$store.dispatch('loadBoardById', this.id)
-				this.$store.dispatch('loadStacks', this.id).then(response => {
+			await this.$store.dispatch('loadStacks', this.id)
-					this.loading = false
+			this.loading = false
-				})
-			})
-
-			/* this.boardApi.loadById(this.id)
-				.then((board) => {
-					this.$store.dispatch('setCurrentBoard', board)
-					this.$store.dispatch('loadStacks', board)
-					this.$store.dispatch('setAssignableUsers', board.users)
-					this.loading = false
-					this.$store.state.labels = board.labels
-				}) */
 		},
+
 		onDropStack({ removedIndex, addedIndex }) {
 			this.$store.dispatch('orderStack', { stack: this.stacksByBoard[removedIndex], removedIndex, addedIndex })
 		},
-		/* onDropCard({ removedIndex, addedIndex }) {
 
-		}, */
-		/* payloadForCard(stackId) {
-			return index => {
-				return this.cardsByStack(stackId)[index]
-			}
-		}, */
 		createStack() {
 			const newStack = {
 				title: 'FooBar',
@@ -125,9 +110,6 @@ export default {
 			}
 			this.$store.dispatch('createStack', newStack)
 		},
-		/* deleteStack(stack) {
-			this.$store.dispatch('deleteStack', stack)
-		} */
 	},
 }
 </script>
@@ -138,28 +120,61 @@ export default {
 	$stack-spacing: 10px;
 	$stack-width: 300px;
 
+	.board-wrapper {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		max-height: calc(100vh - 50px);
+	}
+
 	.board {
 		margin-left: $board-spacing;
+		position: relative;
+		height: calc(100% - 44px);
+		overflow-x: scroll;
 	}
 
-	.stack {
+	/**
-		width: $stack-width;
+	 * Combined rules to handle proper board scrolling and
-		padding: $stack-spacing;
+	 * drag and drop behavior
-		padding-top: 0;
+	 */
-	}
+	.smooth-dnd-container.horizontal {
-
-	/*
-	.smooth-dnd-container.vertical {
 		display: flex;
-		flex-direction: column;
+		align-items: stretch;
-	}
+		.smooth-dnd-draggable-wrapper::v-deep {
+			display: flex;
+			height: auto;
 
-	.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
+			.stack {
-		overflow: initial;
+				display: flex;
-	}
+				flex-direction: column;
 
-	.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
+				.smooth-dnd-container.vertical {
-		height: auto;
+					flex-grow: 1;
-	} */
+					display: flex;
+					flex-direction: column;
+					padding: 3px;
+					padding-top: 0;
+					/**
+					 * Use this to scroll each stack individually
+					 * This currenly has the issue that the popover menu will be cut off
+					 */
+					/*
+					overflow-x: scroll;
+					height: calc(100vh - 50px - 44px * 2 - 30px);
+					max-height: calc(100vh - 50px - 44px * 2 - 30px);
+					*/
+				}
+
+				.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
+					overflow: initial;
+				}
+
+				.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
+					height: auto;
+				}
+			}
+		}
+	}
 
 </style>

src/components/board/SharingTabSidebar.vue

@@ -2,6 +2,7 @@
 	<div>
 		<Multiselect
 			v-model="addAcl"
+			:placeholder="t('deck', 'Share board with a user, group or circle …')"
 			:options="formatedSharees"
 			:user-select="true"
 			label="displayName"

src/components/board/Stack.vue

@@ -36,23 +36,23 @@
 						value="">
 				</form>
 			</transition>
-			<Actions>
+			<Actions :force-menu="true">
 				<ActionButton icon="icon-delete" @click="deleteStack(stack)">
 					{{ t('deck', 'Delete stack') }}
 				</ActionButton>
 			</Actions>
+			<Actions>
+				<ActionButton icon="icon-add" @click="showAddCard=true">
+					{{ t('deck', 'Add card') }}
+				</ActionButton>
+			</Actions>
 		</div>
 
-		<Container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
+		<form v-if="showAddCard" class="stack--card-add" @submit.prevent="clickAddCard()">
-			<Draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
-				<CardItem v-if="card" :id="card.id" />
-			</Draggable>
-		</Container>
-
-		<form class="stack--card-add" @submit.prevent="clickAddCard()">
 			<label for="new-stack-input-main" class="hidden-visually">Add a new card</label>
 			<input id="new-stack-input-main"
 				v-model="newCardTitle"
+				v-focus
 				type="text"
 				class="no-close"
 				placeholder="Add a new card"
@@ -62,6 +62,12 @@
 				type="submit"
 				value="">
 		</form>
+
+		<Container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
+			<Draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
+				<CardItem v-if="card" :id="card.id" />
+			</Draggable>
+		</Container>
 	</div>
 </template>
 
@@ -93,6 +99,7 @@ export default {
 			editing: false,
 			copiedStack: '',
 			newCardTitle: '',
+			showAddCard: false,
 		}
 	},
 	computed: {
@@ -147,6 +154,7 @@ export default {
 			}
 			this.$store.dispatch('addCard', newCard)
 			this.newCardTitle = ''
+			this.showAddCard = false
 		},
 	},
 }
@@ -155,29 +163,24 @@ export default {
 <style lang="scss" scoped>
 
 	$stack-spacing: 10px;
-	$stack-width: 300px;
+	$stack-width: 260px;
 
 	.stack {
 		width: $stack-width;
-		padding: $stack-spacing;
+		margin-left: $stack-spacing;
-		padding-top: 0;
+		margin-right: $stack-spacing;
-	}
-
-	.smooth-dnd-container.vertical {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
-		overflow: initial;
-	}
-
-	.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
-		height: auto;
 	}
 
 	.stack--header {
 		display: flex;
+		position: sticky;
+		top: 0;
+		z-index: 100;
+		padding: 3px;
+		margin: 3px -3px;
+		margin-right: -10px;
+		margin-top: 0;
+		background-color: var(--color-main-background-translucent);
 
 		h3, form {
 			flex-grow: 1;
@@ -191,10 +194,23 @@ export default {
 
 	.stack--card-add {
 		display: flex;
+		margin-left: 3px;
+		margin-right: 3px;
+		box-shadow: 0 0 3px #aaa;
+		border-radius: 3px;
+		margin-bottom: 15px;
 
 		input[type=text] {
 			flex-grow: 1;
 		}
+
+		input {
+			border: none;
+		}
 	}
 
+	/**
+	 * Rules to handle scrolling behaviour are inherited from Board.vue
+	 */
+
 </style>

src/components/board/TagsTabSidebar.vue

@@ -133,6 +133,7 @@ export default {
 </script>
 <style scoped lang="scss">
 	.labels li {
+		display: flex;
 		margin-bottom: 3px;
 
 		.label-title {
@@ -144,14 +145,21 @@ export default {
 			}
 		}
 		&:not(.editing) button {
-			width: 40px;
+			width: 44px;
-			height: 34px;
 			margin: 0;
 			margin-left: -3px;
 		}
-	}
+
-	.labels li {
+		.color-picker {
-		display: flex;
+			display: flex;
+		}
+
+		.color-picker-button {
+			width: 100px;
+			margin-left: 20px;
+			border-radius: 6px;
+		}
+
 		&.editing {
 			display: block;
 		}

src/components/card/CardSidebar.vue

@@ -36,6 +36,7 @@
 					<Multiselect v-model="allLabels"
 						:multiple="true"
 						:options="currentBoard.labels"
+						:placeholder="t('deck', 'Assign a tag to this card…')"
 						:taggable="true"
 						label="title"
 						track-by="id"
@@ -63,6 +64,7 @@
 					<Multiselect v-model="assignedUsers"
 						:multiple="true"
 						:options="assignableUsers"
+						:placeholder="t('deck', 'Assign a user to this card…')"
 						label="displayname"
 						track-by="primaryKey"
 						@select="assignUserToCard"
@@ -81,6 +83,7 @@
 				</div>
 				<div class="section-details">
 					<DatetimePicker v-model="copiedCard.duedate"
+						:placeholder="t('deck', 'Set a due date')"
 						type="datetime"
 						lang="en"
 						format="YYYY-MM-DD HH:mm"
@@ -221,6 +224,9 @@ export default {
 		'currentCard': {
 			immediate: true,
 			handler() {
+				if (!this.currentCard) {
+					return
+				}
 				this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
 				this.allLabels = this.currentCard.labels
 
@@ -353,7 +359,8 @@ export default {
 
 		.section-label {
 			background-position: 0px center;
-			width:28px;
+			width: 28px;
+			margin-left: 9px;
 			flex-shrink: 0;
 		}
 

src/components/cards/AvatarList.vue

@@ -64,6 +64,9 @@ export default {
 	},
 	computed: {
 		firstUsers() {
+			if (!this.users || this.users.length === 0) {
+				return []
+			}
 			return this.users.slice(0, 3)
 		},
 		avatarUrl() {
@@ -79,6 +82,9 @@ export default {
 			}
 		},
 		popover() {
+			if (!this.users || this.users.length < 0) {
+				return []
+			}
 			return [
 				...this.users.slice(3).map((session) => {
 					return {

src/components/cards/CardItem.vue

@@ -230,7 +230,7 @@ export default {
 	.fade-enter-active, .fade-leave-active {
 		transition: opacity .125s;
 	}
-	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+	.fade-enter, .fade-leave-to {
 		opacity: 0;
 	}
 

src/main.js

@@ -27,6 +27,7 @@ import { sync } from 'vuex-router-sync'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { generateFilePath } from '@nextcloud/router'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import ClickOutside from 'vue-click-outside'
 import './models'
 
 // eslint-disable-next-line
@@ -44,6 +45,13 @@ Vue.mixin({
 })
 
 Vue.directive('tooltip', Tooltip)
+Vue.directive('click-outside', ClickOutside)
+
+Vue.directive('focus', {
+	inserted: function(el) {
+		el.focus()
+	},
+})
 
 /* eslint-disable-next-line no-new */
 new Vue({

src/store/main.js

@@ -237,12 +237,11 @@ export default new Vuex.Store({
 		},
 	},
 	actions: {
-		loadBoardById({ commit }, boardId) {
+		async loadBoardById({ commit }, boardId) {
-			apiClient.loadById(boardId)
+			commit('setCurrentBoard', null)
-				.then((board) => {
+			const board = await apiClient.loadById(boardId)
-					commit('setCurrentBoard', board)
+			commit('setCurrentBoard', board)
-					commit('setAssignableUsers', board.users)
+			commit('setAssignableUsers', board.users)
-				})
 		},
 
 		toggleShowArchived({ commit }) {

src/store/stack.js

@@ -88,23 +88,21 @@ export default {
 					commit('orderStack', { stack, addedIndex, removedIndex })
 				})
 		},
-		loadStacks({ commit }, boardId) {
+		async loadStacks({ commit }, boardId) {
 			commit('clearCards')
 			let call = 'loadStacks'
 			if (this.state.showArchived === true) {
 				call = 'loadArchivedStacks'
 			}
-			apiClient[call](boardId)
+			const stacks = await apiClient[call](boardId)
-				.then((stacks) => {
+			for (const i in stacks) {
-					for (const i in stacks) {
+				const stack = stacks[i]
-						const stack = stacks[i]
+				for (const j in stack.cards) {
-						for (const j in stack.cards) {
+					commit('addCard', stack.cards[j])
-							commit('addCard', stack.cards[j])
+				}
-						}
+				delete stack.cards
-						delete stack.cards
+				commit('addStack', stack)
-						commit('addStack', stack)
+			}
-					}
-				})
 		},
 		createStack({ commit }, stack) {
 			stack.boardId = this.state.currentBoard.id