aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorrahighi <rahighi>2021-08-26 11:46:48 +0430
committerrahighi <rahighi>2021-08-26 11:46:48 +0430
commiteed89f02a9219417fa5f94c0d6c08f5981d23823 (patch)
tree78b378e1b1bcc54a068c304b1b9af73aa0e8c3a9 /modern
parentdb406fcc787df2fa865e5c5fe333f152e533cda1 (diff)
downloadetbsa-traccar-web-eed89f02a9219417fa5f94c0d6c08f5981d23823.tar.gz
etbsa-traccar-web-eed89f02a9219417fa5f94c0d6c08f5981d23823.tar.bz2
etbsa-traccar-web-eed89f02a9219417fa5f94c0d6c08f5981d23823.zip
added multiple language support with related layout directions
Diffstat (limited to 'modern')
-rw-r--r--modern/.env2
-rw-r--r--modern/.vscode/settings.json7
-rw-r--r--modern/package.json1
-rw-r--r--modern/public/fonts/IRANSansWeb(FaNum).ttfbin0 -> 59524 bytes
-rw-r--r--modern/public/index.html2
-rw-r--r--modern/public/styles.css5
-rw-r--r--modern/src/App.js6
-rw-r--r--modern/src/GeofencesPage.js7
-rw-r--r--modern/src/MainPage.js13
-rw-r--r--modern/src/common/localization.js181
-rw-r--r--modern/src/components/registration/LoginForm.js30
-rw-r--r--modern/src/components/registration/RegisterForm.js6
-rw-r--r--modern/src/map/CurrentLocationMap.js9
-rw-r--r--modern/src/map/Map.js34
-rw-r--r--modern/src/reports/ReportLayout.js6
-rw-r--r--modern/src/settings/OptionsLayout/index.js5
-rw-r--r--modern/src/theme/index.js4
17 files changed, 220 insertions, 98 deletions
diff --git a/modern/.env b/modern/.env
index 69efd74..209ce89 100644
--- a/modern/.env
+++ b/modern/.env
@@ -1,2 +1,2 @@
SKIP_PREFLIGHT_CHECK=true
-REACT_APP_URL_NAME='localhost:8082'
+REACT_APP_URL_NAME='192.168.1.105:8082'
diff --git a/modern/.vscode/settings.json b/modern/.vscode/settings.json
new file mode 100644
index 0000000..5767cf1
--- /dev/null
+++ b/modern/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+ "workbench.colorCustomizations": {
+ "activityBar.background": "#183407",
+ "titleBar.activeBackground": "#224909",
+ "titleBar.activeForeground": "#F4FDEE"
+ }
+} \ No newline at end of file
diff --git a/modern/package.json b/modern/package.json
index 6606649..ad4a3d3 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -13,6 +13,7 @@
"@turf/circle": "^6.5.0",
"@turf/turf": "^6.4.0",
"canvas-tint-image": "^2.0.1",
+ "jss-rtl": "^0.3.0",
"mapbox-gl": "^1.13.1",
"maplibre-gl": "^1.15.0",
"moment": "^2.29.1",
diff --git a/modern/public/fonts/IRANSansWeb(FaNum).ttf b/modern/public/fonts/IRANSansWeb(FaNum).ttf
new file mode 100644
index 0000000..168a908
--- /dev/null
+++ b/modern/public/fonts/IRANSansWeb(FaNum).ttf
Binary files differ
diff --git a/modern/public/index.html b/modern/public/index.html
index 78138ed..6d2eb7a 100644
--- a/modern/public/index.html
+++ b/modern/public/index.html
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="%PUBLIC_URL%/styles.css">
<title>Traccar</title>
</head>
- <body style="margin: 0; padding: 0;">
+ <body style="margin: 0; padding: 0;">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
diff --git a/modern/public/styles.css b/modern/public/styles.css
index 147c3e3..aca9e46 100644
--- a/modern/public/styles.css
+++ b/modern/public/styles.css
@@ -14,3 +14,8 @@ canvas {
.maplibregl-popup {
max-width: 330px !important;
}
+
+@font-face {
+ font-family: IranSans;
+ src: url('fonts/IRANSansWeb\(FaNum\).ttf');
+} \ No newline at end of file
diff --git a/modern/src/App.js b/modern/src/App.js
index ac7cdb2..228fe55 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -38,12 +38,13 @@ import ResetPasswordForm from './components/registration/ResetPasswordForm';
import theme from './theme';
import GeofencesPage from './GeofencesPage';
import GeofencePage from './GeofencePage';
+import { LocalizationProvider } from './common/localization';
const App = () => {
const initialized = useSelector((state) => !!state.session.server && !!state.session.user);
return (
- <ThemeProvider theme={theme}>
+ <LocalizationProvider>
<CssBaseline />
<SocketController />
<CachingController />
@@ -84,7 +85,8 @@ const App = () => {
)}
</Route>
</Switch>
- </ThemeProvider>
+ </LocalizationProvider>
+
);
};
diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js
index 71219c1..4d23d10 100644
--- a/modern/src/GeofencesPage.js
+++ b/modern/src/GeofencesPage.js
@@ -1,6 +1,6 @@
import React from 'react';
import {
- Divider, isWidthUp, makeStyles, withWidth, Typography, IconButton,
+ Divider, isWidthUp, makeStyles, withWidth, Typography, IconButton, useTheme,
} from '@material-ui/core';
import Drawer from '@material-ui/core/Drawer';
import ContainerDimensions from 'react-container-dimensions';
@@ -9,6 +9,8 @@ import Map from './map/Map';
import CurrentLocationMap from './map/CurrentLocationMap';
import GeofenceEditMap from './map/GeofenceEditMap';
import GeofencesList from './GeofencesList';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+
import t from './common/localization';
@@ -49,6 +51,7 @@ const useStyles = makeStyles((theme) => ({
const GeofencesPage = ({ width }) => {
const classes = useStyles();
+ const theme = useTheme();
return (
<div className={classes.root}>
@@ -60,7 +63,7 @@ const GeofencesPage = ({ width }) => {
>
<div className={classes.drawerHeader}>
<IconButton component="a" href="/">
- <ArrowBackIcon />
+ {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
{t('sharedGeofences')}
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index e070740..97f42ea 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -9,6 +9,7 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
import AddIcon from '@material-ui/icons/Add';
import CloseIcon from '@material-ui/icons/Close';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import ListIcon from '@material-ui/icons/ViewList';
import DevicesList from './DevicesList';
@@ -131,9 +132,9 @@ const MainPage = () => {
<Paper className={classes.paper} square elevation={3}>
<Toolbar className={classes.toolbar} disableGutters>
{isTablet && (
- <IconButton onClick={handleClose}>
- <ArrowBackIcon />
- </IconButton>
+ <IconButton onClick={handleClose}>
+ {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
+ </IconButton>
)}
<TextField
fullWidth
@@ -149,9 +150,9 @@ const MainPage = () => {
<AddIcon />
</IconButton>
{!isTablet && (
- <IconButton onClick={handleClose}>
- <CloseIcon />
- </IconButton>
+ <IconButton onClick={handleClose}>
+ <CloseIcon />
+ </IconButton>
)}
</Toolbar>
</Paper>
diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js
index 9e2123a..3b2f04b 100644
--- a/modern/src/common/localization.js
+++ b/modern/src/common/localization.js
@@ -1,3 +1,8 @@
+import React, { useState, createContext, useContext, useEffect } from "react";
+import { create } from 'jss';
+import rtl from 'jss-rtl';
+import { StylesProvider, jssPreset, useTheme, ThemeProvider } from '@material-ui/core/styles';
+
import af from '../../../web/l10n/af.json';
import ar from '../../../web/l10n/ar.json';
import az from '../../../web/l10n/az.json';
@@ -52,71 +57,77 @@ import uz from '../../../web/l10n/uz.json';
import vi from '../../../web/l10n/vi.json';
import zh from '../../../web/l10n/zh.json';
import zh_TW from '../../../web/l10n/zh_TW.json';
+import theme from "../theme";
const supportedLanguages = {
- af: { data: af, name: 'Afrikaans' },
- ar: { data: ar, name: 'العربية' },
- az: { data: az, name: 'Azərbaycanca' },
- bg: { data: bg, name: 'Български' },
- bn: { data: bn, name: 'বাংলা' },
- cs: { data: cs, name: 'Čeština' },
- de: { data: de, name: 'Deutsch' },
- da: { data: da, name: 'Dansk' },
- el: { data: el, name: 'Ελληνικά' },
- en: { data: en, name: 'English' },
- es: { data: es, name: 'Español' },
- fa: { data: fa, name: 'فارسی' },
- fi: { data: fi, name: 'Suomi' },
- fr: { data: fr, name: 'Français' },
- he: { data: he, name: 'עברית' },
- hi: { data: hi, name: 'हिन्दी' },
- hr: { data: hr, name: 'Hrvatski' },
- hu: { data: hu, name: 'Magyar' },
- id: { data: id, name: 'Bahasa Indonesia' },
- it: { data: it, name: 'Italiano' },
- ja: { data: ja, name: '日本語' },
- ka: { data: ka, name: 'ქართული' },
- kk: { data: kk, name: 'Қазақша' },
- ko: { data: ko, name: '한국어' },
- km: { data: km, name: 'ភាសាខ្មែរ' },
- lo: { data: lo, name: 'ລາວ' },
- lt: { data: lt, name: 'Lietuvių' },
- lv: { data: lv, name: 'Latviešu' },
- ml: { data: ml, name: 'മലയാളം' },
- mn: { data: mn, name: 'Монгол хэл' },
- ms: { data: ms, name: 'بهاس ملايو' },
- nb: { data: nb, name: 'Norsk bokmål' },
- ne: { data: ne, name: 'नेपाली' },
- nl: { data: nl, name: 'Nederlands' },
- nn: { data: nn, name: 'Norsk nynorsk' },
- pl: { data: pl, name: 'Polski' },
- pt: { data: pt, name: 'Português' },
- pt_BR: { data: pt_BR, name: 'Português (Brasil)' },
- ro: { data: ro, name: 'Română' },
- ru: { data: ru, name: 'Русский' },
- si: { data: si, name: 'සිංහල' },
- sk: { data: sk, name: 'Slovenčina' },
- sl: { data: sl, name: 'Slovenščina' },
- sq: { data: sq, name: 'Shqipëria' },
- sr: { data: sr, name: 'Srpski' },
- sv: { data: sv, name: 'Svenska' },
- ta: { data: ta, name: 'தமிழ்' },
- th: { data: th, name: 'ไทย' },
- tr: { data: tr, name: 'Türkçe' },
- uk: { data: uk, name: 'Українська' },
- uz: { data: uz, name: 'Oʻzbekcha' },
- vi: { data: vi, name: 'Tiếng Việt' },
- zh: { data: zh, name: '中文' },
- zh_TW: { data: zh_TW, name: '中文 (Taiwan)' },
+ 'af': { data: af, name: 'Afrikaans' },
+ 'ar': { data: ar, name: 'العربية' },
+ 'az': { data: az, name: 'Azərbaycanca' },
+ 'bg': { data: bg, name: 'Български' },
+ 'bn': { data: bn, name: 'বাংলা' },
+ 'cs': { data: cs, name: 'Čeština' },
+ 'de': { data: de, name: 'Deutsch' },
+ 'da': { data: da, name: 'Dansk' },
+ 'el': { data: el, name: 'Ελληνικά' },
+ 'en': { data: en, name: 'English' },
+ 'es': { data: es, name: 'Español' },
+ 'fa': { data: fa, name: 'فارسی' },
+ 'fi': { data: fi, name: 'Suomi' },
+ 'fr': { data: fr, name: 'Français' },
+ 'he': { data: he, name: 'עברית' },
+ 'hi': { data: hi, name: 'हिन्दी' },
+ 'hr': { data: hr, name: 'Hrvatski' },
+ 'hu': { data: hu, name: 'Magyar' },
+ 'id': { data: id, name: 'Bahasa Indonesia' },
+ 'it': { data: it, name: 'Italiano' },
+ 'ja': { data: ja, name: '日本語' },
+ 'ka': { data: ka, name: 'ქართული' },
+ 'kk': { data: kk, name: 'Қазақша' },
+ 'ko': { data: ko, name: '한국어' },
+ 'km': { data: km, name: 'ភាសាខ្មែរ' },
+ 'lo': { data: lo, name: 'ລາວ' },
+ 'lt': { data: lt, name: 'Lietuvių' },
+ 'lv': { data: lv, name: 'Latviešu' },
+ 'ml': { data: ml, name: 'മലയാളം' },
+ 'mn': { data: mn, name: 'Монгол хэл' },
+ 'ms': { data: ms, name: 'بهاس ملايو' },
+ 'nb': { data: nb, name: 'Norsk bokmål' },
+ 'ne': { data: ne, name: 'नेपाली' },
+ 'nl': { data: nl, name: 'Nederlands' },
+ 'nn': { data: nn, name: 'Norsk nynorsk' },
+ 'pl': { data: pl, name: 'Polski' },
+ 'pt': { data: pt, name: 'Português' },
+ 'pt_BR': { data: pt_BR, name: 'Português (Brasil)' },
+ 'ro': { data: ro, name: 'Română' },
+ 'ru': { data: ru, name: 'Русский' },
+ 'si': { data: si, name: 'සිංහල' },
+ 'sk': { data: sk, name: 'Slovenčina' },
+ 'sl': { data: sl, name: 'Slovenščina' },
+ 'sq': { data: sq, name: 'Shqipëria' },
+ 'sr': { data: sr, name: 'Srpski' },
+ 'sv': { data: sv, name: 'Svenska' },
+ 'ta': { data: ta, name: 'தமிழ்' },
+ 'th': { data: th, name: 'ไทย' },
+ 'tr': { data: tr, name: 'Türkçe' },
+ 'uk': { data: uk, name: 'Українська' },
+ 'uz': { data: uz, name: 'Oʻzbekcha' },
+ 'vi': { data: vi, name: 'Tiếng Việt' },
+ 'zh': { data: zh, name: '中文' },
+ 'zh_TW': { data: zh_TW, name: '中文 (Taiwan)' }
};
-const languages = window.navigator.languages !== undefined ? window.navigator.languages.slice() : [];
-let language = window.navigator.userLanguage || window.navigator.language;
+export const languageList = Object.entries(supportedLanguages).map((values) => ({ code: values[0], name: values[1].name }));
+
+const languages = localStorage.getItem('language') ? [localStorage.getItem('language')] : (window.navigator.languages !== undefined ? window.navigator.languages.slice() : []);
+
+let language = localStorage.getItem('language') || window.navigator.userLanguage || window.navigator.language;
+
languages.push(language);
languages.push(language.substring(0, 2));
languages.push('en');
for (let i = 0; i < languages.length; i++) {
language = languages[i].replace('-', '_');
+
if (language in supportedLanguages) {
break;
}
@@ -128,8 +139,60 @@ for (let i = 0; i < languages.length; i++) {
}
}
-const selectedLanguage = supportedLanguages[language];
+let selectedLanguage = supportedLanguages[language];
+
+export const findStringKeys = (predicate) => {
+ return Object.keys(selectedLanguage.data).filter(predicate);
+}
+
+export default key => {
+ return selectedLanguage.data[key];
+};
+
+const rtlLangueges = ['ar', 'he', 'fa'];
+const isRtl = (language) => rtlLangueges.indexOf(language) > -1;
+
+export const setSelectedLanguage = (language) => {
+ selectedLanguage = supportedLanguages[language];
+ localStorage.setItem('language', language);
+ localStorage.setItem('direction', isRtl(language) ? 'rtl' : 'ltr');
+}
+
+export const defaultLanguage = language;
+const defaultDirection = localStorage.getItem('direction') || 'ltr';
+
+export const LocalizationContext = createContext({
+ direction: defaultDirection,
+ language
+});
+
+const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
-export const findStringKeys = (predicate) => Object.keys(selectedLanguage.data).filter(predicate);
+export function LocalizationProvider(props) {
+ const [language, setLanguage] = useState(defaultLanguage);
+
+ const [direction, setDirection] = useState(defaultDirection);
+
+ const handleLanguageChange = (nextLanguage) => {
+ setSelectedLanguage(nextLanguage);
+ setLanguage(nextLanguage);
+ setDirection(isRtl(nextLanguage) ? 'rtl' : 'ltr');
+ };
+
+ useEffect(() => {
+ theme.direction = direction;
+ window.document.body.dir = direction
+ }, [direction])
+
+ return <LocalizationContext.Provider value={{ language, setLanguage: handleLanguageChange, languageList, direction }}>
+ <StylesProvider jss={jss}>
+ <ThemeProvider theme={theme}>
+ {props.children}
+ </ThemeProvider>
+ </StylesProvider>
+ </LocalizationContext.Provider>
+}
-export default (key) => selectedLanguage.data[key];
+export const useLocalization = () => {
+ return useContext(LocalizationContext);
+} \ No newline at end of file
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index e6da05e..c5c1d6f 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -6,7 +6,7 @@ import { useTheme } from '@material-ui/core/styles';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { sessionActions } from '../../store';
-import t from '../../common/localization';
+import t, { useLocalization } from '../../common/localization';
import StartPage from '../../StartPage';
const useStyles = makeStyles((theme) => ({
@@ -24,6 +24,7 @@ const LoginForm = () => {
const dispatch = useDispatch();
const history = useHistory();
const theme = useTheme();
+ const { language, languageList, setLanguage } = useLocalization();
const [failed, setFailed] = useState(false);
const [email, setEmail] = useState('');
@@ -61,16 +62,20 @@ const LoginForm = () => {
}
};
+ const handleLanguageChange = e => {
+ setLanguage(e.target.value);
+ }
+
return (
<StartPage>
<Grid container direction="column" spacing={2}>
{useMediaQuery(theme.breakpoints.down('md'))
&& (
- <Grid item className={classes.logoContainer}>
- <svg height="64" width="240">
- <use xlinkHref="/logo.svg#img" />
- </svg>
- </Grid>
+ <Grid item className={classes.logoContainer}>
+ <svg height="64" width="240">
+ <use xlinkHref="/logo.svg#img" />
+ </svg>
+ </Grid>
)}
<Grid item>
<TextField
@@ -124,22 +129,23 @@ const LoginForm = () => {
<Grid item xs>
<FormControl variant="filled" fullWidth>
<InputLabel>{t('loginLanguage')}</InputLabel>
- <Select>
- <MenuItem value="en">English</MenuItem>
+ <Select value={language} onChange={handleLanguageChange}>
+ {languageList.map(lang => <MenuItem key={lang.code} value={lang.code}>{lang.name}</MenuItem>)}
</Select>
</FormControl>
</Grid>
</Grid>
{emailEnabled && (
- <Grid item container justify="flex-end">
- <Grid item>
- <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>
+ <Grid item container justify="flex-end">
+ <Grid item>
+ <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>
+ </Grid>
</Grid>
- </Grid>
)}
</Grid>
</StartPage>
);
+
};
export default LoginForm;
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index 06f5355..3a249c6 100644
--- a/modern/src/components/registration/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -1,11 +1,12 @@
import React, { useState } from 'react';
import {
- Grid, Button, TextField, Typography, Link, makeStyles, Snackbar,
+ Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, useTheme,
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import StartPage from '../../StartPage';
import t from '../../common/localization';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
const useStyles = makeStyles((theme) => ({
register: {
@@ -30,6 +31,7 @@ const RegisterForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [snackbarOpen, setSnackbarOpen] = useState(false);
+ const theme = useTheme();
const submitDisabled = () => !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password;
@@ -59,7 +61,7 @@ const RegisterForm = () => {
<Grid item>
<Typography className={classes.link} color="primary">
<Link onClick={() => history.push('/login')}>
- <ArrowBackIcon />
+ {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
</Link>
</Typography>
</Grid>
diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js
index 69724ce..c875662 100644
--- a/modern/src/map/CurrentLocationMap.js
+++ b/modern/src/map/CurrentLocationMap.js
@@ -1,9 +1,14 @@
import maplibregl from 'maplibre-gl';
import { useEffect } from 'react';
+import { useLocalization } from '../common/localization';
import { map } from './Map';
const CurrentLocationMap = () => {
+ const {direction} = useLocalization();
+
useEffect(() => {
+ const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
+
const control = new maplibregl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
@@ -11,9 +16,9 @@ const CurrentLocationMap = () => {
},
trackUserLocation: true,
});
- map.addControl(control);
+ map.addControl(control,controlsPosition);
return () => map.removeControl(control);
- }, []);
+ }, [direction]);
return null;
};
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 7dd1c2a..16470ad 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -8,7 +8,7 @@ import { SwitcherControl } from './switcher/switcher';
import deviceCategories from '../common/deviceCategories';
import { prepareIcon, loadImage } from './mapUtil';
import { styleCarto, styleMapbox, styleOsm } from './mapStyles';
-import t from '../common/localization';
+import t, { useLocalization } from '../common/localization';
import { useAttributePreference } from '../common/preferences';
import palette from '../theme/palette';
@@ -60,11 +60,7 @@ const initMap = async () => {
map.on('load', initMap);
-map.addControl(new maplibregl.NavigationControl({
- showCompass: false,
-}));
-
-map.addControl(new SwitcherControl(
+const switchingControl = new SwitcherControl(
[
{ title: t('mapOsm'), uri: styleOsm() },
{ title: t('mapCarto'), uri: styleCarto() },
@@ -84,15 +80,37 @@ map.addControl(new SwitcherControl(
};
waiting();
},
-));
+);
+
+const navigationControl = new maplibregl.NavigationControl({
+ showCompass: false,
+})
+
+const addPrimaryControls = position => {
+ map.addControl(navigationControl, position);
+ map.addControl(switchingControl, position);
+}
+
+const removePrimaryControls =()=> {
+ map.removeControl(navigationControl);
+ map.removeControl(switchingControl);
+}
+
+
const Map = ({ children }) => {
const containerEl = useRef(null);
-
+ const {direction} = useLocalization();
const [mapReady, setMapReady] = useState(false);
const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
+ useEffect(()=>{
+ const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
+ addPrimaryControls(controlsPosition);
+ return removePrimaryControls;
+ },[direction])
+
useEffect(() => {
maplibregl.accessToken = mapboxAccessToken;
}, [mapboxAccessToken]);
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index c231cd8..48e7745 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import {
- Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden,
+ Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden, useTheme,
} from '@material-ui/core';
import TimelineIcon from '@material-ui/icons/Timeline';
import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
@@ -10,6 +10,7 @@ import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
import TrendingUpIcon from '@material-ui/icons/TrendingUp';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import SideNav from '../components/SideNav';
import NavBar from '../components/NavBar';
@@ -66,6 +67,7 @@ const ReportLayout = ({ children, filter }) => {
const location = useLocation();
const [openDrawer, setOpenDrawer] = useState(false);
const [reportTitle, setReportTitle] = useState();
+ const theme = useTheme();
useEffect(() => {
routes.forEach((route) => {
@@ -103,7 +105,7 @@ const ReportLayout = ({ children, filter }) => {
<IconButton
onClick={() => history.push('/')}
>
- <ArrowBackIcon />
+ {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
{t('reportTitle')}
diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index 4a42e58..3472168 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -7,9 +7,11 @@ import {
makeStyles,
IconButton,
Hidden,
+ useTheme,
} from '@material-ui/core';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import SideNav from '../../components/SideNav';
import NavBar from '../../components/NavBar';
@@ -56,6 +58,7 @@ const OptionsLayout = ({ children }) => {
const [openDrawer, setOpenDrawer] = useState(false);
const [optionTitle, setOptionTitle] = useState();
const routes = useRoutes();
+ const theme = useTheme();
useEffect(() => {
const activeRoute = routes.find(
@@ -87,7 +90,7 @@ const OptionsLayout = ({ children }) => {
>
<div className={classes.drawerHeader}>
<IconButton component="a" href="/">
- <ArrowBackIcon />
+ {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
{t('settingsTitle')}
diff --git a/modern/src/theme/index.js b/modern/src/theme/index.js
index dc0a35b..bce3960 100644
--- a/modern/src/theme/index.js
+++ b/modern/src/theme/index.js
@@ -7,6 +7,10 @@ const theme = createMuiTheme({
palette,
overrides,
dimensions,
+ typography : {
+ fontFamily : 'IranSans'
+ }
+ // direction : 'rtl'
});
export default theme;
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 02:33:11 +0000