Skip to content

Commit 60900e0

Browse files
zjjhotzjjhot
committed
Merge remote-tracking branch 'upstream/main'
* upstream/main: Introduce `flex-list` & `flex-item` elements for Gitea UI (go-gitea#25790) Mention `devtest` in frontend contributing guidelines (go-gitea#26249)
2 parents baea445 + b9baed2 commit 60900e0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+938
-999
lines changed

‎docs/content/contributing/guidelines-frontend.en-us.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,3 +133,7 @@ A lot of legacy code already existed before this document's written. It's recomm
133133
### Vue3 and JSX
134134

135135
Gitea is using Vue3 now. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.
136+
137+
### UI Examples
138+
139+
Gitea uses some self-made UI elements and customizes others to integrate them better into the general UI approach. When running Gitea in development mode (`RUN_MODE=dev`), a page with some standardized UI examples is available under `http(s)://your-gitea-url:port/devtest`.

‎templates/devtest/gitea-ui.tmpl‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,5 +253,63 @@
253253
{{template "shared/combomarkdowneditor" .}}
254254
</div>
255255
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
256+
257+
<div>
258+
<h1>Flex List</h1>
259+
<div class="flex-list">
260+
<div class="flex-item">
261+
<div class="flex-item-leading">
262+
{{svg "octicon-info" 32}}
263+
</div>
264+
<div class="flex-item-main">
265+
<div class="flex-item-title">
266+
Flex Item
267+
<span class="ui basic label">
268+
with label
269+
</span>
270+
</div>
271+
<div class="flex-item-body">
272+
consists of leading/main/trailing part
273+
</div>
274+
<div class="flex-item-body">
275+
main part contains title and (multiple) body lines
276+
</div>
277+
</div>
278+
<div class="flex-item-trailing">
279+
<button class="ui tiny red button">
280+
{{svg "octicon-warning" 12}} Button
281+
</button>
282+
<button class="ui tiny green button">
283+
{{svg "octicon-info" 12}} Button
284+
</button>
285+
</div>
286+
</div>
287+
<div class="flex-item">
288+
<div class="flex-item-leading">
289+
{{svg "octicon-repo" 32}}
290+
</div>
291+
<div class="flex-item-main">
292+
<div class="flex-item-header">
293+
<div class="flex-item-title">
294+
<a class="text primary" href="{{$.Link}}">
295+
gitea-org / gitea
296+
</a>
297+
<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
298+
</div>
299+
<div class="flex-item-trailing">
300+
<a class="muted" href="{{$.Link}}">
301+
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: aqua"></i>Go</span>
302+
</a>
303+
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
304+
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
305+
</div>
306+
</div>
307+
<div class="flex-item-body">
308+
when inside header, the trailing part will wrap below the title
309+
</div>
310+
</div>
311+
</div>
312+
</div>
313+
</div>
256314
</div>
257315
{{template "base/footer" .}}

‎templates/explore/organizations.tmpl‎

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1 @@
1-
{{template "base/head" .}}
2-
<div role="main" aria-label="{{.Title}}" class="page-content explore users">
3-
{{template "explore/navbar" .}}
4-
<div class="ui container">
5-
{{template "explore/search" .}}
6-
7-
<div class="ui user list">
8-
{{range .Users}}
9-
<div class="item">
10-
{{avatar $.Context .}}
11-
<div class="content">
12-
<span class="header">
13-
<a href="{{.HomeLink}}">{{.Name}}</a> {{.FullName}}
14-
{{if .Visibility.IsPrivate}}
15-
<span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span>
16-
{{end}}
17-
</span>
18-
<div class="description">
19-
{{if .Location}}
20-
{{svg "octicon-location"}} {{.Location}}
21-
{{end}}
22-
{{if and .Website}}
23-
{{svg "octicon-link"}}
24-
<a href="{{.Website}}" rel="nofollow">{{.Website}}</a>
25-
{{end}}
26-
{{svg "octicon-calendar"}} {{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}}
27-
</div>
28-
</div>
29-
</div>
30-
{{else}}
31-
<div>{{$.locale.Tr "explore.org_no_results"}}</div>
32-
{{end}}
33-
</div>
34-
35-
{{template "base/paginate" .}}
36-
</div>
37-
</div>
38-
{{template "base/footer" .}}
1+
{{template "explore/users" .}}

‎templates/explore/repo_list.tmpl‎

Lines changed: 52 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,72 @@
1-
<div class="ui repository list">
1+
<div class="flex-list">
22
{{range .Repos}}
3-
<div class="item">
4-
<div class="ui header gt-df gt-ac">
5-
<div class="repo-title">
6-
{{$avatar := (repoAvatar . 32 "gt-mr-3")}}
7-
{{if $avatar}}
8-
{{$avatar}}
9-
{{end}}
10-
<a class="name" href="{{.Link}}">
11-
{{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
12-
</a>
13-
<div class="labels gt-df gt-ac gt-fw gt-mr-3">
14-
{{if .IsArchived}}
15-
<span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
16-
{{end}}
17-
{{if .IsTemplate}}
18-
{{if .IsPrivate}}
19-
<span class="ui basic label">{{$.locale.Tr "repo.desc.private_template"}}</span>
20-
{{else}}
21-
{{if .Owner.Visibility.IsPrivate}}
22-
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal_template"}}</span>
23-
{{end}}
3+
<div class="flex-item">
4+
<div class="flex-item-leading">
5+
{{$avatar := (repoAvatar . 32)}}
6+
{{if $avatar}}
7+
{{$avatar}}
8+
{{else}}
9+
{{template "repo/icon" .}}
10+
{{end}}
11+
</div>
12+
<div class="flex-item-main">
13+
<div class="flex-item-header">
14+
<div class="flex-item-title">
15+
<a class="text primary name" href="{{.Link}}">
16+
{{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
17+
</a>
18+
<span class="label-list">
19+
{{if .IsArchived}}
20+
<span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
2421
{{end}}
25-
{{else}}
26-
{{if .IsPrivate}}
27-
<span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span>
22+
{{if .IsTemplate}}
23+
{{if .IsPrivate}}
24+
<span class="ui basic label">{{$.locale.Tr "repo.desc.private_template"}}</span>
25+
{{else}}
26+
{{if .Owner.Visibility.IsPrivate}}
27+
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal_template"}}</span>
28+
{{end}}
29+
{{end}}
2830
{{else}}
29-
{{if .Owner.Visibility.IsPrivate}}
30-
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal"}}</span>
31+
{{if .IsPrivate}}
32+
<span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span>
33+
{{else}}
34+
{{if .Owner.Visibility.IsPrivate}}
35+
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal"}}</span>
36+
{{end}}
3137
{{end}}
3238
{{end}}
33-
{{end}}
39+
</span>
3440
{{if .IsFork}}
35-
<span class="gt-df" data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
41+
<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
3642
{{else if .IsMirror}}
37-
<span class="gt-df" data-tooltip-content="{{$.locale.Tr "mirror"}}">{{svg "octicon-mirror"}}</span>
43+
<span data-tooltip-content="{{$.locale.Tr "mirror"}}">{{svg "octicon-mirror"}}</span>
3844
{{end}}
3945
</div>
46+
<div class="flex-item-trailing">
47+
{{if .PrimaryLanguage}}
48+
<a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
49+
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
50+
</a>
51+
{{end}}
52+
{{if not $.DisableStars}}
53+
<a class="text grey flex-text-inline" href="{{.Link}}/stars">{{svg "octicon-star" 16}}{{.NumStars}}</a>
54+
{{end}}
55+
<a class="text grey flex-text-inline" href="{{.Link}}/forks">{{svg "octicon-git-branch" 16}}{{.NumForks}}</a>
56+
</div>
4057
</div>
41-
<div class="gt-font-13 gt-df gt-ac text grey">
42-
{{if .PrimaryLanguage}}
43-
<a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
44-
<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>
45-
</a>
46-
{{end}}
47-
{{if not $.DisableStars}}
48-
<a class="text grey gt-df gt-ac gt-mr-3" href="{{.Link}}/stars">{{svg "octicon-star" 16 "gt-mr-3"}}{{.NumStars}}</a>
49-
{{end}}
50-
<a class="text grey gt-df gt-ac gt-mr-3" href="{{.Link}}/forks">{{svg "octicon-git-branch" 16 "gt-mr-3"}}{{.NumForks}}</a>
51-
</div>
52-
</div>
53-
<div class="description">
5458
{{$description := .DescriptionHTML $.Context}}
55-
{{if $description}}<p>{{$description}}</p>{{end}}
59+
{{if $description}}
60+
<div class="flex-item-body">{{$description}}</div>
61+
{{end}}
5662
{{if .Topics}}
57-
<div class="gt-df gt-fw gt-gap-2 gt-mb-3">
63+
<div class="label-list">
5864
{{range .Topics}}
5965
{{if ne . ""}}<a class="ui label" href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1">{{.}}</a>{{end}}
6066
{{end}}
6167
</div>
6268
{{end}}
63-
<p class="time">{{$.locale.Tr "org.repo_updated"}} {{TimeSinceUnix .UpdatedUnix $.locale}}</p>
69+
<div class="flex-item-body">{{$.locale.Tr "org.repo_updated"}} {{TimeSinceUnix .UpdatedUnix $.locale}}</div>
6470
</div>
6571
</div>
6672
{{else}}

‎templates/explore/users.tmpl‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,35 @@
44
<div class="ui container">
55
{{template "explore/search" .}}
66

7-
<div class="ui user list">
7+
<div class="flex-list">
88
{{range .Users}}
9-
<div class="item">
10-
{{avatar $.Context .}}
11-
<div class="content">
12-
<span class="header"><a href="{{.HomeLink}}">{{.Name}}</a> {{.FullName}}</span>
13-
<div class="description">
9+
<div class="flex-item flex-item-center">
10+
<div class="flex-item-leading">
11+
{{avatar $.Context . 48}}
12+
</div>
13+
<div class="flex-item-main">
14+
<div class="flex-item-title">
15+
{{template "shared/user/name" .}}
16+
{{if .Visibility.IsPrivate}}
17+
<span class="ui basic tiny label">{{$.locale.Tr "repo.desc.private"}}</span>
18+
{{end}}
19+
</div>
20+
<div class="flex-item-body">
1421
{{if .Location}}
15-
{{svg "octicon-location"}} {{.Location}}
22+
<span class="flex-text-inline">{{svg "octicon-location"}}{{.Location}}</span>
1623
{{end}}
1724
{{if and $.ShowUserEmail .Email $.IsSigned (not .KeepEmailPrivate)}}
18-
{{svg "octicon-mail"}}
19-
<a href="mailto:{{.Email}}" rel="nofollow">{{.Email}}</a>
25+
<span class="flex-text-inline">
26+
{{svg "octicon-mail"}}
27+
<a href="mailto:{{.Email}}" rel="nofollow">{{.Email}}</a>
28+
</span>
2029
{{end}}
21-
{{svg "octicon-calendar"}} {{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}}
30+
<span class="flex-text-inline">{{svg "octicon-calendar"}}{{$.locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix) | Safe}}</span>
2231
</div>
2332
</div>
2433
</div>
2534
{{else}}
26-
<div>{{$.locale.Tr "explore.user_no_results"}}</div>
35+
<div class="flex-item">{{$.locale.Tr "explore.user_no_results"}}</div>
2736
{{end}}
2837
</div>
2938

‎templates/org/member/members.tmpl‎

Lines changed: 38 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,31 @@
11
{{template "base/head" .}}
2-
<div role="main" aria-label="{{.Title}}" class="page-content organization members">
2+
<div role="main" aria-label="{{.Title}}" class="page-content organization">
33
{{template "org/header" .}}
44
<div class="ui container">
55
{{template "base/alert" .}}
66

7-
<div class="list">
7+
<div class="flex-list">
88
{{range .Members}}
9-
<div class="item ui grid">
10-
<div class="ui four wide column gt-df">
9+
{{$isPublic := index $.MembersIsPublicMember .ID}}
10+
<div class="flex-item {{if $.PublicOnly}}flex-item-center{{end}}">
11+
<div class="flex-item-leading">
1112
<a href="{{.HomeLink}}">{{avatar $.Context . 48}}</a>
12-
<div>
13-
<div class="meta"><a href="{{.HomeLink}}">{{.Name}}</a></div>
14-
<div class="meta">{{.FullName}}</div>
15-
</div>
1613
</div>
17-
<div class="ui four wide column center">
18-
<div class="meta">
19-
{{$.locale.Tr "org.members.membership_visibility"}}
20-
</div>
21-
<div class="meta">
22-
{{$isPublic := index $.MembersIsPublicMember .ID}}
23-
{{if $isPublic}}
24-
<strong>{{$.locale.Tr "org.members.public"}}</strong>
25-
{{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}}
26-
{{else}}
27-
<strong>{{$.locale.Tr "org.members.private"}}</strong>
28-
{{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}}
14+
<div class="flex-item-main">
15+
<div class="flex-item-title">
16+
{{template "shared/user/name" .}}
17+
{{if not $isPublic}}
18+
<span class="ui basic tiny label">{{$.locale.Tr "org.members.private"}}</span>
2919
{{end}}
3020
</div>
31-
</div>
32-
{{if not $.PublicOnly}}
33-
<div class="ui three wide column center">
34-
<div class="meta">
21+
{{if not $.PublicOnly}}
22+
<div class="flex-item-body">
3523
{{$.locale.Tr "org.members.member_role"}}
24+
<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>
3625
</div>
37-
<div class="meta">
38-
<strong>{{if index $.MembersIsUserOrgOwner .ID}}{{svg "octicon-shield-lock"}} {{$.locale.Tr "org.members.owner"}}{{else}}{{$.locale.Tr "org.members.member"}}{{end}}</strong>
39-
</div>
40-
</div>
41-
<div class="ui two wide column center">
4226
{{if $.IsOrganizationOwner}}
43-
<div class="meta">
27+
<div class="flex-item-body">
4428
{{$.locale.Tr "admin.users.2fa"}}
45-
</div>
46-
<div class="meta">
4729
<strong>
4830
{{if index $.MembersTwoFaStatus .ID}}
4931
<span class="text green">{{svg "octicon-check"}}</span>
@@ -53,26 +35,31 @@
5335
</strong>
5436
</div>
5537
{{end}}
56-
</div>
57-
{{end}}
58-
<div class="ui three wide column gt-df gt-ac gt-je">
59-
<div class="text right">
60-
{{if eq $.SignedUser.ID .ID}}
61-
<form>
62-
<button class="ui red small button delete-button" data-modal-id="leave-organization"
63-
data-url="{{$.OrgLink}}/members/action/leave" data-datauid="{{.ID}}"
64-
data-name="{{.DisplayName}}"
65-
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.leave"}}</button>
66-
</form>
67-
{{else if $.IsOrganizationOwner}}
68-
<form>
69-
<button class="ui red small button delete-button" data-modal-id="remove-organization-member"
70-
data-url="{{$.OrgLink}}/members/action/remove" data-datauid="{{.ID}}"
71-
data-name="{{.DisplayName}}"
72-
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.remove"}}</button>
73-
</form>
38+
{{end}}
39+
</div>
40+
<div class="flex-item-trailing">
41+
{{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}}
42+
{{if $isPublic}}
43+
<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>
44+
{{else}}
45+
<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>
7446
{{end}}
75-
</div>
47+
{{end}}
48+
{{if eq $.SignedUser.ID .ID}}
49+
<form>
50+
<button class="ui red tiny button delete-button" data-modal-id="leave-organization"
51+
data-url="{{$.OrgLink}}/members/action/leave" data-datauid="{{.ID}}"
52+
data-name="{{.DisplayName}}"
53+
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.leave"}}</button>
54+
</form>
55+
{{else if $.IsOrganizationOwner}}
56+
<form>
57+
<button class="ui red tiny button delete-button" data-modal-id="remove-organization-member"
58+
data-url="{{$.OrgLink}}/members/action/remove" data-datauid="{{.ID}}"
59+
data-name="{{.DisplayName}}"
60+
data-data-organization-name="{{$.Org.DisplayName}}">{{$.locale.Tr "org.members.remove"}}</button>
61+
</form>
62+
{{end}}
7663
</div>
7764
</div>
7865
{{end}}

0 commit comments

Comments
 (0)