Add RTL direction (#2380)

microsoft · Jul 15, 2024 · 0854021 · 0854021
1 parent 61c2bcf
commit 0854021
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/Core/Components/Splitter/FluentMultiSplitter.razor.css b/src/Core/Components/Splitter/FluentMultiSplitter.razor.css
@@ -106,6 +106,10 @@
             content: '\025C0';            
         }
 
+        [dir="rtl"] .fluent-multi-splitter[orientation="horizontal"] ::deep > .fluent-multi-splitter-bar > span[part="collapse"]:before {
+            content: '\025B6';
+        }
+
         .fluent-multi-splitter[orientation="horizontal"] ::deep > .fluent-multi-splitter-bar > span[part="resize"] {
             height: 16px;
             margin: 2px 0;
@@ -115,6 +119,10 @@
             content: '\025B6';
         }
 
+        [dir="rtl"] .fluent-multi-splitter[orientation="horizontal"] ::deep > .fluent-multi-splitter-bar > span[part="expand"]:before {
+            content: '\025C0';
+        }
+
         .fluent-multi-splitter[orientation="horizontal"] ::deep > .fluent-multi-splitter-bar[status="resizable"]:hover {
             cursor: ew-resize;
         }

diff --git a/src/Core/Components/Splitter/FluentMultiSplitter.razor.js b/src/Core/Components/Splitter/FluentMultiSplitter.razor.js
@@ -101,13 +101,15 @@ export function startSplitterResize(
         mouseMoveHandler: function (e) {
             if (document.splitterData[el]) {
 
+                const rtl = window.getComputedStyle(pane)?.getPropertyValue('direction') === 'rtl' ? -1 : 1;
                 document.splitterData[el].moved = true;
 
                 var spacePerc = document.splitterData[el].panePerc + document.splitterData[el].paneNextPerc;
                 var spaceLength = document.splitterData[el].paneLength + document.splitterData[el].paneNextLength;
 
-                var length = (document.splitterData[el].paneLength -
-                    (document.splitterData[el].clientPos - (isHOrientation ? e.clientX : e.clientY)));
+                var length = isHOrientation
+                    ? document.splitterData[el].paneLength - (document.splitterData[el].clientPos - e.clientX) * rtl
+                    : document.splitterData[el].paneLength - (document.splitterData[el].clientPos - e.clientY);
 
                 if (length > spaceLength)
                     length = spaceLength;