adding side-panel

AbstractPanel
davidzagi93@gmail.com 3 years ago committed by yann300
parent 6a16d5f058
commit a8bae5cc5e
  1. 4
      apps/remix-ide/src/app/components/main-panel.js
  2. 5
      apps/remix-ide/src/app/components/panel.js
  3. 182
      apps/remix-ide/src/app/components/side-panel.js
  4. 4
      libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
  5. 7
      libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
  6. 8
      libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
  7. 4
      libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
  8. 12
      libs/remix-ui/side-panel/.babelrc
  9. 18
      libs/remix-ui/side-panel/.eslintrc.json
  10. 7
      libs/remix-ui/side-panel/README.md
  11. 1
      libs/remix-ui/side-panel/src/index.ts
  12. 43
      libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
  13. 75
      libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
  14. 20
      libs/remix-ui/side-panel/tsconfig.json
  15. 13
      libs/remix-ui/side-panel/tsconfig.lib.json
  16. 3
      nx.json
  17. 1
      tsconfig.base.json
  18. 20
      workspace.json

@ -17,7 +17,7 @@ export class MainPanel extends AbstractPanel {
constructor (config) {
super(profile)
this.mainelement = document.createElement('div')
this.element.setAttribute('class', 'mainPanelPluginsContainer')
this.mainelement.setAttribute('class', 'mainPanelPluginsContainer')
this.config = config
}
@ -32,7 +32,7 @@ export class MainPanel extends AbstractPanel {
}
render () {
return this.element
return this.mainelement
}
renderComponent () {

@ -14,8 +14,7 @@ export class AbstractPanel extends HostPlugin {
this.contents = {}
this.active = undefined
this.element = document.createElement('div')
this.element.setAttribute('id', 'plugins')
this.element.setAttribute('class', 'abstract-panel-plugins')
this.element.setAttribute('style', 'height: 100%; width: 100%; border: 0;')
}
onActivation () {
@ -24,7 +23,7 @@ export class AbstractPanel extends HostPlugin {
addView (profile, view) {
if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
view.style.height = '100%'
// view.style.height = '90%' // makde external plugins full height
view.style.width = '100%'
view.style.border = '0'
this.contents[profile.name] = view

@ -1,53 +1,56 @@
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 * as packageJson from '../../../../../package.json'
const csjs = require('csjs-inject')
// 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 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',
@ -63,7 +66,9 @@ export class SidePanel extends AbstractPanel {
super(sidePanel)
this.appManager = appManager
this.header = yo`<header></header>`
this.renderHeader()
// this.renderHeader()
this.sideelement = document.createElement('div')
this.sideelement.setAttribute('class', 'plugins-container')
this.verticalIcons = verticalIcons
// Toggle content
@ -90,6 +95,10 @@ export class SidePanel extends AbstractPanel {
})
}
onActivation () {
this.renderComponent()
}
focus (name) {
this.emit('focusChanged', name)
super.focus(name)
@ -104,6 +113,7 @@ export class SidePanel extends AbstractPanel {
addView (profile, view) {
super.addView(profile, view)
this.verticalIcons.linkContent(profile)
this.renderComponent()
}
/**
@ -112,45 +122,57 @@ export class SidePanel extends AbstractPanel {
*/
async showContent (name) {
super.showContent(name)
this.renderHeader()
// 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>`
}
}
// 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)
}
// 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 yo`
<section class="${css.panel} plugin-manager">
${this.header}
<div class="${css.pluginsContainer}">
${this.element}
</div>
</section>`
return this.element
// return yo`
// <section class="${css.panel} plugin-manager">
// ${this.header}
// <div class="${css.pluginsContainer}">
// ${this.element}
// </div>
// </section>`
}
renderComponent () {
ReactDOM.render(
<RemixUiSidePanel
plugin={this}
/>,
this.sideelement
)
}
}

@ -13,8 +13,4 @@
}
.plugItIn.active {
display : block;
}
.pluginsContainer {
height : 100%;
overflow-y : hidden;
}

@ -22,13 +22,14 @@ export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
view.addEventListener('load', () => {
setLoading(true)
})
setLoading(false)
})
setLoading(false)
}
, [loading])
return (
<div id="plugins" className="plugins">
<div id="plugins">
{
Object.keys(props.plugin.contents).map((key: string, index: number) => {
@ -37,7 +38,7 @@ export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
console.log({ plugin: plugin.id, active: props.plugin.active })
return (
<div className="plugItIn" key={ index }>
<div key={ index }>
{loading && (
<div className="d-flex justify-content-center align-items-center">
<div className="spinner-border" role="status">

@ -14,13 +14,13 @@
.plugItIn.active {
display : block;
}
/* .pluginsContainer {
.pluginsContainer {
height : 100%;
overflow-y : hidden;
} */
}
.pluginsContainer {
/* .pluginsContainer {
height: 100%;
display: flex;
overflow-y: hidden;
}
} */

@ -18,7 +18,6 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) => {
return (
<div className="plugItIn pluginsContainer" style={{ display: "block" }} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
<div data-id="landingPageHomeContainer" className="homeContainer d-flex" style={{ height: "100%", width: "100%", border: "0px", display: "block" }}>
<div className="mainContent_2A2Ew bg-light">
<div className="d-flex justify-content-between">
@ -113,8 +112,7 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) => {
</div>
</div>
</div>
</div>
);
)
}
export default RemixUiMainPanel;

@ -0,0 +1,12 @@
{
"presets": [
[
"@nrwl/react/babel",
{
"runtime": "automatic",
"useBuiltIns": "usage"
}
]
],
"plugins": []
}

@ -0,0 +1,18 @@
{
"extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {}
},
{
"files": ["*.ts", "*.tsx"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"rules": {}
}
]
}

@ -0,0 +1,7 @@
# remix-ui-side-panel
This library was generated with [Nx](https://nx.dev).
## Running unit tests
Run `nx test remix-ui-side-panel` to execute the unit tests via [Jest](https://jestjs.io).

@ -0,0 +1 @@
export * from './lib/remix-ui-side-panel';

@ -0,0 +1,43 @@
.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;
}
.remix-ui-side-panel-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;
}

@ -0,0 +1,75 @@
import React, { useEffect, useState } from 'react' // eslint-disable-line
import parse from 'html-react-parser'
import './remix-ui-side-panel.module.css';
/* eslint-disable-next-line */
export interface RemixUiSidePanelProps {
plugin: any
}
export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
const [view, setView] = useState('')
const [dockLink, setDockLink] = useState(false)
const [versionWarning, setVersionWarning] = 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])
const getProfile = async () => {
if (props.plugin.active) {
const profile = await props.plugin.appManager.getProfile(props.plugin.active)
setProfileDocsLink(profile.documentation)
profile.displayName ? setName(profile.displayName) : setName(profile.name)
profile.documentation ? setDockLink(true) : setDockLink(false)
if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
setVersionWarning(true)
}
// Beta
if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
setVersionWarning(true)
}
}
}
const renderHeader = () => {
getProfile()
return (
<header className="remix-ui-side-panel-swapitHeader" 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>)} */}
</header>
)
}
return (
<section>
{renderHeader()}
<div className="pluginsContainer" style={{
height: "100%",
overflowY: "auto"
}}>
</div>
</section>
);
}
export default RemixUiSidePanel;

