mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #686 from ethereum/buttons

Browse Source 
Buttons
pull/1/head
yann300 8 years ago committed by GitHub
parent 3460f05c2d 070983f788
commit 84b08dfb38
17 changed files with 191 additions and 214 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 65
      assets/css/browser-solidity.css
  2. 5
      assets/css/styles.css
  3. 30
      assets/css/universal-dapp.css
  4. 5
      src/app.js
  5. 9
      src/app/files/file-explorer.js
  6. 16
      src/app/panels/editor-panel.js
  7. 21
      src/app/panels/file-panel.js
  8. 2
      src/app/panels/righthand-panel.js
  9. 21
      src/app/staticanalysis/staticAnalysisView.js
  10. 2
      src/app/tabs/analysis-tab.js
  11. 35
      src/app/tabs/compile-tab.js
  12. 51
      src/app/tabs/run-tab.js
  13. 2
      src/app/tabs/settings-tab.js
  14. 15
      src/app/tabs/support-tab.js
  15. 20
      src/app/ui/modaldialog.js
  16. 76
      src/style-guide.js
  17. 12
      src/universal-dapp.js

65
assets/css/browser-solidity.css
Unescape View File

@ -1,14 +1,14 @@
#files .file { #files .file {
padding: 0 0.6em; padding: 0 0.6em;
box-sizing: border-box; box-sizing: border-box;
background-color: #F4F6FF; background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
cursor: pointer; cursor: pointer;
border-right: 0.5em solid white; border-right: 0.5em solid white;
position: relative; position: relative;
display: table-cell; display: table-cell;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
color: #999; color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
} }
#files .file.active { #files .file.active {
@ -24,7 +24,7 @@
height: 1.25em; height: 1.25em;
width: 1.25em; width: 1.25em;
line-height: 1em; line-height: 1em;
color: #FF8080; color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
display: none; display: none;
margin: 0.4em; margin: 0.4em;
text-align: center; text-align: center;
@ -51,7 +51,6 @@
} }
#righthand-panel { #righthand-panel {
font-size: 13px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -65,7 +64,7 @@
} }
#righthand-panel #menu { #righthand-panel #menu {
border-bottom: 3px solid #F4F6FF; border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/
height: 2em; height: 2em;
font-size: 1em; font-size: 1em;
padding-top: 0.5em; padding-top: 0.5em;
@ -82,7 +81,7 @@
} }
#righthand-panel #options li.active { #righthand-panel #options li.active {
background-color: #F4F6FF; background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
} }
#righthand-panel #options li a { #righthand-panel #options li a {
@ -90,7 +89,7 @@
} }
#righthand-panel #optionViews { #righthand-panel #optionViews {
background-color: #F4F6FF; background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
overflow: scroll; overflow: scroll;
height: 100%; height: 100%;
} }
@ -140,14 +139,13 @@
max-width: 13em; max-width: 13em;
padding: 0.3em; padding: 0.3em;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid hsl(0, 0%, 0%); /* black in style-guide.js */
border-radius: 3px; border-radius: 3px;
} }
#righthand-panel #optionViews .pre { #righthand-panel #optionViews .pre {
word-wrap: break-word; word-wrap: break-word;
background-color: rgba(255, 255, 255, 0.5); background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
font-family: monospace;
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
padding: 0 0.6em; padding: 0 0.6em;
@ -158,14 +156,13 @@
} }
#righthand-panel .info { #righthand-panel .info {
font-family: monospace;
min-height: 6em; min-height: 6em;
padding: 0.25em 0; padding: 0.25em 0;
padding-left: 6em; padding-left: 6em;
} }
#settingsView button { #settingsView button {
background-color: #C6CFF7; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
font-size: 12px; font-size: 12px;
padding: 0.25em; padding: 0.25em;
margin: 3em 1em .5em 0; margin: 3em 1em .5em 0;
@ -177,7 +174,7 @@
} }
#debugView button { #debugView button {
background-color: #C6CFF7; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
font-size: 12px; font-size: 12px;
padding: 0.25em; padding: 0.25em;
margin-bottom: .5em; margin-bottom: .5em;
@ -189,10 +186,6 @@
cursor: pointer; cursor: pointer;
} }
#staticanalysismodules label {
display: block;
}
#header .origin { #header .origin {
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
@ -200,16 +193,6 @@
font-weight: bold; font-weight: bold;
} }
#righthand-panel #versionSelector {
text-decoration: none;
background-color: #C6CFF7;
cursor: pointer;
font-size: 12px;
color: black;
border-radius: 3px;
border: 0 none;
}
.contract.hidesub { .contract.hidesub {
padding-bottom: 0; padding-bottom: 0;
margin: 0; margin: 0;
@ -226,7 +209,7 @@
#output .udapp { #output .udapp {
border: 0 none; border: 0 none;
box-shadow: none; box-shadow: none;
border-bottom: 3px solid #F4F6FF; border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
} }
.crow { .crow {
@ -241,7 +224,7 @@
.crow #txorigin { .crow #txorigin {
margin-left: 0.5em; margin-left: 0.5em;
text-decoration: none; text-decoration: none;
background-color: #C6CFF7; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
color: black; color: black;
@ -279,7 +262,7 @@
.sol.warning pre { .sol.warning pre {
background-color: transparent; background-color: transparent;
margin: 0; margin: 0;
font-size: 10px; font-size: 12px;
border: 0 none; border: 0 none;
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
@ -290,20 +273,20 @@
.sol.warning .close { .sol.warning .close {
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
color: rgba(0, 0, 0, 0.5); color: hsl(0, 0%, 0%); /* black in style-guide.js */
top: 0; top: 0;
right: 0; right: 0;
padding: 0.5em; padding: 0.5em;
} }
.sol.error { .sol.error {
background-color: hsla(0, 100%, 75%, 0.1); background-color: hsla(0, 82%, 82%, 0.1);
border: .2em dotted #FF8080; border: .2em dotted hsla(0, 82%, 82%, 1); /* red in style-guide.js */
} }
.sol.warning { .sol.warning {
background-color: hsla(59, 56%, 78%, 0.5); background-color: hsla(59, 56%, 78%, 0.5);
border: .2em dotted #ffbd01; border: .2em dotted hsla(44, 100%, 50%, 1); /* orange in style-guide.js */
} }
.sol.success { .sol.success {
@ -313,7 +296,7 @@
#ghostbar { #ghostbar {
width: 1px; width: 1px;
background-color: red; background-color: hsla(0, 82%, 82%, 1); /* orange in style-guide.js */
opacity: 0.5; opacity: 0.5;
position: absolute; position: absolute;
cursor: col-resize; cursor: col-resize;
@ -336,18 +319,18 @@ input[type="file"] {
.highlightcode { .highlightcode {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color:#F77E79; background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
} }
.highlightcode_fullLine { .highlightcode_fullLine {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color:#F4B9B7; background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */ ;
opacity: 0.5; opacity: 0.5;
} }
.ace_gutter-cell.ace_breakpoint{ .ace_gutter-cell.ace_breakpoint{
background-color: #F77E79; background-color: hsla(0, 82%, 82%, 1); // red in style-guide.js
} }
/* The Modal (background) */ /* The Modal (background) */
@ -360,8 +343,8 @@ input[type="file"] {
width: 100%; /* Full width */ width: 100%; /* Full width */
height: 100%; /* Full height */ height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */ overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */ background-color: hsla(0, 0%, 0%, 1); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ background-color: hsla(0, 0%, 0%, .4); /* Black w/ opacity */
} }
/* Modal Header */ /* Modal Header */
@ -391,7 +374,7 @@ input[type="file"] {
/* Modal Content */ /* Modal Content */
.modal-content { .modal-content {
position: relative; position: relative;
background-color: #fefefe; background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
margin: auto; margin: auto;
padding: 0; padding: 0;
border-top-right-radius: 3px; border-top-right-radius: 3px;

5
assets/css/styles.css
Unescape View File

@ -62,12 +62,13 @@ blockquote {
} }
code, pre { code, pre {
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
color: #333; color: #333;
font-size: 12px; font-size: 11px;
} }
pre { pre {
font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 8px 15px; padding: 8px 15px;
background: #f8f8f8; background: #f8f8f8;
border-radius: 5px; border-radius: 5px;

30
assets/css/universal-dapp.css
Unescape View File

@ -151,22 +151,15 @@
} }
.udapp .atAddress { .udapp .atAddress {
background-color: #B1EAC5; background-color: hsla(141, 58%, 95%, .5);
border-color: #B1EAC5; border-color: hsla(141, 58%, 95%, .5);
margin-right: 1em;
border-radius: 3px;
}
.udapp .publishContract {
background-color: #EC96EC;
border-color: #EC96EC;
margin-right: 1em; margin-right: 1em;
border-radius: 3px; border-radius: 3px;
} }
.udapp button { .udapp button {
padding: .36em; padding: .36em;
color: #4C4B4B; color: hsla(0, 0%, 40%, 1);
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -206,26 +199,25 @@
} }
#runTabView .contractProperty .call { #runTabView .contractProperty .call {
background-color: #FFB9B9; background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
border-color: #FFB9B9; border-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
} }
#runTabView .contractProperty .debug { #runTabView .contractProperty .debug {
background-color: #9DC1F5; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
border-color: #9DC1F5; border-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
} }
#runTabView .contractProperty.constant .call { #runTabView .contractProperty.constant .call {
background-color: #9DC1F5; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
border-color: #9DC1F5; border-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
width: 25%; width: 25%;
font-style: italic;
outline: none; outline: none;
} }
#runTabView .contractProperty.payable .call { #runTabView .contractProperty.payable .call {
background-color: #FF8B8B; background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
border-color: #FF8B8B; border-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
width: 25%; width: 25%;
} }

