From 77014377e3457214fd1de57bc211bb723adcfa5f Mon Sep 17 00:00:00 2001 From: bunsenstraat Date: Wed, 12 Jan 2022 15:31:12 +0100 Subject: [PATCH 01/18] some fixes --- apps/remix-ide/src/app/components/side-panel.tsx | 1 + apps/remix-ide/src/app/components/vertical-icons.js | 5 +++++ .../src/lib/components/Chevron.tsx | 13 +++++++++++-- .../src/lib/components/Home.tsx | 2 +- .../src/lib/components/RequiredSection.tsx | 1 + .../src/lib/components/Settings.tsx | 1 + .../src/lib/remix-ui-vertical-icons-panel.css | 4 ++++ .../src/lib/remix-ui-vertical-icons-panel.tsx | 3 --- 8 files changed, 24 insertions(+), 6 deletions(-) diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx index 8b64d64e45..a2aa2f0119 100644 --- a/apps/remix-ide/src/app/components/side-panel.tsx +++ b/apps/remix-ide/src/app/components/side-panel.tsx @@ -63,6 +63,7 @@ export class SidePanel extends AbstractPanel { } removeView (profile) { + if(this.plugins[profile.name].active) this.call('menuicons', 'select', 'filePanel') super.removeView(profile) this.emit('pluginDisabled', profile.name) this.call('menuicons', 'unlinkContent', profile) diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js index c458e9e5ef..7a4a9f8230 100644 --- a/apps/remix-ide/src/app/components/vertical-icons.js +++ b/apps/remix-ide/src/app/components/vertical-icons.js @@ -64,6 +64,11 @@ export class VerticalIcons extends Plugin { } + async activateHome() { + await this.call('manager', 'activatePlugin', 'home') + await this.call('tabs', 'focus', 'home') + } + /** * Remove an icon from the map * @param {ModuleProfile} profile The profile of the module diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx index c3c5c472ba..c75fe9062d 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx @@ -3,14 +3,23 @@ import React, { MutableRefObject } from 'react' export interface ChevronProps { divElementRef: MutableRefObject - cssRule: string + cssRule: string, + direction: string } function Chevron (props: ChevronProps) { + const click = () => { + if (props.direction === 'down') { + props.divElementRef.current.scrollBy(0, 40) + } else { + props.divElementRef.current.scrollBy(0, -40) + } + } + return ( <> { props.divElementRef.current && props.divElementRef.current.scrollHeight > props.divElementRef.current.clientHeight - ? : null } + ? : null } ) } diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx index 8801a9556f..30a5497d4c 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx @@ -11,7 +11,7 @@ function Home ({ verticalIconPlugin }: HomeProps) { return (
verticalIconPlugin.activateHome()} + onClick={async () => await verticalIconPlugin.activateHome()} // @ts-ignore plugin="home" title="Home" diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx index 766994a8ab..0f6bf3f4da 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx @@ -60,6 +60,7 @@ function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, r scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? ( diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx index f8f0c04698..b15ace9b78 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx @@ -36,6 +36,7 @@ function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addA
{ scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? () : null } {Object.keys(verticalIconsPlugin.targetProfileForChange) diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css index 5ea1595507..7566dd8dd1 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css +++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css @@ -116,4 +116,8 @@ #menuitems { list-style: none; margin: 0px; + } + + .remixui_icon-chevron { + cursor: pointer; } \ No newline at end of file diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx index 95ea7e58d3..112e34d0ed 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx @@ -92,9 +92,6 @@ export function RemixUiVerticalIconsPanel ({ async function itemContextAction (e: any, name: string, documentation: string) { verticalIconsPlugin.appManager.deactivatePlugin(name) - if (e.target.parentElement.classList.contains('active')) { - verticalIconsPlugin.select('filePanel') - } verticalIconsPlugin.renderComponent() } From ad0d26ecea78cb9a4460d0ba98b29cd3e33e899a Mon Sep 17 00:00:00 2001 From: bunsenstraat Date: Fri, 14 Jan 2022 11:27:20 +0100 Subject: [PATCH 02/18] refactor --- .../src/lib/remix-ui-vertical-icons-panel.tsx | 129 ++++++------------ 1 file changed, 44 insertions(+), 85 deletions(-) diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx index 112e34d0ed..29a2dde594 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx @@ -1,5 +1,3 @@ -/* eslint-disable no-use-before-define */ -/* eslint-disable @typescript-eslint/no-unused-vars */ import React, { Fragment, useEffect, @@ -7,16 +5,16 @@ import React, { useRef, useState } from 'react' - +import { Plugin } from '@remixproject/engine' import './remix-ui-vertical-icons-panel.css' -import OtherIcons from './components/OtherIcons' -import { VerticalIcons } from '../../types/vertical-icons-panel' +import IconList from './components/IconList' import Home from './components/Home' -import Settings from './components/Settings' -import { RequiredSection } from './components/RequiredSection' import { verticalScrollReducer } from './reducers/verticalScrollReducer' +import { Chevron } from './components/Chevron' +import { IconRecord } from './types' export interface RemixUiVerticalIconsPanelProps { - verticalIconsPlugin: VerticalIcons + verticalIconsPlugin: Plugin + icons: IconRecord[] } const initialState = { @@ -25,13 +23,13 @@ const initialState = { scrollState: false } -export function RemixUiVerticalIconsPanel ({ - verticalIconsPlugin -}: RemixUiVerticalIconsPanelProps) { +const RemixUiVerticalIconsPanel = ({ + verticalIconsPlugin, icons +}: RemixUiVerticalIconsPanelProps) => { const scrollableRef = useRef() const iconPanelRef = useRef() const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState) - + const [theme, setTheme] = useState('dark') useEffect(() => { const evaluateScrollability = (evt: any) => { dispatchScrollAction({ @@ -44,73 +42,22 @@ export function RemixUiVerticalIconsPanel ({ }) } addEventListener('resize', evaluateScrollability) - return () => { removeEventListener('resize', evaluateScrollability) } }) - - function onThemeChanged (themeType: any) { - const invert = themeType === 'dark' ? 1 : 0 - // @ts-ignore - const active = iconPanelRef.current.querySelector('.active') - if (active) { - // @ts-ignore - const image = iconPanelRef.current.querySelector('.remixui_image') - image.style.setProperty('filter', `invert(${invert})`) - } - } - - function removeActive () { - // @ts-ignore - const images = iconPanelRef.current.querySelectorAll('.remixui_image') - images.forEach(function (im: any) { - im.style.setProperty('filter', 'invert(0.5)') - }) - - // remove active - // @ts-ignore - const currentActive = iconPanelRef.current.querySelector('.active') - if (currentActive) { - currentActive.classList.remove('active') - } - } - - function addActive (name: string) { - if (name === 'home') return - const themeType = verticalIconsPlugin.registry.get('themeModule').api.currentTheme().quality - const invert = themeType === 'dark' ? 1 : 0 - const brightness = themeType === 'dark' ? '150' : '0' // should be >100 for icons with color - // @ts-ignore - const nextActive = iconPanelRef.current.querySelector(`[plugin="${name}"]`) - if (nextActive) { - const image = nextActive.querySelector('.remixui_image') - nextActive.classList.add('active') - image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(${brightness}%)`) - } - } - - async function itemContextAction (e: any, name: string, documentation: string) { - verticalIconsPlugin.appManager.deactivatePlugin(name) - verticalIconsPlugin.renderComponent() - } - useEffect(() => { - const themeModule = verticalIconsPlugin.registry.get('themeModule').api - themeModule.events.on('themeChanged', (theme: any) => { - onThemeChanged(theme.quality) + verticalIconsPlugin.on('theme', 'themeChanged', (th: any) => { + setTheme(th.quality) }) return () => { - themeModule.events.off('themeChanged') + verticalIconsPlugin.off('theme', 'themeChanged') } }, []) - useEffect(() => { - if (verticalIconsPlugin.targetProfileForChange && verticalIconsPlugin.targetProfileForChange.udapp) { - const doWalkThroughEvent = new Event('doWalkThrough') - document.dispatchEvent(doWalkThroughEvent) - } - }, [Object.keys(verticalIconsPlugin.targetProfileForChange).length]) + async function itemContextAction (e: any, name: string, documentation: string) { + verticalIconsPlugin.call('manager', 'deactivatePlugin', name) + } return (
@@ -118,13 +65,22 @@ export function RemixUiVerticalIconsPanel ({
scrollableRef.current.clientHeight ? 'remixui_default-icons-container remixui_requiredSection' : activateScroll && activateScroll.scrollState ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}> - p.isRequired)} verticalIconsPlugin={verticalIconsPlugin} - addActive={addActive} - removeActive={removeActive} itemContextAction={itemContextAction} - scrollableRef={scrollableRef} /> + { + scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight + ? ( + + ) : null + }
- {return !p.isRequired && p.profile.name !== 'settings'})} verticalIconsPlugin={verticalIconsPlugin} - addActive={addActive} - removeActive={removeActive} itemContextAction={itemContextAction} />
- {verticalIconsPlugin.targetProfileForChange && - Object.keys(verticalIconsPlugin.targetProfileForChange).length ? ( - - + { scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? () : null } + p.profile.name === 'settings')} verticalIconsPlugin={verticalIconsPlugin} - addActive={addActive} - removeActive={removeActive} itemContextAction={itemContextAction} - scrollableRef={scrollableRef} /> - - ) : null} +
) } + +export default RemixUiVerticalIconsPanel From bf295d0bdad474060efe0606f621297494f27b86 Mon Sep 17 00:00:00 2001 From: bunsenstraat Date: Fri, 14 Jan 2022 11:27:28 +0100 Subject: [PATCH 03/18] refactor --- apps/remix-ide/src/app.js | 4 +- apps/remix-ide/src/app/components/panel.ts | 3 +- .../src/app/components/side-panel.tsx | 36 +++--- .../src/app/components/vertical-icons.js | 115 ----------------- .../src/app/components/vertical-icons.tsx | 117 ++++++++++++++++++ apps/remix-ide/src/remixAppManager.js | 4 + libs/remix-ui/panel/src/lib/types/index.ts | 2 +- .../vertical-icons-panel/.eslintrc.json | 20 +-- .../vertical-icons-panel/src/index.ts | 3 +- .../src/lib/components/Badge.tsx | 11 +- .../src/lib/components/BasicLogo.tsx | 2 - .../src/lib/components/Chevron.tsx | 4 +- .../src/lib/components/Debugger.tsx | 41 ------ .../src/lib/components/FilePanel.tsx | 59 --------- .../src/lib/components/Home.tsx | 7 +- .../src/lib/components/Icon.tsx | 65 +++------- .../src/lib/components/IconList.tsx | 33 +++++ .../src/lib/components/OtherIcons.tsx | 43 ------- .../src/lib/components/PluginManager.tsx | 36 ------ .../src/lib/components/RequiredSection.tsx | 73 ----------- .../src/lib/components/Settings.tsx | 61 --------- .../src/lib/components/Solidity.tsx | 41 ------ .../lib/components/SolidityStaticAnalysis.tsx | 41 ------ .../src/lib/components/Udapp.tsx | 42 ------- .../src/lib/reducers/iconBadgeReducer.ts | 29 ++--- .../src/lib/reducers/verticalScrollReducer.ts | 3 +- .../src/lib/remix-ui-vertical-icons-panel.css | 10 ++ .../src/lib/types/index.ts | 10 ++ .../src/lib/vertical-icons-context-menu.tsx | 46 +++---- .../vertical-icons-panel/tsconfig.json | 12 +- .../vertical-icons-panel/tsconfig.lib.json | 3 +- .../types/vertical-icons-panel.d.ts | 111 ----------------- 32 files changed, 273 insertions(+), 814 deletions(-) delete mode 100644 apps/remix-ide/src/app/components/vertical-icons.js create mode 100644 apps/remix-ide/src/app/components/vertical-icons.tsx delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/IconList.tsx delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/types/index.ts delete mode 100644 libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index d327647549..71360c1e9d 100644 --- a/apps/remix-ide/src/app.js +++ b/apps/remix-ide/src/app.js @@ -225,8 +225,8 @@ class AppComponent { self.engine.register([appPanel, tabProxy]) // those views depend on app_manager - self.menuicons = new VerticalIcons(appManager) - self.sidePanel = new SidePanel(appManager, self.menuicons) + self.menuicons = new VerticalIcons() + self.sidePanel = new SidePanel() self.hiddenPanel = new HiddenPanel() const pluginManagerComponent = new PluginManagerComponent( diff --git a/apps/remix-ide/src/app/components/panel.ts b/apps/remix-ide/src/app/components/panel.ts index a5747188af..3b3bd6d33b 100644 --- a/apps/remix-ide/src/app/components/panel.ts +++ b/apps/remix-ide/src/app/components/panel.ts @@ -49,8 +49,7 @@ export class AbstractPanel extends HostPlugin { * @param {String} name The name of the plugin to display the content */ showContent (name) { - if (!this.plugins[name]) throw new Error(`Plugin ${name} is not yet activated`) - + if (!this.plugins[name]) throw new Error(`Plugin ${name} is not yet activated`) Object.values(this.plugins).forEach(plugin => { plugin.active = false }) diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx index a2aa2f0119..0381dcce4b 100644 --- a/apps/remix-ide/src/app/components/side-panel.tsx +++ b/apps/remix-ide/src/app/components/side-panel.tsx @@ -5,7 +5,6 @@ import { AbstractPanel } from './panel' import { RemixPluginPanel } from '@remix-ui/panel' import packageJson from '../../../../../package.json' import { RemixAppManager } from '../../remixAppManager' -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/plugins/panel-header' // const csjs = require('csjs-inject') @@ -19,18 +18,17 @@ const sidePanel = { // TODO merge with vertical-icons.js export class SidePanel extends AbstractPanel { - appManager: RemixAppManager sideelement: any - verticalIcons: VerticalIcons; - constructor (appManager: RemixAppManager, verticalIcons: VerticalIcons) { + constructor() { super(sidePanel) - this.appManager = appManager this.sideelement = document.createElement('section') this.sideelement.setAttribute('class', 'panel plugin-manager') - this.verticalIcons = verticalIcons + } + onActivation() { + this.renderComponent() // Toggle content - verticalIcons.events.on('toggleContent', (name) => { + this.on('menuicons', 'toggleContent', (name) => { if (!this.plugins[name]) return if (this.plugins[name].active) { // TODO: Only keep `this.emit` (issue#2210) @@ -44,7 +42,7 @@ export class SidePanel extends AbstractPanel { this.events.emit('showing', name) }) // Force opening - verticalIcons.events.on('showContent', (name) => { + this.on('menuicons', 'showContent', (name) => { if (!this.plugins[name]) return this.showContent(name) // TODO: Only keep `this.emit` (issue#2210) @@ -53,26 +51,22 @@ export class SidePanel extends AbstractPanel { }) } - onActivation () { - this.renderComponent() - } - - focus (name) { + focus(name) { this.emit('focusChanged', name) super.focus(name) } - removeView (profile) { - if(this.plugins[profile.name].active) this.call('menuicons', 'select', 'filePanel') + removeView(profile) { + if (this.plugins[profile.name].active) this.call('menuicons', 'select', 'filePanel') super.removeView(profile) this.emit('pluginDisabled', profile.name) this.call('menuicons', 'unlinkContent', profile) this.renderComponent() } - addView (profile, view) { + addView(profile, view) { super.addView(profile, view) - this.verticalIcons.linkContent(profile) + this.call('menuicons', 'linkContent', profile) this.renderComponent() } @@ -80,17 +74,17 @@ export class SidePanel extends AbstractPanel { * Display content and update the header * @param {String} name The name of the plugin to display */ - async showContent (name) { + async showContent(name) { super.showContent(name) this.emit('focusChanged', name) this.renderComponent() } - render () { + render() { return this.sideelement } - renderComponent () { - ReactDOM.render(} plugins={this.plugins}/>, this.sideelement) + renderComponent() { + ReactDOM.render(} plugins={this.plugins} />, this.sideelement) } } diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js deleted file mode 100644 index 7a4a9f8230..0000000000 --- a/apps/remix-ide/src/app/components/vertical-icons.js +++ /dev/null @@ -1,115 +0,0 @@ -import * as packageJson from '../../../../../package.json' -import ReactDOM from 'react-dom' -import React from 'react' // eslint-disable-line -// eslint-disable-next-line no-unused-vars -import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel' -import Registry from '../state/registry' -const { Plugin } = require('@remixproject/engine') -const EventEmitter = require('events') - -const profile = { - name: 'menuicons', - displayName: 'Vertical Icons', - description: '', - version: packageJson.version, - methods: ['select', 'unlinkContent'] -} - -// TODO merge with side-panel.js. VerticalIcons should not be a plugin -export class VerticalIcons extends Plugin { - constructor (appManager) { - super(profile) - this.events = new EventEmitter() - this.appManager = appManager - this.htmlElement = document.createElement('div') - this.htmlElement.setAttribute('id', 'icon-panel') - this.icons = {} - this.iconKind = {} - this.iconStatus = {} - this.defaultProfile = profile - this.targetProfileForChange = {} - this.targetProfileForRemoval = {} - this.registry = Registry.getInstance() - this.keys = ['succeed', 'edited', 'none', 'loading', 'failed'] - this.types = ['error', 'warning', 'success', 'info', ''] - } - - renderComponent () { - ReactDOM.render( - , - this.htmlElement) - } - - onActivation () { - this.renderComponent() - } - - linkContent (profile) { - if (!profile.icon) return - if (!profile.kind) profile.kind = 'none' - this.targetProfileForChange[profile.name] = profile - this.listenOnStatus(profile) - this.renderComponent() - } - - unlinkContent (profile) { - this.targetProfileForRemoval = profile - this.removeIcon(profile) - this.renderComponent() - } - - listenOnStatus (profile) { - - } - - async activateHome() { - await this.call('manager', 'activatePlugin', 'home') - await this.call('tabs', 'focus', 'home') - } - - /** - * Remove an icon from the map - * @param {ModuleProfile} profile The profile of the module - */ - removeIcon ({ name }) { - if (this.targetProfileForChange[name]) delete this.targetProfileForChange[name] - setTimeout(() => { - this.renderComponent() - }, 150) - } - - /** - * Set an icon as active - * @param {string} name Name of profile of the module to activate - */ - select (name) { - // TODO: Only keep `this.emit` (issue#2210) - this.emit('showContent', name) - this.events.emit('showContent', name) - } - - onThemeChanged (themeType) { - const invert = themeType === 'dark' ? 1 : 0 - const active = this.view.querySelector('.active') - if (active) { - const image = active.querySelector('.image') - image.style.setProperty('filter', `invert(${invert})`) - } - } - - /** - * Toggles the side panel for plugin - * @param {string} name Name of profile of the module to activate - */ - toggle (name) { - // TODO: Only keep `this.emit` (issue#2210) - this.emit('toggleContent', name) - this.events.emit('toggleContent', name) - } - - render () { - return this.htmlElement - } -} diff --git a/apps/remix-ide/src/app/components/vertical-icons.tsx b/apps/remix-ide/src/app/components/vertical-icons.tsx new file mode 100644 index 0000000000..6ed6fad0ff --- /dev/null +++ b/apps/remix-ide/src/app/components/vertical-icons.tsx @@ -0,0 +1,117 @@ +// eslint-disable-next-line no-use-before-define +import React from 'react' +import ReactDOM from 'react-dom' +import Registry from '../state/registry' +import packageJson from '../../../../../package.json' +import { Plugin } from '@remixproject/engine' +import { EventEmitter } from 'events' +import { IconRecord, RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel' +import { Profile } from '@remixproject/plugin-utils' +import { timeStamp } from 'console' + +const profile = { + name: 'menuicons', + displayName: 'Vertical Icons', + description: '', + version: packageJson.version, + methods: ['select', 'unlinkContent', 'linkContent'], + events: ['toggleContent', 'showContent'] +} + +// TODO merge with side-panel.js. VerticalIcons should not be a plugin +export class VerticalIcons extends Plugin { + events: EventEmitter + htmlElement: HTMLDivElement + icons: Record = {} + constructor () { + super(profile) + this.events = new EventEmitter() + this.htmlElement = document.createElement('div') + this.htmlElement.setAttribute('id', 'icon-panel') + } + + renderComponent () { + const fixedOrder = ['filePanel', 'solidity','udapp', 'debugger', 'solidityStaticAnalysis', 'solidityUnitTesting', 'pluginManager'] + + const divived = Object.values(this.icons).map((value) => { return { + ...value, + isRequired: fixedOrder.indexOf(value.profile.name) > -1 + }}).sort((a,b) => { + return a.timestamp - b.timestamp + }) + + const required = divived.filter((value) => value.isRequired).sort((a,b) => { + return fixedOrder.indexOf(a.profile.name) - fixedOrder.indexOf(b.profile.name) + }) + + const sorted: IconRecord[] = [ + ...required, + ...divived.filter((value) => { return !value.isRequired }) + ] + + ReactDOM.render( + , + this.htmlElement) + } + + onActivation () { + this.renderComponent() + this.on('sidePanel', 'focusChanged', (name: string) => { + Object.keys(this.icons).map((o) => { + this.icons[o].active = false + }) + this.icons[name].active = true + this.renderComponent() + }) + } + + async linkContent (profile: Profile) { + if (!profile.icon) return + if (!profile.kind) profile.kind = 'none' + this.icons[profile.name] = { + profile: profile, + active: false, + canbeDeactivated: await this.call('manager', 'canDeactivate', this.profile, profile), + timestamp: Date.now() + } + this.renderComponent() + } + + unlinkContent (profile: Profile) { + delete this.icons[profile.name] + this.renderComponent() + } + + async activateHome() { + await this.call('manager', 'activatePlugin', 'home') + await this.call('tabs', 'focus', 'home') + } + + /** + * Set an icon as active + * @param {string} name Name of profile of the module to activate + */ + select (name: string) { + // TODO: Only keep `this.emit` (issue#2210) + console.log(name, this) + this.emit('showContent', name) + this.events.emit('showContent', name) + } + + /** + * Toggles the side panel for plugin + * @param {string} name Name of profile of the module to activate + */ + toggle (name: string) { + // TODO: Only keep `this.emit` (issue#2210) + this.emit('toggleContent', name) + this.events.emit('toggleContent', name) + } + + render () { + return this.htmlElement + } +} diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js index d87b6ee1a9..692cb23644 100644 --- a/apps/remix-ide/src/remixAppManager.js +++ b/apps/remix-ide/src/remixAppManager.js @@ -50,6 +50,10 @@ export class RemixAppManager extends PluginManager { return isNative(from.name) } + async canDeactivate(from,to) { + return this.canDeactivatePlugin(from, to) + } + async deactivatePlugin (name) { const [to, from] = [ await this.getProfile(name), diff --git a/libs/remix-ui/panel/src/lib/types/index.ts b/libs/remix-ui/panel/src/lib/types/index.ts index f8407033ab..67b79c4214 100644 --- a/libs/remix-ui/panel/src/lib/types/index.ts +++ b/libs/remix-ui/panel/src/lib/types/index.ts @@ -6,4 +6,4 @@ export type PluginRecord = { active: boolean class?: string minimized?: boolean - } +} diff --git a/libs/remix-ui/vertical-icons-panel/.eslintrc.json b/libs/remix-ui/vertical-icons-panel/.eslintrc.json index 299346762b..1587c6172a 100644 --- a/libs/remix-ui/vertical-icons-panel/.eslintrc.json +++ b/libs/remix-ui/vertical-icons-panel/.eslintrc.json @@ -1,19 +1,19 @@ { "env": { - "browser": true, - "es6": true + "browser": true, + "es6": true }, - "extends": ["../../../.eslintrc"], + "ignorePatterns": ["!**/*"], + "extends": "../../../.eslintrc.json", "globals": { - "Atomics": "readonly", - "SharedArrayBuffer": "readonly" + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" }, "parserOptions": { - "ecmaVersion": 11, - "sourceType": "module" + "ecmaVersion": 11, + "sourceType": "module" }, "rules": { - "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": "error" + "standard/no-callback-literal": "off" } -} +} \ No newline at end of file diff --git a/libs/remix-ui/vertical-icons-panel/src/index.ts b/libs/remix-ui/vertical-icons-panel/src/index.ts index 49ed453dfa..8a82a3c0fa 100644 --- a/libs/remix-ui/vertical-icons-panel/src/index.ts +++ b/libs/remix-ui/vertical-icons-panel/src/index.ts @@ -1 +1,2 @@ -export * from './lib/remix-ui-vertical-icons-panel' +export { default as RemixUiVerticalIconsPanel } from './lib/remix-ui-vertical-icons-panel' +export { IconRecord } from './lib/types' \ No newline at end of file diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx index 96371dd8af..83680f583e 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx @@ -1,10 +1,5 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -// eslint-disable-next-line no-use-before-define -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -// eslint-disable-next-line no-use-before-define -import React, { Fragment, useEffect, useReducer } from 'react' -import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer' -import { BadgeStatus, IconProfile, IconStatus } from './Icon' +import React from 'react' +import { BadgeStatus } from './Icon' interface BadgeProps { badgeStatus?: BadgeStatus @@ -65,4 +60,4 @@ function Badge ({ badgeStatus }: BadgeProps) { ) } -export default Badge +export default Badge \ No newline at end of file diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx index ab4ee414cd..a470ce8541 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx @@ -1,5 +1,3 @@ -/* eslint-disable no-use-before-define */ -// eslint-disable-next-line @typescript-eslint/no-unused-vars import React from 'react' function BasicLogo () { diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx index c75fe9062d..11f9c23c20 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx @@ -10,9 +10,9 @@ export interface ChevronProps { function Chevron (props: ChevronProps) { const click = () => { if (props.direction === 'down') { - props.divElementRef.current.scrollBy(0, 40) + props.divElementRef.current.scrollBy({ top: 40, behavior: 'smooth' }) } else { - props.divElementRef.current.scrollBy(0, -40) + props.divElementRef.current.scrollBy({ top: -40, behavior: 'smooth' }) } } diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx deleted file mode 100644 index 6e4cfbfc23..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -// eslint-disable-next-line no-use-before-define -import React, { Fragment } from 'react' -import Icon from './Icon' - -interface DebuggerProps { - verticalIconsPlugin: VerticalIcons - itemContextAction: (e: any, name: string, documentation: string) => Promise - addActive: (name: string) => void - removeActive: () => void -} - -function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: DebuggerProps) { - return ( - - {verticalIconsPlugin.targetProfileForChange && - Object.keys(verticalIconsPlugin.targetProfileForChange).length - ? Object.keys(verticalIconsPlugin.targetProfileForChange) - .filter(p => p === 'debugger') - .map(p => ( -
- -
- )) - : null} - - ) -} - -export default Debugger diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx deleted file mode 100644 index f85d83d375..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -// eslint-disable-next-line no-use-before-define -import React, { Fragment, useEffect, useRef } from 'react' -import Icon from './Icon' - -interface FilePanelProps { - verticalIconsPlugin: VerticalIcons - itemContextAction: (e: any, name: string, documentation: string) => Promise - addActive: (name: string) => void - removeActive: () => void -} - -function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: FilePanelProps) { - const filePanelRef = useRef(null) - function onThemeChanged (themeType: any) { - const invert = themeType === 'dark' ? 1 : 0 - // @ts-ignore - const active = filePanelRef.current && filePanelRef.current.querySelector('.active') - if (active) { - // @ts-ignore - const image = filePanelRef.current.querySelector('.remixui_image') - image.style.setProperty('filter', `invert(${invert})`) - } - } - - useEffect(() => { - const themeModule = verticalIconsPlugin.registry.get('themeModule').api - themeModule.events.on('themeChanged', (theme: any) => { - onThemeChanged(theme.quality) - }) - }, []) - - return ( - - {verticalIconsPlugin.targetProfileForChange && - Object.keys(verticalIconsPlugin.targetProfileForChange).length - ? Object.keys(verticalIconsPlugin.targetProfileForChange) - .filter(p => p === 'filePanel') - .map(p => ( -
- -
- )) - : null} - - ) -} - -export default FilePanel diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx index 30a5497d4c..bccae04ae5 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx @@ -1,10 +1,7 @@ -/* eslint-disable no-use-before-define */ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -import React, { ReactNode } from 'react' +import React from 'react' import BasicLogo from './BasicLogo' interface HomeProps { - verticalIconPlugin: VerticalIcons + verticalIconPlugin: any } function Home ({ verticalIconPlugin }: HomeProps) { diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx index 247eee1ccf..411f969823 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx @@ -1,9 +1,10 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu' // eslint-disable-next-line no-use-before-define import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react' -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' import Badge from './Badge' import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer' +import { Plugin } from '@remixproject/engine' +import { IconRecord } from '../types' export interface IconStatus { key: string @@ -16,26 +17,11 @@ export interface BadgeStatus extends IconStatus { text: string } -export interface IconProfile { - description: string - displayName: string - documentation: string - events: any[] - icon: string - kind: string - location: string - methods: string[] - name: string - version: string - tooltip?: string - } - interface IconProps { - verticalIconPlugin: VerticalIcons - profile: IconProfile + verticalIconPlugin: Plugin + iconRecord: IconRecord contextMenuAction: (evt: any, profileName: string, documentation: string) => void - addActive: (profileName: string) => void - removeActive: () => void + theme: string } const initialState = { @@ -46,18 +32,15 @@ const initialState = { pluginName: '' } -function Icon ({ - profile, +const Icon = ({ + iconRecord, verticalIconPlugin, contextMenuAction, - addActive, - removeActive - // eslint-disable-next-line @typescript-eslint/no-unused-vars -}: IconProps) { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { tooltip, displayName, name, kind, icon, documentation } = profile + theme +}: IconProps) => { + const { displayName, name, icon, documentation } = iconRecord.profile const [title] = useState(() => { - const temp = tooltip || displayName || name + const temp = null || displayName || name return temp.replace(/^\w/, (word: string) => word.toUpperCase()) }) const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>( @@ -71,11 +54,9 @@ function Icon ({ const [showContext, setShowContext] = useState(false) const [canDeactivate] = useState(false) const iconRef = useRef(null) - // eslint-disable-next-line @typescript-eslint/no-unused-vars const handleContextMenu = (e: SyntheticEvent & PointerEvent) => { - const deactivationState = verticalIconPlugin.appManager - .canDeactivatePlugin(verticalIconPlugin.defaultProfile, { name }) + const deactivationState = iconRecord.canbeDeactivated if (documentation && documentation.length > 0 && deactivationState) { setLinks({ Documentation: documentation, CanDeactivate: deactivationState }) } else { @@ -102,21 +83,12 @@ function Icon ({ }, []) return ( - + <>
{ - if (name === 'filePanel') { - addActive(name) - } - }} + className={`remixui_icon m-2 pl-1`} onClick={() => { - removeActive() - addActive(name) - verticalIconPlugin.toggle(name) + (verticalIconPlugin as any).toggle(name) }} - // @ts-ignore - plugin={name} title={title} onContextMenu={(e: any) => { e.preventDefault() @@ -127,11 +99,10 @@ function Icon ({ id={`verticalIconsKind${name}`} ref={iconRef} > - {name} - { badgeStatus && badgeStatus.pluginName === name ? ( + {name} ) : null } + />
{showContext ? ( ) : null} - + ) } diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/IconList.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/IconList.tsx new file mode 100644 index 0000000000..b41a417ddd --- /dev/null +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/IconList.tsx @@ -0,0 +1,33 @@ +/* eslint-disable no-use-before-define */ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import React, { useEffect } from 'react' +import { IconRecord } from '../types' +import Icon from './Icon' +interface OtherIconsProps { + verticalIconsPlugin: any + itemContextAction: (e: any, name: string, documentation: string) => Promise + icons: IconRecord[] + theme: string +} + +function IconList ({ verticalIconsPlugin, itemContextAction, icons, theme }: OtherIconsProps) { + return ( +
+ { + icons + .map(p => ( + + ))} +
+ ) +} + +export default IconList diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx deleted file mode 100644 index 45342bbc5d..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/* eslint-disable no-use-before-define */ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -import React from 'react' -import Icon from './Icon' - -function customFilter (p: string) { - if (p !== 'settings' && p !== 'pluginManager' && - p !== 'filePanel' && p !== 'debugger' && - p !== 'compiler' && p !== 'solidity' && - p !== 'udapp' && p !== 'testing' && p !== 'solidityStaticAnalysis') return true - return false -} -interface OtherIconsProps { - verticalIconsPlugin: VerticalIcons - itemContextAction: (e: any, name: string, documentation: string) => Promise - addActive: (name: string) => void - removeActive: () => void -} - -function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) { - return ( -
- { - Object.keys(verticalIconsPlugin.targetProfileForChange) - .filter(customFilter) - .map(p => ( - - ))} -
- ) -} - -export default OtherIcons diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx deleted file mode 100644 index 5f73b7e008..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* eslint-disable no-use-before-define */ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -import React, { Fragment } from 'react' -import Icon from './Icon' - -interface PluginManagerProps { - verticalIconsPlugin: VerticalIcons - itemContextAction: (e: any, name: string, documentation: string) => Promise - addActive: (name: string) => void - removeActive: () => void -} - -function PluginManager ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: PluginManagerProps) { - return ( - - {Object.keys(verticalIconsPlugin.targetProfileForChange) - .filter(p => p === 'pluginManager') - .map(p => ( - - ))} - - ) -} - -export default PluginManager diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx deleted file mode 100644 index 0f6bf3f4da..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -// eslint-disable-next-line no-use-before-define -import React, { Fragment, MutableRefObject } from 'react' -import { Chevron } from './Chevron' -import Debugger from './Debugger' -import FilePanel from './FilePanel' -import PluginManager from './PluginManager' -import Solidity from './Solidity' -import SolidityStaticAnalysis from './SolidityStaticAnalysis' -import Udapp from './Udapp' - -interface RequiredSectionProps { - verticalIconsPlugin: VerticalIcons - itemContextAction: (e: any, name: string, documentation: string) => Promise - addActive: (name: string) => void - removeActive: () => void - scrollableRef: MutableRefObject -} - -function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, removeActive, scrollableRef }: RequiredSectionProps) { - return ( - - - - - - - - { - scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight - ? ( - - ) : null - } - - ) -} - -export { RequiredSection } diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx deleted file mode 100644 index b15ace9b78..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/* eslint-disable no-use-before-define */ -// eslint-disable-next-line @typescript-eslint/no-unused-vars -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -import React, { useEffect, useRef } from 'react' -import { Chevron } from './Chevron' -import Icon from './Icon' - -interface SettingsProps { - verticalIconsPlugin: VerticalIcons - itemContextAction: (e: any, name: string, documentation: string) => Promise - addActive: (name: string) => void - removeActive: () => void - scrollableRef: React.MutableRefObject -} - -function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive }: SettingsProps) { - const settingsRef = useRef(null) - function onThemeChanged (themeType: any) { - const invert = themeType === 'dark' ? 1 : 0 - // @ts-ignore - const active = settingsRef.current.querySelector('.active') - if (active) { - // @ts-ignore - const image = settingsRef.current.querySelector('.remixui_image') - image.style.setProperty('filter', `invert(${invert})`) - } - } - - useEffect(() => { - const themeModule = verticalIconsPlugin.registry.get('themeModule').api - themeModule.events.on('themeChanged', (theme: any) => { - onThemeChanged(theme.quality) - }) - }, []) - return ( -
- { scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight ? () : null } - {Object.keys(verticalIconsPlugin.targetProfileForChange) - .filter(p => p === 'settings') - .map(p => ( - - ))} -
- ) -} - -export default Settings diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx deleted file mode 100644 index 7040f48dd5..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -// eslint-disable-next-line no-use-before-define -import React, { Fragment } from 'react' -import Icon from './Icon' - -interface SolidityProps { - verticalIconsPlugin: VerticalIcons - itemContextAction: (e: any, name: string, documentation: string) => Promise - addActive: (name: string) => void - removeActive: () => void -} - -function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityProps) { - return ( - - {verticalIconsPlugin.targetProfileForChange && - Object.keys(verticalIconsPlugin.targetProfileForChange).length - ? Object.keys(verticalIconsPlugin.targetProfileForChange) - .filter(p => p === 'solidity') - .map(p => ( -
- -
- )) - : null} - - ) -} - -export default Solidity diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx deleted file mode 100644 index f2886e8ec2..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -// eslint-disable-next-line no-use-before-define -import React, { Fragment } from 'react' -import Icon from './Icon' - -interface SolidityStaticAnalysisProps { - verticalIconsPlugin: VerticalIcons - itemContextAction: (e: any, name: string, documentation: string) => Promise - addActive: (name: string) => void - removeActive: () => void -} - -function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityStaticAnalysisProps) { - return ( - - {verticalIconsPlugin.targetProfileForChange && - Object.keys(verticalIconsPlugin.targetProfileForChange).length - ? Object.keys(verticalIconsPlugin.targetProfileForChange) - .filter(p => p === 'solidityStaticAnalysis') - .map(p => ( -
- -
- )) - : null} - - ) -} - -export default SolidityStaticAnalysis diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx deleted file mode 100644 index 377609d968..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -// eslint-disable-next-line no-use-before-define -import React, { Fragment } from 'react' -import Icon from './Icon' - -interface UdappProps { - verticalIconsPlugin: VerticalIcons - itemContextAction: (e: any, name: string, documentation: string) => Promise - addActive: (name: string) => void - removeActive: () => void -} - -function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: UdappProps) { - return ( - - {verticalIconsPlugin.targetProfileForChange && - Object.keys(verticalIconsPlugin.targetProfileForChange).length - ? Object.keys(verticalIconsPlugin.targetProfileForChange) - .filter(p => p === 'udapp') - .map(p => ( -
- -
- )) - : null} - - ) -} - -export default Udapp diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts index ff20a3f63d..d48f64c3bc 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts +++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts @@ -1,8 +1,5 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import helper from 'apps/remix-ide/src/lib/helper' +import { checkSpecialChars } from '@remix-ui/helper' import { BadgeStatus, IconStatus } from '../components/Icon' -import React, { MutableRefObject } from 'react' -import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' export type IconBadgeReducerAction = { readonly type: string @@ -14,32 +11,30 @@ export type IconBadgeReducerAction = { * @param {String} name * @param {Object} status */ -// eslint-disable-next-line @typescript-eslint/no-unused-vars -function setIconStatus (name: string, status: IconStatus) { + +function setIconStatus(name: string, status: IconStatus) { if (status.key === 'none') return { ...status, text: '' } // remove status let text = '' let key = '' if (typeof status.key === 'number') { key = status.key - // eslint-disable-next-line @typescript-eslint/no-unused-vars text = key - } else key = helper.checkSpecialChars(status.key) ? '' : status.key + } else key = checkSpecialChars(status.key) ? '' : status.key let thisType = '' if (status.type === 'error') { thisType = 'danger' // to use with bootstrap - } else thisType = helper.checkSpecialChars(status.type) ? '' : status.type! - const title = helper.checkSpecialChars(status.title) ? '' : status.title + } else thisType = checkSpecialChars(status.type) ? '' : status.type! + const title = checkSpecialChars(status.title) ? '' : status.title const pluginName = status.pluginName return { title, type: thisType, key, text, pluginName } } -export function iconBadgeReducer (state: BadgeStatus, action: IconBadgeReducerAction) { - const { status, ref, verticalIconPlugin } = action.payload - if (Object.keys(verticalIconPlugin.targetProfileForChange).includes(action.type)) { - const setStatus = setIconStatus(action.type, status) - return setStatus - } - return state +export function iconBadgeReducer(state: BadgeStatus, action: IconBadgeReducerAction) { + const { status } = action.payload + + const setStatus = setIconStatus(action.type, status) + return setStatus + } diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts index b1f4682394..9987b3a369 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts +++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts @@ -6,7 +6,8 @@ export type actionType = { export function verticalScrollReducer (prevState: any, actionPayload: actionType) { if (actionPayload.type === 'resize') { - let { scrollHeight, clientHeight, scrollState } = actionPayload.payload + const { scrollHeight, clientHeight } = actionPayload.payload + let { scrollState } = actionPayload.payload if (scrollHeight > clientHeight) scrollState = true return { scrollHeight, clientHeight, scrollState } } diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css index 7566dd8dd1..5d6c98f0e8 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css +++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css @@ -31,6 +31,16 @@ padding: 4px; filter: invert(0.5); } + + .remixui_icon .selected-dark { + filter: invert(1) grayscale(1); + + } + + .remixui_icon .selected-light { + filter: invert(0) grayscale(1); + } + .remixui_image { } .remixui_icon svg { diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/types/index.ts b/libs/remix-ui/vertical-icons-panel/src/lib/types/index.ts new file mode 100644 index 0000000000..754c897b8b --- /dev/null +++ b/libs/remix-ui/vertical-icons-panel/src/lib/types/index.ts @@ -0,0 +1,10 @@ +import { Profile } from '@remixproject/plugin-utils' + +export type IconRecord = { + profile: Profile + active: boolean + class?: string + canbeDeactivated?: boolean + isRequired?: boolean + timestamp: number +} diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx index 1481e6b226..b1ffa7c81b 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx @@ -1,9 +1,5 @@ -/* eslint-disable @typescript-eslint/ban-ts-comment */ -/* eslint-disable @typescript-eslint/no-unused-vars */ -/* eslint-disable no-use-before-define */ -// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Plugin } from '@remixproject/engine' import React, { Fragment, useEffect, useRef } from 'react' -import { VerticalIcons } from '../../types/vertical-icons-panel' export interface VerticalIconsContextMenuProps extends React.DetailedHTMLProps, HTMLDivElement> { pageX: number @@ -11,7 +7,7 @@ export interface VerticalIconsContextMenuProps extends React.DetailedHTMLProps void contextMenuAction: (evt: any, profileName: string, documentation: string) => void } @@ -21,31 +17,22 @@ interface MenuLinksProps { hide: () => void profileName: string canBeDeactivated: boolean - verticalIconPlugin: VerticalIcons + verticalIconPlugin: any ref?: React.MutableRefObject toggle: (name: string) => void contextMenuAction: (evt: any, profileName: string, documentation: string) => void } interface MenuProps { - verticalIconsPlugin: VerticalIcons + verticalIconsPlugin: Plugin profileName: string listItems: { Documentation: string, CanDeactivate: boolean } hide: () => void } -const requiredModules = [ - 'manager', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme', - 'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons', - 'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic'] -const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider'] - -function VerticalIconsContextMenu (props: VerticalIconsContextMenuProps) { +const VerticalIconsContextMenu = (props: VerticalIconsContextMenuProps) =>{ const menuRef = useRef(null) - useEffect(() => { - document.addEventListener('click', props.hideContextMenu) - return () => document.removeEventListener('click', props.hideContextMenu) - }, []) + ClickOutside(menuRef, props.hideContextMenu) useEffect(() => { // @ts-ignore menuRef.current.focus() @@ -54,7 +41,6 @@ function VerticalIconsContextMenu (props: VerticalIconsContextMenuProps) {