Drag-and-drop improvements for projects and issue pins (#29875)

1. Add "grabbing" cursor while dragging items:


![](https://github.com/go-gitea/gitea/assets/115237/c60845ff-7544-4215-aeaa-408e8c4ef03a)

2. Make project board only drag via their header, not via their whole
body.


![](https://github.com/go-gitea/gitea/assets/115237/62c27f3d-993a-481d-9cc3-b6226b4c5d61)

3. Fix some cursor problems in projects
4. Move shared options into `createSortable`.
This commit is contained in:
silverwind 2024-03-28 00:20:38 +01:00 committed by GitHub
parent b08c7afe5f
commit 7fda109aba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 27 additions and 10 deletions

View File

@ -67,7 +67,7 @@
<div class="board {{if .CanWriteProjects}}sortable{{end}}"> <div class="board {{if .CanWriteProjects}}sortable{{end}}">
{{range .Columns}} {{range .Columns}}
<div class="ui segment project-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}"> <div class="ui segment project-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
<div class="project-column-header"> <div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}">
<div class="ui large label project-column-title tw-py-1"> <div class="ui large label project-column-title tw-py-1">
<div class="ui small circular grey label project-column-issue-count"> <div class="ui small circular grey label project-column-issue-count">
{{.NumIssues ctx}} {{.NumIssues ctx}}
@ -156,7 +156,7 @@
<div class="divider"></div> <div class="divider"></div>
<div class="ui cards{{if $canWriteProject}} tw-cursor-grab{{end}}" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}"> <div class="ui cards" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}">
{{range (index $.IssuesMap .ID)}} {{range (index $.IssuesMap .ID)}}
<div class="issue-card gt-word-break {{if $canWriteProject}}tw-cursor-grab{{end}}" data-issue="{{.ID}}"> <div class="issue-card gt-word-break {{if $canWriteProject}}tw-cursor-grab{{end}}" data-issue="{{.ID}}">
{{template "repo/issue/card" (dict "Issue" . "Page" $)}} {{template "repo/issue/card" (dict "Issue" . "Page" $)}}

View File

@ -19,6 +19,7 @@
overflow: visible; overflow: visible;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: default;
} }
.project-column-header { .project-column-header {
@ -46,6 +47,7 @@
.project-column-title { .project-column-title {
background: none !important; background: none !important;
line-height: 1.25 !important; line-height: 1.25 !important;
cursor: inherit;
} }
.project-column > .cards { .project-column > .cards {
@ -92,6 +94,7 @@
} }
.card-ghost { .card-ghost {
border-color: var(--color-secondary-dark-4) !important;
border-style: dashed !important; border-style: dashed !important;
background: none !important; background: none !important;
} }

View File

@ -19,3 +19,7 @@
font-size: 14px; font-size: 14px;
margin-left: 4px; margin-left: 4px;
} }
.issue-card.sortable-chosen .issue-card-title {
cursor: inherit;
}

View File

@ -188,8 +188,6 @@ async function initIssuePinSort() {
createSortable(pinDiv, { createSortable(pinDiv, {
group: 'shared', group: 'shared',
animation: 150,
ghostClass: 'card-ghost',
onEnd: pinMoveEnd, onEnd: pinMoveEnd,
}); });
} }

View File

@ -58,8 +58,7 @@ async function initRepoProjectSortable() {
createSortable(mainBoard, { createSortable(mainBoard, {
group: 'project-column', group: 'project-column',
draggable: '.project-column', draggable: '.project-column',
animation: 150, handle: '.project-column-header',
ghostClass: 'card-ghost',
delayOnTouchOnly: true, delayOnTouchOnly: true,
delay: 500, delay: 500,
onSort: async () => { onSort: async () => {
@ -86,8 +85,6 @@ async function initRepoProjectSortable() {
const boardCardList = boardColumn.getElementsByClassName('cards')[0]; const boardCardList = boardColumn.getElementsByClassName('cards')[0];
createSortable(boardCardList, { createSortable(boardCardList, {
group: 'shared', group: 'shared',
animation: 150,
ghostClass: 'card-ghost',
onAdd: moveIssue, onAdd: moveIssue,
onUpdate: moveIssue, onUpdate: moveIssue,
delayOnTouchOnly: true, delayOnTouchOnly: true,

View File

@ -1,4 +1,19 @@
export async function createSortable(...args) { export async function createSortable(el, opts = {}) {
const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs'); 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,
});
} }