mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

panel update

Browse Source
AbstractPanel
davidzagi93@gmail.com 3 years ago committed by yann300
parent 41162b0940
commit f3de8c794c
7 changed files with 39 additions and 150 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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. 35
      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

2
apps/remix-ide/src/app.js
Unescape View File

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

5
apps/remix-ide/src/app/components/main-panel.js
Unescape View File

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

8
apps/remix-ide/src/app/components/panel.js
Unescape View File

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

95
apps/remix-ide/src/app/components/side-panel.js
Unescape View File

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

35
libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
Unescape View File

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

3
libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
Unescape View File

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

39
libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save