Skip to content

Commit 3fd502c

Browse files
silverwindzeripath
silverwind
and
zeripath
authored
Rework commit page header (#17849)
- Remove blue background and use regular header styling - Use flexbox on author and signature segments - Add shield-type icons besides gpg key, replacing icon font icons - Ensure author and signature line are same height - Remove erronous green background on arc-green signature line - Turn signing colors into CSS variables - Consolidate the two warning states into one Co-authored-by: zeripath <[email protected]>
1 parent 01087e9 commit 3fd502c

File tree

5 files changed

+145
-230
lines changed

5 files changed

+145
-230
lines changed

‎templates/repo/commit_page.tmpl

Lines changed: 81 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -17,115 +17,124 @@
1717
{{$class = (printf "%s%s" $class " isWarning")}}
1818
{{end}}
1919
{{end}}
20-
<div class="ui top attached info clearing segment {{$class}}">
20+
<div class="ui top attached header clearing segment pr {{$class}}">
2121
{{if not $.PageIsUncyclo}}
22-
<a class="ui floated right blue tiny button" href="{{.SourcePath}}">
22+
<a class="ui blue tiny button browse-button" href="{{.SourcePath}}">
2323
{{.i18n.Tr "repo.diff.browse_source"}}
2424
</a>
2525
{{end}}
26-
<h3><span class="message-wrapper"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span></span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses "root" $}}</h3>
26+
<h3 class="mt-0"><span class="message-wrapper"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span></span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses "root" $}}</h3>
2727
{{if IsMultilineCommitMessage .Commit.Message}}
2828
<pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
2929
{{end}}
3030
{{if .BranchName}}
31-
<span class="text grey">{{svg "octicon-git-branch"}}{{.BranchName}}</span>
31+
<span class="text grey mr-3">{{svg "octicon-git-branch" 16 "mr-2"}}{{.BranchName}}</span>
3232
{{end}}
3333
{{if .TagName}}
34-
<span class="text grey">{{svg "octicon-tag"}}{{.TagName}}</span>
34+
<span class="text grey mr-3">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</span>
3535
{{end}}
3636
</div>
37-
<div class="ui attached info segment {{$class}}">
38-
<div class="ui stackable grid">
39-
<div class="nine wide column">
37+
<div class="ui attached segment df ac sb py-2 commit-header-row {{$class}}">
38+
<div class="df ac">
4039
{{if .Author}}
41-
{{avatar .Author}}
40+
{{avatar .Author 28 "mr-3"}}
4241
{{if .Author.FullName}}
4342
<a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a>
4443
{{else}}
4544
<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a>
4645
{{end}}
4746
{{else}}
48-
{{avatarByEmail .Commit.Author.Email .Commit.Author.Email 12}}
47+
{{avatarByEmail .Commit.Author.Email .Commit.Author.Email 28 "mr-3"}}
4948
<strong>{{.Commit.Author.Name}}</strong>
5049
{{end}}
51-
<span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
50+
<span class="text grey ml-3" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
5251
{{if or (ne .Commit.Committer.Name .Commit.Author.Name) (ne .Commit.Committer.Email .Commit.Author.Email)}}
53-
<div class="committed-by">
54-
<span class="text grey">{{svg "octicon-git-commit"}}{{.i18n.Tr "repo.diff.committed_by"}}</span>
55-
{{if ne .Verification.CommittingUser.ID 0}}
56-
{{avatar .Verification.CommittingUser}}
57-
<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a>
58-
{{else}}
59-
{{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name}}
60-
<strong>{{.Commit.Committer.Name}}</strong>
52+
<span class="text grey mx-3">{{.i18n.Tr "repo.diff.committed_by"}}</span>
53+
{{if ne .Verification.CommittingUser.ID 0}}
54+
{{avatar .Verification.CommittingUser 28 "mx-3"}}
55+
<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a>
56+
{{else}}
57+
{{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name 28 "mr-3"}}
58+
<strong>{{.Commit.Committer.Name}}</strong>
59+
{{end}}
60+
{{end}}
61+
</div>
62+
<div class="ui horizontal list df ac">
63+
{{if .Parents}}
64+
<div class="item">
65+
{{.i18n.Tr "repo.diff.parent"}}
66+
</div>
67+
<div class="item">
68+
{{range .Parents}}
69+
{{if $.PageIsUncyclo}}
70+
<a class="ui blue sha label" href="{{$.RepoLink}}/wiki/commit/{{PathEscape .}}">{{ShortSha .}}</a>
71+
{{else}}
72+
<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{PathEscape .}}">{{ShortSha .}}</a>
73+
{{end}}
6174
{{end}}
6275
</div>
6376
{{end}}
64-
77+
<div class="mobile-only"></div>
78+
<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
79+
<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
6580
</div>
66-
<div class="seven wide right aligned column">
67-
<div class="ui horizontal list">
68-
{{if .Parents}}
69-
<div class="item">
70-
{{.i18n.Tr "repo.diff.parent"}}
71-
</div>
72-
<div class="item">
73-
{{range .Parents}}
74-
{{if $.PageIsUncyclo}}
75-
<a class="ui blue sha label" href="{{$.RepoLink}}/wiki/commit/{{PathEscape .}}">{{ShortSha .}}</a>
76-
{{else}}
77-
<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{PathEscape .}}">{{ShortSha .}}</a>
78-
{{end}}
79-
{{end}}
80-
</div>
81-
{{end}}
82-
<div class="mobile-only"></div>
83-
<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
84-
<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
85-
</div>
86-
</div><!-- end column -->
87-
</div><!-- end grid -->
8881
</div>
8982
{{if .Commit.Signature}}
90-
<div class="ui bottom attached message {{$class}}">
91-
{{if .Verification.Verified }}
92-
{{if ne .Verification.SigningUser.ID 0}}
93-
{{svg "gitea-lock"}}
94-
{{if eq .Verification.TrustStatus "trusted"}}
95-
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
96-
{{else if eq .Verification.TrustStatus "untrusted"}}
97-
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user"}}:</span>
83+
<div class="ui bottom attached message tl df ac sb commit-header-row {{$class}}">
84+
<div class="df ac">
85+
{{if .Verification.Verified}}
86+
{{if ne .Verification.SigningUser.ID 0}}
87+
{{svg "gitea-lock" 16 "mr-3"}}
88+
{{if eq .Verification.TrustStatus "trusted"}}
89+
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
90+
{{else if eq .Verification.TrustStatus "untrusted"}}
91+
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by_untrusted_user"}}:</span>
92+
{{else}}
93+
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
94+
{{end}}
95+
{{avatar .Verification.SigningUser 28}}
96+
<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.Name}}</strong></a>
9897
{{else}}
99-
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
98+
<span title="{{.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
99+
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
100+
{{avatarByEmail .Verification.SigningEmail "" 28}}
101+
<strong>{{.Verification.SigningUser.Name}}</strong>
100102
{{end}}
101-
{{avatar .Verification.SigningUser}}
102-
<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.Name}}</strong></a>
103-
<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> {{.Verification.SigningKey.KeyID}}</span>
104103
{{else}}
105-
<span title="{{.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
106-
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
107-
{{avatarByEmail .Verification.SigningEmail ""}}
108-
<strong>{{.Verification.SigningUser.Name}}</strong>
109-
<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> <i class="cogs icon" title="{{.i18n.Tr "gpg.default_key"}}"></i>{{.Verification.SigningKey.KeyID}}</span>
104+
{{svg "gitea-unlock" 16 "mr-3"}}
105+
<span class="ui text">{{.i18n.Tr .Verification.Reason}}</span>
110106
{{end}}
111-
{{else if .Verification.Warning}}
112-
{{svg "gitea-unlock"}}
113-
<span class="ui text">{{.i18n.Tr .Verification.Reason}}</span>
114-
<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> <i class="warning icon"></i>{{.Verification.SigningKey.KeyID}}</span>
115-
{{else}}
116-
<i class="unlock icon"></i>
117-
{{.i18n.Tr .Verification.Reason}}
118-
{{if .Verification.SigningKey}}
119-
{{if ne .Verification.SigningKey.KeyID ""}}
120-
<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> <i class="warning icon"></i>{{.Verification.SigningKey.KeyID}}</span>
107+
</div>
108+
<div class="df ac">
109+
{{if .Verification.Verified}}
110+
{{if ne .Verification.SigningUser.ID 0}}
111+
{{svg "octicon-shield-check" 16 "mr-3"}}
112+
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
113+
{{.Verification.SigningKey.KeyID}}
114+
{{else}}
115+
{{svg "octicon-shield-lock" 16 "mr-3"}}
116+
<span class="ui text mr-3 tooltip" data-content="{{.i18n.Tr "gpg.default_key"}}">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
117+
{{.Verification.SigningKey.KeyID}}
118+
{{end}}
119+
{{else if .Verification.Warning}}
120+
{{svg "octicon-shield" 16 "mr-3"}}
121+
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
122+
{{.Verification.SigningKey.KeyID}}
123+
{{else}}
124+
{{if .Verification.SigningKey}}
125+
{{if ne .Verification.SigningKey.KeyID ""}}
126+
{{svg "octicon-shield" 16 "mr-3"}}
127+
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
128+
{{.Verification.SigningKey.KeyID}}
129+
{{end}}
121130
{{end}}
122131
{{end}}
123-
{{end}}
132+
</div>
124133
</div>
125134
{{end}}
126135
{{if .Note}}
127-
<div class="ui top attached info segment message git-notes">
128-
<i class="sticky note icon"></i>
136+
<div class="ui top attached header segment git-notes">
137+
{{svg "octicon-note" 16 "mr-3"}}
129138
{{.i18n.Tr "repo.diff.git-notes"}}:
130139
{{if .NoteAuthor}}
131140
<a href="{{.NoteAuthor.HomeLink}}">

‎web_src/less/_base.less

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,15 @@
8282
--color-diff-moved-row-border: #d0e27f;
8383
--color-diff-added-row-border: #e6ffed;
8484
--color-diff-inactive: #f2f2f2;
85+
--color-error-border: #c29393;
86+
--color-error-bg: #fff5f5;
87+
--color-error-text: #d64444;
88+
--color-success-border: #a3c293;
89+
--color-success-bg: #fcfff5;
90+
--color-success-text: #6cc644;
91+
--color-warning-border: #c2c193;
92+
--color-warning-bg: #fffff5;
93+
--color-warning-text: #fbbd08;
8594
/* target-based colors */
8695
--color-body: #ffffff;
8796
--color-text-dark: #080808;
@@ -411,6 +420,16 @@ a.muted:hover,
411420
background: var(--color-active) !important;
412421
}
413422

423+
.ui.message {
424+
background: var(--color-box-body);
425+
color: var(--color-text);
426+
}
427+
428+
.ui.bottom.attached.message {
429+
box-shadow: none !important;
430+
border: 1px solid var(--color-secondary);
431+
}
432+
414433
.ui.selection.active.dropdown,
415434
.ui.selection.active.dropdown:hover,
416435
.ui.selection.active.dropdown .menu,
@@ -896,20 +915,6 @@ a.ui.card:hover,
896915
text-align: left;
897916
}
898917

899-
&.bottom.attached.message {
900-
text-align: left;
901-
color: black;
902-
903-
.pull-right {
904-
color: black;
905-
}
906-
907-
& > span,
908-
.pull-right > span {
909-
color: var(--color-green);
910-
}
911-
}
912-
913918
.header > i + .content {
914919
padding-left: .75rem;
915920
vertical-align: middle;

0 commit comments

Comments
 (0)