panel update

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;

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

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

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`<header></header>`
-    // this.renderHeader()
+    this.sideelement = this.element
-    this.sideelement = document.createElement('div')
+    // this.sideelement.setAttribute('class', 'panel')
-    this.sideelement.setAttribute('class', 'plugins-container')
     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 this.sideelement
-    // 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
     )
   }

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

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;
   }
+

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<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 })
+    console.log()
-    Object.keys(props.plugin.contents).map((key: string, index: number) => {
+  }, [name])
-      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 () => {
+    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={{
+    <header style={{
-    display: 'flex',
+      display: 'flex',
-    alignItems: "center",
+      alignItems: 'center',
-    padding: '16px 24px 15px',
+      padding: '16px 24px 15px',
-    justifyContent: "space-between"
+      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>) : ''}
+    {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>) : (<small title="Version Beta" className="badge-light versionBadge">beta</small>)} */}
+    {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>
   );