Merge pull request #3030 from ethereum/nht

scroll functionality for FP and GS sections in home tab

libs/remix-ui/home-tab/src/lib/components/customNavButtons.tsx

@@ -2,15 +2,24 @@
 import React from 'react'
 
 const CustomNavButtons = ({ next, previous, goToSlide, ...rest }) => {
-  const { carouselState: { currentSlide, totalItems } } = rest
+  const { carouselState: { currentSlide, totalItems, itemWidth, containerWidth } } = rest
   return (
     <div className="mt-1 d-flex justify-content-end carousel-button-group">
-      <button className={currentSlide === 0 ? 'disable py-1 border btn' : 'py-1 border btn'} onClick={() => previous()}>
+      <button
+        className={currentSlide === 0 ? 'disable py-1 border btn' : 'py-1 border btn'}
+        disabled={currentSlide === 0}
+        onClick={() => previous()}
+      >
         <i className="fas fa-angle-left"></i>
       </button>
-      <button className={currentSlide + 1 === totalItems ? 'disable py-1 border btn' : 'py-1 border btn'} onClick={() => {
+      <button
+        className={ 
+          ((totalItems - currentSlide) * itemWidth + 5) < containerWidth ? 'disable py-1 border btn' : 'py-1 border btn'}
+        onClick={() => {
           if (currentSlide + 1 < totalItems) goToSlide(currentSlide + 1)
-        }} >
+        }}
+        disabled ={((totalItems - currentSlide) * itemWidth + 5) < containerWidth}
+      >
         <i className="fas fa-angle-right"></i>
       </button>
     </div>

libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx

@@ -18,7 +18,7 @@ function HomeTabFeatured() {
       <label style={{ fontSize: "1.2rem" }}>Featured</label>
       <div className="mb-2">
         <div className="w-100 d-flex flex-column" style={{ height: "200px" }}>
-          <ThemeContext.Provider value={ themeFilter }>
+          <ThemeContext.Provider value={themeFilter}>
             <Carousel
               customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />}
               arrows={false}
@@ -40,26 +40,31 @@ function HomeTabFeatured() {
               dotListClass="position-relative mt-2"
             >
               <div className="d-flex">
-                <img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px"}} alt="" ></img>
-                <div className="h6 w-50 p-4" style={{ flex: "1"}}>
+                <img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
+                <div className="h6 w-50 p-4" style={{ flex: "1" }}>
                   <h5>JUMP INTO WEB3</h5>
-                  <span>The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum.</span>
+                  <p>The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum.</p>
+                  <a className="remixui_home_text" target="__blank" href="https://remix-project.org">More</a>
                 </div>
               </div>
               <div className="d-flex">
                 <img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
-                <div className="h6 p-4" style={{ flex: "1"}}>
+                <div className="h6 p-4" style={{ flex: "1" }}>
                   <h5>REMIX REWARDS</h5>
-                  <p style={{fontStyle: 'italic'}}>NFTs for our users!</p>
-                  <span>Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second “Remixer” user NFT badge to give to any other user of their choice</span>
+                  <p style={{ fontStyle: 'italic' }}>NFTs for our users!</p>
+                  <p>
+                    Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second “Remixer” user NFT badge to give to any other user of their choice.
+                  </p>
+                  <a className="remixui_home_text" target="__blank" href="https://rewards.remix.ethereum.eth.limo">More</a>
                 </div>
               </div>
               <div className="d-flex">
                 <img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
-                <div className="h6 p-4" style={{ flex: "1"}}>
+                <div className="h6 p-4" style={{ flex: "1" }}>
                   <h5>BETA TESTING</h5>
-                  <p style={{fontStyle: 'italic'}}>Our community supports us.</p>
-                  <span>You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features!</span>
+                  <p style={{ fontStyle: 'italic' }}>Our community supports us.</p>
+                  <p>You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features!</p>
+                  <a className="remixui_home_text" target="__blank" href="https://rewards.remix.ethereum.eth.limo">More</a>
                 </div>
               </div>
             </Carousel>

libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState, useRef, useContext } from 'react'
+import React, { useEffect, useRef, useContext } from 'react'
 import PluginButton from './pluginButton'
-import { ThemeContext, themes } from '../themeContext'
+import { ThemeContext } from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
 import CustomNavButtons from './customNavButtons'
+const itemsToShow = 5
 declare global {
   interface Window {
     _paq: any
   }
 }
 const _paq = window._paq = window._paq || [] //eslint-disable-line
-
 interface  HomeTabFeaturedPluginsProps {
   plugin: any
 }
@@ -20,16 +20,40 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
 
   const themeFilter = useContext(ThemeContext)
   const carouselRef = useRef(null)
+  const carouselRefDiv = useRef(null)
 
-  // Todo doesn't work
   useEffect(() => {
-      window.addEventListener("scroll", handleScroll)
+    document.addEventListener("wheel", handleScroll)
     return () => {
-      window.removeEventListener("scroll", handleScroll)
+      document.removeEventListener("wheel", handleScroll)
     }
   }, [])
 
+  function isDescendant(parent, child) {
+    let node = child.parentNode;
+    while (node != null) {
+      if (node === parent) {
+        return true;
+      }
+      node = node.parentNode;
+    }
+    return false;
+  }
+  
   const handleScroll = (e) => {
+    if (isDescendant(carouselRefDiv.current, e.target)) {
+      e.stopPropagation()
+      let nextSlide = 0
+      if (e.wheelDelta < 0) {
+        nextSlide = carouselRef.current.state.currentSlide + 1;
+        if ((carouselRef.current.state.totalItems - carouselRef.current.state.currentSlide) * carouselRef.current.state.itemWidth + 5 < carouselRef.current.state.containerWidth) return // 5 is approx margins
+        carouselRef.current.goToSlide(nextSlide)
+      } else {
+        nextSlide = carouselRef.current.state.currentSlide - 1;
+        if (nextSlide < 0) nextSlide = 0
+        carouselRef.current.goToSlide(nextSlide)
+      }
+    }
   }
 
   const startSolidity = async () => {
@@ -61,17 +85,30 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
   return (
     <div className="pl-2 w-100" id="hTFeaturedPlugins">
       <label className="" style={{fontSize: "1.2rem"}}>Featured Plugins</label>
-      <div className="w-100 d-flex flex-column">
+      <div ref={carouselRefDiv} className="w-100 d-flex flex-column">
         <ThemeContext.Provider value={ themeFilter }>
           <Carousel 
             ref={carouselRef}
-            focusOnSelect
-            customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />}
+            focusOnSelect={true}
+            customButtonGroup={
+              <CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />
+            }
             arrows={false}
             swipeable={false}
             draggable={true}
             showDots={false}
-            responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 5} }}
+            responsive={
+              { 
+                superLargeDesktop: {
+                  breakpoint: { max: 4000, min: 3000 },
+                  items: itemsToShow
+                },
+                desktop: {
+                  breakpoint: { max: 3000, min: 1024 },
+                  items: itemsToShow
+                }
+              }
+            }
             renderButtonGroupOutside={true}
             ssr={true} // means to render carousel on server-side.
             keyBoardControl={true}

libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState, useRef, useContext } from 'react'
-import { ThemeContext, themes } from '../themeContext'
+import React, { useEffect, useRef, useContext } from 'react'
+import { ThemeContext} from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import WorkspaceTemplate from './workspaceTemplate'
 import 'react-multi-carousel/lib/styles.css'
@@ -11,13 +11,48 @@ declare global {
   }
 }
 const _paq = window._paq = window._paq || [] //eslint-disable-line
-
 interface  HomeTabGetStartedProps {
   plugin: any
 }
 
 function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
   const themeFilter = useContext(ThemeContext)
+  const carouselRef = useRef(null)
+  const carouselRefDiv = useRef(null)
+
+  useEffect(() => {
+    document.addEventListener("wheel", handleScroll)
+    return () => {
+      document.removeEventListener("wheel", handleScroll)
+    }
+  }, [])
+
+  function isDescendant(parent, child) {
+    let node = child.parentNode;
+    while (node != null) {
+      if (node === parent) {
+        return true;
+      }
+      node = node.parentNode;
+    }
+    return false;
+  }
+  
+  const handleScroll = (e) => {
+    if (isDescendant(carouselRefDiv.current, e.target)) {
+      e.stopPropagation()
+      let nextSlide = 0
+      if (e.wheelDelta < 0) {
+        nextSlide = carouselRef.current.state.currentSlide + 1;
+        if ((carouselRef.current.state.totalItems - carouselRef.current.state.currentSlide) * carouselRef.current.state.itemWidth + 5 < carouselRef.current.state.containerWidth) return // 5 is approx margins
+        carouselRef.current.goToSlide(nextSlide)
+      } else {
+        nextSlide = carouselRef.current.state.currentSlide - 1;
+        if (nextSlide < 0) nextSlide = 0
+        carouselRef.current.goToSlide(nextSlide)
+      }
+    }
+  }
 
   const createWorkspace = async (templateName) => {
     await plugin.appManager.activatePlugin('filePanel')
@@ -36,16 +71,31 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
         </span>
         - Project Templates
       </label>
-      <div className="w-100 d-flex flex-column">
+      <div ref={carouselRefDiv} className="w-100 d-flex flex-column">
         <ThemeContext.Provider value={ themeFilter }>
-          <Carousel 
-            focusOnSelect
-            customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />}
+          <Carousel
+            ref={carouselRef}
+            focusOnSelect={true}
+            customButtonGroup={
+              <CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />
+            }
             arrows={false}
             swipeable={false}
             draggable={true}
             showDots={false}
-            responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 5} }}
+            responsive={
+              { 
+                superLargeDesktop: {
+                  breakpoint: { max: 4000, min: 3000 },
+                  items: 5
+                },
+                desktop: {
+                  breakpoint: { max: 3000, min: 1024 },
+                  items: 5,
+                  partialVisibilityGutter: 0
+                }
+              }
+            }
             renderButtonGroupOutside={true}
             ssr={true} // means to render carousel on server-side.
             keyBoardControl={true}

libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx

@@ -50,20 +50,20 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
       </div>
       <div className="d-flex flex-column">
         <button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Basics }})}>
-          <label className="float-left" style={{fontSize: "1rem"}}>Remix Basics</label>
+          <label className="m-0 float-left" style={{fontSize: "1rem"}}>Remix Basics</label>
           {(state.visibleTutorial === VisibleTutorial.Basics) && <div className="pt-2 d-flex flex-column text-left">
             <span>Introduction to Remix's interface and concepts used in Ethereum, as well as the basics of Solidity.</span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>Get Started</button>
           </div>}
         </button>
         <button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Intermediate }})}>
-          <label className="float-left" style={{fontSize: "1rem"}}>Remix Intermediate</label>
+          <label className="m-0 float-left" style={{fontSize: "1rem"}}>Remix Intermediate</label>
           {(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">Using the web3.js to interact with a contract. Using Recorder tool.
           <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('useofweb3js')}>Get Started</button>
           </div>}
         </button>
         <button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Advanced }})}>
-          <label className="float-left" style={{fontSize: "1rem"}}>Remix Advanced</label>
+          <label className="m-0 float-left" style={{fontSize: "1rem"}}>Remix Advanced</label>
           {(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="pt-2 d-flex flex-column text-left">Learn the Proxy Pattern and working with Libraries in Remix. Learn to use the Debugger.
           <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>Get Started</button>
           </div>}

libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx

@@ -23,7 +23,7 @@ function PluginButton ({ imgPath, envID, envText, callback, l2, description, rem
         onClick={() => callback()}
       >
         <img className="px-2 mb-2 align-self-center remixui_home_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } />
-        <div className="h-100 d-flex flex-column">
+        <div className="mb-2 h-100 d-flex flex-column">
           <label className="text-uppercase text-dark remixui_home_cursorStyle">{envText}</label>
           <div className="remixui_home_envLogoDescription">{description}</div>
         </div>

libs/remix-ui/home-tab/src/lib/components/workspaceTemplate.tsx

@@ -16,7 +16,7 @@ function WorkspaceTemplate ({ gsID, workspaceTitle, description, callback }: Wor
         data-id={'landingPageStart' + gsID}
         onClick={() => callback()}
       >
-        <div className="w-100 p-2 h-100 align-items-start d-flex flex-column">
+        <div className="mb-2 w-100 p-2 h-100 align-items-start d-flex flex-column">
           <label className="h6 pb-1 text-uppercase text-dark remixui_home_cursorStyle">{workspaceTitle}</label>
           <div className="remixui_home_gtDescription">{description}</div>
         </div>

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css

@@ -1,11 +1,9 @@
 .remixui_home_text {
-  cursor: pointer;
   font-size: 0.8rem;
   font-weight: normal;
   max-width: 300px;
 }
 .remixui_home_text:hover {
-  cursor: pointer;
   text-decoration: underline;
 }
 .remixui_home_homeContainer {