[FEAT]: Add resultOnTooltip prop to show status on a tooltip instead of the clasic fullInfoLayer

Author: JinSSJ3

src/components/file-item/components/FileItem/FileItem.scss

@@ -300,45 +300,49 @@
 //////////////////   TOOLTIP
 .dz-ui-file-item-container{
   &.dz-ui-tooltip{
+    cursor: default;
     position: relative;
     display: inline-block;
-    border-bottom: 1px dotted black;
+   // border-bottom: 1px dotted black;
     &:hover {
-      z-index: 10000;
+      z-index: 2;
       .dropzone-ui-tooltiptext {
         visibility: visible;
         opacity: 1;
-        z-index: 10000;
+       z-index: 2;
       }
     }
     .dropzone-ui-tooltiptext {
+      font-size: 0.8rem;
       visibility: hidden;
-      width: 120px;
+      width: 133px;
       // background-color: green;
       color: #fff;
       text-align: center;
       border-radius: 6px;
-      padding: 5px 5px;
+      padding: 2px 2px;
       position: absolute;
-      z-index: 1;
-      bottom: 0%;
-      left: 50%;
+      //z-index: 2;
+      //top: 190px;
+      top: 178px;
+      left: 66px;
       margin-left: -60px;
 
       /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
       opacity: 0;
       transition: opacity 1s;
 
       &.not-valid-error {
-        background-color: red;
+        background: linear-gradient(to top,#c62828,#d32f2f,);
         &::after {
-          border-color: transparent transparent red transparent;
+          border-color: transparent transparent #d32f2f transparent;
         }
       }
       &.success {
-        background-color: green;
+        //background-color: green;
+        background: linear-gradient(to top, #1b5e20, #2e7d32);
         &::after {
-          border-color: transparent transparent green transparent;
+          border-color: transparent transparent #2e7d32 transparent;
         }
       }
       &::after {

src/components/file-item/components/FileItem/FileItem.tsx

@@ -184,19 +184,21 @@ const FileItem: FC<FileItemProps> = (props: FileItemProps) => {
               resultOnTooltip={resultOnTooltip}
             />
           </Paper>
-        
+
           {!onlyImage && (
             <div className="file-item-name">{shrinkWord(file.name)}</div>
           )}
-        </div> 
-         <Tooltip
-             open={resultOnTooltip && hovering}
-            //open={true}
+        </div>
+        {resultOnTooltip && (
+          <Tooltip
+            //open={resultOnTooltip && hovering}
+            open={true}
             uploadStatus={uploadStatus}
             valid={valid}
             errors={errors}
             uploadMessage={uploadMessage}
           ></Tooltip>
+        )}
       </div>
     );
   } else return <Fragment></Fragment>;

src/components/file-item/components/FileItemContainer/FileItemContainer.scss

@@ -1,4 +1,6 @@
 .file-item-list-container {
+  padding: 5px;
+  //z-index: 1;
   &::-webkit-scrollbar {
     width: 9px;
   }
@@ -18,17 +20,26 @@
   width: 100%;
   //margin: 100px 0;
   //width: inherit;
-  overflow: auto;
+  
   // padding: 2%;
   align-items: center;
   scrollbar-width: thin;
   &.file-item-list-grid {
+    overflow: auto;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-evenly;
   }
+  &.file-item-list-no-scroll{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+    overflow: unset;
+  }
   &.file-item-list-list {
+    overflow: auto;
     //flex-wrap: wrap;
     align-items: center;
     //justify-content: center;

src/components/file-item/components/FileItemContainer/FileItemContainer.tsx

@@ -6,13 +6,18 @@ import { FileItemContainerProps } from "./FileItemContainerProps";
 const FileItemContainer: FC<FileItemContainerProps> = (
   props: FileItemContainerProps,
 ) => {
-  const { children, view, style } = props;
-  const finalView = view || "list";
-
+  const { children, view, style, disableScroll } = props;
+  const finalView = disableScroll ? "no-scroll" : view || "list";
+  /*  function handleClick<T extends HTMLDivElement>(
+    e: React.MouseEvent<T, MouseEvent>
+  ): void {
+    e.preventDefault();
+  } */
   return (
     <div
       className={`file-item-list-container file-item-list-${finalView}`}
       style={style}
+      //onClick={handleClick}
     >
       {children}
     </div>

src/components/file-item/components/FileItemContainer/FileItemContainerProps.ts

@@ -1,10 +1,15 @@
 import { OverridableProps } from "@unlimited-react-components/kernel";
 
 export interface FileItemContainerProps extends OverridableProps {
-    /**
-     * `grid` will display files in a grid layout. `list` will display 
-     * files in a horizontal list. 
-     * Convenient for saving space in page.
-     */
-    view?: "grid" | "list";
+  /**
+   * `grid` will display files in a grid layout. `list` will display 
+   * files in a horizontal list. 
+   * Convenient for saving space in page.
+   */
+  view?: "grid" | "list";
+  /**
+ * if present or true, removes scrolls
+ * and sets the Dropzone in a grid view
+ */
+  disableScroll?: boolean;
 }

src/components/image-preview/FullScreenPreview.scss

@@ -13,7 +13,7 @@
   &.show {
     transform: translate(0);
   }
-  z-index: 2;
+  z-index: 4;
 }
 .img-rel-container {
   position: relative;

src/components/tooltip/components/Tooltip.scss

@@ -3,12 +3,12 @@
   display: inline-block;
   border-bottom: 1px dotted black;
   &:hover {
-    .dropzone-ui-tooltiptext {
+    .dropzosne-ui-toolatiptext {
       visibility: visible;
       opacity: 1;
     }
   }
-  .dropzone-ui-tooltiptext {
+  .dropzaone-ui-tooltiptsext {
     visibility: hidden;
     width: 120px;
     // background-color: green;
@@ -26,13 +26,13 @@
     opacity: 0;
     transition: opacity 1s;
 
-    &.not-valid-error {
+    &.not-valisd-error {
       background-color: red;
       &::after {
         border-color: transparent transparent red transparent;
       }
     }
-    &.success {
+    &.successs {
       background-color: green;
       &::after {
         border-color: transparent transparent green transparent;

src/components/tooltip/components/Tooltip.tsx

@@ -5,8 +5,8 @@ import { UPLOADSTATUS } from "../../../components/dropzone/components/utils/vali
 const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
   const {
     //message,
-    style,
-    children,
+    //style,
+    //children,
     //color,
     uploadStatus,
     valid,
@@ -15,7 +15,6 @@ const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
     uploadMessage,
     open,
   } = props;
-  console.log("Tooltip props", props);
   const [statusClassName, setSatusClassName] = useState<string | undefined>(
     undefined
   );
@@ -71,7 +70,7 @@ const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
               ? errors?.map((error, index) => (
                   <div key={index + 1}>{`- ${error}.\n`}</div>
                 ))
-              :  */ message || ""
+              :  */ message
           }
         </span>
       )}