chore: Do more front optimization (#76)

* fix: overflow scroll y * fix: modal types fix && delete unused node components * rename: favicon change * fix: header btns color fix * feat: add screen preloader logic * fix: return controls * fix: manage flows name save fix * feat: add copy/paste fn
deeppavlov · Aug 29, 2024 · efaed14 · efaed14
1 parent b0c5212
commit efaed14
Show file tree

Hide file tree

Showing 16 changed files with 487 additions and 330 deletions.
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/src/UI/Preloader/preloader.css b/frontend/src/UI/Preloader/preloader.css
@@ -1,113 +1,17 @@
 #preloader-wrapper {
   background-color: hsl(var(--background));
   position: absolute;
+  top: 0;
+  left: 0;
   z-index: 99;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-/* #preloader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  scale: 0.5;
-}
-#loader {
-  display: block;
-  position: relative;
-  left: 50%;
-  top: 50%;
-  width: 150px;
-  height: 150px;
-  margin: -75px 0 0 -75px;
-  border-radius: 50%;
-  border: 6px solid transparent;
-  border-top-color: #70db97;
-  -webkit-animation: spin 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-  animation: spin 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-}
-#loader:before {
-  content: "";
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  right: 5px;
-  bottom: 5px;
-  border-radius: 50%;
-  border: 6px solid transparent;
-  border-top-color: #2036ff;
-  -webkit-animation: spin 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-  animation: spin 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-}
-#loader:after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-  border-radius: 50%;
-  border: 6px solid transparent;
-  border-top-color: #077ac9;
-  -webkit-animation: spin 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-  animation: spin 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-}
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@-webkit-keyframes spin-reverse {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(-360deg);
-    -ms-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-@keyframes spin-reverse {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(-360deg);
-    -ms-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-} */
-
 .loader {
   position: relative;
   width: 120px;

diff --git a/frontend/src/components/chat/Chat.tsx b/frontend/src/components/chat/Chat.tsx
@@ -148,7 +148,7 @@ const Chat = memo(() => {
 
   return (
     <div
-      className='pt-14 absolute top-0 right-0 transition-transform duration-300 w-[320px] h-full max-h-screen bg-background border-l border-border overflow-hidden'
+      className='pt-14 absolute top-0 right-0 transition-transform duration-300 w-[320px] h-screen max-h-screen bg-background border-l border-border overflow-hidden'
       style={{
         transform: chat ? "translateX(0%)" : "translateX(100%)",
       }}>

diff --git a/frontend/src/components/footbar/FootBar.tsx b/frontend/src/components/footbar/FootBar.tsx
@@ -9,16 +9,16 @@ import { notificationsContext } from "../../contexts/notificationsContext"
 import { workspaceContext } from "../../contexts/workspaceContext"
 import { Logo } from "../../icons/Logo"
 import MonitorIcon from "../../icons/buildmenu/MonitorIcon"
-import LocalStogareIcon from "../../icons/footbar/LocalStogareIcon"
+import LocalStorageIcon from "../../icons/footbar/LocalStorageIcon"
 import LocalStorage from "../../modals/LocalStorage/LocalStorage"
 import { parseSearchParams } from "../../utils"
 import { NotificationsWindow } from "../notifications/NotificationsWindow"
 
 const FootBar = memo(() => {
   const {
-    isOpen: isLocalStogareOpen,
-    onOpen: onLocalStogareOpen,
-    onClose: onLocalStogareClose,
+    isOpen: isLocalStorageOpen,
+    onOpen: onLocalStorageOpen,
+    onClose: onLocalStorageClose,
   } = useDisclosure()
 
   const { version } = useContext(MetaContext)
@@ -73,7 +73,7 @@ const FootBar = memo(() => {
     <div
       data-testid='footbar'
       className='h-12 px-2 bg-overlay border-t border-border absolute bottom-0 w-screen flex items-center justify-between'>
-      <div className='absolute w-full h-12 flex items-center justify-center'>
+      <div className='absolute w-full flex items-center justify-center'>
         <Tabs
           onSelectionChange={onSelectionChange}
           defaultSelectedKey={findDefaultSelectedKey()}
@@ -134,12 +134,12 @@ const FootBar = memo(() => {
       <div className='flex items-end gap-0.5'>
         <Button
           isDisabled
-          onClick={onLocalStogareOpen}
+          onClick={onLocalStorageOpen}
           className={classNames(
             "local-storage-button px-2 cursor-pointer rounded-small h-9 flex items-center bg-transparent justify-center gap-2 border border-transparent hover:bg-background hover:border-foreground hover:text-foreground",
-            isLocalStogareOpen && "bg-background border-foreground"
+            isLocalStorageOpen && "bg-background border-foreground"
           )}>
-          <LocalStogareIcon className='local-storage-button-hover:stroke-0' />
+          <LocalStorageIcon className='local-storage-button-hover:stroke-0' />
           Local storage
         </Button>
         <Popover
@@ -166,8 +166,8 @@ const FootBar = memo(() => {
         </Popover>
       </div>
       <LocalStorage
-        isOpen={isLocalStogareOpen}
-        onClose={onLocalStogareClose}
+        isOpen={isLocalStorageOpen}
+        onClose={onLocalStorageClose}
       />
     </div>
   )

diff --git a/frontend/src/components/header/BuildMenu.tsx b/frontend/src/components/header/BuildMenu.tsx
@@ -51,7 +51,7 @@ const BuildMenu = () => {
             />
           }
           className={classNames(
-            "bg-overlay hover:bg-background border border-border rounded-small",
+            "bg-background hover:bg-overlay border border-border rounded-small",
             runStatus === "alive"
               ? "border-emerald-500"
               : runStatus === "stopped"
@@ -115,8 +115,8 @@ const BuildMenu = () => {
           isIconOnly
           style={{}}
           className={classNames(
-            "bg-overlay hover:bg-background border border-border rounded-small",
-            chat ? "bg-background border-border-darker" : ""
+            "bg-background hover:bg-overlay border border-border rounded-small",
+            chat ? "bg-overlay border-border-darker" : ""
           )}>
           <ChatIcon className='w-5 h-5' />
         </Button>

diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx
@@ -53,8 +53,8 @@ const Header = memo(() => {
                 isIconOnly
                 onClick={toggleManagerMode}
                 className={classNames(
-                  " bg-overlay hover:bg-background border border-border rounded-small",
-                  managerMode ? "bg-background border-border-darker" : ""
+                  " bg-background hover:bg-overlay border border-border rounded-small",
+                  managerMode ? "bg-overlay border-border-darker" : ""
                 )}>
                 <GrabModeIcon />
               </Button>
@@ -66,8 +66,8 @@ const Header = memo(() => {
                 onClick={toggleWorkspaceMode}
                 isIconOnly
                 className={classNames(
-                  " bg-overlay hover:bg-background border border-border rounded-small",
-                  workspaceMode ? "bg-background border-border-darker" : ""
+                  " bg-background hover:bg-overlay border border-border rounded-small",
+                  workspaceMode ? "bg-overlay border-border-darker" : ""
                 )}>
                 <GridModeIcon />
               </Button>
@@ -79,8 +79,8 @@ const Header = memo(() => {
                 onClick={toggleNodesLayoutMode}
                 isIconOnly
                 className={classNames(
-                  " bg-overlay hover:bg-background border border-border rounded-small",
-                  nodesLayoutMode ? "bg-background border-border-darker" : ""
+                  " bg-background hover:bg-overlay border border-border rounded-small",
+                  nodesLayoutMode ? "bg-overlay border-border-darker" : ""
                 )}>
                 {/* {nodesLayoutMode ? "Canvas Mode" : "List mode"} */}
                 <ListViewIcon />

diff --git a/frontend/src/components/nodes/DefaultNode.tsx b/frontend/src/components/nodes/DefaultNode.tsx
@@ -103,7 +103,9 @@ const DefaultNode = memo(({ data }: { data: NodeDataType }) => {
           </div>
         </div>
         <div className=' w-full flex flex-col items-center justify-center gap-2 p-2.5 '>
-          <div className="w-full flex items-center justify-start border border-border rounded-lg py-2 px-2 mb-1" onClick={onResponseOpen}>
+          <div
+            className='w-full flex items-center justify-start border border-border rounded-lg py-2 px-2 mb-1'
+            onClick={onResponseOpen}>
             <Response data={data} />
           </div>
           <div className='w-full flex flex-col gap-2'>

diff --git a/frontend/src/components/nodes/FallbackNode.tsx b/frontend/src/components/nodes/FallbackNode.tsx
diff --git a/frontend/src/components/nodes/StartNode.tsx b/frontend/src/components/nodes/StartNode.tsx