Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit662db4a

Browse files
authored
Improve tags list page (#34898)
1 parent95964dd commit662db4a

File tree

4 files changed

+90
-76
lines changed

4 files changed

+90
-76
lines changed

‎templates/repo/tag/list.tmpl‎

Lines changed: 39 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,63 +5,57 @@
55
{{template "base/alert" .}}
66
{{template "repo/release_tag_header" .}}
77
<h4 class="ui top attached header">
8-
<div class="five wide column tw-flex tw-items-center">
9-
{{.TagCount}} {{ctx.Locale.Tr "repo.release.tags"}}
10-
</div>
8+
{{.TagCount}} {{ctx.Locale.Tr "repo.release.tags"}}
119
</h4>
1210
{{$canReadReleases := $.Permission.CanRead ctx.Consts.RepoUnitTypeReleases}}
1311
<div class="ui attached segment">
1412
<form class="ignore-dirty" method="get">
1513
{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.tag_kind") "Tooltip" (ctx.Locale.Tr "search.tag_tooltip")}}
1614
</form>
1715
</div>
18-
<div class="ui attachedtablesegment">
16+
<div class="ui attached segment tw-p-0">
1917
{{if .Releases}}
20-
<table class="ui very basic striped fixed table single line" id="tags-table">
21-
<tbody class="tag-list">
22-
{{range $idx, $release := .Releases}}
23-
<tr>
24-
<td class="tag-list-row">
25-
<h3 class="tag-list-row-title tw-mb-2">
26-
{{if $canReadReleases}}
27-
<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
28-
{{else}}
29-
<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
30-
{{end}}
31-
</h3>
32-
<div class="download tw-flex tw-items-center">
33-
{{if $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
34-
{{if .CreatedUnix}}
35-
<span class="tw-mr-2">{{svg "octicon-clock" 16 "tw-mr-1"}}{{DateUtils.TimeSince .CreatedUnix}}</span>
36-
{{end}}
18+
<div class="ui divided list" id="tags-table">
19+
{{range $idx, $release := .Releases}}
20+
<div class="item tag-list-row tw-p-4">
21+
<h3 class="tag-list-row-title tw-mb-2">
22+
{{if $canReadReleases}}
23+
<a class="tag-list-row-link" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
24+
{{else}}
25+
<a class="tag-list-row-link" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
26+
{{end}}
27+
</h3>
28+
<div class="flex-text-block muted-links tw-gap-4 tw-flex-wrap">
29+
{{if $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
30+
{{if .CreatedUnix}}
31+
<span class="flex-text-inline">{{svg "octicon-clock"}}{{DateUtils.TimeSince .CreatedUnix}}</span>
32+
{{end}}
3733

38-
<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>
34+
<a class="flex-text-inline tw-font-mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit"}}{{ShortSha .Sha1}}</a>
3935

40-
{{if not $.DisableDownloadSourceArchives}}
41-
<a class="archive-linktw-mr-2 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-1"}}ZIP</a>
42-
<a class="archive-linktw-mr-2 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-1"}}TAR.GZ</a>
43-
{{end}}
36+
{{if not $.DisableDownloadSourceArchives}}
37+
<a class="archive-linkflex-text-inline" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}ZIP</a>
38+
<a class="archive-linkflex-text-inline" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}TAR.GZ</a>
39+
{{end}}
4440

45-
{{if (and $canReadReleases $.CanCreateRelease $release.IsTag)}}
46-
<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>
47-
{{end}}
41+
{{if (and $canReadReleases $.CanCreateRelease $release.IsTag)}}
42+
<a class="flex-text-inline" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.release.new_release"}}</a>
43+
{{end}}
4844

