peezy-tech/jojo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-12 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: convert create/rename branch and create tag to native dialog (#9760)

Browse source 
Followup to https://codeberg.org/forgejo/forgejo/pulls/8859, https://codeberg.org/forgejo/forgejo/pulls/9636.

Convert the create branch and rename branch modals in the branch list to native dialogs and convert the create branch and create tag in the commit view to native dialogs.

The dialogs in the commit view have been simplified and no longer uses javascript to construct the data in the dialog (thus would be eligible for nojs modals).

The dialogs have footer styled actions.

The rename branch modal now has a 'branch name' label to indicate the field is required.

E2E testing is added.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9760
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
This commit is contained in:
Gusted 2025-10-30 21:06:14 +01:00 • committed by Gusted
parent aed579b9ee
commit 2a3d852e46
9 changed files with 279 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web_src/css/modules/dialog.css
View file

@ -69,6 +69,10 @@ dialog .content {
color: var(--color-text);
}
dialog .content:not(.tw-hidden) + form > .content {
padding-top: 0;
}
dialog .actions {
background: var(--color-secondary-bg);
border-color: var(--color-secondary);

42
web_src/js/features/repo-branch.js
View file

@ -1,42 +0,0 @@
import $ from 'jquery';
import {toggleElem} from '../utils/dom.js';
export function initRepoBranchButton() {
initRepoCreateBranchButton();
initRepoRenameBranchButton();
}
function initRepoCreateBranchButton() {
// 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code)
for (const el of document.querySelectorAll('.show-create-branch-modal')) {
el.addEventListener('click', () => {
const modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form';
const modalForm = document.querySelector(modalFormName);
if (!modalForm) return;
modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`;
const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span';
document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from');
$(el.getAttribute('data-modal')).modal('show');
});
}
}
function initRepoRenameBranchButton() {
for (const el of document.querySelectorAll('.show-rename-branch-modal')) {
el.addEventListener('click', () => {
const target = el.getAttribute('data-modal');
const modal = document.querySelector(target);
const oldBranchName = el.getAttribute('data-old-branch-name');
modal.querySelector('input[name=from]').value = oldBranchName;
// display the warning that the branch which is chosen is the default branch
const warn = modal.querySelector('.default-branch-warning');
toggleElem(warn, el.getAttribute('data-is-default-branch') === 'true');
const text = modal.querySelector('[data-rename-branch-to]');
text.textContent = text.getAttribute('data-rename-branch-to').replace('%s', oldBranchName);
});
}
}

35
web_src/js/features/repo-branch.ts Normal file
View file

@ -0,0 +1,35 @@
// Copyright 2025 The Forgejo Authors. All rights reserved.
// SPDX-License-Identifier: GPL-3.0-or-later
import {toggleElem} from '../utils/dom.js';
import {showModal} from '../modules/modal.ts';
export function initRepoBranchButton() {
const createBranchModal = document.querySelector('#create-branch-modal');
for (const el of document.querySelectorAll('.show-create-branch-modal')) {
el.addEventListener('click', () => {
const createBranchModalForm = createBranchModal.querySelector('form');
const branchFromName = el.getAttribute('data-branch-from');
createBranchModalForm.action = createBranchModalForm.getAttribute('data-base-action') + encodeURIComponent(branchFromName);
createBranchModal.querySelector('#modal-create-branch-from-span').textContent = branchFromName;
showModal('create-branch-modal', undefined);
});
}
const renameBranchModel = document.querySelector('#rename-branch-modal');
for (const el of document.querySelectorAll('.show-rename-branch-modal')) {
el.addEventListener('click', () => {
const oldBranchName = el.getAttribute('data-old-branch-name');
(renameBranchModel.querySelector('input[name="from"]') as HTMLInputElement).value = oldBranchName;
const branchToEl = renameBranchModel.querySelector('.label-branch-from');
branchToEl.textContent = branchToEl.getAttribute('data-locale').replace('%s', oldBranchName);
toggleElem(renameBranchModel.querySelector('.default-branch-warning'), el.getAttribute('data-is-default-branch') === 'true');
showModal('rename-branch-modal', undefined);
});
}
}

2
web_src/js/index.js
View file

@ -66,7 +66,7 @@ import {initRepoEditor} from './features/repo-editor.js';
import {initCompSearchUserBox} from './features/comp/SearchUserBox.js';
import {initInstall} from './features/install.js';
import {initCompWebHookEditor} from './features/comp/WebHookEditor.js';
import {initRepoBranchButton} from './features/repo-branch.js';
import {initRepoBranchButton} from './features/repo-branch.ts';
import {initCommonOrganization} from './features/common-organization.js';
import {initRepoWikiForm} from './features/repo-wiki.js';
import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';