From 96d3a03a08d4ac20d2356d6ea84e8c335e9382f2 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 8 Dec 2024 10:35:28 +0800 Subject: [PATCH] Refactor LabelEdit (#32752) And fix a regression: https://github.com/go-gitea/gitea/pull/30053#discussion_r1874405470 Major changes: * rewrite without jquery * remove the "delete modal", using "link-action" is good enough * merge "new modal" and "edit modal" --- templates/org/settings/labels.tmpl | 24 ++- templates/repo/issue/labels.tmpl | 10 +- ...elete_label.tmpl => label_edit_modal.tmpl} | 25 +-- templates/repo/issue/labels/label_list.tmpl | 18 +- templates/repo/issue/labels/label_new.tmpl | 48 ------ web_src/css/repo.css | 11 -- web_src/js/features/common-organization.ts | 2 +- web_src/js/features/comp/LabelEdit.ts | 163 ++++++++---------- web_src/js/features/repo-legacy.ts | 2 +- 9 files changed, 110 insertions(+), 193 deletions(-) rename templates/repo/issue/labels/{edit_delete_label.tmpl => label_edit_modal.tmpl} (79%) delete mode 100644 templates/repo/issue/labels/label_new.tmpl diff --git a/templates/org/settings/labels.tmpl b/templates/org/settings/labels.tmpl index 25a562c975..21d7c0ef3c 100644 --- a/templates/org/settings/labels.tmpl +++ b/templates/org/settings/labels.tmpl @@ -1,15 +1,13 @@ {{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings labels")}} -
-
-
- {{ctx.Locale.Tr "org.settings.labels_desc"}} -
- -
-
- {{template "repo/issue/labels/label_new" .}} - {{template "repo/issue/labels/label_list" .}} -
-{{template "repo/issue/labels/edit_delete_label" .}} +
+
+
+ {{ctx.Locale.Tr "org.settings.labels_desc"}} +
+ +
+
+ {{template "repo/issue/labels/label_list" .}} + {{template "repo/issue/labels/label_edit_modal" .}} +
{{template "org/settings/layout_footer" .}} - diff --git a/templates/repo/issue/labels.tmpl b/templates/repo/issue/labels.tmpl index 230777efcc..317fe09000 100644 --- a/templates/repo/issue/labels.tmpl +++ b/templates/repo/issue/labels.tmpl @@ -8,15 +8,11 @@ {{end}} - {{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}} - {{template "repo/issue/labels/label_new" .}} - {{end}} {{template "base/alert" .}} {{template "repo/issue/labels/label_list" .}} + {{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}} + {{template "repo/issue/labels/label_edit_modal" .}} + {{end}} - -{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}} - {{template "repo/issue/labels/edit_delete_label" .}} -{{end}} {{template "base/footer" .}} diff --git a/templates/repo/issue/labels/edit_delete_label.tmpl b/templates/repo/issue/labels/label_edit_modal.tmpl similarity index 79% rename from templates/repo/issue/labels/edit_delete_label.tmpl rename to templates/repo/issue/labels/label_edit_modal.tmpl index fcf69217ea..f04d499737 100644 --- a/templates/repo/issue/labels/edit_delete_label.tmpl +++ b/templates/repo/issue/labels/label_edit_modal.tmpl @@ -1,22 +1,13 @@ -
-
- {{svg "octicon-trash"}} - {{ctx.Locale.Tr "repo.issues.label_deletion"}} -
+ - -
-
- {{ctx.Locale.Tr "repo.issues.label_modify"}} -
-
-
+ {{.CsrfTokenHtml}} - +
diff --git a/templates/repo/issue/labels/label_list.tmpl b/templates/repo/issue/labels/label_list.tmpl index 07a548a8af..822567301e 100644 --- a/templates/repo/issue/labels/label_list.tmpl +++ b/templates/repo/issue/labels/label_list.tmpl @@ -27,6 +27,8 @@ {{end}}
    + {{$canEditLabel := and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}} + {{$canEditLabel = or $canEditLabel $.PageIsOrgSettingsLabels}} {{range .Labels}}
  • @@ -43,12 +45,16 @@
    {{template "repo/issue/labels/label_archived" .}}
    - {{if and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}} - {{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.label_edit"}} - {{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}} - {{else if $.PageIsOrgSettingsLabels}} - {{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.label_edit"}} - {{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}} + {{if $canEditLabel}} + {{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.label_edit"}} + {{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}} {{end}}
    diff --git a/templates/repo/issue/labels/label_new.tmpl b/templates/repo/issue/labels/label_new.tmpl deleted file mode 100644 index 32fd8e76d7..0000000000 --- a/templates/repo/issue/labels/label_new.tmpl +++ /dev/null @@ -1,48 +0,0 @@ -
    -
    - {{ctx.Locale.Tr "repo.issues.new_label"}} -
    -
    - - {{.CsrfTokenHtml}} -
    - -
    - -
    -
    -
    -
    - - -
    -
    - {{ctx.Locale.Tr "repo.issues.label_exclusive_desc"}} -
    -
    - -
    - -
    -
    -
    - -
    - - {{template "repo/issue/label_precolors"}} -
    -
    - -
    - -
    - - -
    -
    diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 3eebc0c477..14bdc43474 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2061,17 +2061,6 @@ td .commit-summary { padding: 1em; } -.edit-label.modal .form .column, -.new-label.modal .form .column { - padding-right: 0; -} - -.edit-label.modal .form .buttons, -.new-label.modal .form .buttons { - margin-left: auto; - padding-top: 15px; -} - .stats-table { display: table; width: 100%; diff --git a/web_src/js/features/common-organization.ts b/web_src/js/features/common-organization.ts index 085be5fe71..47a61ece22 100644 --- a/web_src/js/features/common-organization.ts +++ b/web_src/js/features/common-organization.ts @@ -12,5 +12,5 @@ export function initCommonOrganization() { }); // Labels - initCompLabelEdit('.organization.settings.labels'); + initCompLabelEdit('.page-content.organization.settings.labels'); } diff --git a/web_src/js/features/comp/LabelEdit.ts b/web_src/js/features/comp/LabelEdit.ts index 2cc75cc6b0..7bceb636bb 100644 --- a/web_src/js/features/comp/LabelEdit.ts +++ b/web_src/js/features/comp/LabelEdit.ts @@ -1,96 +1,81 @@ -import $ from 'jquery'; +import {toggleElem} from '../../utils/dom.ts'; +import {fomanticQuery} from '../../modules/fomantic/base.ts'; -function isExclusiveScopeName(name) { +function nameHasScope(name: string): boolean { return /.*[^/]\/[^/].*/.test(name); } -function updateExclusiveLabelEdit(form) { - const nameInput = document.querySelector(`${form} .label-name-input`); - const exclusiveField = document.querySelector(`${form} .label-exclusive-input-field`); - const exclusiveCheckbox = document.querySelector(`${form} .label-exclusive-input`); - const exclusiveWarning = document.querySelector(`${form} .label-exclusive-warning`); +export function initCompLabelEdit(pageSelector: string) { + const pageContent = document.querySelector(pageSelector); + if (!pageContent) return; - if (isExclusiveScopeName(nameInput.value)) { - exclusiveField?.classList.remove('muted'); - exclusiveField?.removeAttribute('aria-disabled'); - if (exclusiveCheckbox.checked && exclusiveCheckbox.getAttribute('data-exclusive-warn')) { - exclusiveWarning?.classList.remove('tw-hidden'); - } else { - exclusiveWarning?.classList.add('tw-hidden'); - } - } else { - exclusiveField?.classList.add('muted'); - exclusiveField?.setAttribute('aria-disabled', 'true'); - exclusiveWarning?.classList.add('tw-hidden'); + // for guest view, the modal is not available, the "labels" are read-only + const elModal = pageContent.querySelector('#issue-label-edit-modal'); + if (!elModal) return; + + const elLabelId = elModal.querySelector('input[name="id"]'); + const elNameInput = elModal.querySelector('.label-name-input'); + const elExclusiveField = elModal.querySelector('.label-exclusive-input-field'); + const elExclusiveInput = elModal.querySelector('.label-exclusive-input'); + const elExclusiveWarning = elModal.querySelector('.label-exclusive-warning'); + const elIsArchivedField = elModal.querySelector('.label-is-archived-input-field'); + const elIsArchivedInput = elModal.querySelector('.label-is-archived-input'); + const elDescInput = elModal.querySelector('.label-desc-input'); + const elColorInput = elModal.querySelector('.js-color-picker-input input'); + + const syncModalUi = () => { + const hasScope = nameHasScope(elNameInput.value); + elExclusiveField.classList.toggle('disabled', !hasScope); + const showExclusiveWarning = hasScope && elExclusiveInput.checked && elModal.hasAttribute('data-need-warn-exclusive'); + toggleElem(elExclusiveWarning, showExclusiveWarning); + if (!hasScope) elExclusiveInput.checked = false; + }; + + const showLabelEditModal = (btn:HTMLElement) => { + // the "btn" should contain the label's attributes by its `data-label-xxx` attributes + const form = elModal.querySelector('form'); + elLabelId.value = btn.getAttribute('data-label-id') || ''; + elNameInput.value = btn.getAttribute('data-label-name') || ''; + elIsArchivedInput.checked = btn.getAttribute('data-label-is-archived') === 'true'; + elExclusiveInput.checked = btn.getAttribute('data-label-exclusive') === 'true'; + elDescInput.value = btn.getAttribute('data-label-description') || ''; + elColorInput.value = btn.getAttribute('data-label-color') || ''; + elColorInput.dispatchEvent(new Event('input', {bubbles: true})); // trigger the color picker + + // if label id exists: "edit label" mode; otherwise: "new label" mode + const isEdit = Boolean(elLabelId.value); + + // if a label was not exclusive but has issues, then it should warn user if it will become exclusive + const numIssues = parseInt(btn.getAttribute('data-label-num-issues') || '0'); + elModal.toggleAttribute('data-need-warn-exclusive', !elExclusiveInput.checked && numIssues > 0); + elModal.querySelector('.header').textContent = isEdit ? elModal.getAttribute('data-text-edit-label') : elModal.getAttribute('data-text-new-label'); + + const curPageLink = elModal.getAttribute('data-current-page-link'); + form.action = isEdit ? `${curPageLink}/edit` : `${curPageLink}/new`; + toggleElem(elIsArchivedField, isEdit); + syncModalUi(); + fomanticQuery(elModal).modal({ + onApprove() { + if (!form.checkValidity()) { + form.reportValidity(); + return false; + } + form.submit(); + }, + }).modal('show'); + }; + + elModal.addEventListener('input', () => syncModalUi()); + + // theoretically, if the modal exists, the "new label" button should also exist, just in case it doesn't, use "?." + const elNewLabel = pageContent.querySelector('.ui.button.new-label'); + elNewLabel?.addEventListener('click', () => showLabelEditModal(elNewLabel)); + + const elEditLabelButtons = pageContent.querySelectorAll('.edit-label-button'); + for (const btn of elEditLabelButtons) { + btn.addEventListener('click', (e) => { + e.preventDefault(); + showLabelEditModal(btn); + }); } } - -export function initCompLabelEdit(selector) { - if (!$(selector).length) return; - - // Create label - $('.new-label.button').on('click', () => { - updateExclusiveLabelEdit('.new-label'); - $('.new-label.modal').modal({ - onApprove() { - const form = document.querySelector('.new-label.form'); - if (!form.checkValidity()) { - form.reportValidity(); - return false; - } - $('.new-label.form').trigger('submit'); - }, - }).modal('show'); - return false; - }); - - // Edit label - $('.edit-label-button').on('click', function () { - $('#label-modal-id').val($(this).data('id')); - - const $nameInput = $('.edit-label .label-name-input'); - $nameInput.val($(this).data('title')); - - const $isArchivedCheckbox = $('.edit-label .label-is-archived-input'); - $isArchivedCheckbox[0].checked = this.hasAttribute('data-is-archived'); - - const $exclusiveCheckbox = $('.edit-label .label-exclusive-input'); - $exclusiveCheckbox[0].checked = this.hasAttribute('data-exclusive'); - // Warn when label was previously not exclusive and used in issues - $exclusiveCheckbox.data('exclusive-warn', - $(this).data('num-issues') > 0 && - (!this.hasAttribute('data-exclusive') || !isExclusiveScopeName($nameInput.val()))); - updateExclusiveLabelEdit('.edit-label'); - - $('.edit-label .label-desc-input').val(this.getAttribute('data-description')); - - const colorInput = document.querySelector('.edit-label .js-color-picker-input input'); - colorInput.value = this.getAttribute('data-color'); - colorInput.dispatchEvent(new Event('input', {bubbles: true})); - - $('.edit-label.modal').modal({ - onApprove() { - const form = document.querySelector('.edit-label.form'); - if (!form.checkValidity()) { - form.reportValidity(); - return false; - } - $('.edit-label.form').trigger('submit'); - }, - }).modal('show'); - return false; - }); - - $('.new-label .label-name-input').on('input', () => { - updateExclusiveLabelEdit('.new-label'); - }); - $('.new-label .label-exclusive-input').on('change', () => { - updateExclusiveLabelEdit('.new-label'); - }); - $('.edit-label .label-name-input').on('input', () => { - updateExclusiveLabelEdit('.edit-label'); - }); - $('.edit-label .label-exclusive-input').on('change', () => { - updateExclusiveLabelEdit('.edit-label'); - }); -} diff --git a/web_src/js/features/repo-legacy.ts b/web_src/js/features/repo-legacy.ts index 6be3252a2b..dfea66c7ad 100644 --- a/web_src/js/features/repo-legacy.ts +++ b/web_src/js/features/repo-legacy.ts @@ -43,7 +43,7 @@ export function initRepository() { initRepoCommentFormAndSidebar(); // Labels - initCompLabelEdit('.repository.labels'); + initCompLabelEdit('.page-content.repository.labels'); initRepoMilestone(); initRepoNew();