Skip to content

B
baas-ide
Commit 295f1c4d authored by ninabreznik's avatar ninabreznik Committed by yann300
Browse files
Options

Fix styling for the table

parent 490e4b86
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 56 deletions
src/app/execution/txLogger.js
View file @ 295f1c4d
...@@ -53,28 +53,25 @@ var css = csjs` ...@@ -53,28 +53,25 @@ var css = csjs`
.txTable, .tr, .td { .txTable, .tr, .td {
border-collapse: collapse; border-collapse: collapse;
font-size: 10px; font-size: 10px;
} color: ${styles.terminal.text_Primary};
.tr { border: 1px solid ${styles.terminal.text_Secondary};
width: 70%;
border-bottom: 1px solid white;
display: flex;
align-items: center;
}
.td:first-child {
min-width: 30%;
width: 30%;
display: flex;
align-items: baseline;
font-weight: bold;
} }
#txTable { #txTable {
margin-top: 1%; margin-top: 1%;
margin-bottom: 5%; margin-bottom: 5%;
align-self: center; align-self: center;
width: 85%;
} }
.tr, .td { .tr, .td {
padding: 4px;
vertical-align: baseline; vertical-align: baseline;
} }
.td:first-child {
min-width: 30%;
width: 30%;
align-items: baseline;
font-weight: bold;
}
.tableTitle { .tableTitle {
width: 25%; width: 25%;
} }
...@@ -192,7 +189,7 @@ function renderKnownTransaction (self, data) { ...@@ -192,7 +189,7 @@ function renderKnownTransaction (self, data) {
var tx = yo` var tx = yo`
<span id="tx${data.tx.hash}"> <span id="tx${data.tx.hash}">
<div class="${css.log}" onclick=${txDetails}> <div class="${css.log}" onclick=${txDetails}>
<i class="${css.caret} fa fa-caret-right" onclick=${txDetails}></i> <i class="${css.caret} fa fa-caret-right"></i>
${context(self, {from, to, data})} ${context(self, {from, to, data})}
<div class=${css.buttons}> <div class=${css.buttons}>
<div class=${css.debug} onclick=${debug}>[debug]</div> <div class=${css.debug} onclick=${debug}>[debug]</div>
...@@ -205,8 +202,8 @@ function renderKnownTransaction (self, data) { ...@@ -205,8 +202,8 @@ function renderKnownTransaction (self, data) {
function txDetails () { function txDetails () {
var log = document.querySelector("[class^='log']") var log = document.querySelector("[class^='log']")
var caret = document.querySelector("[class^='caret']") var caret = document.querySelector("[class^='caret']")
var caretDown = yo`<i class="${css.caret} fa fa-caret-down" onclick=${txDetails}></i>` var caretDown = yo`<i class="${css.caret} fa fa-caret-down"></i>`
var caretRight = yo`<i class="${css.caret} fa fa-caret-right" onclick=${txDetails}></i>` var caretRight = yo`<i class="${css.caret} fa fa-caret-right"></i>`
if (table && table.parentNode) { if (table && table.parentNode) {
tx.removeChild(table) tx.removeChild(table)
log.removeChild(caret) log.removeChild(caret)
...@@ -251,7 +248,7 @@ function renderCall (self, data) { ...@@ -251,7 +248,7 @@ function renderCall (self, data) {
var tx = yo` var tx = yo`
<span id="tx${data.tx.hash}"> <span id="tx${data.tx.hash}">
<div class="${css.log}" onclick=${txDetails}> <div class="${css.log}" onclick=${txDetails}>
<i class="${css.caret} fa fa-caret-right" onclick=${txDetails}></i> <i class="${css.caret} fa fa-caret-right"></i>
<span class=${css.txLog}> <span class=${css.txLog}>
<span class=${css.tx}>[call]</span> <span class=${css.tx}>[call]</span>
<div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div> <div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div>
...@@ -271,8 +268,8 @@ function renderCall (self, data) { ...@@ -271,8 +268,8 @@ function renderCall (self, data) {
function txDetails () { function txDetails () {
var log = document.querySelector("[class^='log']") var log = document.querySelector("[class^='log']")
var caret = document.querySelector("[class^='caret']") var caret = document.querySelector("[class^='caret']")
var caretDown = yo`<i class="${css.caret} fa fa-caret-down" onclick=${txDetails}></i>` var caretDown = yo`<i class="${css.caret} fa fa-caret-down"></i>`
var caretRight = yo`<i class="${css.caret} fa fa-caret-right" onclick=${txDetails}></i>` var caretRight = yo`<i class="${css.caret} fa fa-caret-right"></i>`
if (table && table.parentNode) { if (table && table.parentNode) {
tx.removeChild(table) tx.removeChild(table)
log.removeChild(caret) log.removeChild(caret)
...@@ -309,7 +306,7 @@ function renderUnknownTransaction (self, data) { ...@@ -309,7 +306,7 @@ function renderUnknownTransaction (self, data) {
} }
var tx = yo` var tx = yo`
<span id="tx${data.tx.hash}"> <span id="tx${data.tx.hash}">
<i class="${css.caret} fa fa-caret-right" onclick=${txDetails}></i> <i class="${css.caret} fa fa-caret-right"></i>
<div class="${css.log}" onclick=${txDetails}> <div class="${css.log}" onclick=${txDetails}>
${context(self, {from, to, data})} ${context(self, {from, to, data})}
<div class=${css.buttons}> <div class=${css.buttons}>
...@@ -322,8 +319,8 @@ function renderUnknownTransaction (self, data) { ...@@ -322,8 +319,8 @@ function renderUnknownTransaction (self, data) {
function txDetails () { function txDetails () {
var log = document.querySelector("[class^='log']") var log = document.querySelector("[class^='log']")
var caret = document.querySelector("[class^='caret']") var caret = document.querySelector("[class^='caret']")
var caretDown = yo`<i class="${css.caret} fa fa-caret-down" onclick=${txDetails}></i>` var caretDown = yo`<i class="${css.caret} fa fa-caret-down"></i>`
var caretRight = yo`<i class="${css.caret} fa fa-caret-right" onclick=${txDetails}></i>` var caretRight = yo`<i class="${css.caret} fa fa-caret-right"></i>`
if (table && table.parentNode) { if (table && table.parentNode) {
tx.removeChild(table) tx.removeChild(table)
log.removeChild(caret) log.removeChild(caret)
...@@ -434,10 +431,9 @@ function createTable (opts) { ...@@ -434,10 +431,9 @@ function createTable (opts) {
var contractAddress = yo` var contractAddress = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> contractAddress <td class="${css.td}"> contractAddress </td>
${copyToClipboard(() => opts.contractAddress)}
</td>
<td class="${css.td}">${opts.contractAddress} <td class="${css.td}">${opts.contractAddress}
${copyToClipboard(() => opts.contractAddress)}
</td> </td>
</tr> </tr>
` `
...@@ -445,10 +441,9 @@ function createTable (opts) { ...@@ -445,10 +441,9 @@ function createTable (opts) {
var from = yo` var from = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td} ${css.tableTitle}"> from <td class="${css.td} ${css.tableTitle}"> from </td>
${copyToClipboard(() => opts.from)}
</td>
<td class="${css.td}">${opts.from} <td class="${css.td}">${opts.from}
${copyToClipboard(() => opts.from)}
</td> </td>
</tr> </tr>
` `
...@@ -463,10 +458,9 @@ function createTable (opts) { ...@@ -463,10 +458,9 @@ function createTable (opts) {
} }
var to = yo` var to = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> to <td class="${css.td}"> to </td>
${copyToClipboard(() => data.to ? data.to : toHash)}
</td>
<td class="${css.td}">${toHash} <td class="${css.td}">${toHash}
${copyToClipboard(() => data.to ? data.to : toHash)}
</td> </td>
</tr> </tr>
` `
...@@ -474,10 +468,9 @@ function createTable (opts) { ...@@ -474,10 +468,9 @@ function createTable (opts) {
var gas = yo` var gas = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> gas <td class="${css.td}"> gas </td>
${copyToClipboard(() => opts.gas)}
</td>
<td class="${css.td}">${opts.gas} gas <td class="${css.td}">${opts.gas} gas
${copyToClipboard(() => opts.gas)}
</td> </td>
</tr> </tr>
` `
...@@ -490,10 +483,9 @@ function createTable (opts) { ...@@ -490,10 +483,9 @@ function createTable (opts) {
if (opts.transactionCost) { if (opts.transactionCost) {
table.appendChild(yo` table.appendChild(yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> transaction cost <td class="${css.td}"> transaction cost </td>
${copyToClipboard(() => opts.transactionCost)}
</td>
<td class="${css.td}">${opts.transactionCost} gas ${callWarning} <td class="${css.td}">${opts.transactionCost} gas ${callWarning}
${copyToClipboard(() => opts.transactionCost)}
</td> </td>
</tr>`) </tr>`)
} }
...@@ -501,20 +493,18 @@ function createTable (opts) { ...@@ -501,20 +493,18 @@ function createTable (opts) {
if (opts.executionCost) { if (opts.executionCost) {
table.appendChild(yo` table.appendChild(yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> execution cost <td class="${css.td}"> execution cost </td>
${copyToClipboard(() => opts.executionCost)}
</td>
<td class="${css.td}">${opts.executionCost} gas ${callWarning} <td class="${css.td}">${opts.executionCost} gas ${callWarning}
${copyToClipboard(() => opts.executionCost)}
</td> </td>
</tr>`) </tr>`)
} }
var hash = yo` var hash = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> hash <td class="${css.td}"> hash </td>
${copyToClipboard(() => opts.hash)}
</td>
<td class="${css.td}">${opts.hash} <td class="${css.td}">${opts.hash}
${copyToClipboard(() => opts.hash)}
</td> </td>
</tr> </tr>
` `
...@@ -522,10 +512,9 @@ function createTable (opts) { ...@@ -522,10 +512,9 @@ function createTable (opts) {
var input = yo` var input = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> input <td class="${css.td}"> input </td>
${copyToClipboard(() => opts.input)}
</td>
<td class="${css.td}">${opts.input} <td class="${css.td}">${opts.input}
${copyToClipboard(() => opts.input)}
</td> </td>
</tr> </tr>
` `
...@@ -534,10 +523,9 @@ function createTable (opts) { ...@@ -534,10 +523,9 @@ function createTable (opts) {
if (opts['decoded input']) { if (opts['decoded input']) {
var inputDecoded = yo` var inputDecoded = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> decoded input <td class="${css.td}"> decoded input </td>
${copyToClipboard(opts['decoded input'])}
</td>
<td class="${css.td}">${opts['decoded input']} <td class="${css.td}">${opts['decoded input']}
${copyToClipboard(opts['decoded input'])}
</td> </td>
</tr>` </tr>`
table.appendChild(inputDecoded) table.appendChild(inputDecoded)
...@@ -558,12 +546,11 @@ function createTable (opts) { ...@@ -558,12 +546,11 @@ function createTable (opts) {
} }
var logs = yo` var logs = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> logs <td class="${css.td}"> logs </td>
${copyToClipboard(() => JSON.stringify(stringified, null, '\t'))}
${copyToClipboard(() => JSON.stringify(opts.logs.raw || '0'))}
</td>
<td class="${css.td}" id="logs"> <td class="${css.td}" id="logs">
${JSON.stringify(stringified, null, '\t')} ${JSON.stringify(stringified, null, '\t')}
${copyToClipboard(() => JSON.stringify(stringified, null, '\t'))}
${copyToClipboard(() => JSON.stringify(opts.logs.raw || '0'))}
</td> </td>
</tr> </tr>
` `
...@@ -572,10 +559,9 @@ function createTable (opts) { ...@@ -572,10 +559,9 @@ function createTable (opts) {
var val = opts.val != null ? typeConversion.toInt(opts.val) : 0 var val = opts.val != null ? typeConversion.toInt(opts.val) : 0
val = yo` val = yo`
<tr class="${css.tr}"> <tr class="${css.tr}">
<td class="${css.td}"> value <td class="${css.td}"> value </td>
${copyToClipboard(() => `${val} wei`)}
</td>
<td class="${css.td}">${val} wei <td class="${css.td}">${val} wei
${copyToClipboard(() => `${val} wei`)}
</td> </td>
</tr> </tr>
` `
......
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