From f3de8c794c33c1ba44e1fa8d8881a54fc74e4a51 Mon Sep 17 00:00:00 2001 From: "davidzagi93@gmail.com" Date: Fri, 10 Dec 2021 10:08:11 +0100 Subject: [PATCH] panel update --- apps/remix-ide/src/app.js | 2 + .../src/app/components/main-panel.js | 5 + apps/remix-ide/src/app/components/panel.js | 8 +- .../src/app/components/side-panel.js | 95 ++----------------- .../src/lib/remix-ui-abstract-panel.tsx | 37 +------- .../src/lib/remix-ui-side-panel.module.css | 3 +- .../src/lib/remix-ui-side-panel.tsx | 39 ++++---- 7 files changed, 39 insertions(+), 150 deletions(-) diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 29dc9f14f2..ffa7bd52b5 100644 --- a/apps/remix-ide/src/app.js +++ b/apps/remix-ide/src/app.js @@ -90,6 +90,8 @@ const css = csjs` display : flex; flex-direction : row-reverse; width : 320px; + overflow : auto; + padding-bottom: 20px; } .highlightcode { position : absolute; diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js index 8f16f6199f..dd9269a27c 100644 --- a/apps/remix-ide/src/app/components/main-panel.js +++ b/apps/remix-ide/src/app/components/main-panel.js @@ -27,6 +27,11 @@ export class MainPanel extends AbstractPanel { this.renderComponent() } + addView (profile, view) { + super.addView(profile, view) + view.style.height = '100%' + } + onActivation () { this.renderComponent() } diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js index d8cc5b094b..a7a0e4d968 100644 --- a/apps/remix-ide/src/app/components/panel.js +++ b/apps/remix-ide/src/app/components/panel.js @@ -22,15 +22,16 @@ export class AbstractPanel extends HostPlugin { addView (profile, view) { if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`) - view.style.width = '100%' view.style.border = '0' this.contents[profile.name] = view - this.showContent(profile.name) + this.contents[profile.name].style.display = 'none' this.element.appendChild(this.contents[profile.name]) this.renderComponent() } removeView (profile) { + this.emit('pluginDisabled', profile.name) + this.verticalIcons.unlinkContent(profile) this.remove(profile.name) } @@ -54,9 +55,10 @@ export class AbstractPanel extends HostPlugin { if (!this.contents[name]) throw new Error(`Plugin ${name} is not yet activated`) // hiding the current view and display the `moduleName` if (this.active) { + console.log({ active: this.active, name }, 'first') this.contents[this.active].style.display = 'none' } - + console.log({ active: this.active, name }, 'second') this.contents[name].style.display = 'flex' this.active = name this.renderComponent() diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index 8ddaf52f70..90c0e49c6d 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -2,56 +2,11 @@ import React from 'react' // eslint-disable-line import { AbstractPanel } from './panel' import ReactDOM from 'react-dom' // eslint-disable-line import { RemixUiSidePanel } from '@remix-ui/side-panel' // eslint-disable-line +import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel' import * as packageJson from '../../../../../package.json' // const csjs = require('csjs-inject') const yo = require('yo-yo') -// const css = csjs` -// .panel { -// width: 100%; -// height: 100%; -// display: flex; -// flex-direction: column; -// flex: auto; -// } -// .swapitTitle { -// margin: 0; -// text-transform: uppercase; -// white-space: nowrap; -// overflow: hidden; -// text-overflow: ellipsis; -// } -// .swapitTitle i{ -// padding-left: 6px; -// font-size: 14px; -// } -// .swapitHeader { -// display: flex; -// align-items: center; -// padding: 16px 24px 15px; -// justify-content: space-between; -// } -// .icons i { -// height: 80%; -// cursor: pointer; -// } -// .pluginsContainer { -// height: 100%; -// overflow-y: auto; -// } -// .titleInfo { -// padding-left: 10px; -// } -// .versionBadge { -// background-color: var(--light); -// padding: 0 7px; -// font-weight: bolder; -// margin-left: 5px; -// text-transform: lowercase; -// cursor: default; -// } -// ` - const sidePanel = { name: 'sidePanel', displayName: 'Side Panel', @@ -66,9 +21,8 @@ export class SidePanel extends AbstractPanel { super(sidePanel) this.appManager = appManager this.header = yo`
` - // this.renderHeader() - this.sideelement = document.createElement('div') - this.sideelement.setAttribute('class', 'plugins-container') + this.sideelement = this.element + // this.sideelement.setAttribute('class', 'panel') this.verticalIcons = verticalIcons // Toggle content @@ -122,56 +76,19 @@ export class SidePanel extends AbstractPanel { */ async showContent (name) { super.showContent(name) - // this.renderHeader() this.emit('focusChanged', name) - this.renderComponent() } - /** The header of the side panel */ - // async renderHeader () { - // let name = ' - ' - // let docLink = '' - // let versionWarning - // if (this.active) { - // const profile = await this.appManager.getProfile(this.active) - // name = profile.displayName ? profile.displayName : profile.name - // docLink = profile.documentation ? yo`` : '' - // if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) { - // versionWarning = yo`alpha` - // } - // // Beta - // if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) { - // versionWarning = yo`beta` - // } - // } - - // const header = yo` - //
- //
${name}
- // ${docLink} - // ${versionWarning} - //
- // ` - // yo.update(this.header, header) - // this.renderComponent() - // } - render () { - return this.element - // return yo` - //
- // ${this.header} - //
- // ${this.element} - //
- //
` + return this.sideelement } renderComponent () { ReactDOM.render( , + /> + , this.sideelement ) } 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 60beb915ac..629543aa5a 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 @@ -11,45 +11,10 @@ export interface RemixUiAbstractPanelProps { export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) { const [loading, setLoading] = useState(false); - useEffect(() => { - console.log({ activePlugin: props.plugin.active }) - },[props.plugin.active]) - - useEffect(() => { - Object.keys(props.plugin.contents).map((key: string) => { - const view = props.plugin.contents[key] - - view.addEventListener('load', () => { - setLoading(true) - }) - - }) - setLoading(false) - } - , [loading]) return (
- { - Object.keys(props.plugin.contents).map((key: string, index: number) => { - - const plugin = props.plugin.contents[key] - const active = props.plugin.active === key - console.log({ plugin: plugin.id, active: props.plugin.active }) - - return ( -
- {loading && ( -
-
- Loading... -
-
- )} -
- ) - }) - } +
) } diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css index 05d376a1f4..018a752156 100644 --- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css +++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css @@ -41,8 +41,7 @@ text-transform: lowercase; cursor: default; } - iframe { height: 100%; - overflow-y: scroll; } + diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx index 0bc129bd3b..b2b49fb788 100644 --- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx +++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx @@ -10,24 +10,18 @@ export interface RemixUiSidePanelProps { export function RemixUiSidePanel(props: RemixUiSidePanelProps) { const [view, setView] = useState('') const [dockLink, setDockLink] = useState(false) - const [versionWarning, setVersionWarning] = useState(false) + const [versionWarning, setVersionWarning] = useState(false) + const [versionWarningBeta, setVersionWarningBeta] = useState(false) const [profile, setProfile] = useState('') const [profileDocsLink, setProfileDocsLink] = useState('') const [name, setName] = useState(' - ') useEffect(() => { - console.log({ props: props.plugin }) - Object.keys(props.plugin.contents).map((key: string, index: number) => { - console.log({ key }) - const active = props.plugin.active === key - if (active) { - const plugin = props.plugin.contents[key] - setView(plugin.innerHTML) - } - }) - }, [props.plugin.contents]) + console.log() + }, [name]) const getProfile = async () => { + console.log({active: props.plugin.active}) if (props.plugin.active) { const profile = await props.plugin.appManager.getProfile(props.plugin.active) setProfileDocsLink(profile.documentation) @@ -35,10 +29,14 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) { profile.documentation ? setDockLink(true) : setDockLink(false) if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) { setVersionWarning(true) + } else { + setVersionWarning(false) } // Beta if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) { - setVersionWarning(true) + setVersionWarningBeta(true) + } else{ + setVersionWarningBeta(false) } } } @@ -46,22 +44,23 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) { const renderHeader = () => { getProfile() return ( -
{name}
- {dockLink ? () : ''} - {/* {versionWarning ? (alpha) : (beta)} */} + {dockLink ? () : ''} + {versionWarning ? (alpha) : null } + {versionWarningBeta ? (beta) : null}
) } return ( -
+
{renderHeader()}
);