Skip to content

Commit

Permalink
update translations
Browse files Browse the repository at this point in the history
  • Loading branch information
@issam-seghir
issam-seghir committed Dec 2, 2023
1 parent 7a5e061 commit c64a095
Show file tree
Hide file tree
Showing 15 changed files with 278 additions and 139 deletions.
54 changes: 42 additions & 12 deletions src/jsx/components/SettingsBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,17 @@ import Box from "@mui/joy/Box";
import FormLabel from "@mui/joy/FormLabel";
import Radio, { radioClasses } from "@mui/joy/Radio";
import RadioGroup from "@mui/joy/RadioGroup";
import Select, { selectClasses } from "@mui/joy/Select";
import Sheet from "@mui/joy/Sheet";
import Option from "@mui/joy/Option";
import { MdKeyboardArrowDown } from "react-icons/md";
import Snackbar from '@mui/joy/Snackbar';

function splitCamelCase(input) {
return input.replaceAll(/([a-z])([A-Z])/g, "$1 $2");
}
function SettingsSidebar({showSettings}) {
const { selectedTheme, setSelectedTheme, language, changeLanguage } = useThemeContext();
const { selectedTheme, setSelectedTheme, language, changeLanguage, setShowSnackBar, showSnackBar } = useThemeContext();


function handleChange(e) {
Expand All @@ -28,11 +32,11 @@ function SettingsSidebar({showSettings}) {
width: "40%",
height: "100%",
position: "fixed",
right: 0,
insetInlineEnd: 0,
p: 1,
zIndex: 9998,
background: "linear-gradient(24deg, #0000009e, transparent)" ,
transform: `translateX(${showSettings ? 0 : "100%"})`,
zIndex: 998,
background: "linear-gradient(24deg, #0000009e, transparent)",
transform: `translateX(${showSettings ? 0 : language.language === "ar" ? "-100%" : "100%"})`,
}}
>
<h2>Settings</h2>
Expand Down Expand Up @@ -96,15 +100,41 @@ function SettingsSidebar({showSettings}) {
</div>

<div>
<Typography level="h1"> Choose your language : </Typography>
<Typography level="h1"> Select Language:: </Typography>
<div>
<label htmlFor="languageSelect">Select Language: </label>
<select id="languageSelect" value={language.language} onChange={(e) => changeLanguage(e.target.value)}>
<option value="en">English</option>
<option value="ar">Arabic</option>
{/* Add more language options as needed */}
</select>
<Select
defaultValue={language.language}
onChange={changeLanguage}
indicator={<MdKeyboardArrowDown />}
sx={{
width: 240,
[`& .${selectClasses.indicator}`]: {
transition: "0.2s",
[`&.${selectClasses.expanded}`]: {
transform: "rotate(-180deg)",
},
},
}}
>
<Option value="en">English</Option>
<Option value="ar">Arabic</Option>
</Select>
</div>
<Snackbar
size="md"
variant="soft"
autoHideDuration={4000}
open={showSnackBar}
onClose={(event, reason) => {
if (reason === "clickaway") {
return;
}
setShowSnackBar(false);
}}
>
{language.language === "ar"
? "تم تغيير اللغة ⚠: قد لا تعمل بعض الميزات بشكل صحيح حتى تتم إعادة تحميل الصفحة." : "Language Changed ⚠ : Some features may not work properly until the page is reloaded."}
</Snackbar>
</div>
</Box>
);
Expand Down
2 changes: 1 addition & 1 deletion src/jsx/components/SettingsButton.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function SettingsButton() {
return (
<>
<Tooltip title="setting" size="md" variant="solid" color="primary" placement="top" arrow>
<IconButton component={motion.button} whileHover={{ scale: 1.1 }} whileTap={{ scale: 1 }} variant="soft" color="primary" size="lg" sx={{ zIndex: 9999, borderRadius: "50%", p: ".5em", position: "absolute", right: 4, bottom: 4 }} onClick={() => setShowSettings(() => !showSettings)}>
<IconButton component={motion.button} whileHover={{ scale: 1.1 }} whileTap={{ scale: 1 }} variant="soft" color="primary" size="lg" sx={{ zIndex: 999, borderRadius: "50%", p: ".5em", position: "absolute", insetInlineEnd: 4, bottom: 4 }} onClick={() => setShowSettings(() => !showSettings)}>
<motion.div animate={{ rotate: 360 }} transition={{ repeat: Number.POSITIVE_INFINITY, duration: 3, ease: "linear" }}>
<FiSettings className="icon" />
</motion.div>
Expand Down
38 changes: 21 additions & 17 deletions src/jsx/components/SideBare.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,12 @@ import { HiColorSwatch } from "react-icons/hi";
import { MdBubbleChart, MdEditSquare, MdDashboard } from "react-icons/md";

import { Link as RouterLink } from "react-router-dom";
import { useThemeContext } from "@contexts/ContextProvider";


export default function SideBare({ show, toggleSideBar }) {
const { language } = useThemeContext();

return (
<>
{/* Overlay background */}
Expand Down Expand Up @@ -79,8 +83,8 @@ export default function SideBare({ show, toggleSideBar }) {
</g>
</svg>
</Link>
<Typography flex={1} level="title-lg">
Astralyn
<Typography flex={1} level="title-lg" fontFamily={"Rubik"}>
{language.language === "ar" ? "أستراليــن" : "Astralyn"}
</Typography>
</Box>
<List
Expand All @@ -98,25 +102,25 @@ export default function SideBare({ show, toggleSideBar }) {
},
}}
>
<ListItemHeaderNested title={"DASHBOARD"}>
<ListItemHeaderNested title={language.language === "ar" ? "لوحة القيادة" : "DASHBOARD"}>
<ListItem>
<ListItemButton color="primary" component={RouterLink} to="/" underline="none" selected>
<ListItemDecorator>
<MdDashboard className="icon" />
</ListItemDecorator>
<ListItemContent>
<Typography level="title-sm">Ecommerce</Typography>
<Typography level="title-sm">{language.language === "ar" ? "لوحة القيادة" : "Ecommerce"}</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
</ListItemHeaderNested>
<ListItemHeaderNested title={"RECORDS"}>
<ListItemHeaderNested title={language.language === "ar" ? "السجلات" : "RECORDS"}>
<ListItem>
<ListItemButton component={RouterLink} to="/orders" underline="none">
<ListItemDecorator>
<FaShoppingCart className="icon" />
</ListItemDecorator>
<Typography level="title-sm">Orders</Typography>
<Typography level="title-sm">{language.language === "ar" ? "طلبات" : "Orders"}</Typography>
</ListItemButton>
</ListItem>
<ListItem>
Expand All @@ -125,7 +129,7 @@ export default function SideBare({ show, toggleSideBar }) {
<FaUserGroup className="icon" />
</ListItemDecorator>
<ListItemContent>
<Typography level="title-sm">Employees</Typography>
<Typography level="title-sm">{language.language === "ar" ? "موظفين" : "Employees"}</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
Expand All @@ -135,18 +139,18 @@ export default function SideBare({ show, toggleSideBar }) {
<FaUserTie className="icon" />
</ListItemDecorator>
<ListItemContent>
<Typography level="title-sm">Customers</Typography>
<Typography level="title-sm">{language.language === "ar" ? "عملاء" : "Customers"}</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
</ListItemHeaderNested>
<ListItemHeaderNested title={"APPS"}>
<ListItemHeaderNested title={language.language === "ar" ? "التطبيقات" : "APPS"}>
<ListItem>
<ListItemButton component={RouterLink} to="/scheduler" underline="none">
<ListItemDecorator>
<FaCalendarDays className="icon" />
</ListItemDecorator>
<Typography level="title-sm">Scheduler</Typography>
<Typography level="title-sm">{language.language === "ar" ? "جدولة" : "Scheduler"}</Typography>
</ListItemButton>
</ListItem>
<ListItem>
Expand All @@ -155,7 +159,7 @@ export default function SideBare({ show, toggleSideBar }) {
<BsKanbanFill className="icon" />
</ListItemDecorator>
<ListItemContent>
<Typography level="title-sm">Kanban</Typography>
<Typography level="title-sm">{language.language === "ar" ? "لوحة كانبان" : "Kanban"}</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
Expand All @@ -165,7 +169,7 @@ export default function SideBare({ show, toggleSideBar }) {
<MdEditSquare className="icon" />
</ListItemDecorator>
<ListItemContent>
<Typography level="title-sm">Markdown Editor</Typography>
<Typography level="title-sm">{language.language === "ar" ? "محرر ماركداون" : "Markdown Editor"}</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
Expand All @@ -175,18 +179,18 @@ export default function SideBare({ show, toggleSideBar }) {
<HiColorSwatch className="icon" />
</ListItemDecorator>
<ListItemContent>
<Typography level="title-sm">Drawer</Typography>
<Typography level="title-sm">{language.language === "ar" ? "رسم تخطيطي" : "Drawer"}</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
</ListItemHeaderNested>
<ListItemHeaderNested title={"DATA"}>
<ListItemHeaderNested title={language.language === "ar" ? "البيانات" : "DATA"}>
<ListItem>
<ListItemButton component={RouterLink} to="/analytics" underline="none">
<ListItemDecorator>
<MdBubbleChart className="icon" />
</ListItemDecorator>
<Typography level="title-sm">Analytics</Typography>
<Typography level="title-sm">{language.language === "ar" ? "التحليلات" : "Analytics"}</Typography>
</ListItemButton>
</ListItem>
<ListItem>
Expand All @@ -195,7 +199,7 @@ export default function SideBare({ show, toggleSideBar }) {
<FaChartPie className="icon" />
</ListItemDecorator>
<ListItemContent>
<Typography level="title-sm">Tracker</Typography>
<Typography level="title-sm">{language.language === "ar" ? "المتعقب" : "Tracker"}</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
Expand All @@ -205,7 +209,7 @@ export default function SideBare({ show, toggleSideBar }) {
<FaMapLocationDot className="icon" />
</ListItemDecorator>
<ListItemContent>
<Typography level="title-sm">Map</Typography>
<Typography level="title-sm">{language.language === "ar" ? "خريطة" : "Map"}</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
Expand Down
93 changes: 49 additions & 44 deletions src/jsx/components/StockChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,51 +50,56 @@ const Default = () => {
}
};
return (
<div className="control-pane">
<div className="control-pane-scc" style={{ height: "100%", width: "100%" }}>
<style>{SAMPLE_CSS}</style>
<div className="control-section">
<StockChartComponent
id="stockchartdefault"
primaryXAxis={{
valueType: "DateTime", majorGridLines: { width: 0 }, majorTickLines: { color: "transparent" }, crosshairTooltip: { enable: true } }}
primaryYAxis={{ labelFormat: "n0", lineStyle: { width: 0 }, rangePadding: "None", majorTickLines: { height: 0 } }}
chartArea={{ border: { width: 0 } }}
tooltip={{ enable: true, shared: true }}
tooltipRender={tooltipRender}
crosshair={{ enable: true }}
title="AAPL Stock Price"
>
<Inject
services={[
DateTime,
Tooltip,
RangeTooltip,
Crosshair,
LineSeries,
SplineSeries,
CandleSeries,
HiloOpenCloseSeries,
HiloSeries,
RangeAreaSeries,
Trendlines,
EmaIndicator,
RsiIndicator,
BollingerBands,
TmaIndicator,
MomentumIndicator,
SmaIndicator,
AtrIndicator,
Export,
AccumulationDistributionIndicator,
MacdIndicator,
StochasticIndicator,
]}
/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} xName="x" type="Candle" animation={{ enable: true }} />
</StockChartSeriesCollectionDirective>
</StockChartComponent>
</div>
<StockChartComponent
id="stockchartdefault"
primaryXAxis={{
valueType: "DateTime",
majorGridLines: { width: 0 },
majorTickLines: { color: "red" },
crosshairTooltip: { enable: true },
}}
primaryYAxis={{ labelFormat: "n0", lineStyle: { width: 0 }, rangePadding: "None", majorTickLines: { height: 0 } }}
height={"100%"}
width="100%"
chartArea={{ border: { width: 0 } }}
tooltip={{ enable: true, shared: true }}
tooltipRender={tooltipRender}
crosshair={{ enable: true }}
title={language.language == "ar" ? "سعر السهم AAPL" : "AAPL Stock Price"}
titleStyle={{ background: "transparent", size: "1rem", fontWeight: "bold", color: "var(--joy-palette-primary-softColor", fontFamily: "var(--joy-fontFamily-body)", position: "Top" }}
>
<Inject
services={[
DateTime,
Tooltip,
RangeTooltip,
Crosshair,
LineSeries,
SplineSeries,
CandleSeries,
HiloOpenCloseSeries,
HiloSeries,
RangeAreaSeries,
Trendlines,
EmaIndicator,
RsiIndicator,
BollingerBands,
TmaIndicator,
MomentumIndicator,
SmaIndicator,
AtrIndicator,
Export,
AccumulationDistributionIndicator,
MacdIndicator,
StochasticIndicator,
]}
/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} xName="x" type="Candle" animation={{ enable: true }} />
</StockChartSeriesCollectionDirective>
</StockChartComponent>
</div>
);
};
Expand Down
6 changes: 6 additions & 0 deletions src/jsx/components/Theme.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@ const defaultTheme = extendTheme({
},
},
},
fontFamily: {
//applies to `title-*` and `body-*`
body: "'Inter', var(--joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol')",
//applies to `h1`–`h4`
display: "'Inter', var(--joy-fontFamily-fallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,Arial, sans-serif,'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol')",
},
fontSize: {
xs: "var(--text-xs)",
sm: "var(--text-sm)",
Expand Down
Loading

0 comments on commit c64a095

Please sign in to comment.