5
src/app.js
Unescape View File

@ -36,6 +36,9 @@ var TxLogger = require('./app/execution/txLogger')
var EventsDecoder = require('./app/execution/eventsDecoder') var EventsDecoder = require('./app/execution/eventsDecoder')
var Web3VMProvider = remix.web3.web3VMProvider var Web3VMProvider = remix.web3.web3VMProvider
var styleGuide = require('./style-guide')
var styles = styleGuide()
var css = csjs` var css = csjs`
html { box-sizing: border-box; } html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; } *, *:before, *:after { box-sizing: inherit; }
@ -43,7 +46,7 @@ var css = csjs`
margin : 0; margin : 0;
padding : 0; padding : 0;
font-size : 12px; font-size : 12px;
color : #111111; color : ${styles.colors.black};
font-weight : normal; font-weight : normal;
} }
.browsersolidity { .browsersolidity {

9
src/app/files/file-explorer.js
Unescape View File

@ -7,6 +7,9 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
var EventManager = require('ethereum-remix').lib.EventManager var EventManager = require('ethereum-remix').lib.EventManager
var styleGuide = require('../../style-guide')
var styles = styleGuide()
var css = csjs` var css = csjs`
.fileexplorer { .fileexplorer {
box-sizing : border-box; box-sizing : border-box;
@ -16,10 +19,10 @@ var css = csjs`
font-size : 14px; font-size : 14px;
} }
.hasFocus { .hasFocus {
background-color : #F4F6FF; background-color : ${styles.colors.backgroundBlue};
} }
.rename { .rename {
background-color : white; background-color : ${styles.colors.white};
} }
.remove { .remove {
margin-left : auto; margin-left : auto;
@ -171,7 +174,7 @@ function fileExplorer (appAPI, files) {
this.style.paddingRight = '19px' this.style.paddingRight = '19px'
return this.removeChild(deleteButton) return this.removeChild(deleteButton)
} }
this.style.backgroundColor = '#F4F6FF' this.style.backgroundColor = styles.colors.backgroundBlue
this.style.paddingRight = '0px' this.style.paddingRight = '0px'
this.appendChild(deleteButton) this.appendChild(deleteButton)
} }

