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 {
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"] {
......
assets/css/universal-dapp.css
View file @ 695dcf32
.udapp {
padding: .5em;
border: 1px dotted #4D5686;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
......
index.html
View file @ 695dcf32
......@@ -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>
src/app.js
View file @ 695dcf32
......@@ -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) {
......
src/app/analysis-tab.js
View file @ 695dcf32
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>
`
......
src/app/contract-tab.js
View file @ 695dcf32
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 class="${css.contractTabView}" id="envView">
<div class="${css.crow}">
<div id="selectExEnv" class="${css.col1_1}">
Execution environment
</div>
<span id="executionContext">
Select execution environment: <br><br>
<select id='selectExEnv'>
<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>
`
}
src/app/debugger-tab.js
View file @ 695dcf32
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>`
}
src/app/files-tab.js
View file @ 695dcf32
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>
`
}
src/app/renderer.js
View file @ 695dcf32
......@@ -17,7 +17,6 @@ var css = csjs`
.col1 extends ${styles.titleL} {
width: 30%;
float: left;
padding-top: 0.75em;
}
`
// ----------------------------------------------
......
src/app/settings-tab.js
View file @ 695dcf32
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`
<div id="settingsView">
<div class="version crow"><strong>Current Solidity version:</strong> <span id="version">( Loading... )</span></div>
<div class="crow">Switch version: <select id="versionSelector"></select></div>
<div class="crow">
<label for="editorWrap"><input id="editorWrap" type="checkbox">Text Wrap</label>
<label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label>
<label for="autoCompile"><input id="autoCompile" type="checkbox" checked>Auto Compile</label>
<button id="compile" title="Compile source code">Compile</button>
<div class="${css.settingsTabView} "id="settingsView">
<div class="${css.info}">
<div>Your current Solidity version is</div>
<div id="version"></div>
</div>
<div class="${css.crow}">
<select class="${css.select}" id="versionSelector"></select>
</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>
`
......
src/app/staticanalysis/staticAnalysisView.js
View file @ 695dcf32
......@@ -7,7 +7,6 @@ var csjs = require('csjs-inject')
var css = csjs`
.analysis {
margin-top: 2em;
font-height: 1.5em;
}
`
......
src/app/style-guide.js
View file @ 695dcf32
......@@ -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
-------------------------------------------------------------------------- */
/*
var buttons = csjs`
.button {
border-color: transparent;
margin-right: 1em;
border-radius: 3px;
cursor: pointer;
padding: .3em;
border-color : transparent;
border-radius : 3px;
cursor : pointer;
padding : .3em;
}
.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
......@@ -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`
<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