Skip to content

Add file tree to editor #35284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
+153 −88
Open

Add file tree to editor #35284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
599f3fd
show file tree in editor
bytedream May 28, 2025
cdae87a
Merge branch 'main' into editor-file-tree
bytedream Aug 5, 2025
87e1ce7
update
bytedream Aug 7, 2025
5c5d6a6
Merge branch 'main' into editor-file-tree
bytedream Aug 7, 2025
0a73fe4
update
bytedream Aug 15, 2025
6045988
Merge branch 'main' into editor-file-tree
bytedream Aug 15, 2025
a12962c
typo
bytedream Aug 15, 2025
6bf1166
fix filename being editable even if it shouldn't
bytedream Aug 15, 2025
b7f6688
fix action buttons css
bytedream Aug 15, 2025
49ddf5b
update comment
bytedream Aug 15, 2025
1a765f2
Merge branch 'main' into editor-file-tree
bytedream Aug 15, 2025
ede5047
only relax css rules on icons
bytedream Aug 15, 2025
fb160d1
lint
bytedream Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion routers/web/repo/blame.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ func RefBlame(ctx *context.Context) {

tplName := tplRepoViewContent
if !ctx.FormBool("only_content") {
prepareHomeTreeSideBarSwitch(ctx)
prepareTreeSideBarSwitch(ctx)
tplName = tplRepoView
}

Expand Down
5 changes: 5 additions & 0 deletions routers/web/repo/editor.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,8 @@ func EditFile(ctx *context.Context) {
return
}

prepareTreeSideBarSwitch(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))

Expand Down Expand Up @@ -320,6 +322,7 @@ func EditFile(ctx *context.Context) {
}
}

