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)
zjjhot · Aug 1, 2023 · 60900e0 · 60900e0
2 parents baea445 + b9baed2
commit 60900e0
Show file tree

Hide file tree

Showing 47 changed files with 938 additions and 999 deletions.
diff --git a/docs/content/contributing/guidelines-frontend.en-us.md b/docs/content/contributing/guidelines-frontend.en-us.md
@@ -133,3 +133,7 @@ A lot of legacy code already existed before this document's written. It's recomm
 ### Vue3 and JSX
 
 Gitea is using Vue3 now. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.
+
+### UI Examples
+
+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`.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}}