mirror of https://github.com/go-gitea/gitea.git
Browse Source
Resolve #29328 This pull request introduces a file tree on the left side when reviewing files of a repository. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>pull/33895/head
Kerwin Bryant
9 months ago
committed by
GitHub
22 changed files with 696 additions and 162 deletions
@ -0,0 +1,26 @@
@@ -0,0 +1,26 @@
|
||||
// Copyright 2025 The Gitea Authors. All rights reserved.
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
package setting |
||||
|
||||
import ( |
||||
"net/http" |
||||
"strconv" |
||||
|
||||
user_model "code.gitea.io/gitea/models/user" |
||||
"code.gitea.io/gitea/modules/json" |
||||
"code.gitea.io/gitea/services/context" |
||||
) |
||||
|
||||
func UpdatePreferences(ctx *context.Context) { |
||||
type preferencesForm struct { |
||||
CodeViewShowFileTree bool `json:"codeViewShowFileTree"` |
||||
} |
||||
form := &preferencesForm{} |
||||
if err := json.NewDecoder(ctx.Req.Body).Decode(&form); err != nil { |
||||
ctx.HTTPError(http.StatusBadRequest, "json decode failed") |
||||
return |
||||
} |
||||
_ = user_model.SetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyCodeViewShowFileTree, strconv.FormatBool(form.CodeViewShowFileTree)) |
||||
ctx.JSONOK() |
||||
} |
||||
@ -0,0 +1,29 @@
@@ -0,0 +1,29 @@
|
||||
{{template "base/head" .}} |
||||
<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}"> |
||||
{{template "repo/header" .}} |
||||
<div class="ui container {{if or .TreeNames .IsBlame}}fluid padded{{end}}"> |
||||
{{template "base/alert" .}} |
||||
|
||||
{{if .Repository.IsArchived}} |
||||
<div class="ui warning message tw-text-center"> |
||||
{{if .Repository.ArchivedUnix.IsZero}} |
||||
{{ctx.Locale.Tr "repo.archive.title"}} |
||||
{{else}} |
||||
{{ctx.Locale.Tr "repo.archive.title_date" (DateUtils.AbsoluteLong .Repository.ArchivedUnix)}} |
||||
{{end}} |
||||
</div> |
||||
{{end}} |
||||
|
||||
{{template "repo/code/recently_pushed_new_branches" .}} |
||||
|
||||
<div class="repo-view-container"> |
||||
<div class="repo-view-file-tree-container not-mobile {{if not .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}" {{if .IsSigned}}data-user-is-signed-in{{end}}> |
||||
{{template "repo/view_file_tree" .}} |
||||
</div> |
||||
<div class="repo-view-content"> |
||||
{{template "repo/view_content" .}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{{template "base/footer" .}} |
||||
@ -0,0 +1,111 @@
@@ -0,0 +1,111 @@
|
||||
{{$isTreePathRoot := not .TreeNames}} |
||||
|
||||
{{template "repo/sub_menu" .}} |
||||
<div class="repo-button-row"> |
||||
<div class="repo-button-row-left"> |
||||
{{if not $isTreePathRoot}} |
||||
<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"}}"> |
||||
{{svg "octicon-sidebar-collapse"}} |
||||
</button> |
||||
{{end}} |
||||
|
||||
{{template "repo/branch_dropdown" dict |
||||
"Repository" .Repository |
||||
"ShowTabBranches" true |
||||
"ShowTabTags" true |
||||
"CurrentRefType" .RefFullName.RefType |
||||
"CurrentRefShortName" .RefFullName.ShortName |
||||
"CurrentTreePath" .TreePath |
||||
"RefLinkTemplate" "{RepoLink}/src/{RefType}/{RefShortName}/{TreePath}" |
||||
"AllowCreateNewRef" .CanCreateBranch |
||||
"ShowViewAllRefsEntry" true |
||||
}} |
||||
|
||||
{{if and .CanCompareOrPull .RefFullName.IsBranch (not .Repository.IsArchived)}} |
||||
{{$cmpBranch := ""}} |
||||
{{if ne .Repository.ID .BaseRepo.ID}} |
||||
{{$cmpBranch = printf "%s/%s:" (.Repository.OwnerName|PathEscape) (.Repository.Name|PathEscape)}} |
||||
{{end}} |
||||
{{$cmpBranch = print $cmpBranch (.BranchName|PathEscapeSegments)}} |
||||
{{$compareLink := printf "%s/compare/%s...%s" .BaseRepo.Link (.BaseRepo.DefaultBranch|PathEscapeSegments) $cmpBranch}} |
||||
<a id="new-pull-request" role="button" class="ui compact basic button" href="{{$compareLink}}" |
||||
data-tooltip-content="{{if .PullRequestCtx.Allowed}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}"> |
||||
{{svg "octicon-git-pull-request"}} |
||||
</a> |
||||
{{end}} |
||||
|
||||
<!-- Show go to file if on home page --> |
||||
{{if $isTreePathRoot}} |
||||
<a href="{{.Repository.Link}}/find/{{.RefTypeNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a> |
||||
{{end}} |
||||
|
||||
{{if and .CanWriteCode .RefFullName.IsBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}} |
||||
<button class="ui dropdown basic compact jump button"{{if not .Repository.CanEnableEditor}} disabled{{end}}> |
||||
{{ctx.Locale.Tr "repo.editor.add_file"}} |
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}} |
||||
<div class="menu"> |
||||
<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}"> |
||||
{{ctx.Locale.Tr "repo.editor.new_file"}} |
||||
</a> |
||||
{{if .RepositoryUploadEnabled}} |
||||
<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}"> |
||||
{{ctx.Locale.Tr "repo.editor.upload_file"}} |
||||
</a> |
||||
{{end}} |
||||
<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}"> |
||||
{{ctx.Locale.Tr "repo.editor.patch"}} |
||||
</a> |
||||
</div> |
||||
</button> |
||||
{{end}} |
||||
|
||||
{{if and $isTreePathRoot .Repository.IsTemplate}} |
||||
<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}"> |
||||
{{ctx.Locale.Tr "repo.use_template"}} |
||||
</a> |
||||
{{end}} |
||||
|
||||
{{if not $isTreePathRoot}} |
||||
{{$treeNameIdxLast := Eval (len .TreeNames) "-" 1}} |
||||
<span class="breadcrumb repo-path tw-ml-1"> |
||||
<a class="section" href="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a> |
||||
{{- range $i, $v := .TreeNames -}} |
||||
<span class="breadcrumb-divider">/</span> |
||||
{{- if eq $i $treeNameIdxLast -}} |
||||
<span class="active section" title="{{$v}}">{{$v}}</span> |
||||
<button class="btn interact-fg tw-mx-1" data-clipboard-text="{{$.TreePath}}" data-tooltip-content="{{ctx.Locale.Tr "copy_path"}}">{{svg "octicon-copy" 14}}</button> |
||||
{{- else -}} |
||||
{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span> |
||||
{{- end -}} |
||||
{{- end -}} |
||||
</span> |
||||
{{end}} |
||||
</div> |
||||
|
||||
<div class="repo-button-row-right"> |
||||
<!-- Only show clone panel in repository home page --> |
||||
{{if $isTreePathRoot}} |
||||
{{template "repo/clone_panel" .}} |
||||
{{end}} |
||||
{{if and (not $isTreePathRoot) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}} |
||||
<a class="ui button" href="{{.RepoLink}}/commits/{{.RefTypeNameSubURL}}/{{.TreePath | PathEscapeSegments}}"> |
||||
{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}} |
||||
</a> |
||||
{{end}} |
||||
</div> |
||||
</div> |
||||
{{if .IsViewFile}} |
||||
{{template "repo/view_file" .}} |
||||
{{else if .IsBlame}} |
||||
{{template "repo/blame" .}} |
||||
{{else}}{{/* IsViewDirectory */}} |
||||
{{if $isTreePathRoot}} |
||||
{{template "repo/code/upstream_diverging_info" .}} |
||||
{{end}} |
||||
{{template "repo/view_list" .}} |
||||
{{if and .ReadmeExist (or .IsMarkup .IsPlainText)}} |
||||
{{template "repo/view_file" .}} |
||||
{{end}} |
||||
{{end}} |
||||
@ -0,0 +1,15 @@
@@ -0,0 +1,15 @@
|
||||
<div class="flex-text-block tw-mb-2"> |
||||
<button class="ui compact tiny icon button" |
||||
data-global-click="onRepoViewFileTreeToggle" data-toggle-action="hide" |
||||
data-tooltip-content="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}"> |
||||
{{svg "octicon-sidebar-expand"}} |
||||
</button> |
||||
<b>Files</b> |
||||
</div> |
||||
|
||||
{{/* TODO: Dynamically move components such as refSelector and createPR here */}} |
||||
<div id="view-file-tree" class="tw-overflow-auto tw-h-full is-loading" |
||||
data-repo-link="{{.RepoLink}}" |
||||
data-tree-path="{{$.TreePath}}" |
||||
data-current-ref-name-sub-url="{{.RefTypeNameSubURL}}" |
||||
></div> |
||||
@ -0,0 +1,62 @@
@@ -0,0 +1,62 @@
|
||||
<script lang="ts" setup> |
||||
import ViewFileTreeItem from './ViewFileTreeItem.vue'; |
||||
import {onMounted, ref} from 'vue'; |
||||
import {pathEscapeSegments} from '../utils/url.ts'; |
||||
import {GET} from '../modules/fetch.ts'; |
||||
|
||||
const elRoot = ref<HTMLElement | null>(null); |
||||
|
||||
const props = defineProps({ |
||||
repoLink: {type: String, required: true}, |
||||
treePath: {type: String, required: true}, |
||||
currentRefNameSubURL: {type: String, required: true}, |
||||
}); |
||||
|
||||
const files = ref([]); |
||||
const selectedItem = ref(''); |
||||
|
||||
async function loadChildren(treePath: string, subPath: string = '') { |
||||
const response = await GET(`${props.repoLink}/tree-view/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}?sub_path=${encodeURIComponent(subPath)}`); |
||||
const json = await response.json(); |
||||
return json.fileTreeNodes ?? null; |
||||
} |
||||
|
||||
async function loadViewContent(url: string) { |
||||
url = url.includes('?') ? url.replace('?', '?only_content=true') : `${url}?only_content=true`; |
||||
const response = await GET(url); |
||||
document.querySelector('.repo-view-content').innerHTML = await response.text(); |
||||
} |
||||
|
||||
async function navigateTreeView(treePath: string) { |
||||
const url = `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`; |
||||
window.history.pushState({treePath, url}, null, url); |
||||
selectedItem.value = treePath; |
||||
await loadViewContent(url); |
||||
} |
||||
|
||||
onMounted(async () => { |
||||
selectedItem.value = props.treePath; |
||||
files.value = await loadChildren('', props.treePath); |
||||
elRoot.value.closest('.is-loading')?.classList?.remove('is-loading'); |
||||
window.addEventListener('popstate', (e) => { |
||||
selectedItem.value = e.state?.treePath || ''; |
||||
if (e.state?.url) loadViewContent(e.state.url); |
||||
}); |
||||
}); |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="view-file-tree-items" ref="elRoot"> |
||||
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often --> |
||||
<ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :navigate-view-content="navigateTreeView" :load-children="loadChildren"/> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.view-file-tree-items { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 1px; |
||||
margin-right: .5rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,156 @@
@@ -0,0 +1,156 @@
|
||||
<script lang="ts" setup> |
||||
import {SvgIcon} from '../svg.ts'; |
||||
import {ref} from 'vue'; |
||||
|
||||
type Item = { |
||||
entryName: string; |
||||
entryMode: string; |
||||
fullPath: string; |
||||
submoduleUrl?: string; |
||||
children?: Item[]; |
||||
}; |
||||
|
||||
const props = defineProps<{ |
||||
item: Item, |
||||
navigateViewContent:(treePath: string) => void, |
||||
loadChildren:(treePath: string, subPath?: string) => Promise<Item[]>, |
||||
selectedItem?: string, |
||||
}>(); |
||||
|
||||
const isLoading = ref(false); |
||||
const children = ref(props.item.children); |
||||
const collapsed = ref(!props.item.children); |
||||
|
||||
const doLoadChildren = async () => { |
||||
collapsed.value = !collapsed.value; |
||||
if (!collapsed.value && props.loadChildren) { |
||||
isLoading.value = true; |
||||
try { |
||||
children.value = await props.loadChildren(props.item.fullPath); |
||||
} finally { |
||||
isLoading.value = false; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
const doLoadDirContent = () => { |
||||
doLoadChildren(); |
||||
props.navigateViewContent(props.item.fullPath); |
||||
}; |
||||
|
||||
const doLoadFileContent = () => { |
||||
props.navigateViewContent(props.item.fullPath); |
||||
}; |
||||
|
||||
const doGotoSubModule = () => { |
||||
location.href = props.item.submoduleUrl; |
||||
}; |
||||
</script> |
||||
|
||||
<!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"--> |
||||
<template> |
||||
<div |
||||
v-if="item.entryMode === 'commit'" class="tree-item type-submodule" |
||||
:title="item.entryName" |
||||
@click.stop="doGotoSubModule" |
||||
> |
||||
<!-- submodule --> |
||||
<div class="item-content"> |
||||
<SvgIcon class="text primary" name="octicon-file-submodule"/> |
||||
<span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span> |
||||
</div> |
||||
</div> |
||||
<div |
||||
v-else-if="item.entryMode === 'symlink'" class="tree-item type-symlink" |
||||
:class="{'selected': selectedItem === item.fullPath}" |
||||
:title="item.entryName" |
||||
@click.stop="doLoadFileContent" |
||||
> |
||||
<!-- symlink --> |
||||
<div class="item-content"> |
||||
<SvgIcon name="octicon-file-symlink-file"/> |
||||
<span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span> |
||||
</div> |
||||
</div> |
||||
<div |
||||
v-else-if="item.entryMode !== 'tree'" class="tree-item type-file" |
||||
:class="{'selected': selectedItem === item.fullPath}" |
||||
:title="item.entryName" |
||||
@click.stop="doLoadFileContent" |
||||
> |
||||
<!-- file --> |
||||
<div class="item-content"> |
||||
<SvgIcon name="octicon-file"/> |
||||
<span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span> |
||||
</div> |
||||
</div> |
||||
<div |
||||
v-else class="tree-item type-directory" |
||||
:class="{'selected': selectedItem === item.fullPath}" |
||||
:title="item.entryName" |
||||
@click.stop="doLoadDirContent" |
||||
> |
||||
<!-- directory --> |
||||
<div class="item-toggle"> |
||||
<SvgIcon v-if="isLoading" name="octicon-sync" class="job-status-rotate"/> |
||||
<SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop="doLoadChildren"/> |
||||
</div> |
||||
<div class="item-content"> |
||||
<SvgIcon class="text primary" :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"/> |
||||
<span class="gt-ellipsis">{{ item.entryName }}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-if="children?.length" v-show="!collapsed" class="sub-items"> |
||||
<ViewFileTreeItem v-for="childItem in children" :key="childItem.entryName" :item="childItem" :selected-item="selectedItem" :navigate-view-content="navigateViewContent" :load-children="loadChildren"/> |
||||
</div> |
||||
</template> |
||||
<style scoped> |
||||
.sub-items { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 1px; |
||||
margin-left: 14px; |
||||
border-left: 1px solid var(--color-secondary); |
||||
} |
||||
|
||||
.tree-item.selected { |
||||
color: var(--color-text); |
||||
background: var(--color-active); |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.tree-item.type-directory { |
||||
user-select: none; |
||||
} |
||||
|
||||
.tree-item { |
||||
display: grid; |
||||
grid-template-columns: 16px 1fr; |
||||
grid-template-areas: "toggle content"; |
||||
gap: 0.25em; |
||||
padding: 6px; |
||||
} |
||||
|
||||
.tree-item:hover { |
||||
color: var(--color-text); |
||||
background: var(--color-hover); |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.item-toggle { |
||||
grid-area: toggle; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.item-content { |
||||
grid-area: content; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 0.25em; |
||||
text-overflow: ellipsis; |
||||
min-width: 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,37 @@
@@ -0,0 +1,37 @@
|
||||
import {createApp} from 'vue'; |
||||
import {toggleElem} from '../utils/dom.ts'; |
||||
import {POST} from '../modules/fetch.ts'; |
||||
import ViewFileTree from '../components/ViewFileTree.vue'; |
||||
import {registerGlobalEventFunc} from '../modules/observer.ts'; |
||||
|
||||
const {appSubUrl} = window.config; |
||||
|
||||
async function toggleSidebar(btn: HTMLElement) { |
||||
const elToggleShow = document.querySelector('.repo-view-file-tree-toggle-show'); |
||||
const elFileTreeContainer = document.querySelector('.repo-view-file-tree-container'); |
||||
const shouldShow = btn.getAttribute('data-toggle-action') === 'show'; |
||||
toggleElem(elFileTreeContainer, shouldShow); |
||||
toggleElem(elToggleShow, !shouldShow); |
||||
|
||||
// FIXME: need to remove "full height" style from parent element
|
||||
|
||||
if (!elFileTreeContainer.hasAttribute('data-user-is-signed-in')) return; |
||||
await POST(`${appSubUrl}/user/settings/update_preferences`, { |
||||
data: {codeViewShowFileTree: shouldShow}, |
||||
}); |
||||
} |
||||
|
||||
export async function initRepoViewFileTree() { |
||||
const sidebar = document.querySelector<HTMLElement>('.repo-view-file-tree-container'); |
||||
const repoViewContent = document.querySelector('.repo-view-content'); |
||||
if (!sidebar || !repoViewContent) return; |
||||
|
||||
registerGlobalEventFunc('click', 'onRepoViewFileTreeToggle', toggleSidebar); |
||||
|
||||
const fileTree = sidebar.querySelector('#view-file-tree'); |
||||
createApp(ViewFileTree, { |
||||
repoLink: fileTree.getAttribute('data-repo-link'), |
||||
treePath: fileTree.getAttribute('data-tree-path'), |
||||
currentRefNameSubURL: fileTree.getAttribute('data-current-ref-name-sub-url'), |
||||
}).mount(fileTree); |
||||
} |
||||
Loading…
Reference in new issue