@nyris/nyris-webapp 0.3.34 → 0.3.36

package/src/components/appMobile.scss

@@ -169,7 +169,8 @@
 
         .col-right-result-mobile {
           overflow: initial;
-
+          display: flex;
+          flex-direction: column;
           .col-left {
             max-width: 100%;
           }
@@ -281,86 +282,171 @@
         }
       }
     }
-    .footer-wrap-main {
-      position: fixed;
-      bottom: 0;
-      height: 64px;
-      flex: 1 1 auto;
+ 
+  }
+}
+
+@media screen and (max-width: 776px) {
+
+  .box-header-mobile-main {
+    // min-height: 60px;
+    z-index: 100;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: 0px !important;
+
+    &.hide {
+      display: none;
+    }
+
+    .wrap-header-mobile {
+
+      background: #FFFFFF;
+      border-bottom: 1px solid #E9E9EC;
+      box-shadow: 0px 0px 16px rgba(170, 171, 181, 0.5);
+      border-radius: 32px;
+
       width: 100%;
-      padding: 0;
-      padding-top: 0px;
-      padding-right: 0px;
-      padding-bottom: 0px;
-      padding-left: 0px;
-      background-color: #fff;
-      z-index: 11;
+      position: relative;
+      height: 48px;;
 
-      .box-icon-camera-mobile {
-        z-index: 10;
-        box-shadow: 0px 0px 16px rgba(85, 86, 107, 0.2);
-        border-radius: 100%;
+      .box-suggest-search {
         position: absolute;
+        bottom: -30px;
         left: 0;
-        right: 0;
-        width: fit-content;
-        margin: auto;
-        top: -50%;
-        width: 56px;
-        height: 56px;
-        background-color: #FFFFFF;
-        button {
-          border: 0px !important;
-          padding: 17px 14px;
-          width: 56px;
-          height: 56px;
+        width: 100%;
+        background-color: red;
+        padding: 0 50px;
+
+        &.open {
+          z-index: 100;
+          opacity: 1;
         }
-      }
-    }
-  }
-}
 
-//TODO: Custom css modal filter
-@media screen and (max-width: 776px) {
-  .wrap-mobile {
-    height: 100svh;
+        &.close {
+          z-index: -99;
+          opacity: 0;
+        }
+      }
 
-    .box-fillter {
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: calc(100% - 47px);
-      background-color: #fff;
-      overflow: auto;
-      opacity: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+      .wrap-input-search {
+        width: 100%;
 
-      ul {
-        li {
-          list-style-type: none;
+        .box-input-search {
+          background-color: #fff;
 
           input {
-            margin-right: 9px;
+            background-color: #fff;
           }
 
-          span {
-            color: #1e1f31;
-            font-size: 14px;
-            font-weight: 400;
+          .btn-mobile-filter {
+            padding: 12px;
+            width: 40px;
+            height: 40px;
+            background-color: #f7f7f7;
+            border-radius: 100%;
           }
         }
       }
+    }
+
+    .box-image-search-thumb-mobile {
+      // width: 40px;
+      height: 40px;
+      min-width: 76px;
+      margin-left: 10px;
+      position: relative;
+      display: flex;
+      border-radius: 4px;
+      max-width: 80px !important;
 
-      &.open {
-        z-index: 1000;
+      button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        min-width: 36px !important;
+        border: 0px;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
       }
+    }
+  }
+  .box-icon-camera-mobile {
+    z-index: 10;
+    box-shadow: 0px 0px 16px rgba(85, 86, 107, 0.2);
+    border-radius: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: fit-content;
+    margin: auto;
+    top: -50%;
+    width: 56px;
+    height: 56px;
+    background-color: #FFFFFF;
+    button {
+      border: 0px !important;
+      padding: 17px 14px;
+      width: 56px;
+      height: 56px;
+    }
+  }
 
-      &.close {
-        z-index: -100;
-        opacity: 0;
+  .box-filter {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 47px);
+    background-color: #fff;
+    overflow: auto;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    ul {
+      li {
+        list-style-type: none;
+
+        input {
+          margin-right: 9px;
+        }
+
+        span {
+          color: #1e1f31;
+          font-size: 14px;
+          font-weight: 400;
+        }
       }
     }
+
+    &.open {
+      z-index: 1000;
+    }
+
+    &.close {
+      z-index: -100;
+      opacity: 0;
+    }
+  }
+}
+
+//TODO: Custom css modal filter
+@media screen and (max-width: 776px) {
+  .wrap-mobile {
+    height: 100svh;
+    background-color: #F3F3F5;
+    display: flex;
+    flex-direction: column;
+   
   }
   .box-filter-mobile {
     .MuiBackdrop-root {
@@ -389,87 +475,6 @@
 
     
   }
-  .aa-DetachedContainer {
-    bottom: auto;
-  }
-  .aa-DetachedOverlay {
-    position: absolute;
-    top: 0;
-    background-color: #fff;
-    width: 100%;
-    height: auto;
-    z-index: 999;
-
-    .aa-DetachedFormContainer {
-      display: flex;
-      padding: 0;
-      flex-direction: row-reverse;
-      height: 58px;
-
-      .aa-Form {
-        display: flex;
-        width: 100%;
-
-        .aa-InputWrapper {
-          width: 100%;
-
-          input {
-            width: 100%;
-          }
-        }
-      }
-
-      .aa-DetachedCancelButton {
-        font-weight: 500 !important;
-        font-size: 30px !important;
-        position: relative;
-        color: #55566b;
-        margin-bottom: 2px;
-        padding-left: 5px;
-        padding-right: 9px;
-
-        &::after {
-          content: '';
-        }
-      }
-    }
-  }
-  .aa-Form {
-    border: 0px !important;
-
-    &:focus-within {
-      box-shadow: none !important;
-    }
-
-    .aa-SubmitButton {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 30px;
-      padding: 0px;
-
-      svg {
-        color: #000 !important;
-      }
-    }
-  }
-
-  .aa-Autocomplete {
-    width: 100%;
-
-    .aa-DetachedSearchButton {
-      border: 0px !important;
-      width: 100%;
-      padding: 0px !important;
-    }
-
-    .aa-DetachedSearchButtonIcon,
-    .aa-SubmitButton {
-      svg {
-        color: #000 !important;
-      }
-    }
-  }
 
   #box-input-search {
     position: relative;

package/src/components/carousel/ImagePreviewCarousel.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 export const ImagePreviewCarousel = (props: Props) => {
-  let { imgItem, onSearchImage, handlerCloseModal } = props;
+  let { imgItem } = props;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const mainRef: any = useRef(null);
   const thumbsRef: any = useRef(null);
@@ -60,12 +60,6 @@ export const ImagePreviewCarousel = (props: Props) => {
           style={{ objectFit: 'contain', minHeight: '400px' }}
           alt="preview"
           src={slide.url}
-          onClick={() => {
-            if (!thumbs) {
-              handlerCloseModal();
-              onSearchImage(slide.url);
-            }
-          }}
         />
       </SplideSlide>
     ));

package/src/components/drawer/cameraCustom.tsx

@@ -4,6 +4,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary';
 import { RectCoords } from '@nyris/nyris-api';
 import ReverseCamera from 'common/assets/icons/reverse_camera.svg';
+import { isEmpty } from 'lodash';
 import React, { useCallback, useRef, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useHistory } from 'react-router-dom';
@@ -38,7 +39,7 @@ function CameraCustom(props: Props) {
   const { search, settings } = stateGlobal;
   const history = useHistory();
   const dispatch = useAppDispatch();
-  const { keyFilter } = search;
+  const { preFilter } = search;
 
   const videoConstraints = {
     width: 1080,
@@ -73,10 +74,10 @@ function CameraCustom(props: Props) {
       dispatch(setSelectedRegion(region));
     }
 
-    const preFilter = [
+    const preFilterValues = [
       {
         key: settings.visualSearchFilterKey,
-        values: [`${keyFilter}`],
+        values: Object.keys(preFilter) as string[],
       },
     ];
     let filters: any[] = [];
@@ -84,7 +85,7 @@ function CameraCustom(props: Props) {
     findByImage({
       image: imageConvert,
       settings,
-      filters: keyFilter ? preFilter : undefined,
+      filters: !isEmpty(preFilter) ? preFilterValues : undefined,
       region,
     })
       .then((res: any) => {

package/src/components/input/inputSearch.tsx

@@ -35,7 +35,7 @@ const SearchBox = (props: any) => {
   // const containerRefInputMobile = useRef<HTMLDivElement>(null);
   const stateGlobal = useAppSelector(state => state);
   const { search, settings } = stateGlobal;
-  const { imageThumbSearchInput, keyFilter } = search;
+  const { imageThumbSearchInput, preFilter } = search;
   const focusInp: any = useRef<HTMLDivElement | null>(null);
   const history = useHistory();
   const [valueInput, setValueInput] = useState<string>('');
@@ -96,13 +96,14 @@ const SearchBox = (props: any) => {
       let payload: any;
       let filters: any[] = [];
       let region: RectCoords | undefined;
+
       dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
       let image = await createImage(fs[0]);
       dispatch(setRequestImage(image));
-      const preFilter = [
+      const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: [`${keyFilter}`],
+          values: Object.keys(preFilter) as string[],
         },
       ];
 
@@ -116,7 +117,7 @@ const SearchBox = (props: any) => {
       return findByImage({
         image,
         settings,
-        filters: keyFilter ? preFilter : undefined,
+        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
         region,
       })
         .then((res: any) => {
@@ -156,7 +157,11 @@ const SearchBox = (props: any) => {
         <form noValidate action="" role="search">
           <Box className="box-inp">
             <Tooltip
-              title={keyFilter ? keyFilter : 'Add pre-filter'}
+              title={
+                !isEmpty(preFilter)
+                  ? Object.keys(preFilter).join(', ')
+                  : 'Add pre-filter'
+              }
               placement="top"
               arrow={true}
               disableHoverListener={!settings.preFilterOption}
@@ -176,7 +181,7 @@ const SearchBox = (props: any) => {
                   <div
                     className="icon-hover"
                     style={{
-                      ...(keyFilter
+                      ...(!isEmpty(preFilter)
                         ? {
                             backgroundColor: `${settings.theme?.secondaryColor}26`,
                           }
@@ -189,7 +194,7 @@ const SearchBox = (props: any) => {
                 {!settings.preFilterOption && (
                   <IconSearch width={16} height={16} />
                 )}
-                {keyFilter && (
+                {!isEmpty(preFilter) && (
                   <div
                     style={{
                       position: 'absolute',

package/src/components/modal/DefaultModal.tsx

@@ -37,7 +37,7 @@ function DefaultModal(props: Props): JSX.Element {
     >
       <div
         className={classNameComponentChild}
-        style={{ overflowY: 'hidden', maxHeight: '95vh', borderRadius: 12 }}
+        style={{ overflowY: 'auto', maxHeight: '95vh', borderRadius: 12 }}
       >
         {children}
       </div>