Implement horizontal directionality coefficient to fix translate work…

…ing in wrong x-direction for rtl languages
kommunarr · Aug 29, 2023 · 8bb1311 · 8bb1311
1 parent 9ab694e
commit 8bb1311
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 44 deletions.
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
@@ -1,7 +1,7 @@
 .toast-holder {
   position: fixed;
   inset-inline-start: 50vw;
-  transform: translate(-50%, 0);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
   inset-block-end: 50px;
   z-index: 1;
   display: flex;

diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -66,7 +66,7 @@
 
     .switch-input:checked + & {
       background-color: var(--accent-color);
-      transform: translate(80%, -50%);
+      transform: translate(calc(80% * var(--horizontal-directionality-coefficient)), -50%);
     }
 
     .switch-input:disabled + & {

diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -19,8 +19,8 @@
 .button:hover + .text.bottom-left,
 .button:focus + .text.top,
 .button:hover + .text.top {
-  -webkit-transform: translate(-50%, 0);
-  transform: translate(-50%, 0);
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
 }
 
 .button:focus + .text.left,
@@ -41,7 +41,8 @@
   max-width: max-content;
   min-width: 15em;
   opacity: 0;
-  padding: 10px 8px;
+  padding-block: 10px;
+  padding-inline: 8px;
   pointer-events: none;
   position: absolute;
   text-align: center;
@@ -52,55 +53,43 @@
 }
 
 .text.bottom {
-  margin-top: 1em;
-  top: 100%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -1em);
-  transform: translate(-50%, -1em);
-}
-
-body[dir='ltr'] .text.bottom-left,
-body[dir='rtl'] .text.bottom-right {
-  margin-top: 1em;
-  top: 100%;
-  left: -100px;
-  -webkit-transform: translate(-50%, -1em);
-  transform: translate(-50%, -1em);
+  margin-block-start: 1em;
+  inset-block-start: 100%;
+  inset-inline-start: 50%;
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
-body[dir='ltr'] .text.bottom-right,
-body[dir='rtl'] .text.bottom-left {
-  margin-top: 1em;
-  top: 100%;
-  left: 110px;
+.text.bottom-left {
+  margin-block-start: 1em;
+  inset-block-start: 100%;
+  inset-inline-start: -100px;
   -webkit-transform: translate(-50%, -1em);
-  transform: translate(50%, -1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
 }
 
-body[dir='ltr'] .text.left,
-body[dir='rtl'] .text.right {
-  margin-right:1em;
-  right: 100%;
-  top: 50%;
-  -webkit-transform: translate(1em, -50%);
-  transform: translate(1em, -50%);
+.text.left {
+  margin-inline-end:1em;
+  inset-inline-end: 100%;
+  inset-block-start: 50%;
+  -webkit-transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
+  transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
-body[dir='ltr'] .text.right,
-body[dir='rtl'] .text.left {
-  left: 100%;
-  margin-left: 1em;
-  top: 50%;
-  -webkit-transform: translate(-1em, -50%);
-  transform: translate(-1em, -50%);
+.text.right {
+  inset-inline-start: 100%;
+  margin-inline-start: 1em;
+  inset-block-start: 50%;
+  -webkit-transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
+  transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
 }
 
 .text.top {
-  bottom: 100%;
-  left: 50%;
-  margin-bottom: 1em;
-  -webkit-transform: translate(-50%, 1em);
-  transform: translate(-50%, 1em);
+  inset-block-end: 100%;
+  inset-inline-start: 50%;
+  margin-block-end: 1em;
+  -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
 }
 
 .tooltip {

diff --git a/src/renderer/themes.css b/src/renderer/themes.css
@@ -905,12 +905,14 @@
 
 body[dir='ltr'] {
   --ltr-or-rtl: ltr;
+  --horizontal-directionality-coefficient: 1;
   --float-left-ltr-rtl-value: left;
   --float-right-ltr-rtl-value: right;
 }
 
 body[dir='rtl'] {
   --ltr-or-rtl: rtl;
+  --horizontal-directionality-coefficient: -1;
   --float-left-ltr-rtl-value: right;
   --float-right-ltr-rtl-value: left;
 }