Proper RTL support (#1154)

* Add RTL styles. Most of the work is done by the browser 💖

* Refactor getLanguage

* Additional fixes

* Mirror the mouse pointer icon

* Move the vertical scrollbar to the left on RTL

* Revert "Mirror the mouse pointer icon"

This reverts commit f69b132538.
This commit is contained in:
Jed Fox 2020-04-02 12:21:19 -04:00 committed by GitHub
parent 45e4949da0
commit 663526129a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 157 additions and 94 deletions

View file

@ -3,6 +3,7 @@ import { getCommonBounds } from "../element";
import { FlooredNumber } from "../types";
import { ScrollBars } from "./types";
import { getGlobalCSSVariable } from "../utils";
import { getLanguage } from "../i18n";
export const SCROLLBAR_MARGIN = 4;
export const SCROLLBAR_WIDTH = 6;
@ -44,6 +45,8 @@ export function getScrollBars(
right: parseInt(getGlobalCSSVariable("sar")),
};
const isRTL = getLanguage().rtl;
// The viewport is the rectangle currently visible for the user
const viewportMinX = -scrollX + viewportWidthDiff / 2 + safeArea.left;
const viewportMinY = -scrollY + viewportHeightDiff / 2 + safeArea.top;
@ -81,10 +84,11 @@ export function getScrollBars(
viewportMinY === sceneMinY && viewportMaxY === sceneMaxY
? null
: {
x:
viewportWidth -
SCROLLBAR_WIDTH -
Math.max(safeArea.right, SCROLLBAR_MARGIN),
x: isRTL
? Math.max(safeArea.left, SCROLLBAR_MARGIN)
: viewportWidth -
SCROLLBAR_WIDTH -
Math.max(safeArea.right, SCROLLBAR_MARGIN),
y:
((viewportMinY - sceneMinY) / (sceneMaxY - sceneMinY)) *
viewportHeight +