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 | |
| 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>
46 files changed, 934 insertions, 999 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> diff --git a/tests/integration/auth_ldap_test.go b/tests/integration/auth_ldap_test.go index 25395f5721..cf4c66734a 100644 --- a/tests/integration/auth_ldap_test.go +++ b/tests/integration/auth_ldap_test.go @@ -387,7 +387,7 @@ func TestLDAPUserSSHKeySync(t *testing.T) { htmlDoc := NewHTMLParser(t, resp.Body) - divs := htmlDoc.doc.Find(".key.list .print.meta") + divs := htmlDoc.doc.Find("#keys-ssh .flex-item .flex-item-body:not(:last-child)") syncedKeys := make([]string, divs.Length()) for i := 0; i < divs.Length(); i++ { diff --git a/tests/integration/issue_test.go b/tests/integration/issue_test.go index b712e16f29..58577a37ff 100644 --- a/tests/integration/issue_test.go +++ b/tests/integration/issue_test.go @@ -30,9 +30,9 @@ import ( ) func getIssuesSelection(t testing.TB, htmlDoc *HTMLDoc) *goquery.Selection { - issueList := htmlDoc.doc.Find(".issue.list") + issueList := htmlDoc.doc.Find("#issue-list") assert.EqualValues(t, 1, issueList.Length()) - return issueList.Find("li").Find(".title") + return issueList.Find(".flex-item").Find(".issue-title") } func getIssue(t *testing.T, repoID int64, issueSelection *goquery.Selection) *issues_model.Issue { diff --git a/tests/integration/privateactivity_test.go b/tests/integration/privateactivity_test.go index 5d3291bfe3..8c95d7c8a6 100644 --- a/tests/integration/privateactivity_test.go +++ b/tests/integration/privateactivity_test.go @@ -58,7 +58,7 @@ func testPrivateActivityHelperEnablePrivateActivity(t *testing.T) { } func testPrivateActivityHelperHasVisibleActivitiesInHTMLDoc(htmlDoc *HTMLDoc) bool { - return htmlDoc.doc.Find(".feeds").Find(".news").Length() > 0 + return htmlDoc.doc.Find("#activity-feed").Find(".flex-item").Length() > 0 } func testPrivateActivityHelperHasVisibleActivitiesFromSession(t *testing.T, session *TestSession) bool { diff --git a/tests/integration/setting_test.go b/tests/integration/setting_test.go index a824bd7f2f..9dad9ca716 100644 --- a/tests/integration/setting_test.go +++ b/tests/integration/setting_test.go @@ -24,7 +24,7 @@ func TestSettingShowUserEmailExplore(t *testing.T) { resp := session.MakeRequest(t, req, http.StatusOK) htmlDoc := NewHTMLParser(t, resp.Body) assert.Contains(t, - htmlDoc.doc.Find(".ui.user.list").Text(), + htmlDoc.doc.Find(".explore.users").Text(), "user34@example.com", ) @@ -34,7 +34,7 @@ func TestSettingShowUserEmailExplore(t *testing.T) { resp = session.MakeRequest(t, req, http.StatusOK) htmlDoc = NewHTMLParser(t, resp.Body) assert.NotContains(t, - htmlDoc.doc.Find(".ui.user.list").Text(), + htmlDoc.doc.Find(".explore.users").Text(), "user34@example.com", ) diff --git a/web_src/css/actions.css b/web_src/css/actions.css index 31da79cabf..f081698c66 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -52,3 +52,18 @@ background-color: var(--color-yellow); color: var(--color-white); } + +.run-list-item-right { + flex: 0 0 15%; + display: flex; + flex-direction: column; + gap: 3px; + color: var(--color-text-light); +} + +.run-list-item-right .run-list-meta { + display: flex; + flex-wrap: nowrap; + gap: .25rem; + align-items: center; +} diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css index 34428c5999..1eb480845b 100644 --- a/web_src/css/dashboard.css +++ b/web_src/css/dashboard.css @@ -96,61 +96,13 @@ } } -.feeds .news li { - display: flex; - align-items: baseline; - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -.feeds .news li img { - align-self: flex-start; -} - -.feeds .news li > * + * { - margin-left: 0.35rem; -} - -.feeds .news > .ui.grid { - margin-left: auto; - margin-right: auto; -} - -.feeds .news .left .ui.avatar { - margin-top: 13px; -} - -.feeds .news .time-since { - font-size: 13px; -} - -.feeds .news .issue.title { - width: 80%; - margin: 0 0 1em; -} - -.feeds .news .push.news .content ul { - line-height: 18px; - font-size: 13px; - list-style: none; - padding-left: 10px; -} - -.feeds .news .push.news .content ul .text.truncate { - width: 80%; -} - -.feeds .news .commit-id { +.feeds .commit-id { font-family: var(--fonts-monospace); } -.feeds .news code { +.feeds code { padding: 2px 4px; border-radius: 3px; background-color: var(--color-markup-code-block); word-break: break-all; } - -.feeds .news:last-of-type .divider { - display: none !important; -} diff --git a/web_src/css/explore.css b/web_src/css/explore.css index 139dfcb19f..08858337c0 100644 --- a/web_src/css/explore.css +++ b/web_src/css/explore.css @@ -10,33 +10,6 @@ margin-right: 5px; } -.ui.repository.list .item { - padding-bottom: 1.5rem; -} - -.ui.repository.list .item:not(:first-child) { - border-top: 1px solid var(--color-secondary); - padding-top: 1.5rem; -} - -.ui.repository.list .item .ui.header { - font-size: 1.5rem; - margin-bottom: 0.5rem; -} - -.ui.repository.list .item .ui.header .name { - word-break: break-all; -} - -.ui.repository.list .item .time { - font-size: 12px; -} - -.ui.repository.list .repo-title .labels { - word-break: normal; - flex-shrink: 0; -} - .ui.repository.branches .info { font-size: 12px; color: var(--color-text-light); @@ -58,27 +31,3 @@ .ui.repository.branches table .ui.popup { text-align: left; } - -.ui.user.list .item { - padding-bottom: 25px; - display: flex; -} - -.ui.user.list .item:not(:first-child) { - border-top: 1px solid var(--color-secondary); - padding-top: 25px; -} - -.ui.user.list .item img.ui.avatar { - width: 40px; - height: 40px; - margin-right: 10px; -} - -.ui.user.list .item .description { - margin-top: 5px; -} - -.ui.user.list .item .description .svg:not(:first-child) { - margin-left: 5px; -} diff --git a/web_src/css/index.css b/web_src/css/index.css index 230e032ac0..55ea67453b 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -13,7 +13,7 @@ @import "./modules/svg.css"; @import "./modules/flexcontainer.css"; -@import "./shared/issuelist.css"; +@import "./shared/flex-list.css"; @import "./shared/milestone.css"; @import "./shared/repoorg.css"; @import "./shared/settings.css"; diff --git a/web_src/css/org.css b/web_src/css/org.css index 9e1fa38941..4bb3b0cd57 100644 --- a/web_src/css/org.css +++ b/web_src/css/org.css @@ -133,7 +133,6 @@ padding: 10px 15px; } -.organization.teams .members .ui.avatar, .organization.profile .members .ui.avatar { width: 48px; height: 48px; @@ -161,25 +160,6 @@ height: 100%; } -.organization.members .list .item { - margin-left: 0; - margin-right: 0; - border-bottom: 1px solid var(--color-secondary); -} - -.organization.members .list .item .ui.avatar { - width: 48px; - height: 48px; - margin-right: 1rem; - align-self: flex-start; -} - -.organization.members .list .item .meta { - line-height: 24px; - word-break: break-word; - min-width: 2em; -} - .organization.teams .detail .item { padding: 10px 15px; } @@ -188,22 +168,6 @@ border-bottom: 1px solid var(--color-secondary); } -.organization.teams .repositories .item, -.organization.teams .members .item { - padding: 10px 19px; -} - -.organization.teams .repositories .item:not(:last-child), -.organization.teams .members .item:not(:last-child) { - border-bottom: 1px solid var(--color-secondary); -} - -.organization.teams .repositories .item .button, -.organization.teams .members .item .button { - padding: 9px 10px; - margin: 0; -} - .org-team-navbar .active.item { background: var(--color-box-body) !important; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 04cb4eed2d..efa412dc53 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -584,15 +584,6 @@ min-width: 100px; } -.repository.options .danger .item { - padding: 20px 15px; -} - -.repository.options .danger .ui.divider { - margin: 0; - border-color: var(--color-error-border); -} - .repository.new.issue .comment.form .comment .avatar { width: 3em; } @@ -1927,15 +1918,6 @@ flex-wrap: wrap; } -.repository.settings.collaboration .collaborator.list { - padding: 0; -} - -.repository.settings.collaboration .collaborator.list > .item { - margin: 0; - line-height: 2; -} - .repository.settings.collaboration #repo-collab-form #search-user-box .results { left: 7px; } @@ -2389,15 +2371,6 @@ padding: 10px 0 0; } -.settings .list.key .meta { - padding-top: 5px; - color: var(--color-text-light-2); -} - -.settings .list.collaborator > .item { - padding: 0; -} - .ui.vertical.menu .header.item { font-size: 1.1em; background: var(--color-box-header); diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css index 7769a16f5f..2a0a86c081 100644 --- a/web_src/css/repo/issue-list.css +++ b/web_src/css/repo/issue-list.css @@ -32,3 +32,36 @@ order: 2 !important; } } + +#issue-list .flex-item-body .branches { + display: inline-flex; +} + +#issue-list .flex-item-body .branches .branch { + background-color: var(--color-secondary-alpha-40); + border-radius: 3px; + padding: 0 4px; +} + +#issue-list .flex-item-body .branches .truncated-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 10em; +} + +#issue-list .flex-item-body .checklist progress { + margin-left: 2px; + width: 80px; + height: 6px; + display: inline-block; + border-radius: 3px; +} + +#issue-list .flex-item-body .checklist progress::-webkit-progress-value { + background-color: var(--color-secondary-dark-4); +} + +#issue-list .flex-item-body .checklist progress::-moz-progress-bar { + background-color: var(--color-secondary-dark-4); +}
\ No newline at end of file diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css new file mode 100644 index 0000000000..7982241684 --- /dev/null +++ b/web_src/css/shared/flex-list.css @@ -0,0 +1,94 @@ +.flex-list { + list-style: none; +} + +.flex-item { + display: flex; + gap: 8px; + align-items: flex-start; +} + +.flex-item:not(:last-child) { + padding-bottom: 8px; +} + +.flex-item-baseline { + align-items: baseline; +} + +.flex-item-center { + align-items: center; +} + +.flex-item .flex-item-leading { + display: flex; + align-items: flex-start; +} + +.flex-item .flex-item-main { + display: flex; + flex-direction: column; + flex-grow: 1; + min-width: 0; +} + +.flex-item-header { + display: flex; + gap: .25rem; + justify-content: space-between; + flex-wrap: wrap; +} + +.flex-item a:not(.label, .button):hover { + color: var(--color-primary) !important; +} + +.flex-item .flex-item-icon svg { + margin-top: 1px; +} + +.flex-item .flex-item-trailing { + display: flex; + gap: 0.5rem; + align-items: center; + flex-grow: 0; + flex-wrap: wrap; + justify-content: end; + flex-shrink: 2; +} + +.flex-item .flex-item-title { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + gap: .25rem; + max-width: 100%; + color: var(--color-text); + font-size: 16px; + min-width: 0; + font-weight: var(--font-weight-semibold); +} + +.flex-item .flex-item-title a { + color: var(--color-text); + overflow-wrap: anywhere; +} + +.flex-item .flex-item-body { + font-size: 13px; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .25rem; + color: var(--color-text-light-2); +} + +.flex-item .flex-item-body a { + color: inherit; + overflow-wrap: anywhere; +} + +.flex-list > .flex-item + .flex-item { + border-top: 1px solid var(--color-secondary); + padding-top: 8px; +} diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css deleted file mode 100644 index 82fafedec0..0000000000 --- a/web_src/css/shared/issuelist.css +++ /dev/null @@ -1,134 +0,0 @@ -.issue.list { - list-style: none; - margin-top: 1rem; -} - -.issue.list .item { - display: flex; - align-items: baseline; - padding: 8px 0; -} - -.issue.list .item .issue-item-left { - display: flex; - align-items: flex-start; -} - -.issue.list .item .issue-item-main { - display: flex; - flex-direction: column; - width: 100%; -} - -.issue.list .item .issue-item-header { - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; -} - -.issue.list a:not(.label):hover { - color: var(--color-primary) !important; -} - -.issue.list > .item .issue-item-icon svg { - margin-right: 0.75rem; - margin-top: 1px; -} - -.issue.list .item .issue-item-right { - display: flex; - gap: 0.5rem; -} - -.issue.list > .action-item { - align-items: normal; -} - -.issue.list > .item .action-item-center { - display: flex; - align-items: center; - padding-left: 4px; - padding-right: 12px; -} - -.issue.list > .item .action-item-right { - flex: 0 0 15%; - display: flex; - flex-direction: column; - gap: 3px; - color: var(--color-text-light); -} - -.issue.list > .item .issue-item-title { - max-width: 100%; - color: var(--color-text); - font-size: 16px; - min-width: 0; - font-weight: var(--font-weight-semibold); -} - -.issue.list > .item .issue-item-title a.index { - max-width: fit-content; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - word-break: break-all; -} - -.issue.list > .item .title { - color: var(--color-text); - overflow-wrap: anywhere; -} - -.issue.list > .item .issue-item-body { - font-size: 13px; - display: flex; - align-items: center; - flex-wrap: wrap; - gap: .25rem; - color: var(--color-text-light-2); -} - -.issue.list > .item .issue-item-body a { - color: inherit; - word-break: break-word; -} - -.issue.list > .item .issue-item-body .checklist progress { - margin-left: 2px; - width: 80px; - height: 6px; - display: inline-block; - border-radius: 3px; -} - -.issue.list > .item .issue-item-body .checklist progress::-webkit-progress-value { - background-color: var(--color-secondary-dark-4); -} - -.issue.list > .item .issue-item-body .checklist progress::-moz-progress-bar { - background-color: var(--color-secondary-dark-4); -} - -.issue.list .branches { - display: inline-flex; -} - -.issue.list .branches .branch { - background-color: var(--color-secondary-alpha-40); - border-radius: 3px; - padding: 0 4px; -} - -.issue.list .branches .truncated-name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 10em; -} - -.issue.list > .item + .item { - border-top: 1px solid var(--color-secondary); -} diff --git a/web_src/css/user.css b/web_src/css/user.css index ab94c826b2..33e64bbb7c 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -58,15 +58,6 @@ } } -.user.profile .ui.repository.list { - margin-top: 25px; -} - -.user.profile .ui.repository.list .repo-title .labels { - word-break: normal; - flex-shrink: 0; -} - .user.profile #loading-heatmap { margin-bottom: 1em; } |