Add repo file tree item link behavior

web_src/js/components/ViewFileTree.vue

@@ -38,12 +38,16 @@ async function loadViewContent(url: string) {
 }
 
 async function navigateTreeView(treePath: string) {
-  const url = `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
+  const url = getWebUrl(treePath);
   window.history.pushState({treePath, url}, null, url);
   selectedItem.value = treePath;
   await loadViewContent(url);
 }
 
+function getWebUrl(treePath: string) {
+  return `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
+}
+
 onMounted(async () => {
   selectedItem.value = props.treePath;
   files.value = await loadChildren('', props.treePath);
@@ -58,7 +62,7 @@ onMounted(async () => {
 <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"/>
+    <ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :get-web-url="getWebUrl" :navigate-view-content="navigateTreeView" :load-children="loadChildren"/>
   </div>
 </template>
 

web_src/js/components/ViewFileTreeItem.vue

@@ -16,14 +16,19 @@ const props = defineProps<{
   item: Item,
   navigateViewContent:(treePath: string) => void,
   loadChildren:(treePath: string, subPath?: string) => Promise<Item[]>,
+  getWebUrl:(treePath: string) => string,
   selectedItem?: string,
 }>();
 
 const isLoading = ref(false);
 const children = ref(props.item.children);
 const collapsed = ref(!props.item.children);
 
-const doLoadChildren = async () => {
+const doLoadChildren = async (e?: MouseEvent) => {
+  // the event is only not undefined if the user explicitly clicked on the directory item toggle. the preventDefault
+  // stops the event from bubbling up and causing a directory content load
+  e?.preventDefault();
+
   collapsed.value = !collapsed.value;
   if (!collapsed.value && props.loadChildren) {
     isLoading.value = true;
@@ -35,38 +40,42 @@ const doLoadChildren = async () => {
   }
 };
 
-const doLoadDirContent = () => {
+const doLoadDirContent = (e: MouseEvent) => {
+  // only load the directory content without a window refresh if the user didn't press any special key
+  if (e.button !== 0 || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+  e.preventDefault();
+
   doLoadChildren();
   props.navigateViewContent(props.item.fullPath);
 };
 
-const doLoadFileContent = () => {
-  props.navigateViewContent(props.item.fullPath);
-};
+const doLoadFileContent = (e: MouseEvent) => {
+  if (e.button !== 0 || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+  e.preventDefault();
 
-const doGotoSubModule = () => {
-  location.href = props.item.submoduleUrl;
+  props.navigateViewContent(props.item.fullPath);
 };
 </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
+  <a
     v-if="item.entryMode === 'commit'" class="tree-item type-submodule"
     :title="item.entryName"
-    @click.stop="doGotoSubModule"
+    :href="getWebUrl(item.fullPath)"
   >
     <!-- submodule -->
     <div class="item-content">
       <!-- eslint-disable-next-line vue/no-v-html -->
       <span class="tw-contents" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
-  </div>
-  <div
+  </a>
+  <a
     v-else-if="item.entryMode === 'symlink'" class="tree-item type-symlink"
     :class="{'selected': selectedItem === item.fullPath}"
     :title="item.entryName"
+    :href="getWebUrl(item.fullPath)"
     @click.stop="doLoadFileContent"
   >
     <!-- symlink -->
@@ -75,11 +84,12 @@ const doGotoSubModule = () => {
       <span class="tw-contents" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
-  </div>
-  <div
+  </a>
+  <a
     v-else-if="item.entryMode !== 'tree'" class="tree-item type-file"
     :class="{'selected': selectedItem === item.fullPath}"
     :title="item.entryName"
+    :href="getWebUrl(item.fullPath)"
     @click.stop="doLoadFileContent"
   >
     <!-- file -->
@@ -88,11 +98,12 @@ const doGotoSubModule = () => {
       <span class="tw-contents" v-html="item.entryIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
-  </div>
-  <div
+  </a>
+  <a
     v-else class="tree-item type-directory"
     :class="{'selected': selectedItem === item.fullPath}"
     :title="item.entryName"
+    :href="getWebUrl(item.fullPath)"
     @click.stop="doLoadDirContent"
   >
     <!-- directory -->
@@ -105,10 +116,10 @@ const doGotoSubModule = () => {
       <span class="tw-contents" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
       <span class="gt-ellipsis">{{ item.entryName }}</span>
     </div>
-  </div>
+  </a>
 
   <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"/>
+    <ViewFileTreeItem v-for="childItem in children" :key="childItem.entryName" :item="childItem" :selected-item="selectedItem" :get-web-url="getWebUrl" :navigate-view-content="navigateViewContent" :load-children="loadChildren"/>
   </div>
 </template>
 <style scoped>
@@ -131,6 +142,8 @@ const doGotoSubModule = () => {
 }
 
 .tree-item {
+  color: inherit;
+  text-decoration: inherit;
   display: grid;
   grid-template-columns: 16px 1fr;
   grid-template-areas: "toggle content";