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/member | |
| 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/member')
| -rw-r--r-- | templates/org/member/members.tmpl | 89 |
1 files changed, 38 insertions, 51 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}} |