Applied basic unified styling on each tab component, using style-sheet

Pangssu · Apr 26, 2017 · 695dcf3 · 695dcf3
1 parent a9a2b7d
commit 695dcf3
Show file tree

Hide file tree

Showing 12 changed files with 216 additions and 125 deletions.
diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css
@@ -136,11 +136,6 @@ body {
     box-sizing: border-box;
 }
 
-#output {
-    display: block;
-    padding: 1em;
-}
-
 #header {
     font-size: 13px;
     height: 100%;
@@ -185,7 +180,6 @@ body {
 
 #header #optionViews > div {
     display: none;
-    padding: .5em .5em .5em;
 }
 
 #header #optionViews.txView #txView {
@@ -198,7 +192,6 @@ body {
 
 #header #optionViews.publishView #publishView {
     display: block;
-    padding: 3em;
 }
 
 #header #optionViews.envView #envView {
@@ -207,7 +200,6 @@ body {
 
 #header #optionViews.debugView #debugView {
     display: block;
-    padding: 3em;
 }
 
 #header #optionViews.verificationView #verificationView {
@@ -216,8 +208,6 @@ body {
 
 #header #optionViews.staticanalysisView #staticanalysisView {
     display: block;
-    padding: 3em;
-    line-height: 1.5em;
 }
 
 #header #optionViews.txView input,
@@ -303,25 +293,13 @@ body {
     display: block;
 }
 
-#header .origin,
-#header #executionContext {
+#header .origin {
     display: block;
     word-wrap: break-word;
     padding: 1.5em;
     font-weight: bold;
 }
 
-#selectExEnv {
-    margin-left: 0.5em;
-    text-decoration: none;
-    background-color: #C6CFF7;
-    cursor: pointer;
-    font-size: 12px;
-    color: black;
-    border-radius: 3px;
-    border: 0 none;
-}
-
 #header #versionSelector {
     text-decoration: none;
     background-color: #C6CFF7;
@@ -406,7 +384,7 @@ body {
     word-wrap: break-word;
     cursor: pointer;
     position: relative;
-    margin: 0.5em;
+    margin: 0.5em 0;
     border-radius: 0.6em;
     padding: 1em 1.5em;
 }
