small UI fix (#812)

AntaresSimulatorTeam · Apr 8, 2022 · 06984f8 · 06984f8
1 parent 7f9840f
commit 06984f8
Show file tree

Hide file tree

Showing 18 changed files with 186 additions and 128 deletions.
diff --git a/webapp_v2/public/locales/en/studymanager.json b/webapp_v2/public/locales/en/studymanager.json
@@ -55,5 +55,7 @@
   "versionsLabel": "Versions",
   "usersLabel": "Users",
   "groupsLabel": "Groups",
-  "tagsLabel": "Tags"
+  "tagsLabel": "Tags",
+  "bookmark": "Bookmark",
+  "removeFavorite": "Remove from favorites"
 }
diff --git a/webapp_v2/public/locales/fr/studymanager.json b/webapp_v2/public/locales/fr/studymanager.json
@@ -56,5 +56,7 @@
   "versionsLabel": "Versions",
   "usersLabel": "Utilisateurs",
   "groupsLabel": "Groupes",
-  "tagsLabel": "Tags"
+  "tagsLabel": "Tags",
+  "bookmark": "Ajouter aux favoris",
+  "removeFavorite": "Retirer des favoris"
 }
diff --git a/webapp_v2/src/common/types.ts b/webapp_v2/src/common/types.ts
@@ -302,6 +302,17 @@ export enum WSEvent {
   MAINTENANCE_MODE = "MAINTENANCE_MODE",
 }
 
