Merge branch 'swap_it' of https://github.com/ethereum/remix-ide into swap_it

6 years ago · e1d476f079
parent 5fccb7040c 8217fd3a25
commit e1d476f079
6 changed files with 100 additions and 114 deletions
--- a/src/app.js
+++ b/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;
-    height             : 100%;
+    width              : 16%;
  }
  .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 }) // eslint-disable-line
    run.apply(self)
  }

@ -467,7 +447,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
  let test = new TestTab(self._components.registry, compileTab)
  let sourceHighlighters = registry.get('editor').api.sourceHighlighters
  let configProvider = self._components.filesProviders['config']
-  
+
  appStore.addEntities([
  { profile: this.profile(), api: this },
  { profile: udapp.profile(), api: udapp },
@ -487,12 +467,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org

  const swapPanelComponent = new SwapPanelComponent()
  const verticalIconComponent = new VerticalIconsComponent()
-  const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, appManager)
-  const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager)
+  const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, appManager) // eslint-disable-line
+  const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager) // eslint-disable-line

  self._components.editorpanel.init()
  self._components.fileManager.init()
-  
+
  self._view.mainpanel.appendChild(self._components.editorpanel.render())
  self._view.iconpanel.appendChild(verticalIconComponent.render())
  self._view.swappanel.appendChild(swapPanelComponent.render())
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@ -172,18 +172,12 @@ class EditorPanel {
    self._view.tabsbar = yo`
      <div class=${css.tabsbar}>
        <div class=${css.buttons}>
-          <span class=${css.toggleLHP} onclick=${toggleLHP} title="Toggle left hand panel">
-            <i class="fa fa-angle-double-left"></i>
-          </span>
          <span class=${css.changeeditorfontsize} >
            <i class="increditorsize fa fa-plus" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
            <i class="decreditorsize fa fa-minus" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
          </span>
        </div>
        ${self._view.tabs}
-        <span class="${css.toggleRHP}" onclick=${toggleRHP} title="Toggle right hand panel">
-          <i class="fa fa-angle-double-right"></i>
-        </span>
      </div>
    `

@ -237,14 +231,6 @@ class EditorPanel {
        rightArrow.classList.add(css.hide)
      }
    }
-    function toggleLHP (event) {
-      this.children[0].classList.toggle('fa-angle-double-right')
-      this.children[0].classList.toggle('fa-angle-double-left')
-    }
-    function toggleRHP (event) {
-      this.children[0].classList.toggle('fa-angle-double-right')
-      this.children[0].classList.toggle('fa-angle-double-left')
-    }
    function increase () { self._components.editor.editorFontSize(1) }
    function decrease () { self._components.editor.editorFontSize(-1) }
    function scrollLeft (event) {
--- a/src/app/panels/file-panel.js
+++ b/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) => {
--- a/src/app/panels/styles/file-panel-styles.js
+++ b/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;
--- a/src/app/staticanalysis/staticAnalysisView.js
+++ b/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 {
--- a/src/lib/panels-resize.js
+++ b/src/lib/panels-resize.js
@ -0,0 +1,85 @@
+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 = processPositiions(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 = processPositiions(event)
+      panel1.style.width = p.panel1Width + 'px'
+      panel2.style.left = p.panel2left + 'px'
+      panel2.style.width = p.panel2Width + 'px'
+    }
+
+    let processPositiions = (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 }
+    }
+
+    var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
+    panel1.appendChild(dragbar)
+  }
+}