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

Fix styling for the table

Browse Source
pull/1/head
ninabreznik 7 years ago committed by yann300
parent 490e4b8684
commit 295f1c4de8
1 changed files with 42 additions and 56 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. 98
      src/app/execution/txLogger.js

98
src/app/execution/txLogger.js
Unescape View File

@ -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) {
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) {
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) {
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) {
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) {
} }
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) {
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) {
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) {
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) {
} }
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) {
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) {
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) {
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) {
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) {
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) {
} }
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) {
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>
` `

Write Preview
Loading…
Cancel
Save