From 67f75fba555f16062fd59852ddfe756cde8d1710 Mon Sep 17 00:00:00 2001 From: "davidzagi93@gmail.com" Date: Thu, 25 Nov 2021 18:52:45 +0100 Subject: [PATCH] working on mainPanel --- apps/remix-ide/src/app.js | 2 +- .../src/app/components/main-panel.js | 59 ++++----- apps/remix-ide/src/app/components/panel.js | 23 +++- .../lib/remix-ui-abstract-panel.module.css | 20 ++++ .../src/lib/remix-ui-abstract-panel.tsx | 5 +- .../src/lib/remix-ui-main-panel.module.css | 20 ++++ .../src/lib/remix-ui-main-panel.tsx | 113 +++++++++++++++++- 7 files changed, 206 insertions(+), 36 deletions(-) diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 6c2f40fb25..29dc9f14f2 100644 --- a/apps/remix-ide/src/app.js +++ b/apps/remix-ide/src/app.js @@ -318,7 +318,7 @@ class App { ]) // LAYOUT & SYSTEM VIEWS - const appPanel = new MainPanel() + const appPanel = new MainPanel(registry.get('config').api) const mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal) registry.put({ api: mainview, name: 'mainview' }) diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js index c976a8c159..ea0931dd9e 100644 --- a/apps/remix-ide/src/app/components/main-panel.js +++ b/apps/remix-ide/src/app/components/main-panel.js @@ -4,16 +4,16 @@ import ReactDOM from 'react-dom' // eslint-disable-line import { RemixUiMainPanel } from '@remix-ui/main-panel' // eslint-disable-line import { AbstractPanel } from './panel' import * as packageJson from '../../../../../package.json' -const yo = require('yo-yo') -const csjs = require('csjs-inject') - -const css = csjs` - .pluginsContainer { - height: 100%; - display: flex; - overflow-y: hidden; - } -` +// const yo = require('yo-yo') +// const csjs = require('csjs-inject') + +// const css = csjs` +// .pluginsContainer { +// height: 100%; +// display: flex; +// overflow-y: hidden; +// } +// ` const profile = { name: 'mainPanel', @@ -24,9 +24,10 @@ const profile = { } export class MainPanel extends AbstractPanel { - constructor () { + constructor (config) { super(profile) this.element = document.createElement('div') + this.config = config } focus (name) { @@ -34,24 +35,28 @@ export class MainPanel extends AbstractPanel { super.focus(name) } - // onActivation () { - // this.renderComponent() - // } + onActivation () { + this.renderComponent() + } + + getTheme () { + return this.config.get('settings/theme') + } render () { - // return this.element - return yo` -
- ${this.view} -
` + return this.element + // return yo` + //
+ // ${this.view} + //
` } - // renderComponent () { - // ReactDOM.render( - // , - // this.element - // ) - // } + renderComponent () { + ReactDOM.render( + , + this.element + ) + } } diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js index 08d9abf20f..a15fcccfe8 100644 --- a/apps/remix-ide/src/app/components/panel.js +++ b/apps/remix-ide/src/app/components/panel.js @@ -1,5 +1,9 @@ +import React from 'react' // eslint-disable-line +import ReactDOM from 'react-dom' +import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel' // eslint-disable-line import { EventEmitter } from 'events' -import { HostPlugin } from '@remixproject/engine-web' +const EventManager = require('../../lib/events') +import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line const csjs = require('csjs-inject') const yo = require('yo-yo') @@ -31,13 +35,21 @@ export class AbstractPanel extends HostPlugin { constructor (profile) { super(profile) this.events = new EventEmitter() + this.event = new EventManager() this.contents = {} this.active = undefined + this.element = document.createElement('div') + this.element.setAttribute('id', 'plugins') + this.element.setAttribute('class', 'abstract-panel-plugins') // View where the plugin HTMLElement leaves this.view = yo`
` } + onActivation () { + this.renderComponent() + } + /** * Add the plugin to the panel * @param {String} name the name of the plugin @@ -108,4 +120,13 @@ export class AbstractPanel extends HostPlugin { focus (name) { this.showContent(name) } + + renderComponent () { + ReactDOM.render( + , + this.element + ) + } } diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css index e69de29bb2..8061ad4a25 100644 --- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css +++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css @@ -0,0 +1,20 @@ +.abstract-panel-plugins { + height: 100%; + } + .abstract-panel-plugItIn { + display : none; + height : 100%; + } + .abstract-panel-plugItIn > div { + overflow-y : auto; + overflow-x : hidden; + height : 100%; + width : 100%; + } + .abstract-panel-plugItIn.active { + display : block; + } + .abstract-panel-pluginsContainer { + height : 100%; + overflow-y : hidden; + } \ No newline at end of file diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx index 8d0a1f8347..5920047ff8 100644 --- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx +++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx @@ -1,3 +1,4 @@ +import React from 'react' // eslint-disable-line import './remix-ui-abstract-panel.module.css'; /* eslint-disable-next-line */ @@ -5,8 +6,8 @@ export interface RemixUiAbstractPanelProps {} export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) { return ( -
-

Welcome to remix-ui-abstract-panel!

+
+
); } diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css index e69de29bb2..86ce5ed9db 100644 --- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css +++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css @@ -0,0 +1,20 @@ +.plugins { + height: 100%; + } + .plugItIn { + display : none; + height : 100%; + } + .plugItIn > div { + overflow-y : auto; + overflow-x : hidden; + height : 100%; + width : 100%; + } + .plugItIn.active { + display : block; + } + .pluginsContainer { + height : 100%; + overflow-y : hidden; + } \ No newline at end of file diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx index bf6b8328e7..efab1e75f6 100644 --- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx +++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx @@ -1,4 +1,4 @@ -import React from 'react' // eslint-disable-line +import React, { useEffect, useState } from 'react' // eslint-disable-line import './remix-ui-main-panel.module.css'; /* eslint-disable-next-line */ @@ -7,12 +7,115 @@ export interface RemixUiMainPanelProps { } export const RemixUiMainPanel = (props: RemixUiMainPanelProps) => { + const darkTheme = ['Dark', 'Black', 'Cyborg'] + + const [invertNumber, setInvertNumber] = useState(0) + + const handlePluginCall = (pluginName: string) => { + props.plugin.call('menuicons', 'select', pluginName) + props.plugin.call(pluginName, pluginName, '') + } + + + return ( -
- {console.log( props.plugin.view)} -

Remix UI Main Panel

- {/* { props.plugin.view } */} +
+ {console.log({ props })} +
+
+
+
+
+
+ + +
+
Quicklinks
+ Guidefor migrating the old File System +

Migration tools:

+
  • + Basic migration +
    • +
  • Download all Files as a backup zip
    • +
  • Restore filesfrom backup zip
    • +

    Help:

    + +
    +
    +
    +
    +
    +
    +

    Featured Plugins

    +
    + + + + + +
    +
    +
    +
    +

    File

    +

    New File

    +

    +

    Connect to Localhost

    +

    +
    + {/* */} +
    + {/* */} +
    +

    Resources

    +

    Documentation

    +

    Gitter channel

    +

    Featuring website

    +

    Old experience

    +
    +
    +
    +
    + {/* */} +
    +
    +
    +
    +
    +
    +
    -
    +
    +
    +
    +
    + + {/* */} +
    +
    +
    +
    +
    +
    +
    ); }