From 64825ec74b352594978de96aaab1d56c52ec3125 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Mon, 25 Nov 2024 02:42:42 +0000 Subject: [PATCH 1/4] Fixed #31144 --- templates/repo/diff/box.tmpl | 8 ++++---- web_src/js/features/repo-diff.ts | 21 +++++++++++++++++++++ web_src/js/features/repo-unicode-escape.ts | 9 ++++++++- web_src/js/index.ts | 3 ++- 4 files changed, 35 insertions(+), 6 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 26737f110e41e..19eecc2f9b833 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -164,12 +164,12 @@ {{ctx.Locale.Tr "repo.pulls.has_viewed_file"}} {{end}} -
+
{{svg "octicon-kebab-horizontal" 18 "icon tw-mx-2"}} -
+
{{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} - - + {{ctx.Locale.Tr "repo.unescape_control_characters"}} + {{ctx.Locale.Tr "repo.escape_control_characters"}} {{end}} {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} {{if $file.IsDeleted}} diff --git a/web_src/js/features/repo-diff.ts b/web_src/js/features/repo-diff.ts index 0d489665a2307..a804675e5ebee 100644 --- a/web_src/js/features/repo-diff.ts +++ b/web_src/js/features/repo-diff.ts @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {createTippy} from '../modules/tippy.ts'; import {initCompReactionSelector} from './comp/ReactionSelector.ts'; import {initRepoIssueContentHistory} from './repo-issue-content.ts'; import {initDiffFileTree, initDiffFileList} from './repo-diff-filetree.ts'; @@ -225,3 +226,23 @@ export function initRepoDiffView() { initViewedCheckboxListenerFor(); initExpandAndCollapseFilesButton(); } + +export function initRepoDiffFileMenu() { + let tippyIndex = 0; + $('.js-btn-diff-file-menu').each(function () { + tippyIndex++; + this.setAttribute('data-diff-file-menu-tippy-target-id', tippyIndex); + const $menu = $(this).find('.tippy-target'); + if ($menu.length < 1) return; + $menu[0].setAttribute('data-diff-file-menu-tippy-id', tippyIndex); + createTippy(this, { + content: $menu[0], + role: 'menu', + theme: 'menu', + trigger: 'click', + placement: 'bottom', + interactive: true, + hideOnClick: true, + }); + }); +} diff --git a/web_src/js/features/repo-unicode-escape.ts b/web_src/js/features/repo-unicode-escape.ts index 7a9bca7a376c5..030b99aa983df 100644 --- a/web_src/js/features/repo-unicode-escape.ts +++ b/web_src/js/features/repo-unicode-escape.ts @@ -7,8 +7,15 @@ export function initUnicodeEscapeButton() { e.preventDefault(); - const fileContent = btn.closest('.file-content, .non-diff-file-content'); + let fileContent = btn.closest('.file-content, .non-diff-file-content'); + if (!fileContent) { + const tippyTarget = btn.closest('.tippy-target'); + if (tippyTarget) { + fileContent = document.querySelectorAll(`[data-diff-file-menu-tippy-target-id="${tippyTarget.getAttribute('data-diff-file-menu-tippy-id')}"]`)[0].closest('.file-content, .non-diff-file-content'); + } + } const fileView = fileContent?.querySelectorAll('.file-code, .file-view'); + if (!fileView) return; if (btn.matches('.escape-button')) { for (const el of fileView) el.classList.add('unicode-escaped'); hideElem(btn); diff --git a/web_src/js/index.ts b/web_src/js/index.ts index eeead37333bd8..f8e0e99c84a41 100644 --- a/web_src/js/index.ts +++ b/web_src/js/index.ts @@ -42,7 +42,7 @@ import {initSshKeyFormParser} from './features/sshkey-helper.ts'; import {initUserSettings} from './features/user-settings.ts'; import {initRepoActivityTopAuthorsChart, initRepoArchiveLinks} from './features/repo-common.ts'; import {initRepoMigrationStatusChecker} from './features/repo-migrate.ts'; -import {initRepoDiffView} from './features/repo-diff.ts'; +import {initRepoDiffView, initRepoDiffFileMenu} from './features/repo-diff.ts'; import {initOrgTeamSearchRepoBox, initOrgTeamSettings} from './features/org-team.ts'; import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.ts'; import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.ts'; @@ -212,6 +212,7 @@ onDomReady(() => { initUserAuthWebAuthnRegister, initUserSettings, initRepoDiffView, + initRepoDiffFileMenu, initPdfViewer, initScopedAccessTokenCategories, initColorPickers, From 1957c87ac31b125035a8d4c76a0ca7038d387672 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 25 Nov 2024 13:20:19 +0800 Subject: [PATCH 2/4] fix --- templates/repo/diff/box.tmpl | 30 +++++++++----------- web_src/css/modules/tippy.css | 2 ++ web_src/js/features/repo-diff.ts | 33 ++++++++-------------- web_src/js/features/repo-unicode-escape.ts | 19 ++++--------- web_src/js/index.ts | 3 +- web_src/js/utils/dom.ts | 4 +-- 6 files changed, 37 insertions(+), 54 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 19eecc2f9b833..e3742f22e13ff 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -164,24 +164,22 @@ {{ctx.Locale.Tr "repo.pulls.has_viewed_file"}} {{end}} -
- {{svg "octicon-kebab-horizontal" 18 "icon tw-mx-2"}} -
- {{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} - {{ctx.Locale.Tr "repo.unescape_control_characters"}} - {{ctx.Locale.Tr "repo.escape_control_characters"}} - {{end}} - {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} - {{if $file.IsDeleted}} - {{ctx.Locale.Tr "repo.diff.view_file"}} - {{else}} - {{ctx.Locale.Tr "repo.diff.view_file"}} - {{if and $.Repository.CanEnableEditor $.CanEditFile (not $file.IsLFSFile) (not $file.IsBin)}} - {{ctx.Locale.Tr "repo.editor.edit_this_file"}} - {{end}} + +
+ {{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} + + + {{end}} + {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} + {{if $file.IsDeleted}} + {{ctx.Locale.Tr "repo.diff.view_file"}} + {{else}} + {{ctx.Locale.Tr "repo.diff.view_file"}} + {{if and $.Repository.CanEnableEditor $.CanEditFile (not $file.IsLFSFile) (not $file.IsBin)}} + {{ctx.Locale.Tr "repo.editor.edit_this_file"}} {{end}} {{end}} -
+ {{end}}
diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index 53c3d5aaeac6e..55b9751cc635a 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -77,8 +77,10 @@ align-items: center; padding: 9px 18px; color: inherit; + background: inherit; text-decoration: none; gap: 10px; + width: 100%; } .tippy-box[data-theme="menu"] .item:hover { diff --git a/web_src/js/features/repo-diff.ts b/web_src/js/features/repo-diff.ts index a804675e5ebee..f39de96f5beaf 100644 --- a/web_src/js/features/repo-diff.ts +++ b/web_src/js/features/repo-diff.ts @@ -1,5 +1,4 @@ import $ from 'jquery'; -import {createTippy} from '../modules/tippy.ts'; import {initCompReactionSelector} from './comp/ReactionSelector.ts'; import {initRepoIssueContentHistory} from './repo-issue-content.ts'; import {initDiffFileTree, initDiffFileList} from './repo-diff-filetree.ts'; @@ -19,6 +18,7 @@ import { } from '../utils/dom.ts'; import {POST, GET} from '../modules/fetch.ts'; import {fomanticQuery} from '../modules/fomantic/base.ts'; +import {createTippy} from '../modules/tippy.ts'; const {pageData, i18n} = window.config; @@ -141,12 +141,22 @@ export function initRepoDiffConversationNav() { }); } +function initDiffHeaderPopup() { + for (const btn of document.querySelectorAll('.diff-header-popup-btn:not([data-header-popup-initialized])')) { + btn.setAttribute('data-header-popup-initialized', ''); + const popup = btn.nextElementSibling; + if (!popup?.matches('.tippy-target')) throw new Error('Popup element not found'); + createTippy(btn, {content: popup, theme: 'menu', placement: 'bottom', trigger: 'click', interactive: true, hideOnClick: true}); + } +} + // Will be called when the show more (files) button has been pressed function onShowMoreFiles() { initRepoIssueContentHistory(); initViewedCheckboxListenerFor(); countAndUpdateViewedFiles(); initImageDiff(); + initDiffHeaderPopup(); } export async function loadMoreFiles(url) { @@ -222,27 +232,8 @@ export function initRepoDiffView() { initDiffFileList(); initDiffCommitSelect(); initRepoDiffShowMore(); + initDiffHeaderPopup(); initRepoDiffFileViewToggle(); initViewedCheckboxListenerFor(); initExpandAndCollapseFilesButton(); } - -export function initRepoDiffFileMenu() { - let tippyIndex = 0; - $('.js-btn-diff-file-menu').each(function () { - tippyIndex++; - this.setAttribute('data-diff-file-menu-tippy-target-id', tippyIndex); - const $menu = $(this).find('.tippy-target'); - if ($menu.length < 1) return; - $menu[0].setAttribute('data-diff-file-menu-tippy-id', tippyIndex); - createTippy(this, { - content: $menu[0], - role: 'menu', - theme: 'menu', - trigger: 'click', - placement: 'bottom', - interactive: true, - hideOnClick: true, - }); - }); -} diff --git a/web_src/js/features/repo-unicode-escape.ts b/web_src/js/features/repo-unicode-escape.ts index 030b99aa983df..0c7d2e8592aa0 100644 --- a/web_src/js/features/repo-unicode-escape.ts +++ b/web_src/js/features/repo-unicode-escape.ts @@ -1,21 +1,14 @@ -import {hideElem, queryElemSiblings, showElem, toggleElem} from '../utils/dom.ts'; +import {addDelegatedEventListener, hideElem, queryElemSiblings, showElem, toggleElem} from '../utils/dom.ts'; export function initUnicodeEscapeButton() { - document.addEventListener('click', (e) => { - const btn = e.target.closest('.escape-button, .unescape-button, .toggle-escape-button'); - if (!btn) return; - + addDelegatedEventListener(document, 'click', '.escape-button, .unescape-button, .toggle-escape-button', (btn, e) => { e.preventDefault(); - let fileContent = btn.closest('.file-content, .non-diff-file-content'); - if (!fileContent) { - const tippyTarget = btn.closest('.tippy-target'); - if (tippyTarget) { - fileContent = document.querySelectorAll(`[data-diff-file-menu-tippy-target-id="${tippyTarget.getAttribute('data-diff-file-menu-tippy-id')}"]`)[0].closest('.file-content, .non-diff-file-content'); - } - } + const fileContentElemId = btn.getAttribute('data-file-content-elem-id'); + const fileContent = fileContentElemId ? + document.querySelector(`#${fileContentElemId}`) : + btn.closest('.file-content, .non-diff-file-content'); const fileView = fileContent?.querySelectorAll('.file-code, .file-view'); - if (!fileView) return; if (btn.matches('.escape-button')) { for (const el of fileView) el.classList.add('unicode-escaped'); hideElem(btn); diff --git a/web_src/js/index.ts b/web_src/js/index.ts index f8e0e99c84a41..eeead37333bd8 100644 --- a/web_src/js/index.ts +++ b/web_src/js/index.ts @@ -42,7 +42,7 @@ import {initSshKeyFormParser} from './features/sshkey-helper.ts'; import {initUserSettings} from './features/user-settings.ts'; import {initRepoActivityTopAuthorsChart, initRepoArchiveLinks} from './features/repo-common.ts'; import {initRepoMigrationStatusChecker} from './features/repo-migrate.ts'; -import {initRepoDiffView, initRepoDiffFileMenu} from './features/repo-diff.ts'; +import {initRepoDiffView} from './features/repo-diff.ts'; import {initOrgTeamSearchRepoBox, initOrgTeamSettings} from './features/org-team.ts'; import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.ts'; import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.ts'; @@ -212,7 +212,6 @@ onDomReady(() => { initUserAuthWebAuthnRegister, initUserSettings, initRepoDiffView, - initRepoDiffFileMenu, initPdfViewer, initScopedAccessTokenCategories, initColorPickers, diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts index 4bbb0c414aca0..a4c7c0e4c6df1 100644 --- a/web_src/js/utils/dom.ts +++ b/web_src/js/utils/dom.ts @@ -2,10 +2,10 @@ import {debounce} from 'throttle-debounce'; import type {Promisable} from 'type-fest'; import type $ from 'jquery'; -type ElementArg = Element | string | NodeListOf | Array | ReturnType; +type ArrayLikeIterable = ArrayLike & Iterable; // for NodeListOf and Array +type ElementArg = Element | string | ArrayLikeIterable | ReturnType; type ElementsCallback = (el: T) => Promisable; type ElementsCallbackWithArgs = (el: Element, ...args: any[]) => Promisable; -type ArrayLikeIterable = ArrayLike & Iterable; // for NodeListOf and Array function elementsCall(el: ElementArg, func: ElementsCallbackWithArgs, ...args: any[]) { if (typeof el === 'string' || el instanceof String) { From 9faaa4084588490d65e73b1b23d567669750a162 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Mon, 25 Nov 2024 13:53:26 +0800 Subject: [PATCH 3/4] Update box.tmpl --- templates/repo/diff/box.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index e3742f22e13ff..20e0c9db668c9 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -164,7 +164,7 @@ {{ctx.Locale.Tr "repo.pulls.has_viewed_file"}} {{end}} - +
{{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} From 86b2e54b546f0c7ff7165f0cef066bcf099ac655 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Mon, 25 Nov 2024 15:04:00 +0000 Subject: [PATCH 4/4] Fixed tests error --- tests/integration/pull_compare_test.go | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/integration/pull_compare_test.go b/tests/integration/pull_compare_test.go index def6506253f90..ad0be72dcbd51 100644 --- a/tests/integration/pull_compare_test.go +++ b/tests/integration/pull_compare_test.go @@ -97,7 +97,7 @@ func TestPullCompare_EnableAllowEditsFromMaintainer(t *testing.T) { user2Session := loginUser(t, "user2") resp = user2Session.MakeRequest(t, NewRequest(t, "GET", fmt.Sprintf("%s/files", prURL)), http.StatusOK) htmlDoc := NewHTMLParser(t, resp.Body) - nodes := htmlDoc.doc.Find(".diff-file-box[data-new-filename=\"README.md\"] .diff-file-header-actions .dropdown .menu a") + nodes := htmlDoc.doc.Find(".diff-file-box[data-new-filename=\"README.md\"] .diff-file-header-actions .tippy-target a") if assert.Equal(t, 1, nodes.Length()) { // there is only "View File" button, no "Edit File" button assert.Equal(t, "View File", nodes.First().Text()) @@ -121,7 +121,7 @@ func TestPullCompare_EnableAllowEditsFromMaintainer(t *testing.T) { // user2 (admin of repo3) goes to the PR files page again resp = user2Session.MakeRequest(t, NewRequest(t, "GET", fmt.Sprintf("%s/files", prURL)), http.StatusOK) htmlDoc = NewHTMLParser(t, resp.Body) - nodes = htmlDoc.doc.Find(".diff-file-box[data-new-filename=\"README.md\"] .diff-file-header-actions .dropdown .menu a") + nodes = htmlDoc.doc.Find(".diff-file-box[data-new-filename=\"README.md\"] .diff-file-header-actions .tippy-target a") if assert.Equal(t, 2, nodes.Length()) { // there are "View File" button and "Edit File" button assert.Equal(t, "View File", nodes.First().Text())