change tabs components so they're not redundant anymore, left them in there for now tho so Noe can work on the style

2023-07-03 14:33:37 +02:00 · 2023-07-03 14:33:37 +02:00 · 735c266f0e
parent c89b4ab488
commit 735c266f0e
12 changed files with 129 additions and 104 deletions
--- a/typescript/Frontend/src/components/Groups/GroupTabs.tsx
+++ b/typescript/Frontend/src/components/Groups/GroupTabs.tsx
@ -5,11 +5,8 @@ import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
 import { GroupContext } from "../Context/GroupContextProvider";
 import { useContext } from "react";
-import {
-  AntTabs,
-  StyledTab,
-  StyledTabBlue,
-} from "../../util/installation.util";
+import InnovenergyTab from "../Layout/InnovenergyTab";
+import InnovenergyTabs from "components/Layout/InnovenergyTabs";

 const GroupTabs = () => {
  const routeMatch = useRouteMatch([
@ -26,16 +23,9 @@ const GroupTabs = () => {
    return (
      <Box sx={{ width: "100%" }}>
        <Box sx={{}}>
-          <AntTabs
-            value={routeMatch?.pattern?.path}
-            aria-label={intl.formatMessage({
-              id: "groupTabs",
-              defaultMessage: "Group tabs",
-            })}
-          >
+          <InnovenergyTabs id="group-tabs" value={routeMatch?.pattern?.path}>
            {currentType === "Folder" ? (
-              <StyledTabBlue
-                sx={{ bgcolor: "#90A7C5" }}
+              <InnovenergyTab
                id="styled-tab-folder"
                label={intl.formatMessage({
                  id: "folder",
@ -48,7 +38,7 @@ const GroupTabs = () => {
                to={routes.folder + id}
              />
            ) : (
-              <StyledTabBlue
+              <InnovenergyTab
                sx={{ bgcolor: "#90A7C5" }}
                id="styled-tab-installation"
                label={intl.formatMessage({
@ -66,7 +56,7 @@ const GroupTabs = () => {
              />
            )}

-            <StyledTabBlue
+            <InnovenergyTab
              sx={{ bgcolor: "#90A7C5" }}
              id="styled-tab-manage-access"
              label={intl.formatMessage({
@ -79,7 +69,7 @@ const GroupTabs = () => {
              component={Link}
              to={routes.manageAccess + id}
            />
-          </AntTabs>
+          </InnovenergyTabs>
        </Box>
      </Box>
    );
--- a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
@ -4,14 +4,8 @@ import { Link } from "react-router-dom";
 import routes from "../../routes.json";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
-import {
-  AntTabs,
-  StyledTab,
-  StyledTabBlue,
-  StyledTabWhite,
-} from "../../util/installation.util";
-import { colors } from "@mui/material";
-import { Background } from "reactflow";
+import InnovenergyTab from "../Layout/InnovenergyTab";
+import InnovenergyTabs from "components/Layout/InnovenergyTabs";

 const InstallationTabs = () => {
  const routeMatch = useRouteMatch([
@ -27,15 +21,11 @@ const InstallationTabs = () => {
    return (
      <Box sx={{ width: "100%" }}>
        <Box sx={{}}>
-          <AntTabs
+          <InnovenergyTabs
+            id="installation-tabs"
            value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
-            aria-label={intl.formatMessage({
-              id: "installationTabs",
-              defaultMessage: "Installation tabs",
-            })}
          >
-            <StyledTabBlue
-              sx={{ bgcolor: "#90A7C5" }}
+            <InnovenergyTab
              id={"installation-tab-installation"}
              label={intl.formatMessage({
                id: "installation",
@ -47,8 +37,7 @@ const InstallationTabs = () => {
              component={Link}
              to={routes.installation + id}
            />
-            <StyledTabWhite
-              sx={{ bgcolor: "#90A7C5" }}
+            <InnovenergyTab
              id={"installation-tab-liveView"}
              label={intl.formatMessage({
                id: "liveView",
@ -60,8 +49,7 @@ const InstallationTabs = () => {
              component={Link}
              to={routes.liveView + id}
            />
-            <StyledTab
-              sx={{ bgcolor: "#90A7C5" }}
+            <InnovenergyTab
              id={"installation-tab-log"}
              label={intl.formatMessage({
                id: "log",
@ -71,7 +59,7 @@ const InstallationTabs = () => {
              component={Link}
              to={routes.log + id}
            />
-          </AntTabs>
+          </InnovenergyTabs>
        </Box>
      </Box>
    );
--- a/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx
+++ b/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx
@ -7,7 +7,7 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import useRouteMatch from "../../../hooks/useRouteMatch";
 import routes from "../../../routes.json";
 import React from "react";
-import { blueGrey } from "@mui/material/colors";
+import "library.scss";

 export interface ToggleElement {
  [key: string]: boolean;
@ -72,8 +72,11 @@ const CheckboxTree = () => {
            </>
          }
          sx={{
-            ".MuiTreeItem-content": { paddingY: "5px" },
-            bgcolor: "#CCD6E4",
+            ".MuiTreeItem-content": {
+              paddingY: "5px",
+              minHeight: "52px",
+            },
+            bgcolor: "$innovenergy-orange",
          }}
        >
          {getNodes(element)}
--- a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx
+++ b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx
@ -13,6 +13,7 @@ interface DateRangePickerProps {
  range: Date[];
  getCacheSeries: (xaxisRange0: Date, xaxisRange1: Date) => void;
 }
+
 const DateRangePicker = (props: DateRangePickerProps) => {
  const { setRange, range, getCacheSeries } = props;

@ -45,6 +46,7 @@ const DateRangePicker = (props: DateRangePickerProps) => {
            }
          }}
        />
+
        <DatePicker
          disableFuture
          minDate={dayjs(range[0])}
@ -54,6 +56,9 @@ const DateRangePicker = (props: DateRangePickerProps) => {
            ".Mui-disabled": {
              color: "red",
            },
+            ".MuiPickersDay-root .Mui-selected": {
+              backgroundColor: "red",
+            },
          }}
          onChange={(newValue) => {
            if (newValue) {
--- a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
+++ b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
@ -60,7 +60,7 @@ export const fetchData = (
 const ScalarGraph = () => {
  const timeRange = createTimes(
    UnixTime.now() /* .fromTicks(1682085650) */
-      .rangeBefore(TimeSpan.fromDays(1)),
+      .rangeBefore(TimeSpan.fromDays(5)),
    NUMBER_OF_NODES
  );
  const [timeSeries, setTimeSeries] = useState<RecordSeries>([]);
--- a/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx
+++ b/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx
@ -0,0 +1,41 @@
+import { styled, SxProps, Tab, Tabs, Theme, useTheme } from "@mui/material";
+import { TabProps } from "@mui/material/Tab/Tab";
+
+const InnovenergyTab = (props: any) => {
+  const theme = useTheme();
+  return (
+    <Tab
+      {...props}
+      disableRipple
+      sx={{
+        ...props.sx,
+        bottom: -1,
+        textTransform: "uppercase",
+        fontWeight: theme.typography.fontWeightRegular,
+        fontSize: theme.typography.pxToRem(14),
+        marginRight: theme.spacing(1),
+        background: "0 0",
+        border: "1px solid transparent",
+        borderTopLeftRadius: "0.3rem",
+        borderTopRightRadius: "0.3rem",
+        padding: ".5rem 1rem",
+        textDecoration: "none",
+        transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
+        "&.Mui-selected": {
+          color: "#000000",
+          backgroundColor: "#CCD6E4",
+          borderColor: "#90A7c5 #90A7c5 #F2F4F8",
+          marginTop: "1px",
+          bottom: -1,
+          ...(props.sx ? props.sx["&.Mui-selected"] : {}),
+        },
+        "&.Mui-focusVisible": {
+          backgroundColor: "rgba(100, 95, 228, 0.32)",
+          ...(props.sx ? props.sx["&.Mui-focusVisible"] : {}),
+        },
+      }}
+    />
+  );
+};
+
+export default InnovenergyTab;
--- a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx
+++ b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx
@ -0,0 +1,42 @@
+import { SxProps, Tabs, Theme } from "@mui/material";
+import { ReactNode } from "react";
+
+interface AntTabsProps {
+  id: string;
+  value?: string;
+  sx?: SxProps<Theme>;
+  children: ReactNode;
+}
+
+const InnovenergyTabs = (props: AntTabsProps) => {
+  return (
+    <Tabs
+      {...props}
+      sx={{
+        ...props.sx,
+        borderBottom: "1px solid #90A7c5",
+        overflow: "visible!important",
+        "& div.MuiTabs-scroller": {
+          overflow: "visible!important",
+        },
+        "&.Mui-selected": {
+          color: "#000000",
+          backgroundColor: "red",
+          borderColor: `#90A7c5 #90A7c5 #fff`,
+        },
+        "& .MuiTabs-indicator": {
+          display: "flex",
+          justifyContent: "center",
+          backgroundColor: "transparent",
+        },
+        "&.MuiTabs-root": {
+          width: "100%",
+        },
+      }}
+    >
+      {props.children}
+    </Tabs>
+  );
+};
+
+export default InnovenergyTabs;
--- a/typescript/Frontend/src/components/Layout/ModeButtons.tsx
+++ b/typescript/Frontend/src/components/Layout/ModeButtons.tsx
@ -13,23 +13,6 @@ const ModeButtons = () => {

  return (
    <>
-      {/*   <AntTabs
-        value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
-        aria-label="basic tabs example"
-      >
-        <StyledTab
-          icon={<ListIcon />}
-          value={routes.installations + routes.list + "*"}
-          component={Link}
-          to={routes.list}
-        />
-        <StyledTab
-          icon={<AccountTreeIcon />}
-          value={routes.installations + routes.tree + "*"}
-          component={Link}
-          to={routes.tree}
-        />
-      </AntTabs> */}
      <ToggleButtonGroup
        id="mode-button-group"
        color="primary"
--- a/typescript/Frontend/src/components/Layout/NavigationButtons.tsx
+++ b/typescript/Frontend/src/components/Layout/NavigationButtons.tsx
@ -2,13 +2,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import routes from "../../routes.json";
-import {
-  AntTabs,
-  AntTabsBig,
-  StyledTab,
-  StyledTabBig,
-} from "../../util/installation.util";
-import { Background } from "reactflow";
+import InnovenergyTab from "./InnovenergyTab";
+import InnovenergyTabs from "./InnovenergyTabs";

 const NavigationButtons = () => {
  const routeMatch = useRouteMatch([
@ -19,37 +14,11 @@ const NavigationButtons = () => {

  return (
    <>
-      {/*   <ToggleButtonGroup
-        color="primary"
+      <InnovenergyTabs
+        id="navigation-buttons-tabs"
        value={routeMatch?.pattern?.path}
-        exclusive
-        sx={{ mb: 1 }}
-        fullWidth
      >
-        <ToggleButton
-          value={routes.installations + "*"}
-          component={Link}
-          to={routes.installations}
-        >
-          <FormattedMessage id="installations" defaultMessage="Installations" />
-        </ToggleButton>
-        <ToggleButton
-          value={routes.users + "*"}
-          component={Link}
-          to={routes.users}
-        >
-          <FormattedMessage id="users" defaultMessage="Users" />
-        </ToggleButton>
-      </ToggleButtonGroup> */}
-      <AntTabsBig
-        id="navigation-buttons-group"
-        value={routeMatch?.pattern?.path}
-        aria-label={intl.formatMessage({
-          id: "navigationTabs",
-          defaultMessage: "Navigation tabs",
-        })}
-      >
-        <StyledTabBig
+        <InnovenergyTab
          id="navigation-tab-installations"
          value={routes.installations + "*"}
          component={Link}
@ -61,14 +30,14 @@ const NavigationButtons = () => {
            />
          }
        />
-        <StyledTabBig
+        <InnovenergyTab
          id="navigation-tab-users"
          value={routes.users + "*"}
          component={Link}
          to={routes.users}
          label={<FormattedMessage id="users" defaultMessage="Users" />}
        />
-      </AntTabsBig>
+      </InnovenergyTabs>
    </>
  );
 };
--- a/typescript/Frontend/src/components/Users/UserTabs.tsx
+++ b/typescript/Frontend/src/components/Users/UserTabs.tsx
@ -3,11 +3,8 @@ import { Link } from "react-router-dom";
 import routes from "../../routes.json";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
-import {
-  AntTabs,
-  StyledTab,
-  StyledTabBlue,
-} from "../../util/installation.util";
+import InnovenergyTab from "../Layout/InnovenergyTab";
+import InnovenergyTabs from "components/Layout/InnovenergyTabs";

 const UserTabs = () => {
  const routeMatch = useRouteMatch([routes.users + routes.user + ":id"]);
@ -17,7 +14,7 @@ const UserTabs = () => {

  if (id) {
    return (
-      <AntTabs
+      <InnovenergyTabs
        id="users-tabs"
        value={routeMatch?.pattern?.path ?? routes.user + ":id"}
        aria-label={intl.formatMessage({
@ -25,7 +22,7 @@ const UserTabs = () => {
          defaultMessage: "user tabs",
        })}
      >
-        <StyledTabBlue
+        <InnovenergyTab
          id="users-tab-user"
          label={intl.formatMessage({
            id: "user",
@ -34,8 +31,13 @@ const UserTabs = () => {
          value={routes.users + routes.user + ":id"}
          component={Link}
          to={routes.user + id}
+          sx={{
+            "&.Mui-selected": {
+              backgroundColor: "#CCD6E4",
+            },
+          }}
        />
-      </AntTabs>
+      </InnovenergyTabs>
    );
  }
  return null;
--- a/typescript/Frontend/src/library.scss
+++ b/typescript/Frontend/src/library.scss
@ -0,0 +1 @@
+$innovenergy-orange: #F59100;
--- a/typescript/Frontend/tsconfig.json
+++ b/typescript/Frontend/tsconfig.json
@ -1,5 +1,6 @@
 {
  "compilerOptions": {
+    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "dom",