Merge pull request #2270 from ethereum/toasterIssue

side panel resize

src/app.js

@@ -81,7 +81,7 @@ var css = csjs`
     width              : 50px;
     user-select        : none;
   }
-  .sidepanel          {
+  .sidepanel           {
     display            : flex;
     flex-direction     : row-reverse;
     width              : 320px;
@@ -141,7 +141,6 @@ class App {
 
   init () {
     var self = this
-    self._components.resizeFeature = new PanelsResize('#side-panel', '#editor-container', { 'minWidth': 330, x: 450 })
     run.apply(self)
   }
 
@@ -157,22 +156,25 @@ class App {
 
     // center panel, resizable
     self._view.sidepanel = yo`
-      <div id="side-panel" class=${css.sidepanel}>
+      <div id="side-panel" style="min-width: 320px;" class=${css.sidepanel}>
         ${''}
       </div>
     `
 
     // handle the editor + terminal
     self._view.mainpanel = yo`
-      <div id="editor-container" class=${css.mainpanel}>
+      <div id="main-panel" class=${css.mainpanel}>
         ${''}
       </div>
     `
 
+    self._components.resizeFeature = new PanelsResize(self._view.sidepanel)
+
     self._view.el = yo`
       <div class=${css.browsersolidity}>
         ${self._view.iconpanel}
         ${self._view.sidepanel}
