Optimize File Icons in file-tree to Match Those in file-list

Author: kerwin612

services/repository/files/tree.go

@@ -6,6 +6,7 @@ package files
 import (
 	"context"
 	"fmt"
+	"html/template"
 	"net/url"
 	"path"
 	"sort"
@@ -14,8 +15,10 @@ import (
 	repo_model "code.gitea.io/gitea/models/repo"
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/modules/log"
+	"code.gitea.io/gitea/modules/reqctx"
 	"code.gitea.io/gitea/modules/setting"
 	api "code.gitea.io/gitea/modules/structs"
+	"code.gitea.io/gitea/modules/templates"
 	"code.gitea.io/gitea/modules/util"
 )
 
@@ -142,6 +145,7 @@ func entryModeString(entryMode git.EntryMode) string {
 type TreeViewNode struct {
 	EntryName    string          `json:"entryName"`
 	EntryMode    string          `json:"entryMode"`
+	FileIcon     template.HTML   `json:"fileIcon"`
 	FullPath     string          `json:"fullPath"`
 	SubmoduleURL string          `json:"submoduleUrl,omitempty"`
 	Children     []*TreeViewNode `json:"children,omitempty"`
@@ -155,6 +159,7 @@ func newTreeViewNodeFromEntry(ctx context.Context, commit *git.Commit, parentDir
 	node := &TreeViewNode{
 		EntryName: entry.Name(),
 		EntryMode: entryModeString(entry.Mode()),
+		FileIcon:  templates.NewRenderUtils(reqctx.FromContext(ctx)).RenderFileIcon(entry),
 		FullPath:  path.Join(parentDir, entry.Name()),
 	}
 

web_src/js/components/ViewFileTreeItem.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
-import {ref} from 'vue';
+import {onMounted, ref} from 'vue';
 
 type Item = {
   entryName: string;
   entryMode: string;
+  fileIcon: string;
   fullPath: string;
   submoduleUrl?: string;
   children?: Item[];
@@ -17,9 +18,15 @@ const props = defineProps<{
   selectedItem?: string,
 }>();
 
+const elRoot = ref<HTMLElement | null>(null);
 const isLoading = ref(false);
 const children = ref(props.item.children);
 const collapsed = ref(!props.item.children);
+const isDirectory = ref(!(
+  props.item.entryMode === 'commit' ||
+  props.item.entryMode === 'symlink' ||
+  props.item.entryMode !== 'tree'
+));
 
 const doLoadChildren = async () => {
   collapsed.value = !collapsed.value;
@@ -45,59 +52,40 @@ const doLoadFileContent = () => {
 const doGotoSubModule = () => {
   location.href = props.item.submoduleUrl;
 };
+
+const doItemAction = () => {
+  if (props.item.entryMode === 'symlink' || props.item.entryMode === 'tree') {
+    doLoadFileContent();
+  } else if (props.item.entryMode === 'commit') {
+    doGotoSubModule();
+  } else {
+    doLoadDirContent();
+  }
+};
+
+onMounted(async () => {
+  elRoot.value.querySelector('.item-icon svg')?.classList?.add('preview-square');
+});
 </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}"
+    ref="elRoot"
+    class="tree-item"
+    :class="{'selected': selectedItem === item.fullPath, 'type-directory': isDirectory}"
     :title="item.entryName"
-    @click.stop="doLoadDirContent"
+    @click.stop="doItemAction"
   >
-    <!-- directory -->
-    <div class="item-toggle">
+    <div v-if="isDirectory" class="item-toggle">
+      <!-- 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"/>
     </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>
+      <SvgIcon v-if="isDirectory" class="text primary" :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"/>
+      <span v-else class="item-icon" v-html="item.fileIcon"/>
+      <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>
   </div>
 
@@ -153,4 +141,8 @@ const doGotoSubModule = () => {
   text-overflow: ellipsis;
   min-width: 0;
 }
+
+.item-content .item-icon {
+  display: contents;
+}
 </style>