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 <art27@cantab.net>

Changes

5 changed files (+145/-230)

• templates/repo/commit_page.tmpl
  • @@ -17,115 +17,124 @@
    {{$class = (printf "%s%s" $class " isWarning")}} {{end}} {{end}} - <div class="ui top attached info clearing segment {{$class}}"> + <div class="ui top attached header clearing segment pr {{$class}}"> {{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"}} </a> {{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}} <pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre> {{end}} {{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}} {{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}} </div> - <div class="ui attached info segment {{$class}}"> - <div class="ui stackable grid"> - <div class="nine wide column"> + <div class="ui attached segment df ac sb py-2 commit-header-row {{$class}}"> + <div class="df ac"> {{if .Author}} - {{avatar .Author}} + {{avatar .Author 28 "mr-3"}} {{if .Author.FullName}} <a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a> {{else}} <a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a> {{end}} {{else}} - {{avatarByEmail .Commit.Author.Email .Commit.Author.Email 12}} + {{avatarByEmail .Commit.Author.Email .Commit.Author.Email 28 "mr-3"}} <strong>{{.Commit.Author.Name}}</strong> {{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)}} - <div class="committed-by"> - <span class="text grey">{{svg "octicon-git-commit"}}{{.i18n.Tr "repo.diff.committed_by"}}</span> - {{if ne .Verification.CommittingUser.ID 0}} - {{avatar .Verification.CommittingUser}} - <a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a> - {{else}} - {{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name}} - <strong>{{.Commit.Committer.Name}}</strong> + <span class="text grey mx-3">{{.i18n.Tr "repo.diff.committed_by"}}</span> + {{if ne .Verification.CommittingUser.ID 0}} + {{avatar .Verification.CommittingUser 28 "mx-3"}} + <a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a> + {{else}} + {{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name 28 "mr-3"}} + <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}} </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 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> {{if .Commit.Signature}} - <div class="ui bottom attached message {{$class}}"> - {{if .Verification.Verified }} - {{if ne .Verification.SigningUser.ID 0}} - {{svg "gitea-lock"}} - {{if eq .Verification.TrustStatus "trusted"}} - <span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span> - {{else if eq .Verification.TrustStatus "untrusted"}} - <span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user"}}:</span> + <div class="ui bottom attached message tl df ac sb commit-header-row {{$class}}"> + <div class="df ac"> + {{if .Verification.Verified}} + {{if ne .Verification.SigningUser.ID 0}} + {{svg "gitea-lock" 16 "mr-3"}} + {{if eq .Verification.TrustStatus "trusted"}} + <span class="ui text mr-3">{{.i18n.Tr "repo.commits.signed_by"}}:</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}} - <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}} - {{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}} - <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 ""}} - <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> + {{svg "gitea-unlock" 16 "mr-3"}} + <span class="ui text">{{.i18n.Tr .Verification.Reason}}</span> {{end}} - {{else if .Verification.Warning}} - {{svg "gitea-unlock"}} - <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> - {{else}} - <i class="unlock icon"></i> - {{.i18n.Tr .Verification.Reason}} - {{if .Verification.SigningKey}} - {{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> + </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}} + {{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}} + </div> </div> {{end}} {{if .Note}} - <div class="ui top attached info segment message git-notes"> - <i class="sticky note icon"></i> + <div class="ui top attached header segment git-notes"> + {{svg "octicon-note" 16 "mr-3"}} {{.i18n.Tr "repo.diff.git-notes"}}: {{if .NoteAuthor}} <a href="{{.NoteAuthor.HomeLink}}">
• web_src/less/_base.less
  • @@ -82,6 +82,15 @@
    --color-diff-moved-row-border: #d0e27f; --color-diff-added-row-border: #e6ffed; --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 */ --color-body: #ffffff; --color-text-dark: #080808;
  • @@ -411,6 +420,16 @@ a.muted:hover,
    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:hover, .ui.selection.active.dropdown .menu,
  • @@ -896,20 +915,6 @@ a.ui.card:hover,
    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 { padding-left: .75rem; vertical-align: middle;
• web_src/less/_repository.less
  • @@ -2183,110 +2183,82 @@
    } .ui.attached.isSigned.isWarning { - border-left: 1px solid #c29393; - border-right: 1px solid #c29393; + border-left: 1px solid var(--color-error-border); + border-right: 1px solid var(--color-error-border); &.top, &.message { - border-top: 1px solid #c29393; + border-top: 1px solid var(--color-error-border); } &.message { box-shadow: none; - background-color: #fff5f5; - color: #d95c5c; + background-color: var(--color-error-bg); + color: var(--color-error-text); .ui.text { - color: #d64444; + color: var(--color-error-text); } } &:last-child, &.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 { - border-left: 1px solid #a3c293; - border-right: 1px solid #a3c293; + border-left: 1px solid var(--color-success-border); + border-right: 1px solid var(--color-success-border); &.top, &.message { - border-top: 1px solid #a3c293; + border-top: 1px solid var(--color-success-border); } &.message { box-shadow: none; - background-color: #fcfff5; - color: #6cc644; + background-color: var(--color-success-bg); + color: var(--color-success-text); .pull-right { color: var(--color-text); } .ui.text { - color: #21ba45; - } - } - - &: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; + color: var(--color-success-text); } } &:last-child, &.bottom { - border-bottom: 1px solid #c2c193; + border-bottom: 1px solid var(--color-success-border); } } + .ui.attached.isSigned.isVerifiedUntrusted, .ui.attached.isSigned.isVerifiedUnmatched { - border-left: 1px solid #c2a893; - border-right: 1px solid #c2a893; + border-left: 1px solid var(--color-warning-border); + border-right: 1px solid var(--color-warning-border); &.top, &.message { - border-top: 1px solid #c2a893; + border-top: 1px solid var(--color-warning-border); } &.message { box-shadow: none; - background-color: #fffaf5; - color: #f2711c; + background-color: var(--color-warning-bg); + color: var(--color-warning-text); .ui.text { - color: #ee5f00; + color: var(--color-warning-text); } } &:last-child, &.bottom { - border-bottom: 1px solid #c2a893; + border-bottom: 1px solid var(--color-warning-border); } }
  • @@ -2469,24 +2441,6 @@
    padding-top: 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
  • @@ -2573,6 +2527,18 @@
    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 { .content { > .header,
• web_src/less/helpers.less
  • @@ -2,8 +2,10 @@
    .di { display: inline !important; } .dif { display: inline-flex !important; } .dib { display: inline-block !important; } + .pr { position: relative !important; } .ac { align-items: center !important; } .tc { text-align: center !important; } + .tl { text-align: left !important; } .jc { justify-content: center !important; } .js { justify-content: flex-start !important; } .je { justify-content: flex-end !important; }
• web_src/less/themes/theme-arc-green.less
  • @@ -78,6 +78,15 @@
    --color-diff-moved-row-border: #bcca6f; --color-diff-added-row-border: #314a37; --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 */ --color-body: #383c4a; --color-box-header: #404652;
  • @@ -310,10 +319,6 @@ a.ui.basic.green.label:hover {
    border-color: transparent !important; } - .ui .info.segment.top { - background-color: var(--color-secondary) !important; - } - .repository .diff-stats li { border-color: var(--color-secondary); }
  • @@ -332,25 +337,6 @@ td.blob-hunk {
    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.message { background-color: #542 !important;
  • @@ -449,59 +435,6 @@ td.blob-excerpt {
    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 { color: var(--color-secondary-dark-6); }