ctx.Data["PageIsEdit"] = true
ctx.Data["EditorconfigJson"] = getContextRepoEditorConfig(ctx, ctx.Repo.TreePath)
ctx.HTML(http.StatusOK, tplEditFile)
}
Expand Down Expand Up @@ -376,6 +379,8 @@ func EditFilePost(ctx *context.Context) {

// DeleteFile render delete file page
func DeleteFile(ctx *context.Context) {
prepareTreePathFieldsAndPaths(ctx, ctx.Repo.TreePath)
prepareTreeSideBarSwitch(ctx)
prepareEditorCommitFormOptions(ctx, "_delete")
if ctx.Written() {
return
Expand Down
1 change: 1 addition & 0 deletions routers/web/repo/editor_apply_patch.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import (
)

func NewDiffPatch(ctx *context.Context) {
prepareTreeSideBarSwitch(ctx)
prepareEditorCommitFormOptions(ctx, "_diffpatch")
if ctx.Written() {
return
Expand Down
14 changes: 14 additions & 0 deletions routers/web/repo/view.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import (
"net/http"
"net/url"
"path"
"strconv"
"strings"
"time"

Expand Down Expand Up @@ -257,6 +258,19 @@ func LastCommit(ctx *context.Context) {
ctx.HTML(http.StatusOK, tplRepoViewList)
}

func prepareTreeSideBarSwitch(ctx *context.Context) {
showFileTree := true
if ctx.Doer != nil {
v, err := user_model.GetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyCodeViewShowFileTree, "true")
if err != nil {
log.Error("GetUserSetting: %v", err)
} else {
showFileTree, _ = strconv.ParseBool(v)
}
}
ctx.Data["UserSettingCodeViewShowFileTree"] = showFileTree
}

func prepareDirectoryFileIcons(ctx *context.Context, files []git.CommitInfo) {
renderedIconPool := fileicon.NewRenderedIconPool()
fileIcons := map[string]template.HTML{}
Expand Down
17 changes: 1 addition & 16 deletions routers/web/repo/view_home.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,13 @@ import (
"html/template"
"net/http"
"path"
"strconv"
"strings"
"time"

"code.gitea.io/gitea/models/db"
git_model "code.gitea.io/gitea/models/git"
repo_model "code.gitea.io/gitea/models/repo"
unit_model "code.gitea.io/gitea/models/unit"
user_model "code.gitea.io/gitea/models/user"
"code.gitea.io/gitea/modules/git"
"code.gitea.io/gitea/modules/gitrepo"
"code.gitea.io/gitea/modules/htmlutil"
Expand Down Expand Up @@ -318,19 +316,6 @@ func handleRepoHomeFeed(ctx *context.Context) bool {
return true
}

func prepareHomeTreeSideBarSwitch(ctx *context.Context) {
showFileTree := true
if ctx.Doer != nil {
v, err := user_model.GetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyCodeViewShowFileTree, "true")
if err != nil {
log.Error("GetUserSetting: %v", err)
} else {
showFileTree, _ = strconv.ParseBool(v)
}
}
ctx.Data["UserSettingCodeViewShowFileTree"] = showFileTree
}

func redirectSrcToRaw(ctx *context.Context) bool {
// GitHub redirects a tree path with "?raw=1" to the raw path
// It is useful to embed some raw contents into Markdown files,
Expand Down Expand Up @@ -386,7 +371,7 @@ func Home(ctx *context.Context) {
return
}

prepareHomeTreeSideBarSwitch(ctx)
prepareTreeSideBarSwitch(ctx)

// get the current git entry which doer user is currently looking at.
entry, err := ctx.Repo.Commit.GetTreeEntryByPath(ctx.Repo.TreePath)
Expand Down
4 changes: 3 additions & 1 deletion templates/repo/editor/common_breadcrumb.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
{{range $i, $v := .TreeNames}}
<div class="breadcrumb-divider">/</div>
{{if eq $i $l}}
<input id="file-name" maxlength="255" value="{{$v}}" placeholder="{{ctx.Locale.Tr (Iif $.PageIsUpload "repo.editor.add_subdir" "repo.editor.name_your_file")}}" data-editorconfig="{{$.EditorconfigJson}}" {{Iif $.PageIsUpload "" "required"}} autofocus>
<input id="file-name" class="field {{Iif $.PageIsEdit "" "disabled"}}" maxlength="255" value="{{$v}}"
placeholder="{{ctx.Locale.Tr (Iif $.PageIsUpload "repo.editor.add_subdir" "repo.editor.name_your_file")}}"
data-editorconfig="{{$.EditorconfigJson}}" {{Iif $.PageIsUpload "required"}} {{Iif $.PageIsEdit "autofocus" "disabled"}}>
<span data-tooltip-content="{{ctx.Locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span>
{{else}}
<span class="section"><a href="{{$.BranchLink}}/{{index $.TreePaths $i | PathEscapeSegments}}">{{$v}}</a></span>
Expand Down
27 changes: 21 additions & 6 deletions templates/repo/editor/delete.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,28 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository file editor delete">
{{template "repo/header" .}}
<div class="ui container">
<div class="ui container fluid">
{{template "base/alert" .}}
<form class="ui form form-fetch-action" method="post" action="{{.CommitFormOptions.TargetFormAction}}">
{{.CsrfTokenHtml}}
{{template "repo/editor/common_top" .}}
{{template "repo/editor/commit_form" .}}
</form>
{{template "repo/editor/common_top" .}}
<div class="repo-view-container">
<div class="tw-flex tw-flex-col repo-view-file-tree-container not-mobile {{if (not .UserSettingCodeViewShowFileTree)}}tw-hidden{{end}}" data-user-is-signed-in>
{{template "repo/view_file_tree" .}}
</div>
<div class="repo-view-content">
<div class="ui form">
<div class="repo-editor-header">
{{template "repo/editor/file_tree_toggle" .}}
{{template "repo/editor/common_breadcrumb" .}}
</div>
</div>
<div class="ui container">
<form class="ui form form-fetch-action tw-my-[40px]" method="post" action="{{.CommitFormOptions.TargetFormAction}}">
{{.CsrfTokenHtml}}
{{template "repo/editor/commit_form" .}}
</form>
</div>
</div>
</div>
</div>
</div>
{{template "base/footer" .}}
104 changes: 62 additions & 42 deletions templates/repo/editor/edit.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,73 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository file editor edit">
{{template "repo/header" .}}
<div class="ui container">
<div class="ui container fluid">
{{template "base/alert" .}}
<form class="ui edit form form-fetch-action" method="post" action="{{.CommitFormOptions.TargetFormAction}}"
data-text-empty-confirm-header="{{ctx.Locale.Tr "repo.editor.commit_empty_file_header"}}"
data-text-empty-confirm-content="{{ctx.Locale.Tr "repo.editor.commit_empty_file_text"}}"
>
{{.CsrfTokenHtml}}
{{template "repo/editor/common_top" .}}
<div class="repo-editor-header">
{{template "repo/editor/common_breadcrumb" .}}
{{template "repo/editor/common_top" .}}
<div class="repo-view-container">
<div class="tw-flex tw-flex-col repo-view-file-tree-container not-mobile {{if (not .UserSettingCodeViewShowFileTree)}}tw-hidden{{end}}" data-user-is-signed-in>
{{template "repo/view_file_tree" .}}
</div>
{{if not .NotEditableReason}}
<div class="field">
<div class="ui top attached header">
<div class="ui compact small menu small-menu-items repo-editor-menu">
<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>
<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>
{{if not .IsNewFile}}
<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>
{{end}}
</div>
<div class="repo-view-content">
<form class="ui edit form form-fetch-action" method="post" action="{{.CommitFormOptions.TargetFormAction}}"
data-text-empty-confirm-header="{{ctx.Locale.Tr "repo.editor.commit_empty_file_header"}}"
data-text-empty-confirm-content="{{ctx.Locale.Tr "repo.editor.commit_empty_file_text"}}"
>
{{.CsrfTokenHtml}}
<div class="repo-editor-header">
{{template "repo/editor/file_tree_toggle" .}}
{{template "repo/editor/common_breadcrumb" .}}
</div>
<div class="ui bottom attached segment tw-p-0">
<div class="ui active tab tw-rounded-b" data-tab="write">
<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
data-previewable-extensions="{{.PreviewableExtensions}}"
data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
<div class="editor-loading is-loading"></div>
</div>
<div class="ui tab tw-px-4 tw-py-3" data-tab="preview">
{{ctx.Locale.Tr "loading"}}
{{if not .NotEditableReason}}
<div class="field">
<div class="ui top attached header">
<div class="ui compact small menu small-menu-items repo-editor-menu">
<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>
<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>
{{if not .IsNewFile}}
<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>
{{end}}
</div>
</div>
<div class="ui bottom attached segment tw-p-0">
<div class="ui active tab tw-rounded-b" data-tab="write">
<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
data-previewable-extensions="{{.PreviewableExtensions}}"
data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
<div class="editor-loading is-loading"></div>
</div>
<div class="ui tab tw-px-4 tw-py-3" data-tab="preview">
{{ctx.Locale.Tr "loading"}}
</div>
<div class="ui tab" data-tab="diff">
<div class="tw-p-16"></div>
</div>
</div>
</div>
<div class="ui tab" data-tab="diff">
<div class="tw-p-16"></div>
{{else}}
<div class="field">
<div class="ui segment tw-text-center">
<h4 class="tw-font-semibold tw-mb-2">{{.NotEditableReason}}</h4>
<p>{{ctx.Locale.Tr "repo.editor.file_not_editable_hint"}}</p>
</div>
</div>
</div>
</div>
{{else}}
<div class="field">
<div class="ui segment tw-text-center">
<h4 class="tw-font-semibold tw-mb-2">{{.NotEditableReason}}</h4>
<p>{{ctx.Locale.Tr "repo.editor.file_not_editable_hint"}}</p>
</div>
</div>
{{end}}
{{template "repo/editor/commit_form" .}}
</form>
{{end}}
{{template "repo/editor/commit_form" .}}
</form>
</div>
</div>
</div>
</div>
{{template "base/footer" .}}
6 changes: 6 additions & 0 deletions templates/repo/editor/file_tree_toggle.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<button class="repo-view-file-tree-toggle-show ui compact basic button icon not-mobile {{if .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}"
data-global-click="onRepoViewFileTreeToggle" data-toggle-action="show"
data-tooltip-content="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}"
type="button">
{{svg "octicon-sidebar-collapse"}}
</button>
31 changes: 21 additions & 10 deletions templates/repo/editor/fork.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,29 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository">
{{template "repo/header" .}}
<div class="ui container">
<div class="ui container fluid">
{{template "base/alert" .}}
<form class="ui form form-fetch-action" method="post" action="{{.RepoLink}}/_fork/{{.BranchName | PathEscapeSegments}}">
{{.CsrfTokenHtml}}
<div class="tw-text-center">
<div class="tw-my-[40px]">
<h3>{{ctx.Locale.Tr "repo.editor.fork_create"}}</h3>
<p>{{ctx.Locale.Tr "repo.editor.fork_create_description"}}</p>
</div>
<button class="ui primary button">{{ctx.Locale.Tr "repo.fork_repo"}}</button>
<div class="repo-view-container">
<div class="tw-flex tw-flex-col repo-view-file-tree-container not-mobile {{if (not .UserSettingCodeViewShowFileTree)}}tw-hidden{{end}}" data-user-is-signed-in>
{{template "repo/view_file_tree" .}}
</div>
</form>
<div class="repo-view-content">
<form class="ui form form-fetch-action" method="post" action="{{.RepoLink}}/_fork/{{.BranchName | PathEscapeSegments}}">
{{.CsrfTokenHtml}}
<div class="repo-editor-header">
{{template "repo/editor/file_tree_toggle" .}}
{{template "repo/editor/common_breadcrumb" .}}
</div>
<div class="tw-text-center">
<div class="tw-my-[40px]">
<h3>{{ctx.Locale.Tr "repo.editor.fork_create"}}</h3>
<p>{{ctx.Locale.Tr "repo.editor.fork_create_description"}}</p>
</div>
<button class="ui primary button">{{ctx.Locale.Tr "repo.fork_repo"}}</button>
</div>
</form>
</div>
</div>
</div>
</div>
{{template "base/footer" .}}
1 change: 1 addition & 0 deletions templates/repo/view_file_tree.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@
data-repo-link="{{.RepoLink}}"
data-tree-path="{{$.TreePath}}"
data-current-ref-name-sub-url="{{.RefTypeNameSubURL}}"
data-page-is-edit="{{or .PageIsEdit .PageIsDelete}}"
></div>
3 changes: 2 additions & 1 deletion web_src/css/editor/fileeditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@

.repo-editor-header {
display: flex;
margin: 1rem 0;
margin: 4px 0;
padding: 3px 0;
gap: 0.5rem
}

.editor-toolbar {
Expand Down
14 changes: 7 additions & 7 deletions web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,34 +150,34 @@ td .commit-summary {
}
}

.repository.file.list .non-diff-file-content .header .icon {
.repository .non-diff-file-content .header .icon {
font-size: 1em;
}

.repository.file.list .non-diff-file-content .header .small.icon {
.repository .non-diff-file-content .header .small.icon {
font-size: 0.75em;
}

.repository.file.list .non-diff-file-content .header .tiny.icon {
.repository .non-diff-file-content .header .tiny.icon {
font-size: 0.5em;
}

.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon {
.repository .non-diff-file-content .header .file-actions .btn-octicon {
line-height: var(--line-height-default);
padding: 8px;
vertical-align: middle;
color: var(--color-text);
}

.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover {
.repository .non-diff-file-content .header .file-actions .btn-octicon:hover {
color: var(--color-primary);
}

.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover {
.repository .non-diff-file-content .header .file-actions .btn-octicon-danger:hover {
color: var(--color-red);
}

.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon.disabled {
.repository .non-diff-file-content .header .file-actions .btn-octicon.disabled {
color: inherit;
opacity: var(--opacity-disabled);
cursor: default;
Expand Down
1 change: 1 addition & 0 deletions web_src/js/components/ViewFileTree.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const props = defineProps({
repoLink: {type: String, required: true},
treePath: {type: String, required: true},
currentRefNameSubURL: {type: String, required: true},
pageIsEdit: {type: Boolean, required: true},
});

const store = createViewFileTreeStore(props);
Expand Down
Loading