fix

Author: kerwin612

modules/fileicon/basic.go

@@ -10,6 +10,18 @@ import (
 	"code.gitea.io/gitea/modules/svg"
 )
 
+func BasicThemeFolderIconName(isOpen bool) string {
+	if isOpen {
+		return "octicon-file-directory-open-fill"
+	} else {
+		return "octicon-file-directory-fill"
+	}
+}
+
+func BasicThemeFolderIcon(isOpen bool) template.HTML {
+	return svg.RenderHTML(BasicThemeFolderIconName(isOpen))
+}
+
 func BasicThemeIcon(entry *git.TreeEntry) template.HTML {
 	svgName := "octicon-file"
 	switch {
@@ -19,7 +31,7 @@ func BasicThemeIcon(entry *git.TreeEntry) template.HTML {
 			svgName = "octicon-file-directory-symlink"
 		}
 	case entry.IsDir():
-		svgName = "octicon-file-directory-fill"
+		svgName = BasicThemeFolderIconName(false)
 	case entry.IsSubModule():
 		svgName = "octicon-file-submodule"
 	}

modules/fileicon/material.go

@@ -85,6 +85,10 @@ func (m *MaterialIconProvider) renderFileIconSVG(ctx reqctx.RequestContext, name
 	return template.HTML(svg)
 }
 
+func (m *MaterialIconProvider) FolderIcon(ctx reqctx.RequestContext, isOpen bool) template.HTML {
+	return svg.RenderHTML("material-folder-generic", 16, BasicThemeFolderIconName(isOpen))
+}
+
 func (m *MaterialIconProvider) FileIcon(ctx reqctx.RequestContext, entry *git.TreeEntry) template.HTML {
 	if m.rules == nil {
 		return BasicThemeIcon(entry)
@@ -102,14 +106,14 @@ func (m *MaterialIconProvider) FileIcon(ctx reqctx.RequestContext, entry *git.Tr
 	if name == "folder" {
 		// the material icon pack's "folder" icon doesn't look good, so use our built-in one
 		// keep the old "octicon-xxx" class name to make some "theme plugin selector" could still work
-		return svg.RenderHTML("material-folder-generic", 16, "octicon-file-directory-fill")
+		return m.FolderIcon(ctx, false)
 	}
 	if iconSVG, ok := m.svgs[name]; ok && iconSVG != "" {
 		// keep the old "octicon-xxx" class name to make some "theme plugin selector" could still work
 		extraClass := "octicon-file"
 		switch {
 		case entry.IsDir():
-			extraClass = "octicon-file-directory-fill"
+			extraClass = BasicThemeFolderIconName(false)
 		case entry.IsSubModule():
 			extraClass = "octicon-file-submodule"
 		}

modules/templates/util_render.go

@@ -181,6 +181,13 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML {
 		textColor, itemColor, itemHTML)
 }
 
+func (ut *RenderUtils) RenderFolderIcon(isOpen bool) template.HTML {
+	if setting.UI.FileIconTheme == "material" {
+		return fileicon.DefaultMaterialIconProvider().FolderIcon(ut.ctx, isOpen)
+	}
+	return fileicon.BasicThemeFolderIcon(isOpen)
+}
+
 func (ut *RenderUtils) RenderFileIcon(entry *git.TreeEntry) template.HTML {
 	if setting.UI.FileIconTheme == "material" {
 		return fileicon.DefaultMaterialIconProvider().FileIcon(ut.ctx, entry)

templates/admin/repo/unadopted.tmpl

@@ -21,7 +21,7 @@
 					<div class="ui aligned divided list">
 						{{range $dirI, $dir := .Dirs}}
 							<div class="item tw-flex tw-items-center">
-								<span class="tw-flex-1"> {{svg "octicon-file-directory-fill"}} {{$dir}}</span>
+								<span class="tw-flex-1"> {{ctx.RenderUtils.RenderFolderIcon false}} {{$dir}}</span>
 								<div>
 									<button class="ui button primary show-modal tw-p-2" data-modal="#adopt-unadopted-modal-{{$dirI}}">{{svg "octicon-plus"}} {{ctx.Locale.Tr "repo.adopt_preexisting_label"}}</button>
 									<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">

templates/repo/diff/box.tmpl

@@ -15,6 +15,8 @@
 					const diffTreeIcon = `.octicon-sidebar-${diffTreeVisible ? 'expand' : 'collapse'}`;
 					diffTreeBtn.querySelector(diffTreeIcon).classList.remove('tw-hidden');
 					diffTreeBtn.setAttribute('data-tooltip-content', diffTreeBtn.getAttribute(diffTreeVisible ? 'data-hide-text' : 'data-show-text'));
+					window.config.pageData.folderIcon = {{ctx.RenderUtils.RenderFolderIcon false}};
+					window.config.pageData.openFolderIcon = {{ctx.RenderUtils.RenderFolderIcon true}};
 				</script>
 			{{end}}
 			{{if not .DiffNotAvailable}}

templates/repo/view.tmpl

@@ -1,4 +1,8 @@
 {{template "base/head" .}}
+<script type="module">
+window.config.pageData.folderIcon = {{ctx.RenderUtils.RenderFolderIcon false}};
+window.config.pageData.openFolderIcon = {{ctx.RenderUtils.RenderFolderIcon true}};
+</script>
 <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}}">

templates/repo/view_list.tmpl

@@ -6,7 +6,7 @@
 	</div>
 	{{if .HasParentPath}}
 	<a class="repo-file-line parent-link silenced" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">
-		{{svg "octicon-file-directory-fill"}} ..
+		{{ctx.RenderUtils.RenderFolderIcon false}} ..
 	</a>
 	{{end}}
 	{{range $item := .Files}}

templates/user/settings/repos.tmpl

@@ -30,7 +30,7 @@
 											<span><a href="{{$repo.BaseRepo.Link}}">{{$repo.BaseRepo.OwnerName}}/{{$repo.BaseRepo.Name}}</a></span>
 										{{end}}
 									{{else}}
-										<span class="icon tw-inline-block tw-pt-2">{{svg "octicon-file-directory-fill"}}</span>
+										<span class="icon tw-inline-block tw-pt-2">{{ctx.RenderUtils.RenderFolderIcon false}}</span>
 										<span class="name tw-inline-block tw-pt-2">{{$.ContextUser.Name}}/{{$dir}}</span>
 										<div class="tw-float-right">
 											{{if $.allowAdopt}}

web_src/js/components/DiffFileTreeItem.vue

@@ -8,6 +8,7 @@ defineProps<{
   item: Item,
 }>();
 
+const {pageData} = window.config;
 const store = diffTreeStore();
 const collapsed = ref(false);
 
@@ -44,10 +45,8 @@ function getIconForDiffStatus(pType: FileStatus) {
     <div class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
       <!-- directory -->
       <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
-      <SvgIcon
-        class="text primary"
-        :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"
-      />
+      <span v-if="collapsed" class="item-icon" v-html="pageData.folderIcon"/>
+      <span v-else class="item-icon" v-html="pageData.openFolderIcon"/>
       <span class="gt-ellipsis">{{ item.name }}</span>
     </div>
 
@@ -89,6 +88,10 @@ a:hover {
   user-select: none;
 }
 
+.item-directory .item-icon {
+  display: contents;
+}
+
 .item-file,
 .item-directory {
   display: flex;

web_src/js/components/ViewFileTreeItem.vue

@@ -11,6 +11,8 @@ type Item = {
   children?: Item[];
 };
 
+const {pageData} = window.config;
+
 const props = defineProps<{
   item: Item,
   navigateViewContent:(treePath: string) => void,
@@ -83,7 +85,8 @@ onMounted(async () => {
       <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop="doLoadChildren"/>
     </div>
     <div class="item-content">
-      <SvgIcon v-if="isDirectory" class="text primary" :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"/>
+      <span v-if="isDirectory && collapsed" class="item-icon" v-html="pageData.folderIcon"/>
+      <span v-else-if="isDirectory && !collapsed" class="item-icon" v-html="pageData.openFolderIcon"/>
       <span v-else class="item-icon" v-html="item.fileIcon"/>
       <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
     </div>