Merge pull request #630 from serapath-contribution/master

REFACTOR (3) add rightpanel & centerpanel to layout

assets/css/browser-solidity.css

@@ -407,18 +407,6 @@ body {
     bottom: 0;
 }
 
-#dragbar {
-    background-color: transparent;
-    position: absolute;
-    width: 0.5em;
-    right: -3px;
-    top: 3em;
-    bottom: 0;
-    cursor: col-resize;
-    z-index: 999;
-    border-right: 2px solid hsla(215, 81%, 79%, .3);
-}
-
 input[readonly] {
     display: block;
     width: 100%;

src/app.js

@@ -31,12 +31,9 @@ var examples = require('./app/example-contracts')
 
 var css = csjs`
   .browsersolidity     {
-    position           : absolute;
-    top                : 0;
-    left               : 0;
-    width              : auto;
-    bottom             : 0;
-    right              : 37em;
+    position           : relative;
+    width              : 100vw;
+    height             : 100vh;
   }
   .editor-container    {
     display            : flex;
@@ -51,6 +48,16 @@ var css = csjs`
     display            : flex;
     width              : 200px;
   }
+  .dragbar2            {
+    background-color   : transparent;
+    position           : absolute;
+    width              : 0.5em;
+    top                : 3em;
+    bottom             : 0;
+    cursor             : col-resize;
+    z-index            : 999;
+    border-right       : 2px solid hsla(215, 81%, 79%, .3);    
+  }
 `
 
 class App {
@@ -66,6 +73,13 @@ class App {
     var self = this
     if (self._view.el) return self._view.el
     /***************************************************************************/
+    self._view.rightpanel = yo`<div></div>`
+    self._view.centerpanel = yo`
+      <div id="editor-container" class=${css['editor-container']}>
+        <div id="filepanel" class=${css['filepanel-container']}></div>
+        <div id="input"></div>
+      </div>
+    `
     self._view.el = yo`
       <div class=${css.browsersolidity}>
         <div id="tabs-bar">
