Commit 48ebe3f1 authored by chriseth's avatar chriseth Committed by GitHub

Merge pull request #204 from ethereum/cleanup-udapp

Cleanup some bits of UDapp
parents 1b2a5689 6a92be25
...@@ -305,16 +305,12 @@ body { ...@@ -305,16 +305,12 @@ body {
content: "\25B6"; content: "\25B6";
} }
#output .poweredBy,
#output .legend { display: none; }
#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 #F4F6FF;
} }
.crow { .crow {
overflow: auto; overflow: auto;
display: block; display: block;
......
.udapp { .udapp {
padding: 1em; padding: 1em;
border: 1px dotted #4D5686; border: 1px dotted #4D5686;
position: relative; position: relative;
box-shadow: 0 0 5px rgba(0,0,0,0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
} }
...@@ -25,7 +24,7 @@ ...@@ -25,7 +24,7 @@
width: 100%; width: 100%;
padding: 0.6em; padding: 0.6em;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba( 0,0,0,0.3 ); border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px; border-radius: 3px;
} }
...@@ -55,7 +54,7 @@ ...@@ -55,7 +54,7 @@
.udapp .title { .udapp .title {
margin-bottom: 0.4em; margin-bottom: 0.4em;
padding: 0.2em; padding: 0.2em;
background-color: rgba( 255,255,255,0.5 ); background-color: rgba(255, 255, 255, 0.5);
display: block; display: block;
font-weight: bold; font-weight: bold;
padding-right: 2em; padding-right: 2em;
...@@ -90,7 +89,10 @@ ...@@ -90,7 +89,10 @@
white-space: pre; white-space: pre;
} }
.udapp .result { position: relative; } .udapp .result {
position: relative;
}
.udapp .output .result .returned, .udapp .output .result .returned,
.udapp .output .result .value, .udapp .output .result .value,
.udapp .output .result .waiting, .udapp .output .result .waiting,
...@@ -100,14 +102,16 @@ ...@@ -100,14 +102,16 @@
} }
.udapp .output .result .debugTx { .udapp .output .result .debugTx {
position: absolute; position: absolute;
top: 0.4em; top: 0.4em;
right: 1.4em; right: 1.4em;
height: 1.5em; height: 1.5em;
width: 2.5em; width: 2.5em;
} }
.udapp .output .result:last-child { margin: 0; } .udapp .output .result:last-child {
margin: 0;
}
.udapp .output:empty { .udapp .output:empty {
display: none; display: none;
...@@ -162,13 +166,11 @@ ...@@ -162,13 +166,11 @@
content: "\25B6"; content: "\25B6";
} }
.udapp .contractProperty { .udapp .contractProperty {
overflow: auto; overflow: auto;
margin-bottom: 0.4em; margin-bottom: 0.4em;
} }
.udapp input, .udapp input,
.udapp button { .udapp button {
width: 33%; width: 33%;
...@@ -184,7 +186,10 @@ ...@@ -184,7 +186,10 @@
border-radius: 3px; border-radius: 3px;
} }
.udapp input { border-left: 0 none;} .udapp input {
border-left: 0 none;
}
.udapp button { .udapp button {
background-color: #666; background-color: #666;
color: #4C4B4B; color: #4C4B4B;
...@@ -269,9 +274,9 @@ ...@@ -269,9 +274,9 @@
white-space: pre; white-space: pre;
} }
.udapp .events .event .name { margin-right: 0.5em; } .udapp .events .event .name {
margin-right: 0.5em;
}
.udapp .legend { .udapp .legend {
font-size: 12px; font-size: 12px;
...@@ -282,7 +287,9 @@ ...@@ -282,7 +287,9 @@
.udapp .legend div { .udapp .legend div {
display: inline-block; display: inline-block;
margin-right: 0.5em; margin-right: 0.5em;
margin-bottom: 1em;
} }
.udapp .legend div:before { .udapp .legend div:before {
content: "."; content: ".";
color: transparent; color: transparent;
...@@ -293,12 +300,14 @@ ...@@ -293,12 +300,14 @@
width: 1em; width: 1em;
} }
.udapp .legend .attach:before { background-color: #62B762; } .udapp .legend .attach:before {
.udapp .legend .transact:before { background-color: #D42828; } background-color: #62B762;
.udapp .legend .call:before { background-color: #556DF3; } }
.udapp .poweredBy { .udapp .legend .transact:before {
float: right; background-color: #D42828;
color: #666; }
font-size: 12px;
.udapp .legend .call:before {
background-color: #556DF3;
} }
...@@ -135,6 +135,19 @@ UniversalDApp.prototype.getBalance = function (address, cb) { ...@@ -135,6 +135,19 @@ UniversalDApp.prototype.getBalance = function (address, cb) {
UniversalDApp.prototype.render = function () { UniversalDApp.prototype.render = function () {
var self = this; var self = this;
// NOTE: don't display anything if there are no contracts to display
if (self.contracts.length === 0) {
return self.$el;
}
var $legend = $('<div class="legend" />')
.append($('<div class="attach"/>').text('Attach'))
.append($('<div class="transact"/>').text('Transact'))
.append($('<div class="call"/>').text('Call'));
self.$el.append($legend);
// NOTE: this might be used in the future
if (self.contracts.length === 0) { if (self.contracts.length === 0) {
self.$el.append(self.getABIInputForm()); self.$el.append(self.getABIInputForm());
} else { } else {
...@@ -153,15 +166,7 @@ UniversalDApp.prototype.render = function () { ...@@ -153,15 +166,7 @@ UniversalDApp.prototype.render = function () {
self.$el.append(self.renderOutputModifier(self.contracts[c].name, $contractEl)); self.$el.append(self.renderOutputModifier(self.contracts[c].name, $contractEl));
} }
} }
var $legend = $('<div class="legend" />')
.append($('<div class="attach"/>').text('Attach'))
.append($('<div class="transact"/>').text('Transact'))
.append($('<div class="call"/>').text('Call'));
self.$el.append($('<div class="poweredBy" />')
.html('<a href="http://github.com/d11e9/universal-dapp">Universal ÐApp</a> powered by The Blockchain'));
self.$el.append($legend);
return self.$el; return self.$el;
}; };
...@@ -179,7 +184,7 @@ UniversalDApp.prototype.getABIInputForm = function (cb) { ...@@ -179,7 +184,7 @@ UniversalDApp.prototype.getABIInputForm = function (cb) {
var self = this; var self = this;
var $el = $('<div class="udapp-setup" />'); var $el = $('<div class="udapp-setup" />');
var $jsonInput = $('<textarea class="json" placeholder=\'[ { "name": name, "bytecode": bytecode, "interface": abi }, { ... } ]\'/>'); var $jsonInput = $('<textarea class="json" placeholder=\'[ { "name": name, "bytecode": bytecode, "interface": abi }, { ... } ]\'/>');
var $createButton = $('<button class="udapp-create"/>').text('Create a Universal ÐApp'); var $createButton = $('<button class="udapp-create"/>').text('Render ABI');
$createButton.click(function (ev) { $createButton.click(function (ev) {
var contracts = $.parseJSON($jsonInput.val()); var contracts = $.parseJSON($jsonInput.val());
if (cb) { if (cb) {
......
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