fix(gui): rtl support for delete-confirmation-prompt

This commit adds RTL (Right-to-Left) support for the delete-confirmation-prompt.
In RTL languages, when multiple sprites are opened, the delete section of the
confirmation prompt extended beyond the window boundary. This update fixes the
layout so it displays correctly in RTL as well as LTR.

Author: pishi.ai

packages/scratch-gui/src/components/delete-confirmation-prompt/delete-confirmation-prompt.css

@@ -10,17 +10,32 @@
 .arrow-container {
     display: flex;
     align-items: center;
+}
+
+[dir="ltr"] .arrow-container {
     margin-right: -7px;
 }
 
-.arrow-container-left {
+[dir="rtl"] .arrow-container {
+    margin-left: -7px;
+}
+
+[dir="ltr"] .arrow-container-left {
     margin-right: -7px;
 }
 
-.arrow-container-right {
+[dir="rtl"] .arrow-container-left {
     margin-left: -7px;
 }
 
+[dir="ltr"] .arrow-container-right {
+    margin-left: -7px;
+}
+
+[dir="rtl"] .arrow-container-right {
+    margin-right: -7px;
+}
+
 .body {
     padding: 1rem 1.5rem;
     border-radius: 0.5rem;
@@ -55,14 +70,22 @@
     margin: auto;
 }
 
-.button-row button.ok-button {
+[dir="ltr"] .button-row button.ok-button {
     margin-left: 0;
 }
 
-.button-row button.cancel-button {
+[dir="rtl"] .button-row button.ok-button {
+    margin-right: 0;
+}
+
+[dir="ltr"] .button-row button.cancel-button {
     margin-right: 0;
 }
 
+[dir="rtl"] .button-row button.cancel-button {
+    margin-left: 0;
+}
+
 .message {
     margin-top: 0.25rem;
 }
@@ -71,4 +94,3 @@
     height: 1.5rem;
     width: 1.5rem;
 }
-

packages/scratch-gui/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx

@@ -85,7 +85,8 @@ const DeleteConfirmationPrompt = ({
     onOk,
     modalPosition,
     entityType,
-    relativeElemRef
+    relativeElemRef,
+    isRtl
 }) => {
     const modalPositionValues = calculateModalPosition(relativeElemRef, modalPosition);
 
@@ -119,12 +120,15 @@ const DeleteConfirmationPrompt = ({
         contentLabel={intl.formatMessage(messages.confirmDeletionHeading)}
         onRequestClose={onCancel}
     >
-        <Box className={styles.modalContainer}>
-            { modalPosition === 'right' ?
+        <Box
+            className={styles.modalContainer}
+            dir={isRtl ? 'rtl' : 'ltr'}
+        >
+            {((modalPosition === 'right' && !isRtl) || (modalPosition === 'left' && isRtl)) ?
                 <Box className={classNames(styles.arrowContainer, styles.arrowContainerLeft)}>
                     <img
                         className={styles.deleteIcon}
-                        src={arrowLeftIcon}
+                        src={isRtl ? arrowRightIcon : arrowLeftIcon}
                     />
                 </Box> : null }
             <Box className={styles.body}>
@@ -160,11 +164,11 @@ const DeleteConfirmationPrompt = ({
                     </button>
                 </Box>
             </Box>
-            {modalPosition === 'left' ?
+            {((modalPosition === 'left' && !isRtl) || (modalPosition === 'right' && isRtl)) ?
                 <Box className={classNames(styles.arrowContainer, styles.arrowContainerRight)}>
                     <img
                         className={styles.deleteIcon}
-                        src={arrowRightIcon}
+                        src={isRtl ? arrowLeftIcon : arrowRightIcon}
                     />
                 </Box> : null }
         </Box>
@@ -177,7 +181,8 @@ DeleteConfirmationPrompt.propTypes = {
     relativeElemRef: PropTypes.object,
     entityType: PropTypes.string,
     modalPosition: PropTypes.string,
-    intl: intlShape.isRequired
+    intl: intlShape.isRequired,
+    isRtl: PropTypes.bool
 };
 
 const DeleteConfirmationPromptIntl = injectIntl(DeleteConfirmationPrompt);

packages/scratch-gui/src/components/sprite-selector/sprite-list.jsx

@@ -30,7 +30,8 @@ const SpriteList = function (props) {
         ordering,
         raised,
         selectedId,
-        items
+        items,
+        isRtl
     } = props;
 
     const isSpriteDrag = draggingType === DragConstants.SPRITE;
@@ -95,7 +96,7 @@ const SpriteList = function (props) {
                                 onDuplicateButtonClick={onDuplicateSprite}
                                 onExportButtonClick={onExportSprite}
                                 withDeleteConfirmation
-                                deleteConfirmationModalPosition={'left'}
+                                deleteConfirmationModalPosition={isRtl ? 'right' : 'left'}
                             />
                         </SortableAsset>
                     );
@@ -134,7 +135,8 @@ SpriteList.propTypes = {
     onSelectSprite: PropTypes.func,
     ordering: PropTypes.arrayOf(PropTypes.number),
     raised: PropTypes.bool,
-    selectedId: PropTypes.string
+    selectedId: PropTypes.string,
+    isRtl: PropTypes.bool
 };
 
 export default SortableHOC(SpriteList);

packages/scratch-gui/src/components/sprite-selector/sprite-selector.jsx

@@ -111,6 +111,7 @@ const SpriteSelectorComponent = function (props) {
                 onDuplicateSprite={onDuplicateSprite}
                 onExportSprite={onExportSprite}
                 onSelectSprite={onSelectSprite}
+                isRtl={isRtl(intl.locale)}
             />
             <ActionMenu
                 className={styles.addButton}

packages/scratch-gui/src/containers/delete-confirmation-prompt.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import DeleteConfirmationPromptComponent from '../components/delete-confirmation-prompt/delete-confirmation-prompt.jsx';
+
+const DeleteConfirmationPrompt = props => (
+    <DeleteConfirmationPromptComponent {...props} />
+);
+
+DeleteConfirmationPrompt.propTypes = {
+    isRtl: PropTypes.bool,
+    onCancel: PropTypes.func.isRequired,
+    onOk: PropTypes.func.isRequired,
+    modalPosition: PropTypes.string,
+    entityType: PropTypes.string.isRequired,
+    relativeElemRef: PropTypes.object.isRequired
+};
+
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+export default connect(
+    mapStateToProps
+)(DeleteConfirmationPrompt);

packages/scratch-gui/src/containers/sprite-selector-item.jsx

@@ -10,7 +10,7 @@ import getCostumeUrl from '../lib/get-costume-url';
 import DragRecognizer from '../lib/drag-recognizer';
 import {getEventXY} from '../lib/touch-utils';
 import {GUIStoragePropType} from '../gui-config';
-import DeleteConfirmationPrompt from '../components/delete-confirmation-prompt/delete-confirmation-prompt.jsx';
+import DeleteConfirmationPrompt from './delete-confirmation-prompt';
 
 import SpriteSelectorItemComponent from '../components/sprite-selector-item/sprite-selector-item.jsx';
 
@@ -155,6 +155,7 @@ class SpriteSelectorItem extends React.PureComponent {
                 relativeElemRef={this.ref}
                 entityType={this.props.dragType}
                 modalPosition={deleteConfirmationModalPosition}
+                isRtl={this.props.isRtl}
             /> : null}
             <SpriteSelectorItemComponent
                 componentRef={this.setRef}
@@ -194,15 +195,17 @@ SpriteSelectorItem.propTypes = {
     selected: PropTypes.bool,
     withDeleteConfirmation: PropTypes.bool,
     deleteConfirmationModalPosition: PropTypes.string,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    isRtl: PropTypes.bool
 };
 
 const mapStateToProps = (state, {id}) => ({
     storage: state.scratchGui.config.storage,
     dragging: state.scratchGui.assetDrag.dragging,
     receivedBlocks: state.scratchGui.hoveredTarget.receivedBlocks &&
             state.scratchGui.hoveredTarget.sprite === id,
-    vm: state.scratchGui.vm
+    vm: state.scratchGui.vm,
+    isRtl: state.locales.isRtl
 });
 const mapDispatchToProps = dispatch => ({
     dispatchSetHoveredSprite: spriteId => {

packages/scratch-gui/test/unit/containers/sprite-selector-item.test.jsx

@@ -7,7 +7,7 @@ import VM from '@scratch/scratch-vm';
 import SpriteSelectorItemContainer from '../../../src/containers/sprite-selector-item';
 import DeleteButton from '../../../src/components/delete-button/delete-button';
 import {legacyConfig} from '../../../src/legacy-config';
-import DeleteConfirmationPrompt from '../../../src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx';
+import DeleteConfirmationPrompt from '../../../src/containers/delete-confirmation-prompt';
 
 jest.mock('../../../src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx', () => jest.fn(() => null));
 describe('SpriteSelectorItem Container', () => {