Skip to content

Commit

Permalink
Add button on diff header to copy file name, misc diff header tweaks (g…
Browse files Browse the repository at this point in the history 
…o-gitea#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">
  • Loading branch information
@silverwind
silverwind authored Jun 1, 2023
1 parent 5d23c88 commit c5ede35
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 55 deletions.
32 changes: 17 additions & 15 deletions templates/repo/diff/box.tmpl
View file
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
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
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
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

0 comments on commit c5ede35

Please sign in to comment.