From 9657b1faca8b37dcacc0ae8122d9103ccc943a44 Mon Sep 17 00:00:00 2001 From: brymut Date: Mon, 10 Nov 2025 11:45:56 +0300 Subject: [PATCH 1/9] feat(repo): Add file search functionality to repository file tree --- templates/repo/view_content.tmpl | 39 ++++--- templates/repo/view_file_tree.tmpl | 5 + web_src/js/components/ViewFileTree.vue | 150 ++++++++++++++++++++++++- 3 files changed, 171 insertions(+), 23 deletions(-) diff --git a/templates/repo/view_content.tmpl b/templates/repo/view_content.tmpl index 66e4fffcb9..0d9e97edd7 100644 --- a/templates/repo/view_content.tmpl +++ b/templates/repo/view_content.tmpl @@ -42,26 +42,6 @@ {{ctx.Locale.Tr "repo.find_file.go_to_file"}} {{end}} - {{if and .RefFullName.IsBranch (not .IsViewFile)}} - - {{end}} - {{if and $isTreePathRoot .Repository.IsTemplate}} {{ctx.Locale.Tr "repo.use_template"}} @@ -86,6 +66,25 @@
+ {{if and .RefFullName.IsBranch (not .IsViewFile)}} + + {{end}} {{if $isTreePathRoot}} {{template "repo/clone_panel" .}} diff --git a/templates/repo/view_file_tree.tmpl b/templates/repo/view_file_tree.tmpl index 8aed05f346..844b396bd4 100644 --- a/templates/repo/view_file_tree.tmpl +++ b/templates/repo/view_file_tree.tmpl @@ -7,9 +7,14 @@ {{ctx.Locale.Tr "files"}}
+
+ +
+ {{/* TODO: Dynamically move components such as refSelector and createPR here */}}
diff --git a/web_src/js/components/ViewFileTree.vue b/web_src/js/components/ViewFileTree.vue index 1f90f92586..0526e36070 100644 --- a/web_src/js/components/ViewFileTree.vue +++ b/web_src/js/components/ViewFileTree.vue @@ -1,9 +1,15 @@ @@ -35,4 +128,55 @@ onMounted(async () => { gap: 1px; margin-right: .5rem; } + +.file-tree-search-results { + display: flex; + flex-direction: column; + margin: 0 0.5rem 0.5rem; + max-height: 400px; + overflow-y: auto; + background: var(--color-box-body); + border: 1px solid var(--color-secondary); + border-radius: 6px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); +} + +.file-tree-search-result-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + cursor: pointer; + transition: background-color 0.1s; + border-bottom: 1px solid var(--color-secondary); +} + +.file-tree-search-result-item:last-child { + border-bottom: none; +} + +.file-tree-search-result-item:hover, +.file-tree-search-result-item.selected { + background-color: var(--color-hover); +} + +.file-tree-search-result-path { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; +} + +.search-match { + color: var(--color-red); + font-weight: var(--font-weight-semibold); +} + +.file-tree-search-no-results { + padding: 1rem; + text-align: center; + color: var(--color-text-light-2); + font-size: 14px; +} From efecb479c2fc150c27690f054986bbfb3ea037ea Mon Sep 17 00:00:00 2001 From: brymut Date: Mon, 10 Nov 2025 18:17:11 +0300 Subject: [PATCH 2/9] feat(repo): add tree view context menu actions --- options/locale/locale_en-US.ini | 2 ++ templates/repo/view_content.tmpl | 24 ++++++++++++++++++++ web_src/css/index.css | 1 + web_src/css/repo/file-actions.css | 19 ++++++++++++++++ web_src/js/features/repo-file-actions.ts | 28 ++++++++++++++++++++++++ web_src/js/index-domready.ts | 2 ++ 6 files changed, 76 insertions(+) create mode 100644 web_src/css/repo/file-actions.css create mode 100644 web_src/js/features/repo-file-actions.ts diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index ddc12aefaa..d9ac17d1b9 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -1317,6 +1317,7 @@ ambiguous_character = `%[1]c [U+%04[1]X] can be confused with %[2]c [U+%04[2]X]` escape_control_characters = Escape unescape_control_characters = Unescape file_copy_permalink = Copy Permalink +center_content = Center content view_git_blame = View Git Blame video_not_supported_in_browser = Your browser does not support the HTML5 'video' tag. audio_not_supported_in_browser = Your browser does not support the HTML5 'audio' tag. @@ -1354,6 +1355,7 @@ editor.this_file_locked = File is locked editor.must_be_on_a_branch = You must be on a branch to make or propose changes to this file. editor.fork_before_edit = You must fork this repository to make or propose changes to this file. editor.delete_this_file = Delete File +editor.delete_this_directory = Delete Directory editor.must_have_write_access = You must have write access to make or propose changes to this file. editor.file_delete_success = File "%s" has been deleted. editor.name_your_file = Name your file… diff --git a/templates/repo/view_content.tmpl b/templates/repo/view_content.tmpl index 0d9e97edd7..0716746a24 100644 --- a/templates/repo/view_content.tmpl +++ b/templates/repo/view_content.tmpl @@ -84,6 +84,30 @@ + {{end}} {{if $isTreePathRoot}} diff --git a/web_src/css/index.css b/web_src/css/index.css index 291cd04b2b..796497c630 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -63,6 +63,7 @@ @import "./repo/issue-list.css"; @import "./repo/list-header.css"; @import "./repo/file-view.css"; +@import "./repo/file-actions.css"; @import "./repo/wiki.css"; @import "./repo/header.css"; @import "./repo/home.css"; diff --git a/web_src/css/repo/file-actions.css b/web_src/css/repo/file-actions.css new file mode 100644 index 0000000000..c1a508aa9b --- /dev/null +++ b/web_src/css/repo/file-actions.css @@ -0,0 +1,19 @@ +/* Repository file actions dropdown and centered content */ +.repo-file-actions-dropdown .menu { + min-width: 200px; +} + +.repo-file-actions-dropdown .menu .item { + cursor: pointer; +} + +.repo-file-actions-dropdown .menu .divider { + margin: 0.5rem 0; +} + +/* Center content option */ +.repo-content-centered { + max-width: 980px; + margin-left: auto !important; + margin-right: auto !important; +} diff --git a/web_src/js/features/repo-file-actions.ts b/web_src/js/features/repo-file-actions.ts new file mode 100644 index 0000000000..bd167e135c --- /dev/null +++ b/web_src/js/features/repo-file-actions.ts @@ -0,0 +1,28 @@ +// Handle repository file/directory actions dropdown +export function initRepoFileActions() { + const centerContentCheckbox = document.querySelector('#center-content-checkbox'); + if (!centerContentCheckbox) return; + + // Load saved preference + const isCentered = localStorage.getItem('repo-content-centered') === 'true'; + centerContentCheckbox.checked = isCentered; + applyCenterContent(isCentered); + + // Handle checkbox change + centerContentCheckbox.addEventListener('change', () => { + const centered = centerContentCheckbox.checked; + localStorage.setItem('repo-content-centered', String(centered)); + applyCenterContent(centered); + }); +} + +function applyCenterContent(centered: boolean) { + const container = document.querySelector('.ui.container'); + if (!container) return; + + if (centered) { + container.classList.add('repo-content-centered'); + } else { + container.classList.remove('repo-content-centered'); + } +} diff --git a/web_src/js/index-domready.ts b/web_src/js/index-domready.ts index df56c85c86..49d7814b96 100644 --- a/web_src/js/index-domready.ts +++ b/web_src/js/index-domready.ts @@ -64,6 +64,7 @@ import {initGlobalButtonClickOnEnter, initGlobalButtons, initGlobalDeleteButton} import {initGlobalComboMarkdownEditor, initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts'; import {callInitFunctions} from './modules/init.ts'; import {initRepoViewFileTree} from './features/repo-view-file-tree.ts'; +import {initRepoFileActions} from './features/repo-file-actions.ts'; const initStartTime = performance.now(); const initPerformanceTracer = callInitFunctions([ @@ -137,6 +138,7 @@ const initPerformanceTracer = callInitFunctions([ initRepoReleaseNew, initRepoTopicBar, initRepoViewFileTree, + initRepoFileActions, initRepoWikiForm, initRepository, initRepositoryActionView, From e0206bc9dd1b44d13874b82586cbdb33f6ced87c Mon Sep 17 00:00:00 2001 From: brymut Date: Tue, 11 Nov 2025 05:34:19 +0300 Subject: [PATCH 3/9] enhance(repo): fix overflow and scrolling on search results in sidebar search --- templates/repo/view_file_tree.tmpl | 2 +- web_src/css/repo/file-actions.css | 7 +- web_src/css/repo/home.css | 2 + web_src/js/components/ViewFileTree.vue | 118 +++++++++++++++++++------ 4 files changed, 99 insertions(+), 30 deletions(-) diff --git a/templates/repo/view_file_tree.tmpl b/templates/repo/view_file_tree.tmpl index 844b396bd4..29302599ef 100644 --- a/templates/repo/view_file_tree.tmpl +++ b/templates/repo/view_file_tree.tmpl @@ -12,7 +12,7 @@ {{/* TODO: Dynamically move components such as refSelector and createPR here */}} -
.menu { + margin-top: 4px !important; +} + +.ui.dropdown.repo-file-actions-dropdown > .menu { + margin-top: 4px !important; min-width: 200px; } diff --git a/web_src/css/repo/home.css b/web_src/css/repo/home.css index ee371f1b1c..f0c366c765 100644 --- a/web_src/css/repo/home.css +++ b/web_src/css/repo/home.css @@ -63,6 +63,8 @@ bottom: 0; height: 100%; overflow-y: hidden; + overflow-x: visible; + z-index: 10; } .repo-view-content { diff --git a/web_src/js/components/ViewFileTree.vue b/web_src/js/components/ViewFileTree.vue index 0526e36070..2dde7392dc 100644 --- a/web_src/js/components/ViewFileTree.vue +++ b/web_src/js/components/ViewFileTree.vue @@ -1,12 +1,14 @@ diff --git a/web_src/js/features/repo-file-actions.ts b/web_src/js/features/repo-file-actions.ts deleted file mode 100644 index bd167e135c..0000000000 --- a/web_src/js/features/repo-file-actions.ts +++ /dev/null @@ -1,28 +0,0 @@ -// Handle repository file/directory actions dropdown -export function initRepoFileActions() { - const centerContentCheckbox = document.querySelector('#center-content-checkbox'); - if (!centerContentCheckbox) return; - - // Load saved preference - const isCentered = localStorage.getItem('repo-content-centered') === 'true'; - centerContentCheckbox.checked = isCentered; - applyCenterContent(isCentered); - - // Handle checkbox change - centerContentCheckbox.addEventListener('change', () => { - const centered = centerContentCheckbox.checked; - localStorage.setItem('repo-content-centered', String(centered)); - applyCenterContent(centered); - }); -} - -function applyCenterContent(centered: boolean) { - const container = document.querySelector('.ui.container'); - if (!container) return; - - if (centered) { - container.classList.add('repo-content-centered'); - } else { - container.classList.remove('repo-content-centered'); - } -} diff --git a/web_src/js/index-domready.ts b/web_src/js/index-domready.ts index 49d7814b96..df56c85c86 100644 --- a/web_src/js/index-domready.ts +++ b/web_src/js/index-domready.ts @@ -64,7 +64,6 @@ import {initGlobalButtonClickOnEnter, initGlobalButtons, initGlobalDeleteButton} import {initGlobalComboMarkdownEditor, initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts'; import {callInitFunctions} from './modules/init.ts'; import {initRepoViewFileTree} from './features/repo-view-file-tree.ts'; -import {initRepoFileActions} from './features/repo-file-actions.ts'; const initStartTime = performance.now(); const initPerformanceTracer = callInitFunctions([ @@ -138,7 +137,6 @@ const initPerformanceTracer = callInitFunctions([ initRepoReleaseNew, initRepoTopicBar, initRepoViewFileTree, - initRepoFileActions, initRepoWikiForm, initRepository, initRepositoryActionView, From 5df4956dac6c6962f2eb1cc3b349701952d14d58 Mon Sep 17 00:00:00 2001 From: brymut Date: Wed, 12 Nov 2025 13:08:20 +0300 Subject: [PATCH 5/9] feat(repo): Added tree view to adding new file(s) view. --- routers/web/repo/editor.go | 3 +++ routers/web/repo/editor_apply_patch.go | 1 + templates/repo/editor/edit.tmpl | 20 ++++++++++++++++---- templates/repo/editor/patch.tmpl | 20 ++++++++++++++++---- templates/repo/editor/upload.tmpl | 20 ++++++++++++++++---- 5 files changed, 52 insertions(+), 12 deletions(-) diff --git a/routers/web/repo/editor.go b/routers/web/repo/editor.go index 11a20bece9..bf664146fa 100644 --- a/routers/web/repo/editor.go +++ b/routers/web/repo/editor.go @@ -280,6 +280,8 @@ func EditFile(ctx *context.Context) { return } + prepareHomeTreeSideBarSwitch(ctx) + // on the "New File" page, we should add an empty path field to make end users could input a new name prepareTreePathFieldsAndPaths(ctx, util.Iif(isNewFile, ctx.Repo.TreePath+"/", ctx.Repo.TreePath)) @@ -465,6 +467,7 @@ func DeleteFilePost(ctx *context.Context) { func UploadFile(ctx *context.Context) { ctx.Data["PageIsUpload"] = true + prepareHomeTreeSideBarSwitch(ctx) prepareTreePathFieldsAndPaths(ctx, ctx.Repo.TreePath) opts := prepareEditorCommitFormOptions(ctx, "_upload") if ctx.Written() { diff --git a/routers/web/repo/editor_apply_patch.go b/routers/web/repo/editor_apply_patch.go index aad7b4129c..a18369e5a4 100644 --- a/routers/web/repo/editor_apply_patch.go +++ b/routers/web/repo/editor_apply_patch.go @@ -14,6 +14,7 @@ import ( ) func NewDiffPatch(ctx *context.Context) { + prepareHomeTreeSideBarSwitch(ctx) prepareEditorCommitFormOptions(ctx, "_diffpatch") if ctx.Written() { return diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 0911d02e1f..566aca09b0 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -1,15 +1,25 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+
{{template "base/alert" .}} -
+
+ {{template "repo/view_file_tree" .}} +
+
+ {{.CsrfTokenHtml}} {{template "repo/editor/common_top" .}} -
+
+ {{template "repo/editor/common_breadcrumb" .}}
{{if not .NotEditableReason}} @@ -47,7 +57,9 @@
{{end}} {{template "repo/editor/commit_form" .}} - + +
+
{{template "base/footer" .}} diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl index fa00edd92e..04027645b6 100644 --- a/templates/repo/editor/patch.tmpl +++ b/templates/repo/editor/patch.tmpl @@ -1,15 +1,25 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+
{{template "base/alert" .}} -
+
+ {{template "repo/view_file_tree" .}} +
+
+ {{.CsrfTokenHtml}} {{template "repo/editor/common_top" .}} -
+
+
{{ctx.Locale.Tr "repo.editor.patching"}} {{.Repository.FullName}} @@ -33,7 +43,9 @@
{{template "repo/editor/commit_form" .}} - + +
+
{{template "base/footer" .}} diff --git a/templates/repo/editor/upload.tmpl b/templates/repo/editor/upload.tmpl index 3e36c77b3b..20f96eb0cb 100644 --- a/templates/repo/editor/upload.tmpl +++ b/templates/repo/editor/upload.tmpl @@ -1,19 +1,31 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+
{{template "base/alert" .}} -
+
+
+ {{template "repo/view_file_tree" .}} +
+
+ {{.CsrfTokenHtml}} {{template "repo/editor/common_top" .}} -
+
+ {{template "repo/editor/common_breadcrumb" .}}
{{template "repo/upload" .}}
{{template "repo/editor/commit_form" .}} - + +
+
{{template "base/footer" .}} From 57782c392ad54bc59f01d3249e1f626c07eafd1d Mon Sep 17 00:00:00 2001 From: brymut Date: Thu, 13 Nov 2025 10:04:54 +0300 Subject: [PATCH 6/9] enhance(repo): move commit_form to modal and commit action buttons above editor. --- templates/repo/editor/commit_form.tmpl | 12 +- templates/repo/editor/edit.tmpl | 36 ++++-- templates/repo/editor/patch.tmpl | 36 ++++-- templates/repo/editor/upload.tmpl | 36 ++++-- web_src/css/index.css | 1 + web_src/css/repo/editor-commit.css | 129 ++++++++++++++++++++++ web_src/js/features/repo-editor-commit.ts | 102 +++++++++++++++++ web_src/js/index-domready.ts | 2 + 8 files changed, 326 insertions(+), 28 deletions(-) create mode 100644 web_src/css/repo/editor-commit.css create mode 100644 web_src/js/features/repo-editor-commit.ts diff --git a/templates/repo/editor/commit_form.tmpl b/templates/repo/editor/commit_form.tmpl index 10872f8af7..f39009f218 100644 --- a/templates/repo/editor/commit_form.tmpl +++ b/templates/repo/editor/commit_form.tmpl @@ -1,4 +1,7 @@
+ {{ctx.AvatarUtils.Avatar .SignedUser 40 "commit-avatar"}}

@@ -80,8 +83,9 @@ {{end}}

- - {{ctx.Locale.Tr "repo.editor.cancel"}} +
+ +
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 566aca09b0..21306c85aa 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -14,13 +14,21 @@ > {{.CsrfTokenHtml}} {{template "repo/editor/common_top" .}} -
- - {{template "repo/editor/common_breadcrumb" .}} +
+
+ + {{template "repo/editor/common_breadcrumb" .}} +
+
+ {{ctx.Locale.Tr "repo.editor.cancel"}} + +
{{if not .NotEditableReason}}
@@ -56,10 +64,22 @@
{{end}} - {{template "repo/editor/commit_form" .}} + {{/* Commit form fields - inside form but hidden, will be shown in modal */}} + + {{/* Hidden dummy button for repo-editor.ts compatibility */}} +
+ + {{/* Commit Changes Modal - fields will be moved here visually */}} +
{{template "base/footer" .}} diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl index 04027645b6..8cbb03ca09 100644 --- a/templates/repo/editor/patch.tmpl +++ b/templates/repo/editor/patch.tmpl @@ -14,13 +14,14 @@ > {{.CsrfTokenHtml}} {{template "repo/editor/common_top" .}} -
- -
+
+
+ +
{{ctx.Locale.Tr "repo.editor.patching"}} {{.Repository.FullName}}
:
@@ -28,6 +29,13 @@ {{ctx.Locale.Tr "repo.editor.or"}} {{ctx.Locale.Tr "repo.editor.cancel_lower"}} +
+
+
+ {{ctx.Locale.Tr "repo.editor.cancel"}} +
@@ -42,10 +50,22 @@
- {{template "repo/editor/commit_form" .}} + {{/* Commit form fields - inside form but hidden, will be shown in modal */}} + + {{/* Hidden dummy button for repo-editor.ts compatibility */}} +
+ + {{/* Commit Changes Modal - fields will be moved here visually */}} + {{template "base/footer" .}} diff --git a/templates/repo/editor/upload.tmpl b/templates/repo/editor/upload.tmpl index 20f96eb0cb..b983f4a651 100644 --- a/templates/repo/editor/upload.tmpl +++ b/templates/repo/editor/upload.tmpl @@ -11,21 +11,41 @@
{{.CsrfTokenHtml}} {{template "repo/editor/common_top" .}} -
- - {{template "repo/editor/common_breadcrumb" .}} +
+
+ + {{template "repo/editor/common_breadcrumb" .}} +
+
+ {{ctx.Locale.Tr "repo.editor.cancel"}} + +
{{template "repo/upload" .}}
- {{template "repo/editor/commit_form" .}} + {{/* Commit form fields - inside form but hidden, will be shown in modal */}} + + {{/* Hidden dummy button for repo-editor.ts compatibility */}} +
+ + {{/* Commit Changes Modal - fields will be moved here visually */}} + {{template "base/footer" .}} diff --git a/web_src/css/index.css b/web_src/css/index.css index 796497c630..53ed8c6909 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -64,6 +64,7 @@ @import "./repo/list-header.css"; @import "./repo/file-view.css"; @import "./repo/file-actions.css"; +@import "./repo/editor-commit.css"; @import "./repo/wiki.css"; @import "./repo/header.css"; @import "./repo/home.css"; diff --git a/web_src/css/repo/editor-commit.css b/web_src/css/repo/editor-commit.css new file mode 100644 index 0000000000..281e7719d1 --- /dev/null +++ b/web_src/css/repo/editor-commit.css @@ -0,0 +1,129 @@ +/* Editor commit modal styling */ +#commit-changes-modal .content { + padding: 1.5rem; +} + +.commit-form-in-modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10001; + max-width: 680px; + width: 90%; + max-height: 85vh; + overflow-y: auto; + background: var(--color-box-body); + border-radius: 6px; + padding: 1.5rem; + padding-top: 3rem; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +/* Close button inside the commit form */ +.commit-modal-close { + position: absolute; + top: 0.5rem; + right: 0.5rem; + cursor: pointer; + background: transparent; + border: none; + padding: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text); + opacity: 0.6; + z-index: 10; + border-radius: 4px; + transition: all 0.2s; +} + +.commit-modal-close:hover { + opacity: 1; + background: var(--color-hover); +} + +#commit-changes-modal .commit-form-wrapper { + padding-left: 48px; + position: relative; +} + +#commit-changes-modal .commit-form-wrapper .commit-avatar { + float: left; + margin-left: -48px; +} + +#commit-changes-modal .commit-form-wrapper .commit-form { + position: relative; + padding: 15px; + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + background-color: var(--color-box-body); +} + +#commit-changes-modal .commit-form h3 { + margin-top: 0; + margin-bottom: 1rem; +} + +#commit-changes-modal .commit-form .field { + margin-bottom: 1rem; +} + +#commit-changes-modal .commit-form input[name="commit_summary"] { + width: 100%; + padding: 10px 12px; + font-size: 14px; +} + +#commit-changes-modal .commit-form textarea[name="commit_message"] { + width: 100%; + padding: 10px 12px; + font-size: 14px; +} + +#commit-changes-modal .quick-pull-choice .field { + margin-bottom: 0.75rem; +} + +#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input { + position: relative; + margin-left: 25px; +} + +#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input { + width: 240px !important; + padding-left: 26px !important; +} + +#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch { + position: absolute; + top: 9px; + left: 8px; +} + +/* Arrow pointing to avatar */ +#commit-changes-modal .avatar-content-left-arrow::before, +#commit-changes-modal .avatar-content-left-arrow::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +#commit-changes-modal .avatar-content-left-arrow::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +#commit-changes-modal .avatar-content-left-arrow::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} diff --git a/web_src/js/features/repo-editor-commit.ts b/web_src/js/features/repo-editor-commit.ts new file mode 100644 index 0000000000..82b561cc15 --- /dev/null +++ b/web_src/js/features/repo-editor-commit.ts @@ -0,0 +1,102 @@ +import $ from 'jquery'; + +export function initRepoEditorCommit() { + const commitButton = document.querySelector('#commit-changes-button'); + const commitModal = document.querySelector('#commit-changes-modal'); + const modalCommitButton = document.querySelector('#commit-button'); + + if (!commitButton || !commitModal) return; + + const elForm = document.querySelector('.repository.editor .edit.form'); + const dirtyFileClass = 'dirty-file'; + + // Sync the top commit button state with the modal commit button state + const syncTopCommitButtonState = () => { + // Check if form has changes (using the same dirty class from repo-editor.ts) + const hasChanges = elForm?.classList.contains(dirtyFileClass); + + // Also check the modal commit button state as fallback + const modalButtonDisabled = modalCommitButton?.disabled; + + if (hasChanges || !modalButtonDisabled) { + commitButton.classList.remove('disabled'); + } else { + commitButton.classList.add('disabled'); + } + }; + + // For upload page - enable button when files are added + const dropzone = document.querySelector('.dropzone'); + if (dropzone) { + const observer = new MutationObserver(() => { + const filesContainer = dropzone.querySelector('.files'); + const hasFiles = filesContainer && filesContainer.children.length > 0; + + if (hasFiles) { + commitButton.classList.remove('disabled'); + } else { + commitButton.classList.add('disabled'); + } + }); + + const filesContainer = dropzone.querySelector('.files'); + if (filesContainer) { + observer.observe(filesContainer, {childList: true}); + } + } + + // Watch for changes in the form's dirty state + if (elForm) { + const observer = new MutationObserver(syncTopCommitButtonState); + observer.observe(elForm, {attributes: true, attributeFilter: ['class']}); + + // Initial sync + syncTopCommitButtonState(); + } + + // Also sync when modal commit button state changes + if (modalCommitButton) { + const observer = new MutationObserver(syncTopCommitButtonState); + observer.observe(modalCommitButton, {attributes: true, attributeFilter: ['disabled']}); + } + + const commitFormFields = document.querySelector('#commit-form-fields'); + + commitButton.addEventListener('click', (e) => { + e.preventDefault(); + if (!commitButton.classList.contains('disabled')) { + // Show the commit form fields (they stay in the form, just become visible) + if (commitFormFields) { + commitFormFields.style.display = 'block'; + // Position it inside the modal using CSS + commitFormFields.classList.add('commit-form-in-modal'); + } + $(commitModal).modal('show'); + } + }); + + // When modal closes, hide the form fields again + $(commitModal).modal({ + onHidden: () => { + if (commitFormFields) { + commitFormFields.style.display = 'none'; + commitFormFields.classList.remove('commit-form-in-modal'); + } + }, + }); + + // Handle close button click + const closeButton = document.querySelector('#commit-modal-close-btn'); + if (closeButton) { + closeButton.addEventListener('click', () => { + $(commitModal).modal('hide'); + }); + } + + // Handle form submission - close modal after submit + if (elForm) { + elForm.addEventListener('submit', () => { + $(commitModal).modal('hide'); + }); + } +} diff --git a/web_src/js/index-domready.ts b/web_src/js/index-domready.ts index df56c85c86..367a6736db 100644 --- a/web_src/js/index-domready.ts +++ b/web_src/js/index-domready.ts @@ -34,6 +34,7 @@ import {initOrgTeam} from './features/org-team.ts'; import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.ts'; import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.ts'; import {initRepoEditor} from './features/repo-editor.ts'; +import {initRepoEditorCommit} from './features/repo-editor-commit.ts'; import {initCompSearchUserBox} from './features/comp/SearchUserBox.ts'; import {initInstall} from './features/install.ts'; import {initCompWebHookEditor} from './features/comp/WebHookEditor.ts'; @@ -123,6 +124,7 @@ const initPerformanceTracer = callInitFunctions([ initRepoEllipsisButton, initRepoDiffCommitBranchesAndTags, initRepoEditor, + initRepoEditorCommit, initRepoGraphGit, initRepoIssueContentHistory, initRepoIssueList, From 72d9f964556bf9f1fdc42c783d6f9d5ceb19e184 Mon Sep 17 00:00:00 2001 From: brymut Date: Sat, 15 Nov 2025 11:54:28 +0300 Subject: [PATCH 7/9] enhance(repo): move delete to modal, add files to directory in file view and apply patch ui improvements. --- routers/web/repo/view_file.go | 6 ++ templates/repo/editor/common_breadcrumb.tmpl | 1 - templates/repo/editor/patch.tmpl | 5 +- templates/repo/view_content.tmpl | 18 +++- templates/repo/view_file.tmpl | 73 +++++++++++++++- web_src/css/index.css | 1 + web_src/css/repo/delete-file.css | 92 ++++++++++++++++++++ web_src/js/features/repo-delete-file.ts | 42 +++++++++ web_src/js/index-domready.ts | 2 + 9 files changed, 230 insertions(+), 10 deletions(-) create mode 100644 web_src/css/repo/delete-file.css create mode 100644 web_src/js/features/repo-delete-file.ts diff --git a/routers/web/repo/view_file.go b/routers/web/repo/view_file.go index ea3920439d..e37d0a576a 100644 --- a/routers/web/repo/view_file.go +++ b/routers/web/repo/view_file.go @@ -306,5 +306,11 @@ func prepareFileViewEditorButtons(ctx *context.Context) bool { ctx.Data["EditFileTooltip"] = util.Iif(isLFSLocked, ctx.Tr("repo.editor.this_file_locked"), ctx.Tr("repo.editor.edit_this_file")) ctx.Data["CanDeleteFile"] = !isLFSLocked ctx.Data["DeleteFileTooltip"] = util.Iif(isLFSLocked, ctx.Tr("repo.editor.this_file_locked"), ctx.Tr("repo.editor.delete_this_file")) + + // Generate unique branch name for delete modal + if ctx.Doer != nil { + ctx.Data["new_branch_name"] = getUniquePatchBranchName(ctx, ctx.Doer.LowerName, ctx.Repo.Repository) + } + return true } diff --git a/templates/repo/editor/common_breadcrumb.tmpl b/templates/repo/editor/common_breadcrumb.tmpl index 8cfbe09d3e..e91648d612 100644 --- a/templates/repo/editor/common_breadcrumb.tmpl +++ b/templates/repo/editor/common_breadcrumb.tmpl @@ -11,6 +11,5 @@ {{$v}} {{end}} {{end}} - {{ctx.Locale.Tr "repo.editor.or"}} {{ctx.Locale.Tr "repo.editor.cancel_lower"}} diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl index 8cbb03ca09..72c23e3050 100644 --- a/templates/repo/editor/patch.tmpl +++ b/templates/repo/editor/patch.tmpl @@ -22,11 +22,8 @@ {{svg "octicon-sidebar-collapse"}}
- {{ctx.Locale.Tr "repo.editor.patching"}} - {{.Repository.FullName}} -
:
+ {{ctx.Locale.Tr "repo.editor.patching"}} {{.BranchName}} - {{ctx.Locale.Tr "repo.editor.or"}} {{ctx.Locale.Tr "repo.editor.cancel_lower"}}
diff --git a/templates/repo/view_content.tmpl b/templates/repo/view_content.tmpl index 1fff13ea7c..04a16543d6 100644 --- a/templates/repo/view_content.tmpl +++ b/templates/repo/view_content.tmpl @@ -66,24 +66,33 @@
- {{if and .RefFullName.IsBranch (not .IsViewFile)}} + {{if .RefFullName.IsBranch}} + {{$addFilePath := .TreePath}} + {{if .IsViewFile}} + {{if gt (len .TreeNames) 1}} + {{$addFilePath = StringUtils.Join (slice .TreeNames 0 (Eval (len .TreeNames) "-" 1)) "/"}} + {{else}} + {{$addFilePath = ""}} + {{end}} + {{end}} + {{if not .IsViewFile}} + {{end}} {{end}} {{if $isTreePathRoot}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 8fce1b6f2c..a02c282dc6 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -74,7 +74,7 @@ {{svg "octicon-pencil"}} {{end}} {{if .CanDeleteFile}} - {{svg "octicon-trash"}} + {{svg "octicon-trash"}} {{else}} {{svg "octicon-trash"}} {{end}} @@ -148,4 +148,75 @@ {{ctx.Locale.Tr "repo.file_copy_permalink"}}
+ + {{/* Delete File Modal */}} + {{if .CanDeleteFile}} + + {{end}} diff --git a/web_src/css/index.css b/web_src/css/index.css index 53ed8c6909..c4d3a22157 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -65,6 +65,7 @@ @import "./repo/file-view.css"; @import "./repo/file-actions.css"; @import "./repo/editor-commit.css"; +@import "./repo/delete-file.css"; @import "./repo/wiki.css"; @import "./repo/header.css"; @import "./repo/home.css"; diff --git a/web_src/css/repo/delete-file.css b/web_src/css/repo/delete-file.css new file mode 100644 index 0000000000..be211434ce --- /dev/null +++ b/web_src/css/repo/delete-file.css @@ -0,0 +1,92 @@ +/* Delete file modal styling */ +#delete-file-modal { + max-width: 680px; +} + +#delete-file-modal .content { + padding: 1.5rem; +} + +#delete-file-modal .commit-form-wrapper { + padding-left: 48px; + position: relative; +} + +#delete-file-modal .commit-form-wrapper .commit-avatar { + float: left; + margin-left: -48px; +} + +#delete-file-modal .commit-form-wrapper .commit-form { + position: relative; + padding: 15px; + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + background-color: var(--color-box-body); +} + +#delete-file-modal .commit-form h3 { + margin-top: 0; + margin-bottom: 1rem; +} + +#delete-file-modal .commit-form .field { + margin-bottom: 1rem; +} + +#delete-file-modal .commit-form input[name="commit_summary"] { + width: 100%; + padding: 10px 12px; + font-size: 14px; +} + +#delete-file-modal .commit-form textarea[name="commit_message"] { + width: 100%; + padding: 10px 12px; + font-size: 14px; +} + +#delete-file-modal .quick-pull-choice .field { + margin-bottom: 0.75rem; +} + +#delete-file-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input { + position: relative; + margin-left: 25px; +} + +#delete-file-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input { + width: 240px !important; + padding-left: 26px !important; +} + +#delete-file-modal .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch { + position: absolute; + top: 9px; + left: 8px; +} + +/* Arrow pointing to avatar */ +#delete-file-modal .avatar-content-left-arrow::before, +#delete-file-modal .avatar-content-left-arrow::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +#delete-file-modal .avatar-content-left-arrow::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +#delete-file-modal .avatar-content-left-arrow::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} diff --git a/web_src/js/features/repo-delete-file.ts b/web_src/js/features/repo-delete-file.ts new file mode 100644 index 0000000000..08435966c6 --- /dev/null +++ b/web_src/js/features/repo-delete-file.ts @@ -0,0 +1,42 @@ +import $ from 'jquery'; + +export function initRepoDeleteFile() { + const deleteButton = document.querySelector('#delete-file-button'); + const deleteModal = document.querySelector('#delete-file-modal'); + const deleteForm = document.querySelector('#delete-file-form'); + + if (!deleteButton || !deleteModal || !deleteForm) { + return; + } + + deleteButton.addEventListener('click', (e) => { + e.preventDefault(); + $(deleteModal).modal('show'); + }); + + // Handle form submission + deleteForm.addEventListener('submit', () => { + $(deleteModal).modal('hide'); + }); + + // Handle commit choice radio buttons + const commitChoiceRadios = deleteForm.querySelectorAll('input[name="commit_choice"]'); + const newBranchNameContainer = deleteForm.querySelector('.quick-pull-branch-name'); + const newBranchNameInput = deleteForm.querySelector('input[name="new_branch_name"]'); + + for (const radio of commitChoiceRadios) { + radio.addEventListener('change', () => { + if (radio.value === 'commit-to-new-branch') { + newBranchNameContainer?.classList.remove('tw-hidden'); + if (newBranchNameInput) { + newBranchNameInput.required = true; + } + } else { + newBranchNameContainer?.classList.add('tw-hidden'); + if (newBranchNameInput) { + newBranchNameInput.required = false; + } + } + }); + } +} diff --git a/web_src/js/index-domready.ts b/web_src/js/index-domready.ts index 367a6736db..f44a844760 100644 --- a/web_src/js/index-domready.ts +++ b/web_src/js/index-domready.ts @@ -35,6 +35,7 @@ import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/use import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.ts'; import {initRepoEditor} from './features/repo-editor.ts'; import {initRepoEditorCommit} from './features/repo-editor-commit.ts'; +import {initRepoDeleteFile} from './features/repo-delete-file.ts'; import {initCompSearchUserBox} from './features/comp/SearchUserBox.ts'; import {initInstall} from './features/install.ts'; import {initCompWebHookEditor} from './features/comp/WebHookEditor.ts'; @@ -125,6 +126,7 @@ const initPerformanceTracer = callInitFunctions([ initRepoDiffCommitBranchesAndTags, initRepoEditor, initRepoEditorCommit, + initRepoDeleteFile, initRepoGraphGit, initRepoIssueContentHistory, initRepoIssueList, From defbb9558718d43d7855fae92809e1542b52e6eb Mon Sep 17 00:00:00 2001 From: brymut Date: Mon, 17 Nov 2025 21:01:26 +0300 Subject: [PATCH 8/9] fix: use fomanticQuery instead of jquery --- web_src/js/features/repo-delete-file.ts | 6 +++--- web_src/js/features/repo-editor-commit.ts | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/web_src/js/features/repo-delete-file.ts b/web_src/js/features/repo-delete-file.ts index 08435966c6..b01211ad39 100644 --- a/web_src/js/features/repo-delete-file.ts +++ b/web_src/js/features/repo-delete-file.ts @@ -1,4 +1,4 @@ -import $ from 'jquery'; +import {fomanticQuery} from '../modules/fomantic/base.ts'; export function initRepoDeleteFile() { const deleteButton = document.querySelector('#delete-file-button'); @@ -11,12 +11,12 @@ export function initRepoDeleteFile() { deleteButton.addEventListener('click', (e) => { e.preventDefault(); - $(deleteModal).modal('show'); + fomanticQuery(deleteModal).modal('show'); }); // Handle form submission deleteForm.addEventListener('submit', () => { - $(deleteModal).modal('hide'); + fomanticQuery(deleteModal).modal('hide'); }); // Handle commit choice radio buttons diff --git a/web_src/js/features/repo-editor-commit.ts b/web_src/js/features/repo-editor-commit.ts index 82b561cc15..64f5018a8a 100644 --- a/web_src/js/features/repo-editor-commit.ts +++ b/web_src/js/features/repo-editor-commit.ts @@ -1,4 +1,4 @@ -import $ from 'jquery'; +import {fomanticQuery} from '../modules/fomantic/base.ts'; export function initRepoEditorCommit() { const commitButton = document.querySelector('#commit-changes-button'); @@ -71,12 +71,12 @@ export function initRepoEditorCommit() { // Position it inside the modal using CSS commitFormFields.classList.add('commit-form-in-modal'); } - $(commitModal).modal('show'); + fomanticQuery(commitModal).modal('show'); } }); // When modal closes, hide the form fields again - $(commitModal).modal({ + fomanticQuery(commitModal).modal({ onHidden: () => { if (commitFormFields) { commitFormFields.style.display = 'none'; @@ -89,14 +89,14 @@ export function initRepoEditorCommit() { const closeButton = document.querySelector('#commit-modal-close-btn'); if (closeButton) { closeButton.addEventListener('click', () => { - $(commitModal).modal('hide'); + fomanticQuery(commitModal).modal('hide'); }); } // Handle form submission - close modal after submit if (elForm) { elForm.addEventListener('submit', () => { - $(commitModal).modal('hide'); + fomanticQuery(commitModal).modal('hide'); }); } } From 442cf3bc92f0f4f0e861433ab57a3d4772353151 Mon Sep 17 00:00:00 2001 From: brymut Date: Tue, 18 Nov 2025 07:34:29 +0300 Subject: [PATCH 9/9] rollback modal changes --- options/locale/locale_en-US.ini | 3 - routers/web/repo/view_file.go | 6 - templates/repo/editor/commit_form.tmpl | 12 +- templates/repo/editor/common_breadcrumb.tmpl | 1 + templates/repo/editor/edit.tmpl | 36 ++---- templates/repo/editor/patch.tmpl | 39 ++---- templates/repo/editor/upload.tmpl | 36 ++---- templates/repo/view_file.tmpl | 73 +---------- web_src/css/index.css | 2 - web_src/css/repo/delete-file.css | 92 ------------- web_src/css/repo/editor-commit.css | 129 ------------------- web_src/css/repo/home.css | 2 - web_src/js/components/ViewFileTree.vue | 3 - web_src/js/features/repo-delete-file.ts | 42 ------ web_src/js/features/repo-editor-commit.ts | 102 --------------- web_src/js/index-domready.ts | 4 - 16 files changed, 32 insertions(+), 550 deletions(-) delete mode 100644 web_src/css/repo/delete-file.css delete mode 100644 web_src/css/repo/editor-commit.css delete mode 100644 web_src/js/features/repo-delete-file.ts delete mode 100644 web_src/js/features/repo-editor-commit.ts diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 40c68ecec4..197dc50dc9 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -111,8 +111,6 @@ copy_error = Copy failed copy_type_unsupported = This file type cannot be copied copy_filename = Copy filename -repo.more_operations = More Operations - write = Write preview = Preview loading = Loading… @@ -1319,7 +1317,6 @@ ambiguous_character = `%[1]c [U+%04[1]X] can be confused with %[2]c [U+%04[2]X]` escape_control_characters = Escape unescape_control_characters = Unescape file_copy_permalink = Copy Permalink -center_content = Center content view_git_blame = View Git Blame video_not_supported_in_browser = Your browser does not support the HTML5 'video' tag. audio_not_supported_in_browser = Your browser does not support the HTML5 'audio' tag. diff --git a/routers/web/repo/view_file.go b/routers/web/repo/view_file.go index e37d0a576a..ea3920439d 100644 --- a/routers/web/repo/view_file.go +++ b/routers/web/repo/view_file.go @@ -306,11 +306,5 @@ func prepareFileViewEditorButtons(ctx *context.Context) bool { ctx.Data["EditFileTooltip"] = util.Iif(isLFSLocked, ctx.Tr("repo.editor.this_file_locked"), ctx.Tr("repo.editor.edit_this_file")) ctx.Data["CanDeleteFile"] = !isLFSLocked ctx.Data["DeleteFileTooltip"] = util.Iif(isLFSLocked, ctx.Tr("repo.editor.this_file_locked"), ctx.Tr("repo.editor.delete_this_file")) - - // Generate unique branch name for delete modal - if ctx.Doer != nil { - ctx.Data["new_branch_name"] = getUniquePatchBranchName(ctx, ctx.Doer.LowerName, ctx.Repo.Repository) - } - return true } diff --git a/templates/repo/editor/commit_form.tmpl b/templates/repo/editor/commit_form.tmpl index f39009f218..10872f8af7 100644 --- a/templates/repo/editor/commit_form.tmpl +++ b/templates/repo/editor/commit_form.tmpl @@ -1,7 +1,4 @@
- {{ctx.AvatarUtils.Avatar .SignedUser 40 "commit-avatar"}}

@@ -83,9 +80,8 @@ {{end}}

-
- -
+ + {{ctx.Locale.Tr "repo.editor.cancel"}}
diff --git a/templates/repo/editor/common_breadcrumb.tmpl b/templates/repo/editor/common_breadcrumb.tmpl index e91648d612..8cfbe09d3e 100644 --- a/templates/repo/editor/common_breadcrumb.tmpl +++ b/templates/repo/editor/common_breadcrumb.tmpl @@ -11,5 +11,6 @@ {{$v}} {{end}} {{end}} + {{ctx.Locale.Tr "repo.editor.or"}} {{ctx.Locale.Tr "repo.editor.cancel_lower"}} diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 21306c85aa..566aca09b0 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -14,21 +14,13 @@ > {{.CsrfTokenHtml}} {{template "repo/editor/common_top" .}} -
-
- - {{template "repo/editor/common_breadcrumb" .}} -
-
- {{ctx.Locale.Tr "repo.editor.cancel"}} - -
+
+ + {{template "repo/editor/common_breadcrumb" .}}
{{if not .NotEditableReason}}
@@ -64,22 +56,10 @@
{{end}} - {{/* Commit form fields - inside form but hidden, will be shown in modal */}} - - {{/* Hidden dummy button for repo-editor.ts compatibility */}} - + {{template "repo/editor/commit_form" .}} - - {{/* Commit Changes Modal - fields will be moved here visually */}} - {{template "base/footer" .}} diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl index 72c23e3050..cd478332a7 100644 --- a/templates/repo/editor/patch.tmpl +++ b/templates/repo/editor/patch.tmpl @@ -14,25 +14,18 @@ > {{.CsrfTokenHtml}} {{template "repo/editor/common_top" .}} -
-
- -
- {{ctx.Locale.Tr "repo.editor.patching"}} +
+ +
+ {{ctx.Locale.Tr "repo.editor.patching"}} {{.BranchName}} + {{ctx.Locale.Tr "repo.editor.or"}} {{ctx.Locale.Tr "repo.editor.cancel_lower"}} -
-
-
- {{ctx.Locale.Tr "repo.editor.cancel"}} -
@@ -47,22 +40,10 @@
- {{/* Commit form fields - inside form but hidden, will be shown in modal */}} - - {{/* Hidden dummy button for repo-editor.ts compatibility */}} - + {{template "repo/editor/commit_form" .}}
- - {{/* Commit Changes Modal - fields will be moved here visually */}} - {{template "base/footer" .}} diff --git a/templates/repo/editor/upload.tmpl b/templates/repo/editor/upload.tmpl index b983f4a651..20f96eb0cb 100644 --- a/templates/repo/editor/upload.tmpl +++ b/templates/repo/editor/upload.tmpl @@ -11,41 +11,21 @@
{{.CsrfTokenHtml}} {{template "repo/editor/common_top" .}} -
-
- - {{template "repo/editor/common_breadcrumb" .}} -
-
- {{ctx.Locale.Tr "repo.editor.cancel"}} - -
+
+ + {{template "repo/editor/common_breadcrumb" .}}
{{template "repo/upload" .}}
- {{/* Commit form fields - inside form but hidden, will be shown in modal */}} - - {{/* Hidden dummy button for repo-editor.ts compatibility */}} - + {{template "repo/editor/commit_form" .}}
- - {{/* Commit Changes Modal - fields will be moved here visually */}} - {{template "base/footer" .}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index a02c282dc6..8fce1b6f2c 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -74,7 +74,7 @@ {{svg "octicon-pencil"}} {{end}} {{if .CanDeleteFile}} - {{svg "octicon-trash"}} + {{svg "octicon-trash"}} {{else}} {{svg "octicon-trash"}} {{end}} @@ -148,75 +148,4 @@ {{ctx.Locale.Tr "repo.file_copy_permalink"}} - - {{/* Delete File Modal */}} - {{if .CanDeleteFile}} - - {{end}} diff --git a/web_src/css/index.css b/web_src/css/index.css index c4d3a22157..796497c630 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -64,8 +64,6 @@ @import "./repo/list-header.css"; @import "./repo/file-view.css"; @import "./repo/file-actions.css"; -@import "./repo/editor-commit.css"; -@import "./repo/delete-file.css"; @import "./repo/wiki.css"; @import "./repo/header.css"; @import "./repo/home.css"; diff --git a/web_src/css/repo/delete-file.css b/web_src/css/repo/delete-file.css deleted file mode 100644 index be211434ce..0000000000 --- a/web_src/css/repo/delete-file.css +++ /dev/null @@ -1,92 +0,0 @@ -/* Delete file modal styling */ -#delete-file-modal { - max-width: 680px; -} - -#delete-file-modal .content { - padding: 1.5rem; -} - -#delete-file-modal .commit-form-wrapper { - padding-left: 48px; - position: relative; -} - -#delete-file-modal .commit-form-wrapper .commit-avatar { - float: left; - margin-left: -48px; -} - -#delete-file-modal .commit-form-wrapper .commit-form { - position: relative; - padding: 15px; - border: 1px solid var(--color-secondary); - border-radius: var(--border-radius); - background-color: var(--color-box-body); -} - -#delete-file-modal .commit-form h3 { - margin-top: 0; - margin-bottom: 1rem; -} - -#delete-file-modal .commit-form .field { - margin-bottom: 1rem; -} - -#delete-file-modal .commit-form input[name="commit_summary"] { - width: 100%; - padding: 10px 12px; - font-size: 14px; -} - -#delete-file-modal .commit-form textarea[name="commit_message"] { - width: 100%; - padding: 10px 12px; - font-size: 14px; -} - -#delete-file-modal .quick-pull-choice .field { - margin-bottom: 0.75rem; -} - -#delete-file-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input { - position: relative; - margin-left: 25px; -} - -#delete-file-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input { - width: 240px !important; - padding-left: 26px !important; -} - -#delete-file-modal .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch { - position: absolute; - top: 9px; - left: 8px; -} - -/* Arrow pointing to avatar */ -#delete-file-modal .avatar-content-left-arrow::before, -#delete-file-modal .avatar-content-left-arrow::after { - right: 100%; - top: 20px; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -#delete-file-modal .avatar-content-left-arrow::before { - border-right-color: var(--color-secondary); - border-width: 9px; - margin-top: -9px; -} - -#delete-file-modal .avatar-content-left-arrow::after { - border-right-color: var(--color-box-body); - border-width: 8px; - margin-top: -8px; -} diff --git a/web_src/css/repo/editor-commit.css b/web_src/css/repo/editor-commit.css deleted file mode 100644 index 281e7719d1..0000000000 --- a/web_src/css/repo/editor-commit.css +++ /dev/null @@ -1,129 +0,0 @@ -/* Editor commit modal styling */ -#commit-changes-modal .content { - padding: 1.5rem; -} - -.commit-form-in-modal { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 10001; - max-width: 680px; - width: 90%; - max-height: 85vh; - overflow-y: auto; - background: var(--color-box-body); - border-radius: 6px; - padding: 1.5rem; - padding-top: 3rem; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); -} - -/* Close button inside the commit form */ -.commit-modal-close { - position: absolute; - top: 0.5rem; - right: 0.5rem; - cursor: pointer; - background: transparent; - border: none; - padding: 0.5rem; - display: flex; - align-items: center; - justify-content: center; - color: var(--color-text); - opacity: 0.6; - z-index: 10; - border-radius: 4px; - transition: all 0.2s; -} - -.commit-modal-close:hover { - opacity: 1; - background: var(--color-hover); -} - -#commit-changes-modal .commit-form-wrapper { - padding-left: 48px; - position: relative; -} - -#commit-changes-modal .commit-form-wrapper .commit-avatar { - float: left; - margin-left: -48px; -} - -#commit-changes-modal .commit-form-wrapper .commit-form { - position: relative; - padding: 15px; - border: 1px solid var(--color-secondary); - border-radius: var(--border-radius); - background-color: var(--color-box-body); -} - -#commit-changes-modal .commit-form h3 { - margin-top: 0; - margin-bottom: 1rem; -} - -#commit-changes-modal .commit-form .field { - margin-bottom: 1rem; -} - -#commit-changes-modal .commit-form input[name="commit_summary"] { - width: 100%; - padding: 10px 12px; - font-size: 14px; -} - -#commit-changes-modal .commit-form textarea[name="commit_message"] { - width: 100%; - padding: 10px 12px; - font-size: 14px; -} - -#commit-changes-modal .quick-pull-choice .field { - margin-bottom: 0.75rem; -} - -#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input { - position: relative; - margin-left: 25px; -} - -#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input { - width: 240px !important; - padding-left: 26px !important; -} - -#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch { - position: absolute; - top: 9px; - left: 8px; -} - -/* Arrow pointing to avatar */ -#commit-changes-modal .avatar-content-left-arrow::before, -#commit-changes-modal .avatar-content-left-arrow::after { - right: 100%; - top: 20px; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -#commit-changes-modal .avatar-content-left-arrow::before { - border-right-color: var(--color-secondary); - border-width: 9px; - margin-top: -9px; -} - -#commit-changes-modal .avatar-content-left-arrow::after { - border-right-color: var(--color-box-body); - border-width: 8px; - margin-top: -8px; -} diff --git a/web_src/css/repo/home.css b/web_src/css/repo/home.css index f0c366c765..ee371f1b1c 100644 --- a/web_src/css/repo/home.css +++ b/web_src/css/repo/home.css @@ -63,8 +63,6 @@ bottom: 0; height: 100%; overflow-y: hidden; - overflow-x: visible; - z-index: 10; } .repo-view-content { diff --git a/web_src/js/components/ViewFileTree.vue b/web_src/js/components/ViewFileTree.vue index d90212fb67..3f5c9e9165 100644 --- a/web_src/js/components/ViewFileTree.vue +++ b/web_src/js/components/ViewFileTree.vue @@ -84,7 +84,6 @@ const handleClickOutside = (e: MouseEvent) => { const target = e.target as HTMLElement; const resultsEl = searchResults.value; - // Check if click is outside search input and results if (searchInputElement && !searchInputElement.contains(target) && resultsEl && !resultsEl.contains(target)) { clearSearch(); @@ -102,14 +101,12 @@ onMounted(async () => { allFiles.value = await response.json(); } - // Setup search input listener searchInputElement = document.querySelector('#file-tree-search'); if (searchInputElement) { searchInputElement.addEventListener('input', handleSearchInput); searchInputElement.addEventListener('keydown', handleKeyDown); } - // Add click outside listener document.addEventListener('click', handleClickOutside); window.addEventListener('popstate', (e) => { diff --git a/web_src/js/features/repo-delete-file.ts b/web_src/js/features/repo-delete-file.ts deleted file mode 100644 index b01211ad39..0000000000 --- a/web_src/js/features/repo-delete-file.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {fomanticQuery} from '../modules/fomantic/base.ts'; - -export function initRepoDeleteFile() { - const deleteButton = document.querySelector('#delete-file-button'); - const deleteModal = document.querySelector('#delete-file-modal'); - const deleteForm = document.querySelector('#delete-file-form'); - - if (!deleteButton || !deleteModal || !deleteForm) { - return; - } - - deleteButton.addEventListener('click', (e) => { - e.preventDefault(); - fomanticQuery(deleteModal).modal('show'); - }); - - // Handle form submission - deleteForm.addEventListener('submit', () => { - fomanticQuery(deleteModal).modal('hide'); - }); - - // Handle commit choice radio buttons - const commitChoiceRadios = deleteForm.querySelectorAll('input[name="commit_choice"]'); - const newBranchNameContainer = deleteForm.querySelector('.quick-pull-branch-name'); - const newBranchNameInput = deleteForm.querySelector('input[name="new_branch_name"]'); - - for (const radio of commitChoiceRadios) { - radio.addEventListener('change', () => { - if (radio.value === 'commit-to-new-branch') { - newBranchNameContainer?.classList.remove('tw-hidden'); - if (newBranchNameInput) { - newBranchNameInput.required = true; - } - } else { - newBranchNameContainer?.classList.add('tw-hidden'); - if (newBranchNameInput) { - newBranchNameInput.required = false; - } - } - }); - } -} diff --git a/web_src/js/features/repo-editor-commit.ts b/web_src/js/features/repo-editor-commit.ts deleted file mode 100644 index 64f5018a8a..0000000000 --- a/web_src/js/features/repo-editor-commit.ts +++ /dev/null @@ -1,102 +0,0 @@ -import {fomanticQuery} from '../modules/fomantic/base.ts'; - -export function initRepoEditorCommit() { - const commitButton = document.querySelector('#commit-changes-button'); - const commitModal = document.querySelector('#commit-changes-modal'); - const modalCommitButton = document.querySelector('#commit-button'); - - if (!commitButton || !commitModal) return; - - const elForm = document.querySelector('.repository.editor .edit.form'); - const dirtyFileClass = 'dirty-file'; - - // Sync the top commit button state with the modal commit button state - const syncTopCommitButtonState = () => { - // Check if form has changes (using the same dirty class from repo-editor.ts) - const hasChanges = elForm?.classList.contains(dirtyFileClass); - - // Also check the modal commit button state as fallback - const modalButtonDisabled = modalCommitButton?.disabled; - - if (hasChanges || !modalButtonDisabled) { - commitButton.classList.remove('disabled'); - } else { - commitButton.classList.add('disabled'); - } - }; - - // For upload page - enable button when files are added - const dropzone = document.querySelector('.dropzone'); - if (dropzone) { - const observer = new MutationObserver(() => { - const filesContainer = dropzone.querySelector('.files'); - const hasFiles = filesContainer && filesContainer.children.length > 0; - - if (hasFiles) { - commitButton.classList.remove('disabled'); - } else { - commitButton.classList.add('disabled'); - } - }); - - const filesContainer = dropzone.querySelector('.files'); - if (filesContainer) { - observer.observe(filesContainer, {childList: true}); - } - } - - // Watch for changes in the form's dirty state - if (elForm) { - const observer = new MutationObserver(syncTopCommitButtonState); - observer.observe(elForm, {attributes: true, attributeFilter: ['class']}); - - // Initial sync - syncTopCommitButtonState(); - } - - // Also sync when modal commit button state changes - if (modalCommitButton) { - const observer = new MutationObserver(syncTopCommitButtonState); - observer.observe(modalCommitButton, {attributes: true, attributeFilter: ['disabled']}); - } - - const commitFormFields = document.querySelector('#commit-form-fields'); - - commitButton.addEventListener('click', (e) => { - e.preventDefault(); - if (!commitButton.classList.contains('disabled')) { - // Show the commit form fields (they stay in the form, just become visible) - if (commitFormFields) { - commitFormFields.style.display = 'block'; - // Position it inside the modal using CSS - commitFormFields.classList.add('commit-form-in-modal'); - } - fomanticQuery(commitModal).modal('show'); - } - }); - - // When modal closes, hide the form fields again - fomanticQuery(commitModal).modal({ - onHidden: () => { - if (commitFormFields) { - commitFormFields.style.display = 'none'; - commitFormFields.classList.remove('commit-form-in-modal'); - } - }, - }); - - // Handle close button click - const closeButton = document.querySelector('#commit-modal-close-btn'); - if (closeButton) { - closeButton.addEventListener('click', () => { - fomanticQuery(commitModal).modal('hide'); - }); - } - - // Handle form submission - close modal after submit - if (elForm) { - elForm.addEventListener('submit', () => { - fomanticQuery(commitModal).modal('hide'); - }); - } -} diff --git a/web_src/js/index-domready.ts b/web_src/js/index-domready.ts index f44a844760..df56c85c86 100644 --- a/web_src/js/index-domready.ts +++ b/web_src/js/index-domready.ts @@ -34,8 +34,6 @@ import {initOrgTeam} from './features/org-team.ts'; import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.ts'; import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.ts'; import {initRepoEditor} from './features/repo-editor.ts'; -import {initRepoEditorCommit} from './features/repo-editor-commit.ts'; -import {initRepoDeleteFile} from './features/repo-delete-file.ts'; import {initCompSearchUserBox} from './features/comp/SearchUserBox.ts'; import {initInstall} from './features/install.ts'; import {initCompWebHookEditor} from './features/comp/WebHookEditor.ts'; @@ -125,8 +123,6 @@ const initPerformanceTracer = callInitFunctions([ initRepoEllipsisButton, initRepoDiffCommitBranchesAndTags, initRepoEditor, - initRepoEditorCommit, - initRepoDeleteFile, initRepoGraphGit, initRepoIssueContentHistory, initRepoIssueList,