GitHub
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Improve tags list page (#34898)

pull/34914/head
wxiaoguang 6 months ago committed by GitHub
parent
95964dd2ca
commit
662db4a69c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 90 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 85
      templates/repo/tag/list.tmpl
  2. 4
      web_src/css/repo/release-tag.css
  3. 42
      web_src/js/features/common-fetch-action.ts
  4. 35
      web_src/js/features/comp/ConfirmModal.ts

85
templates/repo/tag/list.tmpl
Unescape View File

@ -5,9 +5,7 @@ @@ -5,9 +5,7 @@
{{template "base/alert" .}}
{{template "repo/release_tag_header" .}}
<h4 class="ui top attached header">
<div class="five wide column tw-flex tw-items-center">
{{.TagCount}} {{ctx.Locale.Tr "repo.release.tags"}}
</div>
{{.TagCount}} {{ctx.Locale.Tr "repo.release.tags"}}
</h4>
{{$canReadReleases := $.Permission.CanRead ctx.Consts.RepoUnitTypeReleases}}
<div class="ui attached segment">
@ -15,53 +13,49 @@ @@ -15,53 +13,49 @@
{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.tag_kind") "Tooltip" (ctx.Locale.Tr "search.tag_tooltip")}}
</form>
</div>
<div class="ui attached table segment">
<div class="ui attached segment tw-p-0">
{{if .Releases}}
<table class="ui very basic striped fixed table single line" id="tags-table">
<tbody class="tag-list">
{{range $idx, $release := .Releases}}
<tr>
<td class="tag-list-row">
<h3 class="tag-list-row-title tw-mb-2">
{{if $canReadReleases}}
<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
{{else}}
<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
{{end}}
</h3>
<div class="download tw-flex tw-items-center">
{{if $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
{{if .CreatedUnix}}
<span class="tw-mr-2">{{svg "octicon-clock" 16 "tw-mr-1"}}{{DateUtils.TimeSince .CreatedUnix}}</span>
{{end}}
<div class="ui divided list" id="tags-table">
{{range $idx, $release := .Releases}}
<div class="item tag-list-row tw-p-4">
<h3 class="tag-list-row-title tw-mb-2">
{{if $canReadReleases}}
<a class="tag-list-row-link" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
{{else}}
<a class="tag-list-row-link" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
{{end}}
</h3>
<div class="flex-text-block muted-links tw-gap-4 tw-flex-wrap">
{{if $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
{{if .CreatedUnix}}
<span class="flex-text-inline">{{svg "octicon-clock"}}{{DateUtils.TimeSince .CreatedUnix}}</span>
{{end}}
<a class="tw-mr-2 tw-font-mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha .Sha1}}</a>
<a class="flex-text-inline tw-font-mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit"}}{{ShortSha .Sha1}}</a>
{{if not $.DisableDownloadSourceArchives}}
<a class="archive-link tw-mr-2 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-1"}}ZIP</a>
<a class="archive-link tw-mr-2 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-1"}}TAR.GZ</a>
{{end}}
{{if not $.DisableDownloadSourceArchives}}
<a class="archive-link flex-text-inline" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}ZIP</a>
<a class="archive-link flex-text-inline" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}TAR.GZ</a>
{{end}}
{{if (and $canReadReleases $.CanCreateRelease $release.IsTag)}}
<a class="tw-mr-2 muted" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.new_release"}}</a>
{{end}}
{{if (and $canReadReleases $.CanCreateRelease $release.IsTag)}}
<a class="flex-text-inline" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.release.new_release"}}</a>
{{end}}
{{if (and ($.Permission.CanWrite ctx.Consts.RepoUnitTypeCode) $release.IsTag)}}
<a class="ui delete-button tw-mr-2 muted" data-url="{{$.RepoLink}}/tags/delete" data-id="{{.ID}}">
{{svg "octicon-trash" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.delete_tag"}}
</a>
{{end}}
{{if (and ($.Permission.CanWrite ctx.Consts.RepoUnitTypeCode) $release.IsTag)}}
<a class="flex-text-inline link-action" data-url="{{$.RepoLink}}/tags/delete?id={{.ID}}" data-modal-confirm="#confirm-delete-tag-modal">
{{svg "octicon-trash"}}{{ctx.Locale.Tr "repo.release.delete_tag"}}
</a>
{{end}}
{{if and $canReadReleases (not $release.IsTag)}}
<a class="tw-mr-2 muted" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.detail"}}</a>
{{end}}
{{end}}
</div>
</td>
</tr>
{{end}}
</tbody>
</table>
{{if and $canReadReleases (not $release.IsTag)}}
<a class="flex-text-inline" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.release.detail"}}</a>
{{end}}
{{end}}
</div>
</div>
{{end}}
</div>
{{else}}
{{if .NumTags}}
<p class="tw-p-4">{{ctx.Locale.Tr "no_results_found"}}</p>
@ -73,9 +67,8 @@ @@ -73,9 +67,8 @@
</div>
{{if $.Permission.CanWrite ctx.Consts.RepoUnitTypeCode}}
<div class="ui g-modal-confirm delete modal">
<div id="confirm-delete-tag-modal" class="ui small modal">
<div class="header">
{{svg "octicon-trash"}}
{{ctx.Locale.Tr "repo.release.delete_tag"}}
</div>
<div class="content">

4
web_src/css/repo/release-tag.css
Unescape View File

@ -91,10 +91,6 @@ @@ -91,10 +91,6 @@
border-bottom: none;
}
#tags-table .tag-list-row {
padding: 8px 12px;
}
#tags-table .tag-list-row-title {
font-size: 18px;
font-weight: var(--font-weight-normal);

