Skip to content

Commit 4540d07

Browse files
brymutbrymut
committed
enhance(repo): move commit_form to modal and commit action buttons above editor.
1 parent 5df4956 commit 4540d07

File tree

8 files changed

+308
-28
lines changed

8 files changed

+308
-28
lines changed

‎templates/repo/editor/commit_form.tmpl‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,9 @@
8080
{{end}}
8181
</div>
8282
<input type="hidden" name="last_commit" value="{{.last_commit}}">
83-
<button id="commit-button" type="submit" class="ui primary button">
84-
{{if eq .commit_choice "commit-to-new-branch"}}{{ctx.Locale.Tr "repo.editor.propose_file_change"}}{{else}}{{ctx.Locale.Tr "repo.editor.commit_changes"}}{{end}}
85-
</button>
86-
<a class="ui button red" href="{{if .ReturnURI}}{{.ReturnURI}}{{else}}{{$.BranchLink}}/{{PathEscapeSegments .TreePath}}{{end}}">{{ctx.Locale.Tr "repo.editor.cancel"}}</a>
83+
<div class="tw-text-right tw-mt-4">
84+
<button id="commit-button" type="submit" class="ui primary button">
85+
{{if eq .commit_choice "commit-to-new-branch"}}{{ctx.Locale.Tr "repo.editor.propose_file_change"}}{{else}}{{ctx.Locale.Tr "repo.editor.commit_changes"}}{{end}}
86+
</button>
87+
</div>
8788
</div>

‎templates/repo/editor/edit.tmpl‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,21 @@
1414
>
1515
{{.CsrfTokenHtml}}
1616
{{template "repo/editor/common_top" .}}
17-
<div class="repo-editor-header tw-flex tw-items-center tw-gap-2">
18-
<button type="button" class="repo-view-file-tree-toggle-show ui compact basic button icon not-mobile {{if .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}"
19-
data-global-click="onRepoViewFileTreeToggle" data-toggle-action="show"
20-
data-tooltip-content="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
21-
{{svg "octicon-sidebar-collapse"}}
22-
</button>
23-
{{template "repo/editor/common_breadcrumb" .}}
17+
<div class="repo-editor-header tw-flex tw-items-center tw-justify-between tw-gap-2">
18+
<div class="tw-flex tw-items-center tw-gap-2">
19+
<button type="button" class="repo-view-file-tree-toggle-show ui compact basic button icon not-mobile {{if .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}"
20+
data-global-click="onRepoViewFileTreeToggle" data-toggle-action="show"
21+
data-tooltip-content="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
22+
{{svg "octicon-sidebar-collapse"}}
23+
</button>
24+
{{template "repo/editor/common_breadcrumb" .}}
25+
</div>
26+
<div class="tw-flex tw-gap-2">
27+
<a class="ui red button" href="{{if .ReturnURI}}{{.ReturnURI}}{{else}}{{$.BranchLink}}/{{PathEscapeSegments .TreePath}}{{end}}">{{ctx.Locale.Tr "repo.editor.cancel"}}</a>
28+
<button type="button" class="ui primary button disabled" id="commit-changes-button">
29+
{{ctx.Locale.Tr "repo.editor.commit_changes"}}
30+
</button>
31+
</div>
2432
</div>
2533
{{if not .NotEditableReason}}
2634
<div class="field">
@@ -56,10 +64,22 @@
5664
</div>
5765
</div>
5866
{{end}}
59-
{{template "repo/editor/commit_form" .}}
67+
{{/* Commit form fields - inside form but hidden, will be shown in modal */}}
68+
<div id="commit-form-fields" style="display: none;">
69+
{{template "repo/editor/commit_form" .}}
70+
</div>
71+
{{/* Hidden dummy button for repo-editor.ts compatibility */}}
72+
<button id="commit-button" type="button" style="display: none;"></button>
6073
</form>
6174
</div>
6275
</div>
6376
</div>
77+
78+
{{/* Commit Changes Modal - fields will be moved here visually */}}
79+
<div class="ui modal" id="commit-changes-modal">
80+
<i class="close icon"></i>
81+
<div class="content" id="commit-modal-content">
82+
</div>
83+
</div>
6484
</div>
6585
{{template "base/footer" .}}

