From 27eff122357f5378be75d193c85c0fc7374feef8 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Wed, 2 Nov 2022 12:47:07 +0100
Subject: [PATCH] Fix various RTL issues (#2172)

* Fix RTL issues in deck browser

* Fix RTL issues in deck options

* Fix QMenu indicator being cutoff in RTL mode
---
 qt/aqt/data/web/css/deckbrowser.scss | 20 ++++++++++++++++++++
 qt/aqt/stylesheets.py                |  4 ++--
 ts/components/Switch.svelte          | 13 ++++++++++++-
 ts/components/TitledContainer.svelte | 14 +++++++++++++-
 ts/deck-options/ConfigInput.svelte   |  8 +++++++-
 ts/deck-options/SaveButton.svelte    |  8 ++++++--
 ts/deck-options/TabbedValue.svelte   |  2 +-
 7 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss
index ab956bd9b..c4afc9c42 100644
--- a/qt/aqt/data/web/css/deckbrowser.scss
+++ b/qt/aqt/data/web/css/deckbrowser.scss
@@ -58,6 +58,26 @@ tr:hover:not(.top-level-drag-row) {
         }
     }
 }
+[dir="rtl"] {
+    .current,
+    tr:hover:not(.top-level-drag-row) {
+        td {
+            background: color(canvas-inset);
+            &:first-child {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                border-top-right-radius: prop(border-radius-large);
+                border-bottom-right-radius: prop(border-radius-large);
+            }
+            &:last-child {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                border-top-left-radius: prop(border-radius-large);
+                border-bottom-left-radius: prop(border-radius-large);
+            }
+        }
+    }
+}
 
 .decktd {
     min-width: 15em;
diff --git a/qt/aqt/stylesheets.py b/qt/aqt/stylesheets.py
index e8efbd5a8..ffd0c5b8a 100644
--- a/qt/aqt/stylesheets.py
+++ b/qt/aqt/stylesheets.py
@@ -94,8 +94,8 @@ QMenu::separator {{
 }}
 QMenu::indicator {{
     border: 1px solid {tm.var(colors.BORDER)};
-    margin-left: 6px;
-    margin-right: -6px;
+    margin-{tm.left()}: 6px;
+    margin-{tm.right()}: -6px;
 }}
     """
 
diff --git a/ts/components/Switch.svelte b/ts/components/Switch.svelte
index 43fc1013a..c462469fd 100644
--- a/ts/components/Switch.svelte
+++ b/ts/components/Switch.svelte
@@ -8,9 +8,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string | undefined;
     export let value: boolean;
     export let disabled = false;
+
+    const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
 </script>
 
-<div class="form-check form-switch">
+<div class="form-check form-switch" class:rtl>
     <input
         {id}
         type="checkbox"
@@ -45,4 +47,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         background-color: var(--canvas-elevated);
         border-color: var(--border);
     }
+
+    .form-switch.rtl {
+        padding-left: 0;
+        padding-right: 0.5em;
+        .form-check-input {
+            margin-left: 0;
+            margin-right: 1.5em;
+        }
+    }
 </style>
diff --git a/ts/components/TitledContainer.svelte b/ts/components/TitledContainer.svelte
index 68eaa7edf..3a1fc43bf 100644
--- a/ts/components/TitledContainer.svelte
+++ b/ts/components/TitledContainer.svelte
@@ -5,6 +5,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { pageTheme } from "../sveltelib/theme";
 
+    const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
+
     export let id: string | undefined = undefined;
     let className: string = "";
     export { className as class };
@@ -17,12 +19,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class="container {className}"
     class:light={!$pageTheme.isDark}
     class:dark={$pageTheme.isDark}
+    class:rtl
     style:--gutter-block="2px"
     style:--container-margin="0"
 >
     <div class="position-relative">
         <h1>{title}</h1>
-        <div class="help-badge position-absolute"><slot name="tooltip" /></div>
+        <div class="help-badge position-absolute" class:rtl>
+            <slot name="tooltip" />
+        </div>
     </div>
     <slot />
 </div>
@@ -33,6 +38,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         width: 100%;
         border-radius: var(--border-radius-large, 10px);
         padding: 1rem 1.75rem 0.75rem 1.25rem;
+        &.rtl {
+            padding: 1rem 1.25rem 0.75rem 1.75rem;
+        }
         border: var(--border-subtle);
         &:hover,
         &:focus-within {
@@ -59,5 +67,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             transition: none;
             color: var(--fg);
         }
+        &.rtl {
+            right: unset;
+            left: 0;
+        }
     }
 </style>
diff --git a/ts/deck-options/ConfigInput.svelte b/ts/deck-options/ConfigInput.svelte
index df83ae49a..e74c3d2fa 100644
--- a/ts/deck-options/ConfigInput.svelte
+++ b/ts/deck-options/ConfigInput.svelte
@@ -3,6 +3,8 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
+
     export let grow = true;
     let width = 0;
 </script>
@@ -12,7 +14,7 @@
     class:flex-grow-1={grow}
     style:--offset="-{width}px"
 >
-    <div class="revert" bind:clientWidth={width}>
+    <div class="revert" class:rtl bind:clientWidth={width}>
         <slot name="revert" />
     </div>
     <slot />
@@ -23,6 +25,10 @@
         position: absolute;
         right: var(--offset);
         color: var(--fg-faint);
+        &.rtl {
+            right: unset;
+            left: var(--offset);
+        }
     }
     .config-input {
         &:hover,
diff --git a/ts/deck-options/SaveButton.svelte b/ts/deck-options/SaveButton.svelte
index 7165b1c31..a9ce7170c 100644
--- a/ts/deck-options/SaveButton.svelte
+++ b/ts/deck-options/SaveButton.svelte
@@ -18,6 +18,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { chevronDown } from "./icons";
     import type { DeckOptionsState } from "./lib";
 
+    const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
+
     const dispatch = createEventDispatcher();
 
     export let state: DeckOptionsState;
@@ -67,7 +69,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     primary
     on:click={() => save(false)}
     tooltip={getPlatformString(saveKeyCombination)}
-    --border-left-radius="var(--border-radius)"
+    --border-left-radius={!rtl ? "var(--border-radius)" : "0"}
+    --border-right-radius={rtl ? "var(--border-radius)" : "0"}
 >
     <div class="save">{tr.deckConfigSaveButton()}</div>
 </LabelButton>
@@ -83,7 +86,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         class="chevron"
         slot="reference"
         on:click={() => (showFloating = !showFloating)}
-        --border-right-radius="var(--border-radius)"
+        --border-right-radius={!rtl ? "var(--border-radius)" : "0"}
+        --border-left-radius={rtl ? "var(--border-radius)" : "0"}
         iconSize={80}
     >
         {@html chevronDown}
diff --git a/ts/deck-options/TabbedValue.svelte b/ts/deck-options/TabbedValue.svelte
index 687e24ad4..57d027654 100644
--- a/ts/deck-options/TabbedValue.svelte
+++ b/ts/deck-options/TabbedValue.svelte
@@ -56,7 +56,7 @@
         display: flex;
         flex-wrap: nowrap;
         justify-content: space-between;
-        padding-left: 0;
+        padding-inline: 0;
         margin-bottom: 0.25rem;
         list-style: none;
     }