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

Merge pull request #797 from ethereum/theme

Browse Source 
Remove universal-udapp.css
pull/1/head
yann300 7 years ago committed by GitHub
parent 30ef60272a 312eceb62d
commit c0bceb7f5d
2 changed files with 93 additions and 282 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. 257
      assets/css/universal-dapp.css
  2. 116
      src/universal-dapp.js

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

@ -1,257 +0,0 @@
.udapp {
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
overflow: auto;
}
.udapp a,
.udapp .caveat {
color: #7A7AE2;
}
.udapp a:visited {
color: #7A7AE2;
}
.udapp button,
.udapp-setup textarea,
.udapp-setup button {
display: block;
width: 100%;
padding: 0.6em;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
.udapp-setup textarea {
border-radius: 0;
margin-bottom: 1em;
height: 7em;
}
.udapp-setup button {
background-color: #556DF3;
border-color: #556DF3;
color: white;
cursor: pointer;
}
.udapp .contract {
clear: both;
}
.udapp .create {
overflow: auto;
margin: 1em;
}
.udapp .output {
padding: 1em;
clear: both;
word-wrap: break-word;
}
.udapp .constructor > .output {
padding-right: 1em;
}
.udapp .output .error {
color: red;
}
.udapp .output .result {
position: relative;
margin-bottom: 3.5em;
white-space: pre;
}
.udapp .result {
position: relative;
}
.udapp .output .result .returned,
.udapp .output .result .value,
.udapp .output .result .waiting,
.udapp .output .result .gasUsed {
padding-right: 2em;
word-wrap: break-word;
}
.udapp .output .result .debugTx {
height: 1.5em;
width: 2.5em;
margin-top: 1em;
}
.udapp .output .result:last-child {
margin: 0;
}
.udapp .output:empty {
display: none;
}
.udapp .instance {
padding: 0.4em;
background-color: rgb(244, 246, 255);
margin-bottom: 1em;
position: relative;
}
.udapp .instance:last-child {
margin-bottom: 0;
}
.udapp .instance .title {
content: "\25BC";
cursor: pointer;
}
.udapp .instance .title:before {
content: "\25BC";
opacity: 0.5;
margin-right: 0.4em;
font-size: 10px;
margin-top: 0.2em;
}
#runTabView .contractProperty {
overflow: auto;
margin-bottom: 0.4em;
}
.udapp input,
.udapp button {
width: 20%;
display: block;
float: left;
padding: 0.25em;
}
.udapp button:disabled {
cursor: not-allowed;
background-color: white;
border-color: lightgray;
}
.udapp .atAddress {
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: hsla(0, 0%, 40%, 1);
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
}
.udapp .instance input,
.udapp .instance button {
width: 25%;
float: left;
box-sizing: border-box;
}
#runTabView .contractProperty.hasArgs input {
width: 75%;
padding: .36em;
}
#runTabView .contractProperty button {
border-radius : 3px;
border : .3px solid #dddddd;
cursor : pointer;
min-height : 25px;
max-height : 25px;
padding : 3px;
min-width : 100px;
width : 25%;
font-size : 10px;
}
#runTabView .contractProperty button.debug {
width: 12em;
}
#runTabView .contractProperty button:disabled {
cursor: not-allowed;
background-color: white;
border-color: lightgray;
}
#runTabView .contractProperty .call {
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: 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: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
border-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
width: 25%;
outline: none;
}
#runTabView .contractProperty.payable .call {
background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
border-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
width: 25%;
}
#runTabView .contractProperty input {
display: none;
}
#runTabView .contractProperty > .value {
padding: 0 0.4em;
box-sizing: border-box;
float: left;
min-width: 100%;
}
#runTabView .contractProperty.hasArgs input {
display: block;
border: 1px solid #dddddd;
padding: .36em;
border-left: none;
padding: 8px 8px 8px 10px;
font-size: 10px;
height: 25px;
}
#runTabView .contractProperty.hasArgs button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.udapp .events:not(:empty):before {
content: "Events";
font-weight: bold;
display: block;
margin-bottom: 0.4em;
}
.udapp .events .event {
padding: 0.4em;
position: relative;
word-wrap: break-word;
padding-right: 3em;
background-color: white;
margin-bottom: 0.5em;
white-space: pre;
}
.udapp .events .event .name {
margin-right: 0.5em;
}

116
src/universal-dapp.js
Unescape View File

