From 628ac21cf3624149e12026fa82291a1a60b176ab Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 18 Mar 2023 00:54:43 +0100 Subject: [PATCH 01/24] Diff improvements --- templates/repo/diff/box.tmpl | 13 +++++++++++-- web_src/css/repository.css | 18 ++++++++++++++++++ web_src/css/review.css | 8 -------- web_src/js/components/DiffFileTree.vue | 22 ++++++++++++++-------- 4 files changed, 43 insertions(+), 18 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 6dafe6f89620..adab780ba8d8 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -17,9 +17,15 @@
{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}} - {{svg "octicon-sidebar-collapse" 20 "icon hide"}} - {{svg "octicon-sidebar-expand" 20 "icon"}} + {{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}} + {{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}} +
{{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
@@ -68,6 +74,9 @@
+
{{range $i, $file := .Diff.Files}} {{/*notice: the index of Diff.Files should not be used for element ID, because the index will be restarted from 0 when doing load-more for PRs with a lot of files*/}} diff --git a/web_src/css/repository.css b/web_src/css/repository.css index abc812b5b407..6333cc12b592 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -1852,6 +1852,24 @@ padding-bottom: 5px; } +.diff-file-box { + border: 1px solid transparent; + border-radius: 0.285rem; /* Just like ui.top.attached.header */ +} + +.diff-file-box .ui.attached.header, +.diff-file-box .ui.attached.table { + margin: 0; /* remove fomantic negative margins */; + width: initial; /* remove fomantic over 100% width */; + max-width: initial; /* remove fomantic over 100% width */; +} + +.diff-file-box:target { + border-color: var(--color-primary) !important; + border-radius: var(--border-radius) !important; + box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important; +} + .repository .diff-stats { clear: both; margin-bottom: 5px; diff --git a/web_src/css/review.css b/web_src/css/review.css index 42267b4d2a33..e181d0109b54 100644 --- a/web_src/css/review.css +++ b/web_src/css/review.css @@ -308,11 +308,3 @@ a.blob-excerpt:hover { width: 72px; height: 10px; } - -.diff-file-box { - border-radius: 0.285rem; /* Just like ui.top.attached.header */ -} - -.diff-file-box:target { - box-shadow: 0 0 0 3px var(--color-accent); -} diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index fa59768ee588..cca7d5ecac16 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -16,6 +16,7 @@
{{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}} diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 606cdaa82644..770c4288c2c5 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -113,8 +113,12 @@ export default { this.updateState(this.fileTreeIsVisible); }, updateState(visible) { - const [toShow, toHide] = document.querySelectorAll('.diff-toggle-file-tree-button .icon'); + const btn = document.querySelector('.diff-toggle-file-tree-button'); + const [toShow, toHide] = btn.querySelectorAll('.icon'); const tree = document.getElementById('diff-file-tree'); + const newTooltip = btn.getAttribute(`data-content-${visible ? 'hide' : 'show'}`); + btn.setAttribute('data-content', newTooltip); + btn._tippy.setContent(newTooltip); toggleElem(tree, visible); toggleElem(toShow, !visible); toggleElem(toHide, visible); From f9df311993bab86c64f949aaf196c4cadce4ba17 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 21 Mar 2023 15:15:54 +0100 Subject: [PATCH 13/24] don't update tooltip on component mount --- web_src/js/components/DiffFileTree.vue | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 770c4288c2c5..5621cc5515af 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -94,7 +94,7 @@ export default { }, mounted() { // ensure correct buttons when we are mounted to the dom - this.updateState(this.fileTreeIsVisible); + this.updateState(this.fileTreeIsVisible, false); // replace the pageData.diffFileInfo.files with our watched data so we get updates pageData.diffFileInfo.files = this.files; @@ -110,15 +110,17 @@ export default { updateVisibility(visible) { this.fileTreeIsVisible = visible; localStorage.setItem(LOCAL_STORAGE_KEY, this.fileTreeIsVisible); - this.updateState(this.fileTreeIsVisible); + this.updateState(this.fileTreeIsVisible, true); }, - updateState(visible) { + updateState(visible, updateTooltip) { const btn = document.querySelector('.diff-toggle-file-tree-button'); const [toShow, toHide] = btn.querySelectorAll('.icon'); const tree = document.getElementById('diff-file-tree'); - const newTooltip = btn.getAttribute(`data-content-${visible ? 'hide' : 'show'}`); - btn.setAttribute('data-content', newTooltip); - btn._tippy.setContent(newTooltip); + if (updateTooltip) { + const newTooltip = btn.getAttribute(`data-content-${visible ? 'hide' : 'show'}`); + btn.setAttribute('data-content', newTooltip); + btn._tippy?.setContent(newTooltip); + } toggleElem(tree, visible); toggleElem(toShow, !visible); toggleElem(toHide, visible); From 5a8639b03b7fd0cf872fc8f963472af40bbc3071 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 21 Mar 2023 15:35:58 +0100 Subject: [PATCH 14/24] use longer var names, move button color style --- templates/repo/diff/box.tmpl | 12 ++++++------ web_src/css/base.css | 1 - web_src/css/repository.css | 1 + 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index cdce460195bd..1cada6bd3e35 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -21,11 +21,11 @@ {{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}}
{{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}} @@ -76,7 +76,7 @@
{{range $i, $file := .Diff.Files}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 23d9fc7f7462..beac8fde1617 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -240,7 +240,6 @@ table { button { cursor: pointer; - color: var(--color-text); } details summary { diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 5210bc8f271e..de1b4ea7551c 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -3276,6 +3276,7 @@ td.blob-excerpt { background: none; border: none; user-select: none; + color: inherit; } .diff-toggle-file-tree-button:hover { From 2901e6e047785705af1da8575c1832343a89c31b Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 21 Mar 2023 15:52:53 +0100 Subject: [PATCH 15/24] restore max-width --- web_src/css/repository.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/repository.css b/web_src/css/repository.css index de1b4ea7551c..3f4ea95b6667 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -3258,6 +3258,7 @@ td.blob-excerpt { #diff-file-boxes { flex: 1; + max-width: 100%; } #diff-file-tree { From cdc0ce8138b5c3008b0d8f33dcf2c0f7a86b914f Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 21 Mar 2023 15:57:13 +0100 Subject: [PATCH 16/24] use css var --- web_src/css/repository.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 3f4ea95b6667..b6a6535e6df9 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -1859,7 +1859,7 @@ .diff-file-box { border: 1px solid transparent; - border-radius: 0.285rem; /* Just like ui.top.attached.header */ + border-radius: var(--border-radius); } /* TODO: this can potentially be made "global" by removing the class prefix */ From 8a188883ff49fd36c09cbbcf1d503d51b48898f4 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 25 Mar 2023 19:29:59 +0100 Subject: [PATCH 17/24] fix tooltip --- templates/repo/diff/box.tmpl | 4 ++-- web_src/js/components/DiffFileTree.vue | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index dd86bd8185e0..65f711f1bf14 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -15,7 +15,7 @@
-