Skip to content

Commit c5ede35

Browse files
silverwindsilverwind
authored
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">
1 parent 5d23c88 commit c5ede35

File tree

4 files changed

+61
-55
lines changed

4 files changed

+61
-55
lines changed

‎templates/repo/diff/box.tmpl

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<div>
1616
<div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac gt-fw">
1717
<div class="gt-df gt-ac gt-fw">
18-
<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"}}">
18+
<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"}}">
1919
{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
2020
{{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}}
2121
{{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}}
@@ -27,14 +27,14 @@
2727
diffTreeBtn.querySelector(diffTreeIcon).classList.remove('gt-hidden');
2828
diffTreeBtn.setAttribute('data-tooltip-content', diffTreeBtn.getAttribute(diffTreeVisible ? 'data-hide-text' : 'data-show-text'));
2929
</script>
30-
<div class="diff-detail-stats gt-df gt-ac gt-ml-3">
30+
<div class="diff-detail-stats gt-df gt-ac gt-fw">
3131
{{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
3232
</div>
3333
</div>
34-
<div class="diff-detail-actions gt-df gt-ac">
34+
<div class="diff-detail-actions gt-df gt-ac gt-gap-2 gt-fw">
3535
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
36-
<progress id="viewed-files-summary" class="gt-mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
37-
<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"}}">
36+
<progress id="viewed-files-summary" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
37+
<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"}}">
3838
{{.locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
3939
</label>
4040
{{end}}
@@ -85,9 +85,10 @@
8585
{{$isCsv := (call $.IsCsvFile $file)}}
8686
{{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}}
8787
{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
88+
{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}}
8889
<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}}>
89-
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb">
90-
<div class="diff-file-name gt-df gt-ac gt-mr-3">
90+
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw">
91+
<div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw">
9192
<button class="fold-file ui button button-ghost gt-p-0 gt-mr-3{{if not $isExpandable}} gt-invisible{{end}}">
9293
{{if $file.ShouldBeHidden}}
9394
{{svg "octicon-chevron-right" 18}}
@@ -105,19 +106,20 @@
105106
{{end}}
106107
</div>
107108
<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>
109+
<button class="ui button button-link gt-p-3" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
108110
{{if $file.IsGenerated}}
109-
<span class="ui label gt-ml-3">{{$.locale.Tr "repo.diff.generated"}}</span>
111+
<span class="ui label">{{$.locale.Tr "repo.diff.generated"}}</span>
110112
{{end}}
111113
{{if $file.IsVendored}}
112-
<span class="ui label gt-ml-3">{{$.locale.Tr "repo.diff.vendored"}}</span>
114+
<span class="ui label">{{$.locale.Tr "repo.diff.vendored"}}</span>
113115
{{end}}
114116
{{if and $file.Mode $file.OldMode}}
115117
<span class="gt-ml-4 gt-mono">{{$file.OldMode}} &rarr; {{$file.Mode}}</span>
116118
{{else if $file.Mode}}
117119
<span class="gt-ml-4 gt-mono">{{$file.Mode}}</span>
118120
{{end}}
119121
</div>
120-
<div class="diff-file-header-actions gt-df gt-ac">
122+
<div class="diff-file-header-actions gt-df gt-ac gt-gap-2 gt-fw">
121123
{{if $showFileViewToggle}}
122124
<div class="ui compact icon buttons">
123125
<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 @@
127129
{{if $file.IsProtected}}
128130
<span class="ui basic label">{{$.locale.Tr "repo.diff.protected"}}</span>
129131
{{end}}
132+
{{if and $isReviewFile $file.HasChangedSinceLastReview}}
133+
<span class="changed-since-last-review unselectable not-mobile">{{$.locale.Tr "repo.pulls.has_changed_since_last_review"}}</span>
134+
{{end}}
130135
{{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}}
131-
<button class="ui basic tiny button unescape-button">{{$.locale.Tr "repo.unescape_control_characters"}}</button>
136+
<button class="ui basic tiny button unescape-button not-mobile">{{$.locale.Tr "repo.unescape_control_characters"}}</button>
132137
<button class="ui basic tiny button escape-button gt-hidden">{{$.locale.Tr "repo.escape_control_characters"}}</button>
133138
{{end}}
134139
{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
@@ -138,10 +143,7 @@
138143
<a class="ui basic tiny button" rel="nofollow" href="{{$.SourcePath}}/{{PathEscapeSegments .Name}}">{{$.locale.Tr "repo.diff.view_file"}}</a>
139144
{{end}}
140145
{{end}}
141-
{{if and $.IsSigned $.PageIsPullFiles (not $.IsArchived)}}
142-
{{if $file.HasChangedSinceLastReview}}
143-
<span class="changed-since-last-review unselectable">{{$.locale.Tr "repo.pulls.has_changed_since_last_review"}}</span>
144-
{{end}}
146+
{{if $isReviewFile}}
145147
<label data-link="{{$.Issue.Link}}/viewed-files" data-headcommit="{{$.PullHeadCommitID}}" class="viewed-file-form unselectable{{if $file.IsViewed}} viewed-file-checked-form{{end}}">
146148
<input type="checkbox" name="{{$file.GetDiffFileName}}" autocomplete="off"{{if $file.IsViewed}} checked{{end}}> {{$.locale.Tr "repo.pulls.has_viewed_file"}}
147149
</label>

‎web_src/css/base.css

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -893,19 +893,32 @@ img.ui.avatar,
893893
.page-content .ui.ui.ui.container:not(.fluid) {
894894
width: 1280px;
895895
max-width: calc(100vw - 64px);
896+
margin-left: auto;
897+
margin-right: auto;
898+
}
899+
900+
.ui.container.fluid.padded {
901+
padding: 0 32px;
896902
}
897903

898904
/* enable fluid page widths for medium size viewports */
899905
@media (min-width: 768px) and (max-width: 1200px) {
900-
.ui.ui.ui.container:not(.fluid) {
901-
width: calc(100vw - 64px);
906+
.page-content .ui.ui.ui.container:not(.fluid) {
907+
width: calc(100vw - 32px);
908+
max-width: calc(100vw - 32px);
909+
}
910+
.ui.container.fluid.padded {
911+
padding: 0 16px;
902912
}
903913
}
904914

905-
@media only screen and (max-width: 767px) {
915+
@media (max-width: 767px) {
906916
.page-content .ui.ui.ui.container:not(.fluid) {
907-
width: auto; /* copied from semantic css */
908-
max-width: 100%;
917+
width: calc(100vw - 16px);
918+
max-width: calc(100vw - 16px);
919+
}
920+
.ui.container.fluid.padded {
921+
padding: 0 8px;
909922
}
910923
}
911924

@@ -1165,10 +1178,6 @@ img.ui.avatar,
11651178
float: right;
11661179
}
11671180

1168-
.ui.container.fluid.padded {
1169-
padding: 0 32px;
1170-
}
1171-
11721181
.ui.form .ui.button {
11731182
font-weight: var(--font-weight-normal);
11741183
}
@@ -1525,7 +1534,8 @@ img.ui.avatar,
15251534
}
15261535

15271536
@media (max-width: 767px) {
1528-
.not-mobile {
1537+
/* double selector so it wins over .gt-df etc */
1538+
.not-mobile.not-mobile {
15291539
display: none !important;
15301540
}
15311541
}
@@ -1552,12 +1562,6 @@ img.ui.avatar,
15521562
clip: auto;
15531563
}
15541564

1555-
@media (min-width: 768px) and (max-width: 991px) {
1556-
.ui.container {
1557-
width: 95%;
1558-
}
1559-
}
1560-
15611565
.ui.menu.new-menu {
15621566
margin-bottom: 15px;
15631567
background: var(--color-navbar);

‎web_src/css/modules/button.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,11 @@
5555
border-left: 1px solid var(--color-light-border);
5656
}
5757

58-
.ui.buttons .button + .button {
58+
.ui.buttons .button:first-child:has(+ .button.active) {
59+
border-right: none !important;
60+
}
61+
62+
.ui.buttons .button + .button:not(.active) {
5963
border-left: none;
6064
}
6165

‎web_src/css/repo.css

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1616,12 +1616,6 @@
16161616
margin-right: -4px;
16171617
}
16181618

1619-
.repository .diff-detail-box > div::after {
1620-
clear: both;
1621-
content: "";
1622-
display: block;
1623-
}
1624-
16251619
.repository .diff-detail-box .diff-detail-stats strong {
16261620
margin-left: 0.25rem;
16271621
margin-right: 0.25rem;
@@ -1658,12 +1652,10 @@
16581652
height: 33px;
16591653
}
16601654

1661-
.repository .diff-detail-box .diff-detail-actions > * {
1662-
margin-right: 0;
1663-
}
1664-
1665-
.repository .diff-detail-box .diff-detail-actions > * + * {
1666-
margin-left: 0.25rem;
1655+
.diff-detail-actions > *,
1656+
.diff-detail-actions .button {
1657+
margin-left: 0 !important;
1658+
margin-right: 0 !important;
16671659
}
16681660

16691661
@media (max-width: 480px) {
@@ -1728,11 +1720,14 @@
17281720
.repository .diff-box .header:not(.resolved-placeholder) .button {
17291721
padding: 8px 12px;
17301722
flex: 0 0 auto;
1731-
margin-top: -8px;
1732-
margin-bottom: -8px;
17331723
margin-right: 0;
17341724
}
17351725

1726+
.repository .diff-box .header:not(.resolved-placeholder) .button:has(svg) {
1727+
padding-top: 6px;
1728+
padding-bottom: 6px;
1729+
}
1730+
17361731
.repository .diff-box .resolved-placeholder {
17371732
display: flex;
17381733
align-items: center;
@@ -3089,6 +3084,11 @@ tbody.commit-list {
30893084
word-break: break-all;
30903085
}
30913086

3087+
.diff-file-header {
3088+
padding-top: 5px !important;
3089+
padding-bottom: 5px !important;
3090+
}
3091+
30923092
.diff-file-box[data-folded="true"] .diff-file-body {
30933093
display: none;
30943094
}
@@ -3097,10 +3097,6 @@ tbody.commit-list {
30973097
border-radius: var(--border-radius) !important;
30983098
}
30993099

3100-
.diff-file-header-actions > * + * {
3101-
margin-left: 0.5rem !important;
3102-
}
3103-
31043100
.ui.attached.header.diff-file-header.sticky-2nd-row {
31053101
position: sticky;
31063102
top: 47px; /* match .repository .diff-detail-box */
@@ -3119,15 +3115,15 @@ tbody.commit-list {
31193115
}
31203116
}
31213117

3122-
.ui.attached.header.diff-file-header .diff-file-header-actions {
3123-
flex-shrink: 0;
3124-
}
3125-
3126-
.ui.attached.header.diff-file-header .diff-file-name {
3118+
.diff-file-name {
31273119
flex: auto;
31283120
min-width: 100px;
31293121
}
31303122

3123+
.diff-file-name .ui.label {
3124+
margin-left: 0 !important;
3125+
}
3126+
31313127
.diff-stats-bar {
31323128
display: inline-block;
31333129
background-color: var(--color-red);

0 commit comments

Comments
 (0)