From 69654b823ea24c6fc1a4a8d33ac9eeccfbf2b53b Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Tue, 8 Feb 2022 21:46:54 +0100 Subject: [PATCH 1/3] feat: increase task drop area size for bucket list --- .../integration/list/list-view-kanban.spec.js | 2 +- src/components/tasks/partials/kanban-card.vue | 1 - src/views/list/ListKanban.vue | 170 +++++++++--------- 3 files changed, 89 insertions(+), 84 deletions(-) diff --git a/cypress/integration/list/list-view-kanban.spec.js b/cypress/integration/list/list-view-kanban.spec.js index 52d67282..8edd2862 100644 --- a/cypress/integration/list/list-view-kanban.spec.js +++ b/cypress/integration/list/list-view-kanban.spec.js @@ -132,7 +132,7 @@ describe('List View Kanban', () => { cy.getSettled('.kanban .bucket .tasks .task') .contains(tasks[0].title) .first() - .drag('.kanban .bucket:nth-child(2) .tasks .dropper') + .drag('.kanban .bucket:nth-child(2) .tasks') cy.get('.kanban .bucket:nth-child(2) .tasks') .should('contain', tasks[0].title) diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue index d0d4501d..a3694a1b 100644 --- a/src/components/tasks/partials/kanban-card.vue +++ b/src/components/tasks/partials/kanban-card.vue @@ -138,7 +138,6 @@ $task-background: var(--white); border: 3px solid transparent; font-size: .9rem; - margin: .5rem; padding: .4rem; border-radius: $radius; background: $task-background; diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue index 4c880be1..c10b3659 100644 --- a/src/views/list/ListKanban.vue +++ b/src/views/list/ListKanban.vue @@ -123,61 +123,59 @@ -
- - - -
-
-
-
- + + + +
@@ -197,10 +195,10 @@ v-model="newBucketTitle" /> @@ -313,6 +311,20 @@ export default { }, }, computed: { + getTaskDraggableTaskComponentData() { + return (bucket) => ({ + ref: (el) => this.setTaskContainerRef(bucket.id, el), + onScroll: (event) => this.handleTaskContainerScroll(bucket.id, bucket.listId, event.target), + type: 'transition', + tag: 'div', + name: !this.drag ? 'move-card' : null, + class: [ + 'tasks', + {'dragging-disabled': !this.canWrite}, + ], + }) + }, + isSavedFilter() { return this.list.isSavedFilter && !this.list.isSavedFilter() }, @@ -333,17 +345,6 @@ export default { ], } }, - taskDraggableTaskComponentData() { - return { - type: 'transition', - tag: 'div', - name: !this.drag ? 'move-card' : null, - class: [ - 'dropper', - {'dragging-disabled': !this.canWrite}, - ], - } - }, buckets() { return this.$store.state.kanban.buckets }, @@ -610,7 +611,6 @@ $filter-container-height: '1rem - #{$switch-view-height}'; &-bucket-container { display: flex; - align-items: flex-start; } .ghost { @@ -624,7 +624,6 @@ $filter-container-height: '1rem - #{$switch-view-height}'; } .bucket { - background-color: var(--grey-100); border-radius: $radius; position: relative; @@ -632,22 +631,20 @@ $filter-container-height: '1rem - #{$switch-view-height}'; max-height: 100%; min-height: 20px; width: $bucket-width; + display: flex; + flex-direction: column; .tasks { - max-height: calc(#{$crazy-height-calculation-tasks}); - overflow: auto; - - @media screen and (max-width: $tablet) { - max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height}); - } - - .dropper { - &, > div { - min-height: 40px; - } - } + overflow: hidden auto; + height: 100%; } + .task-item { + background-color: var(--grey-100); + padding: .5rem .5rem 0; + } + + .move-card-move { transition: transform $transition-duration; } @@ -682,10 +679,11 @@ $filter-container-height: '1rem - #{$switch-view-height}'; } &.is-collapsed { - transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)); + align-self: flex-start; + transform: rotate(90deg) translateY(-100%); + transform-origin: top left; // Using negative margins instead of translateY here to make all other buckets fill the empty space - margin-left: (math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1; - margin-right: calc(#{(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1} + #{$bucket-right-margin}); + margin-right: calc((#{$bucket-width} - #{$bucket-header-height} - #{$bucket-right-margin}) * -1); cursor: pointer; .tasks, .bucket-footer { @@ -695,6 +693,8 @@ $filter-container-height: '1rem - #{$switch-view-height}'; } .bucket-header { + background-color: var(--grey-100); + height: min-content; display: flex; align-items: center; justify-content: space-between; @@ -724,7 +724,13 @@ $filter-container-height: '1rem - #{$switch-view-height}'; } .bucket-footer { + position: sticky; + bottom: 0; + height: min-content; padding: .5rem; + background-color: var(--grey-100); + border-bottom-left-radius: $radius; + border-bottom-right-radius: $radius; .button { background-color: transparent; From e2c81d840f35c47167592bb7ca21648a09cef6e8 Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Wed, 9 Feb 2022 00:25:37 +0100 Subject: [PATCH 2/3] fix: hack to fix wrong index position --- src/views/list/ListKanban.vue | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue index c10b3659..3691b373 100644 --- a/src/views/list/ListKanban.vue +++ b/src/views/list/ListKanban.vue @@ -407,10 +407,25 @@ export default { // of the drop target works all the time. const bucketIndex = parseInt(e.to.dataset.bucketIndex) + const newBucket = this.buckets[bucketIndex] - const task = newBucket.tasks[e.newIndex] - const taskBefore = newBucket.tasks[e.newIndex - 1] ?? null - const taskAfter = newBucket.tasks[e.newIndex + 1] ?? null + + // HACK: + // this is a hacky workaround for a known problem of vue.draggable.next when using the footer slot + // the problem: https://github.com/SortableJS/vue.draggable.next/issues/108 + // This hack doesn't remove the problem that the ghost item is still displayed below the footer + // It just makes releasing the item possible. + + // The newIndex of the event doesn't count in the elements of the footer slot. + // This is why in case the length of the tasks is identical with the newIndex + // we have to remove 1 to get the correct index. + const newTaskIndex = newBucket.tasks.length === e.newIndex + ? e.newIndex - 1 + : e.newIndex + + const task = newBucket.tasks[newTaskIndex] + const taskBefore = newBucket.tasks[newTaskIndex - 1] ?? null + const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations newTask.bucketId = newBucket.id, From 45e1ae66d69eaff6d7ff3294211e0542009b20df Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Wed, 9 Feb 2022 00:26:56 +0100 Subject: [PATCH 3/3] feat: restore styling / fix styling issues --- src/views/list/ListKanban.vue | 63 ++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 20 deletions(-) diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue index 3691b373..fa2b6416 100644 --- a/src/views/list/ListKanban.vue +++ b/src/views/list/ListKanban.vue @@ -2,12 +2,12 @@ @@ -541,7 +541,10 @@ export default { const updatedData = { id: bucket.id, - position: calculateItemPosition(bucketBefore !== null ? bucketBefore.position : null, bucketAfter !== null ? bucketAfter.position : null), + position: calculateItemPosition( + bucketBefore !== null ? bucketBefore.position : null, + bucketAfter !== null ? bucketAfter.position : null, + ), } this.$store.dispatch('kanban/updateBucket', updatedData) @@ -562,9 +565,14 @@ export default { }, shouldAcceptDrop(bucket) { - return bucket.id === this.sourceBucket || // When dragging from a bucket who has its limit reached, dragging should still be possible - bucket.limit === 0 || // If there is no limit set, dragging & dropping should always work - bucket.tasks.length < bucket.limit // Disallow dropping to buckets which have their limit reached + return ( + // When dragging from a bucket who has its limit reached, dragging should still be possible + bucket.id === this.sourceBucket || + // If there is no limit set, dragging & dropping should always work + bucket.limit === 0 || + // Disallow dropping to buckets which have their limit reached + bucket.tasks.length < bucket.limit + ) }, dragstart(bucket) { @@ -613,7 +621,6 @@ $filter-container-height: '1rem - #{$switch-view-height}'; } .kanban { - overflow-x: auto; overflow-y: hidden; height: calc(#{$crazy-height-calculation}); @@ -629,13 +636,22 @@ $filter-container-height: '1rem - #{$switch-view-height}'; } .ghost { - background: transparent !important; - border: 3px dashed var(--grey-300) !important; - box-shadow: none !important; + position: relative; * { opacity: 0; } + &::after { + content: ''; + position: absolute; + display: block; + top: 0.25rem; + right: 0.5rem; + bottom: 0.25rem; + left: 0.5rem; + border: 3px dashed var(--grey-300); + border-radius: $radius; + } } .bucket { @@ -656,12 +672,14 @@ $filter-container-height: '1rem - #{$switch-view-height}'; .task-item { background-color: var(--grey-100); - padding: .5rem .5rem 0; - } + padding: .25rem .5rem; - - .move-card-move { - transition: transform $transition-duration; + &:first-of-type { + padding-top: .5rem; + } + &:last-of-type { + padding-bottom: .5rem; + } } .no-move { @@ -758,8 +776,13 @@ $filter-container-height: '1rem - #{$switch-view-height}'; } .task-dragging { + transform: rotateZ(3deg); transition: transform 0.18s ease; - transform: rotateZ(3deg) +} + +.move-card-move { + transform: rotateZ(3deg); + transition: transform $transition-duration; } .move-card-leave-from,