forked from ethereum/remix-ide
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create style-guide.js and test with udapp output (contract tab)
- Loading branch information
1 parent
b3e68cd
commit d61d9e1
Showing
5 changed files
with
236 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ` | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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">')) | ||
| */ |