aboutsummaryrefslogtreecommitdiffstats
path: root/web_src
diff options
context:
space:
mode:
authorwxiaoguang <wxiaoguang@gmail.com>2023-06-13 20:10:10 +0800
committerGitHub <noreply@github.com>2023-06-13 12:10:10 +0000
commit6bbccdd177bcbac600e3019062c96339a121851a (patch)
tree92d53bbdd976b6b8657b10ccda910a08d094dc81 /web_src
parenta51b115b0ad755562c71f6a382326c59868dfb96 (diff)
downloadgitea-6bbccdd177bcbac600e3019062c96339a121851a.tar.gz
gitea-6bbccdd177bcbac600e3019062c96339a121851a.zip
Improve AJAX link and modal confirm dialog (#25210)
Clarify the "link-action" behavior: > // A "link-action" can post AJAX request to its "data-url" > // Then the browser is redirect to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading. And enhance the "link-action" to support showing a modal dialog for confirm. A similar general approach could also help PRs like https://github.com/go-gitea/gitea/pull/22344#discussion_r1062883436 > // If the "link-action" has "data-modal-confirm(-html)" attribute, a confirm modal dialog will be shown before taking action. And a lot of duplicate code can be removed now. A good framework design can help to avoid code copying&pasting. --------- Co-authored-by: silverwind <me@silverwind.io>
Diffstat (limited to 'web_src')
-rw-r--r--web_src/css/org.css23
-rw-r--r--web_src/js/features/common-global.js134
2 files changed, 57 insertions, 100 deletions
diff --git a/web_src/css/org.css b/web_src/css/org.css
index 7b73d8e572..400f4fbbd9 100644
--- a/web_src/css/org.css
+++ b/web_src/css/org.css
@@ -205,29 +205,6 @@
margin: 0;
}
-.organization.teams #add-repo-form input,
-.organization.teams #repo-multiple-form input,
-.organization.teams #add-member-form input {
- margin-left: 0;
-}
-
-.organization.teams #add-repo-form .ui.button,
-.organization.teams #repo-multiple-form .ui.button,
-.organization.teams #add-member-form .ui.button {
- margin-left: 5px;
- margin-top: -3px;
-}
-
-.organization.teams #repo-top-segment {
- height: 60px;
-}
-
-@media (max-width: 767.98px) {
- .organization.teams #repo-top-segment {
- height: 100px;
- }
-}
-
.org-team-navbar .active.item {
background: var(--color-box-body) !important;
}
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 46a80beb51..b1d3fa22d8 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -8,7 +8,7 @@ import {svg} from '../svg.js';
import {hideElem, showElem, toggleElem} from '../utils/dom.js';
import {htmlEscape} from 'escape-goat';
-const {appUrl, csrfToken} = window.config;
+const {appUrl, csrfToken, i18n} = window.config;
export function initGlobalFormDirtyLeaveConfirm() {
// Warn users that try to leave a page after entering data into a form.
@@ -172,6 +172,62 @@ export function initGlobalDropzone() {
}
}
+function linkAction(e) {
+ e.preventDefault();
+
+ // A "link-action" can post AJAX request to its "data-url"
+ // Then the browser is redirect to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading.
+ // If the "link-action" has "data-modal-confirm(-html)" attribute, a confirm modal dialog will be shown before taking action.
+
+ const $this = $(e.target);
+ const redirect = $this.attr('data-redirect');
+
+ const request = () => {
+ $this.prop('disabled', true);
+ $.post($this.attr('data-url'), {
+ _csrf: csrfToken
+ }).done((data) => {
+ if (data && data.redirect) {
+ window.location.href = data.redirect;
+ } else if (redirect) {
+ window.location.href = redirect;
+ } else {
+ window.location.reload();
+ }
+ }).always(() => {
+ $this.prop('disabled', false);
+ });
+ };
+
+ const modalConfirmHtml = htmlEscape($this.attr('data-modal-confirm') || '');
+ if (!modalConfirmHtml) {
+ request();
+ return;
+ }
+
+ const okButtonColor = $this.hasClass('red') || $this.hasClass('yellow') || $this.hasClass('orange') || $this.hasClass('negative') ? 'orange' : 'green';
+
+ const $modal = $(`
+<div class="ui g-modal-confirm modal">
+ <div class="content">${modalConfirmHtml}</div>
+ <div class="actions">
+ <button class="ui basic cancel button">${svg('octicon-x')} ${i18n.modal_cancel}</button>
+ <button class="ui ${okButtonColor} ok button">${svg('octicon-check')} ${i18n.modal_confirm}</button>
+ </div>
+</div>
+`);
+
+ $modal.appendTo(document.body);
+ $modal.modal({
+ onApprove() {
+ request();
+ },
+ onHidden() {
+ $modal.remove();
+ },
+ }).modal('show');
+}
+
export function initGlobalLinkActions() {
function showDeletePopup(e) {
e.preventDefault();
@@ -217,75 +273,9 @@ export function initGlobalLinkActions() {
}).modal('show');
}
- function showAddAllPopup(e) {
- e.preventDefault();
- const $this = $(this);
- let filter = '';
- if ($this.attr('data-modal-id')) {
- filter += `#${$this.attr('data-modal-id')}`;
- }
-
- const dialog = $(`.addall.modal${filter}`);
- dialog.find('.name').text($this.data('name'));
-
- dialog.modal({
- closable: false,
- onApprove() {
- if ($this.data('type') === 'form') {
- $($this.data('form')).trigger('submit');
- return;
- }
-
- $.post($this.data('url'), {
- _csrf: csrfToken,
- id: $this.data('id')
- }).done((data) => {
- window.location.href = data.redirect;
- });
- }
- }).modal('show');
- }
-
- function linkAction(e) {
- e.preventDefault();
- const $this = $(this);
- const redirect = $this.data('redirect');
- $this.prop('disabled', true);
- $.post($this.data('url'), {
- _csrf: csrfToken
- }).done((data) => {
- if (data.redirect) {
- window.location.href = data.redirect;
- } else if (redirect) {
- window.location.href = redirect;
- } else {
- window.location.reload();
- }
- }).always(() => {
- $this.prop('disabled', false);
- });
- }
-
// Helpers.
$('.delete-button').on('click', showDeletePopup);
$('.link-action').on('click', linkAction);
-
- // FIXME: this function is only used once, and not common, not well designed. should be refactored later
- $('.add-all-button').on('click', showAddAllPopup);
-
- // FIXME: this is only used once, and should be replace with `link-action` instead
- $('.undo-button').on('click', function () {
- const $this = $(this);
- $this.prop('disabled', true);
- $.post($this.data('url'), {
- _csrf: csrfToken,
- id: $this.data('id')
- }).done((data) => {
- window.location.href = data.redirect;
- }).always(() => {
- $this.prop('disabled', false);
- });
- });
}
export function initGlobalButtons() {
@@ -346,16 +336,6 @@ export function initGlobalButtons() {
initCompColorPicker();
}
});
-
- $('.delete-post.button').on('click', function (e) {
- e.preventDefault();
- const $this = $(this);
- $.post($this.attr('data-request-url'), {
- _csrf: csrfToken
- }).done(() => {
- window.location.href = $this.attr('data-done-url');
- });
- });
}
/**