Hebrew and RTL support (#378)

docs/index.md

@@ -1,4 +1,4 @@
-<img src="https://raw.githubusercontent.com/sienori/simple-translate/master/src/icons/64.png" align="left" height="64px" style="margin-right:10px">
+<img src="https://raw.githubusercontent.com/sienori/simple-translate/master/src/icons/64.png" align="left" height="64px" style="margin-inline-end:10px">
 
 # Simple Translate
 

docs/sponsors.css

@@ -4,7 +4,7 @@ body {
 
 img {
   height: 110px;
-  margin-right: 20px;
+  margin-inline-end: 20px;
 }
 
 a {

src/options/components/InformationPage.js

@@ -68,7 +68,7 @@ export default props => {
           <div>
             <a href={patreonLink} target="_blank">
               <img src="/icons/patreonButton.png" alt="Patreon"
-                style={{ height: 44, marginRight: 20 }} />
+                style={{ height: 44, marginInlineEnd: 20 }} />
             </a>
             <a href={paypalLink} target="_blank">
               <img src="/icons/paypalButton.png" alt="Paypal" />

src/options/components/OptionsPage.js

@@ -22,12 +22,16 @@ const setupTheme = async () => {
   });
 };
 
+const UILanguage =  browser.i18n.getUILanguage()
+const rtlLanguage = ['he', 'ar'].includes(UILanguage)
+const optionsPageClassName = 'optionsPage' + (rtlLanguage ? ' rtl-language' : '')
+
 export default () => {
   setupTheme();
   return (
     <HashRouter hashType="noslash">
       <ScrollToTop>
-        <div className="optionsPage">
+        <div className={optionsPageClassName}>
           <SideBar />
           <ContentsArea />
         </div>

src/options/styles/CategoryContainer.scss

@@ -9,7 +9,7 @@
   }
 
   .categoryElements {
-    padding-left: 20px;
+    padding-inline-start: 20px;
     margin-bottom: 30px;
   }
 }

src/options/styles/ContentsArea.scss

@@ -1,5 +1,5 @@
 .contentsArea {
-  margin-left: 150px;
+  margin-inline-start: 150px;
   width: 650px;
 
   .contentTitle {

src/options/styles/OptionContainer.scss

@@ -37,15 +37,15 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      margin-left: 10px;
+      margin-inline-start: 10px;
     }
     &.buttonsContainer {
       justify-content: flex-start;
     }
   }
   .childElements {
-    padding-left: 20px;
+    padding-inline-start: 20px;
-    border-left: solid 10px var(--line);
+    border-inline-start: solid 10px var(--line);
   }
 }
 
@@ -91,8 +91,8 @@ textarea {
   -moz-appearance: textfield;
   border: 1px var(--button) solid;
   border-radius: 2px;
-  padding-left: 5px;
+  padding-inline-start: 5px;
-  padding-right: 5px;
+  padding-inline-end: 5px;
   padding: 5px;
   width: calc(100% - 12px) !important;
   height: 50px;
@@ -109,8 +109,8 @@ input[type="color"] {
   -moz-appearance: textfield;
   width: 50px;
   height: 30px;
-  padding-left: 5px;
+  padding-inline-start: 5px;
-  padding-right: 5px;
+  padding-inline-end: 5px;
   border: 1px solid var(--button);
   border-radius: 2px;
 
@@ -139,12 +139,17 @@ input[type="checkbox"] {
       display: block;
       position: absolute;
       top: 1px;
-      left: 4px;
+      inset-inline-start: 4px;
       width: 6px;
       height: 14px;
       transform: rotate(40deg);
+
+      .rtl-language & {
+        transform: rotate(40deg) scaleX(-1);
+      }
+
       border-bottom: 3px solid var(--highlight);
-      border-right: 3px solid var(--highlight);
+      border-inline-end: 3px solid var(--highlight);
     }
   }
   &:focus + .checkbox::before {
@@ -153,7 +158,7 @@ input[type="checkbox"] {
 }
 
 .checkbox {
-  padding-left: 20px;
+  padding-inline-start: 20px;
   position: relative;
   cursor: pointer;
   &::before {
@@ -161,7 +166,7 @@ input[type="checkbox"] {
     display: block;
     position: absolute;
     top: 0;
-    left: -2px;
+    inset-inline-start: -2px;
     width: 20px;
     height: 20px;
     border: 1px solid var(--button);
@@ -185,7 +190,7 @@ input[type="radio"] {
     display: block;
     position: absolute;
     top: 6px;
-    left: 4px;
+    inset-inline-start: 4px;
     width: 10px;
     height: 10px;
     border-radius: 50%;
@@ -197,7 +202,7 @@ input[type="radio"] {
 }
 
 .radio {
-  padding-left: 20px;
+  padding-inline-start: 20px;
   position: relative;
   cursor: pointer;
   &::before {
@@ -205,7 +210,7 @@ input[type="radio"] {
     display: block;
     position: absolute;
     top: 0;
-    left: -2px;
+    inset-inline-start: -2px;
     width: 20px;
     height: 20px;
     border: 1px solid var(--button);
@@ -234,7 +239,7 @@ select {
   border: var(--button) solid 1px;
   border-radius: 2px;
   padding: 3px 5px;
-  padding-right: 20px;
+  padding-inline-end: 20px;
   width: 100%;
   height: 30px;
   scrollbar-color: var(--button) var(--line);
@@ -252,17 +257,22 @@ select {
     z-index: 1;
     position: absolute;
     top: 35%;
-    right: 7px;
+    inset-inline-end: 7px;
     width: 5px;
     height: 5px;
 
     transform: rotate(45deg);
+
+    .rtl-language & {
+      transform: rotate(-45deg);
+    }
+
     border-bottom: 2px solid var(--sub-text);
-    border-right: 2px solid var(--sub-text);
+    border-inline-end: 2px solid var(--sub-text);
   }
   &:hover::before {
     border-bottom: 2px solid var(--highlight);
-    border-right: 2px solid var(--highlight);
+    border-inline-end: 2px solid var(--highlight);
   }
 }
 
@@ -341,7 +351,7 @@ input[type="file"] {
     }
 
     &.clearButton {
-      right: 0px;
+      inset-inline-end: 0px;
       margin: 3px;
       svg {
         fill: var(--sub-text);
@@ -352,7 +362,7 @@ input[type="file"] {
     }
 
     &.resetButton {
-      right: -20px;
+      inset-inline-end: -20px;
       margin: -3px;
       svg {
         fill: var(--sub-text);

src/options/styles/OptionsPage.scss

@@ -56,6 +56,9 @@ body {
   color: var(--main-text);
   line-height: 1.5;
   margin: 20px 40px;
+  &.rtl-language{
+    direction: rtl;
+  }
 }
 
 ::-moz-selection {

src/options/styles/SideBar.scss

@@ -2,7 +2,7 @@
   position: fixed;
   font-size: 17px;
   font-weight: 400;
-  text-align: right;
+  text-align: end;
   -moz-user-select: none;
   -webkit-user-select: none;
   flex-shrink: 0;
@@ -16,10 +16,10 @@
     .logo {
       height: 64px;
       width: 64px;
-      margin-right: 5px;
+      margin-inline-end: 5px;
     }
     .logoTitle {
-      text-align: left;
+      text-align: start;
       font-size: 14px;
       font-weight: 300;
       color: var(--sub-text);

src/popup/components/PopupPage.js

@@ -33,6 +33,11 @@ const getTabInfo = async () => {
   }
 };
 
+const UILanguage =  browser.i18n.getUILanguage()
+const rtlLanguage = ['he', 'ar'].includes(UILanguage)
+const rtlLanguageClassName = rtlLanguage ? 'popup-page-rtl-language' : ''
+
+
 export default class PopupPage extends Component {
   constructor(props) {
     super(props);
@@ -166,7 +171,7 @@ export default class PopupPage extends Component {
 
   render() {
     return (
-      <div>
+      <div className={rtlLanguageClassName}>
         <Header
           toggleEnabledOnPage={this.toggleEnabledOnPage}
           isEnabledOnPage={this.state.isEnabledOnPage}

src/popup/styles/CopyButton.scss

@@ -5,7 +5,7 @@
   .copiedText {
     color: var(--sub-text);
     font-size: 12px;
-    margin-right: 5px;
+    margin-inline-end: 5px;
     -moz-user-select: none;
     -webkit-user-select: none;
   }

src/popup/styles/Footer.scss

@@ -20,26 +20,31 @@
 
   .selectWrap {
     position: relative;
-    margin-left: 5px;
+    margin-inline-start: 5px;
     &:before {
       pointer-events: none;
       content: "";
       z-index: 1;
       position: absolute;
       top: 35%;
-      right: 7px;
+      inset-inline-end: 7px;
       width: 5px;
       height: 5px;
 
       transform: rotate(45deg);
+
+      .popup-page-rtl-language & {
+        transform: rotate(-45deg);
+      }
+
       border-bottom: 2px solid var(--sub-text);
-      border-right: 2px solid var(--sub-text);
+      border-inline-end: 2px solid var(--sub-text);
 
       transition: border-color 100ms ease-out;
     }
     &:hover::before {
       border-bottom: 2px solid var(--highlight);
-      border-right: 2px solid var(--highlight);
+      border-inline-end: 2px solid var(--highlight);
     }
 
     select {
@@ -51,7 +56,7 @@
       border: var(--button) solid 1px;
       border-radius: 2px;
       padding: 3px 5px;
-      padding-right: 20px;
+      padding-inline-end: 20px;
       width: 100%;
       transition: border-color 100ms ease-out;
       scrollbar-color: var(--button) var(--line);

src/popup/styles/Header.scss

@@ -43,7 +43,7 @@
         .react-toggle-thumb {
           height: 16px;
           width: 16px;
-          left: 0px;
+          inset-inline-start: 0px;
           -webkit-box-shadow: none;
           -moz-box-shadow: none;
           box-shadow: none;
@@ -57,7 +57,7 @@
             background-color: var(--highlight);
           }
           .react-toggle-thumb {
-            left: 34px - $offset-width;
+            inset-inline-start: 34px - $offset-width;
             border-color: var(--highlight);
           }
         }

src/popup/styles/InputArea.scss

@@ -31,7 +31,7 @@
   .listen {
     position: absolute;
     height: 16px;
-    right: 5px;
+    inset-inline-end: 5px;
     bottom: 5px;
   }
 }

src/popup/styles/ResultArea.scss

@@ -41,9 +41,9 @@
     flex-direction: row;
     justify-content: flex-end;
     margin-top: 1em;
-    margin-right: 5px;
+    margin-inline-end: 5px;
     & > * {
-      margin-left: 10px;
+      margin-inline-start: 10px;
     }
   }
 }