16
src/app/panels/editor-panel.js
Unescape View File

@ -1,6 +1,8 @@
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var yo = require('yo-yo') var yo = require('yo-yo')
var EventManager = require('ethereum-remix').lib.EventManager var EventManager = require('ethereum-remix').lib.EventManager
var styleGuide = require('../../style-guide')
var styles = styleGuide()
var Terminal = require('./terminal') var Terminal = require('./terminal')
@ -41,13 +43,13 @@ var css = csjs`
.changeeditorfontsize i { .changeeditorfontsize i {
cursor : pointer; cursor : pointer;
display : block; display : block;
color : #111111; color : ${styles.colors.black};
} }
.changeeditorfontsize i { .changeeditorfontsize i {
cursor : pointer; cursor : pointer;
} }
.changeeditorfontsize i:hover { .changeeditorfontsize i:hover {
color : orange; color : ${styles.colors.orange};
} }
.buttons { .buttons {
display : flex; display : flex;
@ -61,13 +63,13 @@ var css = csjs`
padding : 10px; padding : 10px;
width : 100%; width : 100%;
font-weight : bold; font-weight : bold;
color : black; color : ${styles.colors.black};
} }
.toggleLHP i { .toggleLHP i {
cursor : pointer; cursor : pointer;
} }
.toggleLHP i:hover { .toggleLHP i:hover {
color : orange; color : ${styles.colors.orange};
} }
.scroller { .scroller {
position : absolute; position : absolute;
@ -76,7 +78,7 @@ var css = csjs`
cursor : pointer; cursor : pointer;
padding : 0 0.9em; padding : 0 0.9em;
vertical-align : middle; vertical-align : middle;
background-color : rgba(255, 255, 255, 0.8); background-color : ${styles.colors.white};
height : 100%; height : 100%;
font-size : 1.3em; font-size : 1.3em;
} }
@ -94,14 +96,14 @@ var css = csjs`
margin-top : 0.5em; margin-top : 0.5em;
padding : 0.6em; padding : 0.6em;
font-weight : bold; font-weight : bold;
color : black; color : ${styles.colors.black};
right : 0; right : 0;
} }
.toggleRHP i { .toggleRHP i {
cursor : pointer; cursor : pointer;
} }
.toggleRHP i:hover { .toggleRHP i:hover {
color : orange; color : ${styles.colors.orange};
} }
.show { .show {
opacity : 1; opacity : 1;

21
src/app/panels/file-panel.js
Unescape View File

@ -10,6 +10,9 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
var QueryParams = require('../../lib/query-params') var QueryParams = require('../../lib/query-params')
var queryParams = new QueryParams() var queryParams = new QueryParams()
var styleGuide = require('../../style-guide')
var styles = styleGuide()
module.exports = filepanel module.exports = filepanel
var css = csjs` var css = csjs`
@ -37,7 +40,7 @@ var css = csjs`
cursor : pointer; cursor : pointer;
} }
.newFile i:hover { .newFile i:hover {
color : orange; color : ${styles.colors.orange};
} }
.gist { .gist {
padding : 10px; padding : 10px;
@ -64,19 +67,19 @@ var css = csjs`
cursor : pointer; cursor : pointer;
} }
.connectToLocalhost i:hover { .connectToLocalhost i:hover {
color : orange; color : ${styles.colors.orange};
} }
.uploadFile { .uploadFile {
padding : 10px; padding : 10px;
} }
.uploadFile label:hover { .uploadFile label:hover {
color : orange; color : ${styles.colors.orange};
} }
.uploadFile label { .uploadFile label {
cursor : pointer; cursor : pointer;
} }
.treeview { .treeview {
background-color : white; background-color : ${styles.colors.white};
} }
.dragbar { .dragbar {
position : absolute; position : absolute;
@ -90,7 +93,7 @@ var css = csjs`
} }
.ghostbar { .ghostbar {
width : 3px; width : 3px;
background-color : #C6CFF7; background-color : ${styles.colors.lightBlue};
opacity : 0.5; opacity : 0.5;
position : absolute; position : absolute;
cursor : col-resize; cursor : col-resize;
@ -160,17 +163,17 @@ function filepanel (appAPI, filesProvider) {
var containerFileSystem = element.querySelector('.filesystemexplorer') var containerFileSystem = element.querySelector('.filesystemexplorer')
var websocketconn = element.querySelector('.websocketconn') var websocketconn = element.querySelector('.websocketconn')
filesProvider['localhost'].remixd.event.register('connecting', (event) => { filesProvider['localhost'].remixd.event.register('connecting', (event) => {
websocketconn.style.color = 'orange' websocketconn.style.color = styles.colors.yellow
websocketconn.setAttribute('title', 'Connecting to localhost. ' + JSON.stringify(event)) websocketconn.setAttribute('title', 'Connecting to localhost. ' + JSON.stringify(event))
}) })
filesProvider['localhost'].remixd.event.register('connected', (event) => { filesProvider['localhost'].remixd.event.register('connected', (event) => {
websocketconn.style.color = 'green' websocketconn.style.color = styles.colors.green
websocketconn.setAttribute('title', 'Connected to localhost. ' + JSON.stringify(event)) websocketconn.setAttribute('title', 'Connected to localhost. ' + JSON.stringify(event))
}) })
filesProvider['localhost'].remixd.event.register('errored', (event) => { filesProvider['localhost'].remixd.event.register('errored', (event) => {
websocketconn.style.color = 'red' websocketconn.style.color = styles.colors.red
websocketconn.setAttribute('title', 'localhost connection errored. ' + JSON.stringify(event)) websocketconn.setAttribute('title', 'localhost connection errored. ' + JSON.stringify(event))
if (fileSystemExplorer.element && containerFileSystem.children.length > 0) { if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
containerFileSystem.removeChild(fileSystemExplorer.element) containerFileSystem.removeChild(fileSystemExplorer.element)
@ -178,7 +181,7 @@ function filepanel (appAPI, filesProvider) {
}) })
filesProvider['localhost'].remixd.event.register('closed', (event) => { filesProvider['localhost'].remixd.event.register('closed', (event) => {
websocketconn.style.color = '#111111' websocketconn.style.color = styles.colors.black
websocketconn.setAttribute('title', 'localhost connection closed. ' + JSON.stringify(event)) websocketconn.setAttribute('title', 'localhost connection closed. ' + JSON.stringify(event))
if (fileSystemExplorer.element && containerFileSystem.children.length > 0) { if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
containerFileSystem.removeChild(fileSystemExplorer.element) containerFileSystem.removeChild(fileSystemExplorer.element)

2
src/app/panels/righthand-panel.js
Unescape View File

@ -35,7 +35,7 @@ var css = csjs`
} }
.ghostbar { .ghostbar {
width : 3px; width : 3px;
background-color : #C6CFF7; background-color : ${styles.colors.lightBlue};
opacity : 0.5; opacity : 0.5;
position : absolute; position : absolute;
cursor : col-resize; cursor : col-resize;

21
src/app/staticanalysis/staticAnalysisView.js
Unescape View File

@ -10,7 +10,8 @@ var styles = styleGuide()
var css = csjs` var css = csjs`
.analysis { .analysis {
font-height: 1.5em; display: flex;
flex-direction: column;
} }
.result { .result {
margin-top: 1%; margin-top: 1%;
@ -20,11 +21,17 @@ var css = csjs`
align-items: center; align-items: center;
} }
.buttonRun extends ${styles.button} { .buttonRun extends ${styles.button} {
background-color: ${styles.colors.blue};
margin-right: 1%; margin-right: 1%;
} }
.analysisModulesContainer extends ${styles.displayBox} { .analysisModulesContainer extends ${styles.displayBox} {
margin-bottom: 1%; margin-bottom: 1%;
line-height: 2em;
display: flex;
flex-direction: column;
}
.label {
display: flex;
align-items: center;
} }
` `
@ -56,7 +63,7 @@ staticAnalysisView.prototype.render = function () {
</div> </div>
<div class="${css.buttons}"> <div class="${css.buttons}">
<button class=${css.buttonRun} onclick=${function () { self.run() }} >Run</button> <button class=${css.buttonRun} onclick=${function () { self.run() }} >Run</button>
<label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label> <label class="${css.label}" for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
</div> </div>
<div class="${css.result}" "id='staticanalysisresult'></div> <div class="${css.result}" "id='staticanalysisresult'></div>
</div> </div>
@ -109,7 +116,7 @@ staticAnalysisView.prototype.run = function () {
$('#righthand-panel #menu .staticanalysisView').css('color', '') $('#righthand-panel #menu .staticanalysisView').css('color', '')
warningContainer.html('No warning to report') warningContainer.html('No warning to report')
} else { } else {
$('#righthand-panel #menu .staticanalysisView').css('color', '#FF8B8B') $('#righthand-panel #menu .staticanalysisView').css('color', styles.colors.red)
} }
}) })
} else { } else {
@ -125,7 +132,7 @@ function renderModules (modules) {
var category = groupedModules[categoryId] var category = groupedModules[categoryId]
var entriesDom = category.map((item, i) => { var entriesDom = category.map((item, i) => {
return yo` return yo`
<label> <label class="${css.label}">
<input id="staticanalysismodule_${categoryId}_${i}" <input id="staticanalysismodule_${categoryId}_${i}"
type="checkbox" type="checkbox"
name="staticanalysismodule" name="staticanalysismodule"
@ -137,9 +144,7 @@ function renderModules (modules) {
` `
}) })
return yo`<div class="${css.analysisModulesContainer}"> return yo`<div class="${css.analysisModulesContainer}">
<label> <label class="${css.label}"><b>${category[0].categoryDisplayName}</b></label>
<b>${category[0].categoryDisplayName}</b>
</label>
${entriesDom} ${entriesDom}
</div>` </div>`
}) })

2
src/app/tabs/analysis-tab.js
Unescape View File

@ -9,6 +9,8 @@ var css = csjs`
.analysisTabView { .analysisTabView {
padding: 2%; padding: 2%;
padding-bottom: 3em; padding-bottom: 3em;
display: flex;
flex-direction: column;
} }
.infoBox extends ${styles.infoTextBox} { .infoBox extends ${styles.infoTextBox} {
margin-bottom: 1em; margin-bottom: 1em;

35
src/app/tabs/compile-tab.js
Unescape View File

@ -26,30 +26,28 @@ var css = csjs`
} }
.autocompileContainer { .autocompileContainer {
width: 90px; width: 90px;
display: flex;
align-items: center;
} }
.autocompile {}
.autocompileTitle { .autocompileTitle {
font-weight: bold; font-weight: bold;
margin: 1% 0; margin: 1% 0;
} }
.autocompile {
float: left;
align-self: center;
}
.autocompileText { .autocompileText {
align-self: center;
margin: 1% 0; margin: 1% 0;
font-size: 11px; font-size: 12px;
overflow: hidden; overflow: hidden;
word-break: normal; word-break: normal;
line-height: initial; line-height: initial;
margin-left: 3%;
} }
.warnCompilationSlow { .warnCompilationSlow {
color: orange; color: ${styles.colors.orange};
margin-left: 1%;
} }
.compileButtons { .compileButtons {
display: flex; display: flex;
align-items: baseline; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.name { .name {
@ -59,13 +57,10 @@ var css = csjs`
display: flex; display: flex;
} }
.compileButton extends ${styles.button} { .compileButton extends ${styles.button} {
width: 130px; width: 120px;
min-width: 130px; min-width: 110px;
display: flex;
align-items: baseline;
justify-content: center;
margin-right: 1%; margin-right: 1%;
font-size: 13px; font-size: 12px;
} }
.container extends ${styles.displayBox} { .container extends ${styles.displayBox} {
margin: 0; margin: 0;
@ -73,11 +68,7 @@ var css = csjs`
align-items: center; align-items: center;
} }
.contractNames extends ${styles.dropdown} { .contractNames extends ${styles.dropdown} {
width: 250px;
margin-right: 5%; margin-right: 5%;
height: 32px;
font-size: 12px;
font-weight: bold;
} }
.contractButtons { .contractButtons {
display: flex; display: flex;
@ -86,10 +77,8 @@ var css = csjs`
text-align: center; text-align: center;
} }
.details extends ${styles.button} { .details extends ${styles.button} {
min-width: 70px;
} }
.publish extends ${styles.button} { .publish extends ${styles.button} {
min-width: 70px;
margin-left: 2%; margin-left: 2%;
} }
.log { .log {
@ -174,7 +163,7 @@ function compileTab (container, appAPI, appEvents, opts) {
if (speed > 1000) { if (speed > 1000) {
warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`) warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`)
warnCompilationSlow.style.display = 'inline-block' warnCompilationSlow.style.display = 'inline-block'
settingsView.style.color = '#FF8B8B' settingsView.style.color = styles.colors.red
} else { } else {
warnCompilationSlow.style.display = 'none' warnCompilationSlow.style.display = 'none'
settingsView.style.color = '' settingsView.style.color = ''
@ -233,7 +222,7 @@ function compileTab (container, appAPI, appEvents, opts) {
if (success) { if (success) {
document.querySelector('#righthand-panel #menu .compileView').style.color = '' document.querySelector('#righthand-panel #menu .compileView').style.color = ''
} else { } else {
document.querySelector('#righthand-panel #menu .compileView').style.color = '#FF8B8B' document.querySelector('#righthand-panel #menu .compileView').style.color = styles.colors.red
} }
// display warning error if any // display warning error if any
var errorContainer = container.querySelector('.error') var errorContainer = container.querySelector('.error')

51
src/app/tabs/run-tab.js
Unescape View File

@ -35,49 +35,37 @@ var css = csjs`
.col1_1 extends ${styles.titleM} { .col1_1 extends ${styles.titleM} {
font-size: 12px; font-size: 12px;
width: 25%; width: 25%;
min-width: 50px; min-width: 75px;
float: left; float: left;
align-self: center; align-self: center;
} }
.col2 extends ${styles.inputField}{ .col2 extends ${styles.inputField}{
width: 75%;
float: left;
} }
.select extends ${styles.dropdown} { .select extends ${styles.dropdown} {
width: 75%;
float: left;
text-align: center; text-align: center;
font-weight: normal;
min-width: 150px;
} }
.copyaddress { .copyaddress {
color: #C6CFF7; color: ${styles.colors.blue};
margin-left: 0.5em; margin-left: 0.5em;
margin-top: 0.7em; margin-top: 0.7em;
cursor: pointer; cursor: pointer;
opacity: .7;
} }
.copyaddress:hover { .copyaddress:hover {
opacity: 1; color: ${styles.colors.grey};
}
.selectAddress extends ${styles.dropdown} {
width: 70%;
float: left;
text-align: center;
} }
.instanceContainer extends ${styles.displayBox} { .instanceContainer extends ${styles.displayBox} {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: ${styles.colors.lightBlue}; background-color: ${styles.colors.transparent};
margin-top: 2%; margin-top: 2%;
border: none;
} }
.container extends ${styles.displayBox} { .container extends ${styles.displayBox} {
margin-top: 2%; margin-top: 2%;
} }
.contractNames extends ${styles.dropdown} { .contractNames extends ${styles.dropdown} {
height: 32px;
font-size: 12px;
width: 100%;
font-weight: bold;
background-color: ${styles.colors.lightGrey}
} }
.buttons { .buttons {
display: flex; display: flex;
@ -89,24 +77,24 @@ var css = csjs`
} }
.button { .button {
display: flex; display: flex;
align-items: flex-end; align-items: center;
margin-top: 2%; margin-top: 2%;
} }
.atAddress extends ${styles.button} { .atAddress extends ${styles.button} {
background-color: ${styles.colors.green};
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
background-color: ${styles.colors.lightGreen};
border-color: ${styles.colors.lightGreen};
} }
.create extends ${styles.button} { .create extends ${styles.button} {
background-color: ${styles.colors.lightRed};
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
background-color: ${styles.colors.lightRed};
border-color: ${styles.colors.lightRed};
} }
.input extends ${styles.inputField} { .input extends ${styles.inputField} {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
width: 75%;
font-size: 10px;
padding-left: 10px; padding-left: 10px;
} }
.noInstancesText extends ${styles.displayBox} { .noInstancesText extends ${styles.displayBox} {
@ -114,13 +102,11 @@ var css = csjs`
color: ${styles.colors.lightGrey}; color: ${styles.colors.lightGrey};
font-style: italic; font-style: italic;
} }
.legend extends ${styles.displayBox} { .legend {
border-radius: 5px; float: right;
display: flex; display: flex;
justify-content: center;
padding: 15px 8px;
word-break: normal; word-break: normal;
flex-wrap: wrap; margin-left: auto;
} }
.item { .item {
margin-right: 1em; margin-right: 1em;
@ -136,7 +122,7 @@ var css = csjs`
margin-right: .3em; margin-right: .3em;
} }
.call { .call {
color: #9DC1F5; color: ${styles.colors.lightBlue};
margin-right: .3em; margin-right: .3em;
} }
.pending { .pending {
@ -158,7 +144,6 @@ function runTab (container, appAPI, appEvents, opts) {
var el = yo` var el = yo`
<div class="${css.runTabView}" id="runTabView"> <div class="${css.runTabView}" id="runTabView">
${settings(appAPI, appEvents)} ${settings(appAPI, appEvents)}
${legend()}
${contractDropdown(appAPI, appEvents, instanceContainer)} ${contractDropdown(appAPI, appEvents, instanceContainer)}
${instanceContainer} ${instanceContainer}
</div> </div>
@ -231,7 +216,7 @@ function contractDropdown (appAPI, appEvents, instanceContainer) {
var selectContractNames = yo`<select class="${css.contractNames}" disabled></select>` var selectContractNames = yo`<select class="${css.contractNames}" disabled></select>`
var el = yo` var el = yo`
<div class="${css.container}"> <div class="${css.container}">
${selectContractNames} ${selectContractNames} ${legend()}
<div class="${css.buttons}"> <div class="${css.buttons}">
<div class="${css.button}"> <div class="${css.button}">
<div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>At Address</div> <div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>At Address</div>
@ -371,7 +356,7 @@ function settings (appAPI, appEvents) {
</div> </div>
<div class="${css.crow}"> <div class="${css.crow}">
<div class="${css.col1_1}">Account</div> <div class="${css.col1_1}">Account</div>
<select name="txorigin" class="${css.selectAddress}" id="txorigin"></select> <select name="txorigin" class="${css.select}" id="txorigin"></select>
<i title="Copy Address" class="copytxorigin fa fa-clipboard ${css.copyaddress}" onclick=${copyAddress} aria-hidden="true"></i> <i title="Copy Address" class="copytxorigin fa fa-clipboard ${css.copyaddress}" onclick=${copyAddress} aria-hidden="true"></i>
</div> </div>
<div class="${css.crow}"> <div class="${css.crow}">

2
src/app/tabs/settings-tab.js
Unescape View File

@ -19,8 +19,6 @@ var css = csjs`
display: flex; display: flex;
} }
.select extends ${styles.dropdown} { .select extends ${styles.dropdown} {
float: left;
max-width: 90%;
} }
} }
` `

15
src/app/tabs/support-tab.js
Unescape View File

@ -19,38 +19,35 @@ var css = csjs`
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 85%; height: 85%;
padding: 0;
} }
.chatTitle { .chatTitle {
cursor: pointer;
height: 40px; height: 40px;
width: 90%; width: 90%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 3px; margin-top: 15px;
background-color: white;
border: 2px dotted ${styles.colors.lightGrey};
} }
.chatTitle:hover { .chatTitle:hover {
background-color: ${styles.colors.lightYellow}; cursor: pointer;
} }
.icon { .icon {
height: 70%; height: 70%;
margin-right: 2%; margin-right: 2%;
} }
.chatTitleText { .chatTitleText {
font-size: 13px; font-size: 17px;
font-weight: bold; font-weight: bold;
} }
.chatTitleText { .chatTitleText {
opacity: 0.8; opacity: 0.8;
} }
.chatIframe { .chatIframe extends ${styles.displayBox} {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 2px dotted ${styles.colors.lightGrey};
overflow: hidden;
transform: scale(0.9); transform: scale(0.9);
padding: 0;
} }
.infoBox extends ${styles.infoTextBox}{ .infoBox extends ${styles.infoTextBox}{

20
src/app/ui/modaldialog.js
Unescape View File

@ -1,5 +1,7 @@
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var styles = styleGuide()
var css = csjs` var css = csjs`
.modal { .modal {
@ -11,13 +13,13 @@ var css = csjs`
width: 100%; /* Full width */ width: 100%; /* Full width */
height: 100%; /* Full height */ height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */ overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */ background-color: ${styles.colors.black}; /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
} }
.modalHeader { .modalHeader {
padding: 2px 16px; padding: 2px 16px;
background-color: orange; background-color: ${styles.colors.orange};
color: white; color: ${styles.colors.white};
} }
.modalBody { .modalBody {
padding: 1.5em; padding: 1.5em;
@ -25,20 +27,20 @@ var css = csjs`
} }
.modalFooter { .modalFooter {
padding: 10px 30px; padding: 10px 30px;
background-color: orange; background-color: ${styles.colors.orange};
color: white; color: ${styles.colors.white};
text-align: right; text-align: right;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
} }
.modalContent { .modalContent {
position: relative; position: relative;
background-color: #fefefe; background-color: ${styles.colors.white};
margin: auto; margin: auto;
padding: 0; padding: 0;
line-height: 18px; line-height: 18px;
font-size: 13px; font-size: 12px;
border: 1px solid #888; border: 1px solid ${styles.colors.grey};
width: 50%; width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop; -webkit-animation-name: animatetop;

76
src/style-guide.js
Unescape View File

@ -7,22 +7,33 @@ function styleGuide () {
COLORS COLORS
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
var colors = { var colors = {
// BASIC COLORS (B&W and transparent)
transparent: 'transparent', transparent: 'transparent',
white: '#fff', white: 'hsl(0, 0%, 100%)',
black: '#000', black: 'hsl(0, 0%, 0%)',
blue: '#C6CFF7', opacityBlack: 'hsla(0, 0%, 0%, .4)',
lightBlue: '#F4F6FF', // BLUE
greyBlue: '#999999', blue: 'hsla(229, 75%, 87%, 1)',
grey: '#666', lightBlue: 'hsla(229, 75%, 87%, .5)',
lightGrey: '#dddddd', backgroundBlue: 'hsla(229, 100%, 97%, 1)',
red: '#FF8080', // GREY
lightRed: '#FFB9B9', grey: 'hsla(0, 0%, 40%, 1)',
green: 'hsla(141, 58%, 81%, 1)', lightGrey: 'hsla(0, 0%, 40%, .5)',
lightGreen: 'hsla(141, 58%, 95%, 1)', veryLightGrey: 'hsla(0, 0%, 40%, .2)',
violet: '#C6CFF7', // RED
pink: '#EC96EC', red: 'hsla(0, 82%, 82%, 1)',
yellow: '#ffbd01', lightRed: 'hsla(0, 82%, 82%, .5)',
lightYellow: 'hsla(59, 56%, 78%, 0.5)' // GREEN
green: 'hsla(141, 75%, 84%, 1)',
lightGreen: 'hsla(141, 75%, 84%, .5)',
// PINK
pink: 'hsla(300, 69%, 76%, 1)',
lightPink: 'hsla(300, 69%, 76%, .5)',
// YELLOW
orange: 'hsla(44, 100%, 50%, 1)',
lightOrange: 'hsla(44, 100%, 50%, .5)',
// VIOLET
violet: 'hsla(240, 64%, 68%, 1)'
} }
/* -------------------------------------------------------------------------- /* --------------------------------------------------------------------------
@ -59,19 +70,19 @@ function styleGuide () {
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
var textBoxes = csjs` var textBoxes = csjs`
.display-box { .display-box {
font-size : 1em; font-size : 12px;
padding : 10px 15px; padding : 10px 15px;
line-height : 20px; line-height : 20px;
background : ${colors.white}; background : ${colors.white};
border-radius : 3px; border-radius : 3px;
border : 1px solid ${colors.lightGrey}; border : 1px solid ${colors.veryLightGrey};
overflow : hidden; overflow : hidden;
word-break : break-word; word-break : break-word;
width : 100%; width : 100%;
} }
.info-text-box { .info-text-box {
background-color : white; background-color : ${colors.white};
line-height : 20px; line-height : 20px;
border : .2em dotted ${colors.lightGrey}; border : .2em dotted ${colors.lightGrey};
padding : 8px 15px; padding : 8px 15px;
@ -82,18 +93,18 @@ function styleGuide () {
} }
.warning-text-box { .warning-text-box {
background-color : hsla(59, 56%, 78%, 0.5); // light yellow background-color : ${colors.lightOrange};
line-height : 20px; line-height : 20px;
padding : 8px 15px; padding : 8px 15px;
border-radius : 5px; border-radius : 5px;
border : .2em dotted ${colors.yellow}; // orange-yellow border : .2em dotted ${colors.orange};
margin-bottom : 1em; margin-bottom : 1em;
overflow : hidden; overflow : hidden;
word-break : break-word; word-break : break-word;
} }
.error-text-box { .error-text-box {
background-color : ${colors.lightRed}; // light-red background-color : ${colors.lightRed};
line-height : 20px; line-height : 20px;
padding : 1em 1em .5em 1em; padding : 1em 1em .5em 1em;
border-radius : 3px; border-radius : 3px;
@ -117,10 +128,10 @@ function styleGuide () {
word-break : normal; word-break : normal;
} }
.input { .input {
border : 1px solid ${colors.lightGrey}; // light-grey border : 1px solid ${colors.veryLightGrey};
margin : .3em;
height : 25px; height : 25px;
font-size : 10px; width : 250px;
font-size : 12px;
border-radius : 3px; border-radius : 3px;
padding : 0 8px; padding : 0 8px;
overflow : hidden; overflow : hidden;
@ -132,14 +143,17 @@ function styleGuide () {
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
var buttons = csjs` var buttons = csjs`
.button { .button {
display : flex;
align-items : center;
justify-content : center;
border-color : transparent; border-color : transparent;
border-radius : 3px; border-radius : 3px;
border : .3px solid ${colors.lightGrey}; border : .3px solid ${colors.veryLightGrey};
cursor : pointer; cursor : pointer;
min-height : 25px; min-height : 25px;
max-height : 25px; max-height : 25px;
padding : 3px; width : 70px;
min-width : 100px; min-width : 70px;
font-size : 12px; font-size : 12px;
overflow : hidden; overflow : hidden;
word-break : normal; word-break : normal;
@ -151,14 +165,16 @@ function styleGuide () {
} }
.dropdown { .dropdown {
font-size : 10px; font-size : 12px;
font-weight : bold;
padding : 0 8px; padding : 0 8px;
text-decoration : none; text-decoration : none;
background-color : ${colors.white}; background-color : ${colors.white};
cursor : pointer; cursor : pointer;
border : 1px solid ${colors.lightGrey}; border : 1px solid ${colors.veryLightGrey};
border-radius : 3px; border-radius : 3px;
height : 30px; height : 25px;
width : 250px;
text-align : center; text-align : center;
overflow : hidden; overflow : hidden;
word-break : normal; word-break : normal;

12
src/universal-dapp.js
Unescape View File

@ -29,16 +29,13 @@ var css = csjs`
align-items: center; align-items: center;
} }
.title extends ${styles.dropdown} { .title extends ${styles.dropdown} {
width: 400px;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
height: 32px; align-items: center;
font-size: 11px;
width: 100%;
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
line-height: initial; line-height: initial;
font-weight: bold;
background-color: ${styles.colors.white}; background-color: ${styles.colors.white};
} }
.titleText { .titleText {
@ -71,11 +68,10 @@ var css = csjs`
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
margin-left: 3%; margin-left: 3%;
color: ${styles.colors.black}; color: ${styles.colors.blue};
opacity: .5;
} }
.copy:hover{ .copy:hover{
opacity: 1; color: ${styles.colors.grey};
} }
.buttonsContainer { .buttonsContainer {
margin-top: 2%; margin-top: 2%;

Write Preview
Loading…
Cancel
Save