REFACTOR (2) change layout of app container

assets/css/browser-solidity.css

@@ -8,15 +8,6 @@ body {
     font-weight: normal;
 }
 
-#editor {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: auto;
-    bottom: 0;
-    right: 37em;
-}
-
 .scroller {
     position: absolute;
     z-index: 999;
@@ -428,12 +419,6 @@ body {
     border-right: 2px solid hsla(215, 81%, 79%, .3);
 }
 
-#editor .ace-tm .ace_gutter,
-#editor .ace-tm .ace_gutter-active-line,
-#editor .ace-tm .ace_marker-layer .ace_active-line {
-    background-color: rgba(225, 229, 251, 0.5);
-}
-
 input[readonly] {
     display: block;
     width: 100%;

src/app.js

@@ -30,6 +30,14 @@ var RighthandPanel = require('./app/righthand-panel')
 var examples = require('./app/example-contracts')
 
 var css = csjs`
+  .browsersolidity     {
+    position           : absolute;
+    top                : 0;
+    left               : 0;
+    width              : auto;
+    bottom             : 0;
+    right              : 37em;
+  }
   .editor-container    {
     display            : flex;
     position           : absolute;
@@ -58,8 +66,8 @@ class App {
     var self = this
     if (self._view.el) return self._view.el
     /***************************************************************************/
-    var el = yo`
-      <div id="editor">
+    self._view.el = yo`
+      <div class=${css.browsersolidity}>
         <div id="tabs-bar">
           <div class="scroller scroller-left"><i class="fa fa-chevron-left "></i></div>
           <div class="scroller scroller-right"><i class="fa fa-chevron-right "></i></div>
@@ -73,7 +81,7 @@ class App {
         <div id="dragbar"></div>
       </div>
     `
-    return el
+    return self._view.el
   }
 }
 
@@ -662,7 +670,11 @@ function run () {
   // ---------------- Righthand-panel --------------------
   var rhpAPI = {
     config: config,
-    onResize: onResize,
+    setEditorSize (delta) {
+      $('#righthand-panel').css('width', delta)
+      self._view.el.style.right = delta + 'px'
+      onResize()
+    },
     reAdjust: reAdjust,
     warnCompilerLoading: (msg) => {
       renderer.clear()
@@ -692,7 +704,7 @@ function run () {
   window.onresize = onResize
   onResize()
 
-  document.querySelector('#editor').addEventListener('change', onResize)
+  self._view.el.addEventListener('change', onResize)
   document.querySelector('#editorWrap').addEventListener('change', onResize)
 
   // ----------------- compiler ----------------------

src/app/editor.js

 'use strict'
 
 var EventManager = require('ethereum-remix').lib.EventManager
-
+var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var ace = require('brace')
 var Range = ace.acequire('ace/range').Range
@@ -14,6 +14,15 @@ var css = csjs`
     width             : 100%;
   }
 `
+document.head.appendChild(yo`
+  <style>
+    .ace-tm .ace_gutter,
+    .ace-tm .ace_gutter-active-line,
+    .ace-tm .ace_marker-layer .ace_active-line {
+        background-color: rgba(225, 229, 251, 0.5);
+    }
+  </style>
+`)
 
 function Editor (editorElement) {
   var editor = ace.edit(editorElement)

src/app/righthand-panel.js

@@ -28,6 +28,8 @@ var css = csjs`
 module.exports = RighthandPanel
 
 function RighthandPanel (container, 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">
@@ -61,7 +63,7 @@ function RighthandPanel (container, appAPI, events, opts) {
   var hidingRHP = false
   $('.toggleRHP').click(function () {
     hidingRHP = !hidingRHP
-    setEditorSize(hidingRHP ? 0 : appAPI.config.get(EDITOR_WINDOW_SIZE))
+    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)
   })
@@ -98,12 +100,6 @@ function RighthandPanel (container, appAPI, events, opts) {
 
   var $body = $('body')
 
-  function setEditorSize (delta) {
-    $('#righthand-panel').css('width', delta)
-    $('#editor').css('right', delta)
-    appAPI.onResize()
-  }
-
   function getEditorSize () {
     return $('#righthand-panel').width()
   }
@@ -115,14 +111,14 @@ function RighthandPanel (container, appAPI, events, opts) {
       $(document).unbind('mousemove')
       dragging = false
       delta = (delta < 50) ? 50 : delta
-      setEditorSize(delta)
+      self._api.setEditorSize(delta)
       appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
       appAPI.reAdjust()
     }
   })
 
   if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) {
-    setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE))
+    self._api.setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE))
   } else {
     appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize())
   }