From 4d368eb76b05482624cfbacbe208739971793d64 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 18 Mar 2024 00:22:27 +0100 Subject: [PATCH 1/8] Draggable improvements for projects and issue pins --- templates/projects/view.tmpl | 4 ++-- web_src/css/features/projects.css | 2 ++ web_src/css/repo/issue-card.css | 4 ++++ web_src/js/features/repo-issue-list.js | 2 -- web_src/js/features/repo-projects.js | 5 +---- web_src/js/modules/sortable.js | 19 +++++++++++++++++-- 6 files changed, 26 insertions(+), 10 deletions(-) diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index a6e84024bc431..301012118fbf6 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -67,7 +67,7 @@
{{range .Columns}}
-
+
{{.NumIssues ctx}} @@ -165,7 +165,7 @@
-
+
{{range (index $.IssuesMap .ID)}}
{{template "repo/issue/card" (dict "Issue" . "Page" $)}} diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index f85430a2a80ed..578da0c1ff11d 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -19,6 +19,7 @@ overflow: visible; display: flex; flex-direction: column; + cursor: default; } .project-column-header { @@ -46,6 +47,7 @@ .project-column-title { background: none !important; line-height: 1.25 !important; + cursor: inherit; } .project-column > .cards { diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index 5a70de47c24ea..b9368df4f60bf 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -19,3 +19,7 @@ font-size: 14px; margin-left: 4px; } + +.issue-card.sortable-chosen .issue-card-title { + cursor: inherit; +} diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js index 880ecf94892cf..6ebbb72edc091 100644 --- a/web_src/js/features/repo-issue-list.js +++ b/web_src/js/features/repo-issue-list.js @@ -188,8 +188,6 @@ async function initIssuePinSort() { createSortable(pinDiv, { group: 'shared', - animation: 150, - ghostClass: 'card-ghost', onEnd: pinMoveEnd, }); } diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js index 1f86711ab16e0..ec1a3c79e2eca 100644 --- a/web_src/js/features/repo-projects.js +++ b/web_src/js/features/repo-projects.js @@ -58,9 +58,8 @@ async function initRepoProjectSortable() { createSortable(mainBoard, { group: 'project-column', draggable: '.project-column', + handle: '.project-column-header', filter: '[data-id="0"]', - animation: 150, - ghostClass: 'card-ghost', delayOnTouchOnly: true, delay: 500, onSort: async () => { @@ -87,8 +86,6 @@ async function initRepoProjectSortable() { const boardCardList = boardColumn.getElementsByClassName('cards')[0]; createSortable(boardCardList, { group: 'shared', - animation: 150, - ghostClass: 'card-ghost', onAdd: moveIssue, onUpdate: moveIssue, delayOnTouchOnly: true, diff --git a/web_src/js/modules/sortable.js b/web_src/js/modules/sortable.js index cfe7c3bf306cc..7a8889b6ae238 100644 --- a/web_src/js/modules/sortable.js +++ b/web_src/js/modules/sortable.js @@ -1,4 +1,19 @@ -export async function createSortable(...args) { +export async function createSortable(el, opts = {}) { const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs'); - return new Sortable(...args); + + return new Sortable(el, { + animation: 150, + ghostClass: 'card-ghost', + onStart: (e) => { + const handle = opts?.handle ? e.item.querySelector(opts.handle) : e.item; + handle.classList.add('tw-cursor-grabbing'); + opts.onStart?.(e); + }, + onUnchoose: (e) => { // using this instead of onEnd because onEnd did not fire reliably in all cases + const handle = opts?.handle ? e.item.querySelector(opts.handle) : e.item; + handle.classList.remove('tw-cursor-grabbing'); + opts.onUnchoose?.(e); + }, + ...opts, + }); } From 6b16444c9ff2d2ef47838cf269d66ea0b5b49f18 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 18 Mar 2024 00:44:29 +0100 Subject: [PATCH 2/8] use onChoose --- web_src/js/modules/sortable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/modules/sortable.js b/web_src/js/modules/sortable.js index 7a8889b6ae238..a347267215f75 100644 --- a/web_src/js/modules/sortable.js +++ b/web_src/js/modules/sortable.js @@ -4,12 +4,12 @@ export async function createSortable(el, opts = {}) { return new Sortable(el, { animation: 150, ghostClass: 'card-ghost', - onStart: (e) => { + onChoose: (e) => { const handle = opts?.handle ? e.item.querySelector(opts.handle) : e.item; handle.classList.add('tw-cursor-grabbing'); opts.onStart?.(e); }, - onUnchoose: (e) => { // using this instead of onEnd because onEnd did not fire reliably in all cases + onUnchoose: (e) => { const handle = opts?.handle ? e.item.querySelector(opts.handle) : e.item; handle.classList.remove('tw-cursor-grabbing'); opts.onUnchoose?.(e); From 6218b46b4c54b2afe3ef15733f676cad4372e430 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 20 Mar 2024 16:22:40 +0100 Subject: [PATCH 3/8] Update web_src/js/modules/sortable.js --- web_src/js/modules/sortable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/sortable.js b/web_src/js/modules/sortable.js index a347267215f75..23d0d3a5e70f7 100644 --- a/web_src/js/modules/sortable.js +++ b/web_src/js/modules/sortable.js @@ -7,7 +7,7 @@ export async function createSortable(el, opts = {}) { onChoose: (e) => { const handle = opts?.handle ? e.item.querySelector(opts.handle) : e.item; handle.classList.add('tw-cursor-grabbing'); - opts.onStart?.(e); + opts.onChoose?.(e); }, onUnchoose: (e) => { const handle = opts?.handle ? e.item.querySelector(opts.handle) : e.item; From 1a18b8908cf2f2034ce106a4203e8b38d3e4a4cd Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 27 Mar 2024 22:58:41 +0100 Subject: [PATCH 4/8] move condition --- templates/projects/view.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index edd940375fca1..b45174b086a7c 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -67,7 +67,7 @@
{{range .Columns}}
-
+
{{.NumIssues ctx}} From a7efeeed1481e381dcf74daa3637455b9f4e64b1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 27 Mar 2024 23:02:19 +0100 Subject: [PATCH 5/8] increase contrast on ghost card --- web_src/css/features/projects.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index 578da0c1ff11d..30df994c38a60 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -94,6 +94,7 @@ } .card-ghost { + border-color: var(--color-secondary-dark-4) !important; border-style: dashed !important; background: none !important; } From 6cc6bc7772be8773f1c66a2222efa43120e95b4b Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 27 Mar 2024 23:04:11 +0100 Subject: [PATCH 6/8] Update web_src/js/modules/sortable.js --- web_src/js/modules/sortable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/sortable.js b/web_src/js/modules/sortable.js index 23d0d3a5e70f7..b07a43986092f 100644 --- a/web_src/js/modules/sortable.js +++ b/web_src/js/modules/sortable.js @@ -5,7 +5,7 @@ export async function createSortable(el, opts = {}) { animation: 150, ghostClass: 'card-ghost', onChoose: (e) => { - const handle = opts?.handle ? e.item.querySelector(opts.handle) : e.item; + const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item; handle.classList.add('tw-cursor-grabbing'); opts.onChoose?.(e); }, From 3b890b1225c4d524909105cfdbbc9476d2bf60e0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 27 Mar 2024 23:04:25 +0100 Subject: [PATCH 7/8] Update web_src/js/modules/sortable.js --- web_src/js/modules/sortable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/sortable.js b/web_src/js/modules/sortable.js index b07a43986092f..1c9adb6d72d58 100644 --- a/web_src/js/modules/sortable.js +++ b/web_src/js/modules/sortable.js @@ -10,7 +10,7 @@ export async function createSortable(el, opts = {}) { opts.onChoose?.(e); }, onUnchoose: (e) => { - const handle = opts?.handle ? e.item.querySelector(opts.handle) : e.item; + const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item; handle.classList.remove('tw-cursor-grabbing'); opts.onUnchoose?.(e); }, From 6391ec3d65c305e09e887ca9916c394047f924cc Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 27 Mar 2024 23:45:42 +0100 Subject: [PATCH 8/8] Update web_src/js/features/repo-projects.js --- web_src/js/features/repo-projects.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js index d3b770ac24fc7..d9ae85a8d220f 100644 --- a/web_src/js/features/repo-projects.js +++ b/web_src/js/features/repo-projects.js @@ -59,7 +59,6 @@ async function initRepoProjectSortable() { group: 'project-column', draggable: '.project-column', handle: '.project-column-header', - filter: '[data-id="0"]', delayOnTouchOnly: true, delay: 500, onSort: async () => {