mirror of https://github.com/go-gitea/gitea.git
add tree sidebar to file view
Kerwin Bryant
2 months ago
parent
22bf2ca6ba
commit
181645f4ed
@ -0,0 +1,45 @@
|
|||||||
|
// Copyright 2014 The Gogs Authors. All rights reserved.
|
||||||
|
// Copyright 2018 The Gitea Authors. All rights reserved.
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
package repo
|
||||||
|
|
||||||
|
import (
|
||||||
|
"net/http"
|
||||||
|
|
||||||
|
"code.gitea.io/gitea/models/unit"
|
||||||
|
"code.gitea.io/gitea/modules/git"
|
||||||
|
"code.gitea.io/gitea/services/context"
|
||||||
|
files_service "code.gitea.io/gitea/services/repository/files"
|
||||||
|
)
|
||||||
|
|
||||||
|
// canReadFiles returns true if repository is readable and user has proper access level.
|
||||||
|
func canReadFiles(r *context.Repository) bool {
|
||||||
|
return r.Permission.CanRead(unit.TypeCode)
|
||||||
|
}
|
||||||
|
|
||||||
|
// GetContents Get the metadata and contents (if a file) of an entry in a repository, or a list of entries if a dir
|
||||||
|
func GetContents(ctx *context.Context) {
|
||||||
|
if !canReadFiles(ctx.Repo) {
|
||||||
|
ctx.NotFound("Invalid FilePath", nil)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
treePath := ctx.PathParam("*")
|
||||||
|
ref := ctx.FormTrim("ref")
|
||||||
|
|
||||||
|
if fileList, err := files_service.GetContentsOrList(ctx, ctx.Repo.Repository, treePath, ref); err != nil {
|
||||||
|
if git.IsErrNotExist(err) {
|
||||||
|
ctx.NotFound("GetContentsOrList", err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
ctx.ServerError("Repo.GitRepo.GetCommit", err)
|
||||||
|
} else {
|
||||||
|
ctx.JSON(http.StatusOK, fileList)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// GetContentsList Get the metadata of all the entries of the root dir
|
||||||
|
func GetContentsList(ctx *context.Context) {
|
||||||
|
GetContents(ctx)
|
||||||
|
}
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
<div class="view-file-tree-sidebar-top">
|
||||||
|
<div class="sidebar-header">
|
||||||
|
<button class="hide-tree-sidebar-button ui compact basic button icon" title="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
|
||||||
|
{{svg "octicon-sidebar-expand" 20 "icon"}}
|
||||||
|
</button>
|
||||||
|
<b> Files</b>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-ref">
|
||||||
|
{{$branchDropdownCurrentRefType := "branch"}}
|
||||||
|
{{$branchDropdownCurrentRefShortName := .BranchName}}
|
||||||
|
{{if .IsViewTag}}
|
||||||
|
{{$branchDropdownCurrentRefType = "tag"}}
|
||||||
|
{{$branchDropdownCurrentRefShortName = .TagName}}
|
||||||
|
{{end}}
|
||||||
|
{{template "repo/branch_dropdown" dict
|
||||||
|
"Repository" .Repository
|
||||||
|
"ShowTabBranches" true
|
||||||
|
"ShowTabTags" true
|
||||||
|
"CurrentRefType" $branchDropdownCurrentRefType
|
||||||
|
"CurrentRefShortName" $branchDropdownCurrentRefShortName
|
||||||
|
"CurrentTreePath" .TreePath
|
||||||
|
"RefLinkTemplate" "{RepoLink}/src/{RefType}/{RefShortName}/{TreePath}"
|
||||||
|
"AllowCreateNewRef" .CanCreateBranch
|
||||||
|
"ShowViewAllRefsEntry" true
|
||||||
|
}}
|
||||||
|
|
||||||
|
{{if and .CanCompareOrPull .IsViewBranch (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 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}}
|
||||||
|
|
||||||
|
{{if and .CanWriteCode .IsViewBranch (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}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="view-file-tree-sidebar-bottom">
|
||||||
|
<div id="view-file-tree" class="center" data-api-base-url="{{.RepoLink}}" data-tree-path="{{$.TreePath}}">
|
||||||
|
{{svg "octicon-sync" 16 "job-status-rotate"}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import ViewFileTreeItem from './ViewFileTreeItem.vue';
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
files: any,
|
||||||
|
selectedItem: string,
|
||||||
|
loadChildren: any,
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="view-file-tree-items">
|
||||||
|
<!-- 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" :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,119 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import {SvgIcon} from '../svg.ts';
|
||||||
|
import {ref} from 'vue';
|
||||||
|
|
||||||
|
type Item = {
|
||||||
|
name: string;
|
||||||
|
path: string;
|
||||||
|
htmlUrl: string;
|
||||||
|
isFile: boolean;
|
||||||
|
children?: Item[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
item: Item,
|
||||||
|
loadChildren: any;
|
||||||
|
selectedItem?: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const collapsed = ref(!props.item.children);
|
||||||
|
const children = ref(props.item.children);
|
||||||
|
|
||||||
|
const doLoadChildren = async () => {
|
||||||
|
collapsed.value = !collapsed.value;
|
||||||
|
if (!collapsed.value && props.loadChildren) {
|
||||||
|
isLoading.value = true;
|
||||||
|
const _children = await props.loadChildren(props.item);
|
||||||
|
children.value = _children;
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const doLoadDirContent = () => {
|
||||||
|
doLoadChildren();
|
||||||
|
window.location.href = props.item.htmlUrl;
|
||||||
|
};
|
||||||
|
|
||||||
|
const doLoadFileContent = () => {
|
||||||
|
window.location.href = props.item.htmlUrl;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!--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"-->
|
||||||
|
<div
|
||||||
|
v-if="item.isFile" class="item-file"
|
||||||
|
:class="{'selected': selectedItem === item.path}"
|
||||||
|
:title="item.name"
|
||||||
|
@click.stop="doLoadFileContent"
|
||||||
|
>
|
||||||
|
<!-- file -->
|
||||||
|
<SvgIcon name="octicon-file"/>
|
||||||
|
<span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else class="item-directory"
|
||||||
|
:class="{'selected': selectedItem === item.path}"
|
||||||
|
:title="item.name"
|
||||||
|
@click.stop="doLoadDirContent"
|
||||||
|
>
|
||||||
|
<!-- directory -->
|
||||||
|
<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"/>
|
||||||
|
<SvgIcon class="text primary" :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"/>
|
||||||
|
<span class="gt-ellipsis">{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="children?.length" v-show="!collapsed" class="sub-items">
|
||||||
|
<ViewFileTreeItem v-for="childItem in children" :key="childItem.name" :item="childItem" :selected-item="selectedItem" :load-children="loadChildren"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
a, a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-items {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1px;
|
||||||
|
margin-left: 13px;
|
||||||
|
border-left: 1px solid var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-items .item-file {
|
||||||
|
padding-left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-directory.selected, .item-file.selected {
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-active);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-file.viewed {
|
||||||
|
color: var(--color-text-light-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-directory {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-file,
|
||||||
|
.item-directory {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25em;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-file:hover,
|
||||||
|
.item-directory:hover {
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-hover);
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
import {createApp} from 'vue';
|
||||||
|
import {toggleElem} from '../utils/dom.ts';
|
||||||
|
import {GET, PUT} from '../modules/fetch.ts';
|
||||||
|
import ViewFileTree from '../components/ViewFileTree.vue';
|
||||||
|
|
||||||
|
async function toggleSidebar(visibility) {
|
||||||
|
const sidebarEl = document.querySelector('.repo-view-file-tree-sidebar');
|
||||||
|
const showBtnEl = document.querySelector('.show-tree-sidebar-button');
|
||||||
|
const refSelectorEl = document.querySelector('.repo-home-filelist .js-branch-tag-selector');
|
||||||
|
const newPrBtnEl = document.querySelector('.repo-home-filelist #new-pull-request');
|
||||||
|
const addFileEl = document.querySelector('.repo-home-filelist .add-file-dropdown');
|
||||||
|
const containerClassList = sidebarEl.parentElement.classList;
|
||||||
|
containerClassList.toggle('repo-grid-tree-sidebar', visibility);
|
||||||
|
containerClassList.toggle('repo-grid-filelist-only', !visibility);
|
||||||
|
toggleElem(sidebarEl, visibility);
|
||||||
|
toggleElem(showBtnEl, !visibility);
|
||||||
|
toggleElem(refSelectorEl, !visibility);
|
||||||
|
toggleElem(newPrBtnEl, !visibility);
|
||||||
|
if (addFileEl) {
|
||||||
|
toggleElem(addFileEl, !visibility);
|
||||||
|
}
|
||||||
|
|
||||||
|
// save to session
|
||||||
|
await PUT('/repo/preferences', {
|
||||||
|
data: {
|
||||||
|
show_file_view_tree_sidebar: visibility,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadChildren(item?) {
|
||||||
|
const el = document.querySelector('#view-file-tree');
|
||||||
|
const apiBaseUrl = el.getAttribute('data-api-base-url');
|
||||||
|
const response = await GET(`${apiBaseUrl}/contents/${item ? item.path : ''}`);
|
||||||
|
const json = await response.json();
|
||||||
|
if (json instanceof Array) {
|
||||||
|
return json.map((i) => ({
|
||||||
|
name: i.name,
|
||||||
|
isFile: i.type === 'file',
|
||||||
|
htmlUrl: i.html_url,
|
||||||
|
path: i.path,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadRecursive(treePath) {
|
||||||
|
let root = null;
|
||||||
|
let parent = null;
|
||||||
|
let parentPath = '';
|
||||||
|
for (const i of (`/${treePath}`).split('/')) {
|
||||||
|
const path = `${parentPath}${parentPath ? '/' : ''}${i}`;
|
||||||
|
const result = await loadChildren({path});
|
||||||
|
if (root === null) {
|
||||||
|
root = result;
|
||||||
|
parent = root;
|
||||||
|
} else {
|
||||||
|
parent = parent.find((item) => item.path === path);
|
||||||
|
parent.children = result;
|
||||||
|
parent = result;
|
||||||
|
}
|
||||||
|
parentPath = path;
|
||||||
|
}
|
||||||
|
return root;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function initViewFileTreeSidebar() {
|
||||||
|
const sidebarElement = document.querySelector('.repo-view-file-tree-sidebar');
|
||||||
|
if (!sidebarElement) return;
|
||||||
|
|
||||||
|
document.querySelector('.show-tree-sidebar-button').addEventListener('click', () => {
|
||||||
|
toggleSidebar(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('.hide-tree-sidebar-button').addEventListener('click', () => {
|
||||||
|
toggleSidebar(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
const fileTree = document.querySelector('#view-file-tree');
|
||||||
|
const treePath = fileTree.getAttribute('data-tree-path');
|
||||||
|
|
||||||
|
const files = await loadRecursive(treePath);
|
||||||
|
|
||||||
|
fileTree.classList.remove('center');
|
||||||
|
const fileTreeView = createApp(ViewFileTree, {files, selectedItem: treePath, loadChildren});
|
||||||
|
fileTreeView.mount(fileTree);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue