diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index e6c6c20497..b45174b086 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -67,7 +67,7 @@
{{range .Columns}}
-
+
{{.NumIssues ctx}} @@ -156,7 +156,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 f85430a2a8..30df994c38 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 { @@ -92,6 +94,7 @@ } .card-ghost { + border-color: var(--color-secondary-dark-4) !important; border-style: dashed !important; background: none !important; } diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index 5a70de47c2..b9368df4f6 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 9681e648d5..4582f87425 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 1747cb2b3a..d9ae85a8d2 100644 --- a/web_src/js/features/repo-projects.js +++ b/web_src/js/features/repo-projects.js @@ -58,8 +58,7 @@ async function initRepoProjectSortable() { createSortable(mainBoard, { group: 'project-column', draggable: '.project-column', - animation: 150, - ghostClass: 'card-ghost', + handle: '.project-column-header', delayOnTouchOnly: true, delay: 500, onSort: async () => { @@ -86,8 +85,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 cfe7c3bf30..1c9adb6d72 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', + onChoose: (e) => { + const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item; + handle.classList.add('tw-cursor-grabbing'); + opts.onChoose?.(e); + }, + onUnchoose: (e) => { + const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item; + handle.classList.remove('tw-cursor-grabbing'); + opts.onUnchoose?.(e); + }, + ...opts, + }); }