From 48711adcacf674f5ee1f55e2537fec888d02d7ee Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Tue, 3 Aug 2021 02:05:41 +0300 Subject: [PATCH] AppearancePage --- public/flags/flags-iso/shiny/32/GB.png | Bin 0 -> 1690 bytes public/flags/flags-iso/shiny/32/RO.png | Bin 0 -> 937 bytes src/components/Layout/Content.js | 2 + src/pages/settings/api.js | 1 + .../appearance/components/AppearancePage.js | 71 ++++++++++++++++++ .../components/LanguageComponent.js | 54 +++++++++++++ .../components/LanguageContainer.js | 59 +++++++++++++++ .../appearance/components/LanguageMenu.js | 42 +++++++++++ 8 files changed, 229 insertions(+) create mode 100644 public/flags/flags-iso/shiny/32/GB.png create mode 100644 public/flags/flags-iso/shiny/32/RO.png create mode 100644 src/pages/settings/api.js create mode 100644 src/pages/settings/appearance/components/AppearancePage.js create mode 100644 src/pages/settings/appearance/components/LanguageComponent.js create mode 100644 src/pages/settings/appearance/components/LanguageContainer.js create mode 100644 src/pages/settings/appearance/components/LanguageMenu.js diff --git a/public/flags/flags-iso/shiny/32/GB.png b/public/flags/flags-iso/shiny/32/GB.png new file mode 100644 index 0000000000000000000000000000000000000000..531836ec058768fdbf91dd9909d73d4ef0fbad88 GIT binary patch literal 1690 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 {
+ diff --git a/src/pages/settings/api.js b/src/pages/settings/api.js new file mode 100644 index 0000000..0ae040b --- /dev/null +++ b/src/pages/settings/api.js @@ -0,0 +1 @@ +//test diff --git a/src/pages/settings/appearance/components/AppearancePage.js b/src/pages/settings/appearance/components/AppearancePage.js new file mode 100644 index 0000000..535c133 --- /dev/null +++ b/src/pages/settings/appearance/components/AppearancePage.js @@ -0,0 +1,71 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { + InputLabel, + MenuItem, + FormControl, + Select, + Card, + CardContent, + CardActions, + Button +} from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; +import PageTitle from "../../../../components/PageTitle"; +import LanguageContainer from "./LanguageContainer"; + +const useStyles = makeStyles((theme) => ({ + root: { + minWidth: 275 + }, + formControl: { + margin: theme.spacing(1), + minWidth: 300 + } +})); + +const AppearancePage = () => { + const [state, setState] = React.useState({ theme: "default" }); + + const { t } = useTranslation(); + const classes = useStyles(); + + const handleThemeChange = (event) => { + const theme = event.target.value; + setState((prev) => ({ ...prev, theme })); + }; + + return ( + <> + + + + +
+ + Theme + + + + + + + + + ); +}; + +export default AppearancePage; diff --git a/src/pages/settings/appearance/components/LanguageComponent.js b/src/pages/settings/appearance/components/LanguageComponent.js new file mode 100644 index 0000000..9611e6c --- /dev/null +++ b/src/pages/settings/appearance/components/LanguageComponent.js @@ -0,0 +1,54 @@ +import React from "react"; +import PropTypes from "prop-types"; +import Flag from "react-flags"; +import { IconButton } from "@material-ui/core"; +import LanguageMenu from "./LanguageMenu"; + +const LanguageComponent = ({ + languageIsSet, + anchorEl, + onMenuOpen, + onLanguageChange, + onClose, + flag, + getFlagsPath +}) => { + return ( + <> + + {languageIsSet && ( + + )} + + + + ); +}; + +LanguageComponent.propTypes = { + languageIsSet: PropTypes.bool.isRequired, + anchorEl: PropTypes.object, + onMenuOpen: PropTypes.func.isRequired, + onLanguageChange: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired, + flag: PropTypes.object.isRequired, + getFlagsPath: PropTypes.func.isRequired +}; + +export default LanguageComponent; diff --git a/src/pages/settings/appearance/components/LanguageContainer.js b/src/pages/settings/appearance/components/LanguageContainer.js new file mode 100644 index 0000000..1803423 --- /dev/null +++ b/src/pages/settings/appearance/components/LanguageContainer.js @@ -0,0 +1,59 @@ +import React, { useState, useEffect } from "react"; +import { useTranslation } from "react-i18next"; +import LanguageComponent from "./LanguageComponent"; + +const LanguageContainer = () => { + const [anchorEl, setAnchorEl] = useState(null); + + const { i18n } = useTranslation(); + const [flag, setFlag] = useState({ + name: "RO", + alt: "-" + }); + + useEffect(() => { + if (!i18n.language) return; + setFlag({ + name: i18n.language === "en" ? "GB" : i18n.language.toUpperCase(), + alt: i18n.language + }); + }, [i18n.language]); + + const handleMenuOpen = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const handleLanguageChange = (language) => () => { + if (language !== i18n.language) { + i18n.changeLanguage(language); + } + setAnchorEl(null); + }; + + const getFlagsPath = () => { + const basePath = "flags"; + if (process.env.PUBLIC_URL) { + return `${process.env.PUBLIC_URL}/${basePath}`; + } else { + return basePath; + } + }; + + return ( + + ); +}; + +export default LanguageContainer; diff --git a/src/pages/settings/appearance/components/LanguageMenu.js b/src/pages/settings/appearance/components/LanguageMenu.js new file mode 100644 index 0000000..4dbea52 --- /dev/null +++ b/src/pages/settings/appearance/components/LanguageMenu.js @@ -0,0 +1,42 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { useTranslation } from "react-i18next"; +import { Menu, MenuItem } from "@material-ui/core"; + +const LanguageMenu = ({ anchorEl, onLanguageChange, onClose }) => { + const { t } = useTranslation(); + const open = Boolean(anchorEl); + + return ( + + + {t("Language.Romanian")} + + + {t("Language.English")} + + + ); +}; + +LanguageMenu.propTypes = { + anchorEl: PropTypes.object, + onLanguageChange: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired +}; + +export default LanguageMenu;