From a166e1c9e317a2cb772707f6a460092baaf97d9c Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sat, 25 Mar 2023 00:28:48 +0200 Subject: [PATCH] visual components update --- package-lock.json | 5 --- package.json | 1 - public/locales/en/translations.json | 3 +- public/locales/ro/translations.json | 3 +- src/components/common/PageTitle.js | 8 ++-- src/components/layout/AppRoutes.js | 2 + src/components/layout/ProfileButton.js | 12 +++++ src/components/layout/Sidebar.js | 12 +++-- .../about/components/AboutComponent.js | 39 ++++++++++++++++ .../about/components/AboutContainer.js | 3 +- .../about/components/AboutPageNavigation.js | 45 +++++++++++++++++++ .../machines/components/MachineAccordion.js | 14 +++++- .../machines/components/MachinesContainer.js | 19 +++++--- .../machines/components/ViewModeSelection.js | 39 +++++++++------- src/providers/SensitiveInfoProvider.js | 4 +- 15 files changed, 167 insertions(+), 42 deletions(-) create mode 100644 src/features/about/components/AboutComponent.js create mode 100644 src/features/about/components/AboutPageNavigation.js diff --git a/package-lock.json b/package-lock.json index 1e18c67..60e2455 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1315,11 +1315,6 @@ "resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.0.3.tgz", "integrity": "sha512-VgXQHoQEVZ/71B6YQHQP8/Yd/w1smGD+kCCiNvJKZ1xMD3nkN9mjoHxIqbOJMZ2q5PZlV6gXYT7eVol8Wm+D0A==" }, - "@flare/react-hooks": { - "version": "1.0.1", - "resolved": "https://lab.code-rove.com/public-node-registry/@flare/react-hooks/-/react-hooks-1.0.1.tgz", - "integrity": "sha512-mU6zkdETonWv0SnxT1qF/lch6ND1yph6bAw+BaYxl/jj8tasOune+KKfyGcLFR/Kso3q8PlVPT8x4CiLiO6woQ==" - }, "@flare/tuitio-client": { "version": "1.1.0", "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.1.0.tgz", diff --git a/package.json b/package.json index 793212c..03c4b95 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ }, "private": true, "dependencies": { - "@flare/react-hooks": "^1.0.1", "@flare/js-utils": "^1.0.3", "@flare/tuitio-client-react": "^1.1.1", "@material-ui/core": "^4.11.2", diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index e57ec3a..611c4b7 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -22,7 +22,7 @@ "Dashboard": "Dashboard", "Machines": "Machines", "System": "System", - "Trash": "Trash", + "Administration": "Administration", "Settings": "Settings", "About": "About" }, @@ -43,6 +43,7 @@ "Description": "{{userName}}, authenticated on {{loginDate}}", "OpenPortfolio": "Open portfolio" }, + "Settings": "Settings", "Logout": "Logout" }, "Machine": { diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index 625d0f4..357e813 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -13,7 +13,7 @@ "Dashboard": "Bord", "Machines": "Mașini", "System": "Sistem", - "Trash": "Gunoi", + "Administration": "Administrare", "Settings": "Setări", "About": "Despre" }, @@ -34,6 +34,7 @@ "Description": "{{userName}}, autentificat pe {{loginDate}}", "OpenPortfolio": "Deschide portofoliu" }, + "Settings": "Setări", "Logout": "Deconectare" }, "Machine": { diff --git a/src/components/common/PageTitle.js b/src/components/common/PageTitle.js index c00ebc9..9a5646c 100644 --- a/src/components/common/PageTitle.js +++ b/src/components/common/PageTitle.js @@ -19,24 +19,26 @@ const useStyles = makeStyles(theme => ({ titleText: { textTransform: "uppercase" } })); -const PageTitle = ({ text, toolBar }) => { +const PageTitle = ({ text, toolBar, navigation }) => { const classes = useStyles(); return (
+ {navigation && navigation}
{text}
- {toolBar} + {toolBar && toolBar}
); }; PageTitle.propTypes = { text: PropTypes.string.isRequired, - toolBar: PropTypes.node + toolBar: PropTypes.node, + navigation: PropTypes.node }; export default PageTitle; diff --git a/src/components/layout/AppRoutes.js b/src/components/layout/AppRoutes.js index c841ae2..bba92cf 100644 --- a/src/components/layout/AppRoutes.js +++ b/src/components/layout/AppRoutes.js @@ -5,6 +5,7 @@ import NetworkContainer from "../../features/network/components/NetworkContainer import SettingsContainer from "../../features/settings/components/SettingsContainer"; import DashboardContainer from "../../features/dashboard/components/DashboardContainer"; import UserProfileContainer from "../../features/user/profile/components/UserProfileContainer"; +import AboutContainer from "../../features/about/components/AboutContainer"; const AppRoutes = () => { return ( @@ -13,6 +14,7 @@ const AppRoutes = () => { + ); diff --git a/src/components/layout/ProfileButton.js b/src/components/layout/ProfileButton.js index 15a53d8..fbff053 100644 --- a/src/components/layout/ProfileButton.js +++ b/src/components/layout/ProfileButton.js @@ -9,6 +9,7 @@ import { import AccountCircle from "@material-ui/icons/AccountCircle"; import ExitToAppIcon from "@material-ui/icons/ExitToApp"; import AccountBoxIcon from "@material-ui/icons/AccountBox"; +import SettingsIcon from "@material-ui/icons/Settings"; import { useHistory } from "react-router-dom"; import { useTuitioClient } from "@flare/tuitio-client-react"; import { useToast } from "../../hooks"; @@ -77,6 +78,17 @@ const ProfileButton = () => { {t("User.Profile.Label")} + { + history.push("/settings"); + handleClose(); + }} + > + + + + {t("User.Settings")} + diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index b0f623d..635fe17 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js @@ -13,7 +13,7 @@ import { import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; import ChevronRightIcon from "@material-ui/icons/ChevronRight"; import ListItem from "@material-ui/core/ListItem"; -import DeleteIcon from "@material-ui/icons/Delete"; +import BuildIcon from "@material-ui/icons/Build"; import DnsIcon from "@material-ui/icons/Dns"; import DeviceHubIcon from "@material-ui/icons/DeviceHub"; import SettingsIcon from "@material-ui/icons/Settings"; @@ -85,11 +85,15 @@ const Sidebar = ({ open, handleDrawerClose }) => { - history.push("/trash")}> + history.push("/administration")} + > - + - + { + const [tab, setTab] = useState(null); + return ( + <> + } + /> + + ); +}; + +AboutComponent.propTypes = {}; + +export default AboutComponent; diff --git a/src/features/about/components/AboutContainer.js b/src/features/about/components/AboutContainer.js index 9e791ef..0830f65 100644 --- a/src/features/about/components/AboutContainer.js +++ b/src/features/about/components/AboutContainer.js @@ -1,7 +1,8 @@ import React from "react"; +import AboutComponent from "./AboutComponent"; const AboutContainer = () => { - return
TEST
; + return ; }; export default AboutContainer; diff --git a/src/features/about/components/AboutPageNavigation.js b/src/features/about/components/AboutPageNavigation.js new file mode 100644 index 0000000..2d0f050 --- /dev/null +++ b/src/features/about/components/AboutPageNavigation.js @@ -0,0 +1,45 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import ToggleButton from "@material-ui/lab/ToggleButton"; +import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; +import { Tooltip } from "@material-ui/core"; + +const AboutPageNavigation = ({ tabs, onTabChange }) => { + const [selected, setSelected] = useState(tabs[0].code); + + const handleTabSelection = (_event, tabCode) => { + setSelected(tabCode); + onTabChange && onTabChange(tabCode); + }; + + return ( + + {tabs.map(tab => ( + + + + + + ))} + + ); +}; + +AboutPageNavigation.propTypes = { + tabs: PropTypes.arrayOf( + PropTypes.shape({ code: PropTypes.string.isRequired }) + ).isRequired, + onTabChange: PropTypes.func +}; + +export default AboutPageNavigation; diff --git a/src/features/machines/components/MachineAccordion.js b/src/features/machines/components/MachineAccordion.js index 29ea664..f5d0965 100644 --- a/src/features/machines/components/MachineAccordion.js +++ b/src/features/machines/components/MachineAccordion.js @@ -22,11 +22,21 @@ const useStyles = makeStyles(() => ({ } })); -const IconLeftAccordionSummary = withStyles({ +const IconLeftAccordionSummary = withStyles(theme => ({ + root: { + minHeight: "20px", + height: "42px", + [theme.breakpoints.down("md")]: { + height: "62px" + }, + [theme.breakpoints.down("sm")]: { + height: "102px" + } + }, expandIcon: { order: -1 } -})(AccordionSummary); +}))(AccordionSummary); const GridCell = ({ label, value }) => { const { mask } = useSensitiveInfo(); diff --git a/src/features/machines/components/MachinesContainer.js b/src/features/machines/components/MachinesContainer.js index 203c7ec..a0a4103 100644 --- a/src/features/machines/components/MachinesContainer.js +++ b/src/features/machines/components/MachinesContainer.js @@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next"; import ViewModeSelection, { ViewModes } from "./ViewModeSelection"; const MachinesContainer = () => { - const [viewMode, setViewMode] = useState(ViewModes.TABLE); + const [viewMode, setViewMode] = useState(null); const state = useContext(NetworkStateContext); const dispatchActions = useContext(NetworkDispatchContext); @@ -37,12 +37,19 @@ const MachinesContainer = () => { <> } - /> - + } /> + {viewMode && ( + + )} ); }; diff --git a/src/features/machines/components/ViewModeSelection.js b/src/features/machines/components/ViewModeSelection.js index a362e4a..40d3ba2 100644 --- a/src/features/machines/components/ViewModeSelection.js +++ b/src/features/machines/components/ViewModeSelection.js @@ -5,7 +5,6 @@ import ViewListIcon from "@material-ui/icons/ViewList"; import ToggleButton from "@material-ui/lab/ToggleButton"; import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; import { Tooltip } from "@material-ui/core"; -import { useWindowSize } from "@flare/react-hooks"; import { useTranslation } from "react-i18next"; export const ViewModes = { @@ -13,28 +12,36 @@ export const ViewModes = { ACCORDION: "accordion" }; -const ViewModeSelection = ({ callback }) => { +const ViewModeSelection = ({ initialMode, callback }) => { const [state, setState] = useState({ - mode: ViewModes.TABLE, + mode: initialMode, manual: false }); - const { isMobile } = useWindowSize(); + const { t } = useTranslation(); - const handleViewModeSelection = useCallback( - (event, mode) => { - setState({ mode, manual: true }); - callback && callback(mode); - }, - [callback] - ); + const handleViewModeSelection = useCallback((event, mode) => { + setState({ mode, manual: true }); + }, []); useEffect(() => { - if (state.manual === true) return; - const mode = isMobile ? ViewModes.ACCORDION : ViewModes.TABLE; - setState({ mode, manual: false }); - callback && callback(mode); - }, [callback, isMobile, state.manual]); + const mediaQuery = window.matchMedia("(max-width: 1100px)"); + + function handleMatches(event) { + if (state.manual === true) return; + const mode = event.matches ? ViewModes.ACCORDION : ViewModes.TABLE; + setState({ mode, manual: false }); + } + + handleMatches(mediaQuery); + mediaQuery.addListener(handleMatches); + + return () => { + mediaQuery.removeListener(handleMatches); + }; + }, [state.manual]); + + useEffect(() => callback && callback(state.mode), [callback, state.mode]); return ( { const mask = text => { if (!enabled) return text; - return obfuscate(text, "#"); + return obfuscate(text, "◾"); }; const maskElements = list => { if (!enabled) return list; - const maskedList = list.map(z => obfuscate(z, "#")); + const maskedList = list.map(z => obfuscate(z, "◻️")); return maskedList; };