Merge pull request #1482 from ethereum/compileTabUI

Compile tab ui

src/app/tabs/compile-tab.js

@@ -195,14 +195,6 @@ module.exports = class CompileTab {
     if (self.data.allversions && self.data.selectedVersion) self._updateVersionSelector()
     self._view.version = yo`<span id="version"></span>`
 
-    self._view.config.solidity = yo`
-      <div class="${css.info}">
-        <span>Current version:</span> ${self._view.version}
-        <div class="${css.crow}">
-          ${self._view.versionSelector}
-        </div>
-      </div>`
-
     self._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>`
     self._view.compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>`
     self._view.compileButton = yo`<div class="${css.compileButton}" onclick=${compile} id="compile" title="Compile source code">${self._view.compileIcon} Start to compile</div>`
@@ -212,21 +204,27 @@ module.exports = class CompileTab {
     if (self.data.hideWarnings) self._view.hideWarningsBox.setAttribute('checked', '')
     self._view.compileContainer = yo`
       <div class="${css.compileContainer}">
-      ${self._view.config.solidity}
-        <div class="${css.compileButtons}">
-          ${self._view.compileButton}
-          ${self._view.warnCompilationSlow}
-          <div class="${css.autocompileContainer}">
-            ${self._view.autoCompile}
-            <span class="${css.autocompileText}">Auto compile</span>
-          </div>
+        <div class="${css.info}">
+          <span>Current version:</span> ${self._view.version}
           <div class="${css.crow}">
-            <div>${self._view.optimize}</div>
-            <span class="${css.checkboxText}">Enable Optimization</span>
+            ${self._view.versionSelector}
           </div>
-          <div class=${css.hideWarningsContainer}>
-            ${self._view.hideWarningsBox}
-            <span class="${css.autocompileText}">Hide warnings</span>
+          <div class="${css.compileButtons}">
+            <div class=${css.checkboxes}>
+              <div class="${css.autocompileContainer}">
+                ${self._view.autoCompile}
+                <span class="${css.autocompileText}">Auto compile</span>
+              </div>
+              <div class="${css.optimizeContainer}">
+                <div>${self._view.optimize}</div>
+                <span class="${css.checkboxText}">Enable Optimization</span>
+              </div>
+              <div class=${css.hideWarningsContainer}>
+                ${self._view.hideWarningsBox}
+                <span class="${css.autocompileText}">Hide warnings</span>
+              </div>
+            </div>
+            ${self._view.compileButton}
           </div>
         </div>
       </div>`
@@ -237,10 +235,12 @@ module.exports = class CompileTab {
       <div class="${css.container}">
         <div class="${css.contractContainer}">
           ${self._view.contractNames}
+          <div title="Publish on Swarm" class="${css.publish}" onclick=${publish}>
+            <i class="${css.copyIcon} fa fa-upload" aria-hidden="true"></i><span>Swarm</span>
+          </div>
         </div>
         <div class="${css.contractHelperButtons}">
           <div title="Display Contract Details" class="${css.details}" onclick=${details}>Details</div>
-          <div title="Publish on Swarm" class="${css.publish}" onclick=${publish}>Publish on Swarm</div>
           <div title="Copy ABI to clipboard" class="${css.copyButton}" onclick=${copyABI}>
             <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i> ABI
           </div>
@@ -462,7 +462,7 @@ const css = csjs`
   }
   .select {
     font-weight: bold;
-    margin-top: 1em;
+    margin: 10px 0px;
     ${styles.rightPanel.settingsTab.dropdown_SelectCompiler};
   }
   .info {
@@ -509,6 +509,7 @@ const css = csjs`
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+    justify-content: flex-end;
   }
   .name {
     display: flex;
@@ -516,11 +517,16 @@ const css = csjs`
   .size {
     display: flex;
   }
+  .checkboxes {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
   .compileButton {
     ${styles.rightPanel.compileTab.button_Compile};
-    width: 120px;
-    min-width: 110px;
-    margin-right: 1%;
+    width: 100%;
+    margin: 15px 0 10px 0;
     font-size: 12px;
   }
   .container {
@@ -533,13 +539,19 @@ const css = csjs`
     align-items: center;
     margin-bottom: 2%;
   }
+  .optimizeContainer {
+    display: flex;
+  }
   .contractNames {
     ${styles.rightPanel.compileTab.dropdown_CompileContract};
+    width:78%;
   }
   .contractHelperButtons {
     display: flex;
     cursor: pointer;
     text-align: center;
+    justify-content: flex-end;
+    margin: 15px 15px 10px 0;
   }
   .copyButton {
     ${styles.rightPanel.compileTab.button_Details};
@@ -547,6 +559,8 @@ const css = csjs`
     min-width: 50px;
     width: auto;
     margin-left: 5px;
+    background-color: inherit;
+    border: inherit;
   }
   .bytecodeButton {
     min-width: 80px;
@@ -556,12 +570,14 @@ const css = csjs`
   }
   .details {
     ${styles.rightPanel.compileTab.button_Details};
+    min-width: 70px;
+    width: 80px;
   }
   .publish {
-    ${styles.rightPanel.compileTab.button_Publish};
-    margin-left: 5px;
-    margin-right: 5px;
-    width: 120px;
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+    cursor: pointer;
   }
   .log {
     ${styles.rightPanel.compileTab.box_CompileContainer};