+        ${self._components.resizeFeature.render()}
         ${self._view.mainpanel}
       </div>
     `

src/framingService.js

@@ -10,13 +10,13 @@ export class FramingService {
 
   start () {
     this.sidePanel.events.on('toggle', () => {
-      this.resizeFeature.panel1.clientWidth !== 0 ? this.resizeFeature.minimize() : this.resizeFeature.maximise()
+      this.resizeFeature.panel.clientWidth !== 0 ? this.resizeFeature.hidePanel() : this.resizeFeature.showPanel()
     })
     this.sidePanel.events.on('showing', () => {
-      this.resizeFeature.panel1.clientWidth === 0 ? this.resizeFeature.maximise() : ''
+      this.resizeFeature.panel.clientWidth === 0 ? this.resizeFeature.showPanel() : ''
     })
     this.mainPanel.events.on('toggle', () => {
-      this.resizeFeature.maximise()
+      this.resizeFeature.showPanel()
     })
 
     this.verticalIcon.select('fileExplorers')

src/lib/panels-resize.js

@@ -3,11 +3,10 @@ const csjs = require('csjs-inject')
 
 const css = csjs`
   .dragbar            {
-    width             : 4px;
+    width             : 1px;
     height            : 100%;
     cursor            : col-resize;
     z-index           : 999;
-    /* border-right      : 2px solid var(--primary); */
   }
   .ghostbar           {
     width             : 3px;
@@ -21,88 +20,70 @@ const css = csjs`
   }
 `
 
-/*
-* opt:
-*   minWidth  : minimn width for panels
-*   x         : position of gutter at load
-*
-*
-*/
 export default class PanelsResize {
-  constructor (idpanel1, idpanel2, opt) {
-    var panel1 = document.querySelector(idpanel1)
-    var panel2 = document.querySelector(idpanel2)
-    this.panel1 = panel1
-    this.panel2 = panel2
-    this.opt = opt
+  constructor (panel) {
+    this.panel = panel
+    const string = panel.style.minWidth
+    this.minWidth = string.length > 2 ? parseInt(string.substring(0, string.length - 2)) : 0
+  }
 
-    var ghostbar = yo`<div class=${css.ghostbar}></div>`
+  render () {
+    this.ghostbar = yo`<div class=${css.ghostbar}></div>`
 
-    let mousedown = (event) => {
+    const mousedown = (event) => {
       event.preventDefault()
       if (event.which === 1) {
         moveGhostbar(event)
-        document.body.appendChild(ghostbar)
+        document.body.appendChild(this.ghostbar)
         document.addEventListener('mousemove', moveGhostbar)
         document.addEventListener('mouseup', removeGhostbar)
         document.addEventListener('keydown', cancelGhostbar)
       }
     }
 
-    let cancelGhostbar = (event) => {
+    const cancelGhostbar = (event) => {
       if (event.keyCode === 27) {
-        document.body.removeChild(ghostbar)
+        document.body.removeChild(this.ghostbar)
         document.removeEventListener('mousemove', moveGhostbar)
         document.removeEventListener('mouseup', removeGhostbar)
         document.removeEventListener('keydown', cancelGhostbar)
       }
     }
 
-    let moveGhostbar = (event) => { // @NOTE VERTICAL ghostbar
-      let p = processPositions(event)
-      if (p.panel1Width <= opt.minWidth || p.panel2Width <= opt.minWidth) return
-      ghostbar.style.left = event.x + 'px'
-    }
-
-    let setPosition = (event) => {
-      let p = processPositions(event)
-      panel1.style.width = p.panel1Width + 'px'
-      panel2.style.left = p.panel2left + 'px'
-      panel2.style.width = p.panel2Width + 'px'
+    const moveGhostbar = (event) => {
+      this.ghostbar.style.left = event.x + 'px'
     }
 
-    let removeGhostbar = (event) => {
-      document.body.removeChild(ghostbar)
+    const removeGhostbar = (event) => {
+      document.body.removeChild(this.ghostbar)
       document.removeEventListener('mousemove', moveGhostbar)
       document.removeEventListener('mouseup', removeGhostbar)
       document.removeEventListener('keydown', cancelGhostbar)
-      setPosition(event)
-    }
-
-    let processPositions = (event) => {
-      let panel1Width = event.x - panel1.offsetLeft
-      panel1Width = panel1Width < opt.minWidth ? opt.minWidth : panel1Width
-      let panel2left = panel1.offsetLeft + panel1Width
-      let panel2Width = panel2.parentElement.clientWidth - panel1.offsetLeft - panel1Width
-      panel2Width = panel2Width < opt.minWidth ? opt.minWidth : panel2Width
-      return { panel1Width, panel2left, panel2Width }
+      this.setPosition(event)
     }
 
-    window.addEventListener('resize', function (event) {
-      setPosition({ x: panel1.offsetLeft + panel1.clientWidth })
-    })
+    return yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
+  }
 
-    var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
-    panel1.appendChild(dragbar)
+  calculatePanelWidth (event) {
+    return event.x - this.panel.offsetLeft
+  }
 
-    setPosition(opt)
+  setPosition (event) {
+    const panelWidth = this.calculatePanelWidth(event)
+    // close the panel if the width is less than a minWidth
+    if (panelWidth > this.minWidth - 10 || this.panel.style.display === 'none') {
+      this.panel.style.width = panelWidth + 'px'
+      this.showPanel()
+    } else this.hidePanel()
   }
 
-  minimize () {
-    this.panel1.style.display = 'none'
+  hidePanel () {
+    this.panel.style.display = 'none'
   }
 
-  maximise () {
-    this.panel1.style.display = 'flex'
+  showPanel () {
+    this.panel.style.display = 'flex'
   }
 }
+

test-browser/commands/checkTerminalFilter.js

@@ -17,10 +17,10 @@ function checkFilter (browser, filter, test, done) {
     done()
     return
   }
-  var filterClass = '#editor-container div[class^="search"] input[class^="filter"]'
+  const filterClass = '#main-panel div[class^="search"] input[class^="filter"]'
   browser.setValue(filterClass, filter, function () {
     browser.execute(function () {
-      return document.querySelector('#editor-container div[class^="journal"]').innerHTML === test
+      return document.querySelector('#main-panel div[class^="journal"]').innerHTML === test
     }, [], function (result) {
       browser.clearValue(filterClass).setValue(filterClass, '', function () {
         if (!result.value) {

test-browser/commands/testFunction.js

@@ -16,12 +16,12 @@ class TestFunction extends EventEmitter {
     })
     .click('.instance button[title="' + fnFullName + '"]')
     .pause(500)
-    .waitForElementPresent('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"]')
-    .assert.containsText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] span', log)
-    .click('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] div[class^="log"]')
+    .waitForElementPresent('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"]')
+    .assert.containsText('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] span', log)
+    .click('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] div[class^="log"]')
     .perform(function (client, done) {
       if (expectedReturn) {
-        client.getText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #decodedoutput', (result) => {
+        client.getText('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #decodedoutput', (result) => {
           console.log(result)
           var equal = deepequal(JSON.parse(result.value), JSON.parse(expectedReturn))
           if (!equal) {
@@ -33,7 +33,7 @@ class TestFunction extends EventEmitter {
     })
     .perform((client, done) => {
       if (expectedEvent) {
-        client.getText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #logs', (result) => {
+        client.getText('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #logs', (result) => {
           console.log(result)
           var equal = deepequal(JSON.parse(result.value), JSON.parse(expectedEvent))
           if (!equal) {