panel update

AbstractPanel
davidzagi93@gmail.com 3 years ago committed by yann300
parent 41162b0940
commit f3de8c794c
  1. 2
      apps/remix-ide/src/app.js
  2. 5
      apps/remix-ide/src/app/components/main-panel.js
  3. 8
      apps/remix-ide/src/app/components/panel.js
  4. 95
      apps/remix-ide/src/app/components/side-panel.js
  5. 37
      libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
  6. 3
      libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
  7. 39
      libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx

@ -90,6 +90,8 @@ const css = csjs`
display : flex;
flex-direction : row-reverse;
width : 320px;
overflow : auto;
padding-bottom: 20px;
}
.highlightcode {
position : absolute;

@ -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()
}

@ -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()

@ -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`<header></header>`
// 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`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
// if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
// versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>`
// }
// // Beta
// if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
// versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>`
// }
// }
// const header = yo`
// <header class="${css.swapitHeader}">
// <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
// ${docLink}
// ${versionWarning}
// </header>
// `
// yo.update(this.header, header)
// this.renderComponent()
// }
render () {
return this.element
// return yo`
// <section class="${css.panel} plugin-manager">
// ${this.header}
// <div class="${css.pluginsContainer}">
// ${this.element}
// </div>
// </section>`
return this.sideelement
}
renderComponent () {
ReactDOM.render(
<RemixUiSidePanel
plugin={this}
/>,
/>
,
this.sideelement
)
}

@ -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 (
<div id="plugins">
{
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 (
<div key={ index }>
{loading && (
<div className="d-flex justify-content-center align-items-center">
<div className="spinner-border" role="status">
<span className="sr-only">Loading...</span>
</div>
</div>
)}
</div>
)
})
}
</div>
)
}

@ -41,8 +41,7 @@
text-transform: lowercase;
cursor: default;
}
iframe {
height: 100%;
overflow-y: scroll;
}

@ -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<boolean>(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 (
<header className="swapitHeader" style={{
display: 'flex',
alignItems: "center",
padding: '16px 24px 15px',
justifyContent: "space-between"
<header style={{
display: 'flex',
alignItems: 'center',
padding: '16px 24px 15px',
justifyContent: 'space-between'
}}>
<h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
{dockLink ? (<a href={profileDocsLink} className="${css.titleInfo}" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
{/* {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : (<small title="Version Beta" className="badge-light versionBadge">beta</small>)} */}
{dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
{versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : null }
{versionWarningBeta ? (<small title="Version Beta" className="badge-light versionBadge">beta</small>) : null}
</header>
)
}
return (
<section style={{height: "100%"}}>
<section style={{ position:'sticky' }}>
{renderHeader()}
</section>
);

Loading…
Cancel
Save