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 | |
| 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')
32 files changed, 783 insertions, 685 deletions
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 8b31957f2e..9e15e3c1bc 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -253,5 +253,63 @@ {{template "shared/combomarkdowneditor" .}} </div> <script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script> + + <div> + <h1>Flex List</h1> + <div class="flex-list"> + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg "octicon-info" 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title"> + Flex Item + <span class="ui basic label"> + with label + </span> + </div> + <div class="flex-item-body"> + consists of leading/main/trailing part + </div> + <div class="flex-item-body"> + main part contains title and (multiple) body lines + </div> + </div> + <div class="flex-item-trailing"> + <button class="ui tiny red button"> + {{svg "octicon-warning" 12}} Button + </button> + <button class="ui tiny green button"> + {{svg "octicon-info" 12}} Button + </button> + </div> + </div> + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg "octicon-repo" 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-header"> + <div class="flex-item-title"> + <a class="text primary" href="{{$.Link}}"> + gitea-org / gitea + </a> + <span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span> + </div> + <div class="flex-item-trailing"> + <a class="muted" href="{{$.Link}}"> + <span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: aqua"></i>Go</span> + </a> + <a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a> + <a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a> + </div> + </div> + <div class="flex-item-body"> + when inside header, the trailing part will wrap below the title + </div> + </div> + </div> + </div> + </div> </div> {{template "base/footer" .}} diff --git a/templates/explore/organizations.tmpl b/templates/explore/organizations.tmpl index ecf7f21bdd..ea788b149b 100644 --- a/templates/explore/organizations.tmpl +++ b/templates/explore/organizations.tmpl @@ -1,38 +1 @@ -{{template "base/head" .}} -<div role="main" aria-label="{{.Title}}" class="page-content explore users"> - {{template "explore/navbar" .}} - <div class="ui container"> - {{template "explore/search" .}} - - <div class="ui user list"> - {{range .Users}} - <div class="item"> - {{avatar $.Context .}} - <div class="content"> - <span class="header"> - <a href="{{.HomeLink}}">{{.Name}}</a> {{.FullName}} - {{if .Visibility.IsPrivate}} - <span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span> - {{end}} - </span> - <div class="description"> - {{if .Location}} - {{svg "octicon-location"}} {{.Location}} - {{end}} - {{if and .Website}} - {{svg "octicon-link"}} - <a href="{{.Website}}" rel="nofollow">{{.Website}}</a> - {{end}} - {{svg "octicon-calendar"}} {{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}} - </div> - </div> - </div> - {{else}} - <div>{{$.locale.Tr "explore.org_no_results"}}</div> - {{end}} - </div> - - {{template "base/paginate" .}} - </div> -</div> -{{template "base/footer" .}} +{{template "explore/users" .}} diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl index 47e9921332..44f7900327 100644 --- a/templates/explore/repo_list.tmpl +++ b/templates/explore/repo_list.tmpl @@ -1,66 +1,72 @@ -<div class="ui repository list"> +<div class="flex-list"> {{range .Repos}} - <div class="item"> - <div class="ui header gt-df gt-ac"> - <div class="repo-title"> - {{$avatar := (repoAvatar . 32 "gt-mr-3")}} - {{if $avatar}} - {{$avatar}} - {{end}} - <a class="name" href="{{.Link}}"> - {{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}} - </a> - <div class="labels gt-df gt-ac gt-fw gt-mr-3"> - {{if .IsArchived}} - <span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span> - {{end}} - {{if .IsTemplate}} - {{if .IsPrivate}} - <span class="ui basic label">{{$.locale.Tr "repo.desc.private_template"}}</span> - {{else}} - {{if .Owner.Visibility.IsPrivate}} - <span class="ui basic label">{{$.locale.Tr "repo.desc.internal_template"}}</span> - {{end}} + <div class="flex-item"> + <div class="flex-item-leading"> + {{$avatar := (repoAvatar . 32)}} + {{if $avatar}} + {{$avatar}} + {{else}} + {{template "repo/icon" .}} + {{end}} + </div> + <div class="flex-item-main"> + <div class="flex-item-header"> + <div class="flex-item-title"> + <a class="text primary name" href="{{.Link}}"> + {{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}} + </a> + <span class="label-list"> + {{if .IsArchived}} + <span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span> {{end}} - {{else}} - {{if .IsPrivate}} - <span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span> + {{if .IsTemplate}} + {{if .IsPrivate}} + <span class="ui basic label">{{$.locale.Tr "repo.desc.private_template"}}</span> + {{else}} + {{if .Owner.Visibility.IsPrivate}} + <span class="ui basic label">{{$.locale.Tr "repo.desc.internal_template"}}</span> + {{end}} + {{end}} {{else}} - {{if .Owner.Visibility.IsPrivate}} - <span class="ui basic label">{{$.locale.Tr "repo.desc.internal"}}</span> + {{if .IsPrivate}} + <span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span> + {{else}} + {{if .Owner.Visibility.IsPrivate}} + <span class="ui basic label">{{$.locale.Tr "repo.desc.internal"}}</span> + {{end}} {{end}} {{end}} - {{end}} + </span> {{if .IsFork}} - <span class="gt-df" data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span> + <span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span> {{else if .IsMirror}} - <span class="gt-df" data-tooltip-content="{{$.locale.Tr "mirror"}}">{{svg "octicon-mirror"}}</span> + <span data-tooltip-content="{{$.locale.Tr "mirror"}}">{{svg "octicon-mirror"}}</span> {{end}} </div> + <div class="flex-item-trailing"> + {{if .PrimaryLanguage}} + <a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}"> + <span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span> + </a> + {{end}} + {{if not $.DisableStars}} + <a class="text grey flex-text-inline" href="{{.Link}}/stars">{{svg "octicon-star" 16}}{{.NumStars}}</a> + {{end}} + <a class="text grey flex-text-inline" href="{{.Link}}/forks">{{svg "octicon-git-branch" 16}}{{.NumForks}}</a> + </div> </div> - <div class="gt-font-13 gt-df gt-ac text grey"> - {{if .PrimaryLanguage}} - <a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}"> - <span class="gt-df gt-ac gt-mr-3"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span> - </a> - {{end}} - {{if not $.DisableStars}} - <a class="text grey gt-df gt-ac gt-mr-3" href="{{.Link}}/stars">{{svg "octicon-star" 16 "gt-mr-3"}}{{.NumStars}}</a> - {{end}} - <a class="text grey gt-df gt-ac gt-mr-3" href="{{.Link}}/forks">{{svg "octicon-git-branch" 16 "gt-mr-3"}}{{.NumForks}}</a> - </div> - </div> - <div class="description"> {{$description := .DescriptionHTML $.Context}} - {{if $description}}<p>{{$description}}</p>{{end}} + {{if $description}} + <div class="flex-item-body">{{$description}}</div> + {{end}} {{if .Topics}} - <div class="gt-df gt-fw gt-gap-2 gt-mb-3"> + <div class="label-list"> {{range .Topics}} {{if ne . ""}}<a class="ui label" href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1">{{.}}</a>{{end}} {{end}} </div> {{end}} - <p class="time">{{$.locale.Tr "org.repo_updated"}} {{TimeSinceUnix .UpdatedUnix $.locale}}</p> + <div class="flex-item-body">{{$.locale.Tr "org.repo_updated"}} {{TimeSinceUnix .UpdatedUnix $.locale}}</div> </div> </div> {{else}} diff --git a/templates/explore/users.tmpl b/templates/explore/users.tmpl index e3318479bb..5e150f692f 100644 --- a/templates/explore/users.tmpl +++ b/templates/explore/users.tmpl @@ -4,26 +4,35 @@ <div class="ui container"> {{template "explore/search" .}} - <div class="ui user list"> + <div class="flex-list"> {{range .Users}} - <div class="item"> - {{avatar $.Context .}} - <div class="content"> - <span class="header"><a href="{{.HomeLink}}">{{.Name}}</a> {{.FullName}}</span> - <div class="description"> + <div class="flex-item flex-item-center"> + <div class="flex-item-leading"> + {{avatar $.Context . 48}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title"> + {{template "shared/user/name" .}} + {{if .Visibility.IsPrivate}} + <span class="ui basic tiny label">{{$.locale.Tr "repo.desc.private"}}</span> + {{end}} + </div> + <div class="flex-item-body"> {{if .Location}} - {{svg "octicon-location"}} {{.Location}} + <span class="flex-text-inline">{{svg "octicon-location"}}{{.Location}}</span> {{end}} {{if and $.ShowUserEmail .Email $.IsSigned (not .KeepEmailPrivate)}} - {{svg "octicon-mail"}} - <a href="mailto:{{.Email}}" rel="nofollow">{{.Email}}</a> + <span class="flex-text-inline"> + {{svg "octicon-mail"}} + <a href="mailto:{{.Email}}" rel="nofollow">{{.Email}}</a> + </span> {{end}} - {{svg "octicon-calendar"}} {{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}} + <span class="flex-text-inline">{{svg "octicon-calendar"}}{{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}}</span> </div> </div> </div> {{else}} - <div>{{$.locale.Tr "explore.user_no_results"}}</div> + <div class="flex-item">{{$.locale.Tr "explore.user_no_results"}}</div> {{end}} </div> diff --git a/templates/org/member/members.tmpl b/templates/org/member/members.tmpl index 3d5b3beebd..13b7d964f7 100644 --- a/templates/org/member/members.tmpl +++ b/templates/org/member/members.tmpl @@ -1,49 +1,31 @@ {{template "base/head" .}} -<div role="main" aria-label="{{.Title}}" class="page-content organization members"> +<div role="main" aria-label="{{.Title}}" class="page-content organization"> {{template "org/header" .}} <div class="ui container"> {{template "base/alert" .}} - <div class="list"> + <div class="flex-list"> {{range .Members}} - <div class="item ui grid"> - <div class="ui four wide column gt-df"> + {{$isPublic := index $.MembersIsPublicMember .ID}} + <div class="flex-item {{if $.PublicOnly}}flex-item-center{{end}}"> + <div class="flex-item-leading"> <a href="{{.HomeLink}}">{{avatar $.Context . 48}}</a> - <div> - <div class="meta"><a href="{{.HomeLink}}">{{.Name}}</a></div> - <div class="meta">{{.FullName}}</div> - </div> </div> - <div class="ui four wide column center"> - <div class="meta"> - {{$.locale.Tr "org.members.membership_visibility"}} - </div> - <div class="meta"> - {{$isPublic := index $.MembersIsPublicMember .ID}} - {{if $isPublic}} - <strong>{{$.locale.Tr "org.members.public"}}</strong> - {{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}}(<a class="link-action" href data-url="{{$.OrgLink}}/members/action/private?uid={{.ID}}">{{$.locale.Tr "org.members.public_helper"}}</a>){{end}} - {{else}} - <strong>{{$.locale.Tr "org.members.private"}}</strong> - {{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}}(<a class="link-action" href data-url="{{$.OrgLink}}/members/action/public?uid={{.ID}}">{{$.locale.Tr "org.members.private_helper"}}</a>){{end}} + <div class="flex-item-main"> + <div class="flex-item-title"> + {{template "shared/user/name" .}} + {{if not $isPublic}} + <span class="ui basic tiny label">{{$.locale.Tr "org.members.private"}}</span> {{end}} </div> - </div> - {{if not $.PublicOnly}} - <div class="ui three wide column center"> - <div class="meta"> + {{if not $.PublicOnly}} + <div class="flex-item-body"> {{$.locale.Tr "org.members.member_role"}} + <strong class="flex-text-inline">{{if index $.MembersIsUserOrgOwner .ID}}{{svg "octicon-shield-lock"}} {{$.locale.Tr "org.members.owner"}}{{else}}{{$.locale.Tr "org.members.member"}}{{end}}</strong> </div> - <div class="meta"> - <strong>{{if index $.MembersIsUserOrgOwner .ID}}{{svg "octicon-shield-lock"}} {{$.locale.Tr "org.members.owner"}}{{else}}{{$.locale.Tr "org.members.member"}}{{end}}</strong> - </div> - </div> - <div class="ui two wide column center"> {{if $.IsOrganizationOwner}} - <div class="meta"> + <div class="flex-item-body"> {{$.locale.Tr "admin.users.2fa"}} - </div> - <div class="meta"> <strong> {{if index $.MembersTwoFaStatus .ID}} <span class="text green">{{svg "octicon-check"}}</span> @@ -53,26 +35,31 @@ </strong> </div> {{end}} - </div> - {{end}} - <div class="ui three wide column gt-df gt-ac gt-je"> - <div class="text right"> - {{if eq $.SignedUser.ID .ID}} - <form> - <button class="ui red small button delete-button" data-modal-id="leave-organization" - data-url="{{$.OrgLink}}/members/action/leave" data-datauid="{{.ID}}" - data-name="{{.DisplayName}}" - data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.leave"}}</button> - </form> - {{else if $.IsOrganizationOwner}} - <form> - <button class="ui red small button delete-button" data-modal-id="remove-organization-member" - data-url="{{$.OrgLink}}/members/action/remove" data-datauid="{{.ID}}" - data-name="{{.DisplayName}}" - data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.remove"}}</button> - </form> + {{end}} + </div> + <div class="flex-item-trailing"> + {{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}} + {{if $isPublic}} + <a class="ui tiny button link-action" href data-url="{{$.OrgLink}}/members/action/private?uid={{.ID}}">{{svg "octicon-eye-closed" 12 "icon"}}{{$.locale.Tr "org.members.public_helper"}}</a> + {{else}} + <a class="ui tiny button link-action" href data-url="{{$.OrgLink}}/members/action/public?uid={{.ID}}">{{svg "octicon-eye" 12 "icon"}}{{$.locale.Tr "org.members.private_helper"}}</a> {{end}} - </div> + {{end}} + {{if eq $.SignedUser.ID .ID}} + <form> + <button class="ui red tiny button delete-button" data-modal-id="leave-organization" + data-url="{{$.OrgLink}}/members/action/leave" data-datauid="{{.ID}}" + data-name="{{.DisplayName}}" + data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.leave"}}</button> + </form> + {{else if $.IsOrganizationOwner}} + <form> + <button class="ui red tiny button delete-button" data-modal-id="remove-organization-member" + data-url="{{$.OrgLink}}/members/action/remove" data-datauid="{{.ID}}" + data-name="{{.DisplayName}}" + data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.remove"}}</button> + </form> + {{end}} </div> </div> {{end}} diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl index 6bd258955d..4a97763d9a 100644 --- a/templates/org/team/members.tmpl +++ b/templates/org/team/members.tmpl @@ -21,27 +21,35 @@ </form> </div> {{end}} - <div class="ui bottom attached table segment members"> - {{range .Team.Members}} - <div class="item gt-df gt-ac gt-fw"> - <a href="{{.HomeLink}}">{{avatar $.Context . 48 "gt-mr-3 gt-mb-0"}}</a> - <a class="gt-f1" href="{{.HomeLink}}"> - <strong>{{.DisplayName}}</strong> - </a> - {{if and $.IsOrganizationOwner (not (and ($.Team.IsOwnerTeam) (eq (len $.Team.Members) 1)))}} - <form> - <button class="ui red button delete-button" data-modal-id="remove-team-member" - data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove" data-datauid="{{.ID}}" - data-name="{{.DisplayName}}" - data-data-team-name="{{$.Team.Name}}">{{$.locale.Tr "org.members.remove"}}</button> - </form> - {{end}} - </div> - {{else}} - <div class="item"> - <span class="text grey italic">{{$.locale.Tr "org.teams.members.none"}}</span> - </div> - {{end}} + <div class="ui attached segment"> + <div class="flex-list"> + {{range .Team.Members}} + <div class="flex-item flex-item-center"> + <div class="flex-item-leading"> + <a href="{{.HomeLink}}">{{avatar $.Context . 32}}</a> + </div> + <div class="flex-item-main"> + <div class="flex-item-title"> + {{template "shared/user/name" .}} + </div> + </div> + <div class="flex-item-trailing"> + {{if and $.IsOrganizationOwner (not (and ($.Team.IsOwnerTeam) (eq (len $.Team.Members) 1)))}} + <form> + <button class="ui red button delete-button" data-modal-id="remove-team-member" + data-url="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove" data-datauid="{{.ID}}" + data-name="{{.DisplayName}}" + data-data-team-name="{{$.Team.Name}}">{{$.locale.Tr "org.members.remove"}}</button> + </form> + {{end}} + </div> + </div> + {{else}} + <div class="flex-item"> + <span class="text grey italic">{{$.locale.Tr "org.teams.members.none"}}</span> + </div> + {{end}} + </div> </div> {{if and .Invites $.IsOrganizationOwner}} <h4 class="ui top attached header">{{$.locale.Tr "org.teams.invite_team_member.list"}}</h4> diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl index 83e238016a..698b0a91ba 100644 --- a/templates/org/team/repositories.tmpl +++ b/templates/org/team/repositories.tmpl @@ -25,33 +25,38 @@ </div> </div> {{end}} - <div class="ui bottom attached table segment repositories"> - {{range .Team.Repos}} - <div class="item gt-df gt-ac gt-fw"> - {{if .IsPrivate}} - {{svg "octicon-lock" 16 "gt-mr-3"}} - {{else if .IsFork}} - {{svg "octicon-repo-forked" 16 "gt-mr-3"}} - {{else if .IsMirror}} - {{svg "octicon-mirror" 16 "gt-mr-3"}} - {{else}} - {{svg "octicon-repo" 16 "gt-mr-3"}} - {{end}} - <a class="member gt-f1" href="{{$.Org.HomeLink}}/{{.Name | PathEscape}}"> - <strong>{{$.Org.Name}}/{{.Name}}</strong> - </a> - {{if $canAddRemove}} - <form method="post" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/remove"> - {{$.CsrfTokenHtml}} - <button type="submit" class="ui red small button right" name="repoid" value="{{.ID}}">{{$.locale.Tr "remove"}}</button> - </form> - {{end}} - </div> - {{else}} - <div class="item"> - <span class="text grey italic">{{$.locale.Tr "org.teams.repos.none"}}</span> - </div> - {{end}} + <div class="ui attached segment"> + <div class="flex-list"> + {{range .Team.Repos}} + <div class="flex-item flex-item-center"> + <div class="flex-item-leading"> + {{$avatar := (repoAvatar . 32)}} + {{if $avatar}} + {{$avatar}} + {{else}} + {{template "repo/icon" .}} + {{end}} + </div> + <div class="flex-item-main"> + <a class="flex-item-title text primary" href="{{$.Org.HomeLink}}/{{.Name | PathEscape}}"> + {{$.Org.Name}}/{{.Name}} + </a> + </div> + <div class="flex-item-trailing"> + {{if $canAddRemove}} + <form method="post" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/remove"> + {{$.CsrfTokenHtml}} + <button type="submit" class="ui red small button right" name="repoid" value="{{.ID}}">{{$.locale.Tr "remove"}}</button> + </form> + {{end}} + </div> + </div> + {{else}} + <div class="flex-item"> + <span class="text grey italic">{{$.locale.Tr "org.teams.repos.none"}}</span> + </div> + {{end}} + </div> </div> </div> </div> diff --git a/templates/package/shared/cleanup_rules/list.tmpl b/templates/package/shared/cleanup_rules/list.tmpl index 485bff562e..e2af344817 100644 --- a/templates/package/shared/cleanup_rules/list.tmpl +++ b/templates/package/shared/cleanup_rules/list.tmpl @@ -5,10 +5,41 @@ </div> </h4> <div class="ui attached segment"> - <div class="ui key list"> + <div class="flex-list"> {{range .CleanupRules}} - <div class="item"> - <div class="right floated content"> + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg .Type.SVGName 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title"> + <a class="item" href="{{$.Link}}/rules/{{.ID}}">{{.Type.Name}}</a> + </div> + <div class="flex-item-body"> + <i>{{if .Enabled}}{{$.locale.Tr "enabled"}}{{else}}{{$.locale.Tr "disabled"}}{{end}}</i> + </div> + {{if .KeepCount}} + <div class="flex-item-body"> + <i>{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count"}}:</i> {{if eq .KeepCount 1}}{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count.1"}}{{else}}{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count.n" .KeepCount}}{{end}} + </div> + {{end}} + {{if .KeepPattern}} + <div class="flex-item-body"> + <i>{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.pattern"}}:</i> {{StringUtils.EllipsisString .KeepPattern 100}} + </div> + {{end}} + {{if .RemoveDays}} + <div class="flex-item-body"> + <i>{{$.locale.Tr "packages.owner.settings.cleanuprules.remove.days"}}:</i> {{$.locale.Tr "tool.days" .RemoveDays}} + </div> + {{end}} + {{if .RemovePattern}} + <div class="flex-item-body"> + <i>{{$.locale.Tr "packages.owner.settings.cleanuprules.remove.pattern"}}:</i> {{StringUtils.EllipsisString .RemovePattern 100}} + </div> + {{end}} + </div> + <div class="flex-item-trailing"> <div class="ui dropdown tiny basic button"> {{svg "octicon-kebab-horizontal"}} <div class="menu"> @@ -17,15 +48,6 @@ </div> </div> </div> - <i class="icon">{{svg .Type.SVGName 36}}</i> - <div class="content"> - <a class="item" href="{{$.Link}}/rules/{{.ID}}"><strong>{{.Type.Name}}</strong></a> - <div><i>{{if .Enabled}}{{$.locale.Tr "enabled"}}{{else}}{{$.locale.Tr "disabled"}}{{end}}</i></div> - {{if .KeepCount}}<div><i>{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count"}}:</i> {{if eq .KeepCount 1}}{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count.1"}}{{else}}{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.count.n" .KeepCount}}{{end}}</div>{{end}} - {{if .KeepPattern}}<div><i>{{$.locale.Tr "packages.owner.settings.cleanuprules.keep.pattern"}}:</i> {{StringUtils.EllipsisString .KeepPattern 100}}</div>{{end}} - {{if .RemoveDays}}<div><i>{{$.locale.Tr "packages.owner.settings.cleanuprules.remove.days"}}:</i> {{$.locale.Tr "tool.days" .RemoveDays}}</div>{{end}} - {{if .RemovePattern}}<div><i>{{$.locale.Tr "packages.owner.settings.cleanuprules.remove.pattern"}}:</i> {{StringUtils.EllipsisString .RemovePattern 100}}</div>{{end}} - </div> </div> {{else}} <div class="item">{{.locale.Tr "packages.owner.settings.cleanuprules.none"}}</div> diff --git a/templates/package/shared/list.tmpl b/templates/package/shared/list.tmpl index 79a2d885fb..d2370b1208 100644 --- a/templates/package/shared/list.tmpl +++ b/templates/package/shared/list.tmpl @@ -12,15 +12,15 @@ <button class="ui primary button">{{.locale.Tr "explore.search"}}</button> </div> </form> -<div class="ui {{if .PackageDescriptors}}issue list{{end}}"> +<div class="{{if .PackageDescriptors}}flex-list{{end}} gt-pt-4"> {{range .PackageDescriptors}} - <li class="item"> - <div class="issue-item-main"> - <div class="issue-item-title"> - <a class="title" href="{{.FullWebLink}}">{{.Package.Name}}</a> + <div class="flex-item"> + <div class="flex-item-main"> + <div class="flex-item-title"> + <a href="{{.FullWebLink}}">{{.Package.Name}}</a> <span class="ui label">{{svg .Package.Type.SVGName 16}} {{.Package.Type.Name}}</span> </div> - <div class="issue-item-body"> + <div class="flex-item-body"> {{$timeStr := TimeSinceUnix .Version.CreatedUnix $.locale}} {{$hasRepositoryAccess := false}} {{if .Repository}} @@ -33,10 +33,10 @@ {{end}} </div> </div> - </li> + </div> {{else}} {{if not .HasPackages}} - <div class="gt-pt-5 empty center"> + <div class="empty center"> {{svg "octicon-package" 48}} <h2>{{.locale.Tr "packages.empty"}}</h2> {{if and .Repository .CanWritePackages}} diff --git a/templates/package/shared/versionlist.tmpl b/templates/package/shared/versionlist.tmpl index feba8ef145..897f4d716a 100644 --- a/templates/package/shared/versionlist.tmpl +++ b/templates/package/shared/versionlist.tmpl @@ -18,18 +18,16 @@ <button class="ui primary button">{{.locale.Tr "explore.search"}}</button> </div> </form> -<div class="ui {{if .PackageDescriptors}}issue list{{end}}"> +<div class="{{if .PackageDescriptors}}flex-list{{end}} gt-pt-4"> {{range .PackageDescriptors}} - <li class="item"> - <div class="issue-item-main"> - <div class="issue-item-title"> - <a class="title" href="{{.FullWebLink}}">{{.Version.LowerVersion}}</a> - </div> - <div class="issue-item-body"> + <div class="flex-item"> + <div class="flex-item-main"> + <a class="flex-item-title" href="{{.FullWebLink}}">{{.Version.LowerVersion}}</a> + <div class="flex-item-body"> {{$.locale.Tr "packages.published_by" (TimeSinceUnix .Version.CreatedUnix $.locale) .Creator.HomeLink (.Creator.GetDisplayName | Escape) | Safe}} </div> </div> - </li> + </div> {{else}} <p>{{.locale.Tr "packages.filter.no_result"}}</p> {{end}} diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl index 87b5ed69de..1a45733b77 100644 --- a/templates/repo/actions/runs_list.tmpl +++ b/templates/repo/actions/runs_list.tmpl @@ -1,4 +1,4 @@ -<div class="issue list gt-m-0"> +<div class="flex-list gt-m-0"> {{if eq (len .Runs) 0}} <div class="empty center"> {{svg "octicon-no-entry" 48}} @@ -6,17 +6,15 @@ </div> {{end}} {{range .Runs}} - <li class="item action-item"> - <div class="issue-item-left issue-item-icon"> + <div class="flex-item flex-item-center"> + <div class="flex-item-leading"> {{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}} </div> - <div class="issue-item-main action-item-main"> - <div class="issue-item-title"> - <a class="index gt-no-underline title action-item-title" title="{{.Title}}" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> - {{- .Title -}} - </a> - </div> - <div class="issue-item-body"> + <div class="flex-item-main"> + <a class="flex-item-title" title="{{.Title}}" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> + {{- .Title -}} + </a> + <div class="flex-item-body"> <b>{{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}}</b> : {{$.locale.Tr "actions.runs.commit"}} <a href="{{$.RepoLink}}/commit/{{.CommitSHA}}">{{ShortSha .CommitSHA}}</a> @@ -24,18 +22,18 @@ <a href="{{.TriggerUser.HomeLink}}">{{.TriggerUser.GetDisplayName}}</a> </div> </div> - <div class="action-item-center"> + <div class="flex-item-trailing"> {{if .RefLink}} <a class="ui label gt-px-2 gt-mx-0" href="{{.RefLink}}">{{.PrettyRef}}</a> {{else}} <span class="ui label gt-px-2 gt-mx-0">{{.PrettyRef}}</span> {{end}} </div> - <div class="action-item-right"> - <div class="flex-text-block">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated $.locale}}</div> - <div class="flex-text-block">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div> + <div class="run-list-item-right"> + <div class="run-list-meta">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated $.locale}}</div> + <div class="run-list-meta">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div> </div> - </li> + </div> {{end}} </div> {{template "base/paginate" .}} diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index b119c31948..865f3ba4a7 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -8,7 +8,9 @@ {{if $avatar}} {{$avatar}} {{else}} - {{template "repo/icon" .}} + <div class="gt-mr-3"> + {{template "repo/icon" .}} + </div> {{end}} <a href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a> <div class="gt-mx-2">/</div> diff --git a/templates/repo/icon.tmpl b/templates/repo/icon.tmpl index e956745153..a37197d42a 100644 --- a/templates/repo/icon.tmpl +++ b/templates/repo/icon.tmpl @@ -1,4 +1,4 @@ -<div class="repo-icon gt-mr-3"> +<div class="repo-icon"> {{if $.IsTemplate}} {{svg "octicon-repo-template" 32}} {{else}} diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl index f8a0270db3..fcc3615ced 100644 --- a/templates/repo/settings/branches.tmpl +++ b/templates/repo/settings/branches.tmpl @@ -38,26 +38,27 @@ </div> </h4> - <div class="ui attached table segment"> - <div class="ui grid padded"> - <div class="sixteen wide column"> - <table class="ui single line table padded"> - <tbody> - {{range .ProtectedBranches}} - <tr> - <td><div class="ui basic primary label">{{.RuleName}}</div></td> - <td class="right aligned"> - <a class="rm ui button" href="{{$.Repository.Link}}/settings/branches/edit?rule_name={{.RuleName}}">{{$.locale.Tr "repo.settings.edit_protected_branch"}}</a> - <button class="ui red tiny button delete-button" data-url="{{$.Repository.Link}}/settings/branches/{{.ID}}/delete" data-id="{{.ID}}"> - {{$.locale.Tr "repo.settings.protected_branch.delete_rule"}}</button> - </td> - </tr> - {{else}} - <tr class="center aligned"><td>{{.locale.Tr "repo.settings.no_protected_branch"}}</td></tr> - {{end}} - </tbody> - </table> - </div> + <div class="ui attached segment"> + <div class="flex-list"> + {{range .ProtectedBranches}} + <div class="flex-item flex-item-center"> + <div class="flex-item-main"> + <div class="flex-item-title"> + <div class="ui basic primary label">{{.RuleName}}</div> + </div> + </div> + <div class="flex-item-trailing"> + <a class="rm ui tiny button" href="{{$.Repository.Link}}/settings/branches/edit?rule_name={{.RuleName}}">{{$.locale.Tr "repo.settings.edit_protected_branch"}}</a> + <button class="ui red tiny button delete-button" data-url="{{$.Repository.Link}}/settings/branches/{{.ID}}/delete" data-id="{{.ID}}"> + {{$.locale.Tr "repo.settings.protected_branch.delete_rule"}} + </button> + </div> + </div> + {{else}} + <div class="flex-item center aligned"> + {{.locale.Tr "repo.settings.no_protected_branch"}} + </div> + {{end}} </div> </div> {{end}} diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl index 84f23ee0bd..0716489291 100644 --- a/templates/repo/settings/collaboration.tmpl +++ b/templates/repo/settings/collaboration.tmpl @@ -4,34 +4,38 @@ {{.locale.Tr "repo.settings.collaboration"}} </h4> {{if .Collaborators}} - <div class="ui attached segment collaborator list"> - {{range .Collaborators}} - <div class="item ui grid"> - <div class="ui five wide column"> - <a href="{{.HomeLink}}"> - {{avatar $.Context .}} - {{.DisplayName}} - </a> - </div> - <div class="ui eight wide computer five wide mobile column"> - {{svg "octicon-shield-lock"}} - <div class="ui inline dropdown access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{printf "%d" .Collaboration.Mode}}"> - <div class="text">{{if eq .Collaboration.Mode 1}}{{$.locale.Tr "repo.settings.collaboration.read"}}{{else if eq .Collaboration.Mode 2}}{{$.locale.Tr "repo.settings.collaboration.write"}}{{else if eq .Collaboration.Mode 3}}{{$.locale.Tr "repo.settings.collaboration.admin"}}{{else}}{{$.locale.Tr "repo.settings.collaboration.undefined"}}{{end}}</div> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - <div class="menu"> - <div class="item" data-text="{{$.locale.Tr "repo.settings.collaboration.admin"}}" data-value="3">{{$.locale.Tr "repo.settings.collaboration.admin"}}</div> - <div class="item" data-text="{{$.locale.Tr "repo.settings.collaboration.write"}}" data-value="2">{{$.locale.Tr "repo.settings.collaboration.write"}}</div> - <div class="item" data-text="{{$.locale.Tr "repo.settings.collaboration.read"}}" data-value="1">{{$.locale.Tr "repo.settings.collaboration.read"}}</div> + <div class="ui attached segment"> + <div class="flex-list"> + {{range .Collaborators}} + <div class="flex-item flex-item-center"> + <div class="flex-item-leading"> + <a href="{{.HomeLink}}">{{avatar $.Context . 32}}</a> + </div> + <div class="flex-item-main"> + <div class="flex-item-title"> + {{template "shared/user/name" .}} </div> </div> + <div class="flex-item-trailing"> + <div class="flex-text-block"> + {{svg "octicon-shield-lock"}} + <div class="ui inline dropdown access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{printf "%d" .Collaboration.Mode}}"> + <div class="text">{{if eq .Collaboration.Mode 1}}{{$.locale.Tr "repo.settings.collaboration.read"}}{{else if eq .Collaboration.Mode 2}}{{$.locale.Tr "repo.settings.collaboration.write"}}{{else if eq .Collaboration.Mode 3}}{{$.locale.Tr "repo.settings.collaboration.admin"}}{{else}}{{$.locale.Tr "repo.settings.collaboration.undefined"}}{{end}}</div> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + <div class="menu"> + <div class="item" data-text="{{$.locale.Tr "repo.settings.collaboration.admin"}}" data-value="3">{{$.locale.Tr "repo.settings.collaboration.admin"}}</div> + <div class="item" data-text="{{$.locale.Tr "repo.settings.collaboration.write"}}" data-value="2">{{$.locale.Tr "repo.settings.collaboration.write"}}</div> + <div class="item" data-text="{{$.locale.Tr "repo.settings.collaboration.read"}}" data-value="1">{{$.locale.Tr "repo.settings.collaboration.read"}}</div> + </div> + </div> + </div> + <button class="ui red tiny button inline text-thin delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"> + {{$.locale.Tr "repo.settings.delete_collaborator"}} + </button> + </div> </div> - <div class="ui two wide column"> - <button class="ui red tiny button inline text-thin delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"> - {{$.locale.Tr "repo.settings.delete_collaborator"}} - </button> - </div> - </div> - {{end}} + {{end}} + </div> </div> {{end}} <div class="ui bottom attached segment"> @@ -54,35 +58,35 @@ </h4> {{$allowedToChangeTeams := (or (.Org.RepoAdminChangeTeamAccess) (.Permission.IsOwner))}} {{if .Teams}} - <div class="ui attached segment collaborator list"> - {{range $t, $team := .Teams}} - <div class="item ui grid"> - <div class="ui five wide column"> - <a href="{{AppSubUrl}}/org/{{$.OrgName|PathEscape}}/teams/{{.LowerName|PathEscape}}"> - {{.Name}} - </a> - </div> - <div class="ui eight wide computer five wide mobile column" data-tooltip-content="{{$.locale.Tr "repo.settings.change_team_permission_tip"}}"> - {{svg "octicon-shield-lock"}} - <div class="ui inline dropdown"> - <div class="text">{{if eq .AccessMode 1}}{{$.locale.Tr "repo.settings.collaboration.read"}}{{else if eq .AccessMode 2}}{{$.locale.Tr "repo.settings.collaboration.write"}}{{else if eq .AccessMode 3}}{{$.locale.Tr "repo.settings.collaboration.admin"}}{{else if eq .AccessMode 4}}{{$.locale.Tr "repo.settings.collaboration.owner"}}{{else}}{{$.locale.Tr "repo.settings.collaboration.undefined"}}{{end}}</div> + <div class="ui attached segment"> + <div class="flex-list"> + {{range $t, $team := .Teams}} + <div class="flex-item"> + <div class="flex-item-main"> + <a class="flex-item-title text primary" href="{{AppSubUrl}}/org/{{$.OrgName|PathEscape}}/teams/{{.LowerName|PathEscape}}"> + {{.Name}} + </a> + <div class="flex-item-body flex-text-block"> + {{svg "octicon-shield-lock"}} + {{if eq .AccessMode 1}}{{$.locale.Tr "repo.settings.collaboration.read"}}{{else if eq .AccessMode 2}}{{$.locale.Tr "repo.settings.collaboration.write"}}{{else if eq .AccessMode 3}}{{$.locale.Tr "repo.settings.collaboration.admin"}}{{else if eq .AccessMode 4}}{{$.locale.Tr "repo.settings.collaboration.owner"}}{{else}}{{$.locale.Tr "repo.settings.collaboration.undefined"}}{{end}} + </div> + {{if or (eq .AccessMode 1) (eq .AccessMode 2)}} + {{$first := true}} + <div class="flex-item-body" data-tooltip-content="{{$.locale.Tr "repo.settings.change_team_permission_tip"}}"> + Sections: {{range $u, $unit := $.Units}}{{if and ($.Repo.UnitEnabled $.Context $unit.Type) ($team.UnitEnabled $.Context $unit.Type)}}{{if $first}}{{$first = false}}{{else}}, {{end}}{{$.locale.Tr $unit.NameKey}}{{end}}{{end}} {{if $first}}None{{end}} + </div> + {{end}} </div> - {{if or (eq .AccessMode 1) (eq .AccessMode 2)}} - {{$first := true}} - <div class="description"> - Sections: {{range $u, $unit := $.Units}}{{if and ($.Repo.UnitEnabled $.Context $unit.Type) ($team.UnitEnabled $.Context $unit.Type)}}{{if $first}}{{$first = false}}{{else}}, {{end}}{{$.locale.Tr $unit.NameKey}}{{end}}{{end}} {{if $first}}None{{end}} + {{if $allowedToChangeTeams}} + <div class="flex-item-trailing" {{if .IncludesAllRepositories}} data-tooltip-content="{{$.locale.Tr "repo.settings.delete_team_tip"}}"{{end}}> + <button class="ui red tiny button inline text-thin delete-button {{if .IncludesAllRepositories}}disabled{{end}}" data-url="{{$.Link}}/team/delete" data-id="{{.ID}}"> + {{$.locale.Tr "repo.settings.delete_collaborator"}} + </button> </div> {{end}} </div> - {{if $allowedToChangeTeams}} - <div class="ui two wide column" {{if .IncludesAllRepositories}} data-tooltip-content="{{$.locale.Tr "repo.settings.delete_team_tip"}}"{{end}}> - <button class="ui red tiny button inline text-thin delete-button {{if .IncludesAllRepositories}}disabled{{end}}" data-url="{{$.Link}}/team/delete" data-id="{{.ID}}"> - {{$.locale.Tr "repo.settings.delete_collaborator"}} - </button> - </div> - {{end}} - </div> - {{end}} + {{end}} + </div> </div> {{end}} <div class="ui bottom attached segment"> diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl index 621e1fa01e..10e79f6b82 100644 --- a/templates/repo/settings/deploy_keys.tmpl +++ b/templates/repo/settings/deploy_keys.tmpl @@ -43,26 +43,26 @@ </form> </div> {{if .Deploykeys}} - <div class="ui key list"> + <div class="flex-list"> {{range .Deploykeys}} - <div class="item"> - <div class="right floated content"> - <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"> - {{$.locale.Tr "settings.delete_key"}} - </button> - </div> - <div class="left floated content"> - <i class="text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{$.locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</i> + <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"> - <strong>{{.Name}}</strong> - <div class="print meta"> + <div class="flex-item-main"> + <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}} - <span>{{$.locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{$.locale.Tr "settings.can_write_info"}} {{end}}</span></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}} - <span>{{$.locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{$.locale.Tr "settings.can_write_info"}} {{end}}</span></i> </div> </div> + <div class="flex-item-trailing"> + <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"> + {{$.locale.Tr "settings.delete_key"}} + </button> + </div> </div> {{end}} </div> diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index ef72c0eadc..f0b030dc54 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -692,103 +692,96 @@ <h4 class="ui top attached error header"> {{.locale.Tr "repo.settings.danger_zone"}} </h4> - <div class="ui attached error table danger segment"> - {{if .Repository.IsMirror}} - <div class="item"> - <div class="ui right"> - <button class="ui basic red show-modal button" data-modal="#convert-mirror-repo-modal">{{.locale.Tr "repo.settings.convert"}}</button> + <div class="ui attached error danger segment"> + <div class="flex-list"> + {{if .Repository.IsMirror}} + <div class="flex-item"> + <div class="flex-item-main"> + <div class="flex-item-title">{{.locale.Tr "repo.settings.convert"}}</div> + <div class="flex-item-body">{{.locale.Tr "repo.settings.convert_desc"}}</div> + </div> + <div class="flex-item-trailing"> + <button class="ui basic red show-modal button" data-modal="#convert-mirror-repo-modal">{{.locale.Tr "repo.settings.convert"}}</button> + </div> </div> - <div> - <h5>{{.locale.Tr "repo.settings.convert"}}</h5> - <p>{{.locale.Tr "repo.settings.convert_desc"}}</p> + {{end}} + {{if and .Repository.IsFork .Repository.Owner.CanCreateRepo}} + <div class="flex-item"> + <div class="flex-item-main"> + <div class="flex-item-title">{{.locale.Tr "repo.settings.convert_fork"}}</div> + <div class="flex-item-body">{{.locale.Tr "repo.settings.convert_fork_desc"}}</div> + </div> + <div class="flex-item-trailing"> + <button class="ui basic red show-modal button" data-modal="#convert-fork-repo-modal">{{.locale.Tr "repo.settings.convert_fork"}}</button> + </div> </div> - </div> - <div class="divider"></div> - {{end}} - {{if and .Repository.IsFork .Repository.Owner.CanCreateRepo}} - <div class="item"> - <div class="ui right"> - <button class="ui basic red show-modal button" data-modal="#convert-fork-repo-modal">{{.locale.Tr "repo.settings.convert_fork"}}</button> + {{end}} + <div class="flex-item"> + <div class="flex-item-main"> + <div class="flex-item-title">{{.locale.Tr "repo.settings.transfer"}}</div> + <div class="flex-item-body"> + {{if .RepoTransfer}} + {{.locale.Tr "repo.settings.transfer_started" .RepoTransfer.Recipient.DisplayName}} + {{else}} + {{.locale.Tr "repo.settings.transfer_desc"}} + {{end}} + </div> </div> - <div> - <h5>{{.locale.Tr "repo.settings.convert_fork"}}</h5> - <p>{{.locale.Tr "repo.settings.convert_fork_desc"}}</p> + <div class="flex-item-trailing"> + {{if .RepoTransfer}} + <form class="ui form" action="{{.Link}}" method="post"> + {{.CsrfTokenHtml}} + <input type="hidden" name="action" value="cancel_transfer"> + <button class="ui red button">{{.locale.Tr "repo.settings.transfer_abort"}}</button> + </form> + {{else}} + <button class="ui basic red show-modal button" data-modal="#transfer-repo-modal">{{.locale.Tr "repo.settings.transfer"}}</button> + {{end}} </div> </div> - <div class="divider"></div> - {{end}} - <div class="item"> - <div class="ui right"> - {{if .RepoTransfer}} - <form class="ui form" action="{{.Link}}" method="post"> - {{.CsrfTokenHtml}} - <input type="hidden" name="action" value="cancel_transfer"> - <button class="ui red button">{{.locale.Tr "repo.settings.transfer_abort"}}</button> - </form> - {{else}} - <button class="ui basic red show-modal button" data-modal="#transfer-repo-modal">{{.locale.Tr "repo.settings.transfer"}}</button> - {{end}} - </div> - <div> - <h5>{{.locale.Tr "repo.settings.transfer"}}</h5> - {{if .RepoTransfer}} - <p>{{.locale.Tr "repo.settings.transfer_started" .RepoTransfer.Recipient.DisplayName}}</p> - {{else}} - <p>{{.locale.Tr "repo.settings.transfer_desc"}}</p> - {{end}} - </div> - </div> - - {{if .Permission.CanRead $.UnitTypeWiki}} - <div class="divider"></div> - - <div class="item"> - <div class="ui right"> - <button class="ui basic red show-modal button" data-modal="#delete-wiki-modal">{{.locale.Tr "repo.settings.wiki_delete"}}</button> + {{if .Permission.CanRead $.UnitTypeWiki}} + <div class="flex-item"> + <div class="flex-item-main"> + <div class="flex-item-title">{{.locale.Tr "repo.settings.wiki_delete"}}</div> + <div class="flex-item-body">{{.locale.Tr "repo.settings.wiki_delete_desc"}}</div> + </div> + <div class="flex-item-trailing"> + <button class="ui basic red show-modal button" data-modal="#delete-wiki-modal">{{.locale.Tr "repo.settings.wiki_delete"}}</button> + </div> </div> - <div> - <h5>{{.locale.Tr "repo.settings.wiki_delete"}}</h5> - <p>{{.locale.Tr "repo.settings.wiki_delete_desc"}}</p> + {{end}} + <div class="flex-item"> + <div class="flex-item-main"> + <div class="flex-item-title">{{.locale.Tr "repo.settings.delete"}}</div> + <div class="flex-item-body">{{.locale.Tr "repo.settings.delete_desc"}}</div> + </div> + <div class="flex-item-trailing"> + <button class="ui basic red show-modal button" data-modal="#delete-repo-modal">{{.locale.Tr "repo.settings.delete"}}</button> </div> </div> - {{end}} - - <div class="divider"></div> - - <div class="item"> - <div class="ui right"> - <button class="ui basic red show-modal button" data-modal="#delete-repo-modal">{{.locale.Tr "repo.settings.delete"}}</button> - </div> - <div> - <h5>{{.locale.Tr "repo.settings.delete"}}</h5> - <p>{{.locale.Tr "repo.settings.delete_desc"}}</p> - </div> - </div> - - {{if not .Repository.IsMirror}} - <div class="divider"></div> - - <div class="item"> - <div class="ui right"> - <button class="ui basic red show-modal button" data-modal="#archive-repo-modal"> + {{if not .Repository.IsMirror}} + <div class="flex-item flex-item-center"> + <div class="flex-item-main"> {{if .Repository.IsArchived}} - {{.locale.Tr "repo.settings.unarchive.button"}} + <div class="flex-item-title">{{.locale.Tr "repo.settings.unarchive.header"}}</div> + <div class="flex-item-body">{{.locale.Tr "repo.settings.unarchive.text"}}</div> {{else}} - {{.locale.Tr "repo.settings.archive.button"}} + <div class="flex-item-title">{{.locale.Tr "repo.settings.archive.header"}}</div> + <div class="flex-item-body">{{.locale.Tr "repo.settings.archive.text"}}</div> {{end}} - </button> - </div> - <div> - {{if .Repository.IsArchived}} - <h5>{{.locale.Tr "repo.settings.unarchive.header"}}</h5> - <p>{{.locale.Tr "repo.settings.unarchive.text"}}</p> - {{else}} - <h5>{{.locale.Tr "repo.settings.archive.header"}}</h5> - <p>{{.locale.Tr "repo.settings.archive.text"}}</p> - {{end}} + </div> + <div class="flex-item-trailing"> + <button class="ui basic red show-modal button" data-modal="#archive-repo-modal"> + {{if .Repository.IsArchived}} + {{.locale.Tr "repo.settings.unarchive.button"}} + {{else}} + {{.locale.Tr "repo.settings.archive.button"}} + {{end}} + </button> + </div> </div> - </div> - {{end}} + {{end}} + </div> </div> {{end}} </div> diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 7d80e04736..30e19baf7c 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -1,19 +1,19 @@ -<div class="issue list"> +<div id="issue-list" class="flex-list gt-pt-4"> {{$approvalCounts := .ApprovalCounts}} {{range .Issues}} - <li class="item"> - <div class="issue-item-left"> + <div class="flex-item flex-item-baseline"> + <div class="flex-item-leading gt-ac"> {{if $.CanWriteIssuesOrPulls}} - <input type="checkbox" autocomplete="off" class="issue-checkbox gt-mt-2 gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} "{{.Title}}""> + <input type="checkbox" autocomplete="off" class="issue-checkbox gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} "{{.Title}}""> {{end}} - <div class="issue-item-icon"> + <div class="flex-item-icon"> {{template "shared/issueicon" .}} </div> </div> - <div class="issue-item-main"> - <div class="issue-item-header"> - <div class="issue-item-title"> - <a class="title gt-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a> + <div class="flex-item-main"> + <div class="flex-item-header"> + <div class="flex-item-title"> + <a class="gt-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a> {{if .IsPull}} {{if (index $.CommitStatuses .PullRequest.ID)}} {{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID) "root" $}} @@ -26,7 +26,7 @@ </span> </div> {{if or .TotalTrackedTime .Assignees .NumComments}} - <div class="issue-item-right"> + <div class="flex-item-trailing"> {{if .TotalTrackedTime}} <div class="text grey flex-text-block"> {{svg "octicon-clock" 16}} @@ -52,7 +52,7 @@ </div> {{end}} </div> - <div class="issue-item-body"> + <div class="flex-item-body"> <a class="index" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> {{if eq $.listType "dashboard"}} {{.Repo.FullName}}#{{.Index}} @@ -149,7 +149,7 @@ {{end}} </div> </div> - </li> + </div> {{end}} {{if .IssueIndexerUnavailable}} <div class="ui error message"> diff --git a/templates/shared/secrets/add_list.tmpl b/templates/shared/secrets/add_list.tmpl index ce5351d22b..a80ec314d2 100644 --- a/templates/shared/secrets/add_list.tmpl +++ b/templates/shared/secrets/add_list.tmpl @@ -12,21 +12,23 @@ </h4> <div class="ui attached segment"> {{if .Secrets}} - <div class="ui key list"> - {{range $i, $v := .Secrets}} - <div class="item gt-df gt-ac gt-fw {{if gt $i 0}} gt-py-4{{end}}"> - <div class="content gt-f1 gt-df gt-js"> - <div class="content"> - <i>{{svg "octicon-key" 32}}</i> + <div class="flex-list"> + {{range .Secrets}} + <div class="flex-item flex-item-center"> + <div class="flex-item-leading"> + {{svg "octicon-key" 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title"> + {{.Name}} </div> - <div class="content gt-ml-3 gt-ellipsis"> - <strong>{{$v.Name}}</strong> - <div class="print meta">******</div> + <div class="flex-item-body"> + ****** </div> </div> - <div class="content"> - <span class="color-text-light-2 gt-mr-5"> - {{$.locale.Tr "settings.added_on" (DateTime "short" $v.CreatedUnix) | Safe}} + <div class="flex-item-trailing"> + <span class="color-text-light-2"> + {{$.locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}} </span> <button class="ui btn interact-bg link-action gt-p-3" data-url="{{$.Link}}/delete?id={{.ID}}" diff --git a/templates/shared/user/name.tmpl b/templates/shared/user/name.tmpl new file mode 100644 index 0000000000..343c762407 --- /dev/null +++ b/templates/shared/user/name.tmpl @@ -0,0 +1,5 @@ +{{if .FullName}} + {{.FullName}} <span>(<a class="text primary" href="{{.HomeLink}}">{{.Name}}</a>)</span> +{{else}} + <a class="text primary" href="{{.HomeLink}}">{{.Name}}</a> +{{end}} diff --git a/templates/shared/variables/variable_list.tmpl b/templates/shared/variables/variable_list.tmpl index 5941902dbb..e62025caaf 100644 --- a/templates/shared/variables/variable_list.tmpl +++ b/templates/shared/variables/variable_list.tmpl @@ -14,30 +14,37 @@ </h4> <div class="ui attached segment"> {{if .Variables}} - <div class="ui list"> - {{range $i, $v := .Variables}} - <div class="item gt-df gt-ac gt-fw {{if gt $i 0}} gt-py-4{{end}}"> - <div class="content gt-f1 gt-ellipsis"> - <strong>{{$v.Name}}</strong> - <div class="print meta gt-ellipsis">{{$v.Data}}</div> + <div class="flex-list"> + {{range .Variables}} + <div class="flex-item flex-item-center"> + <div class="flex-item-leading"> + {{svg "octicon-pencil" 32}} </div> - <div class="content"> - <span class="color-text-light-2 gt-mr-5"> - {{$.locale.Tr "settings.added_on" (DateTime "short" $v.CreatedUnix) | Safe}} + <div class="flex-item-main"> + <div class="flex-item-title"> + {{.Name}} + </div> + <div class="flex-item-body"> + {{.Data}} + </div> + </div> + <div class="flex-item-trailing"> + <span class="color-text-light-2"> + {{$.locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}} </span> <button class="btn interact-bg gt-p-3 show-modal" data-tooltip-content="{{$.locale.Tr "variables.edit"}}" data-modal="#edit-variable-modal" - data-modal-form.action="{{$.Link}}/{{$v.ID}}/edit" + data-modal-form.action="{{$.Link}}/{{.ID}}/edit" data-modal-header="{{$.locale.Tr "actions.variables.edit"}}" - data-modal-dialog-variable-name="{{$v.Name}}" - data-modal-dialog-variable-data="{{$v.Data}}" + data-modal-dialog-variable-name="{{.Name}}" + data-modal-dialog-variable-data="{{.Data}}" > {{svg "octicon-pencil"}} </button> <button class="btn interact-bg gt-p-3 link-action" data-tooltip-content="{{$.locale.Tr "actions.variables.deletion"}}" - data-url="{{$.Link}}/{{$v.ID}}/delete" + data-url="{{$.Link}}/{{.ID}}/delete" data-modal-confirm="{{$.locale.Tr "actions.variables.deletion.description"}}" > {{svg "octicon-trash"}} 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> |