Bugfix 7562 / rtl helps fix (#381)

* fix helps for rtl * bump version --------- Co-authored-by: PhotoNomad0 <[email protected]>
unfoldingWord · Mar 19, 2024 · b8360c9 · b8360c9
1 parent fb4c50c
commit b8360c9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tc-ui-toolkit",
-  "version": "6.2.8",
+  "version": "6.2.9",
   "description": "React components used to develop tools for the desktop app translationCore",
   "main": "lib/index.js",
   "display": "library",

diff --git a/src/TranslationHelps/ExpandedHelpsModal/index.js b/src/TranslationHelps/ExpandedHelpsModal/index.js
@@ -41,9 +41,11 @@ const ExpandedHelpsModal = ({
   article,
   classes,
   translate,
+  direction,
 }) => (
   <Dialog
     classes={{ paper: classes.paper }}
+    dir={direction}
     open={show}
     onClose={onHide}
     maxWidth='md'
@@ -59,7 +61,10 @@ const ExpandedHelpsModal = ({
         <Glyphicon glyph="remove" />
       </IconButton>
     </Toolbar>
-    <DialogContent className="dialog-content">
+    <DialogContent
+      className="dialog-content"
+      dir={direction}
+    >
       <div dangerouslySetInnerHTML={{ __html: marked(article) }} />
     </DialogContent>
     <DialogActions disableSpacing className="dialog-actions">
@@ -78,6 +83,9 @@ ExpandedHelpsModal.propTypes = {
   article: PropTypes.string.isRequired,
   classes: PropTypes.object.isRequired,
   translate: PropTypes.func.isRequired,
+  direction: PropTypes.oneOf(['ltr', 'rtl']),
 };
 
+ExpandedHelpsModal.defaultProps = { direction: 'ltr' };
+
 export default withStyles(styles)(ExpandedHelpsModal);
diff --git a/src/TranslationHelps/TranslationHelps.js b/src/TranslationHelps/TranslationHelps.js
@@ -29,10 +29,11 @@ const TranslationHelps = ({
   isShowHelpsExpanded, // is the expanded Translation Helps modal displayed?
   modalTitle, // Title for the expanded helps modal
   translate,
+  direction, // language direction
 }) => {
   if (isShowHelpsSidebar) {
     return (
-      <div className="helps-sash-container">
+      <div className="helps-sash-container" style={{ direction }}>
         <div className="helps-sash-closed" onClick={sidebarToggle}>
           <Glyphicon
             glyph="chevron-right"
@@ -53,12 +54,14 @@ const TranslationHelps = ({
           show={isShowHelpsExpanded}
           onHide={openExpandedHelpsModal}
           title={modalTitle}
-          article={modalArticle || article} />
+          article={modalArticle || article}
+          direction={direction}
+        />
       </div>
     );
   } else {
     return (
-      <div className="helps-sash-closed" onClick={sidebarToggle}>
+      <div className="helps-sash-closed" style={{ direction }} onClick={sidebarToggle}>
         <Glyphicon
           glyph="chevron-left"
           style={{ cursor: 'pointer' }}
@@ -78,12 +81,14 @@ TranslationHelps.propTypes = {
   sidebarToggle: PropTypes.func.isRequired,
   isShowHelpsExpanded: PropTypes.bool.isRequired,
   translate: PropTypes.func.isRequired,
+  direction: PropTypes.oneOf(['ltr', 'rtl']),
 };
 
 TranslationHelps.defaultProps = {
   modalTitle: 'translationHelps',
   article: '',
   modalArticle: '',
+  direction: 'ltr',
 };
 
 export default TranslationHelps;