‎templates/repo/editor/patch.tmpl‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,28 @@
1414
>
1515
{{.CsrfTokenHtml}}
1616
{{template "repo/editor/common_top" .}}
17-
<div class="repo-editor-header tw-flex tw-items-center tw-gap-2">
18-
<button type="button" class="repo-view-file-tree-toggle-show ui compact basic button icon not-mobile {{if .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}"
19-
data-global-click="onRepoViewFileTreeToggle" data-toggle-action="show"
20-
data-tooltip-content="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
21-
{{svg "octicon-sidebar-collapse"}}
22-
</button>
23-
<div class="breadcrumb">
17+
<div class="repo-editor-header tw-flex tw-items-center tw-justify-between tw-gap-2">
18+
<div class="tw-flex tw-items-center tw-gap-2">
19+
<button type="button" class="repo-view-file-tree-toggle-show ui compact basic button icon not-mobile {{if .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}"
20+
data-global-click="onRepoViewFileTreeToggle" data-toggle-action="show"
21+
data-tooltip-content="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
22+
{{svg "octicon-sidebar-collapse"}}
23+
</button>
24+
<div class="breadcrumb">
2425
{{ctx.Locale.Tr "repo.editor.patching"}}
2526
<a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a>
2627
<div class="breadcrumb-divider">:</div>
2728
<a class="section" href="{{$.BranchLink}}">{{.BranchName}}</a>
2829
<span>{{ctx.Locale.Tr "repo.editor.or"}} <a href="{{$.BranchLink}}">{{ctx.Locale.Tr "repo.editor.cancel_lower"}}</a></span>
2930
<input type="hidden" name="tree_path" value="__dummy_for_EditRepoFileForm.TreePath(Required)__">
3031
<input id="file-name" type="hidden" value="diff.patch">
32+
</div>
33+
</div>
34+
<div class="tw-flex tw-gap-2">
35+
<a class="ui red button" href="{{$.BranchLink}}">{{ctx.Locale.Tr "repo.editor.cancel"}}</a>
36+
<button type="button" class="ui primary button disabled" id="commit-changes-button">
37+
{{ctx.Locale.Tr "repo.editor.commit_changes"}}
38+
</button>
3139
</div>
3240
</div>
3341
<div class="field">
@@ -42,10 +50,22 @@
4250
<div class="editor-loading is-loading"></div>
4351
</div>
4452
</div>
45-
{{template "repo/editor/commit_form" .}}
53+
{{/* Commit form fields - inside form but hidden, will be shown in modal */}}
54+
<div id="commit-form-fields" style="display: none;">
55+
{{template "repo/editor/commit_form" .}}
56+
</div>
57+
{{/* Hidden dummy button for repo-editor.ts compatibility */}}
58+
<button id="commit-button" type="button" style="display: none;"></button>
4659
</form>
4760
</div>
4861
</div>
4962
</div>
63+
64+
{{/* Commit Changes Modal - fields will be moved here visually */}}
65+
<div class="ui modal" id="commit-changes-modal">
66+
<i class="close icon"></i>
67+
<div class="content" id="commit-modal-content">
68+
</div>
69+
</div>
5070
</div>
5171
{{template "base/footer" .}}

‎templates/repo/editor/upload.tmpl‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,41 @@
1111
<form class="ui comment form form-fetch-action" method="post" action="{{.CommitFormOptions.TargetFormAction}}">
1212
{{.CsrfTokenHtml}}
1313
{{template "repo/editor/common_top" .}}
14-
<div class="repo-editor-header tw-flex tw-items-center tw-gap-2">
15-
<button type="button" class="repo-view-file-tree-toggle-show ui compact basic button icon not-mobile {{if .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}"
16-
data-global-click="onRepoViewFileTreeToggle" data-toggle-action="show"
17-
data-tooltip-content="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
18-
{{svg "octicon-sidebar-collapse"}}
19-
</button>
20-
{{template "repo/editor/common_breadcrumb" .}}
14+
<div class="repo-editor-header tw-flex tw-items-center tw-justify-between tw-gap-2">
15+
<div class="tw-flex tw-items-center tw-gap-2">
16+
<button type="button" class="repo-view-file-tree-toggle-show ui compact basic button icon not-mobile {{if .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}"
17+
data-global-click="onRepoViewFileTreeToggle" data-toggle-action="show"
18+
data-tooltip-content="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
19+
{{svg "octicon-sidebar-collapse"}}
20+
</button>
21+
{{template "repo/editor/common_breadcrumb" .}}
22+
</div>
23+
<div class="tw-flex tw-gap-2">
24+
<a class="ui red button" href="{{if .ReturnURI}}{{.ReturnURI}}{{else}}{{$.BranchLink}}/{{PathEscapeSegments .TreePath}}{{end}}">{{ctx.Locale.Tr "repo.editor.cancel"}}</a>
25+
<button type="button" class="ui primary button disabled" id="commit-changes-button">
26+
{{ctx.Locale.Tr "repo.editor.commit_changes"}}
27+
</button>
28+
</div>
2129
</div>
2230
<div class="field">
2331
{{template "repo/upload" .}}
2432
</div>
25-
{{template "repo/editor/commit_form" .}}
33+
{{/* Commit form fields - inside form but hidden, will be shown in modal */}}
34+
<div id="commit-form-fields" style="display: none;">
35+
{{template "repo/editor/commit_form" .}}
36+
</div>
37+
{{/* Hidden dummy button for repo-editor.ts compatibility */}}
38+
<button id="commit-button" type="button" style="display: none;"></button>
2639
</form>
2740
</div>
2841
</div>
2942
</div>
43+
44+
{{/* Commit Changes Modal - fields will be moved here visually */}}
45+
<div class="ui modal" id="commit-changes-modal">
46+
<i class="close icon"></i>
47+
<div class="content" id="commit-modal-content">
48+
</div>
49+
</div>
3050
</div>
3151
{{template "base/footer" .}}

