Skip to content

Commit 599f3fd

Browse files
bytedreambytedream
committed
show file tree in editor
1 parent 0cec4b8 commit 599f3fd

File tree

6 files changed

+69
-50
lines changed

6 files changed

+69
-50
lines changed

‎templates/repo/editor/edit.tmpl‎

Lines changed: 60 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,72 @@
11
{{template "base/head" .}}
22
<div role="main" aria-label="{{.Title}}" class="page-content repository file editor edit">
33
{{template "repo/header" .}}
4-
<div class="ui container">
5-
{{template "base/alert" .}}
6-
<form class="ui edit form" method="post"
7-
data-text-empty-confirm-header="{{ctx.Locale.Tr "repo.editor.commit_empty_file_header"}}"
8-
data-text-empty-confirm-content="{{ctx.Locale.Tr "repo.editor.commit_empty_file_text"}}"
9-
>
10-
{{.CsrfTokenHtml}}
11-
<input type="hidden" name="last_commit" value="{{.last_commit}}">
12-
<input type="hidden" name="page_has_posted" value="{{.PageHasPosted}}">
13-
<div class="repo-editor-header">
14-
<div class="ui breadcrumb field{{if .Err_TreePath}} error{{end}}">
15-
<a class="section" href="{{$.BranchLink}}">{{.Repository.Name}}</a>
16-
{{$n := len .TreeNames}}
17-
{{$l := Eval $n "-" 1}}
18-
{{range $i, $v := .TreeNames}}
19-
<div class="breadcrumb-divider">/</div>
20-
{{if eq $i $l}}
21-
<input id="file-name" maxlength="255" value="{{$v}}" placeholder="{{ctx.Locale.Tr "repo.editor.name_your_file"}}" data-editorconfig="{{$.EditorconfigJson}}" required autofocus>
22-
<span data-tooltip-content="{{ctx.Locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span>
23-
{{else}}
24-
<span class="section"><a href="{{$.BranchLink}}/{{index $.TreePaths $i | PathEscapeSegments}}">{{$v}}</a></span>
25-
{{end}}
26-
{{end}}
27-
<span>{{ctx.Locale.Tr "repo.editor.or"}} <a href="{{if .ReturnURI}}{{.ReturnURI}}{{else}}{{$.BranchLink}}{{if not .IsNewFile}}/{{PathEscapeSegments .TreePath}}{{end}}{{end}}">{{ctx.Locale.Tr "repo.editor.cancel_lower"}}</a></span>
28-
<input type="hidden" id="tree_path" name="tree_path" value="{{.TreePath}}" required>
29-
</div>
30-
</div>
31-
<div class="field">
32-
<div class="ui top attached header">
33-
<div class="ui compact small menu small-menu-items repo-editor-menu">
34-
<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
35-
<a class="item" data-tab="preview" data-preview-url="{{.Repository.Link}}/markup" data-preview-context-ref="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
36-
{{if not .IsNewFile}}
37-
<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
4+
<div class="ui container fluid padded repo-view-container">
5+
{{template "base/alert" .}}
6+
<div class="tw-flex tw-flex-col repo-view-file-tree-container not-mobile" data-edit data-user-is-signed-in>
7+
{{template "repo/view_file_tree" .}}
8+
</div>
9+
<div class="repo-view-content">
10+
<form class="ui edit form" method="post"
11+
data-text-empty-confirm-header="{{ctx.Locale.Tr "repo.editor.commit_empty_file_header"}}"
12+
data-text-empty-confirm-content="{{ctx.Locale.Tr "repo.editor.commit_empty_file_text"}}"
13+
>
14+
{{.CsrfTokenHtml}}
15+
<input type="hidden" name="last_commit" value="{{.last_commit}}">
16+
<input type="hidden" name="page_has_posted" value="{{.PageHasPosted}}">
17+
<div class="repo-editor-header">
18+
<button class="repo-view-file-tree-toggle-show ui compact basic button icon not-mobile tw-hidden"
19+
data-global-click="onRepoViewFileTreeToggle" data-toggle-action="show"
20+
data-tooltip-content="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}"
21+
type="button"
22+
>
23+
{{svg "octicon-sidebar-collapse"}}
24+
</button>
25+
<div class="ui breadcrumb field{{if .Err_TreePath}} error{{end}}">
26+
<a class="section" href="{{$.BranchLink}}">{{.Repository.Name}}</a>
27+
{{$n := len .TreeNames}}
28+
{{$l := Eval $n "-" 1}}
29+
{{range $i, $v := .TreeNames}}
30+
<div class="breadcrumb-divider">/</div>
31+
{{if eq $i $l}}
32+
<input id="file-name" maxlength="255" value="{{$v}}" placeholder="{{ctx.Locale.Tr "repo.editor.name_your_file"}}" data-editorconfig="{{$.EditorconfigJson}}" required autofocus>
33+
<span data-tooltip-content="{{ctx.Locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span>
34+
{{else}}
35+
<span class="section"><a href="{{$.BranchLink}}/{{index $.TreePaths $i | PathEscapeSegments}}">{{$v}}</a></span>
36+
{{end}}
3837
{{end}}
38+
<span>{{ctx.Locale.Tr "repo.editor.or"}} <a href="{{if .ReturnURI}}{{.ReturnURI}}{{else}}{{$.BranchLink}}{{if not .IsNewFile}}/{{PathEscapeSegments .TreePath}}{{end}}{{end}}">{{ctx.Locale.Tr "repo.editor.cancel_lower"}}</a></span>
39+
<input type="hidden" id="tree_path" name="tree_path" value="{{.TreePath}}" required>
3940
</div>
4041
</div>
41-
<div class="ui bottom attached segment tw-p-0">
42-
<div class="ui active tab tw-rounded-b" data-tab="write">
43-
<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
44-
data-previewable-extensions="{{.PreviewableExtensions}}"
45-
data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
46-
<div class="editor-loading is-loading"></div>
47-
</div>
48-
<div class="ui tab tw-px-4 tw-py-3" data-tab="preview">
49-
{{ctx.Locale.Tr "loading"}}
42+
<div class="field">
43+
<div class="ui top attached header">
44+
<div class="ui compact small menu small-menu-items repo-editor-menu">
45+
<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
46+
<a class="item" data-tab="preview" data-preview-url="{{.Repository.Link}}/markup" data-preview-context-ref="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
47+
{{if not .IsNewFile}}
48+
<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
49+
{{end}}
50+
</div>
5051
</div>
51-
<div class="ui tab" data-tab="diff">
52-
<div class="tw-p-16"></div>
52+
<div class="ui bottom attached segment tw-p-0">
53+
<div class="ui active tab tw-rounded-b" data-tab="write">
54+
<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
55+
data-previewable-extensions="{{.PreviewableExtensions}}"
56+
data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
57+
<div class="editor-loading is-loading"></div>
58+
</div>
59+
<div class="ui tab tw-px-4 tw-py-3" data-tab="preview">
60+
{{ctx.Locale.Tr "loading"}}
61+
</div>
62+
<div class="ui tab" data-tab="diff">
63+
<div class="tw-p-16"></div>
64+
</div>
5365
</div>
5466
</div>
55-
</div>
56-
{{template "repo/editor/commit_form" .}}
57-
</form>
67+
{{template "repo/editor/commit_form" .}}
68+
</form>
69+
</div>
5870
</div>
5971
</div>
6072
{{template "base/footer" .}}

