diff options
author | Julius Härtl <jus@bitgrid.net> | 2022-11-07 22:02:44 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-07 22:02:44 +0300 |
commit | 6ea0e24d44170c974f7ec4e4e37164e644ccf4cb (patch) | |
tree | 2c15e4ee22f89fa090276b6182162d6a3df77050 | |
parent | 95837d0626cb7f610ee996a2b057acff9639e1e6 (diff) | |
parent | cd5753f247d66527b60f1a4601da61f7a8cad7db (diff) |
Merge pull request #4074 from shoetten/feature/stack-dragndrop
Improve stack drag and drop behavior
-rw-r--r-- | src/components/board/Board.vue | 7 | ||||
-rw-r--r-- | src/components/board/Stack.vue | 26 |
2 files changed, 26 insertions, 7 deletions
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue index 145b3e11..c1707f29 100644 --- a/src/components/board/Board.vue +++ b/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 diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue index b0755edf..6e585e33 100644 --- a/src/components/board/Stack.vue +++ b/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; } |