‎web_src/css/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
@import "./repo/list-header.css";
6565
@import "./repo/file-view.css";
6666
@import "./repo/file-actions.css";
67+
@import "./repo/editor-commit.css";
6768
@import "./repo/wiki.css";
6869
@import "./repo/header.css";
6970
@import "./repo/home.css";

‎web_src/css/repo/editor-commit.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/* Editor commit modal styling */
2+
#commit-changes-modal .content {
3+
padding: 1.5rem;
4+
}
5+
6+
/* Position commit form fields inside modal when visible */
7+
.commit-form-in-modal {
8+
position: fixed;
9+
top: 50%;
10+
left: 50%;
11+
transform: translate(-50%, -50%);
12+
z-index: 10001;
13+
max-width: 680px;
14+
width: 90%;
15+
max-height: 85vh;
16+
overflow-y: auto;
17+
background: var(--color-box-body);
18+
border-radius: 6px;
19+
padding: 1.5rem;
20+
padding-top: 3rem;
21+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
22+
}
23+
24+
/* Ensure close icon is visible and positioned correctly */
25+
#commit-changes-modal > .close.icon {
26+
position: fixed;
27+
top: 1rem;
28+
right: 1rem;
29+
z-index: 10002;
30+
cursor: pointer;
31+
opacity: 0.6;
32+
font-size: 1.5rem;
33+
color: var(--color-text);
34+
}
35+
36+
#commit-changes-modal > .close.icon:hover {
37+
opacity: 1;
38+
}
39+
40+
/* Replicate the original commit form styling in the modal */
41+
#commit-changes-modal .commit-form-wrapper {
42+
padding-left: 48px;
43+
}
44+
45+
#commit-changes-modal .commit-form-wrapper .commit-avatar {
46+
float: left;
47+
margin-left: -48px;
48+
}
49+
50+
#commit-changes-modal .commit-form-wrapper .commit-form {
51+
position: relative;
52+
padding: 15px;
53+
border: 1px solid var(--color-secondary);
54+
border-radius: var(--border-radius);
55+
background-color: var(--color-box-body);
56+
}
57+
58+
#commit-changes-modal .commit-form h3 {
59+
margin-top: 0;
60+
margin-bottom: 1rem;
61+
}
62+
63+
#commit-changes-modal .commit-form .field {
64+
margin-bottom: 1rem;
65+
}
66+
67+
#commit-changes-modal .commit-form input[name="commit_summary"] {
68+
width: 100%;
69+
padding: 10px 12px;
70+
font-size: 14px;
71+
}
72+
73+
#commit-changes-modal .commit-form textarea[name="commit_message"] {
74+
width: 100%;
75+
padding: 10px 12px;
76+
font-size: 14px;
77+
}
78+
79+
#commit-changes-modal .quick-pull-choice .field {
80+
margin-bottom: 0.75rem;
81+
}
82+
83+
#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input {
84+
position: relative;
85+
margin-left: 25px;
86+
}
87+
88+
#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input {
89+
width: 240px !important;
90+
padding-left: 26px !important;
91+
}
92+
93+
#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch {
94+
position: absolute;
95+
top: 9px;
96+
left: 8px;
97+
}
98+
99+
/* Arrow pointing to avatar */
100+
#commit-changes-modal .avatar-content-left-arrow::before,
101+
#commit-changes-modal .avatar-content-left-arrow::after {
102+
right: 100%;
103+
top: 20px;
104+
border: solid transparent;
105+
content: " ";
106+
height: 0;
107+
width: 0;
108+
position: absolute;
109+
pointer-events: none;
110+
}
111+
112+
#commit-changes-modal .avatar-content-left-arrow::before {
113+
border-right-color: var(--color-secondary);
114+
border-width: 9px;
115+
margin-top: -9px;
116+
}
117+
118+
#commit-changes-modal .avatar-content-left-arrow::after {
119+
border-right-color: var(--color-box-body);
120+
border-width: 8px;
121+
margin-top: -8px;
122+
}

0 commit comments

Comments
 (0)