Merge pull request #4074 from shoetten/feature/stack-dragndrop

Improve stack drag and drop behavior

src/components/board/Board.vue

@@ -53,9 +53,11 @@
 				<Container lock-axix="y"
 					orientation="horizontal"
 					:drag-handle-selector="dragHandleSelector"
+					@drag-start="draggingStack = true"
+					@drag-end="draggingStack = false"
 					@drop="onDropStack">
 					<Draggable v-for="stack in stacksByBoard" :key="stack.id">
-						<Stack :stack="stack" />
+						<Stack :stack="stack" :dragging="draggingStack" />
 					</Draggable>
 				</Container>
 			</div>
@@ -100,6 +102,7 @@ export default {
 	},
 	data() {
 		return {
+			draggingStack: false,
 			loading: true,
 			newStackTitle: '',
 		}
@@ -117,7 +120,7 @@ export default {
 			return this.$store.getters.stacksByBoard(this.board.id)
 		},
 		dragHandleSelector() {
-			return this.canEdit ? null : '.no-drag'
+			return this.canEdit ? '.stack__title' : '.no-drag'
 		},
 		isEmpty() {
 			return this.stacksByBoard.length === 0

src/components/board/Stack.vue

@@ -25,7 +25,7 @@
 	<div class="stack">
 		<div v-click-outside="stopCardCreation"
 			class="stack__header"
-			:class="{'stack__header--add': showAddCard }"
+			:class="{'stack__header--add': showAddCard}"
 			tabindex="0"
 			:aria-label="stack.title">
 			<transition name="fade" mode="out-in">
@@ -41,7 +41,10 @@
 					@keydown.enter="startEditing(stack)">
 					{{ stack.title }}
 				</h3>
-				<form v-else @submit.prevent="finishedEdit(stack)">
+				<form v-else-if="editing"
+					v-click-outside="cancelEdit"
+					@submit.prevent="finishedEdit(stack)"
+					@keyup.esc="cancelEdit">
 					<input v-model="copiedStack.title"
 						v-focus
 						type="text"
@@ -142,7 +145,7 @@
 </template>
 
 <script>
-
+import ClickOutside from 'vue-click-outside'
 import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 
@@ -164,8 +167,14 @@ export default {
 		NcModal,
 		ArchiveIcon,
 	},
-
+	directives: {
+		ClickOutside,
+	},
 	props: {
+		dragging: {
+			type: Boolean,
+			default: false,
+		},
 		stack: {
 			type: Object,
 			default: undefined,
@@ -265,6 +274,10 @@ export default {
 			this.modalArchivAllCardsShow = false
 		},
 		startEditing(stack) {
+			if (this.dragging) {
+			  return
+			}
+
 			this.copiedStack = Object.assign({}, stack)
 			this.editing = true
 		},
@@ -274,6 +287,9 @@ export default {
 			}
 			this.editing = false
 		},
+		cancelEdit() {
+			this.editing = false
+		},
 		async clickAddCard() {
 			this.stateCardCreating = true
 			try {
@@ -374,7 +390,7 @@ export default {
 			margin: 6px;
 			padding: 4px 4px;
 
-			&:focus {
+			&:focus-visible {
 				outline: 2px solid var(--color-border-dark);
 				border-radius: 3px;
 			}