Skip to content

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

Add card.js, move pending to terminal and restructure recorder

parent 0de36c54
Expand all Show whitespace changes
Inline Side-by-side
Showing with 187 additions and 32 deletions
src/app.js
View file @ f5758d8a
......@@ -523,7 +523,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
editor: self._components.editor,
config: self._api.config,
txListener: txlistener,
contextview: self._components.contextView
contextview: self._components.contextView,
udapp: () => { return udapp }
}
})
this._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
......
src/app/panels/editor-panel.js
View file @ f5758d8a
......@@ -28,6 +28,7 @@ class EditorPanel {
terminal: new Terminal({
api: {
cmdInterpreter: self._api.cmdInterpreter,
udapp: self._api.udapp,
getPosition (event) {
var limitUp = 36
var limitDown = 20
......
src/app/panels/styles/terminal-styles.js
View file @ f5758d8a
......@@ -27,20 +27,20 @@ var css = csjs`
display : flex;
align-items : center;
width : 100%;
padding : 5px;
}
.clear {
margin-left : 10px;
margin-right : 10px;
margin-right : 20px;
width : 10px;
cursor : pointer;
color : ${styles.terminal.icon_Color_TogglePanel};
display : flex;
}
.clear:hover {
color : ${styles.terminal.icon_HoverColor_Menu};
}
.toggleTerminal {
margin-right : 10px;
margin-right : 20px;
margin-left : 20px;
font-size : 14px;
font-weight : bold;
cursor : pointer;
......@@ -56,6 +56,7 @@ var css = csjs`
height : 100%;
overflow-y : auto;
font-family : monospace;
margin : 0px;
}
.terminal_bg {
display : flex;
......@@ -137,9 +138,21 @@ var css = csjs`
align-items : center;
justify-content : center;
}
.listen {
min-width : 120px;
display : flex;
.listen {}
.verticalLine {
border-left : 1px solid ${styles.colors.veryLightGrey};
height : 65%;
margin-right : 30px; }
.pendingTx {
border : 1px solid ${styles.terminal.icon_HoverColor_Menu};
border-radius: 50%;
margin-right: 30px;
min-width: 13px;
height: 13px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
}
.dragbarHorizontal {
position : absolute;
......
src/app/panels/terminal.js
View file @ f5758d8a
......@@ -105,23 +105,40 @@ class Terminal {
${self._view.input}
</div>
`
self._view.icon = yo`<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize} class="${css.toggleTerminal} fa fa-angle-double-down"></i>`
self._view.dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
self._view.icon = yo`
<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
class="${css.toggleTerminal} fa fa-angle-double-down"></i>`
self._view.dragbar = yo`
<div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
self._view.dropdown = self._components.dropdown.render()
self._view.pendingTxCount = yo`<div class=${css.pendingTx}>${self._view.pendingTxCount}</div>`
self._view.bar = yo`
<div class=${css.bar}>
${self._view.dragbar}
<div class=${css.menu}>
${self._view.icon}
<div class=${css.clear} onclick=${clear}>
<i class="fa fa-ban" aria-hidden="true" onmouseenter=${hover} onmouseleave=${hover}></i>
<i class="fa fa-ban" aria-hidden="true" title="Clear console"
onmouseenter=${hover} onmouseleave=${hover}></i>
</div>
${self._view.pendingTxCount}
<div class=${css.verticalLine}></div>
<div class=${css.listen}>
<input onchange=${listenOnNetwork} type="checkbox"
title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you">
</div>
${self._view.dropdown}
<div class=${css.search}><i class="fa fa-search ${css.searchIcon}" aria-hidden="true"></i><input type="text" class=${css.filter} onkeydown=${filter} placeholder="Search transactions"></div>
<div class=${css.listen}><input onchange=${listenOnNetwork} type="checkbox"><label title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created from the GUI">Listen on network</label></div>
<div class=${css.search}>
<i class="fa fa-search ${css.searchIcon}" aria-hidden="true"></i>
<input type="text" class=${css.filter} onkeydown=${filter} placeholder="Search transactions">
</div>
</div>
</div>
`
setInterval(() => {
updatePendingTxs(self._api, self._view.pendingTxCount)
}, 5000)
function listenOnNetwork (ev) {
self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
}
......@@ -563,5 +580,10 @@ function domTerminalFeatures (self, scopedCommands) {
}
function blockify (el) { return yo`<div class=${css.block}>${el}</div>` }
// PENDING TX
function updatePendingTxs (api, el) {
var count = Object.keys(api.udapp().pendingTransactions()).length
el.innerText = count
}
module.exports = Terminal
src/app/tabs/run-tab.js
View file @ f5758d8a
This diff is collapsed.
src/app/tabs/styles/run-tab-styles.js
View file @ f5758d8a
......@@ -9,8 +9,11 @@ var css = csjs`
flex-direction: column;
}
.instanceContainerTitle {
font-size: 20px;
font-weight: bold;
margin-bottom: 5%;
font-size: 12px;
display: flex;
justify-content: space-between;
}
.settings {
${styles.rightPanel.runTab.box_RunTab}
......@@ -58,11 +61,13 @@ var css = csjs`
width: 250px;
}
.instanceContainer {
${styles.rightPanel.runTab.box_Instance}
display: flex;
flex-direction: column;
margin-top: 2%;
margin-bottom: 2%;
border: none;
text-align: center;
padding: 10px 0px 15px 15px;
}
.pendingTxsContainer {
${styles.rightPanel.runTab.box_Instance}
......@@ -74,7 +79,15 @@ var css = csjs`
}
.container {
${styles.rightPanel.runTab.box_RunTab}
margin-top: 2%;
margin-bottom: 2%;
}
.recorderCollapsedView,
.recorderExpandedView {
display: flex;
flex-direction: column;
}
.recorderDescription {
margin: 0 15px 15px 0;
}
.contractNames {
${styles.rightPanel.runTab.dropdown_RunTab}
......@@ -109,6 +122,7 @@ var css = csjs`
.noInstancesText {
${styles.rightPanel.runTab.box_Instance}
font-style: italic;
text-align: left;
}
.pendingTxsText {
${styles.rightPanel.runTab.borderBox_Instance}
......@@ -180,14 +194,14 @@ var css = csjs`
.networkItem {
margin-right: 5px;
}
.clearinstance {}
.clearinstance {
margin-right: 15px;
}
.transactionActions {
display: flex;
width: 70px;
justify-content: space-between;
border: 1px solid ${styles.rightPanel.runTab.additionalText_Color};
padding: 5px;
border-radius: 3px;
justify-content: space-evenly;
${styles.rightPanel.runTab.box_Info_RunTab};
width: 145px;
}
`
......
src/app/ui/card.js 0 → 100644
View file @ f5758d8a
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var styleGuide = require('./styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager
module.exports = class Card {
constructor (api, events, opts) {
const self = this
self._api = api
self._events = events
self._opts = opts
self._view = {}
self.event = new EventManager()
}
render () {
const self = this
if (self._view.el) return self._view.el
self._view.cardBody = yo`<div class=${css.cardBody}></div>`
self._view.arrow = yo`<i class="${css.arrow} fa fa-angle-up"
onclick=${(ev) => trigger(ev.target)}></i>`
self._view.expandCollapseButton = yo`
<div class=${css.expandCollapseButton}>${self._view.arrow}</div>`
self._view.statusBar = yo`<div class=${css.statusBar}>${self._opts.collapsedView}</div>`
self._view.cardHeader = yo`
<div class=${css.cardHeader}>
<div class=${css.cardTitles}>
<div class=${css.cardTitle}>${self._opts.title}</div>
${self._view.statusBar}
</div>
<div class=${css.expandCollapseButton}>${self._view.expandCollapseButton}</div>
</div>`
function trigger (el) {
var body = self._view.cardBody
var status = self._view.statusBar
el.classList.toggle('fa-angle-down')
var arrow = el.classList.toggle('fa-angle-up') ? 'down' : 'up'
self.event.trigger('expandCollapseCard', [arrow, body, status])
}
// HTML
self._view.el = yo`
<div class=${css.cardContainer}>
${self._view.cardHeader}
${self._view.cardBody}
</div>`
return self._view.el
}
}
const css = csjs`
.cardContainer {
${styles.remix.solidBox};
margin-bottom : 2%;
}
.cardHeader {
display : flex;
justify-content : space-between;
}
.statusBar {}
.cardBody {}
.cardTitles {
display : flex;
flex-direction : row;
align-items : center;
}
.cardTitle {
font-size : 13px;
font-weight : bold;
color : ${styles.appProperties.mainText_Color};
margin-right : 5px;
}
.expandCollapseButton {}
.arrow {
margin-right : 15px;
color : ${styles.appProperties.icon_Color};
font-weight : bold;
cursor : pointer;
font-size : 14px;
}
.arrow:hover {
color : ${styles.appProperties.icon_HoverColor};
}
`
src/app/ui/styles-guide/style-guide.js
View file @ f5758d8a
......@@ -390,7 +390,12 @@ function styleGuide () {
tooltip_CopyToClipboard_Color: appProperties.tooltip_Color,
icon_Color_CopyToClipboard: appProperties.icon_Color,
icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor
icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor,
solidBox: appProperties.uiElements.solidBorderBox({
BackgroundColor: appProperties.solidBox_BackgroundColor,
Color: appProperties.solidBox_TextColor
})
},
/* ------------------------------------------------------
......@@ -569,6 +574,12 @@ function styleGuide () {
Color: appProperties.solidBox_TextColor
}),
box_Info_RunTab: appProperties.uiElements.dottedBorderBox({
BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
BorderColor: appProperties.solidBorderBox_BorderColor,
Color: appProperties.solidBorderBox_TextColor
}),
dropdown_RunTab: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor,
......
src/app/ui/styles/dropdown-styles.js
View file @ f5758d8a
......@@ -10,6 +10,7 @@ var css = csjs`
display : flex;
flex-direction : column;
margin-right : 10px;
width : auto;
}
.selectbox {
display : flex;
......
src/recorder.js
View file @ f5758d8a
......@@ -131,6 +131,7 @@ class Recorder {
append (timestamp, record) {
var self = this
self.data.journal.push({ timestamp, record })
self.event.trigger('newTxRecorded', [self.data.journal.length])
}
/**
......
src/universal-dapp-styles.js
View file @ f5758d8a
......@@ -10,7 +10,7 @@ var css = csjs`
.title {
${styles.rightPanel.runTab.titlebox_RunTab}
display: flex;
justify-content: end;
justify-content: space-between;
align-items: center;
font-size: 11px;
height: 30px;
......@@ -35,11 +35,9 @@ var css = csjs`
color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
}
.instance {
${styles.rightPanel.runTab.box_Instance};
margin-bottom: 10px;
padding: 10px 15px 15px 15px;
position: relative;
overflow: visible;
min-width: 310px;
display: flex;
flex-direction: column;
}
.instance .title:before {
content: "\\25BE";
......@@ -81,6 +79,7 @@ var css = csjs`
.closeIcon {
font-size: 12px;
cursor: pointer;
margin-left: 5px;
}
.udappClose {
display: flex;
......
src/universal-dapp-ui.js
View file @ f5758d8a
......@@ -34,9 +34,8 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
var self = this
address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
var instance = yo`<div class="instance ${css.instance}" id="instance${address}"></div>`
var instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
var context = self.udapp.context()
var shortAddress = helper.shortenAddress(address)
......@@ -48,7 +47,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
if (self.udapp.removable_instances) {
var close = yo`<div class="${css.udappClose}" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></div>`
instance.appendChild(close)
title.appendChild(close)
}
function remove () {
......
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