From c5ede35124c8d5280219c24049bb0ad7da9f02ed Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 1 Jun 2023 12:47:28 +0200 Subject: [PATCH] Add button on diff header to copy file name, misc diff header tweaks (#24986) 1. Add this button: Screenshot 2023-05-29 at 15 21 47 Screenshot 2023-05-29 at 15 20 22 2. Correct `button-link` styles to not have a background hover effect. 3. Tweak `.ui.container` padding to be the same for fluid and non-fluid. 4. Misc enhancements to diff header: Before: Screenshot 2023-05-29 at 15 38 53 After: Screenshot 2023-05-29 at 15 43 10 --- templates/repo/diff/box.tmpl | 32 ++++++++++++++------------ web_src/css/base.css | 36 ++++++++++++++++------------- web_src/css/modules/button.css | 6 ++++- web_src/css/repo.css | 42 +++++++++++++++------------------- 4 files changed, 61 insertions(+), 55 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 490465ea12..1aac4acc2b 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -15,7 +15,7 @@
-
{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}} + {{if $file.IsGenerated}} - {{$.locale.Tr "repo.diff.generated"}} + {{$.locale.Tr "repo.diff.generated"}} {{end}} {{if $file.IsVendored}} - {{$.locale.Tr "repo.diff.vendored"}} + {{$.locale.Tr "repo.diff.vendored"}} {{end}} {{if and $file.Mode $file.OldMode}} {{$file.OldMode}} → {{$file.Mode}} @@ -117,7 +119,7 @@ {{$file.Mode}} {{end}}
-
+
{{if $showFileViewToggle}}
@@ -127,8 +129,11 @@ {{if $file.IsProtected}} {{$.locale.Tr "repo.diff.protected"}} {{end}} + {{if and $isReviewFile $file.HasChangedSinceLastReview}} + {{$.locale.Tr "repo.pulls.has_changed_since_last_review"}} + {{end}} {{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} - + {{end}} {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} @@ -138,10 +143,7 @@ {{$.locale.Tr "repo.diff.view_file"}} {{end}} {{end}} - {{if and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}} - {{if $file.HasChangedSinceLastReview}} - {{$.locale.Tr "repo.pulls.has_changed_since_last_review"}} - {{end}} + {{if $isReviewFile}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 3c32eb6045..d143b20f81 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -893,19 +893,32 @@ img.ui.avatar, .page-content .ui.ui.ui.container:not(.fluid) { width: 1280px; max-width: calc(100vw - 64px); + margin-left: auto; + margin-right: auto; +} + +.ui.container.fluid.padded { + padding: 0 32px; } /* enable fluid page widths for medium size viewports */ @media (min-width: 768px) and (max-width: 1200px) { - .ui.ui.ui.container:not(.fluid) { - width: calc(100vw - 64px); + .page-content .ui.ui.ui.container:not(.fluid) { + width: calc(100vw - 32px); + max-width: calc(100vw - 32px); + } + .ui.container.fluid.padded { + padding: 0 16px; } } -@media only screen and (max-width: 767px) { +@media (max-width: 767px) { .page-content .ui.ui.ui.container:not(.fluid) { - width: auto; /* copied from semantic css */ - max-width: 100%; + width: calc(100vw - 16px); + max-width: calc(100vw - 16px); + } + .ui.container.fluid.padded { + padding: 0 8px; } } @@ -1165,10 +1178,6 @@ img.ui.avatar, float: right; } -.ui.container.fluid.padded { - padding: 0 32px; -} - .ui.form .ui.button { font-weight: var(--font-weight-normal); } @@ -1525,7 +1534,8 @@ img.ui.avatar, } @media (max-width: 767px) { - .not-mobile { + /* double selector so it wins over .gt-df etc */ + .not-mobile.not-mobile { display: none !important; } } @@ -1552,12 +1562,6 @@ img.ui.avatar, clip: auto; } -@media (min-width: 768px) and (max-width: 991px) { - .ui.container { - width: 95%; - } -} - .ui.menu.new-menu { margin-bottom: 15px; background: var(--color-navbar); diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 1f2d2a4494..d9bc69043d 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -55,7 +55,11 @@ border-left: 1px solid var(--color-light-border); } -.ui.buttons .button + .button { +.ui.buttons .button:first-child:has(+ .button.active) { + border-right: none !important; +} + +.ui.buttons .button + .button:not(.active) { border-left: none; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 1f870658d5..71cd7a2846 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1616,12 +1616,6 @@ margin-right: -4px; } -.repository .diff-detail-box > div::after { - clear: both; - content: ""; - display: block; -} - .repository .diff-detail-box .diff-detail-stats strong { margin-left: 0.25rem; margin-right: 0.25rem; @@ -1658,12 +1652,10 @@ height: 33px; } -.repository .diff-detail-box .diff-detail-actions > * { - margin-right: 0; -} - -.repository .diff-detail-box .diff-detail-actions > * + * { - margin-left: 0.25rem; +.diff-detail-actions > *, +.diff-detail-actions .button { + margin-left: 0 !important; + margin-right: 0 !important; } @media (max-width: 480px) { @@ -1728,11 +1720,14 @@ .repository .diff-box .header:not(.resolved-placeholder) .button { padding: 8px 12px; flex: 0 0 auto; - margin-top: -8px; - margin-bottom: -8px; margin-right: 0; } +.repository .diff-box .header:not(.resolved-placeholder) .button:has(svg) { + padding-top: 6px; + padding-bottom: 6px; +} + .repository .diff-box .resolved-placeholder { display: flex; align-items: center; @@ -3089,6 +3084,11 @@ tbody.commit-list { word-break: break-all; } +.diff-file-header { + padding-top: 5px !important; + padding-bottom: 5px !important; +} + .diff-file-box[data-folded="true"] .diff-file-body { display: none; } @@ -3097,10 +3097,6 @@ tbody.commit-list { border-radius: var(--border-radius) !important; } -.diff-file-header-actions > * + * { - margin-left: 0.5rem !important; -} - .ui.attached.header.diff-file-header.sticky-2nd-row { position: sticky; top: 47px; /* match .repository .diff-detail-box */ @@ -3119,15 +3115,15 @@ tbody.commit-list { } } -.ui.attached.header.diff-file-header .diff-file-header-actions { - flex-shrink: 0; -} - -.ui.attached.header.diff-file-header .diff-file-name { +.diff-file-name { flex: auto; min-width: 100px; } +.diff-file-name .ui.label { + margin-left: 0 !important; +} + .diff-stats-bar { display: inline-block; background-color: var(--color-red);