@@ -471,6 +449,8 @@ body {
 input[readonly] {
     display: block;
     width: 100%;
+    height: 7px;
+    padding: .8em;
 }
 
 input[type="file"] {

diff --git a/assets/css/universal-dapp.css b/assets/css/universal-dapp.css
@@ -1,6 +1,4 @@
 .udapp {
-	padding: .5em;
-	border: 1px dotted #4D5686;
 	position: relative;
 	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 	box-sizing: border-box;

diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
 	<head>
 		<meta charset="utf-8">
 		<!--
-
 		The MIT License (MIT)
 
 		Copyright (c) 2014, 2015, the individual contributors
@@ -26,7 +25,6 @@
 		LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 		OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 		THE SOFTWARE.
-
 		-->
 		<meta http-equiv="X-UA-Compatible" content="chrome=1">
 		<title>Remix</title>
@@ -74,5 +72,6 @@
 		</div>
 
 		<script src="build/app.js"></script>
+
 	</body>
 </html>
diff --git a/src/app.js b/src/app.js
@@ -900,7 +900,7 @@ var run = function () {
   })
 
   compiler.event.register('loadingCompiler', this, function (url, usingWorker) {
-    setVersionText(usingWorker ? '(loading using worker)' : '( Loading... Please, wait a moment. )')
+    setVersionText(usingWorker ? '(loading using worker)' : ' Loading... please, wait a moment! ')
   })
 
   compiler.event.register('compilerLoaded', this, function (version) {

diff --git a/src/app/analysis-tab.js b/src/app/analysis-tab.js
@@ -1,11 +1,29 @@
 var yo = require('yo-yo')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .analysisTabView {
+    padding: 2%;
+  }
+  .infoBox extends ${styles.infoTextBox} {
+    margin-bottom: 1em;
+  }
+  .textBox extends ${styles.textBoxL} {
+    margin-bottom: 1em;
+  }
+`
+
 module.exports = analysisTab
 
 function analysisTab () {
   return yo`
-    <div id="staticanalysisView">
-      <p> This tab provides support for <b>formal verification</b> of Solidity contracts.<br>
+    <div class="${css.analysisTabView} "id="staticanalysisView">
+      <div class="${css.infoBox}">
+        This tab provides support for <b>formal verification</b> of Solidity contracts.<br>
         This feature is still in development and thus also not yet well documented,
         but you can find some information
         <a href="http://solidity.readthedocs.io/en/latest/security-considerations.html#formal-verification">here</a>.
@@ -14,8 +32,8 @@ function analysisTab () {
         <a href="http://why3.lri.fr/try/">http://why3.lri.fr/try/</a>
         to actually perform the verification.
         We plan to support direct integration in the future.
-      </p>
-      <textarea id="formalVerificationInput" readonly="readonly"></textarea>
+      </div>
+      <textarea class="${css.textBox}" id="formalVerificationInput" readonly="readonly"></textarea>
       <div id="formalVerificationErrors"></div>
     </div>
   `

diff --git a/src/app/contract-tab.js b/src/app/contract-tab.js
@@ -1,25 +1,54 @@
 var yo = require('yo-yo')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .contractTabView {
+    padding: 2%;
+  }
+  .crow {
+    margin-top: 1em;
+    display: flex;
+  }
+  .col1 extends ${styles.titleL} {
+    width: 30%;
+    float: left;
+    align-self: center;
+  }
+  .col1_1 extends ${styles.titleM} {
+    width: 30%;
+    float: left;
+    align-self: center;
+  }
+  .col2 extends ${styles.textBoxL}{
+    width: 70%;
+    height: 7px;
+    float: left;
+    padding: .8em;
+  }
+  .select extends ${styles.dropdown} {
+    width: 70%;
+    float: left;
+  }
+  .contract {
+    display: block;
+    margin: 5em 0 2em 0;
+  }
+`
+
 module.exports = contractTab
 
 function contractTab () {
   return yo`
-    <div id="envView">
-      <div class="crow">
-        <label for="txorigin">Transaction origin:<select name="txorigin" id="txorigin"></select></label>
-      </div>
-      <div class="crow">
-        <label for="gasLimit"><input type="number" id="gasLimit" value="3000000"> Transaction gas limit</label>
-      </div>
-      <div class="crow hide">
-        <label for="gasPrice"><input type="number" id="gasPrice" value="0"> Gas Price</label>
-      </div>
-      <div class="crow">
-        <label for="value"><input type="text" id="value" value="0"> Value (e.g. .7 ether or 5 wei, defaults to ether)</label>
-      </div>
-      <span id="executionContext">
-        Select execution environment: <br><br>
-        <select id='selectExEnv'>
+    <div class="${css.contractTabView}" id="envView">
+      <div class="${css.crow}">
+        <div id="selectExEnv" class="${css.col1_1}">
+          Execution environment
+        </div>
+        <select class="${css.select}">
           <option id="vm-mode"
             title="Execution environment does not connect to any node, everything is local and in memory only."
             value="vm"
@@ -40,8 +69,24 @@ function contractTab () {
             Web3 Provider
           </option>
         </select>
-      </span>
-      <div id="output"></div>
+      </div>
+      <div class="${css.crow}">
+        <div class="${css.col1_1}">Transaction origin</div>
+        <select name="txorigin" class="${css.select}" id="txorigin"></select>
+      </div>
+      <div class="${css.crow}">
+        <div class="${css.col1_1}">Transaction gas limit</div>
+        <input type="number" class="${css.col2}" id="gasLimit" value="3000000">
+      </div>
+      <div class="${css.crow} hide">
+      <div class="${css.col1_1}">Gas Price</div>
+        <input type="number" class="${css.col2}" id="gasPrice" value="0">
+      </div>
+      <div class="${css.crow}">
+        <div class="${css.col1_1}"> Value</div>
+        <input type="text" class="${css.col2}" id="value" value="0" title="(e.g. .7 ether ...)">
+      </div>
+      <div id="output" class="${css.contract}"></div>
     </div>
   `
 }
diff --git a/src/app/debugger-tab.js b/src/app/debugger-tab.js
@@ -1,7 +1,18 @@
 var yo = require('yo-yo')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .debuggerTabView {
+    padding: 2%;
+  }
+`
+
 module.exports = debuggerTab
 
 function debuggerTab () {
-  return yo` <div id="debugView"><div id="debugger"></div></div>`
+  return yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
 }
diff --git a/src/app/files-tab.js b/src/app/files-tab.js
@@ -1,25 +1,45 @@
 var yo = require('yo-yo')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .filesTabView {
+    padding: 2%;
+  }
+  .crow {
+    margin-top: 1em;
+    display: flex;
+  }
+  .infoBox extends ${styles.infoTextBox} {
+    margin-top: 2em;
+  }
+`
+
 module.exports = filesTab
 
 function filesTab () {
   return yo`
-    <div id="publishView">
-      <p>
+    <div class="${css.filesTabView}" id="publishView">
+      <div class="${css.crow}">
         <button id="gist" title="Publish all files as public gist on github.com">
           <i class="fa fa-github"></i>
           Publish Gist
         </button>
         Publish all open files to an anonymous github gist.<br>
+      </div>
+      <div class="${css.crow}">
         <button id="copyOver" title="Copy all files to another instance of browser-solidity.">
           Copy files
         </button>
         Copy all files to another instance of Browser-solidity.
-      </p>
-      <p>You can also load a gist by adding the following
+      </div>
+      <div class="${css.infoBox}">You can also load a gist by adding the following
         <span class="pre">#gist=GIST_ID</span>
         to your url, where GIST_ID is the id of the gist to load.
-      </p>
+      </div>
     </div>
   `
 }
diff --git a/src/app/renderer.js b/src/app/renderer.js
@@ -17,7 +17,6 @@ var css = csjs`
   .col1 extends ${styles.titleL} {
       width: 30%;
       float: left;
-      padding-top: 0.75em;
   }
 `
 // ----------------------------------------------