+export enum DefaultFilterKey {
+  USERS = "v2.studylisting.filter.user",
+  GROUPS = "v2.studylisting.filter.group",
+  VERSIONS = "v2.studylisting.filter.version",
+  MANAGED = "v2.studylisting.filter.managed",
+  SORTING = "v2.studylisting.filter.sorting",
+  FOLDER = "v2.studylisting.filter.folder",
+  FAVORITE_STUDIES = "v2.studylisting.favorite",
+  TAGS = "v2.studylisting.filter.tag",
+}
+
 export interface WSMessage {
   type: string;
   payload: unknown;

diff --git a/webapp_v2/src/components/common/FilledTextInput.tsx b/webapp_v2/src/components/common/FilledTextInput.tsx
@@ -33,6 +33,7 @@ function FilledTextInput(props: Props) {
       inputProps={inputProps}
       sx={{
         ...sx,
+        minHeight: 0,
         background: "rgba(255, 255, 255, 0.09)",
         borderRadius: "4px 4px 0px 0px",
         borderBottom: "1px solid rgba(255, 255, 255, 0.42)",

diff --git a/webapp_v2/src/components/common/SelectMulti.tsx b/webapp_v2/src/components/common/SelectMulti.tsx
@@ -80,6 +80,7 @@ function SelectMulti(props: Props) {
         onChange={handleChange}
         renderValue={tagsMode === true ? chipRender : checkboxRender}
         sx={{
+          minHeight: 0,
           background: "rgba(255, 255, 255, 0.09)",
           borderRadius: "4px 4px 0px 0px",
           borderBottom: "1px solid rgba(255, 255, 255, 0.42)",

diff --git a/webapp_v2/src/components/common/SelectSingle.tsx b/webapp_v2/src/components/common/SelectSingle.tsx
@@ -45,6 +45,7 @@ function SelectSingle(props: Props) {
         placeholder={placeholder}
         onChange={handleChange}
         sx={{
+          minHeight: 0,
           background: "rgba(255, 255, 255, 0.09)",
           borderRadius: "4px 4px 0px 0px",
           borderBottom: "1px solid rgba(255, 255, 255, 0.42)",

diff --git a/webapp_v2/src/components/common/loaders/MainContentLoader/index.tsx b/webapp_v2/src/components/common/loaders/MainContentLoader/index.tsx
@@ -1,23 +1,36 @@
 import "./style.css";
+import { Box } from "@mui/material";
 import logo from "./logo.png";
 
 function MainContentLoader() {
   return (
-    <>
-      <img
-        src={logo}
-        alt="logo"
-        style={{
-          width: "64px",
-          height: "64px",
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          margin: "-32px 0 0 -32px",
-        }}
-      />
-      <div className="nest3" />
-    </>
+    <Box
+      width="100%"
+      height="100%"
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Box
+        width="auto"
+        height="auto"
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <img
+          src={logo}
+          alt="logo"
+          style={{
+            width: "64px",
+            height: "64px",
+          }}
+        />
+        <div className="nest3" />
+      </Box>
+    </Box>
   );
 }
 

diff --git a/webapp_v2/src/components/common/loaders/MainContentLoader/style.css b/webapp_v2/src/components/common/loaders/MainContentLoader/style.css
@@ -2,11 +2,8 @@
 .nest3 {
   display: block;
   position: absolute;
-  top: 50%;
-  left: 50%;
   height: 94px;
   width: 94px;
-  margin: -48px 0 0 -48px;
   border: 2px solid transparent;
   border-top-color: #002a5e;
   box-shadow: 0 0 5px #00a3ca;

diff --git a/webapp_v2/src/components/singlestudy/HomeView/index.tsx b/webapp_v2/src/components/singlestudy/HomeView/index.tsx
@@ -26,16 +26,18 @@ function HomeView(props: Props) {
       style={{
         display: "flex",
         flexDirection: "row",
+        flex: 1,
       }}
     >
       <Box
+        height="100%"
         display="flex"
         flexDirection="column"
         justifyContent="flex-start"
         alignItems="flex-start"
         boxSizing="border-box"
         overflow="hidden"
-        p={2}
+        px={2}
       >
         <StudyTreeView
           study={study}
@@ -45,6 +47,7 @@ function HomeView(props: Props) {
         />
       </Box>
       <Box
+        height="100%"
         display="flex"
         flexDirection="column"
         justifyContent="center"

diff --git a/webapp_v2/src/components/singlestudy/NavHeader.tsx b/webapp_v2/src/components/singlestudy/NavHeader.tsx
@@ -204,7 +204,11 @@ function NavHeader(props: PropTypes) {
         alignItems="center"
         boxSizing="border-box"
       >
-        <ArrowBackIcon color="secondary" />
+        <ArrowBackIcon
+          color="secondary"
+          onClick={onBackClick}
+          sx={{ cursor: "pointer" }}
+        />
         <Button variant="text" color="secondary" onClick={onBackClick}>
           {isExplorer === true && study ? study.name : t("main:studies")}
         </Button>

diff --git a/webapp_v2/src/components/singlestudy/PropertiesModal.tsx b/webapp_v2/src/components/singlestudy/PropertiesModal.tsx
@@ -247,14 +247,14 @@ function PropertiesModal(props: Props) {
               setValue={(value: string) =>
                 setPublicMode(value as StudyPublicMode)
               }
-              sx={{ flexGrow: 1, mr: 1 }}
+              sx={{ flexGrow: 1, mr: 1, height: "60px" }}
             />
             <MultiSelect
               name={t("studymanager:group")}
               list={groupList}
               data={group}
               setValue={setGroup}
-              sx={{ flexGrow: 1, ml: 1 }}
+              sx={{ flexGrow: 1, ml: 1, height: "60px" }}
             />
           </Box>
         </Box>

diff --git a/webapp_v2/src/components/studies/CreateStudyModal.tsx b/webapp_v2/src/components/studies/CreateStudyModal.tsx
@@ -66,8 +66,11 @@ function CreateStudyModal(props: PropTypes) {
   const [group, setGroup] = useState<Array<string>>([]);
   const [tags, setTags] = useState<Array<string>>([]);
   const [groupList, setGroupList] = useState<Array<GroupDTO>>([]);
+  const [actionButtonDisabled, setActionButtonDisabled] =
+    useState<boolean>(false);
 
   const onSubmit = async () => {
+    setActionButtonDisabled(true);
     if (studyName && studyName.replace(/\s+/g, "") !== "") {
       try {
         let vrs = versionList[versionList.length - 1].id as number;
@@ -99,6 +102,7 @@ function CreateStudyModal(props: PropTypes) {
       onClose();
     } else {
       enqueueSnackbar(t("data:emptyName"), { variant: "error" });
+      setActionButtonDisabled(false);
     }
   };
 
@@ -130,6 +134,7 @@ function CreateStudyModal(props: PropTypes) {
       onClose={onClose}
       closeButtonLabel={t("main:cancelButton")}
       actionButtonLabel={t("main:create")}
+      actionButtonDisabled={actionButtonDisabled}
       onActionButtonClick={onSubmit}
       rootStyle={{
         width: "600px",
@@ -163,13 +168,14 @@ function CreateStudyModal(props: PropTypes) {
             label={`${t("studymanager:studyName")} *`}
             value={studyName}
             onChange={setStudyName}
-            sx={{ flexGrow: 1, mr: 2 }}
+            sx={{ flexGrow: 1, mr: 2, height: "60px" }}
           />
           <SingleSelect
             name={`${t("studymanager:version")} *`}
             list={versionList}
             data={version}
             setValue={setVersion}
+            sx={{ flexGrow: 1, height: "60px" }}
           />
         </Box>
         <Box
@@ -195,14 +201,14 @@ function CreateStudyModal(props: PropTypes) {
               setValue={(value: string) =>
                 setPublicMode(value as StudyPublicMode)
               }
-              sx={{ flexGrow: 1, mr: 1 }}
+              sx={{ flexGrow: 1, mr: 1, height: "60px" }}
             />
             <MultiSelect
               name={t("studymanager:group")}
               list={groupList}
               data={group}
               setValue={setGroup}
-              sx={{ flexGrow: 1, ml: 1 }}
+              sx={{ flexGrow: 1, ml: 1, height: "60px" }}
             />
           </Box>
         </Box>

diff --git a/webapp_v2/src/components/studies/Header.tsx b/webapp_v2/src/components/studies/Header.tsx
@@ -26,7 +26,7 @@ const Root = styled("div")(({ theme }) => ({
   flexFlow: "column nowrap",
   justifyContent: "flex-start",
   alignItems: "center",
-  padding: theme.spacing(2, 0),
+  padding: theme.spacing(2, 3),
   boxSizing: "border-box",
 }));
 
@@ -67,7 +67,7 @@ function Header(props: Props) {
 
   return (
     <Root>
-      <Box width="100%" alignItems="center" display="flex" px={3}>
+      <Box width="100%" alignItems="center" display="flex">
         <Box alignItems="center" display="flex">
           <TravelExploreOutlinedIcon
             sx={{ color: "text.secondary", width: "42px", height: "42px" }}
@@ -100,7 +100,7 @@ function Header(props: Props) {
           )}
         </Box>
       </Box>
-      <Box display="flex" width="100%" alignItems="center" py={2} px={3}>
+      <Box display="flex" width="100%" alignItems="center">
         <Box display="flex" width="100%" alignItems="center">
           <TextField
             id="standard-basic"

diff --git a/webapp_v2/src/components/studies/SideNav.tsx b/webapp_v2/src/components/studies/SideNav.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
 import { Box, Typography, List, ListItem, ListItemText } from "@mui/material";
 import { scrollbarStyle, STUDIES_SIDE_NAV_WIDTH } from "../../theme";
 import StudyTree from "./StudyTree";
@@ -13,6 +14,7 @@ interface Props {
 }
 
 function SideNav(props: Props) {
+  const navigate = useNavigate();
   const { studies, folder, setFolder, favorite } = props;
   const [tree, setTree] = useState<StudyTreeNode>(buildStudyTree(studies));
   useEffect(() => {
@@ -35,6 +37,7 @@ function SideNav(props: Props) {
         {favorite.map((elm) => (
           <ListItem
             key={elm.id}
+            onClick={() => navigate(`/studies/${elm.id}`)}
             sx={{
               width: "100%",
               m: 0,