diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 4056a57092..678f08989b 100644 --- a/apps/remix-ide/src/app.js +++ b/apps/remix-ide/src/app.js @@ -346,7 +346,7 @@ class AppComponent { solidityumlgen, compilationDetails, vyperCompilationDetails, - // remixGuide, + remixGuide, contractFlattener, solidityScript, templates, @@ -513,10 +513,7 @@ class AppComponent { ) await this.appManager.activatePlugin(['solidity-script']) await this.appManager.activatePlugin(['solcoder']) - - - - await this.appManager.activatePlugin(['filePanel']) + await this.appManager.activatePlugin(['filePanel']) // Set workspace after initial activation this.appManager.on('editor', 'editorMounted', () => { diff --git a/apps/remix-ide/src/app/plugins/remixGuide.tsx b/apps/remix-ide/src/app/plugins/remixGuide.tsx index 037f4f8cf5..4ef3e8bbb5 100644 --- a/apps/remix-ide/src/app/plugins/remixGuide.tsx +++ b/apps/remix-ide/src/app/plugins/remixGuide.tsx @@ -1,12 +1,12 @@ -import React from 'react' +import React, {useState} from 'react' // eslint-disable-line import { ViewPlugin } from '@remixproject/engine-web' import { PluginViewWrapper } from '@remix-ui/helper' import { RemixAppManager } from '../../remixAppManager' import { RemixUIGridView } from '@remix-ui/remix-ui-grid-view' import { RemixUIGridSection } from '@remix-ui/remix-ui-grid-section' import { RemixUIGridCell } from '@remix-ui/remix-ui-grid-cell' -import { ThemeKeys, ThemeObject } from '@microlink/react-json-view' +import * as Data from './remixGuideData.json' //@ts-ignore const _paq = (window._paq = window._paq || []) @@ -15,7 +15,6 @@ const profile = { displayName: 'Remix Guide', description: 'Learn remix with videos', location: 'mainPanel', - methods: ['showDetails'], events: [] } @@ -24,13 +23,20 @@ export class RemixGuidePlugin extends ViewPlugin { appManager: RemixAppManager element: HTMLDivElement payload: any - themeStyle: any - theme: ThemeKeys | ThemeObject + showVideo: boolean + videoID: string + handleKeyDown: any + handleEscape: any + constructor(appManager: RemixAppManager) { super(profile) this.appManager = appManager this.element = document.createElement('div') this.element.setAttribute('id', 'remixGuideEl') + this.payload = { + sectionToExpandedCell: [['', '']], + data: {} + } } async onActivation() { @@ -38,24 +44,23 @@ export class RemixGuidePlugin extends ViewPlugin { await this.call('tabs', 'focus', 'remixGuide') this.renderComponent() _paq.push(['trackEvent', 'plugin', 'activated', 'remixGuide']) + // Read the data + this.payload.data = Data + this.handleKeyDown = (event) => { + if (event.key === 'Escape') { + this.showVideo = false + this.renderComponent() + } + } + document.addEventListener('keydown', this.handleKeyDown); } onDeactivation(): void { - } - - async showDetails(sentPayload: any) { - const contractName = Object.entries(sentPayload).find(([key, value]) => key) - await this.call('tabs', 'focus', 'remixGuide') - this.profile.displayName = `${contractName[0]}` - this.payload = sentPayload - const active = await this.call('theme', 'currentTheme') - - this.renderComponent() + document.removeEventListener('keydown', this.handleKeyDown); } private handleThemeChange() { this.on('theme', 'themeChanged', (theme: any) => { - this.renderComponent() }) } @@ -64,6 +69,7 @@ export class RemixGuidePlugin extends ViewPlugin { this.dispatch = dispatch this.renderComponent() } + render() { return (
@@ -76,168 +82,88 @@ export class RemixGuidePlugin extends ViewPlugin { this.dispatch({ ...this, ...this.payload, - themeStyle: this.themeStyle, - theme: this.theme + showVideo: this.showVideo, + videoID: this.videoID }) } updateComponent(state: any) { return ( - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { + return + { section.cells.map(cell => { + return { + this.showVideo = true + this.videoID = cell.expandViewElement.videoID + this.renderComponent() + }} + logo={cell.expandViewElement.logo} + > + + + + + })} + + })} + + { state.showVideo &&
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+
+ +
+
+ +
+
+
+
} +
) } diff --git a/apps/remix-ide/src/app/plugins/remixGuideData.json b/apps/remix-ide/src/app/plugins/remixGuideData.json new file mode 100644 index 0000000000..e8eeea0fad --- /dev/null +++ b/apps/remix-ide/src/app/plugins/remixGuideData.json @@ -0,0 +1,47 @@ +{ + "logo": "/assets/img/YouTubeLogo.webp", + "title": "Remix Guide", + "description": "Streamlined access to categorized video tutorials for mastering Remix IDE. From fundamentals to advanced techniques, level up your development skills with ease.", + "sections": [ + { + "title": "Basics", + "hScrollable": "true", + "cells": [ + { + "title": "first item", + "tagList": [ + "L2", + "AI" + ], + "authorURL": "EatTheBlocks", + "expandViewElement": { + "videoID": "vH8T3In6ZkE", + "logo": "https://yt3.ggpht.com/9NFZbC9mkA152sSWJJgNBls6GlBdknsF-9gi6ZVk_xsHjmc82j3q1Pd5a--GCnOKUrP-YtNbHls=s48-c-k-c0x00ffffff-no-rj" + } + }, + { + "title": "second item", + "tagList": [ + "solidity", + "AI" + ], + "expandViewElement": { + "videoID": "vH8T3In6ZkE", + "logo": "https://yt3.ggpht.com/9NFZbC9mkA152sSWJJgNBls6GlBdknsF-9gi6ZVk_xsHjmc82j3q1Pd5a--GCnOKUrP-YtNbHls=s48-c-k-c0x00ffffff-no-rj" + } + }, + { + "title": "third item", + "tagList": [ + "vyper", + "AI" + ], + "expandViewElement": { + "videoID": "vH8T3In6ZkE", + "logo": "https://yt3.ggpht.com/9NFZbC9mkA152sSWJJgNBls6GlBdknsF-9gi6ZVk_xsHjmc82j3q1Pd5a--GCnOKUrP-YtNbHls=s48-c-k-c0x00ffffff-no-rj" + } + } + ] + } + ] +} \ No newline at end of file diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js index 07958b4491..04f185a7e1 100644 --- a/apps/remix-ide/src/remixAppManager.js +++ b/apps/remix-ide/src/remixAppManager.js @@ -159,7 +159,6 @@ export class RemixAppManager extends PluginManager { if (Registry.getInstance().get('platform').api.isDesktop()) { requiredModules = [...requiredModules, 'fs', 'electronTemplates', 'isogit', 'remix-templates', 'electronconfig', 'xterm', 'compilerloader', 'ripgrep'] } - } async canActivatePlugin(from, to) { diff --git a/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx b/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx index 102b80d72d..01915d99c9 100644 --- a/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx +++ b/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx @@ -16,15 +16,16 @@ export const CustomCheckbox = (props: CustomCheckboxProps) => { if (!textColor || textColor == '') textColor = filterCon.keyValueMap[props.label].color return ( -
+
{ - if (props.label == 'no tag') - filterCon.showUntagged = ! filterCon.showUntagged - else filterCon.updateValue(props.label, e.target.checked, textColor)}} + filterCon.updateValue(props.label, e.target.checked, textColor)}} type="checkbox" />