+
diff --git a/public/scripts/localization.js b/public/scripts/localization.js
index 8d471cb..113400c 100644
--- a/public/scripts/localization.js
+++ b/public/scripts/localization.js
@@ -2,10 +2,12 @@ class Localization {
constructor() {
Localization.defaultLocale = "en";
Localization.supportedLocales = ["en", "nb", "ru", "zh-CN", "de", "ro", "id", "fr"];
+ Localization.supportedLocalesRTL = [];
+
Localization.translations = {};
Localization.defaultTranslations = {};
- Localization.systemLocale = Localization.supportedOrDefault(navigator.languages);
+ Localization.systemLocale = Localization.getSupportedOrDefault(navigator.languages);
let storedLanguageCode = localStorage.getItem("language-code");
@@ -24,7 +26,11 @@ class Localization {
return Localization.supportedLocales.indexOf(locale) > -1;
}
- static supportedOrDefault(locales) {
+ static isRTLLanguage(locale) {
+ return Localization.supportedLocalesRTL.indexOf(locale) > -1;
+ }
+
+ static getSupportedOrDefault(locales) {
return locales.find(Localization.isSupported) || Localization.defaultLocale;
}
@@ -34,6 +40,17 @@ class Localization {
await Localization.setLocale(locale)
await Localization.translatePage();
+ const htmlRootNode = document.querySelector('html');
+
+ if (Localization.isRTLLanguage(locale)) {
+ htmlRootNode.setAttribute('dir', 'rtl');
+ } else {
+ htmlRootNode.removeAttribute('dir');
+ }
+
+ htmlRootNode.setAttribute('lang', locale);
+
+
console.log("Page successfully translated",
`System language: ${Localization.systemLocale}`,
`Selected language: ${locale}`
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 971b287..b1b4ad1 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -398,7 +398,7 @@ class PeerUI {
-
+
`;
diff --git a/public/styles.css b/public/styles.css
index 8d232d0..9b06b4a 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -99,8 +99,7 @@ header {
right: 0;
}
-header > a,
-header > div {
+header > *:not(:first-child) {
margin-left: 8px;
}
@@ -673,7 +672,6 @@ footer .logo {
max-width: 15em;
text-overflow: ellipsis;
cursor: text;
- margin-left: -1rem;
margin-bottom: -6px;
padding-bottom: 0.1rem;
border-radius: 1.3rem/30%;
@@ -687,11 +685,27 @@ footer .logo {
#edit-pen {
width: 1rem;
height: 1rem;
- margin-left: -1rem;
margin-bottom: -2px;
position: relative;
}
+html:not([dir="rtl"]) {
+ #display-name,
+ #edit-pen {
+ margin-left: -1rem;
+ }
+}
+
+html[dir="rtl"] {
+ #display-name,
+ #edit-pen {
+ margin-right: -1rem;
+ }
+ #edit-pen {
+ transform: rotateY(180deg);
+ }
+}
+
/* Dialog */
x-dialog x-background {
@@ -799,8 +813,8 @@ x-dialog a {
justify-content: center;
}
-.input-key-container > input + * {
- margin-left: 6px;
+.input-key-container > input {
+ margin: 0 3px;
}
.input-key-container.six-chars > input:nth-of-type(4) {
@@ -811,11 +825,11 @@ x-dialog a {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
- font-size: 50px;
- letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
display: inline-block;
- text-indent: calc(0.5 * (11px + min(calc((100vw - 80px - 99px) / 100 * 6), 23px)));
- margin: 15px -15px;
+ font-size: 50px;
+ letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 20px);
+ text-indent: calc(0.5 * (11px + min(calc((100vw - 80px - 99px) / 100 * 6), 28px)));
+ margin: 25px 0;
}
.key-qr-code {
@@ -971,12 +985,28 @@ x-paper > .button-row > .button {
width: 100%;
}
-x-paper > .button-row > .button:not(:first-child) {
- border-right: solid 1.5px var(--border-color);
+html:not([dir="rtl"]) {
+ & x-paper > .button-row > .button:not(:first-child) {
+ border-right: solid 1.5px var(--border-color);
+ }
+
+ & x-paper > .button-row > .button:not(:last-child) {
+ border-left: solid 1.5px var(--border-color);
+ }
}
-x-paper > .button-row > .button:not(:last-child) {
- border-left: solid 1.5px var(--border-color);
+html[dir="rtl"] {
+ & x-paper > .button-row > .button:not(:first-child) {
+ border-left: solid 1.5px var(--border-color);
+ }
+
+ & x-paper > .button-row > .button:not(:last-child) {
+ border-right: solid 1.5px var(--border-color);
+ }
+}
+
+.language-buttons > button > span {
+ margin: 0 0.3em;
}
.file-description {
@@ -1241,7 +1271,6 @@ button::-moz-focus-inner {
--size: max(max(230vw, 230vh), calc(150vh + 150vw));
--size-half: calc(var(--size)/2);
top: calc(28px - var(--size-half));
- right: calc(36px - var(--size-half));
width: var(--size);
height: var(--size);
border-radius: 50%;
@@ -1250,6 +1279,19 @@ button::-moz-focus-inner {
z-index: -1;
}
+html:not([dir="rtl"]) {
+ #about x-background {
+ right: calc(36px - var(--size-half));
+ }
+}
+
+html[dir="rtl"] {
+ #about x-background {
+ left: calc(36px - var(--size-half));
+ }
+}
+
+
/* Hack such that initial scale(0) isn't animated */
#about x-background {
will-change: transform;
diff --git a/public_included_ws_fallback/index.html b/public_included_ws_fallback/index.html
index 91a75f1..2acf905 100644
--- a/public_included_ws_fallback/index.html
+++ b/public_included_ws_fallback/index.html
@@ -147,14 +147,44 @@