third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 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>
tokarchuk/v1.17
silverwind 3 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 87
      templates/repo/commit_page.tmpl
  2. 33
      web_src/less/_base.less
  3. 102
      web_src/less/_repository.less
  4. 2
      web_src/less/helpers.less
  5. 85
      web_src/less/themes/theme-arc-green.less

87
templates/repo/commit_page.tmpl
Unescape View File

@ -17,54 +17,49 @@
{{$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}} {{avatar .Verification.CommittingUser 28 "mx-3"}}
<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}} {{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name 28 "mr-3"}}
<strong>{{.Commit.Committer.Name}}</strong> <strong>{{.Commit.Committer.Name}}</strong>
{{end}} {{end}}
</div>
{{end}} {{end}}
</div> </div>
<div class="seven wide right aligned column"> <div class="ui horizontal list df ac">
<div class="ui horizontal list">
{{if .Parents}} {{if .Parents}}
<div class="item"> <div class="item">
{{.i18n.Tr "repo.diff.parent"}} {{.i18n.Tr "repo.diff.parent"}}
@ -83,49 +78,63 @@
<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div> <div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div> <div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
</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 .Verification.Verified}}
{{if ne .Verification.SigningUser.ID 0}} {{if ne .Verification.SigningUser.ID 0}}
{{svg "gitea-lock"}} {{svg "gitea-lock" 16 "mr-3"}}
{{if eq .Verification.TrustStatus "trusted"}} {{if eq .Verification.TrustStatus "trusted"}}
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span> <span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
{{else if eq .Verification.TrustStatus "untrusted"}} {{else if eq .Verification.TrustStatus "untrusted"}}
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user"}}:</span> <span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by_untrusted_user"}}:</span>
{{else}} {{else}}
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span> <span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
{{end}} {{end}}
{{avatar .Verification.SigningUser}} {{avatar .Verification.SigningUser 28}}
<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.Name}}</strong></a> <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> <span title="{{.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span> <span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
{{avatarByEmail .Verification.SigningEmail ""}} {{avatarByEmail .Verification.SigningEmail "" 28}}
<strong>{{.Verification.SigningUser.Name}}</strong> <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}} {{else}}
{{svg "gitea-unlock"}} {{svg "gitea-unlock" 16 "mr-3"}}
<span class="ui text">{{.i18n.Tr .Verification.Reason}}</span> <span class="ui text">{{.i18n.Tr .Verification.Reason}}</span>
<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> {{end}}
</div>
<div class="df ac">
{{if .Verification.Verified}}
{{if ne .Verification.SigningUser.ID 0}}
{{svg "octicon-shield-check" 16 "mr-3"}}
<span class="ui text mr-3">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span>
{{.Verification.SigningKey.KeyID}}
{{else}}
{{svg "octicon-shield-lock" 16 "mr-3"}}
<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}} {{else}}
<i class="unlock icon"></i>
{{.i18n.Tr .Verification.Reason}}
{{if .Verification.SigningKey}} {{if .Verification.SigningKey}}
{{if ne .Verification.SigningKey.KeyID ""}} {{if ne .Verification.SigningKey.KeyID ""}}
<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> {{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
Unescape 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
Unescape 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,
&.bottom {
border-bottom: 1px solid #a3c293;
}
}
.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, &:last-child,
&.bottom { &.bottom {
border-bottom: 1px solid #c2c193; border-bottom: 1px solid var(--color-success-border);
} }
} }
.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
Unescape 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
Unescape 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);
} }

Write Preview
Loading…
Cancel
Save