update with buttons - in progress

src/app.js

@@ -39,12 +39,12 @@ const PluginManagerComponent = require('./app/components/plugin-manager-componen
 const PluginManagerApi = require('./app/components/plugin-manager-api')
 
 const VerticalIconsComponent = require('./app/components/vertical-icons-component')
-// const VerticalIconsApi = require('./app/components/vertical-icons-api')
+const VerticalIconsApi = require('./app/components/vertical-icons-api')
 
 const SwapPanelComponent = require('./app/components/swap-panel-component')
-// const SwapPanelApi = require('./app/components/swap-panel-api')
+const SwapPanelApi = require('./app/components/swap-panel-api')
 
-// const AppManager = require('remix-plugin').AppManager
+const AppManager = require('remix-plugin').AppManager
 
 var styleGuide = require('./app/ui/styles-guide/theme-chooser')
 var styles = styleGuide.chooser()
@@ -440,7 +440,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
       - the current API is not optimal. For instance methods of `app` only refers to `executionContext`, wich does not make really sense.
   */
 
-  // const appManager = new AppManager({modules: [], plugins: []})
+  const appManager = new AppManager({modules: [], plugins: []})
 
   const swapPanelComponent = new SwapPanelComponent()
   const pluginManagerComponent = new PluginManagerComponent(
@@ -459,8 +459,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   const verticalIconComponent = new VerticalIconsComponent()
 
-  // const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, pluginManagerComponent)
+  const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, pluginManagerComponent)
-  // const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, pluginManagerComponent)
+  const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, pluginManagerComponent)
   const pluginManagerAPI = new PluginManagerApi(pluginManagerComponent)
 
   self._view.mainpanel.appendChild(self._components.editorpanel.render())

src/app/components/plugin-manager-component.js

@@ -82,7 +82,9 @@ class PluginManagerComponent {
       </div>
     `
     for (var mod in this.modulesDefinition) {
-      if (this.modulesDefinition[mod].icon) pluginManagerDiv.appendChild(this.renderItem(mod))
+      if (this.modulesDefinition[mod].icon) {
+        pluginManagerDiv.appendChild(this.renderItem(mod))
+      }
     }
     console.log(this.activated)
     return pluginManagerDiv
@@ -90,23 +92,28 @@ class PluginManagerComponent {
 
   renderItem (item) {
     let ctrBtns
+
+    let action = (event) => {
       if (this.activated.hasOwnProperty(item)) {
-      ctrBtns = yo`
+        this.deactivateInternal(item)
-        <button onclick=${() => { this.deactivateInternal(this.modulesDefinition[item].name) }} >deactivate</button>
-      `
       } else {
-      ctrBtns = yo`
+        this.activateInternal(item)
-        <button onclick=${() => { this.activateInternal() }} >activate</button>
-      `
       }
+    }
+
+    ctrBtns = yo`<div id='${item}'>
+        <button onclick=${(event) => { action(event) }} >${this.activated[item] ? 'deactivate' : 'activate'}</button>
+        </div>`
+    
     this.plugins.push(item)
     // var self = this
-    return yo`
+    this.view = yo`
       <div id='pluginManager' class=${css.plugin} >
         ${this.modulesDefinition[item].name}
         ${ctrBtns}
       </div>
     `
+    return this.view
   }
 
   activatePlugin (jsonProfile, api) {
@@ -120,6 +127,7 @@ class PluginManagerComponent {
   deactivateInternal (name) {
     delete this.activated[name]
     this.event.emit('removingItem', name)
+    if (this.view) this.view.querySelector(`#${name} button`).innerHTML = 'activate'
   }
 
   activateInternal (name) {
@@ -141,6 +149,7 @@ class PluginManagerComponent {
       this.data.proxy.register(mod, instance)
     }
     this.activated[mod.name] = mod
+    if (this.view) this.view.querySelector(`#${name} button`).innerHTML = 'deactivate'
     return instance
   }
 

src/app/components/swap-panel-component.js

@@ -29,7 +29,6 @@ class SwapPanelComponent {
   add (moduleName, content) {
     this.contents[moduleName] = yo`<div class=${css.plugItIn} >${content}</div>`
     this.view.appendChild(this.contents[moduleName])
-    this.showContent(moduleName)
   }
 
   render () {