@ -0,0 +1,20 @@
{
"extends": "../../../tsconfig.base.json",
"compilerOptions": {
"jsx": "react-jsx",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.lib.json"
}
]
}

@ -0,0 +1,13 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"types": ["node"]
},
"files": [
"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
"../../../node_modules/@nrwl/react/typings/image.d.ts"
],
"exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
}

@ -144,6 +144,9 @@
},
"remix-ui-abstract-panel": {
"tags": []
},
"remix-ui-side-panel": {
"tags": []
}
},
"targetDependencies": {

@ -69,6 +69,7 @@
"@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"],
"@remix-ui/vertical-icons-panel": ["libs/remix-ui/vertical-icons-panel/src/index.ts"],
"@remix-ui/main-panel": ["libs/remix-ui/main-panel/src/index.ts"],
"@remix-ui/abstract-panel": ["libs/remix-ui/abstract-panel/src/index.ts"],
"@remix-ui/side-panel": ["libs/remix-ui/side-panel/src/index.ts"]
}
},

@ -1160,7 +1160,25 @@
"options": {
"linter": "eslint",
"tsConfig": ["libs/remix-ui/abstract-panel/tsconfig.lib.json"],
"exclude": ["**/node_modules/**", "!libs/remix-ui/abstract-panel/**/*"]
"exclude": [
"**/node_modules/**",
"!libs/remix-ui/abstract-panel/**/*"
]
}
}
}
},
"remix-ui-side-panel": {
"root": "libs/remix-ui/side-panel",
"sourceRoot": "libs/remix-ui/side-panel/src",
"projectType": "library",
"architect": {
"lint": {
"builder": "@nrwl/linter:eslint",
"options": {
"lintFilePatterns": [
"libs/remix-ui/side-panel/**/*.{ts,tsx,js,jsx}"
]
}
}
}

Loading…
Cancel
Save