Merge pull request #2247 from ethereum/toasterIssue

use flexbox instead of fixed positions

src/app.js

@@ -62,38 +62,29 @@ var css = csjs`
     overflow-x: auto;
   }
   .browsersolidity     {
-    position           : relative;
     width              : 100vw;
     height             : 100vh;
     overflow           : hidden;
+    flex-direction     : row;
+    display            : flex;
   }
   .mainpanel         {
     display            : flex;
     flex-direction     : column;
-    position           : absolute;
-    top                : 0;
-    bottom             : 0;
     overflow           : hidden;
+    flex               : 1;
   }
   .iconpanel           {
     display            : flex;
     flex-direction     : column;
-    position           : absolute;
-    top                : 0;
-    bottom             : 0;
-    left               : 0;
     overflow           : hidden;
     width              : 50px;
     user-select        : none;
-    /* border-right       : 1px solid var(--primary); */
   }
   .sidepanel          {
     display            : flex;
-    flex-direction     : column;
-    position           : absolute;
-    top                : 0;
-    left               : 50px;
-    bottom             : 0;
+    flex-direction     : row-reverse;
+    width              : 320px;
   }
   .highlightcode {
     position:absolute;
@@ -150,7 +141,7 @@ class App {
 
   init () {
     var self = this
-    self._components.resizeFeature = new PanelsResize('#side-panel', '#editor-container', { 'minWidth': 300, x: 450 })
+    self._components.resizeFeature = new PanelsResize('#side-panel', '#editor-container', { 'minWidth': 330, x: 450 })
     run.apply(self)
   }
 

src/app/components/side-panel.js

@@ -8,6 +8,7 @@ const css = csjs`
     height: 100%;
     display: flex;
     flex-direction: column;
+    flex: auto;
   }
   .swapitTitle {
     margin: 0;
@@ -22,7 +23,6 @@ const css = csjs`
   }
   .swapitHeader {
     height: 35px;
-    padding: 15px 20px;
     display: flex;
     align-items: center;
   }
@@ -32,7 +32,6 @@ const css = csjs`
   }
   .pluginsContainer {
     height: 100%;
-    flex: 1;
     overflow-y: auto;
   }
   .titleInfo {
@@ -131,10 +130,10 @@ export class SidePanel extends AbstractPanel {
     }
 
     return yo`
-      <header class="${css.swapitHeader}">
-          <h6 class="${css.swapitTitle}">${name}</h6>
-          ${docLink}
-          ${versionWarning}
+      <header class="${css.swapitHeader} px-3">
+        <h6 class="${css.swapitTitle}">${name}</h6>
+        ${docLink}
+        ${versionWarning}
       </header>
     `
   }
@@ -143,7 +142,7 @@ export class SidePanel extends AbstractPanel {
     return yo`
       <section class="${css.panel}">
         ${this.header}
-        <div class="${css.pluginsContainer}">
+        <div class="${css.pluginsContainer} py-1">
           ${this.view}
         </div>
       </section>`

src/app/components/vertical-icons.js

@@ -160,9 +160,9 @@ export class VerticalIcons extends Plugin {
     })
 
     // remove active
-    const currentActive = this.view.querySelector(`.${css.active}`)
+    const currentActive = this.view.querySelector(`.active`)
     if (currentActive) {
-      currentActive.classList.remove(css.active)
+      currentActive.classList.remove(`active`)
     }
   }
 
@@ -176,7 +176,7 @@ export class VerticalIcons extends Plugin {
     const nextActive = this.view.querySelector(`[plugin="${name}"]`)
     if (nextActive) {
       let image = nextActive.querySelector('.image')
-      nextActive.classList.add(css.active)
+      nextActive.classList.add(`active`)
       image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(0%)`)
     }
   }
@@ -210,7 +210,7 @@ export class VerticalIcons extends Plugin {
 
   onThemeChanged (themeType) {
     const invert = themeType === 'dark' ? 1 : 0
-    const active = this.view.querySelector(`.${css.active}`)
+    const active = this.view.querySelector(`.active`)
     if (active) {
       let image = active.querySelector('.image')
       image.style.setProperty('filter', `invert(${invert})`)

src/app/tabs/runTab/model/dropdownlogic.js

@@ -54,8 +54,9 @@ class DropdownLogic {
         }
         cb(null, 'abi', abi)
       })
+    } else {
+      cb(null, 'instance')
     }
-    cb(null, 'instance')
   }
 
   getCompiledContracts (compiler, compilerFullName) {

src/app/tabs/styles/run-tab-styles.js

@@ -2,7 +2,6 @@ var csjs = require('csjs-inject')
 
 var css = csjs`
   .runTabView {
-    padding: 2%;
     display: flex;
     flex-direction: column;
   }

src/app/udapp/run-tab.js

@@ -74,7 +74,7 @@ export class RunTab extends LibraryPlugin {
   }
 
   renderContainer () {
-    this.container = yo`<div class="${css.runTabView} p-3" id="runTabView" ></div>`
+    this.container = yo`<div class="${css.runTabView} py-0 px-3" id="runTabView" ></div>`
 
     var el = yo`
     <div class="list-group list-group-flush">
@@ -133,7 +133,7 @@ export class RunTab extends LibraryPlugin {
       if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
     })
     this.contractDropdownUI.event.register('newContractABIAdded', (abi, address) => {
-      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, address))
+      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, '<at address>'))
     })
     this.contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => {
       this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value))

src/lib/panels-resize.js

@@ -3,11 +3,8 @@ const csjs = require('csjs-inject')
 
 const css = csjs`
   .dragbar            {
-    position          : absolute;
-    top               : 0px;
-    width             : 0.5em;
-    right             : 0;
-    bottom            : 0;
+    width             : 4px;
+    height            : 100%;
     cursor            : col-resize;
     z-index           : 999;
     /* border-right      : 2px solid var(--primary); */
@@ -102,20 +99,10 @@ export default class PanelsResize {
   }
 
   minimize () {
-    let panel1Width = 0
-    let panel2left = this.panel1.offsetLeft + panel1Width
-    let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
-    this.panel1.style.width = panel1Width + 'px'
-    this.panel2.style.left = panel2left + 'px'
-    this.panel2.style.width = panel2Width + 'px'
+    this.panel1.style.display = 'none'
   }
 
   maximise () {
-    let panel1Width = this.opt.minWidth
-    let panel2left = this.panel1.offsetLeft + panel1Width
-    let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
-    this.panel1.style.width = panel1Width + 'px'
-    this.panel2.style.left = panel2left + 'px'
-    this.panel2.style.width = panel2Width + 'px'
+    this.panel1.style.display = 'flex'
   }
 }