From 4cec832e6543a4cd6d8884698bf690aabc45e238 Mon Sep 17 00:00:00 2001 From: lianahus Date: Mon, 10 Oct 2022 14:13:06 +0200 Subject: [PATCH] init of getStarted section --- apps/remix-ide/src/app/panels/file-panel.js | 1 + .../src/app/ui/landing-page/landing-page.js | 2 +- .../src/lib/components/homeTabFeatured.tsx | 24 ++-- .../lib/components/homeTabFeaturedPlugins.tsx | 13 +- .../src/lib/components/homeTabFile.tsx | 2 +- .../src/lib/components/homeTabGetStarted.tsx | 66 ++++++++-- .../src/lib/components/homeTabTitle.tsx | 118 ++++++++++++------ .../src/lib/components/pluginButton.tsx | 1 + .../home-tab/src/lib/remix-ui-home-tab.css | 16 ++- .../home-tab/src/lib/remix-ui-home-tab.tsx | 27 ++-- .../src/lib/components/BasicLogo.tsx | 24 ++-- .../src/lib/remix-ui-vertical-icons-panel.tsx | 2 - 12 files changed, 198 insertions(+), 98 deletions(-) diff --git a/apps/remix-ide/src/app/panels/file-panel.js b/apps/remix-ide/src/app/panels/file-panel.js index d6a3708269..3538a58678 100644 --- a/apps/remix-ide/src/app/panels/file-panel.js +++ b/apps/remix-ide/src/app/panels/file-panel.js @@ -119,6 +119,7 @@ module.exports = class Filepanel extends ViewPlugin { } createWorkspace (workspaceName, workspaceTemplateName, isEmpty) { + console.log("in createWorkspace") return new Promise((resolve, reject) => { this.emit('createWorkspaceReducerEvent', workspaceName, workspaceTemplateName, isEmpty, (err, data) => { if (err) reject(err) diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js index 90511dd1d4..52ac637f43 100644 --- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js +++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js @@ -10,7 +10,7 @@ const profile = { methods: [], events: [], description: 'Remix home tab ', - icon: 'assets/img/remixLogo.webp', + icon: 'assets/img/home.webp', location: 'mainPanel', version: packageJson.version } diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx index 73bff92c21..455ba5bd15 100644 --- a/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx +++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx @@ -1,16 +1,12 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import React, { useEffect, useState, useRef } from 'react' +import React, { useEffect, useState, useRef, useContext } from 'react' import { ThemeContext, themes } from '../themeContext' import Carousel from 'react-multi-carousel' import 'react-multi-carousel/lib/styles.css' import CustomNavButtons from './customNavButtons' function HomeTabFeatured() { - const [state, setState] = useState<{ - themeQuality: { filter: string, name: string }, - }>({ - themeQuality: themes.light, - }) + const themeFilter = useContext(ThemeContext) useEffect(() => { return () => { @@ -26,11 +22,11 @@ function HomeTabFeatured() { } return ( -
+
-
-
- +
+
+ } arrows={false} @@ -47,19 +43,19 @@ function HomeTabFeatured() { containerClass="border carousel-container" sliderClass="px-2 h-100 justify-content-between" deviceType={"desktop"} - itemClass="p-2 carousel-item-padding-10-px" + itemClass="px-2 carousel-item-padding-10-px" autoPlaySpeed={15000} dotListClass="position-relative mt-2" >
- +
JUMP INTO WEB3
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.
- +
REMIX REWARDS

NFTs for our users!

@@ -67,7 +63,7 @@ function HomeTabFeatured() {
- +
BETA TESTING

Our community supports us.

diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx index 13e37c3229..212892f5ac 100644 --- a/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx +++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import React, { useEffect, useState, useRef } from 'react' +import React, { useEffect, useState, useRef, useContext } from 'react' import PluginButton from './pluginButton' import { ThemeContext, themes } from '../themeContext' import Carousel from 'react-multi-carousel' @@ -17,12 +17,8 @@ interface HomeTabFeaturedPluginsProps { } function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) { - const [state, setState] = useState<{ - themeQuality: { filter: string, name: string }, - }>({ - themeQuality: themes.light, - }) + const themeFilter = useContext(ThemeContext) const carouselRef = useRef(null) // Todo doesn't work @@ -37,7 +33,6 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) { console.log("e = ", e) } - const startSolidity = async () => { await plugin.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting']) plugin.verticalIcons.select('solidity') @@ -71,9 +66,9 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) { return (
- +
- + - +
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx index cd6b6fb81c..ea6775af7f 100644 --- a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx +++ b/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx @@ -1,18 +1,62 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import React, { useEffect, useState, useRef } from 'react' +import React, { useEffect, useState, useRef, useContext } from 'react' +import { ThemeContext, themes } from '../themeContext' +import Carousel from 'react-multi-carousel' +import WorkspaceTemplate from './workspaceTemplate' +import 'react-multi-carousel/lib/styles.css' +import CustomNavButtons from './customNavButtons' +declare global { + interface Window { + _paq: any + } +} +const _paq = window._paq = window._paq || [] //eslint-disable-line + +interface HomeTabGetStartedProps { + plugin: any +} + +function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) { + const themeFilter = useContext(ThemeContext) -function HomeTabGetStarted () { - const [state, setState] = useState<{ - searchInput: string - }>({ - searchInput: '' - }) + const createWorkspace = async (templateName) => { + await plugin.appManager.activatePlugin('filePanel') + + await plugin.call('filePanel', 'createWorkspace', templateName + "_workspace", templateName) + console.log("templateName ", templateName) + plugin.verticalIcons.select('filePanel') + _paq.push(['trackEvent', 'homeGetStarted', templateName]) + } return ( -
- -
-
+
+ +
+ + } + arrows={false} + swipeable={false} + draggable={true} + showDots={false} + responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 5} }} + renderButtonGroupOutside={true} + ssr={true} // means to render carousel on server-side. + keyBoardControl={true} + containerClass="carousel-container" + deviceType={"desktop"} + itemClass="w-100" + > + createWorkspace("blank")} /> + createWorkspace("remixDefault")} /> + createWorkspace("ozerc20")} /> + createWorkspace("ozerc721")} /> + createWorkspace("zeroxErc20")} /> + createWorkspace("")} /> + + +
) } diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx index dd589a061e..e3cd793775 100644 --- a/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx +++ b/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx @@ -1,19 +1,24 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import React, { useEffect, useState, useRef } from 'react' +// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries +import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo' +import { ThemeContext } from '../themeContext' +import React, { useEffect, useState, useRef, useContext } from 'react' +import { OverlayTrigger, Tooltip } from 'react-bootstrap'// eslint-disable-line -function HomeTabTitle () { - const [state, setState] = useState<{ - searchInput: string - }>({ - searchInput: '' - }) +function HomeTabTitle() { useEffect(() => { document.addEventListener("keyup", (e) => handleSearchKeyDown(e)) return () => { document.removeEventListener("keyup", handleSearchKeyDown) } }, []) + const [state, setState] = useState<{ + searchDisable: boolean + }>({ + searchDisable: true + }) + const themeFilter = useContext(ThemeContext) const searchInputRef = useRef(null) const remiAudioEl = useRef(null) @@ -24,16 +29,18 @@ function HomeTabTitle () { if (e.target !== searchInputRef.current) return if (e.key === "Enter") { openLink() + searchInputRef.current.value = "" + } else { + console.log("handleSearchKeyDown") setState(prevState => { - return { ...prevState, searchInput: '' } + return { ...prevState, searchDisable: searchInputRef.current.value === "" } }) - searchInputRef.current.value = "" } } const openLink = (url = "") => { if (url === "") { - window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=" + state.searchInput + "&check_keywords=yes&area=default", '_blank') + window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=" + searchInputRef.current.value + "&check_keywords=yes&area=default", '_blank') } else { window.open(url, '_blank') } @@ -42,7 +49,9 @@ function HomeTabTitle () { return (
- playRemi() } alt=""> +
playRemi()} style={{ filter: themeFilter.filter}} > + +
- Remix + Remix - - - + + Remix Youtube Playlist + + }> + + + + + Remix Twitter Profile + + }> + + + + + Remix Linkedin Profile + + }> + + + + + Remix Medium Posts + + }> + + + + + Remix Gitter channel + + }> + +
- The Native IDE for Solidity Development. + The Native IDE for Web3 Development.
{ - setState(prevState => { - return { ...prevState, searchInput: event.target.value.trim() } - }) - }} type="text" className="border form-control border-right-0" id="searchInput" @@ -90,9 +136,9 @@ function HomeTabTitle () { />
diff --git a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx b/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx index 87e8978903..9f944679d3 100644 --- a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx +++ b/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx @@ -15,6 +15,7 @@ interface PluginButtonProps { function PluginButton ({ imgPath, envID, envText, callback, l2, description, remixMaintained }: PluginButtonProps) { const themeFilter = useContext(ThemeContext) + console.log("themeFilter ", themeFilter) return (