mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-10 12:49:52 +01:00
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> (cherry picked from commit 7e8c1c5ba18e1ac8861f429b825163b8210fd178) Conflicts: docs/content/contributing/guidelines-frontend.zh-cn.md Gitea docs
This commit is contained in:
silverwind
Earl Warren
parent
5f65028312
commit
907c3d0c20
25 changed files with 64 additions and 59 deletions
|
|
@ -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.
|
||||
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.
|
||||
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.
|
||||
|
||||
### Accessibility / ARIA
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ HTML 页面由[Go HTML Template](https://pkg.go.dev/html/template)渲染。
|
|||
|
||||
我们推荐使用[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)和[Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)。
|
||||
|
||||
## Gitea 特定准则：
|
||||
## Gitea 特定准则
|
||||
|
||||
1. 每个功能（Fomantic-UI/jQuery 模块）应放在单独的文件/目录中。
|
||||
2. HTML 的 id 和 class 应使用 kebab-case，最好包含2-3个与功能相关的关键词。
|
||||
|
|
@ -47,7 +47,8 @@ HTML 页面由[Go HTML Template](https://pkg.go.dev/html/template)渲染。
|
|||
9. 避免在 CSS 中使用不必要的`!important`，如果无法避免，添加注释解释为什么需要它。
|
||||
10. 避免在一个事件监听器中混合不同的事件，优先为每个事件使用独立的事件监听器。
|
||||
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类。如果内联脚本和样式不可避免，请解释无法避免的原因。
|
||||
|
||||
### 可访问性 / ARIA
|
||||
|
||||
|
|
@ -64,18 +65,21 @@ Gitea使用一些补丁使Fomantic UI更具可访问性（参见`aria.js`和`ari
|
|||
|
||||
* Vue + Vanilla JS
|
||||
* Fomantic-UI（jQuery）
|
||||
* htmx （部分页面重新加载其他静态组件）
|
||||
* Vanilla JS
|
||||
|
||||
不推荐的实现方式：
|
||||
|
||||
* Vue + Fomantic-UI（jQuery）
|
||||
* jQuery + Vanilla JS
|
||||
* htmx + 任何其他需要大量 JavaScript 代码或不必要的功能，如 htmx 脚本 (`hx-on`)
|
||||
|
||||
为了保持界面一致，Vue 组件可以使用 Fomantic-UI 的 CSS 类。
|
||||
尽管不建议混合使用不同的框架，
|
||||
我们使用 htmx 进行简单的交互。您可以在此 [PR](https://github.com/go-gitea/gitea/pull/28908) 中查看一个简单交互的示例，其中应使用 htmx。如果您需要更高级的反应性，请不要使用 htmx，请使用其他框架（Vue/Vanilla JS）。
|
||||
但如果混合使用是必要的，并且代码设计良好且易于维护，也可以工作。
|
||||
|
||||
### async 函数
|
||||
### `async` 函数
|
||||
|
||||
只有当函数内部存在`await`调用或返回`Promise`时，才将函数标记为`async`。
|
||||
|
||||
|
|
@ -91,6 +95,12 @@ Gitea使用一些补丁使Fomantic UI更具可访问性（参见`aria.js`和`ari
|
|||
这是有意为之的，我们想调用异步函数并忽略Promise。
|
||||
一些 lint 规则和 IDE 也会在未处理返回的 Promise 时发出警告。
|
||||
|
||||
### 获取数据
|
||||
|
||||
要获取数据，请使用`modules/fetch.js`中的包装函数`GET`、`POST`等。他们
|
||||
接受内容的`data`选项，将自动设置 CSRF 令牌并返回
|
||||
[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)。
|
||||
|
||||
### HTML 属性和 dataset
|
||||
|
||||
禁止使用`dataset`，它的驼峰命名行为使得搜索属性变得困难。
|
||||
|
|
@ -132,3 +142,7 @@ Gitea使用一些补丁使Fomantic UI更具可访问性（参见`aria.js`和`ari
|
|||
### Vue3 和 JSX
|
||||
|
||||
Gitea 现在正在使用 Vue3。我们决定不引入 JSX，以保持 HTML 代码和 JavaScript 代码分离。
|
||||
|
||||
### UI示例
|
||||
|
||||
Gitea 使用一些自制的 UI 元素并自定义其他元素，以将它们更好地集成到通用 UI 方法中。当在开发模式（`RUN_MODE=dev`）下运行 Gitea 时，在 `http(s)://your-gitea-url:port/devtest` 下会提供一个包含一些标准化 UI 示例的页面。
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@
|
|||
{{range .Emails}}
|
||||
<tr>
|
||||
<td><a href="{{AppSubUrl}}/{{.Name | PathEscape}}">{{.Name}}</a></td>
|
||||
<td class="gt-ellipsis gt-max-width-12rem">{{.FullName}}</td>
|
||||
<td class="gt-ellipsis gt-max-width-12rem">{{.Email}}</td>
|
||||
<td class="gt-ellipsis tw-max-w-48">{{.FullName}}</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 .CanChange}}
|
||||
|
|
|
|||
|
|
@ -62,8 +62,8 @@
|
|||
{{end}}
|
||||
</td>
|
||||
<td>{{.Package.Type.Name}}</td>
|
||||
<td class="gt-ellipsis gt-max-width-12rem">{{.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">{{.Package.Name}}</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>
|
||||
{{if .Repository}}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
<span class="ui mini label">{{ctx.Locale.Tr "admin.users.remote"}}</span>
|
||||
{{end}}
|
||||
</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 .IsRestricted}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
|
||||
<td>{{if index $.UsersTwoFaStatus .ID}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="ui secondary menu item navbar-mobile-right">
|
||||
{{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"}}">
|
||||
<div class="gt-relative">
|
||||
<div class="tw-relative">
|
||||
{{svg "octicon-bell"}}
|
||||
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
|
||||
</div>
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
{{else if .IsSigned}}
|
||||
{{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"}}">
|
||||
<div class="gt-relative">
|
||||
<div class="tw-relative">
|
||||
{{svg "octicon-stopwatch"}}
|
||||
<span class="header-stopwatch-dot"></span>
|
||||
</div>
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
{{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"}}">
|
||||
<div class="gt-relative">
|
||||
<div class="tw-relative">
|
||||
{{svg "octicon-bell"}}
|
||||
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
{{if eq .Num -1}}
|
||||
<a class="disabled item">...</a>
|
||||
{{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}}
|
||||
<a class="{{if not .HasNext}}disabled{{end}} item navigation" {{if .HasNext}}href="{{$paginationLink}}?page={{.Next}}{{if $paginationParams}}&{{$paginationParams}}{{end}}"{{end}}>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
{{$class = (print $class " isWarning")}}
|
||||
{{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">
|
||||
<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}}
|
||||
|
|
|
|||
|
|
@ -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}}>
|
||||
<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">
|
||||
<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}}
|
||||
{{svg "octicon-chevron-right" 18}}
|
||||
{{else}}
|
||||
|
|
|
|||
|
|
@ -17,13 +17,13 @@
|
|||
{{if .Issue.Index}}
|
||||
{{if .ShowOutdatedComments}}
|
||||
<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"}}
|
||||
</label>
|
||||
</a>
|
||||
{{else}}
|
||||
<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"}}
|
||||
</label>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -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-code lines-code-old del-code">{{/*
|
||||
*/}}{{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"}}{{/*
|
||||
*/}}</button>{{/*
|
||||
*/}}{{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-code lines-code-new add-code">{{/*
|
||||
*/}}{{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"}}{{/*
|
||||
*/}}</button>{{/*
|
||||
*/}}{{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-code lines-code-old">{{/*
|
||||
*/}}{{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"}}{{/*
|
||||
*/}}</button>{{/*
|
||||
*/}}{{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-code lines-code-new">{{/*
|
||||
*/}}{{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"}}{{/*
|
||||
*/}}</button>{{/*
|
||||
*/}}{{end}}{{/*
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
{{else}}
|
||||
<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/*
|
||||
*/}}{{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"}}{{/*
|
||||
*/}}</button>{{/*
|
||||
*/}}{{end}}{{/*
|
||||
|
|
|
|||
|
|
@ -2,26 +2,26 @@
|
|||
{{svg "gitea-whitespace"}}
|
||||
<div class="menu">
|
||||
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all&show-outdated={{$.ShowOutdatedComments}}">
|
||||
<label class="gt-pointer-events-none">
|
||||
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
|
||||
<label class="tw-pointer-events-none">
|
||||
<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"}}
|
||||
</label>
|
||||
</a>
|
||||
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-all&show-outdated={{$.ShowOutdatedComments}}">
|
||||
<label class="gt-pointer-events-none">
|
||||
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
|
||||
<label class="tw-pointer-events-none">
|
||||
<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"}}
|
||||
</label>
|
||||
</a>
|
||||
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change&show-outdated={{$.ShowOutdatedComments}}">
|
||||
<label class="gt-pointer-events-none">
|
||||
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
|
||||
<label class="tw-pointer-events-none">
|
||||
<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"}}
|
||||
</label>
|
||||
</a>
|
||||
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-eol&show-outdated={{$.ShowOutdatedComments}}">
|
||||
<label class="gt-pointer-events-none">
|
||||
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
|
||||
<label class="tw-pointer-events-none">
|
||||
<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"}}
|
||||
</label>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
{{end}}
|
||||
<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">
|
||||
{{template "shared/issueicon" .}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="divider"></div>
|
||||
{{end}}
|
||||
{{$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> {{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> {{RenderLabel $.Context .}}
|
||||
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
|
||||
<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
|
||||
</a>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="divider"></div>
|
||||
{{end}}
|
||||
{{$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> {{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> {{RenderLabel $.Context .}}
|
||||
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
|
||||
<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@
|
|||
<div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
|
||||
{{range .Assignees}}
|
||||
<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">
|
||||
{{ctx.AvatarUtils.Avatar . 28 "gt-mr-3"}}{{template "repo/search_name" .}}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
{{range .Reviewers}}
|
||||
{{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}}>
|
||||
<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">
|
||||
{{ctx.AvatarUtils.Avatar .User 28 "gt-mr-3"}}{{template "repo/search_name" .User}}
|
||||
</span>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
{{range .TeamReviewers}}
|
||||
{{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}}>
|
||||
<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">
|
||||
{{svg "octicon-people" 16 "gt-ml-4 gt-mr-2"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}
|
||||
</span>
|
||||
|
|
@ -231,7 +231,7 @@
|
|||
{{$checked = true}}
|
||||
{{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">
|
||||
{{ctx.AvatarUtils.Avatar . 20 "gt-mr-3"}}{{template "repo/search_name" .}}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
{{.CsrfTokenHtml}}
|
||||
<input type="hidden" name="action" value="default_branch">
|
||||
{{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"}}
|
||||
<input type="hidden" name="branch" value="{{.Repository.DefaultBranch}}">
|
||||
<div class="default text">{{.Repository.DefaultBranch}}</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<div class="ui container gt-my-5">
|
||||
{{if .ErrorMsg}}
|
||||
<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}}
|
||||
<div class="center gt-mt-5">
|
||||
{{if or .SignedUser.IsAdmin .ShowFooterVersion}}<p>{{ctx.Locale.Tr "admin.config.app_ver"}}: {{AppVer}}</p>{{end}}
|
||||
|
|
|
|||
|
|
@ -46,16 +46,7 @@ Gitea's private styles use `g-` prefix.
|
|||
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 */
|
||||
.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-no-underline { text-decoration-line: none !important; }
|
||||
.gt-normal-case { text-transform: none !important; }
|
||||
|
|
|
|||
|
|
@ -71,9 +71,9 @@ function initRepoDiffConversationForm() {
|
|||
|
||||
$form.closest('.conversation-holder').replaceWith($newConversationHolder);
|
||||
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 {
|
||||
$(`[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();
|
||||
initCompReactionSelector($newConversationHolder);
|
||||
|
|
|
|||
|
|
@ -180,9 +180,9 @@ export function initRepoIssueCommentDelete() {
|
|||
const idx = $conversationHolder.data('idx');
|
||||
const lineType = $conversationHolder.closest('tr').data('line-type');
|
||||
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 {
|
||||
$(`[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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ export function initRepoCommentForm() {
|
|||
|
||||
if ($(this).hasClass('checked')) {
|
||||
$(this).removeClass('checked');
|
||||
$(this).find('.octicon-check').addClass('gt-invisible');
|
||||
$(this).find('.octicon-check').addClass('tw-invisible');
|
||||
if (hasUpdateAction) {
|
||||
if (!($(this).data('id') in items)) {
|
||||
items[$(this).data('id')] = {
|
||||
|
|
@ -164,7 +164,7 @@ export function initRepoCommentForm() {
|
|||
}
|
||||
} else {
|
||||
$(this).addClass('checked');
|
||||
$(this).find('.octicon-check').removeClass('gt-invisible');
|
||||
$(this).find('.octicon-check').removeClass('tw-invisible');
|
||||
if (hasUpdateAction) {
|
||||
if (!($(this).data('id') in items)) {
|
||||
items[$(this).data('id')] = {
|
||||
|
|
@ -218,7 +218,7 @@ export function initRepoCommentForm() {
|
|||
|
||||
$(this).parent().find('.item').each(function () {
|
||||
$(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') {
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ export function initUserAuthOauth2() {
|
|||
|
||||
for (const link of outer.querySelectorAll('.oauth-login-link')) {
|
||||
link.addEventListener('click', () => {
|
||||
inner.classList.add('gt-invisible');
|
||||
inner.classList.add('tw-invisible');
|
||||
outer.classList.add('is-loading');
|
||||
setTimeout(() => {
|
||||
// recover previous content to let user try again
|
||||
// usually redirection will be performed before this action
|
||||
outer.classList.remove('is-loading');
|
||||
inner.classList.remove('gt-invisible');
|
||||
inner.classList.remove('tw-invisible');
|
||||
}, 5000);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export async function renderMermaid() {
|
|||
const {svg} = await mermaid.render('mermaid', source);
|
||||
|
||||
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>`;
|
||||
|
||||
const mermaidBlock = document.createElement('div');
|
||||
|
|
@ -62,7 +62,7 @@ export async function renderMermaid() {
|
|||
iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
|
||||
setTimeout(() => { // avoid flash of iframe background
|
||||
mermaidBlock.classList.remove('is-loading');
|
||||
iframe.classList.remove('gt-invisible');
|
||||
iframe.classList.remove('tw-invisible');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue