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 Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 34 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 ...@@ -523,7 +523,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
editor: self._components.editor, editor: self._components.editor,
config: self._api.config, config: self._api.config,
txListener: txlistener, txListener: txlistener,
contextview: self._components.contextView contextview: self._components.contextView,
udapp: () => { return udapp }
} }
}) })
this._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction)) 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 { ...@@ -28,6 +28,7 @@ class EditorPanel {
terminal: new Terminal({ terminal: new Terminal({
api: { api: {
cmdInterpreter: self._api.cmdInterpreter, cmdInterpreter: self._api.cmdInterpreter,
udapp: self._api.udapp,
getPosition (event) { getPosition (event) {
var limitUp = 36 var limitUp = 36
var limitDown = 20 var limitDown = 20
......
src/app/panels/styles/terminal-styles.js
View file @ f5758d8a
...@@ -27,20 +27,20 @@ var css = csjs` ...@@ -27,20 +27,20 @@ var css = csjs`
display : flex; display : flex;
align-items : center; align-items : center;
width : 100%; width : 100%;
padding : 5px;
} }
.clear { .clear {
margin-left : 10px; margin-right : 20px;
margin-right : 10px;
width : 10px; width : 10px;
cursor : pointer; cursor : pointer;
color : ${styles.terminal.icon_Color_TogglePanel}; color : ${styles.terminal.icon_Color_TogglePanel};
display : flex;
} }
.clear:hover { .clear:hover {
color : ${styles.terminal.icon_HoverColor_Menu}; color : ${styles.terminal.icon_HoverColor_Menu};
} }
.toggleTerminal { .toggleTerminal {
margin-right : 10px; margin-right : 20px;
margin-left : 20px;
font-size : 14px; font-size : 14px;
font-weight : bold; font-weight : bold;
cursor : pointer; cursor : pointer;
...@@ -56,6 +56,7 @@ var css = csjs` ...@@ -56,6 +56,7 @@ var css = csjs`
height : 100%; height : 100%;
overflow-y : auto; overflow-y : auto;
font-family : monospace; font-family : monospace;
margin : 0px;
} }
.terminal_bg { .terminal_bg {
display : flex; display : flex;
...@@ -137,9 +138,21 @@ var css = csjs` ...@@ -137,9 +138,21 @@ var css = csjs`
align-items : center; align-items : center;
justify-content : center; justify-content : center;
} }
.listen { .listen {}
min-width : 120px; .verticalLine {
display : flex; 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 { .dragbarHorizontal {
position : absolute; position : absolute;
......
src/app/panels/terminal.js
View file @ f5758d8a
...@@ -105,23 +105,40 @@ class Terminal { ...@@ -105,23 +105,40 @@ class Terminal {
${self._view.input} ${self._view.input}
</div> </div>
` `
self._view.icon = yo`<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize} class="${css.toggleTerminal} fa fa-angle-double-down"></i>` self._view.icon = yo`
self._view.dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>` <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.dropdown = self._components.dropdown.render()
self._view.pendingTxCount = yo`<div class=${css.pendingTx}>${self._view.pendingTxCount}</div>`
self._view.bar = yo` self._view.bar = yo`
<div class=${css.bar}> <div class=${css.bar}>
${self._view.dragbar} ${self._view.dragbar}
<div class=${css.menu}> <div class=${css.menu}>
${self._view.icon} ${self._view.icon}
<div class=${css.clear} onclick=${clear}> <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> </div>
${self._view.dropdown} ${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.search}>
<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> <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>
</div> </div>
` `
setInterval(() => {
updatePendingTxs(self._api, self._view.pendingTxCount)
}, 5000)
function listenOnNetwork (ev) { function listenOnNetwork (ev) {
self.event.trigger('listenOnNetWork', [ev.currentTarget.checked]) self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
} }
...@@ -563,5 +580,10 @@ function domTerminalFeatures (self, scopedCommands) { ...@@ -563,5 +580,10 @@ function domTerminalFeatures (self, scopedCommands) {
} }
function blockify (el) { return yo`<div class=${css.block}>${el}</div>` } 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 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` ...@@ -9,8 +9,11 @@ var css = csjs`
flex-direction: column; flex-direction: column;
} }
.instanceContainerTitle { .instanceContainerTitle {
font-size: 20px;
font-weight: bold; font-weight: bold;
margin-bottom: 5%;
font-size: 12px;
display: flex;
justify-content: space-between;
} }
.settings { .settings {
${styles.rightPanel.runTab.box_RunTab} ${styles.rightPanel.runTab.box_RunTab}
...@@ -58,11 +61,13 @@ var css = csjs` ...@@ -58,11 +61,13 @@ var css = csjs`
width: 250px; width: 250px;
} }
.instanceContainer { .instanceContainer {
${styles.rightPanel.runTab.box_Instance}
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 2%; margin-bottom: 2%;
border: none; border: none;
text-align: center; text-align: center;
padding: 10px 0px 15px 15px;
} }
.pendingTxsContainer { .pendingTxsContainer {
${styles.rightPanel.runTab.box_Instance} ${styles.rightPanel.runTab.box_Instance}
...@@ -74,8 +79,16 @@ var css = csjs` ...@@ -74,8 +79,16 @@ var css = csjs`
} }
.container { .container {
${styles.rightPanel.runTab.box_RunTab} ${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 { .contractNames {
${styles.rightPanel.runTab.dropdown_RunTab} ${styles.rightPanel.runTab.dropdown_RunTab}
width: 100%; width: 100%;
...@@ -109,6 +122,7 @@ var css = csjs` ...@@ -109,6 +122,7 @@ var css = csjs`
.noInstancesText { .noInstancesText {
${styles.rightPanel.runTab.box_Instance} ${styles.rightPanel.runTab.box_Instance}
font-style: italic; font-style: italic;
text-align: left;
} }
.pendingTxsText { .pendingTxsText {
${styles.rightPanel.runTab.borderBox_Instance} ${styles.rightPanel.runTab.borderBox_Instance}
...@@ -180,14 +194,14 @@ var css = csjs` ...@@ -180,14 +194,14 @@ var css = csjs`
.networkItem { .networkItem {
margin-right: 5px; margin-right: 5px;
} }
.clearinstance {} .clearinstance {
margin-right: 15px;
}
.transactionActions { .transactionActions {
display: flex; display: flex;
width: 70px; justify-content: space-evenly;
justify-content: space-between; ${styles.rightPanel.runTab.box_Info_RunTab};
border: 1px solid ${styles.rightPanel.runTab.additionalText_Color}; width: 145px;
padding: 5px;
border-radius: 3px;
} }
` `
......
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 () { ...@@ -390,7 +390,12 @@ function styleGuide () {
tooltip_CopyToClipboard_Color: appProperties.tooltip_Color, tooltip_CopyToClipboard_Color: appProperties.tooltip_Color,
icon_Color_CopyToClipboard: appProperties.icon_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 () { ...@@ -569,6 +574,12 @@ function styleGuide () {
Color: appProperties.solidBox_TextColor 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({ dropdown_RunTab: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor, BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor, BorderColor: appProperties.dropdown_BorderColor,
......
src/app/ui/styles/dropdown-styles.js
View file @ f5758d8a
...@@ -10,6 +10,7 @@ var css = csjs` ...@@ -10,6 +10,7 @@ var css = csjs`
display : flex; display : flex;
flex-direction : column; flex-direction : column;
margin-right : 10px; margin-right : 10px;
width : auto;
} }
.selectbox { .selectbox {
display : flex; display : flex;
......
src/recorder.js
View file @ f5758d8a
...@@ -131,6 +131,7 @@ class Recorder { ...@@ -131,6 +131,7 @@ class Recorder {
append (timestamp, record) { append (timestamp, record) {
var self = this var self = this
self.data.journal.push({ timestamp, record }) 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` ...@@ -10,7 +10,7 @@ var css = csjs`
.title { .title {
${styles.rightPanel.runTab.titlebox_RunTab} ${styles.rightPanel.runTab.titlebox_RunTab}
display: flex; display: flex;
justify-content: end; justify-content: space-between;
align-items: center; align-items: center;
font-size: 11px; font-size: 11px;
height: 30px; height: 30px;
...@@ -35,11 +35,9 @@ var css = csjs` ...@@ -35,11 +35,9 @@ var css = csjs`
color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard}; color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
} }
.instance { .instance {
${styles.rightPanel.runTab.box_Instance}; min-width: 310px;
margin-bottom: 10px; display: flex;
padding: 10px 15px 15px 15px; flex-direction: column;
position: relative;
overflow: visible;
} }
.instance .title:before { .instance .title:before {
content: "\\25BE"; content: "\\25BE";
...@@ -81,6 +79,7 @@ var css = csjs` ...@@ -81,6 +79,7 @@ var css = csjs`
.closeIcon { .closeIcon {
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
margin-left: 5px;
} }
.udappClose { .udappClose {
display: flex; display: flex;
...@@ -211,7 +210,7 @@ var css = csjs` ...@@ -211,7 +210,7 @@ var css = csjs`
margin-right: 5%; margin-right: 5%;
font-size: 10px; font-size: 10px;
border-width: 1px; border-width: 1px;
width: inherit; width: inherit;
} }
.multiHeader button { .multiHeader button {
display: inline-block; display: inline-block;
......
src/universal-dapp-ui.js
View file @ f5758d8a
...@@ -34,9 +34,8 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract ...@@ -34,9 +34,8 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) { UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
var self = this var self = this
address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex') 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 context = self.udapp.context()
var shortAddress = helper.shortenAddress(address) var shortAddress = helper.shortenAddress(address)
...@@ -48,7 +47,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address ...@@ -48,7 +47,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
if (self.udapp.removable_instances) { 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>` 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 () { function remove () {
...@@ -57,7 +56,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address ...@@ -57,7 +56,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
instanceContainer.appendChild(noInstancesText) instanceContainer.appendChild(noInstancesText)
instance.remove() instance.remove()
} }
function toggleClass () { function toggleClass () {
$(instance).toggleClass(`${css.hidesub}`) $(instance).toggleClass(`${css.hidesub}`)
} }
......
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