[stable30] Bug fix collection

cypress/e2e/boardFeatures.js

@@ -35,7 +35,7 @@ describe('Board', function() {
 			.type(board, { force: true })
 
 		// Submit
-		cy.get('.board-create form input[type=submit]')
+		cy.get('.board-create form button[type=submit]')
 			.first().click({ force: true })
 
 		cy.wait('@createBoardRequest').its('response.statusCode').should('equal', 200)

src/App.vue

@@ -6,12 +6,13 @@
 <template>
 	<NcContent app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<AppNavigation />
-		<NcAppContent>
+		<NcAppContent :allow-swipe-navigation="false">
 			<router-view />
 		</NcAppContent>
 
 		<div v-if="$route.params.id || $route.params.cardId">
 			<NcModal v-if="cardDetailsInModal && $route.params.cardId"
+				:name="t('deck', 'Card details')"
 				:clear-view-delay="0"
 				:close-button-contained="true"
 				size="large"
@@ -32,7 +33,7 @@
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation.vue'
 import KeyboardShortcuts from './components/KeyboardShortcuts.vue'
-import { NcModal, NcContent, NcAppContent } from '@nextcloud/vue'
+import { NcModal, NcContent, NcAppContent, isMobile } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi.js'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
@@ -50,6 +51,7 @@ export default {
 		NcAppContent,
 		KeyboardShortcuts,
 	},
+	mixins: [isMobile],
 	provide() {
 		return {
 			boardApi,
@@ -106,7 +108,7 @@ export default {
 	},
 	mounted() {
 		// Set navigation to initial state and update in case it gets toggled
-		emit('toggle-navigation', { open: this.navShown, _initial: true })
+		emit('toggle-navigation', { open: !this.isMobile && this.navShown, _initial: true })
 		this.$nextTick(() => {
 			subscribe('navigation-toggled', (navState) => {
 				this.$store.dispatch('toggleNav', navState.open)

src/CardSelector.vue

@@ -13,16 +13,16 @@
 				:disabled="loading"
 				label="title"
 				@option:selected="fetchCardsFromBoard">
-				<template slot="singleLabel" slot-scope="props">
+				<template #selected-option="props">
 					<span>
-						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-						<span>{{ props.option.title }}</span>
+						<span :style="{ 'backgroundColor': '#' + props.color }" class="board-bullet" />
+						<span>{{ props.title }}</span>
 					</span>
 				</template>
-				<template slot="option" slot-scope="props">
+				<template #option="props">
 					<span>
-						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-						<span>{{ props.option.title }}</span>
+						<span :style="{ 'backgroundColor': '#' + props.color }" class="board-bullet" />
+						<span>{{ props.title }}</span>
 					</span>
 				</template>
 			</NcSelect>

src/components/Controls.vue

@@ -544,7 +544,7 @@ export default {
 	.filter--item {
 		input + label {
 			display: block;
-			padding: 6px 0;
+			padding: var(--default-grid-baseline) 0;
 			.avatardiv {
 				vertical-align: middle;
 				margin-bottom: 2px;

src/components/board/Board.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="board-wrapper" :tabindex="-1">
+	<div class="board-wrapper" :tabindex="-1" @touchend="fixActionRestriction">
 		<Controls :board="board" />
 
 		<transition name="fade" mode="out-in">
@@ -22,23 +22,27 @@
 				<template #icon>
 					<DeckIcon />
 				</template>
-				<template #title>
+				<template #name>
 					{{ t('deck', 'No lists available') }}
 				</template>
 				<template v-if="canManage" #action>
 					{{ t('deck', 'Create a new list to add cards to this board') }}
 					<form @submit.prevent="addNewStack()">
-						<input id="new-stack-input-main"
-							v-model="newStackTitle"
-							v-focus
-							type="text"
-							class="no-close"
+						<NcTextField ref="newStackInput"
+							:disable="loading"
+							:value.sync="newStackTitle"
 							:placeholder="t('deck', 'List name')"
-							required>
-						<input title="t('deck', 'Add list')"
-							class="icon-confirm"
-							type="submit"
-							value="">
+							type="text" />
+						<NcButton type="secondary"
+							native-type="submit"
+							:disabled="loading"
+							:title="t('deck', 'Add list')">
+							<template #icon>
+								<CheckIcon v-if="!loading" :size="20" />
+								<NcLoadingIcon v-else :size="20" />
+							</template>
+							{{ t('deck', 'Add list') }}
+						</NcButton>
 					</form>
 				</template>
 			</NcEmptyContent>
@@ -82,8 +86,9 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
 import Stack from './Stack.vue'
-import { NcEmptyContent, NcModal } from '@nextcloud/vue'
+import { NcEmptyContent, NcModal, NcButton, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 import { showError } from '../../helpers/errors.js'
 import { createSession } from '../../sessions.js'
@@ -99,6 +104,10 @@ export default {
 		Stack,
 		NcEmptyContent,
 		NcModal,
+		NcTextField,
+		NcButton,
+		NcLoadingIcon,
+		CheckIcon,
 		CardSidebar,
 	},
 	inject: [
@@ -131,7 +140,7 @@ export default {
 			'canManage',
 		]),
 		stacksByBoard() {
-			return this.$store.getters.stacksByBoard(this.board.id)
+			return this.board?.id ? this.$store.getters.stacksByBoard(this.board.id) : []
 		},
 		dragHandleSelector() {
 			return this.canEdit ? '.stack__title' : '.no-drag'
@@ -147,6 +156,11 @@ export default {
 		showArchived() {
 			this.fetchData()
 		},
+		isEmpty(newValue) {
+			newValue && this.$nextTick(() => {
+				this.$refs?.newStackInput?.focus()
+			})
+		},
 	},
 	created() {
 		this.session = createSession(this.id)
@@ -217,6 +231,13 @@ export default {
 			window.removeEventListener('mouseup', this.stopMouseDrag)
 			window.removeEventListener('mouseleave', this.stopMouseDrag)
 		},
+
+		fixActionRestriction() {
+			document.body.classList.remove(
+				'smooth-dnd-no-user-select',
+				'smooth-dnd-disable-touch-action',
+			)
+		},
 	},
 }
 </script>
@@ -229,13 +250,16 @@ export default {
 		text-align: center;
 		display: flex;
 		width: 100%;
-		max-width: 200px;
 		margin: auto;
-		margin-top: 20px;
+		margin-top: calc(var(--default-grid-baseline) * 4);
+		gap: var(--default-grid-baseline);
 
-		input[type=text] {
+		input[type="text"] {
 			flex-grow: 1;
 		}
+		button[type="submit"] {
+			flex-shrink: 0;
+		}
 	}
 
 	.board-wrapper {
@@ -278,7 +302,9 @@ export default {
 					flex-grow: 1;
 					display: flex;
 					flex-direction: column;
-					padding: $stack-spacing;
+					// Margin left instead of padidng to avoid jumps on dropping a card
+					margin-left: $stack-spacing;
+					padding-right: $stack-spacing;
 					overflow-x: hidden;
 					overflow-y: auto;
 					padding-top: 15px;