From 695dcf323a6a379574120958fbb6587b6a605f3d Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Thu, 27 Apr 2017 06:13:41 +0700 Subject: [PATCH] Applied basic unified styling on each tab component, using style-sheet --- assets/css/browser-solidity.css | 28 +----- assets/css/universal-dapp.css | 2 - index.html | 3 +- src/app.js | 2 +- src/app/analysis-tab.js | 26 +++++- src/app/contract-tab.js | 81 ++++++++++++++---- src/app/debugger-tab.js | 13 ++- src/app/files-tab.js | 30 +++++-- src/app/renderer.js | 1 - src/app/settings-tab.js | 65 ++++++++++++-- src/app/staticanalysis/staticAnalysisView.js | 1 - src/app/style-guide.js | 89 +++++++------------- 12 files changed, 216 insertions(+), 125 deletions(-) diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css index 1a794f19423..2b306664b4b 100644 --- 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 index 9a2bbb9c858..ac3d51a367f 100644 --- 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 index 49bd55fa28e..db7c8d43d90 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,6 @@ Remix @@ -74,5 +72,6 @@ + diff --git a/src/app.js b/src/app.js index 70c8d1ff098..40e2b4a0d9d 100644 --- 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 index 6588657b019..60907e96416 100644 --- 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` -
-

This tab provides support for formal verification of Solidity contracts.
+

+
+ This tab provides support for formal verification of Solidity contracts.
This feature is still in development and thus also not yet well documented, but you can find some information here. @@ -14,8 +32,8 @@ function analysisTab () { http://why3.lri.fr/try/ to actually perform the verification. We plan to support direct integration in the future. -

- +
+
` diff --git a/src/app/contract-tab.js b/src/app/contract-tab.js index b41a05f53aa..e5b7e3b7a62 100644 --- 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` -
-
- -
-
- -
-
- -
-
- -
- - Select execution environment:

- -
+
+
+
Transaction origin
+ +
+
+
Transaction gas limit
+ +
+
+
Gas Price
+ +
+
+
Value
+ +
+
` } diff --git a/src/app/debugger-tab.js b/src/app/debugger-tab.js index 3bba2229bb7..55dbd0629b6 100644 --- 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`
` + return yo`
` } diff --git a/src/app/files-tab.js b/src/app/files-tab.js index 2920c8f78f5..c26c687945d 100644 --- 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` -
-

+

+
Publish all open files to an anonymous github gist.
+
+
Copy all files to another instance of Browser-solidity. -

-

You can also load a gist by adding the following +

+
You can also load a gist by adding the following #gist=GIST_ID to your url, where GIST_ID is the id of the gist to load. -

+
` } diff --git a/src/app/renderer.js b/src/app/renderer.js index 68b3698c01a..8e399d9c02b 100644 --- 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; } ` // ---------------------------------------------- diff --git a/src/app/settings-tab.js b/src/app/settings-tab.js index 3b24381e9eb..0806623b6b5 100644 --- a/src/app/settings-tab.js +++ b/src/app/settings-tab.js @@ -1,17 +1,66 @@ var yo = require('yo-yo') +// -------------- styling ---------------------- +var csjs = require('csjs-inject') +var styleGuide = require('./style-guide') +var styles = styleGuide() + +var css = csjs` + .settingsTabView { + padding: 2%; + display: flex; + } + .info extends ${styles.infoTextBox} { + margin-bottom: 2em; + } + .crow { + margin-top: 1em; + display: flex; + } + .select extends ${styles.dropdown} { + width: 50%; + float: left; + } + .button extends ${styles.button} { + background-color: #C6CFF7; + width: 100%; + align-self: center; + text-align: -webkit-center; + } + .col1 extends ${styles.titleL} { + width: 30%; + float: left; + align-self: center; + } +} +` module.exports = settingsTab function settingsTab () { return yo` -
-
Current Solidity version: ( Loading... )
-
Switch version:
-
- - - - +
+
+
Your current Solidity version is
+
+
+
+ +
+
+ Text Wrap + +
+
+ Enable Optimization + +
+
+ Auto Compile + +
+
+
+
Compile
` diff --git a/src/app/staticanalysis/staticAnalysisView.js b/src/app/staticanalysis/staticAnalysisView.js index ff163d40e79..f4bd59f5abe 100644 --- a/src/app/staticanalysis/staticAnalysisView.js +++ b/src/app/staticanalysis/staticAnalysisView.js @@ -7,7 +7,6 @@ var csjs = require('csjs-inject') var css = csjs` .analysis { - margin-top: 2em; font-height: 1.5em; } ` diff --git a/src/app/style-guide.js b/src/app/style-guide.js index 364ce2b6313..9bf64214992 100644 --- a/src/app/style-guide.js +++ b/src/app/style-guide.js @@ -23,17 +23,17 @@ function styleGuide () { var texts = csjs ` .title-XL { font-size : 2em; - font-weight : 500; + font-weight : 700; letter-spacing : .05em; } .title-L { - font-size : .9em; - font-weight : 500; + font-size : 1em; + font-weight : 600; } .title-M { - font-size : .8em; + font-size : 1em; font-weight : 400; } @@ -64,9 +64,9 @@ function styleGuide () { .info-text-box { background-color : white; line-height : 20px; - border : .3em dotted #B1EAC5; + border : .2em dotted lightGrey; padding : 8px 15px; - border-radius : 3px; + border-radius : 5px; margin-bottom : 1em; } @@ -91,20 +91,28 @@ function styleGuide () { /* -------------------------------------------------------------------------- BUTTONS -------------------------------------------------------------------------- */ - /* - .button { - border-color: transparent; - margin-right: 1em; - border-radius: 3px; - cursor: pointer; - padding: .3em; - } + var buttons = csjs` + .button { + border-color : transparent; + border-radius : 3px; + cursor : pointer; + padding : .3em; + } - .button:hover { - opacity: 0.8; - } + .button:hover { + opacity : 0.8; + } - */ + .dropdown-menu { + font-size : 1em; + text-decoration : none; + background-color : #C6CFF7; + cursor : pointer; + font-size : 12px; + border : none; + } + + ` /* -------------------------------------------------------------------------- INPUT FIELDS @@ -118,45 +126,10 @@ function styleGuide () { */ return { textBoxL: textBoxes['display-box-L'], - titleL: texts['title-L'] + infoTextBox: textBoxes['info-text-box'], + titleL: texts['title-L'], + titleM: texts['title-M'], + dropdown: buttons['dropdown-menu'], + button: buttons['button'] } } - -/* -HOW TO USE IT -var csjs = require('csjs-inject') -var styleGuide = require('./app/style-guide') -var styles = styleGuide() - -var css = csjs` - .foobar extends ${styles.fontXL} { - color: red; - } -` -var el = yo` -
alasdalsd
-` -*/ - -/* -var text = 'foobar' - -var example1 = 'hello ' + text + ' "world"' -var example2 = "hello " + text + " \"world\"" -var example3 = `hello ${text} "world"` - -// hello foobar "world" - -
-
- -`
` -//
- -'
' -//
- -append($('
')) - - -*/