diff options
| author | Denys Konovalov <kontakt@denyskon.de> | 2023-08-01 00:13:42 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-01 00:13:42 +0200 |
| commit | b9baed2c74286710481886c5d1f3010e43840012 (patch) | |
| tree | e39bdc26d90aafc29a13f134db0fa424a8b37e87 /templates/user | |
| parent | fc6c3d626ef9f383c3ff7f774fcef0116de4f2e3 (diff) | |
| download | gitea-b9baed2c74286710481886c5d1f3010e43840012.tar.gz gitea-b9baed2c74286710481886c5d1f3010e43840012.zip | |
Introduce `flex-list` & `flex-item` elements for Gitea UI (#25790)
This PR introduces a new UI element type for Gitea called `flex-item`.
It consists of a horizontal card with a leading, main and trailing part:
The idea behind it is that in Gitea UI, we have many cases where we use
this kind of layout, but it is achieved in many different ways:
- grid layout
- `.ui.list` with additional hacky flexbox
- `.ui.key.list` - looks to me like a style set originally created for
ssh/gpg key list, was used in many other places
- `.issue.list` - created for issue cards, used in many other places
- ...
This new style is based on `.issue.list`, specifically the refactoring
of it done in #25750.
In this PR, the new element is introduced and lots of templates are
being refactored to use that style. This allows to remove a lot of
page-specific css, makes many of the elements responsive or simply
provides a cleaner/better-looking way to present information.
A devtest section with the new style is also available.
<details>
<summary>Screenshots (left: before, right: after)</summary>
</details>
---------
Co-authored-by: Giteabot <teabot@gitea.io>
Diffstat (limited to 'templates/user')
| -rw-r--r-- | templates/user/dashboard/feeds.tmpl | 234 | ||||
| -rw-r--r-- | templates/user/settings/applications.tmpl | 31 | ||||
| -rw-r--r-- | templates/user/settings/applications_oauth2_list.tmpl | 27 | ||||
| -rw-r--r-- | templates/user/settings/grants_oauth2.tmpl | 30 | ||||
| -rw-r--r-- | templates/user/settings/keys_gpg.tmpl | 34 | ||||
| -rw-r--r-- | templates/user/settings/keys_principal.tmpl | 24 | ||||
| -rw-r--r-- | templates/user/settings/keys_ssh.tmpl | 39 | ||||
| -rw-r--r-- | templates/user/settings/organization.tmpl | 19 | ||||
| -rw-r--r-- | templates/user/settings/security/accountlinks.tmpl | 26 | ||||
| -rw-r--r-- | templates/user/settings/security/openid.tmpl | 29 | ||||
| -rw-r--r-- | templates/user/settings/security/webauthn.tmpl | 17 |
11 files changed, 270 insertions, 240 deletions
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl index c138b02d5e..4a8d6c6914 100644 --- a/templates/user/dashboard/feeds.tmpl +++ b/templates/user/dashboard/feeds.tmpl @@ -1,128 +1,128 @@ -{{range .Feeds}} - <div class="news"> - <div class="ui left"> - {{avatarByAction $.Context .}} - </div> - <div class="ui grid"> - <div class="ui fourteen wide column"> - <div class="{{if or (eq .GetOpType 5) (eq .GetOpType 18)}}push news{{end}}"> - <p> - {{if gt .ActUser.ID 0}} - <a href="{{AppSubUrl}}/{{.GetActUserName | PathEscape}}" title="{{.GetDisplayNameTitle}}">{{.GetDisplayName}}</a> +<div id="activity-feed" class="flex-list"> + {{range .Feeds}} + <div class="flex-item"> + <div class="flex-item-leading"> + {{avatarByAction $.Context .}} + </div> + <div class="flex-item-main gt-gap-3"> + <div> + {{if gt .ActUser.ID 0}} + <a href="{{AppSubUrl}}/{{.GetActUserName | PathEscape}}" title="{{.GetDisplayNameTitle}}">{{.GetDisplayName}}</a> + {{else}} + {{.ShortActUserName}} + {{end}} + {{if eq .GetOpType 1}} + {{$.locale.Tr "action.create_repo" (.GetRepoLink|Escape) (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 2}} + {{$.locale.Tr "action.rename_repo" (.GetContent|Escape) (.GetRepoLink|Escape) (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 5}} + {{if .Content}} + {{$.locale.Tr "action.commit_repo" (.GetRepoLink|Escape) (.GetRefLink|Escape) (Escape .GetBranch) (.ShortRepoPath|Escape) | Str2html}} {{else}} - {{.ShortActUserName}} - {{end}} - {{if eq .GetOpType 1}} - {{$.locale.Tr "action.create_repo" (.GetRepoLink|Escape) (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 2}} - {{$.locale.Tr "action.rename_repo" (.GetContent|Escape) (.GetRepoLink|Escape) (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 5}} - {{if .Content}} - {{$.locale.Tr "action.commit_repo" (.GetRepoLink|Escape) (.GetRefLink|Escape) (Escape .GetBranch) (.ShortRepoPath|Escape) | Str2html}} - {{else}} - {{$.locale.Tr "action.create_branch" (.GetRepoLink|Escape) (.GetRefLink|Escape) (Escape .GetBranch) (.ShortRepoPath|Escape) | Str2html}} - {{end}} - {{else if eq .GetOpType 6}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.create_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 7}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.create_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 8}} - {{$.locale.Tr "action.transfer_repo" .GetContent (.GetRepoLink|Escape) (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 9}} - {{$.locale.Tr "action.push_tag" (.GetRepoLink|Escape) (.GetRefLink|Escape) (.GetTag|Escape) (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 10}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.comment_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 11}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.merge_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 12}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.close_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 13}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.reopen_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 14}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.close_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 15}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.reopen_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 16}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.delete_tag" (.GetRepoLink|Escape) (.GetTag|Escape) (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 17}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.delete_branch" (.GetRepoLink|Escape) (.GetBranch|Escape) (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 18}} - {{$.locale.Tr "action.mirror_sync_push" (.GetRepoLink|Escape) (.GetRefLink|Escape) (.GetBranch|Escape) (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 19}} - {{$.locale.Tr "action.mirror_sync_create" (.GetRepoLink|Escape) (.GetRefLink|Escape) (.GetBranch|Escape) (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 20}} - {{$.locale.Tr "action.mirror_sync_delete" (.GetRepoLink|Escape) (.GetBranch|Escape) (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 21}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.approve_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 22}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.reject_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 23}} - {{$index := index .GetIssueInfos 0}} - {{$.locale.Tr "action.comment_pull" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} - {{else if eq .GetOpType 24}} - {{$linkText := .Content | RenderEmoji $.Context}} - {{$.locale.Tr "action.publish_release" (.GetRepoLink|Escape) ((printf "%s/releases/tag/%s" .GetRepoLink .GetTag)|Escape) (.ShortRepoPath|Escape) $linkText | Str2html}} - {{else if eq .GetOpType 25}} - {{$index := index .GetIssueInfos 0}} - {{$reviewer := index .GetIssueInfos 1}} - {{$.locale.Tr "action.review_dismissed" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) $reviewer | Str2html}} + {{$.locale.Tr "action.create_branch" (.GetRepoLink|Escape) (.GetRefLink|Escape) (Escape .GetBranch) (.ShortRepoPath|Escape) | Str2html}} {{end}} - </p> - {{if or (eq .GetOpType 5) (eq .GetOpType 18)}} - <div class="content"> - <ul> - {{$push := ActionContent2Commits .}} - {{$repoLink := .GetRepoLink}} - {{range $push.Commits}} - {{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}} - <li> - {{avatarHTML ($push.AvatarLink $.Context .AuthorEmail) 16 "gt-mr-2" .AuthorName}} - <a class="commit-id gt-mr-2" href="{{$commitLink}}">{{ShortSha .Sha1}}</a> - <span class="text truncate light grey"> - {{RenderCommitMessage $.Context .Message $repoLink $.ComposeMetas}} - </span> - </li> - {{end}} - {{if and (gt $push.Len 1) $push.CompareURL}}<li><a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{$.locale.Tr "action.compare_commits" $push.Len}} »</a></li>{{end}} - </ul> - </div> {{else if eq .GetOpType 6}} - <span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji $.Context | RenderCodeBlock}}</span> + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.create_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} {{else if eq .GetOpType 7}} - <span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji $.Context | RenderCodeBlock}}</span> - {{else if or (eq .GetOpType 10) (eq .GetOpType 21) (eq .GetOpType 22) (eq .GetOpType 23)}} - <a href="{{.GetCommentLink}}" class="text truncate issue title">{{.GetIssueTitle | RenderEmoji $.Context | RenderCodeBlock}}</a> - {{$comment := index .GetIssueInfos 1}} - {{if gt (len $comment) 0}}<p class="text light grey">{{$comment | RenderEmoji $.Context}}</p>{{end}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.create_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 8}} + {{$.locale.Tr "action.transfer_repo" .GetContent (.GetRepoLink|Escape) (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 9}} + {{$.locale.Tr "action.push_tag" (.GetRepoLink|Escape) (.GetRefLink|Escape) (.GetTag|Escape) (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 10}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.comment_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} {{else if eq .GetOpType 11}} - <p class="text light grey">{{index .GetIssueInfos 1}}</p> - {{else if or (eq .GetOpType 12) (eq .GetOpType 13) (eq .GetOpType 14) (eq .GetOpType 15)}} - <span class="text truncate issue title">{{.GetIssueTitle | RenderEmoji $.Context | RenderCodeBlock}}</span> + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.merge_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 12}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.close_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 13}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.reopen_issue" ((printf "%s/issues/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 14}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.close_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 15}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.reopen_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 16}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.delete_tag" (.GetRepoLink|Escape) (.GetTag|Escape) (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 17}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.delete_branch" (.GetRepoLink|Escape) (.GetBranch|Escape) (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 18}} + {{$.locale.Tr "action.mirror_sync_push" (.GetRepoLink|Escape) (.GetRefLink|Escape) (.GetBranch|Escape) (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 19}} + {{$.locale.Tr "action.mirror_sync_create" (.GetRepoLink|Escape) (.GetRefLink|Escape) (.GetBranch|Escape) (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 20}} + {{$.locale.Tr "action.mirror_sync_delete" (.GetRepoLink|Escape) (.GetBranch|Escape) (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 21}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.approve_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 22}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.reject_pull_request" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 23}} + {{$index := index .GetIssueInfos 0}} + {{$.locale.Tr "action.comment_pull" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) | Str2html}} + {{else if eq .GetOpType 24}} + {{$linkText := .Content | RenderEmoji $.Context}} + {{$.locale.Tr "action.publish_release" (.GetRepoLink|Escape) ((printf "%s/releases/tag/%s" .GetRepoLink .GetTag)|Escape) (.ShortRepoPath|Escape) $linkText | Str2html}} {{else if eq .GetOpType 25}} - <p class="text light grey">{{$.locale.Tr "action.review_dismissed_reason"}}</p> - <p class="text light grey">{{index .GetIssueInfos 2 | RenderEmoji $.Context}}</p> + {{$index := index .GetIssueInfos 0}} + {{$reviewer := index .GetIssueInfos 1}} + {{$.locale.Tr "action.review_dismissed" ((printf "%s/pulls/%s" .GetRepoLink $index) |Escape) $index (.ShortRepoPath|Escape) $reviewer | Str2html}} {{end}} - <p class="text italic light grey">{{TimeSince .GetCreate $.locale}}</p> </div> + {{if or (eq .GetOpType 5) (eq .GetOpType 18)}} + <div class="gt-pl-5"> + {{$push := ActionContent2Commits .}} + {{$repoLink := .GetRepoLink}} + {{range $push.Commits}} + {{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}} + <div class="flex-item"> + {{avatarHTML ($push.AvatarLink $.Context .AuthorEmail) 16 "" .AuthorName}} + <a class="commit-id" href="{{$commitLink}}">{{ShortSha .Sha1}}</a> + <span class="text truncate light grey"> + {{RenderCommitMessage $.Context .Message $repoLink $.ComposeMetas}} + </span> + </div> + {{end}} + {{if and (gt $push.Len 1) $push.CompareURL}} + <div class="flex-item"> + <a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{$.locale.Tr "action.compare_commits" $push.Len}} »</a> + </div> + {{end}} + </div> + {{else if eq .GetOpType 6}} + <span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji $.Context | RenderCodeBlock}}</span> + {{else if eq .GetOpType 7}} + <span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji $.Context | RenderCodeBlock}}</span> + {{else if or (eq .GetOpType 10) (eq .GetOpType 21) (eq .GetOpType 22) (eq .GetOpType 23)}} + <a href="{{.GetCommentLink}}" class="text truncate issue title">{{.GetIssueTitle | RenderEmoji $.Context | RenderCodeBlock}}</a> + {{$comment := index .GetIssueInfos 1}} + {{if gt (len $comment) 0}} + <div class="flex-item-body">{{$comment | RenderEmoji $.Context | RenderCodeBlock}}</div> + {{end}} + {{else if eq .GetOpType 11}} + <div class="flex-item-body">{{index .GetIssueInfos 1}}</div> + {{else if or (eq .GetOpType 12) (eq .GetOpType 13) (eq .GetOpType 14) (eq .GetOpType 15)}} + <span class="text truncate issue title">{{.GetIssueTitle | RenderEmoji $.Context | RenderCodeBlock}}</span> + {{else if eq .GetOpType 25}} + <div class="flex-item-body">{{$.locale.Tr "action.review_dismissed_reason"}}</div> + <div class="flex-item-body">{{index .GetIssueInfos 2 | RenderEmoji $.Context}}</div> + {{end}} + <div class="flex-item-body">{{TimeSince .GetCreate $.locale}}</div> </div> - <div class="ui two wide right aligned column"> - <span class="text grey">{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32}}</span> + <div class="flex-item-trailing"> + {{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32}} </div> </div> - <div class="divider"></div> - </div> -{{end}} - -{{template "base/paginate" .}} + {{end}} + {{template "base/paginate" .}} +</div> diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl index b889f9c0cb..a32d284e07 100644 --- a/templates/user/settings/applications.tmpl +++ b/templates/user/settings/applications.tmpl @@ -4,21 +4,20 @@ {{.locale.Tr "settings.manage_access_token"}} </h4> <div class="ui attached segment"> - <div class="ui key list"> - <div class="item"> + <div class="flex-list"> + <div class="flex-item"> {{.locale.Tr "settings.tokens_desc"}} </div> {{range .Tokens}} - <div class="item"> - <div class="right floated content"> - <button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}"> - {{svg "octicon-trash" 16 "gt-mr-2"}} - {{$.locale.Tr "settings.delete_token"}} - </button> + <div class="flex-item"> + <div class="flex-item-leading"> + <span class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{$.locale.Tr "settings.token_state_desc"}}"{{end}}> + {{svg "fontawesome-send" 32}} + </span> </div> - <i class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{$.locale.Tr "settings.token_state_desc"}}"{{end}}>{{svg "fontawesome-send" 36}}</i> - <div class="content"> - <details><summary><strong>{{.Name}}</strong></summary> + <div class="flex-item-main"> + <details> + <summary><span class="flex-item-title">{{.Name}}</span></summary> <p class="gt-my-2"> {{$.locale.Tr "settings.repo_and_org_access"}}: {{if .DisplayPublicOnly}} @@ -36,10 +35,16 @@ {{end}} </ul> </details> - <div class="activity meta"> - <i>{{$.locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> + <div class="flex-item-body"> + <i>{{$.locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="text green"{{end}}>{{DateTime "short" .UpdatedUnix}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> </div> </div> + <div class="flex-item-trailing"> + <button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}"> + {{svg "octicon-trash" 16 "gt-mr-2"}} + {{$.locale.Tr "settings.delete_token"}} + </button> + </div> </div> {{end}} </div> diff --git a/templates/user/settings/applications_oauth2_list.tmpl b/templates/user/settings/applications_oauth2_list.tmpl index 3ffe317512..be6569c03c 100644 --- a/templates/user/settings/applications_oauth2_list.tmpl +++ b/templates/user/settings/applications_oauth2_list.tmpl @@ -1,24 +1,31 @@ <div class="ui attached segment"> - <div class="ui key list"> - <div class="item"> + <div class="flex-list"> + <div class="flex-item"> {{.locale.Tr "settings.oauth2_application_create_description"}} </div> - {{range $app := .Applications}} - <div class="item"> - <div class="right floated content"> - <a href="{{$.Link}}/oauth2/{{$app.ID}}" class="ui primary tiny button"> + {{range .Applications}} + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg "octicon-apps" 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title">{{.Name}}</div> + <div class="flex-item-body"> + {{$.locale.Tr "settings.oauth2_client_id"}} + <span class="ui label">{{.ClientID}}</span> + </div> + </div> + <div class="flex-item-trailing"> + <a href="{{$.Link}}/oauth2/{{.ID}}" class="ui primary tiny button"> {{svg "octicon-pencil" 16 "gt-mr-2"}} {{$.locale.Tr "settings.oauth2_application_edit"}} </a> <button class="ui red tiny button delete-button" data-modal-id="remove-gitea-oauth2-application" - data-url="{{$.Link}}/oauth2/{{$app.ID}}/delete"> + data-url="{{$.Link}}/oauth2/{{.ID}}/delete"> {{svg "octicon-trash" 16 "gt-mr-2"}} {{$.locale.Tr "settings.delete_key"}} </button> </div> - <div class="content"> - <strong>{{$app.Name}}</strong> - </div> </div> {{end}} </div> diff --git a/templates/user/settings/grants_oauth2.tmpl b/templates/user/settings/grants_oauth2.tmpl index b769020c62..dbe7d0409f 100644 --- a/templates/user/settings/grants_oauth2.tmpl +++ b/templates/user/settings/grants_oauth2.tmpl @@ -2,27 +2,27 @@ {{.locale.Tr "settings.authorized_oauth2_applications"}} </h4> <div class="ui attached segment"> - <div class="ui key list"> - <div class="item"> + <div class="flex-list"> + <div class="flex-item"> {{.locale.Tr "settings.authorized_oauth2_applications_description"}} </div> - {{range $grant := .Grants}} - <div class="item"> - <div class="right floated content"> + {{range .Grants}} + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg "octicon-key" 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title">{{.Application.Name}}</div> + <div class="flex-item-body"> + <i>{{$.locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}}</i> + </div> + </div> + <div class="flex-item-trailing"> <button class="ui red tiny button delete-button" data-modal-id="revoke-gitea-oauth2-grant" - data-url="{{AppSubUrl}}/user/settings/applications/oauth2/{{$grant.ApplicationID}}/revoke/{{$grant.ID}}"> + data-url="{{AppSubUrl}}/user/settings/applications/oauth2/{{.ApplicationID}}/revoke/{{.ID}}"> {{$.locale.Tr "settings.revoke_key"}} </button> </div> - <div class="left floated content"> - {{svg "octicon-key"}} - </div> - <div class="content"> - <strong>{{$grant.Application.Name}}</strong> - <div class="activity meta"> - <i>{{$.locale.Tr "settings.added_on" (DateTime "short" $grant.CreatedUnix) | Safe}}</i> - </div> - </div> </div> {{end}} </div> diff --git a/templates/user/settings/keys_gpg.tmpl b/templates/user/settings/keys_gpg.tmpl index ecbcf265ff..5ab96eb63a 100644 --- a/templates/user/settings/keys_gpg.tmpl +++ b/templates/user/settings/keys_gpg.tmpl @@ -39,40 +39,40 @@ </button> </form> </div> - <div class="ui key list gt-mt-0"> - <div class="item"> + <div class="flex-list"> + <div class="flex-item"> {{.locale.Tr "settings.gpg_desc"}} </div> {{range .GPGKeys}} - <div class="item"> - <div class="right floated content"> - <button class="ui red tiny button delete-button" data-modal-id="delete-gpg" data-url="{{$.Link}}/delete?type=gpg" data-id="{{.ID}}"> - {{$.locale.Tr "settings.delete_key"}} - </button> - {{if and (not .Verified) (ne $.VerifyingID .KeyID)}} - <a class="ui primary tiny button" href="{{$.Link}}?verify_gpg={{.KeyID}}">{{$.locale.Tr "settings.gpg_key_verify"}}</a> - {{end}} - </div> - <div class="left floated content"> + <div class="flex-item"> + <div class="flex-item-leading"> <span class="text {{if or .ExpiredUnix.IsZero ($.PageStartTime.Before .ExpiredUnix.AsTime)}}green{{end}}">{{svg "octicon-key" 32}}</span> </div> - <div class="content"> + <div class="flex-item-main"> {{if .Verified}} - <span data-tooltip-content="{{$.locale.Tr "settings.gpg_key_verified_long"}}">{{svg "octicon-verified"}} <strong>{{$.locale.Tr "settings.gpg_key_verified"}}</strong></span> + <span class="flex-text-block" data-tooltip-content="{{$.locale.Tr "settings.gpg_key_verified_long"}}">{{svg "octicon-verified"}} <strong>{{$.locale.Tr "settings.gpg_key_verified"}}</strong></span> {{end}} {{if gt (len .Emails) 0}} - <span data-tooltip-content="{{$.locale.Tr "settings.gpg_key_matched_identities_long"}}">{{svg "octicon-mail"}} {{$.locale.Tr "settings.gpg_key_matched_identities"}} {{range .Emails}}<strong>{{.Email}} </strong>{{end}}</span> + <span class="flex-text-block" data-tooltip-content="{{$.locale.Tr "settings.gpg_key_matched_identities_long"}}">{{svg "octicon-mail"}} {{$.locale.Tr "settings.gpg_key_matched_identities"}} {{range .Emails}}<strong>{{.Email}} </strong>{{end}}</span> {{end}} - <div class="print meta"> + <div class="flex-item-body"> <b>{{$.locale.Tr "settings.key_id"}}:</b> {{.PaddedKeyID}} <b>{{$.locale.Tr "settings.subkeys"}}:</b> {{range .SubsKey}} {{.PaddedKeyID}} {{end}} </div> - <div class="activity meta"> + <div class="flex-item-body"> <i>{{$.locale.Tr "settings.added_on" (DateTime "short" .AddedUnix) | Safe}}</i> - <i>{{if not .ExpiredUnix.IsZero}}{{$.locale.Tr "settings.valid_until_date" (DateTime "short" .ExpiredUnix) | Safe}}{{else}}{{$.locale.Tr "settings.valid_forever"}}{{end}}</i> </div> </div> + <div class="flex-item-trailing"> + <button class="ui red tiny button delete-button" data-modal-id="delete-gpg" data-url="{{$.Link}}/delete?type=gpg" data-id="{{.ID}}"> + {{$.locale.Tr "settings.delete_key"}} + </button> + {{if and (not .Verified) (ne $.VerifyingID .KeyID)}} + <a class="ui primary tiny button" href="{{$.Link}}?verify_gpg={{.KeyID}}">{{$.locale.Tr "settings.gpg_key_verify"}}</a> + {{end}} + </div> </div> {{if and (not .Verified) (eq $.VerifyingID .KeyID)}} <div class="ui segment"> diff --git a/templates/user/settings/keys_principal.tmpl b/templates/user/settings/keys_principal.tmpl index 7dda6665bd..42c21373d5 100644 --- a/templates/user/settings/keys_principal.tmpl +++ b/templates/user/settings/keys_principal.tmpl @@ -10,24 +10,26 @@ </div> </h4> <div class="ui attached segment"> - <div class="ui key list"> - <div class="item"> + <div class="flex-list"> + <div class="flex-item"> {{.locale.Tr "settings.principal_desc"}} </div> {{range .Principals}} - <div class="item"> - <div class="right floated content"> - <button class="ui red tiny button delete-button" data-modal-id="delete-principal" data-url="{{$.Link}}/delete?type=principal" data-id="{{.ID}}"> - {{$.locale.Tr "settings.delete_key"}} - </button> + <div class="flex-item"> + <div class="flex-item-leading"> + <span class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{$.locale.Tr "settings.principal_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span> </div> - <i class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{$.locale.Tr "settings.principal_state_desc"}}"{{end}}>{{svg "octicon-key" 36}}</i> - <div class="content"> - <strong>{{.Name}}</strong> - <div class="activity meta"> + <div class="flex-item-main"> + <div class="flex-item-title">{{.Name}}</div> + <div class="flex-item-body"> <i>{{$.locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}} — {{svg "octicon-info" 16}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> </div> </div> + <div class="flex-item-trailing"> + <button class="ui red tiny button delete-button" data-modal-id="delete-principal" data-url="{{$.Link}}/delete?type=principal" data-id="{{.ID}}"> + {{$.locale.Tr "settings.delete_key"}} + </button> + </div> </div> {{end}} </div> diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl index 0a47c44bd8..0d2916d30c 100644 --- a/templates/user/settings/keys_ssh.tmpl +++ b/templates/user/settings/keys_ssh.tmpl @@ -27,41 +27,40 @@ </button> </form> </div> - <div class="ui key list gt-mt-0"> - <div class="item"> + <div id="keys-ssh" class="flex-list"> + <div class="flex-item"> {{.locale.Tr "settings.ssh_desc"}} </div> {{if .DisableSSH}} - <div class="item"> + <div class="flex-item"> {{.locale.Tr "settings.ssh_signonly"}} </div> {{end}} {{range $index, $key := .Keys}} - <div class="item"> - <div class="right floated content"> - <button class="ui red tiny button delete-button{{if index $.ExternalKeys $index}} disabled{{end}}" data-modal-id="delete-ssh" data-url="{{$.Link}}/delete?type=ssh" data-id="{{.ID}}"{{if index $.ExternalKeys $index}} title="{{$.locale.Tr "settings.ssh_externally_managed"}}"{{end}}> - {{$.locale.Tr "settings.delete_key"}} - </button> - {{if and (not .Verified) (ne $.VerifyingFingerprint .Fingerprint)}} - <a class="ui primary tiny button" href="{{$.Link}}?verify_ssh={{.Fingerprint}}">{{$.locale.Tr "settings.ssh_key_verify"}}</a> - {{end}} - - </div> - <div class="left floated content"> + <div class="flex-item"> + <div class="flex-item-leading"> <span class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{$.locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span> </div> - <div class="content"> + <div class="flex-item-main"> {{if .Verified}} - <span data-tooltip-content="{{$.locale.Tr "settings.ssh_key_verified_long"}}">{{svg "octicon-verified"}} <strong>{{$.locale.Tr "settings.ssh_key_verified"}}</strong></span> + <div class="flex-item-title flex-text-block" data-tooltip-content="{{$.locale.Tr "settings.ssh_key_verified_long"}}">{{svg "octicon-verified"}}{{$.locale.Tr "settings.ssh_key_verified"}}</div> {{end}} - <strong>{{.Name}}</strong> - <div class="print meta"> + <div class="flex-item-title">{{.Name}}</div> + <div class="flex-item-body"> {{.Fingerprint}} </div> - <div class="activity meta"> - <i>{{$.locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> + <div class="flex-item-body"> + <i>{{$.locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}} — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="text green"{{end}}>{{DateTime "short" .UpdatedUnix}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i> </div> </div> + <div class="flex-item-trailing"> + <button class="ui red tiny button delete-button{{if index $.ExternalKeys $index}} disabled{{end}}" data-modal-id="delete-ssh" data-url="{{$.Link}}/delete?type=ssh" data-id="{{.ID}}"{{if index $.ExternalKeys $index}} title="{{$.locale.Tr "settings.ssh_externally_managed"}}"{{end}}> + {{$.locale.Tr "settings.delete_key"}} + </button> + {{if and (not .Verified) (ne $.VerifyingFingerprint .Fingerprint)}} + <a class="ui primary tiny button" href="{{$.Link}}?verify_ssh={{.Fingerprint}}">{{$.locale.Tr "settings.ssh_key_verify"}}</a> + {{end}} + </div> </div> {{if and (not .Verified) (eq $.VerifyingFingerprint .Fingerprint)}} <div class="ui segment"> diff --git a/templates/user/settings/organization.tmpl b/templates/user/settings/organization.tmpl index 9b6d0f66c5..7a4ea17cb2 100644 --- a/templates/user/settings/organization.tmpl +++ b/templates/user/settings/organization.tmpl @@ -10,10 +10,19 @@ </h4> <div class="ui attached segment orgs"> {{if .Orgs}} - <div class="ui middle aligned divided list"> + <div class="flex-list"> {{range .Orgs}} - <div class="item"> - <div class="right floated content"> + <div class="flex-item"> + <div class="flex-item-leading"> + {{avatar $.Context . 28 "mini"}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title">{{template "shared/user/name" .}}</div> + <div class="flex-text-body"> + {{.Description}} + </div> + </div> + <div class="flex-item-trailing"> <form> {{$.CsrfTokenHtml}} <button class="ui red button delete-button" data-modal-id="leave-organization" @@ -23,10 +32,6 @@ </button> </form> </div> - <div class="content gt-df gt-ac gt-gap-3"> - {{avatar $.Context . 28 "mini"}} - <a class="muted" href="{{.HomeLink}}">{{.Name}}</a> - </div> </div> {{end}} </div> diff --git a/templates/user/settings/security/accountlinks.tmpl b/templates/user/settings/security/accountlinks.tmpl index 515806d7a8..f64277b5af 100644 --- a/templates/user/settings/security/accountlinks.tmpl +++ b/templates/user/settings/security/accountlinks.tmpl @@ -21,21 +21,29 @@ </h4> <div class="ui attached segment"> - <div class="ui key list"> - <div class="item"> + <div class="flex-list"> + <div class="flex-item"> {{.locale.Tr "settings.manage_account_links_desc"}} </div> {{range $loginSource, $provider := .AccountLinks}} - <div class="item gt-df gt-ac"> - <div class="gt-f1"> - <span data-tooltip-content="{{$provider}}"> + <div class="flex-item"> + {{$providerData := index $.OAuth2Providers $loginSource.Name}} + <div class="flex-item-leading"> + {{$providerData.IconHTML}} + </div> + <div class="flex-item-main"> + <span class="flex-item-title" data-tooltip-content="{{$provider}}"> {{$loginSource.Name}} - {{if $loginSource.IsActive}}<span class="text primary">{{$.locale.Tr "repo.settings.active"}}</span>{{end}} </span> + {{if $loginSource.IsActive}} + <span class="flex-text-body text primary">{{$.locale.Tr "repo.settings.active"}}</span> + {{end}} + </div> + <div class="flex-item-trailing"> + <button class="ui red tiny button delete-button" data-modal-id="delete-account-link" data-url="{{AppSubUrl}}/user/settings/security/account_link" data-id="{{$loginSource.ID}}"> + {{$.locale.Tr "settings.delete_key"}} + </button> </div> - <button class="ui red tiny button delete-button" data-modal-id="delete-account-link" data-url="{{AppSubUrl}}/user/settings/security/account_link" data-id="{{$loginSource.ID}}"> - {{$.locale.Tr "settings.delete_key"}} - </button> </div> {{end}} </div> diff --git a/templates/user/settings/security/openid.tmpl b/templates/user/settings/security/openid.tmpl index dae49dcd89..86cb161bce 100644 --- a/templates/user/settings/security/openid.tmpl +++ b/templates/user/settings/security/openid.tmpl @@ -2,19 +2,20 @@ {{.locale.Tr "settings.manage_openid"}} </h4> <div class="ui attached segment"> - <div class="ui openid list"> - <div class="item"> + <div class="flex-list"> + <div class="flex-item"> {{.locale.Tr "settings.openid_desc"}} </div> {{range .OpenIDs}} - <div class="item"> - <div class="right floated content"> - <button class="ui red tiny button delete-button" data-modal-id="delete-openid" data-url="{{AppSubUrl}}/user/settings/security/openid/delete" data-id="{{.ID}}"> - {{$.locale.Tr "settings.delete_key"}} - </button> + <div class="flex-item flex-item-center"> + <div class="flex-item-leading"> + {{svg "fontawesome-openid" 20}} </div> - <div class="right floated content"> - <form action="{{AppSubUrl}}/user/settings/security/openid/toggle_visibility" method="post"> + <div class="flex-item-main"> + <div class="flex-item-title">{{.URI}}</div> + </div> + <div class="flex-item-trailing"> + <form action="{{AppSubUrl}}/user/settings/security/openid/toggle_visibility" method="post"> {{$.CsrfTokenHtml}} <input name="id" type="hidden" value="{{.ID}}"> {{if .Show}} @@ -28,11 +29,11 @@ {{$.locale.Tr "settings.show_openid"}} </button> {{end}} - </form> - </div> - <div class="content"> - <strong>{{.URI}}</strong> - </div> + </form> + <button class="ui red tiny button delete-button" data-modal-id="delete-openid" data-url="{{AppSubUrl}}/user/settings/security/openid/delete" data-id="{{.ID}}"> + {{$.locale.Tr "settings.delete_key"}} + </button> + </div> </div> {{end}} </div> diff --git a/templates/user/settings/security/webauthn.tmpl b/templates/user/settings/security/webauthn.tmpl index 16551307c1..676754df59 100644 --- a/templates/user/settings/security/webauthn.tmpl +++ b/templates/user/settings/security/webauthn.tmpl @@ -2,18 +2,21 @@ <div class="ui attached segment"> <p>{{.locale.Tr "settings.webauthn_desc" | Str2html}}</p> {{template "user/auth/webauthn_error" .}} - <div class="ui key list"> + <div class="flex-list"> {{range .WebAuthnCredentials}} - <div class="item"> - <div class="right floated content"> + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg "octicon-key" 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title">{{.Name}}</div> + <span class="flex-item-body time">{{TimeSinceUnix .CreatedUnix $.locale}}</span> + </div> + <div class="flex-item-trailing"> <button class="ui red tiny button delete-button" data-modal-id="delete-registration" data-url="{{$.Link}}/webauthn/delete" data-id="{{.ID}}"> {{$.locale.Tr "settings.delete_key"}} </button> </div> - <div class="content"> - <strong>{{.Name}}</strong> - </div> - <span class="time">{{TimeSinceUnix .CreatedUnix $.locale}}</span> </div> {{end}} </div> |