ninabreznik
8 years ago
parent
b3e68cd49a
commit
d61d9e106f
@ -0,0 +1,47 @@ |
||||
var yo = require('yo-yo') |
||||
|
||||
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'> |
||||
<option id="vm-mode" |
||||
title="Execution environment does not connect to any node, everything is local and in memory only." |
||||
value="vm" |
||||
checked name="executionContext"> |
||||
JavaScript VM |
||||
</option> |
||||
<option id="injected-mode" |
||||
title="Execution environment has been provided by Mist or similar provider." |
||||
value="injected" |
||||
checked name="executionContext"> |
||||
Injected Web3 |
||||
</option> |
||||
<option id="web3-mode" |
||||
title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse! |
||||
If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http." |
||||
value="web3" |
||||
name="executionContext"> |
||||
Web3 Provider |
||||
</option> |
||||
</select> |
||||
</span> |
||||
<div id="output"></div> |
||||
</div> |
||||
` |
||||
} |
||||
@ -0,0 +1,162 @@ |
||||
var csjs = require('csjs-inject') |
||||
|
||||
module.exports = styleGuide |
||||
|
||||
function styleGuide () { |
||||
/* -------------------------------------------------------------------------- |
||||
COLORS |
||||
-------------------------------------------------------------------------- */ |
||||
var blue = '#9DC1F5' |
||||
var lightBlue = '#F4F6FF' |
||||
var greyBlue = '#102026' |
||||
var grey = '#666' |
||||
var lightGrey = '#f8f8f8' |
||||
var red = '#FF8080' |
||||
var lightRed = '#FFB9B9' |
||||
var green = '#B1EAC5' |
||||
var violet = '#C6CFF7' |
||||
var pink = '#EC96EC' |
||||
var yellow = '#E6E5A7' |
||||
/* -------------------------------------------------------------------------- |
||||
FONTS |
||||
-------------------------------------------------------------------------- */ |
||||
var texts = csjs ` |
||||
.title-XL { |
||||
font-size : 2em; |
||||
font-weight : 500; |
||||
letter-spacing : .05em; |
||||
} |
||||
|
||||
.title-L { |
||||
font-size : .9em; |
||||
font-weight : 500; |
||||
} |
||||
|
||||
.title-M { |
||||
font-size : .8em; |
||||
font-weight : 400; |
||||
} |
||||
|
||||
.title-S { |
||||
font-size : .8em; |
||||
font-weight : 300; |
||||
} |
||||
|
||||
.text { |
||||
font-size : .8em; |
||||
} |
||||
` |
||||
/* -------------------------------------------------------------------------- |
||||
TEXT-BOXES |
||||
-------------------------------------------------------------------------- */ |
||||
var textBoxes = csjs` |
||||
.display-box-L { |
||||
font-size : 1em; |
||||
padding : 8px 15px; |
||||
line-height : 20px; |
||||
background : #f8f8f8; |
||||
border-radius : 3px; |
||||
border : 1px solid #e5e5e5; |
||||
overflow-x : auto; |
||||
width : 100%; |
||||
} |
||||
|
||||
.info-text-box { |
||||
background-color : white; |
||||
line-height : 20px; |
||||
border : .3em dotted #B1EAC5; |
||||
padding : 8px 15px; |
||||
border-radius : 3px; |
||||
margin-bottom : 1em; |
||||
} |
||||
|
||||
.warning-text-box { |
||||
background-color : #E6E5A7; // yellow
|
||||
line-height : 20px; |
||||
padding : 1em 1em .5em 1em; |
||||
border-radius : 3px; |
||||
box-shadow : rgba(0,0,0,.2) 0 1px 4px; |
||||
margin-bottom : 1em; |
||||
} |
||||
|
||||
.error-text-box { |
||||
background-color : #FFB9B9; // light-red
|
||||
line-height : 20px; |
||||
padding : 1em 1em .5em 1em; |
||||
border-radius : 3px; |
||||
box-shadow : rgba(0,0,0,.2) 0 1px 4px; |
||||
margin-bottom : 1em; |
||||
} |
||||
` |
||||
/* -------------------------------------------------------------------------- |
||||
BUTTONS |
||||
-------------------------------------------------------------------------- */ |
||||
/* |
||||
.button { |
||||
border-color: transparent; |
||||
margin-right: 1em; |
||||
border-radius: 3px; |
||||
cursor: pointer; |
||||
padding: .3em; |
||||
} |
||||
|
||||
.button:hover { |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
*/ |
||||
|
||||
/* -------------------------------------------------------------------------- |
||||
INPUT FIELDS |
||||
-------------------------------------------------------------------------- */ |
||||
/* |
||||
.input-field { |
||||
border : 1px solid #f0f0f0; // light-grey
|
||||
padding : .3em; |
||||
margin : .3em; |
||||
} |
||||
*/ |
||||
return { |
||||
textBoxL: textBoxes['display-box-L'], |
||||
titleL: texts['title-L'] |
||||
} |
||||
} |
||||
|
||||
/* |
||||
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">')) |
||||
|
||||
|
||||
*/ |
||||
Loading…
Reference in new issue