‎templates/repo/view_file_tree.tmpl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,5 @@
1212
data-repo-link="{{.RepoLink}}"
1313
data-tree-path="{{$.TreePath}}"
1414
data-current-ref-name-sub-url="{{.RefTypeNameSubURL}}"
15+
data-is-edit="{{.PageIsEdit}}"
1516
></div>

‎web_src/css/editor/fileeditor.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
.repo-editor-header {
1616
display: flex;
17-
margin: 1rem 0;
17+
margin: 4px 0;
1818
padding: 3px 0;
1919
}
2020

‎web_src/js/components/ViewFileTree.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const props = defineProps({
1111
repoLink: {type: String, required: true},
1212
treePath: {type: String, required: true},
1313
currentRefNameSubURL: {type: String, required: true},
14+
isEdit: {type: Boolean, required: false},
1415
});
1516
1617
const files = ref([]);
@@ -39,6 +40,11 @@ async function loadViewContent(url: string) {
3940
4041
async function navigateTreeView(treePath: string) {
4142
const url = `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
43+
// do full page reload to show confirmation dialog if editor has unsaved changed
44+
if (props.isEdit) {
45+
window.location.href = url;
46+
return;
47+
}
4248
window.history.pushState({treePath, url}, null, url);
4349
selectedItem.value = treePath;
4450
await loadViewContent(url);

‎web_src/js/features/codeeditor.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ const baseOptions: MonacoOpts = {
3737
rulers: [],
3838
scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6},
3939
scrollBeyondLastLine: false,
40-
automaticLayout: true,
4140
};
4241

4342
function getEditorconfig(input: HTMLInputElement): EditorConfig | null {

‎web_src/js/features/repo-view-file-tree.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,6 @@ export async function initRepoViewFileTree() {
3333
repoLink: fileTree.getAttribute('data-repo-link'),
3434
treePath: fileTree.getAttribute('data-tree-path'),
3535
currentRefNameSubURL: fileTree.getAttribute('data-current-ref-name-sub-url'),
36+
isEdit: fileTree.getAttribute('data-is-edit'),
3637
}).mount(fileTree);
3738
}

0 commit comments

Comments
 (0)