From c0be353f3c1ff69771a2e38cb55c97234aa23547 Mon Sep 17 00:00:00 2001 From: Noe Date: Thu, 6 Jul 2023 09:16:49 +0200 Subject: [PATCH] styling --- typescript/Frontend/lang/en.json | 5 +- typescript/Frontend/package-lock.json | 3 +- typescript/Frontend/package.json | 1 - typescript/Frontend/src/App.tsx | 14 +- .../src/components/Groups/FolderForm.tsx | 57 ++++--- .../Installations/InstallationForm.tsx | 148 +++++++++--------- .../Installations/InstallationList.tsx | 15 +- .../Installations/InstallationTabs.tsx | 29 ++-- .../src/components/Layout/InnovenergyTab.tsx | 35 ++++- .../src/components/Layout/InnovenergyTabs.tsx | 5 +- .../Layout/InnovenergyTextfield.tsx | 89 ++++++++++- .../src/components/Layout/ModeButtons.tsx | 23 ++- .../components/Layout/NavigationButtons.tsx | 20 +-- .../src/components/Users/UserForm.tsx | 87 +++++----- typescript/Frontend/src/index.tsx | 23 ++- 15 files changed, 355 insertions(+), 199 deletions(-) diff --git a/typescript/Frontend/lang/en.json b/typescript/Frontend/lang/en.json index ea3953e38..ccc3888a1 100644 --- a/typescript/Frontend/lang/en.json +++ b/typescript/Frontend/lang/en.json @@ -27,7 +27,7 @@ "defaultMessage": "Create new user" }, "customerName": { - "defaultMessage": "Customer name" + "defaultMessage": "Customer" }, "email": { "defaultMessage": "Email" @@ -35,8 +35,7 @@ "english": { "defaultMessage": "English" }, - "error": { - }, + "error": {}, "folder": { "defaultMessage": "Folder" }, diff --git a/typescript/Frontend/package-lock.json b/typescript/Frontend/package-lock.json index 5b160b6da..0b6b539cd 100644 --- a/typescript/Frontend/package-lock.json +++ b/typescript/Frontend/package-lock.json @@ -9,7 +9,6 @@ "version": "0.1.0", "dependencies": { "@aws-sdk/client-s3": "^3.316.0", - "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@minoru/react-dnd-treeview": "^3.4.1", "@mui/icons-material": "^5.11.0", @@ -3541,6 +3540,7 @@ "version": "11.10.5", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz", "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.10.5", @@ -27667,6 +27667,7 @@ "version": "11.10.5", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz", "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==", + "peer": true, "requires": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.10.5", diff --git a/typescript/Frontend/package.json b/typescript/Frontend/package.json index e9719afc3..00182b42a 100644 --- a/typescript/Frontend/package.json +++ b/typescript/Frontend/package.json @@ -4,7 +4,6 @@ "private": true, "dependencies": { "@aws-sdk/client-s3": "^3.316.0", - "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@minoru/react-dnd-treeview": "^3.4.1", "@mui/icons-material": "^5.11.0", diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx index 522c56e65..da884d261 100644 --- a/typescript/Frontend/src/App.tsx +++ b/typescript/Frontend/src/App.tsx @@ -47,13 +47,15 @@ const App = () => { - innovenergy logo + innovenergy logo - + diff --git a/typescript/Frontend/src/components/Groups/FolderForm.tsx b/typescript/Frontend/src/components/Groups/FolderForm.tsx index 5aa02516b..e84aa92e0 100644 --- a/typescript/Frontend/src/components/Groups/FolderForm.tsx +++ b/typescript/Frontend/src/components/Groups/FolderForm.tsx @@ -7,7 +7,10 @@ import { I_Folder } from "../../util/types"; import { GroupContext } from "../Context/GroupContextProvider"; import InnovenergySnackbar from "../InnovenergySnackbar"; import InnovenergyButton from "../Layout/InnovenergyButton"; -import InnovenergyTextfield from "../Layout/InnovenergyTextfield"; +import InnovenergyTextfield, { + I_InnovenergyTextfieldProps, + IePropertyGrid, +} from "../Layout/InnovenergyTextfield"; import { UserContext } from "../Context/UserContextProvider"; interface I_CustomerFormProps { @@ -54,33 +57,39 @@ const FolderForm = (props: I_CustomerFormProps) => { }); const theme = useTheme(); + const rows: I_InnovenergyTextfieldProps[] = [ + { + id: "folder-name-textfield", + disabled: readOnly, + label: intl.formatMessage({ + id: "name", + defaultMessage: "Name", + }), + name: "name", + value: formik.values.name, + handleChange: formik.handleChange, + }, + { + id: "folder-information-textfield", + disabled: readOnly, + label: intl.formatMessage({ + id: "information", + defaultMessage: "Information", + }), + name: "information", + value: formik.values.information, + handleChange: formik.handleChange, + }, + ]; + return ( <>
- - + - {loading && } + {loading && ( + + )} {!readOnly && additionalButtons && additionalButtons.map((button) => button)} diff --git a/typescript/Frontend/src/components/Installations/InstallationForm.tsx b/typescript/Frontend/src/components/Installations/InstallationForm.tsx index 46681a51c..aa326ec42 100644 --- a/typescript/Frontend/src/components/Installations/InstallationForm.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationForm.tsx @@ -7,7 +7,10 @@ import { I_Installation } from "../../util/types"; import { InstallationContext } from "../Context/InstallationContextProvider"; import MoveDialog from "../Groups/Tree/MoveDialog"; import InnovenergyButton from "../Layout/InnovenergyButton"; -import InnovenergyTextfield from "../Layout/InnovenergyTextfield"; +import InnovenergyTextfield, { + I_InnovenergyTextfieldProps, + IePropertyGrid, +} from "../Layout/InnovenergyTextfield"; import { UserContext } from "../Context/UserContextProvider"; import * as Yup from "yup"; @@ -73,79 +76,80 @@ const InstallationForm = (props: I_InstallationFormProps) => { setOpen(false); }; + const rows: I_InnovenergyTextfieldProps[] = [ + { + disabled: readOnly, + id: "installation-name-textfield", + label: intl.formatMessage({ + id: "customerName", + defaultMessage: "Customer name", + }), + name: "name", + value: formik.values.name, + handleChange: formik.handleChange, + helperText: + formik.errors.name && formik.touched.name ? formik.errors.name : "", + error: !!formik.errors.name && formik.touched.name, + }, + { + disabled: readOnly, + id: "installation-region-textfield", + label: intl.formatMessage({ + id: "region", + defaultMessage: "Region", + }), + name: "region", + value: formik.values.region, + handleChange: formik.handleChange, + helperText: + formik.errors.region && formik.touched.region + ? formik.errors.region + : "", + error: !!formik.errors.region && formik.touched.region, + }, + { + disabled: readOnly, + id: "installation-location-textfield", + label: intl.formatMessage({ + id: "location", + defaultMessage: "Location", + }), + name: "location", + value: formik.values.location, + handleChange: formik.handleChange, + helperText: + formik.errors.location && formik.touched.location + ? formik.errors.location + : "", + error: !!formik.errors.location && formik.touched.location, + }, + { + disabled: readOnly, + id: "installation-country-textfield", + label: intl.formatMessage({ + id: "country", + defaultMessage: "Country", + }), + name: "country", + value: formik.values.country, + handleChange: formik.handleChange, + }, + { + disabled: readOnly, + id: "installation-orderNumbers-textfield", + label: intl.formatMessage({ + id: "orderNumbers", + defaultMessage: "Order number", + }), + name: "orderNumbers", + value: formik.values.orderNumbers, + handleChange: formik.handleChange, + }, + ]; + return ( - - - - - + {hasMoveButton && !readOnly && } {!readOnly && ( diff --git a/typescript/Frontend/src/components/Installations/InstallationList.tsx b/typescript/Frontend/src/components/Installations/InstallationList.tsx index 5e7238de2..043320520 100644 --- a/typescript/Frontend/src/components/Installations/InstallationList.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationList.tsx @@ -1,7 +1,13 @@ import List from "@mui/material/List"; import ListItemButton from "@mui/material/ListItemButton"; import ListItemText from "@mui/material/ListItemText"; -import { Alert, CircularProgress, Divider, Grid, useTheme } from "@mui/material"; +import { + Alert, + CircularProgress, + Divider, + Grid, + useTheme, +} from "@mui/material"; import { Link } from "react-router-dom"; import useRouteMatch from "../../hooks/useRouteMatch"; import routes from "../../routes.json"; @@ -45,11 +51,9 @@ const InstallationList = (props: InstallationListProps) => { routes.installations + routes.list + routes.installation + ":id", routes.installations + routes.list + routes.liveView + ":id", routes.installations + routes.list + routes.log + ":id", - ]); - - const theme = useTheme(); + const theme = useTheme(); useEffect(() => { fetchData(); @@ -71,11 +75,12 @@ const InstallationList = (props: InstallationListProps) => { overflow: "auto", py: 0, mt: 1, + borderRadius: 1.5, height: routeMatch?.pattern.path === routes.installations + routes.list + routes.log + ":id" ? "130px" - : "500px", + : "367px", }} component="nav" aria-labelledby="nested-list-subheader" diff --git a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx index 67edc068d..1ebc80a36 100644 --- a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx @@ -5,6 +5,7 @@ import routes from "../../routes.json"; import useRouteMatch from "../../hooks/useRouteMatch"; import { useIntl } from "react-intl"; import InnovenergyTab from "../Layout/InnovenergyTab"; +import InnovenergyTabBorder from "../Layout/InnovenergyTab"; import InnovenergyTabs from "components/Layout/InnovenergyTabs"; import { useTheme } from "@mui/material"; import { red } from "@mui/material/colors"; @@ -23,23 +24,22 @@ const InstallationTabs = () => { if (id) { return ( - + - { to={routes.installation + id} /> - - - { sx={{ "&.Mui-selected": { color: colors.black, - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.primary.main, borderColor: theme.palette.text.disabled, borderBottom: 0, - mb:-1/8, - }}} + mb: -1 / 8, + }, + }} id={"installation-tab-log"} label={intl.formatMessage({ id: "log", diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx index e752d9b5d..500058971 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx @@ -2,7 +2,6 @@ import { styled, SxProps, Tab, Tabs, Theme, useTheme } from "@mui/material"; import { TabProps } from "@mui/material/Tab/Tab"; import { colors } from "index"; - const InnovenergyTab = (props: any) => { const theme = useTheme(); return ( @@ -36,4 +35,38 @@ const InnovenergyTab = (props: any) => { ); }; +const InnovenergyTabBorder = (props: any) => { + const theme = useTheme(); + return ( + + ); +}; + export default InnovenergyTab; diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx index 3c8cb1b94..109782b91 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx @@ -9,9 +9,8 @@ interface AntTabsProps { children: ReactNode; } - const InnovenergyTabs = (props: AntTabsProps) => { - const theme = useTheme(); + const theme = useTheme(); return ( { "& .MuiTabs-indicator": { display: "flex", justifyContent: "center", - backgroundColor: "transparent", + backgroundColor: "red", }, "&.MuiTabs-root": { width: "100%", diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx index e7c572bdd..7e2cd6f1f 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx @@ -1,6 +1,18 @@ -import { Grid, InputLabel, TextField, useTheme } from "@mui/material"; +import { + Grid, + InputLabel, + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + TextField, + useTheme, +} from "@mui/material"; -interface I_InnovenergyTextfieldProps { +export interface I_InnovenergyTextfieldProps { id: string; label: string; value: string; @@ -13,17 +25,81 @@ interface I_InnovenergyTextfieldProps { error?: boolean; } +export const IePropertyGrid = (props: { + rows: I_InnovenergyTextfieldProps[]; +}) => { + const theme = useTheme(); + + const findLongestLength = () => { + return ( + 11 * + props.rows.reduce( + (acc, curr) => (acc > curr.label.length ? acc : curr.label.length), + 0 + ) + ); + }; + + return ( +
+
+ {props.rows.map((prop) => ( + {prop.label} + ))} +
+
+ {props.rows.map((element) => { + return ( + + ); + })} +
+
+ ); +}; + const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => { const theme = useTheme(); return ( - + {props.label} - - + { borderRadius: 1, }, my: 0.5, + borderColor: "red", }} value={props.value || ""} onChange={props.handleChange} diff --git a/typescript/Frontend/src/components/Layout/ModeButtons.tsx b/typescript/Frontend/src/components/Layout/ModeButtons.tsx index aee76e50e..322eae885 100644 --- a/typescript/Frontend/src/components/Layout/ModeButtons.tsx +++ b/typescript/Frontend/src/components/Layout/ModeButtons.tsx @@ -10,7 +10,6 @@ const ModeButtons = () => { const routeMatch = useRouteMatch([ routes.installations + routes.tree + "*", routes.installations + routes.list + "*", - ]); return ( @@ -20,21 +19,35 @@ const ModeButtons = () => { color="primary" value={routeMatch?.pattern?.path} exclusive - sx={{ mb: 1, bgcolor: theme.palette.primary.main,}} + sx={{ + mb: 1, + bgcolor: theme.palette.primary.light, + }} size="small" > { return ( <> { /> { setOpen(false); }; + const rows: I_InnovenergyTextfieldProps[] = [ + { + id: "name-textfield", + label: intl.formatMessage({ + id: "name", + defaultMessage: "Name", + }), + name: "name", + value: formik.values.name, + handleChange: formik.handleChange, + disabled: readOnly, + }, + { + id: "email-textfield", + label: intl.formatMessage({ + id: "email", + defaultMessage: "Email", + }), + name: "email", + value: formik.values.email, + handleChange: formik.handleChange, + disabled: readOnly, + }, + { + id: "information-textfield", + label: intl.formatMessage({ + id: "Information", + defaultMessage: "Information", + }), + name: "information", + value: formik.values.information, + handleChange: formik.handleChange, + disabled: readOnly, + }, + ]; + return ( - - - + - {loading && } + {loading && ( + + )} {currentUser.hasWriteAccess && ( diff --git a/typescript/Frontend/src/index.tsx b/typescript/Frontend/src/index.tsx index e049497cd..32d58d287 100644 --- a/typescript/Frontend/src/index.tsx +++ b/typescript/Frontend/src/index.tsx @@ -13,20 +13,20 @@ const root = ReactDOM.createRoot( export const colors = { black: "#000000", - blueBlack: '#2b3e54', - borderColor: '#c0c6d0', - - background: '#f3f4f7', + blueBlack: "#2b3e54", + borderColor: "#a8b0be", + + background: "#f3f4f7", //change this color in index.css too - greyDark: '#d1d7de', - greyLight:'#e1e4e7', - - orangeSelected: '#ffd280', - orangeHover: '#ffe4b3', + greyDark: "#d1d7de", + greyLight: "#e1e4e7", - orangeDark:"#ffc04d", -} + orangeSelected: "#ffd280", + orangeHover: "#ffe4b3", + + orangeDark: "#ffc04d", +}; const theme = createTheme({ components: { @@ -51,7 +51,6 @@ const theme = createTheme({ main: colors.orangeSelected, light: colors.orangeHover, dark: colors.orangeDark, - }, }, typography: {