{{template "repo/header" .}} -
-
-
- {{template "repo/issue/navbar" .}} -
-
- {{if and .CanWriteProjects (not .Repository.IsArchived)}} - {{.locale.Tr "repo.issues.new"}} - {{.locale.Tr "new_project_column"}} - {{end}} - -
+
+
+ {{template "repo/issue/navbar" .}} + {{ctx.Locale.Tr "repo.issues.new"}}
-
-
-
-

{{$.Project.Title}}

-
{{$.Project.RenderedContent|Str2html}}
-
- {{if and $.CanWriteProjects (not $.Repository.IsArchived)}} -
-
- - {{svg "octicon-pencil"}} - {{$.locale.Tr "repo.issues.label_edit"}} - - {{if .Project.IsClosed}} - - {{svg "octicon-check"}} - {{$.locale.Tr "repo.projects.open"}} - - {{else}} - - {{svg "octicon-skip"}} - {{$.locale.Tr "repo.projects.close"}} - - {{end}} - - {{svg "octicon-trash"}} - {{$.locale.Tr "repo.issues.label_delete"}} - -
-
- {{end}} -
-
+ {{template "projects/view" .}}
-
- -
- {{range $board := .Boards}} - -
-
-
-
- {{.NumIssues}} -
- {{.Title}} -
- {{if and $.CanWriteProjects (not $.Repository.IsArchived) (ne .ID 0)}} -
-
- {{svg "octicon-kebab-horizontal"}} -
-
- - {{svg "octicon-pencil"}} - {{$.locale.Tr "repo.projects.column.edit"}} - - {{if not .Default}} - - {{svg "octicon-pin"}} - {{$.locale.Tr "repo.projects.column.set_default"}} - - {{else}} - - {{svg "octicon-pin-slash"}} - {{$.locale.Tr "repo.projects.column.unset_default"}} - - {{end}} - - {{svg "octicon-trash"}} - {{$.locale.Tr "repo.projects.column.delete"}} - - - - - - - -
-
- {{end}} -
-
- -
- - {{range (index $.IssuesMap .ID)}} - - -
- {{if eq $.Project.CardType 1}}{{/* Images and Text*/}} -
- {{range (index $.issuesAttachmentMap .ID)}} - {{.Name}} - {{end}} -
- {{end}} -
-
- - {{template "shared/issueicon" .}} - - - {{.Title}} - -
-
- - #{{.Index}} - {{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}} - {{if .OriginalAuthor}} - {{$.locale.Tr .GetLastEventLabelFake $timeStr (.OriginalAuthor|Escape) | Safe}} - {{else if gt .Poster.ID 0}} - {{$.locale.Tr .GetLastEventLabel $timeStr (.Poster.HomeLink|Escape) (.Poster.GetDisplayName | Escape) | Safe}} - {{else}} - {{$.locale.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}} - {{end}} - -
- {{- if .MilestoneID}} -
- - {{svg "octicon-milestone" 16 "gt-mr-2 gt-vm"}} - {{.Milestone.Name}} - -
- {{- end}} - {{- range index $.LinkedPRs .ID}} -
- - {{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}} - {{.Title}} #{{.Index}} - -
- {{- end}} -
- - {{if or .Labels .Assignees}} -
- {{range .Labels}} - {{RenderLabel $.Context .}} - {{end}} -
- {{range .Assignees}} - {{ctx.AvatarUtils.Avatar . 28 "mini gt-mr-3"}} - {{end}} -
-
- {{end}} -
- - - {{end}} -
-
- {{end}} -
- -
-
-{{if .CanWriteProjects}} -
-
- {{svg "octicon-trash"}} - {{.locale.Tr "repo.projects.deletion"}} -
-
-

{{.locale.Tr "repo.projects.deletion_desc"}}

