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

Replace more `gt-` with `tw-`, update frontend docs (#29595) 

Tested a few things, all working fine. Not sure if the chinese machine
translation is good.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind 2024-03-05 06:29:32 +01:00 committed by GitHub
parent 3e84bfdf41
commit 7e8c1c5ba1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 48 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/content/contributing/guidelines-frontend.en-us.md
View File

@ -47,7 +47,7 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h
9. Avoid unnecessary `!important` in CSS, add comments to explain why it's necessary if it can't be avoided. 9. Avoid unnecessary `!important` in CSS, add comments to explain why it's necessary if it can't be avoided.
10. Avoid mixing different events in one event listener, prefer to use individual event listeners for every event. 10. Avoid mixing different events in one event listener, prefer to use individual event listeners for every event.
11. Custom event names are recommended to use `ce-` prefix. 11. Custom event names are recommended to use `ce-` prefix.
12. Gitea's tailwind-style CSS classes use `gt-` prefix (`gt-relative`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`). 12. Prefer using Tailwind CSS which is available via `tw-` prefix, e.g. `tw-relative`. Gitea's helper CSS classes use `gt-` prefix (`gt-df`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`).
13. Avoid inline scripts & styles as much as possible, it's recommended to put JS code into JS files and use CSS classes. If inline scripts & styles are unavoidable, explain the reason why it can't be avoided. 13. Avoid inline scripts & styles as much as possible, it's recommended to put JS code into JS files and use CSS classes. If inline scripts & styles are unavoidable, explain the reason why it can't be avoided.
### Accessibility / ARIA ### Accessibility / ARIA

2
docs/content/contributing/guidelines-frontend.zh-cn.md
View File

@ -47,7 +47,7 @@ HTML 页面由[Go HTML Template](https://pkg.go.dev/html/template)渲染。
9. 避免在 CSS 中使用不必要的`!important`，如果无法避免，添加注释解释为什么需要它。 9. 避免在 CSS 中使用不必要的`!important`，如果无法避免，添加注释解释为什么需要它。
10. 避免在一个事件监听器中混合不同的事件，优先为每个事件使用独立的事件监听器。 10. 避免在一个事件监听器中混合不同的事件，优先为每个事件使用独立的事件监听器。
11. 推荐使用自定义事件名称前缀`ce-`。 11. 推荐使用自定义事件名称前缀`ce-`。
12. Gitea 的 tailwind-style CSS 类使用`gt-`前缀（`gt-relative`），而 Gitea 自身的私有框架级 CSS 类使用`g-`前缀（`g-modal-confirm`）。 12. 建议使用 Tailwind CSS，它可以通过 `tw-` 前缀获得，例如 `tw-relative`. Gitea 自身的助手类 CSS 使用 `gt-` 前缀（`gt-df`），Gitea 自身的私有框架级 CSS 类使用 `g-` 前缀（`g-modal-confirm`）。
13. 尽量避免内联脚本和样式，建议将JS代码放入JS文件中并使用CSS类。如果内联脚本和样式不可避免，请解释无法避免的原因。 13. 尽量避免内联脚本和样式，建议将JS代码放入JS文件中并使用CSS类。如果内联脚本和样式不可避免，请解释无法避免的原因。
### 可访问性 / ARIA ### 可访问性 / ARIA

4
templates/admin/emails/list.tmpl
View File

@ -47,8 +47,8 @@
{{range .Emails}} {{range .Emails}}
<tr> <tr>
<td><a href="{{AppSubUrl}}/{{.Name | PathEscape}}">{{.Name}}</a></td> <td><a href="{{AppSubUrl}}/{{.Name | PathEscape}}">{{.Name}}</a></td>
<td class="gt-ellipsis gt-max-width-12rem">{{.FullName}}</td> <td class="gt-ellipsis tw-max-w-48">{{.FullName}}</td>
<td class="gt-ellipsis gt-max-width-12rem">{{.Email}}</td> <td class="gt-ellipsis tw-max-w-48">{{.Email}}</td>
<td>{{if .IsPrimary}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td> <td>{{if .IsPrimary}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
<td> <td>
{{if .CanChange}} {{if .CanChange}}

4
templates/admin/packages/list.tmpl
View File

@ -62,8 +62,8 @@
{{end}} {{end}}
</td> </td>
<td>{{.Package.Type.Name}}</td> <td>{{.Package.Type.Name}}</td>
<td class="gt-ellipsis gt-max-width-12rem">{{.Package.Name}}</td> <td class="gt-ellipsis tw-max-w-48">{{.Package.Name}}</td>
<td class="gt-ellipsis gt-max-width-12rem"><a href="{{.VersionWebLink}}">{{.Version.Version}}</a></td> <td class="gt-ellipsis tw-max-w-48"><a href="{{.VersionWebLink}}">{{.Version.Version}}</a></td>
<td><a href="{{.Creator.HomeLink}}">{{.Creator.Name}}</a></td> <td><a href="{{.Creator.HomeLink}}">{{.Creator.Name}}</a></td>
<td> <td>
{{if .Repository}} {{if .Repository}}

2
templates/admin/user/list.tmpl
View File

@ -96,7 +96,7 @@
<span class="ui mini label">{{ctx.Locale.Tr "admin.users.remote"}}</span> <span class="ui mini label">{{ctx.Locale.Tr "admin.users.remote"}}</span>
{{end}} {{end}}
</td> </td>
<td class="gt-ellipsis gt-max-width-12rem">{{.Email}}</td> <td class="gt-ellipsis tw-max-w-48">{{.Email}}</td>
<td>{{if .IsActive}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td> <td>{{if .IsActive}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
<td>{{if .IsRestricted}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td> <td>{{if .IsRestricted}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
<td>{{if index $.UsersTwoFaStatus .ID}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td> <td>{{if index $.UsersTwoFaStatus .ID}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>

6
templates/base/head_navbar.tmpl
View File

@ -14,7 +14,7 @@
<div class="ui secondary menu item navbar-mobile-right"> <div class="ui secondary menu item navbar-mobile-right">
{{if .IsSigned}} {{if .IsSigned}}
<a id="mobile-notifications-icon" class="item tw-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}"> <a id="mobile-notifications-icon" class="item tw-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
<div class="gt-relative"> <div class="tw-relative">
{{svg "octicon-bell"}} {{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span> <span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div> </div>
@ -76,7 +76,7 @@
{{else if .IsSigned}} {{else if .IsSigned}}
{{if EnableTimetracking}} {{if EnableTimetracking}}
<a class="active-stopwatch-trigger item gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}"> <a class="active-stopwatch-trigger item gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}">
<div class="gt-relative"> <div class="tw-relative">
{{svg "octicon-stopwatch"}} {{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span> <span class="header-stopwatch-dot"></span>
</div> </div>
@ -112,7 +112,7 @@
{{end}} {{end}}
<a class="item not-mobile gt-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}"> <a class="item not-mobile gt-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
<div class="gt-relative"> <div class="tw-relative">
{{svg "octicon-bell"}} {{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span> <span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div> </div>

2
templates/base/paginate.tmpl
View File

@ -17,7 +17,7 @@
{{if eq .Num -1}} {{if eq .Num -1}}
<a class="disabled item">...</a> <a class="disabled item">...</a>
{{else}} {{else}}
<a class="{{if .IsCurrent}}active {{end}}item gt-content-center" {{if not .IsCurrent}}href="{{$paginationLink}}?page={{.Num}}{{if $paginationParams}}&{{$paginationParams}}{{end}}"{{end}}>{{.Num}}</a> <a class="{{if .IsCurrent}}active {{end}}item tw-content-center" {{if not .IsCurrent}}href="{{$paginationLink}}?page={{.Num}}{{if $paginationParams}}&{{$paginationParams}}{{end}}"{{end}}>{{.Num}}</a>
{{end}} {{end}}
{{end}} {{end}}
<a class="{{if not .HasNext}}disabled{{end}} item navigation" {{if .HasNext}}href="{{$paginationLink}}?page={{.Next}}{{if $paginationParams}}&{{$paginationParams}}{{end}}"{{end}}> <a class="{{if not .HasNext}}disabled{{end}} item navigation" {{if .HasNext}}href="{{$paginationLink}}?page={{.Next}}{{if $paginationParams}}&{{$paginationParams}}{{end}}"{{end}}>

2
templates/repo/commit_page.tmpl
View File

@ -17,7 +17,7 @@
{{$class = (print $class " isWarning")}} {{$class = (print $class " isWarning")}}
{{end}} {{end}}
{{end}} {{end}}
<div class="ui top attached header clearing segment gt-relative commit-header {{$class}}"> <div class="ui top attached header clearing segment tw-relative commit-header {{$class}}">
<div class="gt-df gt-mb-4 gt-fw"> <div class="gt-df gt-mb-4 gt-fw">
<h3 class="gt-mb-0 gt-f1"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage $.Context .Commit.Message ($.Repository.ComposeMetas ctx)}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}</h3> <h3 class="gt-mb-0 gt-f1"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage $.Context .Commit.Message ($.Repository.ComposeMetas ctx)}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}</h3>
{{if not $.PageIsWiki}} {{if not $.PageIsWiki}}

2
templates/repo/diff/box.tmpl
View File

@ -112,7 +112,7 @@
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}> <div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw"> <h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw">
<div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw"> <div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw">
<button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} gt-invisible{{end}}"> <button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} tw-invisible{{end}}">
{{if $file.ShouldBeHidden}} {{if $file.ShouldBeHidden}}
{{svg "octicon-chevron-right" 18}} {{svg "octicon-chevron-right" 18}}
{{else}} {{else}}

4
templates/repo/diff/options_dropdown.tmpl
View File

@ -17,13 +17,13 @@
{{if .Issue.Index}} {{if .Issue.Index}}
{{if .ShowOutdatedComments}} {{if .ShowOutdatedComments}}
<a class="item" href="?style={{if $.IsSplitStyle}}split{{else}}unified{{end}}&whitespace={{$.WhitespaceBehavior}}&show-outdated=false"> <a class="item" href="?style={{if $.IsSplitStyle}}split{{else}}unified{{end}}&whitespace={{$.WhitespaceBehavior}}&show-outdated=false">
<label class="gt-pointer-events-none"> <label class="tw-pointer-events-none">
{{ctx.Locale.Tr "repo.issues.review.option.hide_outdated_comments"}} {{ctx.Locale.Tr "repo.issues.review.option.hide_outdated_comments"}}
</label> </label>
</a> </a>
{{else}} {{else}}
<a class="item" href="?style={{if $.IsSplitStyle}}split{{else}}unified{{end}}&whitespace={{$.WhitespaceBehavior}}&show-outdated=true"> <a class="item" href="?style={{if $.IsSplitStyle}}split{{else}}unified{{end}}&whitespace={{$.WhitespaceBehavior}}&show-outdated=true">
<label class="gt-pointer-events-none"> <label class="tw-pointer-events-none">
{{ctx.Locale.Tr "repo.issues.review.option.show_outdated_comments"}} {{ctx.Locale.Tr "repo.issues.review.option.show_outdated_comments"}}
</label> </label>
</a> </a>

8
templates/repo/diff/section_split.tmpl
View File

@ -47,7 +47,7 @@
<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td> <td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
<td class="lines-code lines-code-old del-code">{{/* <td class="lines-code lines-code-old del-code">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* */}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
@ -62,7 +62,7 @@
<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-new add-code">{{/* <td class="lines-code lines-code-new add-code">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} gt-invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/* */}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
@ -79,7 +79,7 @@
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-old">{{/* <td class="lines-code lines-code-old">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* */}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
@ -94,7 +94,7 @@
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-new">{{/* <td class="lines-code lines-code-new">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/* */}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*

2
templates/repo/diff/section_unified.tmpl
View File

@ -52,7 +52,7 @@
{{else}} {{else}}
<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/* <td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/* */}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*

16
templates/repo/diff/whitespace_dropdown.tmpl
View File

@ -2,26 +2,26 @@
{{svg "gitea-whitespace"}} {{svg "gitea-whitespace"}}
<div class="menu"> <div class="menu">
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all&show-outdated={{$.ShowOutdatedComments}}"> <a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all&show-outdated={{$.ShowOutdatedComments}}">
<label class="gt-pointer-events-none"> <label class="tw-pointer-events-none">
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}> <input class="gt-mr-3 tw-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
{{ctx.Locale.Tr "repo.diff.whitespace_show_everything"}} {{ctx.Locale.Tr "repo.diff.whitespace_show_everything"}}
</label> </label>
</a> </a>
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-all&show-outdated={{$.ShowOutdatedComments}}"> <a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-all&show-outdated={{$.ShowOutdatedComments}}">
<label class="gt-pointer-events-none"> <label class="tw-pointer-events-none">
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}> <input class="gt-mr-3 tw-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
{{ctx.Locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}} {{ctx.Locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}}
</label> </label>
</a> </a>
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change&show-outdated={{$.ShowOutdatedComments}}"> <a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change&show-outdated={{$.ShowOutdatedComments}}">
<label class="gt-pointer-events-none"> <label class="tw-pointer-events-none">
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}> <input class="gt-mr-3 tw-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
{{ctx.Locale.Tr "repo.diff.whitespace_ignore_amount_changes"}} {{ctx.Locale.Tr "repo.diff.whitespace_ignore_amount_changes"}}
</label> </label>
</a> </a>
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-eol&show-outdated={{$.ShowOutdatedComments}}"> <a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-eol&show-outdated={{$.ShowOutdatedComments}}">
<label class="gt-pointer-events-none"> <label class="tw-pointer-events-none">
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}> <input class="gt-mr-3 tw-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
{{ctx.Locale.Tr "repo.diff.whitespace_ignore_at_eol"}} {{ctx.Locale.Tr "repo.diff.whitespace_ignore_at_eol"}}
</label> </label>
</a> </a>

2
templates/repo/issue/card.tmpl
View File

@ -7,7 +7,7 @@
</div> </div>
{{end}} {{end}}
<div class="content gt-p-0 tw-w-full"> <div class="content gt-p-0 tw-w-full">
<div class="gt-df gt-items-start"> <div class="gt-df tw-items-start">
<div class="issue-card-icon"> <div class="issue-card-icon">
{{template "shared/issueicon" .}} {{template "shared/issueicon" .}}
</div> </div>

4
templates/repo/issue/labels/labels_selector_field.tmpl
View File

@ -21,7 +21,7 @@
<div class="divider"></div> <div class="divider"></div>
{{end}} {{end}}
{{$previousExclusiveScope = $exclusiveScope}} {{$previousExclusiveScope = $exclusiveScope}}
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}} <a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}tw-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}}
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}} {{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p> <p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
</a> </a>
@ -34,7 +34,7 @@
<div class="divider"></div> <div class="divider"></div>
{{end}} {{end}}
{{$previousExclusiveScope = $exclusiveScope}} {{$previousExclusiveScope = $exclusiveScope}}
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}} <a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}tw-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}}
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}} {{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p> <p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
</a> </a>

2
templates/repo/issue/new_form.tmpl
View File

@ -156,7 +156,7 @@
<div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div> <div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
{{range .Assignees}} {{range .Assignees}}
<a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}"> <a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
<span class="octicon-check gt-invisible">{{svg "octicon-check"}}</span> <span class="octicon-check tw-invisible">{{svg "octicon-check"}}</span>
<span class="text"> <span class="text">
{{ctx.AvatarUtils.Avatar . 28 "gt-mr-3"}}{{template "repo/search_name" .}} {{ctx.AvatarUtils.Avatar . 28 "gt-mr-3"}}{{template "repo/search_name" .}}
</span> </span>

6
templates/repo/issue/view_content/sidebar.tmpl
View File

@ -20,7 +20,7 @@
{{range .Reviewers}} {{range .Reviewers}}
{{if .User}} {{if .User}}
<a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_{{.ItemID}}" {{if not .CanChange}} data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}> <a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_{{.ItemID}}" {{if not .CanChange}} data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
<span class="octicon-check {{if not .Checked}}gt-invisible{{end}}">{{svg "octicon-check"}}</span> <span class="octicon-check {{if not .Checked}}tw-invisible{{end}}">{{svg "octicon-check"}}</span>
<span class="text"> <span class="text">
{{ctx.AvatarUtils.Avatar .User 28 "gt-mr-3"}}{{template "repo/search_name" .User}} {{ctx.AvatarUtils.Avatar .User 28 "gt-mr-3"}}{{template "repo/search_name" .User}}
</span> </span>
@ -35,7 +35,7 @@
{{range .TeamReviewers}} {{range .TeamReviewers}}
{{if .Team}} {{if .Team}}
<a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_team_{{.Team.ID}}" {{if not .CanChange}} data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}> <a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_team_{{.Team.ID}}" {{if not .CanChange}} data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
<span class="octicon-check {{if not .Checked}}gt-invisible{{end}}">{{svg "octicon-check" 16}}</span> <span class="octicon-check {{if not .Checked}}tw-invisible{{end}}">{{svg "octicon-check" 16}}</span>
<span class="text"> <span class="text">
{{svg "octicon-people" 16 "gt-ml-4 gt-mr-2"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}} {{svg "octicon-people" 16 "gt-ml-4 gt-mr-2"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}
</span> </span>
@ -231,7 +231,7 @@
{{$checked = true}} {{$checked = true}}
{{end}} {{end}}
{{end}} {{end}}
<span class="octicon-check {{if not $checked}}gt-invisible{{end}}">{{svg "octicon-check"}}</span> <span class="octicon-check {{if not $checked}}tw-invisible{{end}}">{{svg "octicon-check"}}</span>
<span class="text"> <span class="text">
{{ctx.AvatarUtils.Avatar . 20 "gt-mr-3"}}{{template "repo/search_name" .}} {{ctx.AvatarUtils.Avatar . 20 "gt-mr-3"}}{{template "repo/search_name" .}}
</span> </span>

2
templates/repo/settings/branches.tmpl
View File

@ -16,7 +16,7 @@
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
<input type="hidden" name="action" value="default_branch"> <input type="hidden" name="action" value="default_branch">
{{if not .Repository.IsEmpty}} {{if not .Repository.IsEmpty}}
<div class="ui dropdown selection gt-f1 gt-mr-3 gt-max-width-24rem"> <div class="ui dropdown selection gt-f1 gt-mr-3 tw-max-w-96">
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<input type="hidden" name="branch" value="{{.Repository.DefaultBranch}}"> <input type="hidden" name="branch" value="{{.Repository.DefaultBranch}}">
<div class="default text">{{.Repository.DefaultBranch}}</div> <div class="default text">{{.Repository.DefaultBranch}}</div>

2
templates/status/500.tmpl
View File

@ -38,7 +38,7 @@
<div class="ui container gt-my-5"> <div class="ui container gt-my-5">
{{if .ErrorMsg}} {{if .ErrorMsg}}
<p>{{ctx.Locale.Tr "error.occurred"}}:</p> <p>{{ctx.Locale.Tr "error.occurred"}}:</p>
<pre class="tw-whitespace-pre-wrap gt-break-all">{{.ErrorMsg}}</pre> <pre class="tw-whitespace-pre-wrap tw-break-all">{{.ErrorMsg}}</pre>
{{end}} {{end}}
<div class="center gt-mt-5"> <div class="center gt-mt-5">
{{if or .SignedUser.IsAdmin .ShowFooterVersion}}<p>{{ctx.Locale.Tr "admin.config.app_ver"}}: {{AppVer}}</p>{{end}} {{if or .SignedUser.IsAdmin .ShowFooterVersion}}<p>{{ctx.Locale.Tr "admin.config.app_ver"}}: {{AppVer}}</p>{{end}}

9
web_src/css/helpers.css
View File

@ -46,16 +46,7 @@ Gitea's private styles use `g-` prefix.
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.gt-max-width-12rem { max-width: 12rem !important; }
.gt-max-width-24rem { max-width: 24rem !important; }
/* below class names match Tailwind CSS */ /* below class names match Tailwind CSS */
.gt-break-all { word-break: break-all !important; }
.gt-content-center { align-content: center !important; }
.gt-invisible { visibility: hidden !important; }
.gt-items-start { align-items: flex-start !important; }
.gt-pointer-events-none { pointer-events: none !important; }
.gt-relative { position: relative !important; }
.gt-object-contain { object-fit: contain !important; } .gt-object-contain { object-fit: contain !important; }
.gt-no-underline { text-decoration-line: none !important; } .gt-no-underline { text-decoration-line: none !important; }
.gt-normal-case { text-transform: none !important; } .gt-normal-case { text-transform: none !important; }

4
web_src/js/features/repo-diff.js
View File

@ -69,9 +69,9 @@ function initRepoDiffConversationForm() {
$form.closest('.conversation-holder').replaceWith($newConversationHolder); $form.closest('.conversation-holder').replaceWith($newConversationHolder);
if ($form.closest('tr').data('line-type') === 'same') { if ($form.closest('tr').data('line-type') === 'same') {
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('gt-invisible'); $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('tw-invisible');
} else { } else {
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('gt-invisible'); $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('tw-invisible');
} }
$newConversationHolder.find('.dropdown').dropdown(); $newConversationHolder.find('.dropdown').dropdown();
initCompReactionSelector($newConversationHolder); initCompReactionSelector($newConversationHolder);

4
web_src/js/features/repo-issue.js
View File

@ -180,9 +180,9 @@ export function initRepoIssueCommentDelete() {
const idx = $conversationHolder.data('idx'); const idx = $conversationHolder.data('idx');
const lineType = $conversationHolder.closest('tr').data('line-type'); const lineType = $conversationHolder.closest('tr').data('line-type');
if (lineType === 'same') { if (lineType === 'same') {
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('gt-invisible'); $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('tw-invisible');
} else { } else {
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('gt-invisible'); $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('tw-invisible');
} }
$conversationHolder.remove(); $conversationHolder.remove();
} }

6
web_src/js/features/repo-legacy.js
View File

@ -150,7 +150,7 @@ export function initRepoCommentForm() {
if ($(this).hasClass('checked')) { if ($(this).hasClass('checked')) {
$(this).removeClass('checked'); $(this).removeClass('checked');
$(this).find('.octicon-check').addClass('gt-invisible'); $(this).find('.octicon-check').addClass('tw-invisible');
if (hasUpdateAction) { if (hasUpdateAction) {
if (!($(this).data('id') in items)) { if (!($(this).data('id') in items)) {
items[$(this).data('id')] = { items[$(this).data('id')] = {
@ -164,7 +164,7 @@ export function initRepoCommentForm() {
} }
} else { } else {
$(this).addClass('checked'); $(this).addClass('checked');
$(this).find('.octicon-check').removeClass('gt-invisible'); $(this).find('.octicon-check').removeClass('tw-invisible');
if (hasUpdateAction) { if (hasUpdateAction) {
if (!($(this).data('id') in items)) { if (!($(this).data('id') in items)) {
items[$(this).data('id')] = { items[$(this).data('id')] = {
@ -218,7 +218,7 @@ export function initRepoCommentForm() {
$(this).parent().find('.item').each(function () { $(this).parent().find('.item').each(function () {
$(this).removeClass('checked'); $(this).removeClass('checked');
$(this).find('.octicon-check').addClass('gt-invisible'); $(this).find('.octicon-check').addClass('tw-invisible');
}); });
if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') { if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') {

4
web_src/js/features/user-auth.js
View File

@ -9,13 +9,13 @@ export function initUserAuthOauth2() {
for (const link of outer.querySelectorAll('.oauth-login-link')) { for (const link of outer.querySelectorAll('.oauth-login-link')) {
link.addEventListener('click', () => { link.addEventListener('click', () => {
inner.classList.add('gt-invisible'); inner.classList.add('tw-invisible');
outer.classList.add('is-loading'); outer.classList.add('is-loading');
setTimeout(() => { setTimeout(() => {
// recover previous content to let user try again // recover previous content to let user try again
// usually redirection will be performed before this action // usually redirection will be performed before this action
outer.classList.remove('is-loading'); outer.classList.remove('is-loading');
inner.classList.remove('gt-invisible'); inner.classList.remove('tw-invisible');
}, 5000); }, 5000);
}); });
} }

4
web_src/js/markup/mermaid.js
View File

@ -45,7 +45,7 @@ export async function renderMermaid() {
const {svg} = await mermaid.render('mermaid', source); const {svg} = await mermaid.render('mermaid', source);
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe');
iframe.classList.add('markup-render', 'gt-invisible'); iframe.classList.add('markup-render', 'tw-invisible');
iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`; iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`;
const mermaidBlock = document.createElement('div'); const mermaidBlock = document.createElement('div');
@ -62,7 +62,7 @@ export async function renderMermaid() {
iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`; iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
setTimeout(() => { // avoid flash of iframe background setTimeout(() => { // avoid flash of iframe background
mermaidBlock.classList.remove('is-loading'); mermaidBlock.classList.remove('is-loading');
iframe.classList.remove('gt-invisible'); iframe.classList.remove('tw-invisible');
}, 0); }, 0);
}); });