Skip to content

B
baas-ide
Commit 695dcf32 authored by ninabreznik's avatar ninabreznik
Browse files
Options

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

parent a9a2b7d3
Show whitespace changes
Inline Side-by-side
Showing with 211 additions and 120 deletions
assets/css/browser-solidity.css
View file @ 695dcf32
...@@ -136,11 +136,6 @@ body { ...@@ -136,11 +136,6 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
#output {
display: block;
padding: 1em;
}
#header { #header {
font-size: 13px; font-size: 13px;
height: 100%; height: 100%;
...@@ -185,7 +180,6 @@ body { ...@@ -185,7 +180,6 @@ body {
#header #optionViews > div { #header #optionViews > div {
display: none; display: none;
padding: .5em .5em .5em;
} }
#header #optionViews.txView #txView { #header #optionViews.txView #txView {
...@@ -198,7 +192,6 @@ body { ...@@ -198,7 +192,6 @@ body {
#header #optionViews.publishView #publishView { #header #optionViews.publishView #publishView {
display: block; display: block;
padding: 3em;
} }
#header #optionViews.envView #envView { #header #optionViews.envView #envView {
...@@ -207,7 +200,6 @@ body { ...@@ -207,7 +200,6 @@ body {
#header #optionViews.debugView #debugView { #header #optionViews.debugView #debugView {
display: block; display: block;
padding: 3em;
} }
#header #optionViews.verificationView #verificationView { #header #optionViews.verificationView #verificationView {
...@@ -216,8 +208,6 @@ body { ...@@ -216,8 +208,6 @@ body {
#header #optionViews.staticanalysisView #staticanalysisView { #header #optionViews.staticanalysisView #staticanalysisView {
display: block; display: block;
padding: 3em;
line-height: 1.5em;
} }
#header #optionViews.txView input, #header #optionViews.txView input,
...@@ -303,25 +293,13 @@ body { ...@@ -303,25 +293,13 @@ body {
display: block; display: block;
} }
#header .origin, #header .origin {
#header #executionContext {
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
padding: 1.5em; padding: 1.5em;
font-weight: bold; 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 { #header #versionSelector {
text-decoration: none; text-decoration: none;
background-color: #C6CFF7; background-color: #C6CFF7;
...@@ -406,7 +384,7 @@ body { ...@@ -406,7 +384,7 @@ body {
word-wrap: break-word; word-wrap: break-word;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
margin: 0.5em; margin: 0.5em 0;
border-radius: 0.6em; border-radius: 0.6em;
padding: 1em 1.5em; padding: 1em 1.5em;
} }
...@@ -471,6 +449,8 @@ body { ...@@ -471,6 +449,8 @@ body {
input[readonly] { input[readonly] {
display: block; display: block;
width: 100%; width: 100%;
height: 7px;
padding: .8em;
} }
input[type="file"] { input[type="file"] {
......
assets/css/universal-dapp.css
View file @ 695dcf32
.udapp { .udapp {
padding: .5em;
border: 1px dotted #4D5686;
position: relative; position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-sizing: border-box; box-sizing: border-box;
......
index.html
View file @ 695dcf32
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<!-- <!--
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2014, 2015, the individual contributors Copyright (c) 2014, 2015, the individual contributors
...@@ -26,7 +25,6 @@ ...@@ -26,7 +25,6 @@
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 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 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. THE SOFTWARE.
--> -->
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Remix</title> <title>Remix</title>
...@@ -74,5 +72,6 @@ ...@@ -74,5 +72,6 @@
</div> </div>
<script src="build/app.js"></script> <script src="build/app.js"></script>
</body> </body>
</html> </html>
src/app.js
View file @ 695dcf32
...@@ -900,7 +900,7 @@ var run = function () { ...@@ -900,7 +900,7 @@ var run = function () {
}) })
compiler.event.register('loadingCompiler', this, function (url, usingWorker) { 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) { compiler.event.register('compilerLoaded', this, function (version) {
......
src/app/analysis-tab.js
View file @ 695dcf32
var yo = require('yo-yo') 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 module.exports = analysisTab
function analysisTab () { function analysisTab () {
return yo` return yo`
<div id="staticanalysisView"> <div class="${css.analysisTabView} "id="staticanalysisView">
<p> This tab provides support for <b>formal verification</b> of Solidity contracts.<br> <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, This feature is still in development and thus also not yet well documented,
but you can find some information but you can find some information
<a href="http://solidity.readthedocs.io/en/latest/security-considerations.html#formal-verification">here</a>. <a href="http://solidity.readthedocs.io/en/latest/security-considerations.html#formal-verification">here</a>.
...@@ -14,8 +32,8 @@ function analysisTab () { ...@@ -14,8 +32,8 @@ function analysisTab () {
<a href="http://why3.lri.fr/try/">http://why3.lri.fr/try/</a> <a href="http://why3.lri.fr/try/">http://why3.lri.fr/try/</a>
to actually perform the verification. to actually perform the verification.
We plan to support direct integration in the future. We plan to support direct integration in the future.
</p> </div>
<textarea id="formalVerificationInput" readonly="readonly"></textarea> <textarea class="${css.textBox}" id="formalVerificationInput" readonly="readonly"></textarea>
<div id="formalVerificationErrors"></div> <div id="formalVerificationErrors"></div>
</div> </div>
` `
......
src/app/contract-tab.js
View file @ 695dcf32
var yo = require('yo-yo') 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 module.exports = contractTab
function contractTab () { function contractTab () {
return yo` return yo`
<div id="envView"> <div class="${css.contractTabView}" id="envView">
<div class="crow"> <div class="${css.crow}">
<label for="txorigin">Transaction origin:<select name="txorigin" id="txorigin"></select></label> <div id="selectExEnv" class="${css.col1_1}">
</div> Execution environment
<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> </div>
<span id="executionContext"> <select class="${css.select}">
Select execution environment: <br><br>
<select id='selectExEnv'>
<option id="vm-mode" <option id="vm-mode"
title="Execution environment does not connect to any node, everything is local and in memory only." title="Execution environment does not connect to any node, everything is local and in memory only."
value="vm" value="vm"
...@@ -40,8 +69,24 @@ function contractTab () { ...@@ -40,8 +69,24 @@ function contractTab () {
Web3 Provider Web3 Provider
</option> </option>
</select> </select>
</span> </div>
<div id="output"></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> </div>
` `
} }
src/app/debugger-tab.js
View file @ 695dcf32
var yo = require('yo-yo') 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 module.exports = debuggerTab
function 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>`
} }
src/app/files-tab.js
View file @ 695dcf32
var yo = require('yo-yo') 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 module.exports = filesTab
function filesTab () { function filesTab () {
return yo` return yo`
<div id="publishView"> <div class="${css.filesTabView}" id="publishView">
<p> <div class="${css.crow}">
<button id="gist" title="Publish all files as public gist on github.com"> <button id="gist" title="Publish all files as public gist on github.com">
<i class="fa fa-github"></i> <i class="fa fa-github"></i>
Publish Gist Publish Gist
</button> </button>
Publish all open files to an anonymous github gist.<br> 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."> <button id="copyOver" title="Copy all files to another instance of browser-solidity.">
Copy files Copy files
</button> </button>
Copy all files to another instance of Browser-solidity. Copy all files to another instance of Browser-solidity.
</p> </div>
<p>You can also load a gist by adding the following <div class="${css.infoBox}">You can also load a gist by adding the following
<span class="pre">#gist=GIST_ID</span> <span class="pre">#gist=GIST_ID</span>
to your url, where GIST_ID is the id of the gist to load. to your url, where GIST_ID is the id of the gist to load.
</p> </div>
</div> </div>
` `
} }
src/app/renderer.js
View file @ 695dcf32
...@@ -17,7 +17,6 @@ var css = csjs` ...@@ -17,7 +17,6 @@ var css = csjs`
.col1 extends ${styles.titleL} { .col1 extends ${styles.titleL} {
width: 30%; width: 30%;
float: left; float: left;
padding-top: 0.75em;
} }
` `
// ---------------------------------------------- // ----------------------------------------------
......
src/app/settings-tab.js
View file @ 695dcf32
var yo = require('yo-yo') 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 module.exports = settingsTab
function settingsTab () { function settingsTab () {
return yo` return yo`
<div id="settingsView"> <div class="${css.settingsTabView} "id="settingsView">
<div class="version crow"><strong>Current Solidity version:</strong> <span id="version">( Loading... )</span></div> <div class="${css.info}">
<div class="crow">Switch version: <select id="versionSelector"></select></div> <div>Your current Solidity version is</div>
<div class="crow"> <div id="version"></div>
<label for="editorWrap"><input id="editorWrap" type="checkbox">Text Wrap</label> </div>
<label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label> <div class="${css.crow}">
<label for="autoCompile"><input id="autoCompile" type="checkbox" checked>Auto Compile</label> <select class="${css.select}" id="versionSelector"></select>
<button id="compile" title="Compile source code">Compile</button> </div>
<div class="${css.crow}">
Text Wrap
<input class="${css.col1}" id="editorWrap" type="checkbox">
</div>
<div class="${css.crow}">
Enable Optimization
<input id="optimize" type="checkbox">
</div>
<div class="${css.crow}">
Auto Compile
<input id="autoCompile" type="checkbox" checked>
</div>
</div>
<div class="${css.crow}">
<div class="${css.button} "id="compile" title="Compile source code">Compile</div>
</div> </div>
</div> </div>
` `
......
src/app/staticanalysis/staticAnalysisView.js
View file @ 695dcf32
...@@ -7,7 +7,6 @@ var csjs = require('csjs-inject') ...@@ -7,7 +7,6 @@ var csjs = require('csjs-inject')
var css = csjs` var css = csjs`
.analysis { .analysis {
margin-top: 2em;
font-height: 1.5em; font-height: 1.5em;
} }
` `
......
src/app/style-guide.js
View file @ 695dcf32
...@@ -23,17 +23,17 @@ function styleGuide () { ...@@ -23,17 +23,17 @@ function styleGuide () {
var texts = csjs ` var texts = csjs `
.title-XL { .title-XL {
font-size : 2em; font-size : 2em;
font-weight : 500; font-weight : 700;
letter-spacing : .05em; letter-spacing : .05em;
} }
.title-L { .title-L {
font-size : .9em; font-size : 1em;
font-weight : 500; font-weight : 600;
} }
.title-M { .title-M {
font-size : .8em; font-size : 1em;
font-weight : 400; font-weight : 400;
} }
...@@ -64,9 +64,9 @@ function styleGuide () { ...@@ -64,9 +64,9 @@ function styleGuide () {
.info-text-box { .info-text-box {
background-color : white; background-color : white;
line-height : 20px; line-height : 20px;
border : .3em dotted #B1EAC5; border : .2em dotted lightGrey;
padding : 8px 15px; padding : 8px 15px;
border-radius : 3px; border-radius : 5px;
margin-bottom : 1em; margin-bottom : 1em;
} }
...@@ -91,20 +91,28 @@ function styleGuide () { ...@@ -91,20 +91,28 @@ function styleGuide () {
/* -------------------------------------------------------------------------- /* --------------------------------------------------------------------------
BUTTONS BUTTONS
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
/* var buttons = csjs`
.button { .button {
border-color: transparent; border-color : transparent;
margin-right: 1em; border-radius : 3px;
border-radius: 3px; cursor : pointer;
cursor: pointer; padding : .3em;
padding: .3em;
} }
.button:hover { .button:hover {
opacity: 0.8; opacity : 0.8;
} }
*/ .dropdown-menu {
font-size : 1em;
text-decoration : none;
background-color : #C6CFF7;
cursor : pointer;
font-size : 12px;
border : none;
}
`
/* -------------------------------------------------------------------------- /* --------------------------------------------------------------------------
INPUT FIELDS INPUT FIELDS
...@@ -118,45 +126,10 @@ function styleGuide () { ...@@ -118,45 +126,10 @@ function styleGuide () {
*/ */
return { return {
textBoxL: textBoxes['display-box-L'], 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`
<div class=${css.foobar}> alasdalsd </div>
`
*/
/*
var text = 'foobar'
var example1 = 'hello ' + text + ' "world"'
var example2 = "hello " + text + " \"world\""
var example3 = `hello ${text} "world"`
// hello foobar "world"
<div class='title foo'></div>
<div class="${css.title} ${css.foo}"></div>
`<div class="${css.col2} ${styles.textBoxL} ${5+5}">`
// <div class="col2_s3ad textBoxL_13 10">
'<div class="${css.col2} ${styles.textBoxL} ${5+5}">'
// <div class="${css.col2} ${styles.textBoxL} ${5+5}">
append($('<div class="col2_wefwq textBoxL_efwq">'))
*/
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment