mirror of
				https://gitee.com/gitea/gitea
				synced 2025-11-04 16:40:24 +08:00 
			
		
		
		
	Improve branch list UI (#27319)
1. Put the `"octicon-shield-lock"` into the flex container, then it doesn't need a separate flex box 2. Remove some unnecessary `gt-df` helpers 3. Make `btn` button has the same flex behavior as `ui button`  
This commit is contained in:
		@@ -19,12 +19,10 @@
 | 
			
		||||
					<tbody>
 | 
			
		||||
						<tr>
 | 
			
		||||
							<td>
 | 
			
		||||
								<div class="gt-df gt-ac">
 | 
			
		||||
									{{if .DefaultBranchBranch.IsProtected}}
 | 
			
		||||
										<span class="gt-df gt-pr-2">{{svg "octicon-shield-lock"}}</span>
 | 
			
		||||
									{{end}}
 | 
			
		||||
								<div class="flex-text-block">
 | 
			
		||||
									{{if .DefaultBranchBranch.IsProtected}}{{svg "octicon-shield-lock"}}{{end}}
 | 
			
		||||
									<a class="gt-ellipsis" href="{{.RepoLink}}/src/branch/{{PathEscapeSegments .DefaultBranchBranch.DBBranch.Name}}">{{.DefaultBranchBranch.DBBranch.Name}}</a>
 | 
			
		||||
									<button class="btn interact-fg gt-df gt-p-3" data-clipboard-text="{{.DefaultBranchBranch.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
 | 
			
		||||
									<button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DefaultBranchBranch.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
 | 
			
		||||
									{{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DefaultBranchBranch.DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DefaultBranchBranch.DBBranch.CommitID)}}
 | 
			
		||||
								</div>
 | 
			
		||||
								<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.DBBranch.CommitID}}">{{ShortSha .DefaultBranchBranch.DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DefaultBranchBranch.DBBranch.CommitMessage .RepoLink .Repository.ComposeMetas}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{TimeSince .DefaultBranchBranch.DBBranch.CommitTime.AsTime ctx.Locale}}{{if .DefaultBranchBranch.DBBranch.Pusher}}  {{template "shared/user/avatarlink" dict "user" .DefaultBranchBranch.DBBranch.Pusher}}{{template "shared/user/namelink" .DefaultBranchBranch.DBBranch.Pusher}}{{end}}</p>
 | 
			
		||||
@@ -91,18 +89,16 @@
 | 
			
		||||
							<tr>
 | 
			
		||||
								<td class="eight wide">
 | 
			
		||||
								{{if .DBBranch.IsDeleted}}
 | 
			
		||||
									<div class="gt-df gt-ac">
 | 
			
		||||
									<div class="flex-text-block">
 | 
			
		||||
										<a class="gt-ellipsis" href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .DBBranch.Name}}">{{.DBBranch.Name}}</a>
 | 
			
		||||
										<button class="btn interact-fg gt-p-3" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
 | 
			
		||||
										<button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
 | 
			
		||||
									</div>
 | 
			
		||||
									<p class="info">{{ctx.Locale.Tr "repo.branch.deleted_by" .DBBranch.DeletedBy.Name}} {{TimeSinceUnix .DBBranch.DeletedUnix ctx.Locale}}</p>
 | 
			
		||||
								{{else}}
 | 
			
		||||
									<div class="gt-df gt-ac">
 | 
			
		||||
										{{if .IsProtected}}
 | 
			
		||||
											<span class="gt-df gt-pr-2">{{svg "octicon-shield-lock"}}</span>
 | 
			
		||||
										{{end}}
 | 
			
		||||
									<div class="flex-text-block">
 | 
			
		||||
										{{if .IsProtected}}{{svg "octicon-shield-lock"}}{{end}}
 | 
			
		||||
										<a class="gt-ellipsis" href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .DBBranch.Name}}">{{.DBBranch.Name}}</a>
 | 
			
		||||
										<button class="btn interact-fg gt-df gt-p-3" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
 | 
			
		||||
										<button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
 | 
			
		||||
										{{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DBBranch.CommitID)}}
 | 
			
		||||
									</div>
 | 
			
		||||
									<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{$.RepoLink}}/commit/{{PathEscape .DBBranch.CommitID}}">{{ShortSha .DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DBBranch.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{TimeSince .DBBranch.CommitTime.AsTime ctx.Locale}}{{if .DBBranch.Pusher}}  {{template "shared/user/avatarlink" dict "user" .DBBranch.Pusher}}  {{template "shared/user/namelink" .DBBranch.Pusher}}{{end}}</p>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,5 +1,4 @@
 | 
			
		||||
<!-- make sure this matches the color logic in web_src/js/components/DashboardRepoList.vue -->
 | 
			
		||||
<span class="gt-df">
 | 
			
		||||
{{if eq .State "pending"}}
 | 
			
		||||
	{{svg "octicon-dot-fill" 18 "commit-status icon text yellow"}}
 | 
			
		||||
{{end}}
 | 
			
		||||
@@ -12,4 +11,3 @@
 | 
			
		||||
{{if eq .State "failure"}}
 | 
			
		||||
	{{svg "octicon-x" 18 "commit-status icon text red"}}
 | 
			
		||||
{{end}}
 | 
			
		||||
</span>
 | 
			
		||||
 
 | 
			
		||||
@@ -2242,6 +2242,7 @@ table th[data-sortt-desc] .svg {
 | 
			
		||||
  right: 2em;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.btn,
 | 
			
		||||
.ui.ui.button,
 | 
			
		||||
.ui.ui.dropdown,
 | 
			
		||||
.ui.ui.label,
 | 
			
		||||
 
 | 
			
		||||
@@ -30,7 +30,7 @@
 | 
			
		||||
  color: var(--color-red);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* btn is a plain button without any opinionated styling */
 | 
			
		||||
/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
 | 
			
		||||
 | 
			
		||||
.btn {
 | 
			
		||||
  background: transparent;
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user