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

5
assets/css/styles.css
Unescape View File

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

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

@ -151,22 +151,15 @@
}
.udapp .atAddress {
background-color: #B1EAC5;
border-color: #B1EAC5;
margin-right: 1em;
border-radius: 3px;
}
.udapp .publishContract {
background-color: #EC96EC;
border-color: #EC96EC;
background-color: hsla(141, 58%, 95%, .5);
border-color: hsla(141, 58%, 95%, .5);
margin-right: 1em;
border-radius: 3px;
}
.udapp button {
padding: .36em;
color: #4C4B4B;
color: hsla(0, 0%, 40%, 1);
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
@ -206,26 +199,25 @@
}
#runTabView .contractProperty .call {
background-color: #FFB9B9;
border-color: #FFB9B9;
background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
border-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
}
#runTabView .contractProperty .debug {
background-color: #9DC1F5;
border-color: #9DC1F5;
background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
border-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
}
#runTabView .contractProperty.constant .call {
background-color: #9DC1F5;
border-color: #9DC1F5;
background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
border-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
width: 25%;
font-style: italic;
outline: none;
}
#runTabView .contractProperty.payable .call {
background-color: #FF8B8B;
border-color: #FF8B8B;
background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
border-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
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 Web3VMProvider = remix.web3.web3VMProvider
var styleGuide = require('./style-guide')
var styles = styleGuide()
var css = csjs`
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
@ -43,7 +46,7 @@ var css = csjs`
margin : 0;
padding : 0;
font-size : 12px;
color : #111111;
color : ${styles.colors.black};
font-weight : normal;
}
.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 styleGuide = require('../../style-guide')
var styles = styleGuide()
var css = csjs`
.fileexplorer {
box-sizing : border-box;
@ -16,10 +19,10 @@ var css = csjs`
font-size : 14px;
}
.hasFocus {
background-color : #F4F6FF;
background-color : ${styles.colors.backgroundBlue};
}
.rename {
background-color : white;
background-color : ${styles.colors.white};
}
.remove {
margin-left : auto;
@ -171,7 +174,7 @@ function fileExplorer (appAPI, files) {
this.style.paddingRight = '19px'
return this.removeChild(deleteButton)
}
this.style.backgroundColor = '#F4F6FF'
this.style.backgroundColor = styles.colors.backgroundBlue
this.style.paddingRight = '0px'
this.appendChild(deleteButton)
}

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

@ -1,6 +1,8 @@
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var EventManager = require('ethereum-remix').lib.EventManager
var styleGuide = require('../../style-guide')
var styles = styleGuide()
var Terminal = require('./terminal')
@ -24,7 +26,7 @@ var css = csjs`
overflow : hidden;
}
.files {
position : relative;
position : relative;
list-style : none;
margin : 0;
font-size : 15px;
@ -41,13 +43,13 @@ var css = csjs`
.changeeditorfontsize i {
cursor : pointer;
display : block;
color : #111111;
color : ${styles.colors.black};
}
.changeeditorfontsize i {
cursor : pointer;
}
.changeeditorfontsize i:hover {
color : orange;
color : ${styles.colors.orange};
}
.buttons {
display : flex;
@ -61,13 +63,13 @@ var css = csjs`
padding : 10px;
width : 100%;
font-weight : bold;
color : black;
color : ${styles.colors.black};
}
.toggleLHP i {
cursor : pointer;
}
.toggleLHP i:hover {
color : orange;
color : ${styles.colors.orange};
}
.scroller {
position : absolute;
@ -76,7 +78,7 @@ var css = csjs`
cursor : pointer;
padding : 0 0.9em;
vertical-align : middle;
background-color : rgba(255, 255, 255, 0.8);
background-color : ${styles.colors.white};
height : 100%;
font-size : 1.3em;
}
@ -94,14 +96,14 @@ var css = csjs`
margin-top : 0.5em;
padding : 0.6em;
font-weight : bold;
color : black;
color : ${styles.colors.black};
right : 0;
}
.toggleRHP i {
cursor : pointer;
}
.toggleRHP i:hover {
color : orange;
color : ${styles.colors.orange};
}
.show {
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 = new QueryParams()
var styleGuide = require('../../style-guide')
var styles = styleGuide()
module.exports = filepanel
var css = csjs`
@ -37,7 +40,7 @@ var css = csjs`
cursor : pointer;
}
.newFile i:hover {
color : orange;
color : ${styles.colors.orange};
}
.gist {
padding : 10px;
@ -64,19 +67,19 @@ var css = csjs`
cursor : pointer;
}
.connectToLocalhost i:hover {
color : orange;
color : ${styles.colors.orange};
}
.uploadFile {
padding : 10px;
}
.uploadFile label:hover {
color : orange;
color : ${styles.colors.orange};
}
.uploadFile label {
cursor : pointer;
}
.treeview {
background-color : white;
background-color : ${styles.colors.white};
}
.dragbar {
position : absolute;
@ -90,7 +93,7 @@ var css = csjs`
}
.ghostbar {
width : 3px;
background-color : #C6CFF7;
background-color : ${styles.colors.lightBlue};
opacity : 0.5;
position : absolute;
cursor : col-resize;
@ -160,17 +163,17 @@ function filepanel (appAPI, filesProvider) {
var containerFileSystem = element.querySelector('.filesystemexplorer')
var websocketconn = element.querySelector('.websocketconn')
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))
})
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))
})
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))
if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
containerFileSystem.removeChild(fileSystemExplorer.element)
@ -178,7 +181,7 @@ function filepanel (appAPI, filesProvider) {
})
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))
if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
containerFileSystem.removeChild(fileSystemExplorer.element)

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,7 @@
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var styles = styleGuide()
var css = csjs`
.modal {
@ -11,13 +13,13 @@ var css = csjs`
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
background-color: ${styles.colors.black}; /* Fallback color */
background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
}
.modalHeader {
padding: 2px 16px;
background-color: orange;
color: white;
background-color: ${styles.colors.orange};
color: ${styles.colors.white};
}
.modalBody {
padding: 1.5em;
@ -25,20 +27,20 @@ var css = csjs`
}
.modalFooter {
padding: 10px 30px;
background-color: orange;
color: white;
background-color: ${styles.colors.orange};
color: ${styles.colors.white};
text-align: right;
font-weight: 700;
cursor: pointer;
}
.modalContent {
position: relative;
background-color: #fefefe;
background-color: ${styles.colors.white};
margin: auto;
padding: 0;
line-height: 18px;
font-size: 13px;
border: 1px solid #888;
font-size: 12px;
border: 1px solid ${styles.colors.grey};
width: 50%;
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;
@ -53,7 +55,7 @@ var css = csjs`
cursor: pointer;
}
@-webkit-keyframes animatetop {
from {top: -300px; opacity: 0}
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
@keyframes animatetop {
@ -121,7 +123,7 @@ function html () {
<div class="${css['modalHeader']}">
<h2></h2>
</div>
<div class="${css['modalBody']}"> -
<div class="${css['modalBody']}"> -
</div>
<div class="${css['modalFooter']}">
<span id="modal-footer-ok" class="modalFooterOk">OK</span><span id="modal-footer-cancel" class="modalFooterCancel">Cancel</span>

86
src/style-guide.js
Unescape View File

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

12
src/universal-dapp.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save