@@ -74,11 +88,9 @@ class App {
           <ul id="files" class="nav nav-tabs"></ul>
         </div>
         <span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-angle-double-right"></i></span>
-        <div id="editor-container" class=${css['editor-container']}>
-          <div id="filepanel" class=${css['filepanel-container']}></div>
-          <div id="input"></div>
-        </div>
-        <div id="dragbar"></div>
+        ${self._view.centerpanel}
+        <div id="dragbar" class=${css.dragbar2}></div>
+        ${self._view.rightpanel}
       </div>
     `
     return self._view.el
@@ -672,7 +684,8 @@ function run () {
     config: config,
     setEditorSize (delta) {
       $('#righthand-panel').css('width', delta)
-      self._view.el.style.right = delta + 'px'
+      self._view.centerpanel.style.right = delta + 'px'
+      document.querySelector(`.${css.dragbar2}`).style.right = delta + 'px'
       onResize()
     },
     reAdjust: reAdjust,
@@ -694,7 +707,10 @@ function run () {
     app: self.event,
     udapp: udapp.event
   }
-  var righthandPanel = new RighthandPanel(document.body, rhpAPI, rhpEvents, {}) // eslint-disable-line
+  var righthandPanel = new RighthandPanel(rhpAPI, rhpEvents, {}) // eslint-disable-line
+  self._view.rightpanel.appendChild(righthandPanel.render())
+  righthandPanel.init()
+
   // ----------------- editor resize ---------------
 
   function onResize () {

src/app/righthand-panel.js

@@ -27,23 +27,26 @@ var css = csjs`
 
 module.exports = RighthandPanel
 
-function RighthandPanel (container, appAPI, events, opts) {
+function RighthandPanel (appAPI, events, opts) {
   var self = this
   self._api = appAPI
   var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
+  var options = yo`
+    <ul id="options">
+      <li class="envView" title="Environment">Contract</li>
+      <li class="settingsView" title="Settings">Settings</li>
+      <li class="publishView" title="Publish" >Files</li>
+      <li class="debugView" title="Debugger">Debugger</li>
+      <li class="staticanalysisView" title="Static Analysis">Analysis</li>
+      <li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
+    </ul>
+  `
   var element = yo`
     <div id="righthand-panel">
       <div id="header">
         <div id="menu">
           <img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
-          <ul id="options">
-            <li class="envView" title="Environment">Contract</li>
-            <li class="settingsView" title="Settings">Settings</li>
-            <li class="publishView" title="Publish" >Files</li>
-            <li class="debugView" title="Debugger">Debugger</li>
-            <li class="staticanalysisView" title="Static Analysis">Analysis</li>
-            <li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
-          </ul>
+          ${options}
         </div>
         ${optionViews}
       </div>
@@ -54,72 +57,73 @@ function RighthandPanel (container, appAPI, events, opts) {
   analysisTab(optionViews, appAPI, events, opts)
   debuggerTab(optionViews, appAPI, events, opts)
   filesTab(optionViews, appAPI, events, opts)
-  container.appendChild(element)
-
-  ;[...container.querySelectorAll('#header #options li')].forEach((el) => { el.classList.add(css.options) })
-
-  // ----------------- toggle right hand panel -----------------
 
-  var hidingRHP = false
-  $('.toggleRHP').click(function () {
-    hidingRHP = !hidingRHP
-    self._api.setEditorSize(hidingRHP ? 0 : appAPI.config.get(EDITOR_WINDOW_SIZE))
-    $('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
-    $('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
-  })
+  self.render = function () { return element }
 
-  // ----------------- tabbed menu -----------------
-  var tabbedMenuAPI = {
-    warnCompilerLoading: appAPI.warnCompilerLoading
-  }
-  // load tabbed menu component
-  var tabContainer // @TODO
-  var tabEvents = {compiler: events.compiler, app: events.app}
-  tabbedMenu(tabContainer, tabbedMenuAPI, tabEvents, {})
-
-  // ----------------- resizeable ui ---------------
-
-  var EDITOR_WINDOW_SIZE = 'editorWindowSize'
-
-  var dragging = false
-  $('#dragbar').mousedown(function (e) {
-    e.preventDefault()
-    dragging = true
-    var main = $('#righthand-panel')
-    var ghostbar = $('<div id="ghostbar">', {
-      css: {
-        top: main.offset().top,
-        left: main.offset().left
-      }
-    }).prependTo('body')
+  self.init = function () {
+    ;[...options.children].forEach((el) => { el.classList.add(css.options) })
+      // ----------------- toggle right hand panel -----------------
 
-    $(document).mousemove(function (e) {
-      ghostbar.css('left', e.pageX + 2)
+    var hidingRHP = false
+    $('.toggleRHP').click(function () {
+      hidingRHP = !hidingRHP
+      self._api.setEditorSize(hidingRHP ? 0 : appAPI.config.get(EDITOR_WINDOW_SIZE))
+      $('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
+      $('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
     })
-  })
 
-  var $body = $('body')
+    // ----------------- tabbed menu -----------------
+    var tabbedMenuAPI = {
+      warnCompilerLoading: appAPI.warnCompilerLoading
+    }
+    // load tabbed menu component
+    var tabEvents = {compiler: events.compiler, app: events.app}
+    tabbedMenu(options, tabbedMenuAPI, tabEvents, {})
+
+    // ----------------- resizeable ui ---------------
+
+    var EDITOR_WINDOW_SIZE = 'editorWindowSize'
+
+    var dragging = false
+    $('#dragbar').mousedown(function (e) {
+      e.preventDefault()
+      dragging = true
+      var main = $('#righthand-panel')
+      var ghostbar = $('<div id="ghostbar">', {
+        css: {
+          top: main.offset().top,
+          left: main.offset().left
+        }
+      }).prependTo('body')
+
+      $(document).mousemove(function (e) {
+        ghostbar.css('left', e.pageX + 2)
+      })
+    })
 
-  function getEditorSize () {
-    return $('#righthand-panel').width()
-  }
+    var $body = $('body')
 
-  $(document).mouseup(function (e) {
-    if (dragging) {
-      var delta = $body.width() - e.pageX + 2
-      $('#ghostbar').remove()
-      $(document).unbind('mousemove')
-      dragging = false
-      delta = (delta < 50) ? 50 : delta
-      self._api.setEditorSize(delta)
-      appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
-      appAPI.reAdjust()
+    function getEditorSize () {
+      return $('#righthand-panel').width()
     }
-  })
 
-  if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) {
-    self._api.setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE))
-  } else {
-    appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize())
+    $(document).mouseup(function (e) {
+      if (dragging) {
+        var delta = $body.width() - e.pageX + 2
+        $('#ghostbar').remove()
+        $(document).unbind('mousemove')
+        dragging = false
+        delta = (delta < 50) ? 50 : delta
+        self._api.setEditorSize(delta)
+        appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
+        appAPI.reAdjust()
+      }
+    })
+
+    if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) {
+      self._api.setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE))
+    } else {
+      appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize())
+    }
   }
 }

src/app/tabbed-menu.js

@@ -4,17 +4,16 @@ var loadingSpinner = require('./loading-spinner')
 module.exports = tabbedMenu
 
 function tabbedMenu (container, appAPI, events, opts) {
-  $('#options li').click(function (ev) {
-    var $el = $(this)
-    selectTab($el)
+  container.querySelectorAll('li').forEach(function (el) {
+    el.onclick = function (ev) { selectTab(this) }
   })
 
   events.app.register('debuggingRequested', () => {
-    selectTab($('ul#options li.debugView'))
+    selectTab(container.querySelector('li.debugView'))
   })
 
   // initialize tabbed menu
-  selectTab($('#options .envView'))
+  selectTab(container.querySelector('.envView'))
 
   // add event listeners for loading spinner
   events.compiler.register('loadingCompiler', function start () {
@@ -34,6 +33,7 @@ function tabbedMenu (container, appAPI, events, opts) {
 
   // select tab
   function selectTab (el) {
+    el = $(el)
     var match = /[a-z]+View/.exec(el.get(0).className)
     if (!match) return
     var cls = match[0]