Skip to content

Commit 57782c3

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

File tree

8 files changed

+326
-28
lines changed

8 files changed

+326
-28
lines changed

‎templates/repo/editor/commit_form.tmpl‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<div class="commit-form-wrapper">
2+
<button type="button" class="commit-modal-close" id="commit-modal-close-btn" aria-label="Close">
3+
{{svg "octicon-x" 20}}
4+
</button>
25
{{ctx.AvatarUtils.Avatar .SignedUser 40 "commit-avatar"}}
36
<div class="commit-form avatar-content-left-arrow">
47
<h3>
@@ -80,8 +83,9 @@
8083
{{end}}
8184
</div>
8285
<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>
86+
<div class="tw-text-right tw-mt-4">
87+
<button id="commit-button" type="submit" class="ui primary button">
88+
{{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}}
89+
</button>
90+
</div>
8791
</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: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/* Editor commit modal styling */
2+
#commit-changes-modal .content {
3+
padding: 1.5rem;
4+
}
5+
6+
.commit-form-in-modal {
7+
position: fixed;
8+
top: 50%;
9+
left: 50%;
10+
transform: translate(-50%, -50%);
11+
z-index: 10001;
12+
max-width: 680px;
13+
width: 90%;
14+
max-height: 85vh;
15+
overflow-y: auto;
16+
background: var(--color-box-body);
17+
border-radius: 6px;
18+
padding: 1.5rem;
19+
padding-top: 3rem;
20+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
21+
}
22+
23+
/* Close button inside the commit form */
24+
.commit-modal-close {
25+
position: absolute;
26+
top: 0.5rem;
27+
right: 0.5rem;
28+
cursor: pointer;
29+
background: transparent;
30+
border: none;
31+
padding: 0.5rem;
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
color: var(--color-text);
36+
opacity: 0.6;
37+
z-index: 10;
38+
border-radius: 4px;
39+
transition: all 0.2s;
40+
}
41+
42+
.commit-modal-close:hover {
43+
opacity: 1;
44+
background: var(--color-hover);
45+
}
46+
47+
#commit-changes-modal .commit-form-wrapper {
48+
padding-left: 48px;
49+
position: relative;
50+
}
51+
52+
#commit-changes-modal .commit-form-wrapper .commit-avatar {
53+
float: left;
54+
margin-left: -48px;
55+
}
56+
57+
#commit-changes-modal .commit-form-wrapper .commit-form {
58+
position: relative;
59+
padding: 15px;
60+
border: 1px solid var(--color-secondary);
61+
border-radius: var(--border-radius);
62+
background-color: var(--color-box-body);
63+
}
64+
65+
#commit-changes-modal .commit-form h3 {
66+
margin-top: 0;
67+
margin-bottom: 1rem;
68+
}
69+
70+
#commit-changes-modal .commit-form .field {
71+
margin-bottom: 1rem;
72+
}
73+
74+
#commit-changes-modal .commit-form input[name="commit_summary"] {
75+
width: 100%;
76+
padding: 10px 12px;
77+
font-size: 14px;
78+
}
79+
80+
#commit-changes-modal .commit-form textarea[name="commit_message"] {
81+
width: 100%;
82+
padding: 10px 12px;
83+
font-size: 14px;
84+
}
85+
86+
#commit-changes-modal .quick-pull-choice .field {
87+
margin-bottom: 0.75rem;
88+
}
89+
90+
#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input {
91+
position: relative;
92+
margin-left: 25px;
93+
}
94+
95+
#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input {
96+
width: 240px !important;
97+
padding-left: 26px !important;
98+
}
99+
100+
#commit-changes-modal .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch {
101+
position: absolute;
102+
top: 9px;
103+
left: 8px;
104+
}
105+
106+
/* Arrow pointing to avatar */
107+
#commit-changes-modal .avatar-content-left-arrow::before,
108+
#commit-changes-modal .avatar-content-left-arrow::after {
109+
right: 100%;
110+
top: 20px;
111+
border: solid transparent;
112+
content: " ";
113+
height: 0;
114+
width: 0;
115+
position: absolute;
116+
pointer-events: none;
117+
}
118+
119+
#commit-changes-modal .avatar-content-left-arrow::before {
120+
border-right-color: var(--color-secondary);
121+
border-width: 9px;
122+
margin-top: -9px;
123+
}
124+
125+
#commit-changes-modal .avatar-content-left-arrow::after {
126+
border-right-color: var(--color-box-body);
127+
border-width: 8px;
128+
margin-top: -8px;
129+
}

0 commit comments

Comments
 (0)