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,15 +27,11 @@ 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 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">
+  var options = yo`
     <ul id="options">
       <li class="envView" title="Environment">Contract</li>
       <li class="settingsView" title="Settings">Settings</li>
@@ -44,6 +40,13 @@ function RighthandPanel (container, appAPI, events, opts) {
       <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">
+          ${options}
         </div>
         ${optionViews}
       </div>
@@ -54,10 +57,11 @@ 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) })
+  self.render = function () { return element }
 
+  self.init = function () {
+    ;[...options.children].forEach((el) => { el.classList.add(css.options) })
       // ----------------- toggle right hand panel -----------------
 
     var hidingRHP = false
@@ -73,9 +77,8 @@ function RighthandPanel (container, appAPI, events, opts) {
       warnCompilerLoading: appAPI.warnCompilerLoading
     }
     // load tabbed menu component
-  var tabContainer // @TODO
     var tabEvents = {compiler: events.compiler, app: events.app}
-  tabbedMenu(tabContainer, tabbedMenuAPI, tabEvents, {})
+    tabbedMenu(options, tabbedMenuAPI, tabEvents, {})
 
     // ----------------- resizeable ui ---------------
 
@@ -122,4 +125,5 @@ function RighthandPanel (container, appAPI, events, opts) {
     } 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]