@ -1,53 +1,56 @@
import React from 'react' // eslint-disable-line
import { AbstractPanel } from './panel' 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' import * as packageJson from '../../../../../package.json'
const csjs = require ( 'csjs-inject' ) // const csjs = require('csjs-inject')
const yo = require ( 'yo-yo' ) const yo = require ( 'yo-yo' )
const css = csjs ` // const css = csjs`
. panel { // .panel {
width : 100 % ; // width: 100%;
height : 100 % ; // height: 100%;
display : flex ; // display: flex;
flex - direction : column ; // flex-direction: column;
flex : auto ; // flex: auto;
} // }
. swapitTitle { // .swapitTitle {
margin : 0 ; // margin: 0;
text - transform : uppercase ; // text-transform: uppercase;
white - space : nowrap ; // white-space: nowrap;
overflow : hidden ; // overflow: hidden;
text - overflow : ellipsis ; // text-overflow: ellipsis;
} // }
. swapitTitle i { // .swapitTitle i{
padding - left : 6 px ; // padding-left: 6px;
font - size : 14 px ; // font-size: 14px;
} // }
. swapitHeader { // .swapitHeader {
display : flex ; // display: flex;
align - items : center ; // align-items: center;
padding : 16 px 24 px 15 px ; // padding: 16px 24px 15px;
justify - content : space - between ; // justify-content: space-between;
} // }
. icons i { // .icons i {
height : 80 % ; // height: 80%;
cursor : pointer ; // cursor: pointer;
} // }
. pluginsContainer { // .pluginsContainer {
height : 100 % ; // height: 100%;
overflow - y : auto ; // overflow-y: auto;
} // }
. titleInfo { // .titleInfo {
padding - left : 10 px ; // padding-left: 10px;
} // }
. versionBadge { // .versionBadge {
background - color : var ( -- light ) ; // background-color: var(--light);
padding : 0 7 px ; // padding: 0 7px;
font - weight : bolder ; // font-weight: bolder;
margin - left : 5 px ; // margin-left: 5px;
text - transform : lowercase ; // text-transform: lowercase;
cursor : default ; // cursor: default;
} // }
` // `
const sidePanel = { const sidePanel = {
name : 'sidePanel' , name : 'sidePanel' ,
@ -63,7 +66,9 @@ export class SidePanel extends AbstractPanel {
super ( sidePanel ) super ( sidePanel )
this . appManager = appManager this . appManager = appManager
this . header = yo ` <header></header> ` this . header = yo ` <header></header> `
this . renderHeader ( ) // this.renderHeader()
this . sideelement = document . createElement ( 'div' )
this . sideelement . setAttribute ( 'class' , 'plugins-container' )
this . verticalIcons = verticalIcons this . verticalIcons = verticalIcons
// Toggle content
// Toggle content
@ -90,6 +95,10 @@ export class SidePanel extends AbstractPanel {
} ) } )
} }
onActivation ( ) {
this . renderComponent ( )
}
focus ( name ) { focus ( name ) {
this . emit ( 'focusChanged' , name ) this . emit ( 'focusChanged' , name )
super . focus ( name ) super . focus ( name )
@ -104,6 +113,7 @@ export class SidePanel extends AbstractPanel {
addView ( profile , view ) { addView ( profile , view ) {
super . addView ( profile , view ) super . addView ( profile , view )
this . verticalIcons . linkContent ( profile ) this . verticalIcons . linkContent ( profile )
this . renderComponent ( )
} }
/ * * / * *
@ -112,45 +122,57 @@ export class SidePanel extends AbstractPanel {
* / * /
async showContent ( name ) { async showContent ( name ) {
super . showContent ( name ) super . showContent ( name )
this . renderHeader ( ) // this.renderHeader()
this . emit ( 'focusChanged' , name ) this . emit ( 'focusChanged' , name )
this . renderComponent ( )
} }
/** The header of the side panel */ /** The header of the side panel */
async renderHeader ( ) { // async renderHeader () {
let name = ' - ' // let name = ' - '
let docLink = '' // let docLink = ''
let versionWarning // let versionWarning
if ( this . active ) { // if (this.active) {
const profile = await this . appManager . getProfile ( this . active ) // const profile = await this.appManager.getProfile(this.active)
name = profile . displayName ? profile . displayName : profile . name // 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> ` : // 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 ) ) { // 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> ` // versionWarning = yo` <small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>`
} // }
// Beta
// // Beta
if ( profile . version && profile . version . match ( /\b(\w*beta\w*)\b/g ) ) { // 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> ` // versionWarning = yo` <small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>`
} // }
} // }
const header = yo ` // const header = yo`
< header class = "${css.swapitHeader}" > // <header class="${css.swapitHeader}">
< h6 class = "${css.swapitTitle}" data - id = "sidePanelSwapitTitle" > $ { name } < / h 6 > // <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
$ { docLink } // ${docLink}
$ { versionWarning } // ${versionWarning}
< / h e a d e r > // </header>
` // `
yo . update ( this . header , header ) // yo.update(this.header, header)
} // this.renderComponent()
// }
render ( ) { render ( ) {
return yo ` return this . element
< section class = "${css.panel} plugin-manager" > // return yo`
$ { this . header } // <section class="${css.panel} plugin-manager">
< div class = "${css.pluginsContainer}" > // ${this.header}
$ { this . element } // <div class="${css.pluginsContainer}">
< / d i v > // ${this.element}
< / s e c t i o n > ` // </div>
// </section>`
}
renderComponent ( ) {
ReactDOM . render (
< RemixUiSidePanel
plugin = { this }
/ > ,
this . sideelement
)
} }
} }
davidzagi93@gmail.com
3 years ago
committed by
yann300