42
web_src/js/features/common-fetch-action.ts
Unescape View File

@ -1,7 +1,7 @@ @@ -1,7 +1,7 @@
import {request} from '../modules/fetch.ts';
import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
import {addDelegatedEventListener, submitEventSubmitter} from '../utils/dom.ts';
import {confirmModal} from './comp/ConfirmModal.ts';
import {addDelegatedEventListener, createElementFromHTML, submitEventSubmitter} from '../utils/dom.ts';
import {confirmModal, createConfirmModal} from './comp/ConfirmModal.ts';
import type {RequestOpts} from '../types.ts';
import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
@ -111,28 +111,44 @@ export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitt @@ -111,28 +111,44 @@ export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitt
async function onLinkActionClick(el: HTMLElement, e: Event) {
// A "link-action" can post AJAX request to its "data-url"
// Then the browser is redirected to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading.
// If the "link-action" has "data-modal-confirm" attribute, a confirm modal dialog will be shown before taking action.
// If the "link-action" has "data-modal-confirm" attribute, a "confirm modal dialog" will be shown before taking action.
// Attribute "data-modal-confirm" can be a modal element by "#the-modal-id", or a string content for the modal dialog.
e.preventDefault();
const url = el.getAttribute('data-url');
const doRequest = async () => {
if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but A doesn't have disabled attribute
if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but "A" doesn't have the "disabled" attribute
await fetchActionDoRequest(el, url, {method: el.getAttribute('data-link-action-method') || 'POST'});
if ('disabled' in el) el.disabled = false;
};
const modalConfirmContent = el.getAttribute('data-modal-confirm') ||
el.getAttribute('data-modal-confirm-content') || '';
if (!modalConfirmContent) {
let elModal: HTMLElement | null = null;
const dataModalConfirm = el.getAttribute('data-modal-confirm') || '';
if (dataModalConfirm.startsWith('#')) {
// eslint-disable-next-line unicorn/prefer-query-selector
elModal = document.getElementById(dataModalConfirm.substring(1));
if (elModal) {
elModal = createElementFromHTML(elModal.outerHTML);
elModal.removeAttribute('id');
}
}
if (!elModal) {
const modalConfirmContent = dataModalConfirm || el.getAttribute('data-modal-confirm-content') || '';
if (modalConfirmContent) {
const isRisky = el.classList.contains('red') || el.classList.contains('negative');
elModal = createConfirmModal({
header: el.getAttribute('data-modal-confirm-header') || '',
content: modalConfirmContent,
confirmButtonColor: isRisky ? 'red' : 'primary',
});
}
}
if (!elModal) {
await doRequest();
return;
}
const isRisky = el.classList.contains('red') || el.classList.contains('negative');
if (await confirmModal({
header: el.getAttribute('data-modal-confirm-header') || '',
content: modalConfirmContent,
confirmButtonColor: isRisky ? 'red' : 'primary',
})) {
if (await confirmModal(elModal)) {
await doRequest();
}
}

35
web_src/js/features/comp/ConfirmModal.ts
Unescape View File

@ -5,20 +5,29 @@ import {fomanticQuery} from '../../modules/fomantic/base.ts'; @@ -5,20 +5,29 @@ import {fomanticQuery} from '../../modules/fomantic/base.ts';
const {i18n} = window.config;
export function confirmModal({header = '', content = '', confirmButtonColor = 'primary'} = {}): Promise<boolean> {
type ConfirmModalOptions = {
header?: string;
content?: string;
confirmButtonColor?: 'primary' | 'red' | 'green' | 'blue';
}
export function createConfirmModal({header = '', content = '', confirmButtonColor = 'primary'}:ConfirmModalOptions = {}): HTMLElement {
const headerHtml = header ? `<div class="header">${htmlEscape(header)}</div>` : '';
return createElementFromHTML(`
<div class="ui g-modal-confirm modal">
${headerHtml}
<div class="content">${htmlEscape(content)}</div>
<div class="actions">
<button class="ui cancel button">${svg('octicon-x')} ${htmlEscape(i18n.modal_cancel)}</button>
<button class="ui ${confirmButtonColor} ok button">${svg('octicon-check')} ${htmlEscape(i18n.modal_confirm)}</button>
</div>
</div>
`);
}
export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<boolean> {
if (!(modal instanceof HTMLElement)) modal = createConfirmModal(modal);
return new Promise((resolve) => {
const headerHtml = header ? `<div class="header">${htmlEscape(header)}</div>` : '';
const modal = createElementFromHTML(`
<div class="ui g-modal-confirm modal">
${headerHtml}
<div class="content">${htmlEscape(content)}</div>
<div class="actions">
<button class="ui cancel button">${svg('octicon-x')} ${htmlEscape(i18n.modal_cancel)}</button>
<button class="ui ${confirmButtonColor} ok button">${svg('octicon-check')} ${htmlEscape(i18n.modal_confirm)}</button>
</div>
</div>
`);
document.body.append(modal);
const $modal = fomanticQuery(modal);
$modal.modal({
onApprove() {

Write Preview
Loading…
Cancel
Save