Updating launch config and metadata UI

dsi-icl · Jan 2, 2024 · bb3b37d · bb3b37d
1 parent 5c199ac
commit bb3b37d
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 46 deletions.
diff --git a/apps/ove-core-ui/src/pages/project-editor/file-upload/file-upload.tsx b/apps/ove-core-ui/src/pages/project-editor/file-upload/file-upload.tsx
@@ -9,13 +9,15 @@ type FileUploadProps = {
   getLatest: (id: string) => FileT
   addFile: (name: string, data: string, assetId?: string) => void
   setDialogStyle: (style: CSSProperties | undefined) => void
+  closeDialog: () => void
 }
 
 const FileUpload = ({
   addFile,
   files,
   getLatest,
-  setDialogStyle
+  setDialogStyle,
+  closeDialog
 }: FileUploadProps) => {
   const [mode, setMode] = useState<"upload" | "editor">("upload");
   const names = files.map(({ name }) => name).filter((name, i, arr) => arr.indexOf(name) === i);
@@ -59,7 +61,7 @@ const FileUpload = ({
     <Upload file={convertCustomFile(customFile) ?? file} getLatest={getLatest}
             names={names} files={files} onSubmit={onSubmit}
             handleSubmit={handleSubmit} setMode={setMode}
-            register={register} /> :
+            register={register} closeDialog={closeDialog} /> :
     <Editor file={customFile} save={saveCustomFile}
             close={() => setMode("upload")} />;
 };

diff --git a/apps/ove-core-ui/src/pages/project-editor/file-upload/upload.tsx b/apps/ove-core-ui/src/pages/project-editor/file-upload/upload.tsx
@@ -16,9 +16,10 @@ type UploadProps = {
   setMode: (key: "editor") => void
   getLatest: (id: string) => FileT
   file: File[]
+  closeDialog: () => void
 }
 
-const colors = actionColors.concat(dataTypes.map(({color}) => color));
+const colors = actionColors.concat(dataTypes.map(({ color }) => color));
 
 const Upload = ({
   names,
@@ -28,16 +29,17 @@ const Upload = ({
   register,
   setMode,
   getLatest,
-  file
+  file,
+  closeDialog
 }: UploadProps) => {
   const { ref, ...rest } = register("file");
   const fileRef = useRef<HTMLInputElement | null>(null);
 
   return <section
     id={styles["upload"]}>
     <header>
-    <h2>Project Files</h2>
-      <button><X size="1.25rem" /></button>
+      <h2>Project Files</h2>
+      <button onClick={closeDialog}><X size="1.25rem" /></button>
     </header>
     <ul>
       {names.map((name, i) =>

diff --git a/apps/ove-core-ui/src/pages/project-editor/launch-config/launch-config.module.scss b/apps/ove-core-ui/src/pages/project-editor/launch-config/launch-config.module.scss
@@ -20,7 +20,7 @@
 
     & select {
       border: 1px solid black;
-      border-radius: 1.25rem;
+      border-radius: 0.25rem;
       padding: 0.25rem;
     }
 
@@ -41,7 +41,7 @@
         color: white;
         background-color: #002147;
         padding: 0.25rem;
-        border-radius: 1.25rem;
+        border-radius: 0.25rem;
         margin-top: 0.5rem;
         margin-bottom: 0.5rem;
       }

diff --git a/apps/ove-core-ui/src/pages/project-editor/metadata/metadata.module.scss b/apps/ove-core-ui/src/pages/project-editor/metadata/metadata.module.scss
@@ -2,50 +2,57 @@
   width: 100%;
   height: 100%;
 
-  & h2 {
-    text-align: center;
-    font-weight: 700;
+  & header {
+    display: flex;
+    width: 100%;
+
+    & h2 {
+      font-weight: 700;
+      font-size: 1.25rem;
+    }
+
+    & button {
+      margin-left: auto;
+    }
   }
 
   & form {
     display: flex;
     flex-direction: column;
     width: 80%;
     height: calc(100% - 1.5rem);
-    margin: 0 10%;
+    margin: 0.25rem 10% 0;
     overflow-y: scroll;
 
     & label {
       font-weight: 700;
       font-size: 1rem;
-      margin-top: 0.5rem;
+      margin-top: 0.75rem;
     }
 
     & input {
       border: 1px solid black;
-      border-radius: 1.25rem;
+      border-radius: 0.25rem;
       padding: 0.25rem;
-      min-height: 1.5rem;
+      min-height: 2rem;
     }
 
     & textarea {
       border: 1px solid black;
-      border-radius: 1.25rem;
+      border-radius: 0.25rem;
       padding: 0.25rem;
-      min-height: 3rem;
+      min-height: 4rem;
     }
 
     .submit {
+      display: flex;
       margin-top: auto;
+      justify-content: center;
     }
 
     & button {
-      width: 100%;
       margin-top: 0.5rem;
-      background-color: #002147;
-      color: white;
-      border-radius: 1.25rem;
-      padding: 0.25rem;
+      width: 50%;
     }
 
     .publications {
@@ -60,7 +67,7 @@
 
         & li {
           list-style: disc outside;
-          width: 100%;
+          width: calc(100% - 1rem);
           margin-left: 1rem;
 
           & div {
@@ -73,8 +80,6 @@
             all: initial;
             cursor: pointer;
             margin-left: auto;
-            border: 1px solid black;
-            border-radius: 50%;
           }
         }
       }
@@ -101,10 +106,10 @@
         width: 100%;
         display: flex;
         margin-bottom: 0.5rem;
+        gap: 0.25rem;
 
         & li {
           padding: 0.25rem;
-          margin: 0 0.25rem;
           border-radius: 1.25rem;
           color: white;
           display: flex;
@@ -159,14 +164,14 @@
       .section {
         display: flex;
         flex-wrap: wrap;
+        gap: 0.25rem;
         margin-top: 0.5rem;
 
         & li {
           background-color: #002147;
           padding: 0.25rem 0.5rem;
           border-radius: 1.25rem;
           color: white;
-          margin: 0 0.25rem;
           display: flex;
           align-items: center;
         }
@@ -186,9 +191,5 @@
         }
       }
     }
-
-    & label {
-      margin-top: unset;
-    }
   }
 }
diff --git a/apps/ove-core-ui/src/pages/project-editor/metadata/metadata.tsx b/apps/ove-core-ui/src/pages/project-editor/metadata/metadata.tsx
@@ -6,6 +6,8 @@ import { type Project, User } from "@prisma/client";
 import S3FileSelect from "../../../components/s3-file-select/s3-file-select";
 
 import styles from "./metadata.module.scss";
+import { Button } from "@ove/ui-base-components";
+import { actionColors } from "../utils";
 
 export type ProjectMetadata = Pick<Project, "title" | "description" | "thumbnail" | "creatorId" | "tags" | "publications" | "collaboratorIds" | "presenterNotes" | "notes">
 
@@ -24,6 +26,7 @@ type MetadataProps = {
   uninvited: User[],
   inviteCollaborator: (id: string) => void
   removeCollaborator: (id: string) => void
+  closeDialog: () => void
 }
 
 type MetadataForm = ProjectMetadata & {
@@ -34,8 +37,6 @@ type MetadataForm = ProjectMetadata & {
   collaborator: string
 }
 
-const colors = ["#ef476f", "#f78c6b", "#ffd166", "#06d6a0", "#118ab2", "#002147", "#FA9E78", "#FDEBDC", "#6B9A9B"];
-
 const Metadata = ({
   files,
   project,
@@ -50,7 +51,8 @@ const Metadata = ({
   invited,
   uninvited,
   inviteCollaborator,
-  removeCollaborator
+  removeCollaborator,
+  closeDialog
 }: MetadataProps) => {
   const [tags, setTags] = useState(project.tags);
   const [publications, setPublications] = useState(project.publications);
@@ -118,7 +120,10 @@ const Metadata = ({
   };
 
   return <section id={styles["metadata"]}>
-    <h2>Project Details</h2>
+    <header>
+      <h2>Project Details</h2>
+      <button onClick={closeDialog}><X size="1.25rem" /></button>
+    </header>
     <form onSubmit={handleSubmit(onSubmit)}>
       <label htmlFor="title">Title:</label>
       <input {...register("title")} />
@@ -137,7 +142,7 @@ const Metadata = ({
       <ul className={styles.tags}>
         <div className={styles.selected}>
           {tags.map((tag, i) => <li key={tag}
-                                    style={{ backgroundColor: colors[i % tags.length] }}>{tag}
+                                    style={{ backgroundColor: actionColors[i % tags.length] }}>{tag}
             <button type="button"
                     onClick={() => setTags(cur => cur.filter(x => x !== tag))}>
               <X /></button>
@@ -201,9 +206,11 @@ const Metadata = ({
               <X /></button>
           </li>)}
         </div>
-        <li className={styles.new}><input {...register("collaborator")}
-                                          placeholder="Invite Collaborator:"
-                                          list="collaborator-backing" />
+        <li className={styles.new}
+            style={{ marginTop: collaborators_.length > 0 ? "0.75rem" : 0 }}>
+          <input {...register("collaborator")}
+                 placeholder="Invite Collaborator:"
+                 list="collaborator-backing" />
           <datalist id="collaborator-backing">
             {uninvited.filter(({ username }) => collaborators_.find(c => c.username === username) === undefined).map(({ username }) =>
               <option key={username} value={username}>{username}</option>)}
@@ -215,7 +222,7 @@ const Metadata = ({
       <label htmlFor="presenterNotes">Presenter Notes:</label>
       <textarea {...register("presenterNotes")} />
       <div className={styles.submit}>
-        <button type="submit">SAVE</button>
+        <Button variant="default" type="submit">SAVE</Button>
       </div>
     </form>
   </section>;

diff --git a/apps/ove-core-ui/src/pages/project-editor/page.tsx b/apps/ove-core-ui/src/pages/project-editor/page.tsx
@@ -31,21 +31,25 @@ import Metadata, { type ProjectMetadata } from "./metadata/metadata";
 import styles from "./page.module.scss";
 
 const getDialogStyling = (action: ActionsT | null): CSSProperties | undefined => {
-  if (action === "launch") return { width: "20vw", aspectRatio: "4/3", borderRadius: "0.25rem" };
+  if (action === "launch") return {
+    width: "20vw",
+    aspectRatio: "4/3.25",
+    borderRadius: "0.25rem"
+  };
   if (action !== null && ["controller", "custom-config", "env"].includes(action)) return {
     width: "60vw", borderRadius: "0.25rem"
-  }
+  };
 
   return { borderRadius: "0.25rem" };
 };
 
 const getInnerDialogStyling = (action: ActionsT | null): CSSProperties | undefined => {
   if (action !== null && ["controller", "custom-config", "env"].includes(action)) return {
     padding: "0"
-  }
+  };
   if (action === "import-section") return {
     padding: "1rem"
-  }
+  };
 
   return undefined;
 };
@@ -118,7 +122,8 @@ const ProjectEditor = ({
                          allTags={tags} invited={invited} uninvited={uninvited}
                          generator={generateThumbnail} accepted={accepted}
                          inviteCollaborator={inviteCollaborator}
-                         removeCollaborator={removeCollaborator} />;
+                         removeCollaborator={removeCollaborator}
+                         closeDialog={() => setAction(null)} />;
       case "import-section":
         return <SectionImporter
           addToState={sections.addToState} colors={dataTypes}
@@ -134,7 +139,7 @@ const ProjectEditor = ({
       }
       case "upload":
         return <FileUpload files={assets} getLatest={getLatest}
-                           addFile={addFile}
+                           addFile={addFile} closeDialog={() => setAction(null)}
                            setDialogStyle={setInnerDialogStyle} />;
       case "launch":
         return <LaunchConfig observatories={Object.keys(observatories)}