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
This commit is contained in:
chrisgarrity 2018-08-22 13:13:46 -04:00 committed by GitHub
parent e93fc99e0f
commit 620dd6ae49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 150 additions and 27 deletions

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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
}
)
}

View file

@ -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;
}

View file

@ -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 */

View file

@ -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 */

View file

@ -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;

View file

@ -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>