Mirror margins, borders and arrow icons for RTL (#616)

* Mirror margins, borders and arrow icons for RTL

This handles everything exception the color picker.

I verified that things like the paint brush and magnifying glass should not be mirrored (even people who read Hebrew are usually right-handed)

* Fix dropdown icon padding in RTL

src/components/color-button/color-button.css

@@ -12,10 +12,18 @@
     flex-shrink: 0;
     height: 100%;
     border: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+[dir="ltr"] .color-button-swatch {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
 }
 
+[dir="rtl"] .color-button-swatch {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
 .color-button-arrow {
     display: flex;
     user-select: none;
@@ -24,10 +32,7 @@
     flex-shrink: 0;
     height: 100%;
 
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.25);
-    border-left: none;
 
     align-items: center;
     justify-content: center;
@@ -35,6 +40,18 @@
     font-size: 0.75rem;
 }
 
+[dir="ltr"] .color-button-arrow {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-left: none;
+}
+
+[dir="rtl"] .color-button-arrow {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-right: none;
+}
+
 .swatch-icon {
     width: 1.75rem;
     margin: auto;

src/components/dropdown/dropdown.css

@@ -18,11 +18,18 @@ $arrow-border-width: 14px;
 .dropdown-icon {
     width: .5rem;
     height: .5rem;
-    margin-left: .5rem;
     vertical-align: middle;
     padding-bottom: .2rem;
 }
 
+[dir="ltr"] .dropdown-icon {
+    margin-left: .5rem;
+}
+
+[dir="rtl"] .dropdown-icon {
+    margin-right: .5rem;
+}
+
 .mod-caret-up {
     transform: rotate(180deg);
     padding-bottom: 0;

src/components/fixed-tools/fixed-tools.css

@@ -11,11 +11,16 @@
     width: 8rem;
 }
 
-.mod-dashed-border {
+[dir="ltr"] .mod-dashed-border {
     border-right: 1px dashed $ui-pane-border;
     padding-right: calc(2 * $grid-unit);
 }
 
+[dir="rtl"] .mod-dashed-border {
+    border-left: 1px dashed $ui-pane-border;
+    padding-left: calc(2 * $grid-unit);
+}
+
 .mod-unselect {
     user-select: none;
 }
@@ -26,35 +31,65 @@ $border-radius: 0.25rem;
     display: inline-block;
     border: 1px solid $ui-pane-border;
     border-radius: 0;
-    border-left: none;
     padding: .35rem;
 }
 
-.button-group-button:last-of-type {
+[dir="ltr"] .button-group-button {
+    border-left: none;
+}
+
+[dir="rtl"] .button-group-button {
+    border-right: none;
+}
+
+[dir="ltr"] .button-group-button:last-of-type {
     border-top-right-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
 }
 
-.button-group-button:first-of-type {
+[dir="ltr"] .button-group-button:first-of-type {
     border-left: 1px solid $ui-pane-border;
     border-top-left-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
 }
 
-.button-group-button.mod-left-border {
+[dir="rtl"] .button-group-button:last-of-type {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+}
+
+[dir="rtl"] .button-group-button:first-of-type {
+    border-right: 1px solid $ui-pane-border;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+}
+
+[dir="ltr"] .button-group-button.mod-start-border {
     border-left: 1px solid $ui-pane-border;
 }
 
-.button-group-button.mod-no-right-border {
+[dir="rtl"] .button-group-button.mod-start-border {
+    border-right: 1px solid $ui-pane-border;
+}
+
+[dir="ltr"] .button-group-button.mod-no-end-border {
     border-right: none;
 }
 
+[dir="rtl"] .button-group-button.mod-no-end-border {
+    border-left: none;
+}
+
 .button-group-button-icon {
     width: 1.25rem;
     height: 1.25rem;
     vertical-align: middle;
 }
 
+[dir="rtl"] .button-group-button-icon {
+    transform: scaleX(-1);
+}
+
 .mod-context-menu {
     display: flex;
     flex-direction: column;

src/components/fixed-tools/fixed-tools.jsx

@@ -121,7 +121,7 @@ const FixedToolsComponent = props => {
                             classNames(
                                 styles.buttonGroupButton,
                                 {
-                                    [styles.modNoRightBorder]: !redoDisabled
+                                    [styles.modNoEndBorder]: !redoDisabled
                                 }
                             )
                         }
@@ -130,7 +130,10 @@ const FixedToolsComponent = props => {
                     >
                         <img
                             alt={props.intl.formatMessage(messages.undo)}
-                            className={styles.buttonGroupButtonIcon}
+                            className={classNames(
+                                styles.buttonGroupButtonIcon,
+                                styles.undoIcon
+                            )}
                             draggable={false}
                             src={undoIcon}
                         />
@@ -140,7 +143,7 @@ const FixedToolsComponent = props => {
                             classNames(
                                 styles.buttonGroupButton,
                                 {
-                                    [styles.modLeftBorder]: !redoDisabled
+                                    [styles.modStartBorder]: !redoDisabled
                                 }
                             )
                         }

src/components/forms/label.css

@@ -13,11 +13,18 @@ See https://github.com/LLK/scratch-paint/issues/13 */
 
 .input-label, .input-label-secondary {
     font-size: 0.625rem;
-    margin-right: calc(2 * $grid-unit);
     user-select: none;
     cursor: default;
 }
 
+[dir="ltr"] .input-label, [dir="ltr"] .input-label-secondary{
+    margin-right: calc(2 * $grid-unit);
+}
+
+[dir="rtl"] .input-label, [dir="ltr"] .input-label-secondary{
+    margin-left: calc(2 * $grid-unit);
+}
+
 .input-label {
     font-weight: bold;
 }

src/components/input-group/input-group.css

@@ -1,9 +1,13 @@
 @import '../../css/units.css';
 
-.input-group + .input-group {
+[dir="ltr"] .input-group + .input-group {
     margin-left: calc(2 * $grid-unit);
 }
 
+[dir="rtl"] .input-group + .input-group {
+    margin-right: calc(2 * $grid-unit);
+}
+
 .disabled {
     opacity: 0.3;
     /* Prevent any user actions */

src/components/mode-tools/mode-tools.css

@@ -13,11 +13,16 @@
     height: 2rem;
 }
 
-.mod-dashed-border {
+[dir="ltr"] .mod-dashed-border {
     border-right: 1px dashed $ui-pane-border;
     padding-right: calc(3 * $grid-unit);
 }
 
+[dir="rtl"] .mod-dashed-border {
+    border-left: 1px dashed $ui-pane-border;
+    padding-left: calc(3 * $grid-unit);
+}
+
 .mod-labeled-icon-height {
     display: flex;
     height: 2.85rem; /* for the second row so the dashed borders are equal in size */

src/components/paint-editor/paint-editor.css

@@ -28,11 +28,15 @@
     margin-top: calc(2 * $grid-unit);
 }
 
-.mod-dashed-border {
+[dir="ltr"] .mod-dashed-border {
     border-right: 1px dashed $ui-pane-border;
     padding-right: calc(2 * $grid-unit);
 }
 
+[dir="rtl"] .mod-dashed-border {
+    border-left: 1px dashed $ui-pane-border;
+    padding-left: calc(2 * $grid-unit);
+}
 .mod-labeled-icon-height {
     height: 2.85rem; /* for the second row so the dashed borders are equal in size */
 }
@@ -43,29 +47,55 @@ $border-radius: 0.25rem;
     display: inline-block;
     border: 1px solid $ui-pane-border;
     border-radius: 0;
-    border-left: none;
     padding: .35rem;
 }
 
-.button-group-button:last-of-type {
+[dir="ltr"] .button-group-button {
+    border-left: none;
+}
+
+[dir="rtl"] .button-group-button {
+    border-right: none;
+}
+
+[dir="ltr"] .button-group-button:last-of-type {
     border-top-right-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
 }
 
-.button-group-button:first-of-type {
+[dir="ltr"] .button-group-button:first-of-type {
     border-left: 1px solid $ui-pane-border;
     border-top-left-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
 }
 
-.button-group-button.mod-left-border {
+[dir="rtl"] .button-group-button:last-of-type {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+}
+
+[dir="rtl"] .button-group-button:first-of-type {
+    border-right: 1px solid $ui-pane-border;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+}
+
+[dir="ltr"] .button-group-button.mod-start-border {
     border-left: 1px solid $ui-pane-border;
 }
 
-.button-group-button.mod-no-right-border {
+[dir="rtl"] .button-group-button.mod-start-border {
+    border-right: 1px solid $ui-pane-border;
+}
+
+[dir="ltr"].button-group-button.mod-no-end-border {
     border-right: none;
 }
 
+[dir="rtl"].button-group-button.mod-no-end-border {
+    border-left: none;
+}
+
 .button-group-button-icon {
     width: 1.25rem;
     height: 1.25rem;
@@ -76,10 +106,14 @@ $border-radius: 0.25rem;
     margin-left: calc(2 * $grid-unit);
 }
 
-.mod-margin-right {
+[dir="ltr"] .mod-margin-after {
     margin-right: calc(2 * $grid-unit);
 }
 
+[dir="rtl"] .mod-margin-after {
+    margin-left: calc(2 * $grid-unit);
+}
+
 .canvas-container {
     width: 480px;
     height: 360px;
@@ -92,7 +126,6 @@ $border-radius: 0.25rem;
 
 .mode-selector {
     display: flex;
-    margin-right: calc(2 * $grid-unit);
     max-width: 6rem;
     flex-direction: row;
     flex-wrap: wrap;
@@ -101,6 +134,14 @@ $border-radius: 0.25rem;
     justify-content: space-between;
 }
 
+[dir="ltr"] .mode-selector {
+    margin-right: calc(2 * $grid-unit);
+}
+
+[dir="rtl"] .mode-selector {
+    margin-left: calc(2 * $grid-unit);
+}
+
 .hidden {
     display: none;
 }
@@ -137,10 +178,14 @@ $border-radius: 0.25rem;
     justify-content: center;
 }
 
-.bitmap-button-icon {
+[dir="ltr"] .bitmap-button-icon {
     margin-right: calc(2 * $grid-unit);
 }
 
+[dir="rtl"] .bitmap-button-icon {
+    margin-left: calc(2 * $grid-unit);
+}
+
 @media only screen and (max-width: $full-size-paint) {
     .editor-container {
         padding: calc(3 * $grid-unit) $grid-unit;

src/components/paint-editor/paint-editor.jsx

@@ -90,7 +90,7 @@ const PaintEditorComponent = props => (
                         >
                             {/* fill */}
                             <FillColorIndicatorComponent
-                                className={styles.modMarginRight}
+                                className={styles.modMarginAfter}
                                 onUpdateImage={props.onUpdateImage}
                             />
                             {/* stroke */}
@@ -119,7 +119,7 @@ const PaintEditorComponent = props => (
                             >
                                 {/* fill */}
                                 <FillColorIndicatorComponent
-                                    className={styles.modMarginRight}
+                                    className={styles.modMarginAfter}
                                     onUpdateImage={props.onUpdateImage}
                                 />
                             </InputGroup>