mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 21:42:30 -05:00
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:
parent
e93fc99e0f
commit
620dd6ae49
9 changed files with 150 additions and 27 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue