split screen (swap panel / editor panel)

src/app.js

@@ -52,6 +52,7 @@ const TestTab = require('./app/tabs/test-tab')
 const RunTab = require('./app/tabs/run-tab')
 const FilePanel = require('./app/panels/file-panel')
 
+import PanelsResize from './lib/panels-resize'
 import { EntityStore } from './lib/store'
 import { RemixAppManager } from './remixAppManager'
 
@@ -85,9 +86,8 @@ var css = csjs`
     position           : absolute;
     top                : 0;
     bottom             : 0;
-    left               : 450px;
     overflow           : hidden;
-    width              : 800px;
+    width              : 82%;
   }
   .iconpanel           {
     background-color  : ${styles.leftPanel.backgroundColor_Panel};
@@ -98,18 +98,16 @@ var css = csjs`
     bottom             : 0;
     left               : 0;
     overflow           : hidden;
-    width              : 50px;
+    width              : 2%;
   }
   .swappanel          {
     display            : flex;
     flex-direction     : column;
     position           : absolute;
     top                : 0;
-    left               : 50px;
     bottom             : 0;
     overflow           : hidden;
-    width              : 400px;
+    width              : 16%;
-    height             : 100%;
   }
   .highlightcode {
     position:absolute;
@@ -187,31 +185,13 @@ class App {
       }
     }
   }
-  _adjustLayout (direction, delta) {
+  
-    /* var self = this
-    var layout = self.data._layout[direction]
-    if (layout) {
-      if (delta === undefined) {
-        layout.show = !layout.show
-        if (layout.show) delta = layout.offset
-        else delta = 0
-      } else {
-        self._components.config.set(`${direction}-offset`, delta)
-        layout.offset = delta
-      }
-    }
-    if (direction === 'left') {
-      self._view.swappanel.style.width = delta + 'px'
-      self._view.mainpanel.style.left = delta + 'px'
-    }
-     if (direction === 'right') {
-       self._view.mainpanel.style.width = delta + 'px'
-       self._view.swappanel.style.right = delta + 'px'
-    }
-    */
-  }
   init () {
     var self = this
+    self._view.swappanel.style.left = self._view.iconpanel.clientWidth + 'px'
+    self._view.mainpanel.style.left = (self._view.iconpanel.clientWidth + self._view.swappanel.clientWidth) + 'px'
+
+    let resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': '300' })
     run.apply(self)
   }
 
@@ -253,7 +233,7 @@ class App {
         ${self._view.swappanel}
         ${self._view.mainpanel}
       </div>
-    `
+    `    
     // INIT
     // self._adjustLayout('left', self.data._layout.left.offset)
     // self._adjustLayout('right', self.data._layout.right.offset)
@@ -432,7 +412,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   // ----------------- editor panel ----------------------
   self._components.editorpanel = new EditorPanel()
   registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
-
+  
   // ----------------- Renderer -----------------
   var renderer = new Renderer()
   registry.put({api: renderer, name: 'renderer'})
@@ -449,6 +429,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   // TODOs those are instanciated before hand. should be instanciated on demand
 
   const pluginManagerComponent = new PluginManagerComponent()
+  
   let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} })
   const appManager = new RemixAppManager(appStore)
   registry.put({api: appManager.proxy(), name: 'pluginmanager'})
@@ -486,6 +467,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   { profile: pluginManagerComponent.profile(), api: pluginManagerComponent }])
 
   const swapPanelComponent = new SwapPanelComponent()
+  
   const verticalIconComponent = new VerticalIconsComponent()
   const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, appManager)
   const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager)
@@ -493,9 +475,13 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   self._components.editorpanel.init()
   self._components.fileManager.init()
   
-  self._view.mainpanel.appendChild(self._components.editorpanel.render())
+  let mainEl = self._components.editorpanel.render()
+  self._view.mainpanel.appendChild(mainEl)
+
   self._view.iconpanel.appendChild(verticalIconComponent.render())
-  self._view.swappanel.appendChild(swapPanelComponent.render())
+
+  let swapEl = swapPanelComponent.render()
+  self._view.swappanel.appendChild(swapEl)
 
   appManager.activateOne('App')
   appManager.activateOne('Udapp')

src/app/panels/file-panel.js

@@ -20,9 +20,7 @@ var styles = styleGuide.chooser()
 
 var css = require('./styles/file-panel-styles')
 
-var limit = 60
 var canUpload = window.File || window.FileReader || window.FileList || window.Blob
