[FEATURE] Modernize tree rendering and implement RTL and dark mode

The SVG based renderer for the page, file and select trees has been replaced by a HTML based one. It uses reactive rendering based on lit's component model. Using HTML and CSS rendering offers more flexibility than SVG, so that RTL and dark mode support could now be implemented. Releases: main Resolves: #102125 Resolves: #103043 Resolves: #100467 Resolves: #98088 Resolves: #97346 Change-Id: Ic27b1d08c232d9074a734c80e222fb801672b967 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/81411 Reviewed-by: Benjamin Franzke <[email protected]> Tested-by: Andreas Kienast <[email protected]> Reviewed-by: Andreas Kienast <[email protected]> Tested-by: Frank Nägler <[email protected]> Reviewed-by: Frank Nägler <[email protected]> Tested-by: Benjamin Franzke <[email protected]> Tested-by: core-ci <[email protected]>
bmack · Feb 7, 2024 · 4f459c2 · 4f459c2
1 parent 48cd091
commit 4f459c2
Show file tree

Hide file tree

Showing 155 changed files with 4,691 additions and 5,201 deletions.
diff --git a/Build/Sources/Sass/backend.scss b/Build/Sources/Sass/backend.scss
@@ -34,7 +34,7 @@
 //
 @import "component/colorpicker";
 @import "component/datetimepicker";
-@import "component/svgtree";
+@import "component/tree";
 @import "component/elementbrowser";
 @import "component/table";
 @import "component/media";

diff --git a/Build/Sources/Sass/component/_resources.scss b/Build/Sources/Sass/component/_resources.scss
@@ -226,44 +226,3 @@
     inset-inline-end: calc(var(--resource-tile-spacing) / 2);
     top: calc(var(--resource-tile-spacing) / 2);
 }
-
-//
-// Resource Draginfo
-//
-.resource-dragpreview {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 999999;
-    display: inline-flex;
-    gap: calc(var(--typo3-spacing) / 2);
-    padding: calc(var(--typo3-spacing) / 2);
-    color: var(--typo3-component-color);
-    background: var(--typo3-component-bg);
-    border: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
-    border-radius: var(--typo3-component-border-radius);
-    box-shadow: var(--typo3-component-box-shadow);
-
-    img {
-        display: block;
-    }
-}
-
-.resource-dragpreview-counter {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 32px;
-    min-width: 32px;
-}
-
-.resource-dragpreview-thumbnails {
-    display: flex;
-    gap: 2px;
-
-    img {
-        height: 32px;
-        width: 32px;
-        background-color: #fff;
-    }
-}
diff --git a/Build/Sources/Sass/component/_root.scss b/Build/Sources/Sass/component/_root.scss
@@ -18,6 +18,8 @@
     --typo3-light-color: #{$body-color};
     --typo3-light-primary-color: #{$primary};
     --typo3-light-secondary-color: #{tint-color($body-color, 40%)};
+    --typo3-light-match-highlight-color: inherit;
+    --typo3-light-match-highlight-bg: rgba(234, 92, 0, .33);
     --typo3-light-bg: #{$white};
     --typo3-light-border-color: #{$gray-300};
     --typo3-light-link-color: #{$primary};
@@ -40,6 +42,8 @@
     --typo3-dark-color: #{$white};
     --typo3-dark-primary-color: #{tint-color($primary, 40%)};
     --typo3-dark-secondary-color: #{shade-color($white, 40%)};
+    --typo3-dark-match-highlight-color: inherit;
+    --typo3-dark-match-highlight-bg: rgba(234, 92, 0, .33);
     --typo3-dark-bg: #{$gray-900};
     --typo3-dark-border-color: #{$gray-800};
     --typo3-dark-link-color: #{tint-color($primary, 40%)};
@@ -62,6 +66,8 @@
     --typo3-component-color: var(--typo3-light-color);
     --typo3-component-primary-color: var(--typo3-light-primary-color);
     --typo3-component-secondary-color: var(--typo3-light-secondary-color);
+    --typo3-component-match-highlight-color: var(--typo3-light-match-highlight-color);
+    --typo3-component-match-highlight-bg: var(--typo3-light-match-highlight-bg);
     --typo3-component-bg: var(--typo3-light-bg);
     --typo3-component-link-color: var(--typo3-light-link-color);
     --typo3-component-link-hover-color: var(--typo3-light-link-hover-color);
@@ -128,7 +134,8 @@
     --typo3-component-color-scheme: var(--typo3-light-color-scheme);
     --typo3-component-color: var(--typo3-light-color);
     --typo3-component-primary-color: var(--typo3-light-primary-color);
-    --typo3-component-secondary-color: var(--typo3-light-secondary-color);
+    --typo3-component-match-highlight-color: var(--typo3-light-match-highlight-color);
+    --typo3-component-match-highlight-bg: var(--typo3-light-match-highlight-bg);
     --typo3-component-bg: var(--typo3-light-bg);
     --typo3-component-border-color: var(--typo3-light-border-color);
     --typo3-component-link-color: var(--typo3-light-link-color);
@@ -152,6 +159,8 @@
     --typo3-component-color: var(--typo3-dark-color);
     --typo3-component-primary-color: var(--typo3-dark-primary-color);
     --typo3-component-secondary-color: var(--typo3-dark-secondary-color);
+    --typo3-component-match-highlight-color: var(--typo3-dark-match-highlight-color);
+    --typo3-component-match-highlight-bg: var(--typo3-dark-match-highlight-bg);
     --typo3-component-bg: var(--typo3-dark-bg);
     --typo3-component-border-color: var(--typo3-dark-border-color);
     --typo3-component-link-color: var(--typo3-dark-link-color);