Merge pull request #2108 from ethereum/master_li

compiler tab style fixes. language selector ui behaviour

package.json

@@ -68,7 +68,8 @@
     "web3": "1.0.0-beta.27",
     "webworkify": "^1.2.1",
     "yo-yo": "^1.2.2",
-    "yo-yoify": "^3.7.3"
+    "yo-yoify": "^3.7.3",
+    "semver": "^6.1.2"
   },
   "dependencies": {
     "http-server": "^0.11.1",

src/app/tabs/compile-tab.js

@@ -396,7 +396,7 @@ class CompileTab extends CompilerApi {
   render () {
     if (this._view.el) return this._view.el
     this.listenToEvents()
-    this._view.errorContainer = yo`<div class="${css.errorBlobs}"></div>`
+    this._view.errorContainer = yo`<div class="${css.errorBlobs} p-2"></div>`
     this._view.contractSelection = this.contractSelection()
     this._view.compilerContainer = this.compilerContainer.render()
     this.compilerContainer.activate()

src/app/tabs/compileTab/compilerContainer.js

@@ -3,6 +3,7 @@ const yo = require('yo-yo')
 var minixhr = require('minixhr')
 var helper = require('../../../lib/helper')
 const addTooltip = require('../../ui/tooltip')
+const semver = require('semver')
 
 var css = require('../styles/compile-tab-styles')
 
@@ -76,6 +77,7 @@ class CompilerContainer {
       this._view.compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.')
       this._view.compileIcon.classList.add(`${css.spinningIcon}`)
       this._view.warnCompilationSlow.style.visibility = 'hidden'
+      this._updateLanguageSelector()
     })
 
     this.compileTabLogic.compiler.event.register('compilerLoaded', () => {
@@ -110,6 +112,11 @@ class CompilerContainer {
     return el
   }
 
+  _retrieveVersion () {
+    let version = this._view.versionSelector.value
+    return version.substring(9, 14)
+  }
+
   render () {
     this.compileTabLogic.compiler.event.register('compilerLoaded', (version) => this.setVersionText(version))
     this.fetchAllVersion((allversions, selectedVersion) => {
@@ -132,6 +139,11 @@ class CompilerContainer {
       <select onchange="${this.onchangeLoadVersion.bind(this)}" class="custom-select" id="versionSelector" disabled>
         <option disabled selected>Select new compiler version</option>
       </select>`
+    this._view.languageSelector = yo`
+      <select onchange="${this.onchangeLanguage.bind(this)}" class="custom-select" id="compilierLanguageSelector" title="Available since v0.5.7">
+        <option>Solidity</option>
+        <option>Yul</option>
+      </select>`
     this._view.version = yo`<span id="version"></span>`
 
     this._view.evmVersionSelector = yo`
@@ -166,10 +178,10 @@ class CompilerContainer {
       <section>
         <!-- Select Compiler Version -->
         <article>
-          <header class="navbar navbar-light bg-light">
+          <header class="navbar navbar-light p-2 bg-light">
             <div class="row w-100 no-gutters mb-2">
               <div class="col-sm-4">
-                <label class="input-group-text border-0" for="versionSelector">Compiler</label>
+                <label class="${css.compilerLabel} input-group-text pl-0 border-0" for="versionSelector">Compiler</label>
               </div>
               <div class="col-sm-8">
                 ${this._view.versionSelector}
@@ -177,18 +189,15 @@ class CompilerContainer {
             </div>
             <div class="row w-100 no-gutters mb-2">
               <div class="col-sm-4">
-                <label class="input-group-text border-0" for="languageSelector">Language</label>
+                <label class="${css.compilerLabel} input-group-text pl-0 border-0" for="compilierLanguageSelector">Language</label>
               </div>
               <div class="col-sm-8">
-              <select onchange="${this.onchangeLanguage.bind(this)}" class="custom-select" id="languageSelector">
-                <option>Solidity</option>
-                <option>Yul</option>
-              </select>
+                ${this._view.languageSelector}
               </div>
             </div>
             <div class="row w-100 no-gutters">
               <div class="col-sm-4">
-                <label class="input-group-text border-0" for="evmVersionSelector">EVM Version</label>
+                <label class="${css.compilerLabel} input-group-text pl-0 border-0" for="evmVersionSelector">EVM Version</label>
               </div>
               <div class="col-sm-8">
                 ${this._view.evmVersionSelector}
@@ -256,6 +265,7 @@ class CompilerContainer {
   onchangeLoadVersion (event) {
     this.data.selectedVersion = this._view.versionSelector.value
     this._updateVersionSelector()
+    this._updateLanguageSelector()
   }
 
   _updateVersionSelector () {
@@ -294,6 +304,16 @@ class CompilerContainer {
     }
   }
 
+  _updateLanguageSelector () {
+    if (semver.lt(this._retrieveVersion(), '0.5.7')) {
+      this._view.languageSelector.setAttribute('disabled', '')
+      this._view.languageSelector.value = 'Solidity'
+      this.compileTabLogic.setLanguage('Solidity')
+    } else {
+      this._view.languageSelector.removeAttribute('disabled')
+    }
+  }
+
   setVersionText (text) {
     this.data.version = text
     if (this._view.version) this._view.version.innerText = text

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

@@ -70,6 +70,9 @@ const css = csjs`
   .compilerSm {
     padding-left: 1.25rem;
   }
+  .compilerLabel {
+    direction: rtl;
+  }
   .name {
     display: flex;
   }

src/universal-dapp-ui.js

@@ -69,21 +69,36 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   var shortAddress = helper.shortenAddress(address)
   var title = yo`
     <div class="${css.title} alert alert-secondary p-2">
-      <button class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"><i class="fas fa-angle-right" aria-hidden="true"></i></button>
+      <button class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </button>
       <div class="input-group ${css.nameNbuts}">
-        <div class="${css.titleText} input-group-prepend"><span class="input-group-text ${css.spanTitleText}"> ${contractName} at ${shortAddress} (${context})</span></div>
+        <div class="${css.titleText} input-group-prepend">
+          <span class="input-group-text ${css.spanTitleText}">
+            ${contractName} at ${shortAddress} (${context})
+          </span>
+        </div>
         <div class="btn-group">
           <button class="btn p-1 btn-secondary">${copyToClipboard(() => address)}</button>
         </div>
       </div>
-  </div>`
+    </div>
+  `
 
-  var close = yo`<button class="${css.udappClose} p-1 btn btn-secondary" onclick=${remove} title="Remove from the list"><i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i></button>`
+  var close = yo`
+    <button
+      class="${css.udappClose} p-1 btn btn-secondary"
+      onclick=${remove}
+      title="Remove from the list"
+    >
+      <i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i>
+    </button>`
   title.querySelector('.btn-group').appendChild(close)
 
   var contractActionsWrapper = yo`
-  <div class="${css.cActionsWrapper}">
-  </div>`
+    <div class="${css.cActionsWrapper}">
+    </div>
+  `
 
   function remove () {
     instance.remove()