feat: list the models in the imagine sidenav (#107)

* disnplay models in side nav * styles: add open and close animation to the accordion component * reorganize imagine settings * split inputs into base settings and model settings * fix overflow-x when showing input info bug * styles: display imagine image inputs before the prompt input on mobile * show the morpheus brand in the navbar on mobile * feat: standardize the ipainting image sizes * feat: display the imagine menu inside a modal on mobile * fix responsive problem with image inputs width
Monadical-SAS · Aug 26, 2023 · a2a13d9 · a2a13d9
1 parent f797daa
commit a2a13d9
Show file tree

Hide file tree

Showing 27 changed files with 885 additions and 431 deletions.
diff --git a/morpheus-client/components/ImageGallery/ImageGallery.module.scss b/morpheus-client/components/ImageGallery/ImageGallery.module.scss
@@ -36,6 +36,10 @@
   min-height: 420px;
   flex: 1;
 
+  @include media.mobile {
+    min-height: auto;
+  }
+
   &.small {
     height: 300px;
   }

diff --git a/morpheus-client/components/ImagineBase/ImagineBase.module.scss b/morpheus-client/components/ImagineBase/ImagineBase.module.scss
@@ -1,16 +1,34 @@
 @use "styles/colors";
 @use "styles/media";
 
+.imageInputsContainer {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 24px;
+  flex: 1;
+  margin-bottom: 48px;
+
+  @include media.mobile {
+    margin-bottom: 16px;
+  }
+}
+
 .imagineBase {
   height: 100%;
   flex: 1 auto;
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 80px);
+  min-width: 300px;
+  max-width: 100vw;
 
   @include media.mobile {
     flex-direction: column;
     max-height: 100%;
+    background-color: colors.$background-secondary;
   }
 
   .imagesContent {
@@ -24,32 +42,18 @@
     border-bottom-left-radius: 24px;
     background-color: colors.$background-primary;
 
+    @include media.tablet {
+      border-bottom-left-radius: 0;
+    }
+
     @include media.mobile {
       flex-direction: column;
-      padding: 24px 24px 24px 24px;
+      padding: 48px 24px 48px 24px;
       height: 100%;
       max-height: 100%;
       border-bottom-left-radius: 0;
     }
 
-    .inputImage {
-      max-width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      flex: 1;
-      gap: 30px;
-      margin-bottom: 48px;
-
-      @include media.mobile {
-        flex: 0 1 50%;
-        flex-direction: column;
-        width: 100%;
-        max-width: 100%;
-        margin-right: 0;
-      }
-    }
-
     .results {
       width: 100%;
       height: 100%;

diff --git a/morpheus-client/components/ImagineBase/ImagineBase.tsx b/morpheus-client/components/ImagineBase/ImagineBase.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { Fragment } from "react";
 import ImagineMenu from "../../components/ImagineMenu/ImagineMenu";
-import ImageDraggable from "@/components/ImageDraggable/ImageDraggable";
+import ImagineImageInput from "@/components/ImagineImageInput/ImagineImageInput";
 import ImageGallery from "@/components/ImageGallery/ImageGallery";
 import ImagineInput from "@/components/ImagineInput/ImagineInput";
 import ImagineLayout from "@/layout/ImagineLayout/ImagineLayout";
@@ -29,35 +29,42 @@ const ImagineBase = (props: MainContainerProps) => {
     />
   );
 
+  const ImageInputs = (props.showImageInput || props.showMaskInput) && (
+    <div className={styles.imageInputsContainer}>
+      {props.showImageInput && (
+        <ImagineImageInput
+          label={"Base Image"}
+          imageFile={img2imgFile}
+          setImageFile={setImg2imgFile}
+          showEditImage={props.showMaskInput}
+          showPaintImageLink={true}
+        />
+      )}
+      {props.showMaskInput && (
+        <ImagineImageInput
+          label={"Mask image"}
+          imageFile={maskFile}
+          setImageFile={setMaskFile}
+          icon={<UploadMaskIcon />}
+          showPaintMask={img2imgFile !== null}
+        />
+      )}
+    </div>
+  );
+
   return (
     <ImagineLayout>
       <main className={styles.imagineBase}>
-        {isMobile && <ImagineMenu />}
-        {isMobile && ImagineInputInstance}
+        {isMobile && (
+          <Fragment>
+            <ImagineMenu />
+            {ImageInputs}
+            {ImagineInputInstance}
+          </Fragment>
+        )}
 
         <div className={styles.imagesContent}>
-          {(props.showImageInput || props.showMaskInput) && (
-            <div className={styles.inputImage}>
-              {props.showImageInput && (
-                <ImageDraggable
-                  label={"Base Image"}
-                  imageFile={img2imgFile}
-                  setImageFile={setImg2imgFile}
-                  showEditImage={props.showMaskInput}
-                  showPaintImageLink={true}
-                />
-              )}
-              {props.showMaskInput && (
-                <ImageDraggable
-                  label={"Mask image"}
-                  imageFile={maskFile}
-                  setImageFile={setMaskFile}
-                  icon={<UploadMaskIcon />}
-                  showPaintMask={img2imgFile !== null}
-                />
-              )}
-            </div>
-          )}
+          {!isMobile && ImageInputs}
 
           <div className={styles.results}>
             <ImageGallery />

diff --git a/...ImageDraggable/ImageDraggable.module.scss → ...eImageInput/ImagineImageInput.module.scss b/...ImageDraggable/ImageDraggable.module.scss → ...eImageInput/ImagineImageInput.module.scss
@@ -1,11 +1,31 @@
 @use "styles/colors";
 @use "styles/media";
 
-.imageDraggable {
+.imagineImageInput {
+  min-width: 244px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  min-width: 244px;
+
+  @include media.tablet {
+    min-width: auto;
+  }
+
+  @include media.mobile {
+    padding: 0 24px;
+    min-width: auto;
+    width: auto;
+    flex: 1;
+  }
+
+  @include media.xsmall {
+    max-width: 100%;
+  }
+
+  .label {
+    z-index: 9;
+    max-width: 250px;
+  }
 
   .formContainer {
     width: 100%;
@@ -23,21 +43,11 @@
     @include media.mobile {
       width: 100%;
       height: auto;
-      flex-direction: column;
-      padding: 16px;
-    }
-
-    .separator {
-      display: none;
-      width: 100%;
-      border-bottom: 5px;
-      border-style: solid;
-      margin: 24px 0;
-      border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100' fill='none' rx='8' ry='8' stroke='%23312E47FF' stroke-width='4' stroke-dasharray='10%2c 10' stroke-dashoffset='53' stroke-linecap='round'/%3e%3c/svg%3e") 30 round;
-
-      @include media.mobile {
-        display: block;
-      }
+      background-image: none;
+      justify-content: flex-start;
+      align-items: flex-start;
+      padding: 0;
+      gap: 24px;
     }
 
     .verticalSeparator {
@@ -53,7 +63,13 @@
         top: 0;
         bottom: 0;
         width: 2px;
-        background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 10px, #312E47FF 10px, #312E47FF 22px);
+        background-image: repeating-linear-gradient(
+                        to bottom, transparent 0, transparent 10px, #312E47FF 10px, #312E47FF 22px
+        );
+      }
+
+      @include media.tablet {
+        margin: 0 8px;
       }
 
       @include media.mobile {
@@ -62,29 +78,36 @@
     }
   }
 
-  .paintInfo {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-bottom: 48px;
-    position: relative;
-
-    @include media.mobile {
-      padding-bottom: 0;
-    }
-  }
-
-  .formFileUpload {
+  .formInputItem {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    min-width: 150px;
+    max-width: 170px;
+
+    @include media.tablet {
+      span {
+        display: none;
+      }
+    }
 
     @include media.mobile {
-      width: 100%;
-      height: auto;
-      padding: 0;
+      width: 160px;
+      height: 160px;
+      padding: 5px;
+      border-radius: 8px;
+      border: 1px solid colors.$background-border;
+      background-color: colors.$background-primary;
+
+      a {
+        font-size: 18px !important;
+      }
+
+      span {
+        display: none;
+      }
     }
 
     .inputFileUpload {
@@ -111,10 +134,6 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-
-      a {
-        text-decoration-line: underline;
-      }
     }
 
     .uploadButton:hover {
@@ -136,14 +155,23 @@
 
 .selectedFile {
   width: 100%;
-  min-height: 294px;
+  height: auto;
+  max-width: 300px;
+  max-height: 400px;
   position: relative;
   background-color: colors.$background-secondary;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   padding: 8px;
 
+  @include media.mobile {
+    max-width: 100%;
+    max-height: initial;
+    margin-top: -40px;
+    padding: 0;
+  }
+
   .header {
     height: auto;
     display: flex;
@@ -159,9 +187,6 @@
   }
 
   img {
-    width: auto;
-    max-width: 100%;
-    max-height: 100%;
     border-radius: 8px;
     object-fit: contain;
     box-shadow: colors.$box-shadow;