RTL/LTR switch for info modal close button

peripleo · Feb 28, 2024 · 1d57a3c · 1d57a3c
1 parent b42cc1b
commit 1d57a3c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/src/index.jsx b/src/index.jsx
@@ -76,7 +76,7 @@ const App = () => {
 
             <MyLocationControl />
 
-            <InfoControl className="kima-welcome">
+            <InfoControl className="kima-welcome" dir="rtl">
               <h1>ברוכות וברוכים הבאים לממשק הגילוי והחיפוש הגיאוגרפי של הספרייה הלאומית!</h1>
 
               <p>הממשק מאפשר לצפות באוצרות הדיגיטליים של הספרייה על גבי מפה אינטראקטיבית. כך תוכלו לאתר רשומות לפי המקום בו הן נוצרו או לפי המקום אותו הן מתארות.

diff --git a/src/peripleo/controls/Info/InfoControl.css b/src/peripleo/controls/Info/InfoControl.css
@@ -33,6 +33,12 @@
   cursor: pointer;
 }
 
+.rtl .p6o-info-modal-close {
+  left: 25px;
+  right: auto;
+}
+
+
 .p6o-info-modal-close.mobile {
   right: 10px;
 }

diff --git a/src/peripleo/controls/Info/InfoControl.tsx b/src/peripleo/controls/Info/InfoControl.tsx
@@ -10,6 +10,8 @@ export type InfoProps = {
 
   className?: string
 
+  dir?: 'rtl' | 'ltr'
+
 }
 
 export const InfoControl = (props: InfoProps) => {
@@ -29,6 +31,7 @@ export const InfoControl = (props: InfoProps) => {
       {modalOpen && (
         <InfoModal
           className={props.className}
+          dir={props.dir}
           onClose={() => setModalOpen(false)}>
           {props.children}
         </InfoModal>

diff --git a/src/peripleo/controls/Info/InfoModal.tsx b/src/peripleo/controls/Info/InfoModal.tsx
@@ -9,6 +9,8 @@ export type InfoModalProps = {
 
   className?: string
 
+  dir?: 'rtl' | 'ltr'
+
   onClose: EventHandler<any>
 
 }
@@ -35,10 +37,16 @@ export const InfoModal = (props: InfoModalProps) => {
       props.onClose(evt);
   }
 
+  const className = [
+    'p6o-info-modal-bg',
+    props.className,
+    props.dir
+  ].filter(Boolean).join(' ');
+
   return ReactDOM.createPortal(
     <div 
       ref={el}
-      className={props.className ? `p6o-info-modal-bg ${props.className}` : 'p6o-info-modal-bg'} 
+      className={className} 
       onClick={onClick}>
       <button
         className={device.size === Size.DESKTOP ? 'p6o-info-modal-close' : 'p6o-info-modal-close mobile'}