Add button on diff header to copy file name, misc diff header tweaks (#24986)

1. Add this button:

<img width="232" alt="Screenshot 2023-05-29 at 15 21 47"
src="https://github.com/go-gitea/gitea/assets/115237/5eaf6bd1-83db-4ffc-9503-eda0c59807d2">
<img width="297" alt="Screenshot 2023-05-29 at 15 20 22"
src="https://github.com/go-gitea/gitea/assets/115237/708a344f-f6d7-4229-bfda-76e1571b42c8">

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:
<img width="984" alt="Screenshot 2023-05-29 at 15 38 53"
src="https://github.com/go-gitea/gitea/assets/115237/c7926f6a-bd0a-4b05-97ad-c91fc25c62d5">

After:
<img width="987" alt="Screenshot 2023-05-29 at 15 43 10"
src="https://github.com/go-gitea/gitea/assets/115237/0149f545-45f8-42cf-b443-e1c76bd5cdeb">

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 490465ea12fb1b4e0e6aecf6e80b2368cfe6b0d0..1aac4acc2b0e46250f8278d07bdb16bbebc21fd8 100644 (file)
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -15,7 +15,7 @@
        <div>
                <div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac gt-fw">
                        <div class="gt-df gt-ac gt-fw">
-                               <button class="diff-toggle-file-tree-button gt-df gt-ac" data-show-text="{{.locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{.locale.Tr "repo.diff.hide_file_tree"}}">
+                               <button class="diff-toggle-file-tree-button gt-df gt-ac not-mobile" data-show-text="{{.locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{.locale.Tr "repo.diff.hide_file_tree"}}">
                                        {{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
                                        {{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}}
                                        {{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}}
@@ -27,14 +27,14 @@
                                        diffTreeBtn.querySelector(diffTreeIcon).classList.remove('gt-hidden');
                                        diffTreeBtn.setAttribute('data-tooltip-content', diffTreeBtn.getAttribute(diffTreeVisible ? 'data-hide-text' : 'data-show-text'));
                                </script>
-                               <div class="diff-detail-stats gt-df gt-ac gt-ml-3">
+                               <div class="diff-detail-stats gt-df gt-ac gt-fw">
                                        {{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
                                </div>
                        </div>
-                       <div class="diff-detail-actions gt-df gt-ac">
+                       <div class="diff-detail-actions gt-df gt-ac gt-gap-2 gt-fw">
                                {{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
-                                       <progress id="viewed-files-summary" class="gt-mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
-                                       <label for="viewed-files-summary" id="viewed-files-summary-label" class="gt-mr-3 gt-f1" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}">
+                                       <progress id="viewed-files-summary" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
+                                       <label for="viewed-files-summary" id="viewed-files-summary-label" class="gt-f1 gt-whitespace-nowrap not-mobile" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}">
                                                {{.locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
                                        </label>
                                {{end}}
@@ -85,9 +85,10 @@
                                                {{$isCsv := (call $.IsCsvFile $file)}}
                                                {{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}}
                                                {{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
+                                               {{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}}
                                                <div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
-                                                       <h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb">
-                                                               <div class="diff-file-name gt-df gt-ac gt-mr-3">
+                                                       <h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw">
+                                                               <div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw">
                                                                        <button class="fold-file ui button button-ghost gt-p-0 gt-mr-3{{if not $isExpandable}} gt-invisible{{end}}">
                                                                                {{if $file.ShouldBeHidden}}
                                                                                        {{svg "octicon-chevron-right" 18}}
@@ -105,11 +106,12 @@
                                                                                {{end}}
                                                                        </div>
                                                                        <span class="file gt-mono"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
+                                                                       <button class="ui button button-link gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
                                                                        {{if $file.IsGenerated}}
-                                                                               <span class="ui label gt-ml-3">{{$.locale.Tr "repo.diff.generated"}}</span>
+                                                                               <span class="ui label">{{$.locale.Tr "repo.diff.generated"}}</span>
                                                                        {{end}}
                                                                        {{if $file.IsVendored}}
-                                                                               <span class="ui label gt-ml-3">{{$.locale.Tr "repo.diff.vendored"}}</span>
+                                                                               <span class="ui label">{{$.locale.Tr "repo.diff.vendored"}}</span>
                                                                        {{end}}
                                                                        {{if and $file.Mode $file.OldMode}}
                                                                                <span class="gt-ml-4 gt-mono">{{$file.OldMode}} &rarr; {{$file.Mode}}</span>
@@ -117,7 +119,7 @@
                                                                                <span class="gt-ml-4 gt-mono">{{$file.Mode}}</span>
                                                                        {{end}}
                                                                </div>
-                                                               <div class="diff-file-header-actions gt-df gt-ac">
+                                                               <div class="diff-file-header-actions gt-df gt-ac gt-gap-2 gt-fw">
                                                                        {{if $showFileViewToggle}}
                                                                                <div class="ui compact icon buttons">
                                                                                        <button class="ui tiny basic button file-view-toggle" data-toggle-selector="#diff-source-{{$file.NameHash}}" data-tooltip-content="{{$.locale.Tr "repo.file_view_source"}}">{{svg "octicon-code"}}</button>
@@ -127,8 +129,11 @@
                                                                        {{if $file.IsProtected}}
                                                                                <span class="ui basic label">{{$.locale.Tr "repo.diff.protected"}}</span>
                                                                        {{end}}
+                                                                       {{if and $isReviewFile $file.HasChangedSinceLastReview}}
+                                                                               <span class="changed-since-last-review unselectable not-mobile">{{$.locale.Tr "repo.pulls.has_changed_since_last_review"}}</span>
+                                                                       {{end}}
                                                                        {{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}}
-                                                                               <button class="ui basic tiny button unescape-button">{{$.locale.Tr "repo.unescape_control_characters"}}</button>
+                                                                               <button class="ui basic tiny button unescape-button not-mobile">{{$.locale.Tr "repo.unescape_control_characters"}}</button>
                                                                                <button class="ui basic tiny button escape-button gt-hidden">{{$.locale.Tr "repo.escape_control_characters"}}</button>
                                                                        {{end}}
                                                                        {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
@@ -138,10 +143,7 @@
                                                                                        <a class="ui basic tiny button" rel="nofollow" href="{{$.SourcePath}}/{{PathEscapeSegments .Name}}">{{$.locale.Tr "repo.diff.view_file"}}</a>
                                                                                {{end}}
                                                                        {{end}}
-                                                                       {{if and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}}
-                                                                               {{if $file.HasChangedSinceLastReview}}
-                                                                                       <span class="changed-since-last-review unselectable">{{$.locale.Tr "repo.pulls.has_changed_since_last_review"}}</span>
-                                                                               {{end}}
+                                                                       {{if $isReviewFile}}
                                                                                <label data-link="{{$.Issue.Link}}/viewed-files" data-headcommit="{{$.PullHeadCommitID}}" class="viewed-file-form unselectable{{if $file.IsViewed}} viewed-file-checked-form{{end}}">
                                                                                        <input type="checkbox" name="{{$file.GetDiffFileName}}" autocomplete="off"{{if $file.IsViewed}} checked{{end}}> {{$.locale.Tr "repo.pulls.has_viewed_file"}}
                                                                                </label>

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 3c32eb6045c4df7b60693ac98940a097b61ccdd3..d143b20f81b4473e3279d2c3b76851abd8a5aea1 100644 (file)
--- 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 1f2d2a4494de6cb5c4812560f9535b636071785c..d9bc69043d3d36bd29c62961599bb306f72911a9 100644 (file)
--- 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 1f870658d5f7577d3bc091610f644700a334d0fd..71cd7a28468d0549f0a3951178ac9b76e6d1d269 100644 (file)
--- 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);