49-
{{if (and ($.Permission.CanWrite ctx.Consts.RepoUnitTypeCode) $release.IsTag)}}
50-
<a class="ui delete-button tw-mr-2 muted" data-url="{{$.RepoLink}}/tags/delete" data-id="{{.ID}}">
51-
{{svg "octicon-trash" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.delete_tag"}}
52-
</a>
53-
{{end}}
45+
{{if (and ($.Permission.CanWrite ctx.Consts.RepoUnitTypeCode) $release.IsTag)}}
46+
<a class="flex-text-inline link-action" data-url="{{$.RepoLink}}/tags/delete?id={{.ID}}" data-modal-confirm="#confirm-delete-tag-modal">
47+
{{svg "octicon-trash"}}{{ctx.Locale.Tr "repo.release.delete_tag"}}
48+
</a>
49+
{{end}}
5450

55-
{{if and $canReadReleases (not $release.IsTag)}}
56-
<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>
57-
{{end}}
58-
{{end}}
59-
</div>
60-
</td>
61-
</tr>
62-
{{end}}
63-
</tbody>
64-
</table>
51+
{{if and $canReadReleases (not $release.IsTag)}}
52+
<a class="flex-text-inline" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.release.detail"}}</a>
53+
{{end}}
54+
{{end}}
55+
</div>
56+
</div>
57+
{{end}}
58+
</div>
6559
{{else}}
6660
{{if .NumTags}}
6761
<p class="tw-p-4">{{ctx.Locale.Tr "no_results_found"}}</p>
@@ -73,9 +67,8 @@
7367
</div>
7468

7569
{{if $.Permission.CanWrite ctx.Consts.RepoUnitTypeCode}}
76-
<divclass="ui g-modal-confirm delete modal">
70+
<divid="confirm-delete-tag-modal" class="ui small modal">
7771
<div class="header">
78-
{{svg "octicon-trash"}}
7972
{{ctx.Locale.Tr "repo.release.delete_tag"}}
8073
</div>
8174
<div class="content">

‎web_src/css/repo/release-tag.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,6 @@
9191
border-bottom: none;
9292
}
9393

94-
#tags-table .tag-list-row {
95-
padding:8px12px;
96-
}
97-
9894
#tags-table .tag-list-row-title {
9995
font-size:18px;
10096
font-weight:var(--font-weight-normal);

‎web_src/js/features/common-fetch-action.ts‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import{request}from'../modules/fetch.ts';
22
import{hideToastsAll,showErrorToast}from'../modules/toast.ts';
3-
import{addDelegatedEventListener,submitEventSubmitter}from'../utils/dom.ts';
4-
import{confirmModal}from'./comp/ConfirmModal.ts';
3+
import{addDelegatedEventListener,createElementFromHTML,submitEventSubmitter}from'../utils/dom.ts';
4+
import{confirmModal,createConfirmModal}from'./comp/ConfirmModal.ts';
55
importtype{RequestOpts}from'../types.ts';
66
import{ignoreAreYouSure}from'../vendor/jquery.are-you-sure.ts';
77

