[BUGFIX] directory-tree expand/collapse icon switching (#963)

Resolves #842

Author: linawolf

Documentation-rendertest/Directives/directoryTree.rst

@@ -30,6 +30,22 @@ Directory tree
 Directory tree with links
 =========================
 
+..  directory-tree::
+    :level: 2
+    :show-file-icons: true
+
+    *   :doc:`Directory tree </Directives/directoryTree#directory-tree>`
+
+        *   Layouts
+
+            *   :doc:`Directory tree </Directives/directoryTree#directory-tree>`
+            *   :doc:`Directory tree </Directives/directoryTree#directory-tree>`
+
+        *   Pages
+
+            *   :doc:`Directory tree </Directives/directoryTree#directory-tree>`
+            *   :doc:`Directory tree </Directives/directoryTree#directory-tree>`
+
 Directory structure of a typo3 extension
 ========================================
 

packages/typo3-docs-theme/assets/sass/components/_directoryTree.scss

@@ -1,6 +1,10 @@
 .directory-tree {
     ul {
         margin-bottom: 0;
+        padding-left: 0;
+        ul {
+            padding-left: 1.5em;
+        }
         list-style: none;
         li {
             margin-bottom: 0;
@@ -12,12 +16,12 @@
                         text-decoration: none;
                         .icon::before {
                             font-family: 'Font Awesome 6 Free';
-                            content: "\f0fe";
+                            content: "\f146";
                         }
 
                         &.collapsed {
                             .icon::before {
-                                content: "\f146";
+                                content: "\f0fe";
                             }
                         }
                     }
@@ -34,6 +38,7 @@
                         font-family: var(--bs-body-font-family);
                         line-height: var(--bs-body-line-height);
                         font-size: 1.1rem;
+                        padding: 0;
                         &::before {
                             width: 1.5em;
                             font-family: 'Font Awesome 6 Free';

packages/typo3-docs-theme/resources/public/css/theme.css

@@ -23998,8 +23998,12 @@ dl.command .command-arguments section {
 
 .directory-tree ul {
   margin-bottom: 0;
+  padding-left: 0;
   list-style: none;
 }
+.directory-tree ul ul {
+  padding-left: 1.5em;
+}
 .directory-tree ul li {
   margin-bottom: 0;
 }
@@ -24011,10 +24015,10 @@ dl.command .command-arguments section {
 }
 .directory-tree ul li .content .toggle a[data-bs-toggle=collapse] .icon::before {
   font-family: "Font Awesome 6 Free";
-  content: "\f0fe";
+  content: "\f146";
 }
 .directory-tree ul li .content .toggle a[data-bs-toggle=collapse].collapsed .icon::before {
-  content: "\f146";
+  content: "\f0fe";
 }
 .directory-tree ul li .content .no-toggle {
   width: 1.5em;
@@ -24027,6 +24031,7 @@ dl.command .command-arguments section {
   font-family: var(--bs-body-font-family);
   line-height: var(--bs-body-line-height);
   font-size: 1.1rem;
+  padding: 0;
 }
 .directory-tree ul li .content .label code.file::before, .directory-tree ul li .content .label code.path::before {
   width: 1.5em;