feat(ui-model): update style

AntaresSimulatorTeam · Jun 18, 2024 · 28cf785 · 28cf785
1 parent df4dffc
commit 28cf785
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 138 deletions.
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/AreasTab.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/AreasTab.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useMemo } from "react";
 import { useLocation, useNavigate, useOutletContext } from "react-router-dom";
-import { Paper } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { StudyMetadata } from "../../../../../../common/types";
 import TabWrapper from "../../TabWrapper";
@@ -83,23 +82,7 @@ function AreasTab({ renewablesClustering }: Props) {
       }));
   }, [study.id, areaId, renewablesClustering, t, study.version]);
 
-  return (
-    <Paper
-      sx={{
-        width: "100%",
-        height: "100%",
-        flexGrow: 1,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        boxSizing: "border-box",
-        overflow: "hidden",
-      }}
-    >
-      <TabWrapper study={study} tabList={tabList} />
-    </Paper>
-  );
+  return <TabWrapper study={study} tabList={tabList} />;
 }
 
 export default AreasTab;
diff --git a/...src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx b/...src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx
@@ -38,7 +38,8 @@ function InflowStructure() {
       onSubmit={handleSubmit}
       miniSubmitButton
       enableUndoRedo
-      sx={{ display: "flex", alignItems: "center", ".Form__Footer": { p: 0 } }}
+      hideFooterDivider
+      sx={{ flexDirection: "row", alignItems: "center" }}
     >
       {({ control }) => (
         <NumberFE

diff --git a/...c/components/App/Singlestudy/explore/Modelization/Areas/Hydro/ManagementOptions/index.tsx b/...c/components/App/Singlestudy/explore/Modelization/Areas/Hydro/ManagementOptions/index.tsx
@@ -36,7 +36,6 @@ function ManagementOptions() {
         defaultValues: () => getManagementOptionsFormFields(studyId, areaId),
       }}
       onSubmit={handleSubmit}
-      sx={{ pb: 2 }}
       enableUndoRedo
     >
       <Fields />

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/index.tsx
@@ -2,7 +2,6 @@ import { useMemo } from "react";
 import { useOutletContext } from "react-router";
 import { StudyMetadata } from "../../../../../../../common/types";
 import TabWrapper from "../../../TabWrapper";
-import { Root } from "./style";
 import useAppSelector from "../../../../../../../redux/hooks/useAppSelector";
 import { getCurrentAreaId } from "../../../../../../../redux/selectors";
 
@@ -37,11 +36,7 @@ function Hydro() {
   // JSX
   ////////////////////////////////////////////////////////////////
 
-  return (
-    <Root>
-      <TabWrapper study={study} tabList={tabList} />
-    </Root>
-  );
+  return <TabWrapper study={study} tabList={tabList} />;
 }
 
 export default Hydro;
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/Form.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/Form.tsx
@@ -18,7 +18,7 @@ import { getCurrentAreaId } from "../../../../../../../redux/selectors";
 import useNavigateOnCondition from "../../../../../../../hooks/useNavigateOnCondition";
 import { nameToId } from "../../../../../../../services/utils";
 
-function RenewablesForm() {
+function Renewables() {
   const { t } = useTranslation();
   const { study } = useOutletContext<{ study: StudyMetadata }>();
   const navigate = useNavigate();
@@ -51,37 +51,43 @@ function RenewablesForm() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Box sx={{ width: 1, p: 1, overflow: "auto" }}>
+    <Box sx={{ display: "flex", flexDirection: "column", overflow: "auto" }}>
       <Button
         color="secondary"
         size="small"
         onClick={() => navigate("../renewables")}
         startIcon={<ArrowBackIcon color="secondary" />}
-        sx={{ alignSelf: "flex-start", px: 0 }}
+        sx={{ alignSelf: "flex-start", mb: 1 }}
       >
         {t("button.back")}
       </Button>
-      <Form
-        key={study.id + areaId}
-        config={{ defaultValues }}
-        onSubmit={handleSubmit}
-        enableUndoRedo
-      >
-        <Fields />
-      </Form>
-      <Box
-        sx={{
-          width: 1,
-          display: "flex",
-          flexDirection: "column",
-          py: 3,
-          height: "75vh",
-        }}
-      >
-        <Matrix study={study} areaId={areaId} clusterId={nameToId(clusterId)} />
+      <Box sx={{ overflow: "auto" }}>
+        <Form
+          key={study.id + areaId}
+          config={{ defaultValues }}
+          onSubmit={handleSubmit}
+          enableUndoRedo
+        >
+          <Fields />
+        </Form>
+        <Box
+          sx={{
+            width: 1,
+            display: "flex",
+            flexDirection: "column",
+            py: 3,
+            height: "75vh",
+          }}
+        >
+          <Matrix
+            study={study}
+            areaId={areaId}
+            clusterId={nameToId(clusterId)}
+          />
+        </Box>
       </Box>
     </Box>
   );
 }
 
-export default RenewablesForm;
+export default Renewables;
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/Form.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/Form.tsx
@@ -15,7 +15,7 @@ import Matrix from "./Matrix";
 import useNavigateOnCondition from "../../../../../../../hooks/useNavigateOnCondition";
 import { nameToId } from "../../../../../../../services/utils";
 
-function StorageForm() {
+function Storages() {
   const { t } = useTranslation();
   const { study } = useOutletContext<{ study: StudyMetadata }>();
   const navigate = useNavigate();
@@ -63,39 +63,45 @@ function StorageForm() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Box sx={{ width: 1, p: 1, overflow: "auto" }}>
+    <Box sx={{ display: "flex", flexDirection: "column", overflow: "auto" }}>
       <Button
         color="secondary"
         size="small"
         onClick={() => navigate("../storages")}
         startIcon={<ArrowBackIcon color="secondary" />}
-        sx={{ alignSelf: "flex-start", px: 0 }}
+        sx={{ alignSelf: "flex-start", mb: 1 }}
       >
         {t("button.back")}
       </Button>
-      <Form
-        key={study.id + areaId}
-        config={{
-          defaultValues,
-        }}
-        onSubmit={handleSubmit}
-        enableUndoRedo
-      >
-        <Fields />
-      </Form>
-      <Box
-        sx={{
-          width: 1,
-          display: "flex",
-          flexDirection: "column",
-          py: 3,
-          height: "75vh",
-        }}
-      >
-        <Matrix study={study} areaId={areaId} storageId={nameToId(storageId)} />
+      <Box sx={{ overflow: "auto" }}>
+        <Form
+          key={study.id + areaId}
+          config={{
+            defaultValues,
+          }}
+          onSubmit={handleSubmit}
+          enableUndoRedo
+        >
+          <Fields />
+        </Form>
+        <Box
+          sx={{
+            width: 1,
+            display: "flex",
+            flexDirection: "column",
+            py: 3,
+            height: "75vh",
+          }}
+        >
+          <Matrix
+            study={study}
+            areaId={areaId}
+            storageId={nameToId(storageId)}
+          />
+        </Box>
       </Box>
     </Box>
   );
 }
 
-export default StorageForm;
+export default Storages;
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Form.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Form.tsx
@@ -49,34 +49,40 @@ function ThermalForm() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Box sx={{ width: 1, p: 1, overflow: "auto" }}>
+    <Box sx={{ display: "flex", flexDirection: "column", overflow: "auto" }}>
       <Button
         color="secondary"
         size="small"
         onClick={() => navigate("../thermal")}
         startIcon={<ArrowBackIcon color="secondary" />}
-        sx={{ alignSelf: "flex-start", px: 0 }}
+        sx={{ alignSelf: "flex-start", mb: 1 }}
       >
         {t("button.back")}
       </Button>
-      <Form
-        key={study.id + areaId}
-        config={{ defaultValues }}
-        onSubmit={handleSubmit}
-        enableUndoRedo
-      >
-        <Fields />
-      </Form>
-      <Box
-        sx={{
-          width: 1,
-          display: "flex",
-          flexDirection: "column",
-          py: 3,
-          height: "75vh",
-        }}
-      >
-        <Matrix study={study} areaId={areaId} clusterId={nameToId(clusterId)} />
+      <Box sx={{ overflow: "auto" }}>
+        <Form
+          key={study.id + areaId}
+          config={{ defaultValues }}
+          onSubmit={handleSubmit}
+          enableUndoRedo
+        >
+          <Fields />
+        </Form>
+        <Box
+          sx={{
+            width: 1,
+            display: "flex",
+            flexDirection: "column",
+            py: 3,
+            height: "75vh",
+          }}
+        >
+          <Matrix
+            study={study}
+            areaId={areaId}
+            clusterId={nameToId(clusterId)}
+          />
+        </Box>
       </Box>
     </Box>
   );

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/index.tsx
@@ -1,4 +1,3 @@
-import { Box } from "@mui/material";
 import { useOutletContext } from "react-router";
 import { StudyMetadata } from "../../../../../../common/types";
 import SimpleContent from "../../../../../common/page/SimpleContent";
@@ -14,6 +13,7 @@ import { setCurrentArea } from "../../../../../../redux/ducks/studySyntheses";
 import useAppSelector from "../../../../../../redux/hooks/useAppSelector";
 import UsePromiseCond from "../../../../../common/utils/UsePromiseCond";
 import SplitView from "../../../../../common/SplitView";
+import ViewWrapper from "../../../../../common/page/ViewWrapper";
 
 function Areas() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -38,14 +38,14 @@ function Areas() {
 
   return (
     <SplitView id="areas" sizes={[10, 90]}>
-      <Box>
-        <AreaPropsView
-          studyId={study.id}
-          onClick={handleAreaClick}
-          currentArea={currentArea?.id}
-        />
-      </Box>
-      <Box>
+      {/* Left */}
+      <AreaPropsView
+        studyId={study.id}
+        onClick={handleAreaClick}
+        currentArea={currentArea?.id}
+      />
+      {/* Right */}
+      <ViewWrapper>
         <UsePromiseCond
           response={res}
           ifResolved={(renewablesClustering) =>
@@ -58,7 +58,7 @@ function Areas() {
             )
           }
         />
-      </Box>
+      </ViewWrapper>
     </SplitView>
   );
 }

diff --git a/...onents/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx b/...onents/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx
@@ -113,14 +113,14 @@ function BindingConstView({ constraintId }: Props) {
         height: 1,
         display: "flex",
         flexDirection: "column",
-        overflow: "hidden",
+        overflow: "auto",
       }}
     >
       <UsePromiseCond
         response={mergeResponses(constraint, linksAndClusters)}
         ifResolved={([defaultValues, linksAndClusters]) => (
           <>
-            <Box sx={{ position: "absolute", right: 15 }}>
+            <Box sx={{ alignSelf: "flex-end" }}>
               <Button
                 variant="outlined"
                 size="small"

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/index.tsx
@@ -63,14 +63,14 @@ function BindingConstraints() {
       ifPending={() => <SimpleLoader />}
       ifResolved={(data) => (
         <SplitView id="binding-constraints" sizes={[10, 90]}>
-          <Box>
-            <BindingConstPropsView // TODO rename ConstraintsList
-              list={data}
-              onClick={handleConstraintChange}
-              currentConstraint={currentConstraintId}
-              reloadConstraintsList={constraints.reload}
-            />
-          </Box>
+          {/* Left */}
+          <BindingConstPropsView // TODO rename ConstraintsList
+            list={data}
+            onClick={handleConstraintChange}
+            currentConstraint={currentConstraintId}
+            reloadConstraintsList={constraints.reload}
+          />
+          {/* Right */}
           <Box>
             {data.length > 0 && currentConstraintId ? (
               <BindingConstView constraintId={currentConstraintId} />