Merge pull request #1421 from ethereum/pluginUX

Move plugin content out of the right panel

src/app/panels/righthand-panel.js

@@ -15,8 +15,8 @@ const SupportTab = require('../tabs/support-tab')
 const PluginTab = require('../tabs/plugin-tab')
 const TestTab = require('../tabs/test-tab')
 const RunTab = require('../tabs/run-tab')
-const PluginAPI = require('../plugin/pluginAPI')
 const plugins = require('../plugin/plugins')
+const DraggableContent = require('../ui/draggableContent')
 
 var toolTip = require('../ui/tooltip')
 const EventManager = remixLib.EventManager
@@ -46,18 +46,12 @@ module.exports = class RighthandPanel {
 
     var tabbedMenu = new TabbedMenu(self._components.registry)
 
-    var pluginAPI = new PluginAPI(
-      self._deps.fileProviders,
-      self._deps.compiler,
-      self._deps.udapp,
-      tabbedMenu
-    )
-
     var pluginManager = new PluginManager(
-      pluginAPI,
       self._deps.app,
       self._deps.compiler,
-      self._deps.txlistener
+      self._deps.txlistener,
+      self._deps.fileProviders,
+      self._deps.udapp
    )
 
     var analysisTab = new AnalysisTab(self._components.registry)
@@ -82,23 +76,26 @@ module.exports = class RighthandPanel {
     })
 
     self.event.register('plugin-name-loadRequest', name => {
-      if (plugins[name]) {
-        self.loadPlugin(plugins[name])
+      var plugin = plugins[name]
+      if (plugin) {
+        if (!self._components.pluginManager.plugins[plugin.title]) {
+          self.loadPlugin(plugin)
+        } else {
+          toolTip(name + ' already loaded')
+        }
       } else {
         toolTip('unknown plugin ' + name)
       }
     })
 
     self.loadPlugin = function (json) {
-      if (self._components.pluginManager.plugins[json.title]) {
-        self._components.tabbedMenu.removeTabByTitle(json.title)
+      var modal = new DraggableContent(() => {
         self._components.pluginManager.unregister(json)
-      } else {
-        var tab = new PluginTab(json)
-        var content = tab.render()
-        self._components.tabbedMenu.addTab(json.title, json.title + ' plugin', content)
-        self._components.pluginManager.register(json, content)
-      }
+      })
+      var tab = new PluginTab(json)
+      var content = tab.render()
+      document.querySelector('body').appendChild(modal.render(json.title, content))
+      self._components.pluginManager.register(json, modal, content)
     }
 
     self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`

src/app/plugin/pluginAPI.js

@@ -4,14 +4,14 @@ var executionContext = require('../../execution-context')
 /*
   Defines available API. `key` / `type`
 */
-module.exports = (fileProviders, compiler, udapp, tabbedMenu) => {
+module.exports = (pluginManager, fileProviders, compiler, udapp) => {
   return {
     app: {
       getExecutionContextProvider: (mod, cb) => {
         cb(null, executionContext.getProvider())
       },
       updateTitle: (mod, title, cb) => {
-        tabbedMenu.updateTabTitle(mod, title)
+        pluginManager.plugins[mod].modal.setTitle(title)
         if (cb) cb()
       },
       detectNetWork: (mod, cb) => {

src/app/plugin/pluginManager.js

@@ -1,5 +1,6 @@
 'use strict'
 var executionContext = require('../../execution-context')
+const PluginAPI = require('./pluginAPI')
 /**
  * Register and Manage plugin:
  *
@@ -77,12 +78,17 @@ var executionContext = require('../../execution-context')
  *
  */
 module.exports = class PluginManager {
-  constructor (pluginAPI, app, compiler, txlistener) {
+  constructor (app, compiler, txlistener, fileProviders, udapp) {
     const self = this
+    var pluginAPI = new PluginAPI(
+      this,
+      fileProviders,
+      compiler,
+      udapp
+    )
     self.plugins = {}
     self.origins = {}
     self.inFocus
-    self.allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
     compiler.event.register('compilationFinished', (success, data, source) => {
       if (self.inFocus) {
         // trigger to the current focus
@@ -153,12 +159,10 @@ module.exports = class PluginManager {
       }
       var data = JSON.parse(event.data)
       data.value.unshift(extension)
-      // if (self.allowedapi[data.type]) {
       data.value.push((error, result) => {
         response(data.key, data.type, data.id, error, result)
       })
       pluginAPI[data.key][data.type].apply({}, data.value)
-      // }
     }, false)
   }
   unregister (desc) {
@@ -166,9 +170,9 @@ module.exports = class PluginManager {
     delete self.plugins[desc.title]
     delete self.origins[desc.url]
   }
-  register (desc, content) {
+  register (desc, modal, content) {
     const self = this
-    self.plugins[desc.title] = {content, origin: desc.url}
+    self.plugins[desc.title] = { content, modal, origin: desc.url }
     self.origins[desc.url] = desc.title
   }
   broadcast (value) {

src/app/tabs/plugin-tab.js

@@ -26,7 +26,7 @@ module.exports = class plugintab {
 }
 const css = csjs`
   .pluginTabView {
-    height: 100%;
+    height: 456px;
     width: 100%;
   }
   .iframe {

src/app/tabs/settings-tab.js

@@ -150,12 +150,11 @@ module.exports = class SettingsTab {
       <div class="${css.info}">
         <div class=${css.title}>Plugin</div>
         <div class="${css.crowNoFlex}">
-          <div><input onclick=${() => { onLoadPlugin('oraclize') }} type="button" value="Oraclize" class="${css.pluginLoad}"></div>
-          <div><input onclick=${() => { onLoadPlugin('etherscan-general') }} type="button" value="Etherscan-general" class="${css.pluginLoad}"></div>
-          <div>
-            ${self._view.pluginInput}
-            <input onclick=${onloadPluginJson} type="button" value="Load" class="${css.pluginLoad}">
-          </div>
+          <input onclick=${() => { onLoadPlugin('oraclize') }} type="button" value="Oraclize" class="${css.pluginLoad}">
+          <input onclick=${() => { onLoadPlugin('etherscan-general') }} type="button" value="Etherscan-general" class="${css.pluginLoad}">
+          <div>Load plugin from JSON description: </div>
+          ${self._view.pluginInput}
+          <input onclick=${onloadPluginJson} type="button" value="Load" class="${css.pluginLoad}">
         </div>
       </div>`
     self._view.config.remixd = yo`
@@ -331,7 +330,7 @@ const css = csjs`
   .select {
     font-weight: bold;
     margin-top: 1em;
-    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
+    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler};
   }
   .heading {
     margin-bottom: 0;
@@ -343,6 +342,7 @@ const css = csjs`
   input {
     margin-right: 5px;
     cursor: pointer;
+    width: inherit;
   }
   input[type=radio] {
     margin-top: 2px;
@@ -352,6 +352,9 @@ const css = csjs`
   }
   .pluginLoad {
     vertical-align: top;
+    ${styles.rightPanel.settingsTab.button_LoadPlugin};
+    width: inherit;
+    display: inline-block;
   }
   i.warnIt {
     color: ${styles.appProperties.warningText_Color};

src/app/ui/draggableContent.js

@@ -0,0 +1,127 @@
+'use strict'
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .containerDraggableModal {
+    position: absolute;
+    z-index: 1000;
+    background-color: ${styles.appProperties.quaternary_BackgroundColor};
+    text-align: center;
+    width: 500px;
+    height: 500px;
+    border: 2px solid ${styles.appProperties.solidBorderBox_BorderColor};
+  }
+
+  .headerDraggableModal {
+    cursor: move;
+    z-index: 10;
+    color: ${styles.appProperties.mainText_Color};
+    background-color: ${styles.appProperties.quaternary_BackgroundColor};
+    border-bottom: 2px solid ${styles.appProperties.solidBorderBox_BorderColor};
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+  }
+  
+  .modalActions {
+    float: right;
+  }
+  
+  .modalAction {
+    padding-right: 1px;
+    padding-left: 1px;
+    cursor: pointer;
+    color: ${styles.appProperties.solidBorderBox_BorderColor};
+  }
+`
+
+module.exports =
+  class DraggableContent {
+    constructor (closeCb) {
+      this.closeCb = closeCb
+    }
+
+    render (title, content) {
+      this.content = content
+      var el = yo`
+    <div class=${css.containerDraggableModal}>
+      <div>
+          <div class="${css.headerDraggableModal} title" title=${title}><span>${title}</span>
+            <div class=${css.modalActions}>
+              <i onclick=${() => { this.minimize() }} class="fa fa-window-minimize ${css.modalAction}"></i>
+              <i onclick=${() => { this.maximise() }} class="fa fa-window-maximize ${css.modalAction}"></i>
+              <i onclick=${() => { this.close() }} class="fa fa-window-close ${css.modalAction}"></i>
+            </div>
+          </div>
+        </div>
+      ${content}
+    </div>   `
+      dragElement(el)
+      el.style.top = '20%'
+      el.style.left = '50%'
+      this.el = el
+      return el
+    }
+    setTitle (title) {
+      this.el.querySelector('.title span').innerHTML = title
+    }
+    minimize () {
+      this.content.style.display = 'none'
+      this.el.style.height = 'inherit'
+      this.el.style.width = '150px'
+      this.el.querySelector('.title').style.width = '146px'
+    }
+    maximise () {
+      this.content.style.display = 'block'
+      this.el.style.height = '500px'
+      this.el.style.width = '500px'
+      this.el.querySelector('.title').style.width = 'inherit'
+    }
+    close () {
+      if (this.closeCb) this.closeCb()
+      if (this.el.parentElement) {
+        this.el.parentElement.removeChild(this.el)
+      }
+    }
+}
+
+function dragElement (elmnt) {
+  var pos1 = 0
+  var pos2 = 0
+  var pos3 = 0
+  var pos4 = 0
+
+  elmnt.querySelector('.title').onmousedown = dragMouseDown
+
+  function dragMouseDown (e) {
+    e = e || window.event
+    e.preventDefault()
+    // get the mouse cursor position at startup:
+    pos3 = e.clientX
+    pos4 = e.clientY
+    document.onmouseup = closeDragElement
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag
+  }
+
+  function elementDrag (e) {
+    e = e || window.event
+    e.preventDefault()
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX
+    pos2 = pos4 - e.clientY
+    pos3 = e.clientX
+    pos4 = e.clientY
+    // set the element's new position:
+    elmnt.style.top = (elmnt.offsetTop - pos2) + 'px'
+    elmnt.style.left = (elmnt.offsetLeft - pos1) + 'px'
+  }
+
+  function closeDragElement () {
+    /* stop moving when mouse button is released: */
+    document.onmouseup = null
+    document.onmousemove = null
+  }
+}

src/app/ui/styles-guide/style-guide.js

@@ -688,8 +688,13 @@ function styleGuide () {
           BackgroundColor: appProperties.dropdown_BackgroundColor,
           BorderColor: appProperties.dropdown_BorderColor,
           Color: appProperties.dropdown_TextColor
-        })
+        }),
 
+        button_LoadPlugin: appProperties.uiElements.button({
+          BackgroundColor: appProperties.secondaryButton_BackgroundColor,
+          BorderColor: appProperties.secondaryButton_BorderColor,
+          Color: appProperties.secondaryButton_TextColor
+        })
       },
 
       /* ::::::::::::::