@ -92,6 +92,68 @@ var css = csjs`
margin-left: 3%; margin-left: 3%;
align-self: center; align-self: center;
} }
.contractProperty {
overflow: auto;
margin-bottom: 0.4em;
}
.contractProperty.hasArgs input {
width: 75%;
padding: .36em;
}
.contractProperty button {
border-radius : 3px;
border : .3px solid #dddddd;
cursor : pointer;
min-height : 25px;
max-height : 25px;
padding : 3px;
min-width : 100px;
width : 25%;
font-size : 10px;
}
.contractProperty button:disabled {
cursor: not-allowed;
background-color: white;
border-color: lightgray;
}
.call {
background-color: ${styles.colors.lightRed};
border-color: ${styles.colors.lightRed};
}
.constant .call {
background-color: ${styles.colors.lightBlue};
border-color: ${styles.colors.lightBlue};
width: 25%;
outline: none;
}
.payable .call {
background-color: ${styles.colors.red};
border-color: ${styles.colors.red};
width: 25%;
}
.contractProperty input {
display: none;
}
.contractProperty > .value {
padding: 0 0.4em;
box-sizing: border-box;
float: left;
min-width: 100%;
}
.hasArgs input {
display: block;
border: 1px solid #dddddd;
padding: .36em;
border-left: none;
padding: 8px 8px 8px 10px;
font-size: 10px;
height: 25px;
}
.hasArgs button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
` `
/* /*
@ -104,7 +166,7 @@ function UniversalDApp (opts = {}) {
self._api = opts.api self._api = opts.api
self.removable = opts.opt.removable self.removable = opts.opt.removable
self.removable_instance = opts.opt.removable_instance self.removable_instance = opts.opt.removable_instance
self.el = yo`<div class="udapp"></div>` self.el = yo`<div class=${css.udapp}></div>`
self.personalMode = opts.opt.personalMode || false self.personalMode = opts.opt.personalMode || false
self.contracts self.contracts
self.transactionContextAPI self.transactionContextAPI
@ -293,8 +355,11 @@ UniversalDApp.prototype.getCallButton = function (args) {
if (args.funABI.inputs) { if (args.funABI.inputs) {
inputs = txHelper.inputParametersDeclarationToString(args.funABI.inputs) inputs = txHelper.inputParametersDeclarationToString(args.funABI.inputs)
} }
var inputField = $('<input/>').attr('placeholder', inputs).attr('title', inputs) var inputField = yo`<input></input>`
var $outputOverride = $('<div class="value" />') inputField.setAttribute('placeholder', inputs)
inputField.setAttribute('title', inputs)
var outputOverride = yo`<div class=${css.value}></div>`
var title var title
if (args.funABI.name) { if (args.funABI.name) {
@ -303,13 +368,14 @@ UniversalDApp.prototype.getCallButton = function (args) {
title = '(fallback)' title = '(fallback)'
} }
var button = $(`<button class="${css.instanceButton}"/>`) var button = yo`<button onclick=${clickButton} class="${css.instanceButton}"></button>`
.addClass('call') button.classList.add(css.call)
.attr('title', title) button.setAttribute('title', title)
.text(title) button.innerHTML = title
.click(() => {
function clickButton () {
call(true) call(true)
}) }
function call (isUserAction) { function call (isUserAction) {
var logMsg var logMsg
@ -320,7 +386,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
logMsg = `call to ${args.contractName}.${(args.funABI.name) ? args.funABI.name : '(fallback)'}` logMsg = `call to ${args.contractName}.${(args.funABI.name) ? args.funABI.name : '(fallback)'}`
} }
} }
txFormat.buildData(args.contractAbi, self.contracts, false, args.funABI, inputField.val(), self, (error, data) => { txFormat.buildData(args.contractAbi, self.contracts, false, args.funABI, inputField.value, self, (error, data) => {
if (!error) { if (!error) {
if (isUserAction) { if (isUserAction) {
if (!args.funABI.constant) { if (!args.funABI.constant) {
@ -341,7 +407,8 @@ UniversalDApp.prototype.getCallButton = function (args) {
} }
if (lookupOnly) { if (lookupOnly) {
var decoded = txFormat.decodeResponseToTreeView(executionContext.isVM() ? txResult.result.vm.return : ethJSUtil.toBuffer(txResult.result), args.funABI) var decoded = txFormat.decodeResponseToTreeView(executionContext.isVM() ? txResult.result.vm.return : ethJSUtil.toBuffer(txResult.result), args.funABI)
$outputOverride.html(decoded) outputOverride.innerHTML = ''
outputOverride.appendChild(decoded)
} }
} else { } else {
self._api.logMessage(`${logMsg} errored: ${error} `) self._api.logMessage(`${logMsg} errored: ${error} `)
@ -353,37 +420,38 @@ UniversalDApp.prototype.getCallButton = function (args) {
}) })
} }
var $contractProperty = $(`<div class="contractProperty ${css.buttonsContainer}"></div>`) var contractProperty = yo`<div class="${css.contractProperty} ${css.buttonsContainer}"></div>`
var $contractActions = $(`<div class="${css.contractActions}" ></div>`) var contractActions = yo`<div class="${css.contractActions}" ></div>`
$contractProperty.append($contractActions)
$contractActions.append(button) contractProperty.appendChild(contractActions)
contractActions.appendChild(button)
if (inputs.length) { if (inputs.length) {
$contractActions.append(inputField) contractActions.appendChild(inputField)
} }
if (lookupOnly) { if (lookupOnly) {
$contractProperty.append($outputOverride) contractProperty.appendChild(outputOverride)
} }
if (lookupOnly) { if (lookupOnly) {
$contractProperty.addClass('constant') contractProperty.classList.add(css.constant)
button.attr('title', (title + ' - call')) button.setAttribute('title', (title + ' - call'))
call(false) call(false)
} }
if (args.funABI.inputs && args.funABI.inputs.length > 0) { if (args.funABI.inputs && args.funABI.inputs.length > 0) {
$contractProperty.addClass('hasArgs') contractProperty.classList.add(css.hasArgs)
} }
if (args.funABI.payable === true) { if (args.funABI.payable === true) {
$contractProperty.addClass('payable') contractProperty.classList.add(css.payable)
button.attr('title', (title + ' - transact (payable)')) button.setAttribute('title', (title + ' - transact (payable)'))
} }
if (!lookupOnly && args.funABI.payable === false) { if (!lookupOnly && args.funABI.payable === false) {
button.attr('title', (title + ' - transact (not payable)')) button.setAttribute('title', (title + ' - transact (not payable)'))
} }
return $contractProperty return contractProperty
} }
UniversalDApp.prototype.pendingTransactions = function () { UniversalDApp.prototype.pendingTransactions = function () {

Write Preview
Loading…
Cancel
Save