From 6ace476c4868e9bc1751bd951ffb2d33c7e62f03 Mon Sep 17 00:00:00 2001 From: lianahus Date: Tue, 28 May 2024 18:25:27 +0200 Subject: [PATCH 1/7] fixes in Grid view and updates for remix guide --- apps/remix-ide/src/app.js | 2 +- apps/remix-ide/src/app/plugins/remixGuide.tsx | 267 +++++++----------- .../src/app/plugins/remixGuideData.json | 46 +++ apps/remix-ide/src/remixAppManager.js | 2 +- .../src/lib/components/customCheckbox.tsx | 9 +- .../grid-view/src/lib/filtersContext.tsx | 4 +- .../grid-view/src/lib/remix-ui-grid-cell.tsx | 114 +++++--- .../src/lib/remix-ui-grid-section.tsx | 5 + .../grid-view/src/lib/remix-ui-grid-view.tsx | 137 +++++---- .../src/lib/remix-ui-modal-dialog.tsx | 1 + 10 files changed, 297 insertions(+), 290 deletions(-) create mode 100644 apps/remix-ide/src/app/plugins/remixGuideData.json diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 5a2ddf2a47..c1d2fa7b09 100644 --- a/apps/remix-ide/src/app.js +++ b/apps/remix-ide/src/app.js @@ -345,7 +345,7 @@ class AppComponent { solidityumlgen, compilationDetails, vyperCompilationDetails, - // remixGuide, + remixGuide, contractFlattener, solidityScript, templates, diff --git a/apps/remix-ide/src/app/plugins/remixGuide.tsx b/apps/remix-ide/src/app/plugins/remixGuide.tsx index 037f4f8cf5..0a8b5e13b6 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,22 @@ export class RemixGuidePlugin extends ViewPlugin { appManager: RemixAppManager element: HTMLDivElement payload: any - themeStyle: any - theme: ThemeKeys | ThemeObject + showVideo: boolean + videoID: string + handleKeyDown: any + handleEscape: any + + //sectionToExpandedCell: [string, string][]; // Array of pairs where key is the section name and the second value is the name of the cell + 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 +46,24 @@ 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) => { + console.log("key down") + 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 +72,7 @@ export class RemixGuidePlugin extends ViewPlugin { this.dispatch = dispatch this.renderComponent() } + render() { return (
@@ -76,168 +85,86 @@ 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..1e03ac8c4c --- /dev/null +++ b/apps/remix-ide/src/app/plugins/remixGuideData.json @@ -0,0 +1,46 @@ +{ + "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" + ], + "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 c52b50c081..107dda52a0 100644 --- a/apps/remix-ide/src/remixAppManager.js +++ b/apps/remix-ide/src/remixAppManager.js @@ -128,7 +128,7 @@ export function isNative(name) { 'circuit-compiler', 'compilationDetails', 'vyperCompilationDetails', - 'remixGuide', + //'remixGuide', 'walletconnect' ] return nativePlugins.includes(name) || requiredModules.includes(name) || isInjectedProvider(name) || isVM(name) 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" />