-
- {{template "base/modal_actions_confirm" .}} -
-{{end}} - {{template "base/footer" .}} diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index bd48429fa6..f85430a2a8 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -6,11 +6,7 @@ margin: 0 0.5em; } -.board.sortable .board-card { - cursor: move; -} - -.board-column { +.project-column { background-color: var(--color-project-board-bg) !important; border: 1px solid var(--color-secondary) !important; margin: 0 0.5rem !important; @@ -25,33 +21,34 @@ flex-direction: column; } -.board-column-header { +.project-column-header { display: flex; + align-items: center; justify-content: space-between; } -.board-column-header.dark-label { +.project-column-header.dark-label { color: var(--color-project-board-dark-label) !important; } -.board-column-header.dark-label .board-label { +.project-column-header.dark-label .project-column-title { color: var(--color-project-board-dark-label) !important; } -.board-column-header.light-label { +.project-column-header.light-label { color: var(--color-project-board-light-label) !important; } -.board-column-header.light-label .board-label { +.project-column-header.light-label .project-column-title { color: var(--color-project-board-light-label) !important; } -.board-label { +.project-column-title { background: none !important; line-height: 1.25 !important; } -.board-column > .cards { +.project-column > .cards { flex: 1; display: flex; align-content: baseline; @@ -59,60 +56,37 @@ padding: 0 !important; flex-wrap: nowrap !important; flex-direction: column; + overflow-x: auto; + gap: .25rem; } -.project-board-title { - word-break: break-word; -} - -.board-column > .divider { +.project-column > .divider { margin: 5px 0; } -.board-column:first-child { +.project-column:first-child { margin-left: auto !important; } -.board-column:last-child { +.project-column:last-child { margin-right: auto !important; } -.board-column .ui.cards > .card > .content { - border: none; -} - -.board-card { - margin: 4px 2px !important; - border-radius: 5px !important; - width: calc(100% - 4px) !important; - padding: 0.5rem !important; - min-height: auto !important; -} - -.board-card .meta * { - margin-right: 0 !important; -} - -.board-card .header { - margin-top: 0 !important; - font-size: 16px !important; -} - -.board-card .card-attachment-images { +.card-attachment-images { display: inline-block; white-space: nowrap; overflow: hidden; text-align: center; } -.board-card .card-attachment-images img { +.card-attachment-images img { display: inline-block; max-height: 50px; border-radius: var(--border-radius); margin-right: 2px; } -.board-card .card-attachment-images img:only-child { +.card-attachment-images img:only-child { max-height: 90px; margin: auto; } @@ -139,12 +113,12 @@ top: 10px; } -.edit-project-board .color.picker.column, -.new-board-modal .color.picker.column { +.edit-project-column-modal .color.picker.column, +.new-project-column-modal .color.picker.column { display: flex; } -.edit-project-board .color.picker.column .minicolors, -.new-board-modal .color.picker.column .minicolors { +.edit-project-column-modal .color.picker.column .minicolors, +.new-project-column-modal .color.picker.column .minicolors { flex: 1; } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 8a6c2c6539..35b5d3c97e 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -60,6 +60,7 @@ Gitea's private styles use `g-` prefix. .gt-content-center { align-content: center !important; } .gt-cursor-default { cursor: default !important; } .gt-cursor-pointer { cursor: pointer !important; } +.gt-cursor-grab { cursor: grab !important; } .gt-invisible { visibility: hidden !important; } .gt-items-start { align-items: flex-start !important; } .gt-pointer-events-none { pointer-events: none !important; } diff --git a/web_src/css/index.css b/web_src/css/index.css index 55ea67453b..d399f073d5 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -45,6 +45,7 @@ @import "./repo.css"; @import "./repo/release-tag.css"; +@import "./repo/issue-card.css"; @import "./repo/issue-label.css"; @import "./repo/issue-list.css"; @import "./repo/list-header.css"; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 2b3f4e1efb..34fa2a0052 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -3302,25 +3302,6 @@ tbody.commit-list { } } -.pinned-issue-card { - border-radius: var(--border-radius); - padding: 8px 10px; - border: 1px solid var(--color-secondary); - background: var(--color-card); -} - -.pinned-issue-icon, -.pinned-issue-unpin { - margin-top: 1px; - flex-shrink: 0; -} - -.pinned-issue-title { - flex: 1; - font-size: 18px; - margin-left: 4px; -} - #cherry-pick-modal .scrolling.menu { max-height: 200px; } diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css new file mode 100644 index 0000000000..31d3a2375b --- /dev/null +++ b/web_src/css/repo/issue-card.css @@ -0,0 +1,21 @@ +.issue-card { + display: flex; + flex-direction: column; + align-items: start; + border-radius: var(--border-radius); + padding: 8px 10px; + border: 1px solid var(--color-secondary); + background: var(--color-card); +} + +.issue-card-icon, +.issue-card-unpin { + margin-top: 1px; + flex-shrink: 0; +} + +.issue-card-title { + flex: 1; + font-size: 18px; + margin-left: 4px; +} diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js index 3dc523e709..64343a8d22 100644 --- a/web_src/js/features/repo-issue-list.js +++ b/web_src/js/features/repo-issue-list.js @@ -140,7 +140,7 @@ function initRepoIssueListAuthorDropdown() { } function initPinRemoveButton() { - for (const button of document.getElementsByClassName('pinned-issue-unpin')) { + for (const button of document.getElementsByClassName('issue-card-unpin')) { button.addEventListener('click', async (event) => { const el = event.currentTarget; const id = Number(el.getAttribute('data-issue-id')); @@ -157,7 +157,7 @@ function initPinRemoveButton() { // Delete the tooltip el._tippy.destroy(); // Remove the Card - el.closest(`div.pinned-issue-card[data-issue-id="${id}"]`).remove(); + el.closest(`div.issue-card[data-issue-id="${id}"]`).remove(); } }); } diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js index 1b8807d243..f12d4f234f 100644 --- a/web_src/js/features/repo-projects.js +++ b/web_src/js/features/repo-projects.js @@ -7,27 +7,27 @@ const {csrfToken} = window.config; function updateIssueCount(cards) { const parent = cards.parentElement; - const cnt = parent.getElementsByClassName('board-card').length; - parent.getElementsByClassName('board-card-cnt')[0].textContent = cnt; + const cnt = parent.getElementsByClassName('issue-card').length; + parent.getElementsByClassName('project-column-issue-count')[0].textContent = cnt; } -function createNewBoard(url, boardTitle, projectColorInput) { +function createNewColumn(url, columnTitle, projectColorInput) { $.ajax({ url, - data: JSON.stringify({title: boardTitle.val(), color: projectColorInput.val()}), + data: JSON.stringify({title: columnTitle.val(), color: projectColorInput.val()}), headers: { 'X-Csrf-Token': csrfToken, }, contentType: 'application/json', method: 'POST', }).done(() => { - boardTitle.closest('form').removeClass('dirty'); + columnTitle.closest('form').removeClass('dirty'); window.location.reload(); }); } function moveIssue({item, from, to, oldIndex}) { - const columnCards = to.getElementsByClassName('board-card'); + const columnCards = to.getElementsByClassName('issue-card'); updateIssueCount(from); updateIssueCount(to); @@ -56,19 +56,19 @@ async function initRepoProjectSortable() { const els = document.querySelectorAll('#project-board > .board.sortable'); if (!els.length) return; - // the HTML layout is: #project-board > .board > .board-column .board.cards > .board-card.card .content + // the HTML layout is: #project-board > .board > .project-column .cards > .issue-card const mainBoard = els[0]; - let boardColumns = mainBoard.getElementsByClassName('board-column'); + let boardColumns = mainBoard.getElementsByClassName('project-column'); createSortable(mainBoard, { - group: 'board-column', - draggable: '.board-column', + group: 'project-column', + draggable: '.project-column', filter: '[data-id="0"]', animation: 150, ghostClass: 'card-ghost', delayOnTouchOnly: true, delay: 500, onSort: () => { - boardColumns = mainBoard.getElementsByClassName('board-column'); + boardColumns = mainBoard.getElementsByClassName('project-column'); for (let i = 0; i < boardColumns.length; i++) { const column = boardColumns[i]; if (parseInt($(column).data('sorting')) !== i) { @@ -87,7 +87,7 @@ async function initRepoProjectSortable() { }); for (const boardColumn of boardColumns) { - const boardCardList = boardColumn.getElementsByClassName('board')[0]; + const boardCardList = boardColumn.getElementsByClassName('cards')[0]; createSortable(boardCardList, { group: 'shared', animation: 150, @@ -107,18 +107,18 @@ export function initRepoProject() { const _promise = initRepoProjectSortable(); - $('.edit-project-board').each(function () { - const projectHeader = $(this).closest('.board-column-header'); - const projectTitleLabel = projectHeader.find('.board-label'); - const projectTitleInput = $(this).find('.project-board-title'); - const projectColorInput = $(this).find('#new_board_color'); - const boardColumn = $(this).closest('.board-column'); + $('.edit-project-column-modal').each(function () { + const projectHeader = $(this).closest('.project-column-header'); + const projectTitleLabel = projectHeader.find('.project-column-title'); + const projectTitleInput = $(this).find('.project-column-title-input'); + const projectColorInput = $(this).find('#new_project_column_color'); + const boardColumn = $(this).closest('.project-column'); if (boardColumn.css('backgroundColor')) { setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor'))); } - $(this).find('.edit-column-button').on('click', function (e) { + $(this).find('.edit-project-column-button').on('click', function (e) { e.preventDefault(); $.ajax({ @@ -141,9 +141,9 @@ export function initRepoProject() { }); }); - $('.default-project-board-modal').each(function () { - const boardColumn = $(this).closest('.board-column'); - const showButton = $(boardColumn).find('.default-project-board-show'); + $('.default-project-column-modal').each(function () { + const boardColumn = $(this).closest('.project-column'); + const showButton = $(boardColumn).find('.default-project-column-show'); const commitButton = $(this).find('.actions > .ok.button'); $(commitButton).on('click', (e) => { @@ -162,7 +162,7 @@ export function initRepoProject() { }); }); - $('.show-delete-column-modal').each(function () { + $('.show-delete-project-column-modal').each(function () { const deleteColumnModal = $(`${$(this).attr('data-modal')}`); const deleteColumnButton = deleteColumnModal.find('.actions > .ok.button'); const deleteUrl = $(this).attr('data-url'); @@ -183,28 +183,28 @@ export function initRepoProject() { }); }); - $('#new_board_submit').on('click', (e) => { + $('#new_project_column_submit').on('click', (e) => { e.preventDefault(); - const boardTitle = $('#new_board'); - const projectColorInput = $('#new_board_color_picker'); - if (!boardTitle.val()) { + const columnTitle = $('#new_project_column'); + const projectColorInput = $('#new_project_column_color_picker'); + if (!columnTitle.val()) { return; } const url = $(this).data('url'); - createNewBoard(url, boardTitle, projectColorInput); + createNewColumn(url, columnTitle, projectColorInput); }); - $('.new-board').on('input keyup', (e) => { - const boardTitle = $('#new_board'); - const projectColorInput = $('#new_board_color_picker'); - if (!boardTitle.val()) { - $('#new_board_submit').addClass('disabled'); + $('.new-project-column').on('input keyup', (e) => { + const columnTitle = $('#new_project_column'); + const projectColorInput = $('#new_project_column_color_picker'); + if (!columnTitle.val()) { + $('#new_project_column_submit').addClass('disabled'); return; } - $('#new_board_submit').removeClass('disabled'); + $('#new_project_column_submit').removeClass('disabled'); if (e.key === 'Enter') { const url = $(this).data('url'); - createNewBoard(url, boardTitle, projectColorInput); + createNewColumn(url, columnTitle, projectColorInput); } }); }