narayana/simple-translate
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Hebrew and RTL support (#378)

Browse source
This commit is contained in:
Avraham Ben Arosh 2022-08-31 15:19:51 +03:00 committed by sienori
parent 8153ee9463
commit 7288f2d1ae
15 changed files with 68 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/index.md
View file

@ -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

2
docs/sponsors.css
View file

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

2
src/options/components/InformationPage.js
View file

@ -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" />

6
src/options/components/OptionsPage.js
View file

@ -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>

2
src/options/styles/CategoryContainer.scss
View file

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

2
src/options/styles/ContentsArea.scss
View file

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

50
src/options/styles/OptionContainer.scss
View file

@ -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;
border-left: solid 10px var(--line);
padding-inline-start: 20px;
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-right: 5px;
padding-inline-start: 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-right: 5px;
padding-inline-start: 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);

3
src/options/styles/OptionsPage.scss
View file

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

6
src/options/styles/SideBar.scss
View file

@ -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);

7
src/popup/components/PopupPage.js
View file

@ -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}

2
src/popup/styles/CopyButton.scss
View file

@ -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;
}

15
src/popup/styles/Footer.scss
View file

@ -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);

4
src/popup/styles/Header.scss
View file

@ -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);
}
}

2
src/popup/styles/InputArea.scss
View file

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

4
src/popup/styles/ResultArea.scss
View file

@ -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;
}
}
}