Skip to content

B
baas-ide
Commit 12de3682 authored by ninabreznik's avatar ninabreznik
Browse files
Options

Remove universal-udapp.css

parent 20e3ca65
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 282 deletions
assets/css/universal-dapp.css deleted 100644 → 0
View file @ 20e3ca65
.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;
}
src/universal-dapp.js
View file @ 12de3682
......@@ -92,6 +92,68 @@ var css = csjs`
margin-left: 3%;
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.removable = opts.opt.removable
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.contracts
self.transactionContextAPI
......@@ -293,8 +355,11 @@ UniversalDApp.prototype.getCallButton = function (args) {
if (args.funABI.inputs) {
inputs = txHelper.inputParametersDeclarationToString(args.funABI.inputs)
}
var inputField = $('<input/>').attr('placeholder', inputs).attr('title', inputs)
var $outputOverride = $('<div class="value" />')
var inputField = yo`<input></input>`
inputField.setAttribute('placeholder', inputs)
inputField.setAttribute('title', inputs)
var outputOverride = yo`<div class=${css.value}></div>`
var title
if (args.funABI.name) {
......@@ -303,13 +368,14 @@ UniversalDApp.prototype.getCallButton = function (args) {
title = '(fallback)'
}
var button = $(`<button class="${css.instanceButton}"/>`)
.addClass('call')
.attr('title', title)
.text(title)
.click(() => {
call(true)
})
var button = yo`<button onclick=${clickButton} class="${css.instanceButton}"></button>`
button.classList.add(css.call)
button.setAttribute('title', title)
button.innerHTML = title
function clickButton () {
call(true)
}
function call (isUserAction) {
var logMsg
......@@ -320,7 +386,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
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 (isUserAction) {
if (!args.funABI.constant) {
......@@ -341,7 +407,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
}
if (lookupOnly) {
var decoded = txFormat.decodeResponseToTreeView(executionContext.isVM() ? txResult.result.vm.return : ethJSUtil.toBuffer(txResult.result), args.funABI)
$outputOverride.html(decoded)
outputOverride.appendChild(decoded)
}
} else {
self._api.logMessage(`${logMsg} errored: ${error} `)
......@@ -353,37 +419,38 @@ UniversalDApp.prototype.getCallButton = function (args) {
})
}
var $contractProperty = $(`<div class="contractProperty ${css.buttonsContainer}"></div>`)
var $contractActions = $(`<div class="${css.contractActions}" ></div>`)
$contractProperty.append($contractActions)
$contractActions.append(button)
var contractProperty = yo`<div class="${css.contractProperty} ${css.buttonsContainer}"></div>`
var contractActions = yo`<div class="${css.contractActions}" ></div>`
contractProperty.appendChild(contractActions)
contractActions.appendChild(button)
if (inputs.length) {
$contractActions.append(inputField)
contractActions.appendChild(inputField)
}
if (lookupOnly) {
$contractProperty.append($outputOverride)
contractProperty.appendChild(outputOverride)
}
if (lookupOnly) {
$contractProperty.addClass('constant')
button.attr('title', (title + ' - call'))
contractProperty.classList.add(css.constant)
button.setAttribute('title', (title + ' - call'))
call(false)
}
if (args.funABI.inputs && args.funABI.inputs.length > 0) {
$contractProperty.addClass('hasArgs')
contractProperty.classList.add(css.hasArgs)
}
if (args.funABI.payable === true) {
$contractProperty.addClass('payable')
button.attr('title', (title + ' - transact (payable)'))
contractProperty.classList.add(css.payable)
button.setAttribute('title', (title + ' - transact (payable)'))
}
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 () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment