realaravinth/forgejo-federation
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity

Rework commit page header (#17849)

Browse source 
- 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 <art27@cantab.net>
This commit is contained in:
silverwind 2021-11-30 15:40:17 -08:00 committed by GitHub
parent 01087e9eef
commit 3fd502cca8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 145 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
templates/repo/commit_page.tmpl
View file

@ -17,115 +17,124 @@
{{$class = (printf "%s%s" $class " isWarning")}} {{$class = (printf "%s%s" $class " isWarning")}}
{{end}} {{end}}
{{end}} {{end}}
<div class="ui top attached info clearing segment {{$class}}"> <div class="ui top attached header clearing segment pr {{$class}}">
{{if not $.PageIsWiki}} {{if not $.PageIsWiki}}
<a class="ui floated right blue tiny button" href="{{.SourcePath}}"> <a class="ui blue tiny button browse-button" href="{{.SourcePath}}">
{{.i18n.Tr "repo.diff.browse_source"}} {{.i18n.Tr "repo.diff.browse_source"}}
</a> </a>
{{end}} {{end}}
<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> <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>
{{if IsMultilineCommitMessage .Commit.Message}} {{if IsMultilineCommitMessage .Commit.Message}}
<pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre> <pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}} {{end}}
{{if .BranchName}} {{if .BranchName}}
<span class="text grey">{{svg "octicon-git-branch"}}{{.BranchName}}</span> <span class="text grey mr-3">{{svg "octicon-git-branch" 16 "mr-2"}}{{.BranchName}}</span>
{{end}} {{end}}
{{if .TagName}} {{if .TagName}}
<span class="text grey">{{svg "octicon-tag"}}{{.TagName}}</span> <span class="text grey mr-3">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</span>
{{end}} {{end}}
</div> </div>
<div class="ui attached info segment {{$class}}"> <div class="ui attached segment df ac sb py-2 commit-header-row {{$class}}">
<div class="ui stackable grid"> <div class="df ac">
<div class="nine wide column">
{{if .Author}} {{if .Author}}
{{avatar .Author}} {{avatar .Author 28 "mr-3"}}
{{if .Author.FullName}} {{if .Author.FullName}}
<a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a> <a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a>
{{else}} {{else}}
<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a> <a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a>
{{end}} {{end}}
{{else}} {{else}}
{{avatarByEmail .Commit.Author.Email .Commit.Author.Email 12}} {{avatarByEmail .Commit.Author.Email .Commit.Author.Email 28 "mr-3"}}
<strong>{{.Commit.Author.Name}}</strong> <strong>{{.Commit.Author.Name}}</strong>
{{end}} {{end}}
<span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span> <span class="text grey ml-3" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
{{if or (ne .Commit.Committer.Name .Commit.Author.Name) (ne .Commit.Committer.Email .Commit.Author.Email)}} {{if or (ne .Commit.Committer.Name .Commit.Author.Name) (ne .Commit.Committer.Email .Commit.Author.Email)}}
<div class="committed-by"> <span class="text grey mx-3">{{.i18n.Tr "repo.diff.committed_by"}}</span>
<span class="text grey">{{svg "octicon-git-commit"}}{{.i18n.Tr "repo.diff.committed_by"}}</span> {{if ne .Verification.CommittingUser.ID 0}}
{{if ne .Verification.CommittingUser.ID 0}} {{avatar .Verification.CommittingUser 28 "mx-3"}}
{{avatar .Verification.CommittingUser}} <a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a>
<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a> {{else}}
{{else}} {{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name 28 "mr-3"}}
{{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name}} <strong>{{.Commit.Committer.Name}}</strong>
<strong>{{.Commit.Committer.Name}}</strong> {{end}}
{{end}}
</div>
<div class="ui horizontal list df ac">
{{if .Parents}}
<div class="item">
{{.i18n.Tr "repo.diff.parent"}}
</div>
<div class="item">
{{range .Parents}}
{{if $.PageIsWiki}}
<a class="ui blue sha label" href="{{$.RepoLink}}/wiki/commit/{{PathEscape .}}">{{ShortSha .}}</a>
{{else}}
<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{PathEscape .}}">{{ShortSha .}}</a>
{{end}}
{{end}} {{end}}
</div> </div>
{{end}} {{end}}
<div class="mobile-only"></div>
<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
</div> </div>
<div class="seven wide right aligned column">
<div class="ui horizontal list">
{{if .Parents}}
<div class="item">
{{.i18n.Tr "repo.diff.parent"}}
</div>
<div class="item">
{{range .Parents}}
{{if $.PageIsWiki}}
<a class="ui blue sha label" href="{{$.RepoLink}}/wiki/commit/{{PathEscape .}}">{{ShortSha .}}</a>
{{else}}
<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{PathEscape .}}">{{ShortSha .}}</a>
{{end}}
{{end}}
</div>
{{end}}
<div class="mobile-only"></div>
<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
</div>
</div><!-- end column -->
</div><!-- end grid -->
</div> </div>
{{if .Commit.Signature}} {{if .Commit.Signature}}
<div class="ui bottom attached message {{$class}}"> <div class="ui bottom attached message tl df ac sb commit-header-row {{$class}}">
{{if .Verification.Verified }} <div class="df ac">
{{if ne .Verification.SigningUser.ID 0}} {{if .Verification.Verified}}
{{svg "gitea-lock"}} {{if ne .Verification.SigningUser.ID 0}}
{{if eq .Verification.TrustStatus "trusted"}} {{svg "gitea-lock" 16 "mr-3"}}
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span> {{if eq .Verification.TrustStatus "trusted"}}
{{else if eq .Verification.TrustStatus "untrusted"}} <span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user"}}:</span> {{else if eq .Verification.TrustStatus "untrusted"}}
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by_untrusted_user"}}:</span>
{{else}}
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
{{end}}
{{avatar .Verification.SigningUser 28}}
<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.Name}}</strong></a>
{{else}} {{else}}
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span> <span title="{{.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
{{avatarByEmail .Verification.SigningEmail "" 28}}
<strong>{{.Verification.SigningUser.Name}}</strong>
{{end}} {{end}}
{{avatar .Verification.SigningUser}}
<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.Name}}</strong></a>
<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> {{.Verification.SigningKey.KeyID}}</span>
{{else}} {{else}}
<span title="{{.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span> {{svg "gitea-unlock" 16 "mr-3"}}
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span> <span class="ui text">{{.i18n.Tr .Verification.Reason}}</span>
{{avatarByEmail .Verification.SigningEmail ""}}
<strong>{{.Verification.SigningUser.Name}}</strong>
<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>
{{end}} {{end}}
{{else if .Verification.Warning}} </div>
{{svg "gitea-unlock"}} <div class="df ac">
<span class="ui text">{{.i18n.Tr .Verification.Reason}}</span> {{if .Verification.Verified}}
<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> {{if ne .Verification.SigningUser.ID 0}}
{{else}} {{svg "octicon-shield-check" 16 "mr-3"}}
<i class="unlock icon"></i> <span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
{{.i18n.Tr .Verification.Reason}} {{.Verification.SigningKey.KeyID}}
{{if .Verification.SigningKey}} {{else}}
{{if ne .Verification.SigningKey.KeyID ""}} {{svg "octicon-shield-lock" 16 "mr-3"}}
<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> <span class="ui text mr-3 tooltip" data-content="{{.i18n.Tr "gpg.default_key"}}">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
{{.Verification.SigningKey.KeyID}}
{{end}}
{{else if .Verification.Warning}}
{{svg "octicon-shield" 16 "mr-3"}}
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
{{.Verification.SigningKey.KeyID}}
{{else}}
{{if .Verification.SigningKey}}
{{if ne .Verification.SigningKey.KeyID ""}}
{{svg "octicon-shield" 16 "mr-3"}}
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
{{.Verification.SigningKey.KeyID}}
{{end}}
{{end}} {{end}}
{{end}} {{end}}
{{end}} </div>
</div> </div>
{{end}} {{end}}
{{if .Note}} {{if .Note}}
<div class="ui top attached info segment message git-notes"> <div class="ui top attached header segment git-notes">
<i class="sticky note icon"></i> {{svg "octicon-note" 16 "mr-3"}}
{{.i18n.Tr "repo.diff.git-notes"}}: {{.i18n.Tr "repo.diff.git-notes"}}:
{{if .NoteAuthor}} {{if .NoteAuthor}}
<a href="{{.NoteAuthor.HomeLink}}"> <a href="{{.NoteAuthor.HomeLink}}">

33
web_src/less/_base.less
View file

@ -82,6 +82,15 @@
--color-diff-moved-row-border: #d0e27f; --color-diff-moved-row-border: #d0e27f;
--color-diff-added-row-border: #e6ffed; --color-diff-added-row-border: #e6ffed;
--color-diff-inactive: #f2f2f2; --color-diff-inactive: #f2f2f2;
--color-error-border: #c29393;
--color-error-bg: #fff5f5;
--color-error-text: #d64444;
--color-success-border: #a3c293;
--color-success-bg: #fcfff5;
--color-success-text: #6cc644;
--color-warning-border: #c2c193;
--color-warning-bg: #fffff5;
--color-warning-text: #fbbd08;
/* target-based colors */ /* target-based colors */
--color-body: #ffffff; --color-body: #ffffff;
--color-text-dark: #080808; --color-text-dark: #080808;
@ -411,6 +420,16 @@ a.muted:hover,
background: var(--color-active) !important; background: var(--color-active) !important;
} }
.ui.message {
background: var(--color-box-body);
color: var(--color-text);
}
.ui.bottom.attached.message {
box-shadow: none !important;
border: 1px solid var(--color-secondary);
}
.ui.selection.active.dropdown, .ui.selection.active.dropdown,
.ui.selection.active.dropdown:hover, .ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown .menu, .ui.selection.active.dropdown .menu,
@ -896,20 +915,6 @@ a.ui.card:hover,
text-align: left; text-align: left;
} }
&.bottom.attached.message {
text-align: left;
color: black;
.pull-right {
color: black;
}
& > span,
.pull-right > span {
color: var(--color-green);
}
}
.header > i + .content { .header > i + .content {
padding-left: .75rem; padding-left: .75rem;
vertical-align: middle; vertical-align: middle;

102
web_src/less/_repository.less
View file

@ -2183,110 +2183,82 @@
} }
.ui.attached.isSigned.isWarning { .ui.attached.isSigned.isWarning {
border-left: 1px solid #c29393; border-left: 1px solid var(--color-error-border);
border-right: 1px solid #c29393; border-right: 1px solid var(--color-error-border);
&.top, &.top,
&.message { &.message {
border-top: 1px solid #c29393; border-top: 1px solid var(--color-error-border);
} }
&.message { &.message {
box-shadow: none; box-shadow: none;
background-color: #fff5f5; background-color: var(--color-error-bg);
color: #d95c5c; color: var(--color-error-text);
.ui.text { .ui.text {
color: #d64444; color: var(--color-error-text);
} }
} }
&:last-child, &:last-child,
&.bottom { &.bottom {
border-bottom: 1px solid #c29393; border-bottom: 1px solid var(--color-error-border);
} }
} }
.ui.attached.isSigned:not(.isWarning) .pull-right {
padding-top: 5px;
}
.ui.attached.isSigned.isVerified { .ui.attached.isSigned.isVerified {
border-left: 1px solid #a3c293; border-left: 1px solid var(--color-success-border);
border-right: 1px solid #a3c293; border-right: 1px solid var(--color-success-border);
&.top, &.top,
&.message { &.message {
border-top: 1px solid #a3c293; border-top: 1px solid var(--color-success-border);
} }
&.message { &.message {
box-shadow: none; box-shadow: none;
background-color: #fcfff5; background-color: var(--color-success-bg);
color: #6cc644; color: var(--color-success-text);
.pull-right { .pull-right {
color: var(--color-text); color: var(--color-text);
} }
.ui.text { .ui.text {
color: #21ba45; color: var(--color-success-text);
} }
} }
&:last-child, &:last-child,
&.bottom { &.bottom {
border-bottom: 1px solid #a3c293; border-bottom: 1px solid var(--color-success-border);
}
}
.ui.attached.isSigned.isVerifiedUntrusted {
border-left: 1px solid #c2c193;
border-right: 1px solid #c2c193;
&.top,
&.message {
border-top: 1px solid #c2c193;
}
&.message {
box-shadow: none;
background-color: #fffff5;
color: #fbbd08;
.ui.text {
color: #d2ab00;
}
}
&:last-child,
&.bottom {
border-bottom: 1px solid #c2c193;
} }
} }
.ui.attached.isSigned.isVerifiedUntrusted,
.ui.attached.isSigned.isVerifiedUnmatched { .ui.attached.isSigned.isVerifiedUnmatched {
border-left: 1px solid #c2a893; border-left: 1px solid var(--color-warning-border);
border-right: 1px solid #c2a893; border-right: 1px solid var(--color-warning-border);
&.top, &.top,
&.message { &.message {
border-top: 1px solid #c2a893; border-top: 1px solid var(--color-warning-border);
} }
&.message { &.message {
box-shadow: none; box-shadow: none;
background-color: #fffaf5; background-color: var(--color-warning-bg);
color: #f2711c; color: var(--color-warning-text);
.ui.text { .ui.text {
color: #ee5f00; color: var(--color-warning-text);
} }
} }
&:last-child, &:last-child,
&.bottom { &.bottom {
border-bottom: 1px solid #c2a893; border-bottom: 1px solid var(--color-warning-border);
} }
} }
@ -2469,24 +2441,6 @@
padding-top: 9px !important; padding-top: 9px !important;
padding-bottom: 9px !important; padding-bottom: 9px !important;
} }
&.diff .committed-by {
padding-top: .5rem;
.ui.avatar {
width: 20px;
height: 20px;
}
span {
margin-right: .25rem;
svg {
vertical-align: text-bottom;
margin-right: 2px;
}
}
}
} }
// End of .repository // End of .repository
@ -2573,6 +2527,18 @@
padding-top: 15px; padding-top: 15px;
} }
.browse-button {
position: absolute;
right: 1rem;
top: .75rem;
}
.commit-header-row {
min-height: 50px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.settings { .settings {
.content { .content {
> .header, > .header,

2
web_src/less/helpers.less
View file

@ -2,8 +2,10 @@
.di { display: inline !important; } .di { display: inline !important; }
.dif { display: inline-flex !important; } .dif { display: inline-flex !important; }
.dib { display: inline-block !important; } .dib { display: inline-block !important; }
.pr { position: relative !important; }
.ac { align-items: center !important; } .ac { align-items: center !important; }
.tc { text-align: center !important; } .tc { text-align: center !important; }
.tl { text-align: left !important; }
.jc { justify-content: center !important; } .jc { justify-content: center !important; }
.js { justify-content: flex-start !important; } .js { justify-content: flex-start !important; }
.je { justify-content: flex-end !important; } .je { justify-content: flex-end !important; }

85
web_src/less/themes/theme-arc-green.less
View file

@ -78,6 +78,15 @@
--color-diff-moved-row-border: #bcca6f; --color-diff-moved-row-border: #bcca6f;
--color-diff-added-row-border: #314a37; --color-diff-added-row-border: #314a37;
--color-diff-inactive: #353846; --color-diff-inactive: #353846;
--color-error-border: #a53a37;
--color-error-bg: #403440;
--color-error-text: #d64444;
--color-success-border: #458a57;
--color-success-bg: #304440;
--color-success-text: #6cc664;
--color-warning-border: #aaa050;
--color-warning-bg: #404440;
--color-warning-text: #fbbd08;
/* target-based colors */ /* target-based colors */
--color-body: #383c4a; --color-body: #383c4a;
--color-box-header: #404652; --color-box-header: #404652;
@ -310,10 +319,6 @@ a.ui.basic.green.label:hover {
border-color: transparent !important; border-color: transparent !important;
} }
.ui .info.segment.top {
background-color: var(--color-secondary) !important;
}
.repository .diff-stats li { .repository .diff-stats li {
border-color: var(--color-secondary); border-color: var(--color-secondary);
} }
@ -332,25 +337,6 @@ td.blob-hunk {
color: #dbdbdb !important; color: #dbdbdb !important;
} }
.ui.attached.info.message,
.ui.info.message {
box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 0 0 transparent;
}
.ui.bottom.attached.message {
background-color: #2c662d;
color: #87ab63;
}
.ui.bottom.attached.message .pull-right {
color: #87ab63;
}
.ui.info.message {
background-color: #2c3b4a;
color: #9ebcc5;
}
.ui .warning.header, .ui .warning.header,
.ui.warning.message { .ui.warning.message {
background-color: #542 !important; background-color: #542 !important;
@ -449,59 +435,6 @@ td.blob-excerpt {
color: #dbdbdb; color: #dbdbdb;
} }
.repository .ui.attached.message.isSigned.isVerified {
background-color: #394829;
color: var(--color-secondary-dark-6);
&.message {
color: #87ab63;
.ui.text {
color: var(--color-secondary-dark-6);
}
.pull-right {
color: #87ab63;
}
}
}
.repository .ui.attached.message.isSigned.isVerifiedUntrusted {
background-color: #4a3903;
color: var(--color-secondary-dark-6);
&.message {
color: #c2c193;
.ui.text {
color: var(--color-secondary-dark-6);
}
a {
color: #c2c193;
}
}
}
.repository .ui.attached.message.isSigned.isVerifiedUnmatched {
background-color: #4e3321;
color: var(--color-secondary-dark-6);
&.message {
color: #c2a893;
.ui.text {
color: var(--color-secondary-dark-6);
}
a {
color: #c2a893;
}
}
}
.repository .ui.attached.message.isSigned.isWarning {
background-color: rgba(80, 23, 17, .6);
&.message {
color: #d07d7d;
.ui.text {
color: #d07d7d;
}
}
}
.ui.header .sub.header { .ui.header .sub.header {
color: var(--color-secondary-dark-6); color: var(--color-secondary-dark-6);
} }