@@ -111,28 +111,44 @@ export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitt
111111
asyncfunctiononLinkActionClick(el:HTMLElement,e:Event){
112112
// A "link-action" can post AJAX request to its "data-url"
113113
// Then the browser is redirected to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading.
114-
// If the "link-action" has "data-modal-confirm" attribute, a confirm modal dialog will be shown before taking action.
114+
// If the "link-action" has "data-modal-confirm" attribute, a "confirm modal dialog" will be shown before taking action.
115+
// Attribute "data-modal-confirm" can be a modal element by "#the-modal-id", or a string content for the modal dialog.
115116
e.preventDefault();
116117
consturl=el.getAttribute('data-url');
117118
constdoRequest=async()=>{
118-
if('disabled'inel)el.disabled=true;// el could be A or BUTTON, butA doesn't have disabled attribute
119+
if('disabled'inel)el.disabled=true;// el could be A or BUTTON, but"A" doesn't havethe "disabled" attribute
119120
awaitfetchActionDoRequest(el,url,{method:el.getAttribute('data-link-action-method')||'POST'});
120121
if('disabled'inel)el.disabled=false;
121122
};
122123

123-
constmodalConfirmContent=el.getAttribute('data-modal-confirm')||
124-
el.getAttribute('data-modal-confirm-content')||'';
125-
if(!modalConfirmContent){
124+
letelModal:HTMLElement|null=null;
125+
constdataModalConfirm=el.getAttribute('data-modal-confirm')||'';
126+
if(dataModalConfirm.startsWith('#')){
127+
// eslint-disable-next-line unicorn/prefer-query-selector
128+
elModal=document.getElementById(dataModalConfirm.substring(1));
129+
if(elModal){
130+
elModal=createElementFromHTML(elModal.outerHTML);
131+
elModal.removeAttribute('id');
132+
}
133+
}
134+
if(!elModal){
135+
constmodalConfirmContent=dataModalConfirm||el.getAttribute('data-modal-confirm-content')||'';
136+
if(modalConfirmContent){
137+
constisRisky=el.classList.contains('red')||el.classList.contains('negative');
138+
elModal=createConfirmModal({
139+
header:el.getAttribute('data-modal-confirm-header')||'',
140+
content:modalConfirmContent,
141+
confirmButtonColor:isRisky ?'red' :'primary',
142+
});
143+
}
144+
}
145+
146+
if(!elModal){
126147
awaitdoRequest();
127148
return;
128149
}
129150

130-
constisRisky=el.classList.contains('red')||el.classList.contains('negative');
131-
if(awaitconfirmModal({
132-
header:el.getAttribute('data-modal-confirm-header')||'',
133-
content:modalConfirmContent,
134-
confirmButtonColor:isRisky ?'red' :'primary',
135-
})){
151+
if(awaitconfirmModal(elModal)){
136152
awaitdoRequest();
137153
}
138154
}

‎web_src/js/features/comp/ConfirmModal.ts‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,29 @@ import {fomanticQuery} from '../../modules/fomantic/base.ts';
55

66
const{i18n}=window.config;
77

8-
exportfunctionconfirmModal({header='', content='', confirmButtonColor='primary'}={}):Promise<boolean>{
8+
typeConfirmModalOptions={
9+
header?:string;
10+
content?:string;
11+
confirmButtonColor?:'primary'|'red'|'green'|'blue';
12+
}
13+
14+
exportfunctioncreateConfirmModal({header='', content='', confirmButtonColor='primary'}:ConfirmModalOptions={}):HTMLElement{
15+
constheaderHtml=header ?`<div class="header">${htmlEscape(header)}</div>` :'';
16+
returncreateElementFromHTML(`
17+
<div class="ui g-modal-confirm modal">
18+
${headerHtml}
19+
<div class="content">${htmlEscape(content)}</div>
20+
<div class="actions">
21+
<button class="ui cancel button">${svg('octicon-x')}${htmlEscape(i18n.modal_cancel)}</button>
22+
<button class="ui${confirmButtonColor} ok button">${svg('octicon-check')}${htmlEscape(i18n.modal_confirm)}</button>
23+
</div>
24+
</div>
25+
`);
26+
}
27+
28+
exportfunctionconfirmModal(modal:HTMLElement|ConfirmModalOptions):Promise<boolean>{
29+
if(!(modalinstanceofHTMLElement))modal=createConfirmModal(modal);
930
returnnewPromise((resolve)=>{
10-
constheaderHtml=header ?`<div class="header">${htmlEscape(header)}</div>` :'';
11-
constmodal=createElementFromHTML(`
12-
<div class="ui g-modal-confirm modal">
13-
${headerHtml}
14-
<div class="content">${htmlEscape(content)}</div>
15-
<div class="actions">
16-
<button class="ui cancel button">${svg('octicon-x')}${htmlEscape(i18n.modal_cancel)}</button>
17-
<button class="ui${confirmButtonColor} ok button">${svg('octicon-check')}${htmlEscape(i18n.modal_confirm)}</button>
18-
</div>
19-
</div>
20-
`);
21-
document.body.append(modal);
2231
const$modal=fomanticQuery(modal);
2332
$modal.modal({
2433
onApprove(){

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp