diff options
| author | Denys Konovalov <kontakt@denyskon.de> | 2023-08-01 00:13:42 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-01 00:13:42 +0200 |
| commit | b9baed2c74286710481886c5d1f3010e43840012 (patch) | |
| tree | e39bdc26d90aafc29a13f134db0fa424a8b37e87 /templates/org | |
| parent | fc6c3d626ef9f383c3ff7f774fcef0116de4f2e3 (diff) | |
| download | gitea-b9baed2c74286710481886c5d1f3010e43840012.tar.gz gitea-b9baed2c74286710481886c5d1f3010e43840012.zip | |
Introduce `flex-list` & `flex-item` elements for Gitea UI (#25790)
This PR introduces a new UI element type for Gitea called `flex-item`.
It consists of a horizontal card with a leading, main and trailing part:
The idea behind it is that in Gitea UI, we have many cases where we use
this kind of layout, but it is achieved in many different ways:
- grid layout
- `.ui.list` with additional hacky flexbox
- `.ui.key.list` - looks to me like a style set originally created for
ssh/gpg key list, was used in many other places
- `.issue.list` - created for issue cards, used in many other places
- ...
This new style is based on `.issue.list`, specifically the refactoring
of it done in #25750.
In this PR, the new element is introduced and lots of templates are
being refactored to use that style. This allows to remove a lot of
page-specific css, makes many of the elements responsive or simply
provides a cleaner/better-looking way to present information.
A devtest section with the new style is also available.
<details>
<summary>Screenshots (left: before, right: after)</summary>
</details>
---------
Co-authored-by: Giteabot <teabot@gitea.io>
Diffstat (limited to 'templates/org')
| -rw-r--r-- | templates/org/member/members.tmpl | 89 | ||||
| -rw-r--r-- | templates/org/team/members.tmpl | 50 | ||||
| -rw-r--r-- | templates/org/team/repositories.tmpl | 59 |
3 files changed, 99 insertions, 99 deletions
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> |