-var ghostbar = yo`<div class=${css.ghostbar}></div>`
 
 /*
   Overview of APIs:
@@ -71,8 +69,7 @@ function filepanel (localRegistry) {
   self._compilerMetadata.syncContractMetadata()
 
   self.compilerMetadata = () => { return self._compilerMetadata }
-  var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
+  
-
   function remixdDialog () {
     return yo`
       <div class=${css.dialog}>
@@ -128,7 +125,6 @@ function filepanel (localRegistry) {
             <div class="httpsexplorer ${css.treeview}">${httpsExplorer.init()}</div>
           </div>
         </div>
-        ${dragbar}
       </div>
     `
   }
@@ -239,41 +235,6 @@ function filepanel (localRegistry) {
     })
   }
 
-  // ----------------- resizeable ui ---------------
-  function mousedown (event) {
-    event.preventDefault()
-    if (event.which === 1) {
-      moveGhostbar(event)
-      document.body.appendChild(ghostbar)
-      document.addEventListener('mousemove', moveGhostbar)
-      document.addEventListener('mouseup', removeGhostbar)
-      document.addEventListener('keydown', cancelGhostbar)
-    }
-  }
-  function cancelGhostbar (event) {
-    if (event.keyCode === 27) {
-      document.body.removeChild(ghostbar)
-      document.removeEventListener('mousemove', moveGhostbar)
-      document.removeEventListener('mouseup', removeGhostbar)
-      document.removeEventListener('keydown', cancelGhostbar)
-    }
-  }
-  function getPosition (event) {
-    var rhp = document.body.offsetWidth - window['righthand-panel'].offsetWidth
-    var newpos = (event.pageX < limit) ? limit : event.pageX
-    newpos = (newpos < (rhp - limit)) ? newpos : (rhp - limit)
-    return newpos
-  }
-  function moveGhostbar (event) { // @NOTE VERTICAL ghostbar
-    ghostbar.style.left = getPosition(event) + 'px'
-  }
-  function removeGhostbar (event) {
-    document.body.removeChild(ghostbar)
-    document.removeEventListener('mousemove', moveGhostbar)
-    document.removeEventListener('mouseup', removeGhostbar)
-    document.removeEventListener('keydown', cancelGhostbar)
-  }
-
   function createNewFile () {
     modalDialogCustom.prompt(null, 'File Name', 'Untitled.sol', (input) => {
       helper.createNonClashingName(input, self._deps.fileProviders['browser'], (error, newName) => {

src/app/panels/styles/file-panel-styles.js

@@ -73,27 +73,7 @@ var css = csjs`
   }
   .treeviews {
     overflow-y        : auto;
-  }
+  }  
-  .dragbar            {
-    position          : absolute;
-    top               : 29px;
-    width             : 0.5em;
-    right             : 0;
-    bottom            : 0;
-    cursor            : col-resize;
-    z-index           : 999;
-    border-right      : 2px solid hsla(215, 81%, 79%, .3);
-  }
-  .ghostbar           {
-    width             : 3px;
-    background-color  : ${styles.colors.lightBlue};
-    opacity           : 0.5;
-    position          : absolute;
-    cursor            : col-resize;
-    z-index           : 9999;
-    top               : 0;
-    bottom            : 0;
-  }
   .dialog {
     display: flex;
     flex-direction: column;

src/app/staticanalysis/staticAnalysisView.js

@@ -122,12 +122,6 @@ staticAnalysisView.prototype.run = function () {
           self._deps.renderer.error(msg, warningContainer, {type: 'staticAnalysisWarning', useSpan: true})
         })
       })
-      if (warningContainer.html() === '') {
-        $('#righthand-panel #menu .staticanalysisView').css('color', '')
-        warningContainer.html('No warning to report')
-      } else {
-        $('#righthand-panel #menu .staticanalysisView').css('color', styles.colors.red)
-      }
       self.event.trigger('staticAnaysisWarning', [warningCount])
     })
   } else {

src/lib/panels-resize.js

@@ -0,0 +1,84 @@
+const yo = require('yo-yo')
+const csjs = require('csjs-inject')
+const styleGuide = require('../app/ui/styles-guide/theme-chooser')
+const styles = styleGuide.chooser()
+
+const css = csjs`
+  .dragbar            {
+    position          : absolute;
+    top               : 29px;
+    width             : 0.5em;
+    right             : 0;
+    bottom            : 0;
+    cursor            : col-resize;
+    z-index           : 999;
+    border-right      : 2px solid hsla(215, 81%, 79%, .3);
+  }
+  .ghostbar           {
+    width             : 3px;
+    background-color  : ${styles.colors.lightBlue};
+    opacity           : 0.5;
+    position          : absolute;
+    cursor            : col-resize;
+    z-index           : 9999;
+    top               : 0;
+    bottom            : 0;
+  }
+`
+
+export default class PanelsResize {
+  constructor (idpanel1, idpanel2, opt) {
+    var panel1 = document.querySelector(idpanel1)
+    var panel2 = document.querySelector(idpanel2)
+
+    var ghostbar = yo`<div class=${css.ghostbar}></div>`
+   
+    let mousedown = (event) => {
+      event.preventDefault()
+      if (event.which === 1) {
+        moveGhostbar(event)
+        document.body.appendChild(ghostbar)
+        document.addEventListener('mousemove', moveGhostbar)
+        document.addEventListener('mouseup', removeGhostbar)
+        document.addEventListener('keydown', cancelGhostbar)
+      }
+    }
+
+    let cancelGhostbar = (event) => {
+      if (event.keyCode === 27) {
+        document.body.removeChild(ghostbar)
+        document.removeEventListener('mousemove', moveGhostbar)
+        document.removeEventListener('mouseup', removeGhostbar)
+        document.removeEventListener('keydown', cancelGhostbar)
+      }
+    }
+
+    let moveGhostbar = (event) => { // @NOTE VERTICAL ghostbar
+      let p = processWidth(event)
+      if (p.panel1Width < opt.minWidth || p.panel2Width < opt.minWidth) return
+      ghostbar.style.left = event.x + 'px'
+    }
+
+    let removeGhostbar = (event) => {
+      document.body.removeChild(ghostbar)
+      document.removeEventListener('mousemove', moveGhostbar)
+      document.removeEventListener('mouseup', removeGhostbar)
+      document.removeEventListener('keydown', cancelGhostbar)
+      let p = processWidth(event)
+      if (p.panel1Width < opt.minWidth || p.panel2Width < opt.minWidth) return
+      panel1.style.width = p.panel1Width + 'px'
+      panel2.style.left = p.panel2left + 'px'
+      panel2.style.width = p.panel2Width + 'px'
+    }
+
+    let processWidth = (event) => {
+      let panel1Width = event.x - panel1.offsetLeft
+      let panel2left = panel1.offsetLeft + panel1Width
+      let panel2Width = panel2.parentElement.clientWidth - panel1.offsetLeft - panel1Width
+      return { panel1Width, panel2left, panel2Width }
+    }
+
+    var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
+    panel1.appendChild(dragbar)
+  }
+}