Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Jun 1, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b093d2c
Add button on diff header to copy file name
silverwind May 29, 2023
6574d4a
adjust margin
silverwind May 29, 2023
a504d18
use gap in review header and move changed label
silverwind May 29, 2023
896e3e7
tweak button height
silverwind May 29, 2023
9705da7
fix button borders
silverwind May 29, 2023
e44bfa6
improve mobile layout
silverwind May 29, 2023
a7b5282
reduce page padding on mobile
silverwind May 29, 2023
aa3afab
reduce header padding
silverwind May 29, 2023
6d37f82
back out button change
silverwind May 29, 2023
d7f3de6
use 14px icon
silverwind May 29, 2023
cd7edf6
make fluid and non-fluid containers always have same width and padding
silverwind May 30, 2023
cf93aa7
Merge branch 'main' into copybtn
GiteaBot Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions templates/repo/diff/box.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand All @@ -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}}
Expand Down Expand Up @@ -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}}
Expand All @@ -105,19 +106,20 @@
{{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>
{{else if $file.Mode}}
<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>
Expand All @@ -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)}}
Expand All @@ -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>
Expand Down
36 changes: 20 additions & 16 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
}
}
Expand All @@ -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);
Expand Down
6 changes: 5 additions & 1 deletion web_src/css/modules/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
42 changes: 19 additions & 23 deletions web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 */
Expand All @@ -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);
Expand Down