smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

RTL updates (#2416)

Browse source 
* Update a bunch of icons to be mirrored in RTL

* Fix RTL layout issues in in zen mode and collaboration

* Small change to the shortcuts dialog to make isRTL unnecessary

* Tweaks to alignment in RTL
This commit is contained in:
Jed Fox 2020-11-25 18:21:33 -05:00 • committed by GitHub
parent fec48060f7
commit 8d479ab238
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 63 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/Actions.tsx
View file

@ -35,6 +35,8 @@ export const SelectedShapeActions = ({
const isEditing = Boolean(appState.editingElement);
const isMobile = useIsMobile();
const isRTL = document.documentElement.getAttribute("dir") === "rtl";
return (
<div className="panelColumn">
{renderAction("changeStrokeColor")}
@ -88,9 +90,23 @@ export const SelectedShapeActions = ({
<fieldset>
<legend>{t("labels.align")}</legend>
<div className="buttonList">
{renderAction("alignLeft")}
{renderAction("alignHorizontallyCentered")}
{renderAction("alignRight")}
{
// swap this order for RTL so the button positions always match their action
// (i.e. the leftmost button aligns left)
}
{isRTL ? (
<>
{renderAction("alignRight")}
{renderAction("alignHorizontallyCentered")}
{renderAction("alignLeft")}
</>
) : (
<>
{renderAction("alignLeft")}
{renderAction("alignHorizontallyCentered")}
{renderAction("alignRight")}
</>
)}
{targetElements.length > 2 &&
renderAction("distributeHorizontally")}
<div className="iconRow">