Merge pull request #1 from ankushKun/Adithya

Overflow Issue, Recent tabs change, Horizontal Scroll Button
betteridea-dev · Dec 19, 2023 · 43f480a · 43f480a
2 parents c54ea27 + 0f14e62
commit 43f480a
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>BetterIDE</title>
 </head>

diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -26,9 +26,9 @@ function App() {
 
   return (
     <>
-      <div className='flex max-w-screen'>
+      <div className='flex w-screen overflow-hidden'>
         {showSidebar && <Sidebar />}
-        <div className='w-full '>
+        <div className='w-full'>
           <Routes>
             <Route path="/" element={<Home setShowSidebar={setShowSidebar} />} />
             {/* <Route path="/editor" element={<CodeEditor setShowSidebar={setShowSidebar} />}></Route> */}

diff --git a/src/assets/activeFolders/horizontal.svg b/src/assets/activeFolders/horizontal.svg
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -19,4 +19,6 @@ import activeCode from "./activeFolders/code.svg";
 import activeDeploy from "./activeFolders/deploy.svg";
 import activeBrowse from "./activeFolders/browse.svg";
 import tutorialFlow from "./tutorialFlow.png";
-export { code, test, browse, personalCloud, dropDown, dropRight, nextArrow, tutorial, home, close, horizontal, deploy, search, stamp, personalProjects, activehome, activeTest, activeCode, activeDeploy, activeBrowse, tutorialFlow};
+import activeHorizontal from "./activeFolders/horizontal.svg";
+
+export { code, test, browse, personalCloud, dropDown, dropRight, nextArrow, tutorial, home, close, horizontal, activeHorizontal, deploy, search, stamp, personalProjects, activehome, activeTest, activeCode, activeDeploy, activeBrowse, tutorialFlow};
diff --git a/src/components/Recents.tsx b/src/components/Recents.tsx
@@ -1,18 +1,22 @@
-import { nextArrow, horizontal } from "../assets"
+import { nextArrow, horizontal, activeHorizontal } from "../assets"
 import { contractSrc as src1, stateSrc as sta1 } from "../templates/hello"
 import { contractSrc as src2, stateSrc as sta2 } from "../templates/db"
 import { contractSrc as src3, stateSrc as sta3 } from "../templates/vote"
 import { contractSrc as src4, stateSrc as sta4 } from "../templates/event"
 import { contractSrc as src5, stateSrc as sta5 } from "../templates/utoken"
 import { Link } from "react-router-dom"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 
 const TemplateTab = ({ name }: { name: string }) => {
+    // for testing purpose
+    const today = new Date();
+    const today_date = today.toLocaleDateString('en-GB');
     return (
-        <div className="bg-white p-4 hover:scale-105 transition-all duration-300 rounded-[5px] group">
-            <h1 className=" text-[#616161] pb-2 font-bold ">{name}</h1>
+        <div className="bg-white p-4 hover:scale-105 w-[18%] transition-all duration-300 rounded-[5px] group background--recent" style={{ backgroundImage: 'url(https://s3-alpha-sig.figma.com/img/accc/8cf3/e471ab771c8b887927a198b8f9bc4c03?Expires=1703462400&Signature=VtW0ffPic95HbgfpJxGpmTBymri8ohgEPaDVULD8nDQgkR3u8f5BWrafzO4Mqeiec5GMDtHma0U6POP1BvPcifj56uYGQl3j676oWnO0GiOW6L6n5eqmLgv0TCt9ZTW~Jl0LHdNM6kRaq2T3BGC21Wb2XdKBB28VbwiPOv83l~l7QlgfdLOwp5Oy1hCUTDF5a33m6BCtGM5vZ6PeZ13hzsAxjStTrT6UGVPN33FFRVzUrSYmcs~ozLUVLdaDSnRe3eE1aTo5O0T1D1NF6-X3CAp7LzaZFpqcmzyNdWdDBCRB-95UEkuEF8QnjfMRH3co6ya4QHSisxlr4AEGd6LrOQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4)' }}>
+            <p className=" text-sm text-[#A4A4A4] pb-2">Last opened: {today_date}</p>
+            <h1 className=" text-[#616161] pb-4 font-bold ">{name}</h1>
             <div className="">
-                <Link to={`/code?conName=${name}`} className="bg-[#093E49] custom-width  flex rounded-[3px] px-2 py-1  hover:w-36 transition-all duration-100 justify-between"
+                <Link to={`/code?conName=${name}`} className="bg-[#093E49] custom-width--recent  flex rounded-[3px] px-2 py-1  hover:w-40 transition-all duration-100 justify-between"
                     onClick={() => {
                         let contracts = localStorage.getItem("contracts");
                         if (!contracts) contracts = "{}";
@@ -52,10 +56,9 @@ const TemplateTab = ({ name }: { name: string }) => {
                                 break;
                         }
                         localStorage.setItem("contracts", JSON.stringify(parsed));
-
                     }}
                 >
-                    <div className="min-w-fit">Open</div>
+                    <div className="min-w-fit">Open in editor</div>
                     <img src={nextArrow} alt="next arrow" />
                 </Link>
             </div>
@@ -64,24 +67,37 @@ const TemplateTab = ({ name }: { name: string }) => {
 }
 
 const Recents = () => {
+    const [active,setActive]=useState(false);
     const [recents, setRecents] = useState([])
 
+    // to handle the scroll click
+    const scrollContainerRef = useRef(null);
+    const handleScrollClick=()=>{
+        if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollLeft += 150;
+        }
+    }
     useEffect(() => {
         const recents = localStorage.getItem("recents")
         if (recents) {
-            const parsed = JSON.parse(recents)
+            const parsed = JSON.parse(recents);
             setRecents(parsed)
         }
     }, [])
-
     return (
         <div className="overflow-x-auto pb-10 p-2 flex gap-8 max-w-[81%] ">
             {
                 (recents.filter((e) => e != "").length > 0) ? recents.map((template) => {
                     if (template) return <TemplateTab key={template} name={template} />
                 }) : <div>No recently opened contracts... Maybe start working on one from templates? ^_^</div>
             }
-            <img className="absolute mt-6 mr-5 bg-invert right-0 bg-black/30 rounded-full" src={horizontal} alt="Scroll" />
+            <img 
+                className="absolute mt-6 mr-5 bg-invert right-0 bg-black/30 rounded-full"   
+                src={active?activeHorizontal:horizontal} 
+                alt="Scroll" 
+                onClick={handleScrollClick}
+                onMouseEnter={()=>setActive(true)}
+                onMouseLeave={()=>setActive(false)}/>
         </div>
     )
 }

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -50,7 +50,7 @@ const Sidebar = () => {
         }
     ]
     return (
-        <div className='pt-2'>
+        <div className='pt-10'>
             <div className='flex px-2 flex-col items-start w-full gap-5 min-w-[200px]'>
                 {navlinks.map((link) => {
                     return (<Link to={link.link} className='w-full'>

diff --git a/src/components/Templates.tsx b/src/components/Templates.tsx
@@ -1,10 +1,11 @@
-import { nextArrow, horizontal } from "../assets"
+import { nextArrow, horizontal, activeHorizontal } from "../assets"
 import { contractSrc as src1, stateSrc as sta1 } from "../templates/hello"
 import { contractSrc as src2, stateSrc as sta2 } from "../templates/db"
 import { contractSrc as src3, stateSrc as sta3 } from "../templates/vote"
 import { contractSrc as src4, stateSrc as sta4 } from "../templates/event"
 import { contractSrc as src5, stateSrc as sta5 } from "../templates/utoken"
 import { Link } from "react-router-dom"
+import { useRef, useState } from "react"
 
 const TemplateTab = ({ name, description }: { name: string, description: string }) => {
     return (
@@ -64,6 +65,16 @@ const TemplateTab = ({ name, description }: { name: string, description: string
 }
 
 const Templates = () => {
+    const [active, setActive] = useState(false);
+    // for scroll click
+    const scrollContainerRef = useRef(null);
+
+    const handleScrollClick = () => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollLeft += 250;
+      }
+    };
+
     const templates = [
         {
             name: "HelloWorld",
@@ -87,17 +98,23 @@ const Templates = () => {
         },
     ]
     return (
-        <div className="overflow-x-auto  pb-10 p-2 flex gap-8 max-w-[81%] ">
-            {
-                templates.map((template) => {
-                    return <TemplateTab
-                        key={template.name}
-                        name={template.name}
-                        description={template.description} />
-                })
-            }
-            <img className="absolute mt-16 mr-5 bg-invert right-0 bg-black/30 rounded-full" src={horizontal} alt="Scroll" />
-        </div>
+        <div className="overflow-x-auto pb-10 p-2 flex gap-8 max-w-[81%] " ref={scrollContainerRef}>
+        {templates.map((template) => (
+          <TemplateTab
+            key={template.name}
+            name={template.name}
+            description={template.description}
+          />
+        ))}
+        <img
+          className="absolute mt-16 mr-5 bg-invert right-0 bg-black/30 rounded-full cursor-pointer"
+          src={active?activeHorizontal:horizontal}
+          alt="Scroll"
+          onClick={handleScrollClick}
+          onMouseEnter={()=>setActive(true)}
+          onMouseLeave={()=>setActive(false)}
+        />
+      </div>
     )
 }
 

diff --git a/src/index.css b/src/index.css
@@ -29,6 +29,11 @@ body {
     transition: width 0.3s ease-in-out;
 }
 
+.custom-width--recent{
+    width: 140px;
+    transition: width 0.3s ease-in-out;
+}
+
 select {
     color: #B4FFA1;
     padding: 5px;
@@ -44,4 +49,10 @@ select:focus {
 option {
     color: black;
     background-color: whitesmoke;
-}
+}
+
+.background--recent{
+  background-size: cover;
+  background-repeat: no-repeat; 
+  background-position: center center; 
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -6,7 +6,7 @@ import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <Router basename="/betterIDE/">
-    <main className="bg-[#0A1917] text-white h-[100vh]">
+    <main className="bg-[#0A1917] text-white w-full h-[100vh]">
       <ArweaveWalletKit>
         <App />
       </ArweaveWalletKit>