From d29a25d56fd7925e8fe624f71b344f77005d32ec Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Tue, 2 Apr 2019 14:09:37 +0200 Subject: [PATCH 1/5] a step towards runtab bootstrapped --- src/app/ui/styles-guide/theme-chooser.js | 5 +++-- src/multiParamManager.js | 4 ++-- src/universal-dapp-styles.js | 6 +++--- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/app/ui/styles-guide/theme-chooser.js b/src/app/ui/styles-guide/theme-chooser.js index b5cc126985..4cd6da1fb4 100644 --- a/src/app/ui/styles-guide/theme-chooser.js +++ b/src/app/ui/styles-guide/theme-chooser.js @@ -11,10 +11,11 @@ const themes = [ {name: 'Yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'}, {name: 'Cyborg', quality: 'dark', url: 'https://bootswatch.com/4/cyborg/bootstrap.min.css'}, {name: 'Darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'}, - {name: 'Slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'} + {name: 'Slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'}, + {name: 'Superhero', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/superhero/bootstrap.min.css'} ] -const defaultTheme = 'Superhero' +const defaultTheme = 'Cerulean' module.exports = { event: new EventEmitter(), diff --git a/src/multiParamManager.js b/src/multiParamManager.js index a780119cb9..942338d3f4 100644 --- a/src/multiParamManager.js +++ b/src/multiParamManager.js @@ -123,7 +123,7 @@ class MultiParamManager { var onClick = (domEl) => { this.clickCallBack(this.funABI.inputs, this.basicInputField.value) } - +// TODO: if this is a lookup only make this button btn-info this.contractActionsContainerSingle = yo`
${this.basicInputField} { this.switchMethodViewOn() }} title=${title} >
` @@ -171,7 +171,7 @@ class MultiParamManager { ` var contractProperty = yo`
${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti}
` - +// TODO: add class for btn-info to the button and remove stuff from the class if (this.lookupOnly) { contractProperty.classList.add(css.constant) button.setAttribute('title', (title + ' - call')) diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js index a085718912..7683d01c45 100644 --- a/src/universal-dapp-styles.js +++ b/src/universal-dapp-styles.js @@ -109,10 +109,10 @@ var css = csjs` border-bottom-left-radius: 0; } .contractProperty button { - background-color: var(--warning); + /* background-color: var(--warning); */ min-width: 100px; width: 100px; - font-size: 10px; + /* font-size: 10px; */ margin:0; word-break: inherit; } @@ -233,7 +233,7 @@ var css = csjs` border-left: none; padding: 8px 8px 8px 10px; font-size: 10px; - height: 25px; + /* height: 25px; */ } .hasArgs button { border-top-right-radius: 0; From 06bce3eb1650f73b6a71aaab2c68b8c59b665ddf Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Wed, 3 Apr 2019 14:14:26 +0200 Subject: [PATCH 2/5] update to runtab --- src/multiParamManager.js | 7 +++++++ src/universal-dapp-styles.js | 18 ++++-------------- src/universal-dapp-ui.js | 6 ++++-- 3 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/multiParamManager.js b/src/multiParamManager.js index 942338d3f4..1f431cf48f 100644 --- a/src/multiParamManager.js +++ b/src/multiParamManager.js @@ -124,6 +124,9 @@ class MultiParamManager { this.clickCallBack(this.funABI.inputs, this.basicInputField.value) } // TODO: if this is a lookup only make this button btn-info +// otherwise it needs to have btn-warning injected +// or do we need to only do this in 1 place - I have a feeling that this will happen in multiple places + this.contractActionsContainerSingle = yo`
${this.basicInputField} { this.switchMethodViewOn() }} title=${title} >
` @@ -177,8 +180,12 @@ class MultiParamManager { button.setAttribute('title', (title + ' - call')) button.innerHTML = 'call' this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).setAttribute('title', (title + ' - call')) + this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-info') + button.classList.add('btn-info') } else { + this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-warning') button.innerHTML = 'transact' + button.classList.add('btn-warning') } if (this.funABI.inputs && this.funABI.inputs.length > 0) { diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js index 7683d01c45..fc5a1a5c51 100644 --- a/src/universal-dapp-styles.js +++ b/src/universal-dapp-styles.js @@ -42,25 +42,15 @@ var css = csjs` padding: 5px 0 0 10px; margin-bottom: 10px; } - .instance .title:before { - content: "\\25BE"; - margin-right: 5%; - font-size: 1.2rem - } - .instance.hidesub .title:before { - content: "\\25B8"; - margin-right: 5%; - font-size: 1.2rem; - } - .instance.hidesub > * { - display: none; - } .instance.hidesub .title { display: flex; } .instance.hidesub .udappClose { display: flex; } + .instance.hidesub > * { + display: none; + } .methCaret { margin-right: 5px; cursor: pointer; @@ -122,7 +112,7 @@ var css = csjs` border-color: lightgray; } .contractProperty.constant button { - background-color:var(--info); + /* background-color:var(--info); */ min-width: 100px; width: 100px; font-size: 10px; diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js index 3eea0c1b25..0ec1ba9c84 100644 --- a/src/universal-dapp-ui.js +++ b/src/universal-dapp-ui.js @@ -68,8 +68,9 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address var shortAddress = helper.shortenAddress(address) var title = yo` -
-
${contractName} at ${shortAddress} (${context})
+
+ +
${contractName} at ${shortAddress} (${context})
${copyToClipboard(() => address)}
` @@ -82,6 +83,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address } function toggleClass () { + console.log('hit') $(instance).toggleClass(`${css.hidesub}`) } From ba96af14d588a9a2d10b446bc511e012b48c42d6 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Thu, 4 Apr 2019 11:17:38 +0200 Subject: [PATCH 3/5] updating styles in universal dapp --- src/universal-dapp-styles.js | 3 +++ src/universal-dapp-ui.js | 14 ++++++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js index fc5a1a5c51..183b233b85 100644 --- a/src/universal-dapp-styles.js +++ b/src/universal-dapp-styles.js @@ -57,6 +57,9 @@ var css = csjs` font-size: 16px; padding-top: 5px; vertical-align: top; + } + .cActionsWrapper { + } .group:after { content: ""; diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js index 0ec1ba9c84..ca0d57d52f 100644 --- a/src/universal-dapp-ui.js +++ b/src/universal-dapp-ui.js @@ -68,8 +68,8 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address var shortAddress = helper.shortenAddress(address) var title = yo` -
- +
+
${contractName} at ${shortAddress} (${context})
${copyToClipboard(() => address)}
` @@ -77,14 +77,20 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address var close = yo`
` title.appendChild(close) + var contractActionsWrapper = yo` +
+
` + function remove () { instance.remove() // @TODO perhaps add a callack here to warn the caller that the instance has been removed } - function toggleClass () { - console.log('hit') + function toggleClass (e) { $(instance).toggleClass(`${css.hidesub}`) + // e.currentTarget.querySelector('i') + e.currentTarget.querySelector('i').classList.toggle(`fa-caret-right`) + e.currentTarget.querySelector('i').classList.toggle(`fa-caret-down`) } instance.appendChild(title) From 3b1814fa68e37a01aaad307d0440e9789ea94773 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Thu, 4 Apr 2019 18:20:16 +0200 Subject: [PATCH 4/5] getting boostrap into the instance & multiparam manager --- src/app/tabs/styles/run-tab-styles.js | 2 +- src/universal-dapp-styles.js | 28 +++++++++++++++++++-------- src/universal-dapp-ui.js | 21 ++++++++++++-------- 3 files changed, 34 insertions(+), 17 deletions(-) diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js index 47661923d3..75a14112b4 100644 --- a/src/app/tabs/styles/run-tab-styles.js +++ b/src/app/tabs/styles/run-tab-styles.js @@ -117,7 +117,7 @@ var css = csjs` margin: 0; min-width: 100px; width: 100px; - font-size: 10px; + /* font-size: 10px; */ word-break: inherit; border-top-right-radius: 0; border-bottom-right-radius: 0; diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js index 183b233b85..a3d65df622 100644 --- a/src/universal-dapp-styles.js +++ b/src/universal-dapp-styles.js @@ -10,13 +10,14 @@ var css = csjs` justify-content: space-between; align-items: center; font-size: 11px; - height: 30px; - width: 97%; + /* height: 30px; */ + /* width: 97%; */ overflow: hidden; word-break: break-word; line-height: initial; overflow: visible; - margin-bottom: 10px; + margin-bottom: 0px; + padding-left: 10px; } .noInstancesText { @@ -26,7 +27,7 @@ var css = csjs` align-items: baseline; } .titleText { - margin-right: 1em; + /* margin-right: 1em; */ word-break: break-word; min-width: 230px; } @@ -34,12 +35,18 @@ var css = csjs` .title .copy { color: var(--primary); } + .titleExpander { + margin-right: 10px; + } + .nameNbuts { + flex-wrap: nowrap; + } .instance { min-width: 310px; display: block; /* display: flex; */ flex-direction: column; - padding: 5px 0 0 10px; + /* padding: 5px 0 0 10px; */ margin-bottom: 10px; } .instance.hidesub .title { @@ -59,7 +66,12 @@ var css = csjs` vertical-align: top; } .cActionsWrapper { - + padding: 10px; + border: 1px solid rgba(0,0,0,0.125); + border-top-left-radius: 0; + border-bottom-left-radius: 0.25rem; + border-top-rightt-radius: 0; + border-bottom-right-radius: 0.25rem; } .group:after { content: ""; @@ -184,7 +196,7 @@ var css = csjs` .contractProperty.constant .multiTitle { display: inline-block; width: 90%; - font-size: 10px; + /* font-size: 10px; */ height: 25px; padding-left: 20px; font-weight: bold; @@ -232,7 +244,7 @@ var css = csjs` border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; - height: 25px; + /* height: 25px; */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js index ca0d57d52f..06b856a92a 100644 --- a/src/universal-dapp-ui.js +++ b/src/universal-dapp-ui.js @@ -63,19 +63,23 @@ 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`
` + var instance = yo`
` var context = self.udapp.context() var shortAddress = helper.shortenAddress(address) var title = yo`
- -
${contractName} at ${shortAddress} (${context})
- ${copyToClipboard(() => address)} + +
+
${contractName} at ${shortAddress} (${context})
+
+ +
+
` - var close = yo`
` - title.appendChild(close) + var close = yo`` + title.querySelector('.btn-group').appendChild(close) var contractActionsWrapper = yo`
@@ -94,11 +98,12 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address } instance.appendChild(title) + instance.appendChild(contractActionsWrapper) // Add the fallback function var fallback = self.udapp.getFallbackInterface(contractABI) if (fallback) { - instance.appendChild(this.getCallButton({ + contractActionsWrapper.appendChild(this.getCallButton({ funABI: fallback, address: address, contractAbi: contractABI, @@ -111,7 +116,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address return } // @todo getData cannot be used with overloaded functions - instance.appendChild(this.getCallButton({ + contractActionsWrapper.appendChild(this.getCallButton({ funABI: funABI, address: address, contractAbi: contractABI, From 0bc7dcc91eca8f2362691519ea397c3f72447ef5 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Thu, 4 Apr 2019 22:06:17 +0200 Subject: [PATCH 5/5] update to tests/compiling.js --- test-browser/tests/ballot.js | 6 +++--- test-browser/tests/compiling.js | 6 +++--- test-browser/tests/simpleContract.js | 4 ++-- test-browser/tests/units/testRecorder.js | 6 +++--- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/test-browser/tests/ballot.js b/test-browser/tests/ballot.js index 64ceee05db..8460565673 100644 --- a/test-browser/tests/ballot.js +++ b/test-browser/tests/ballot.js @@ -38,7 +38,7 @@ function runTests (browser, testData) { .setValue('input[placeholder="uint8 _numProposals"]', '1') .click('#runTabView button[class^="instanceButton"]') .waitForElementPresent('.instance:nth-of-type(2)') - .click('.instance:nth-of-type(2)') + .click('.instance:nth-of-type(2) > div > button') .testFunction('delegate - transact (not payable)', '0x0571a2439ea58bd349dd130afb8aff62a33af14c06de0dbc3928519bdf13ce2e', `[vm]\nfrom:0xca3...a733c\nto:Ballot.delegate(address) 0x692...77b3a\nvalue:0 wei\ndata:0x5c1...4d2db\nlogs:0\nhash:0x057...3ce2e`, {types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"'}, null, null) @@ -66,7 +66,7 @@ function runTests (browser, testData) { }) }) .clickLaunchIcon('run') - .click('div[class^="udappClose"]') + .click('button[class^="udappClose"]') .perform((client, done) => { console.log('ballot.abi') contractHelper.addFile(browser, 'ballot.abi', { content: ballotABI }, () => { @@ -89,7 +89,7 @@ function runTests (browser, testData) { .pause(500) .perform((client, done) => { console.log('delegate - transact (not payable)') - browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2)').testFunction('delegate - transact (not payable)', '0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f', + browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2) > div > button').testFunction('delegate - transact (not payable)', '0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f', `[vm]\nfrom:0xca3...a733c\nto:Ballot.delegate(address) 0x692...77b3a\nvalue:0 wei\ndata:0x5c1...4d2db\nlogs:0\nhash:0xd3c...df10f`, {types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"'}, null, null, () => { done() }) }).end() diff --git a/test-browser/tests/compiling.js b/test-browser/tests/compiling.js index 7817299af6..f961f7304d 100644 --- a/test-browser/tests/compiling.js +++ b/test-browser/tests/compiling.js @@ -41,7 +41,7 @@ function testSimpleContract (browser, callback) { browser.clickLaunchIcon('run') .click('#runTabView button[class^="instanceButton"]') .waitForElementPresent('.instance:nth-of-type(2)') - .click('.instance:nth-of-type(2)') + .click('.instance:nth-of-type(2) > div > button') .click('#runTabView .instance div[class^="title"]') .click('#runTabView .instance div[class^="title"]') .testFunction('f - transact (not payable)', @@ -72,7 +72,7 @@ function testReturnValues (browser, callback) { browser.clickLaunchIcon('run') .click('#runTabView button[class^="instanceButton"]') .waitForElementPresent('.instance:nth-of-type(2)') - .click('.instance:nth-of-type(2)') + .click('.instance:nth-of-type(2) > div > button') .testFunction('retunValues1 - transact (not payable)', '0xc3660c7ab6899f196e77d3ab3749169e22c00ae7f1b8fe3af0ce54df49504019', `[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues1() 0x5e7...26e9f\nvalue:0 wei\ndata:0x9ed...59eb7\nlogs:0\nhash:0xc36...04019`, @@ -110,7 +110,7 @@ function testInputValues (browser, callback) { browser.clickLaunchIcon('run') .click('#runTabView button[class^="instanceButton"]') .waitForElementPresent('.instance:nth-of-type(2)') - .click('.instance:nth-of-type(2)') + .click('.instance:nth-of-type(2) > div > button') .testFunction('inputValue1 - transact (not payable)', '0xf3265e3d9cd9299958bf81bed3cdfdd537942f85b9e0b95c5468c691d9396505', `[vm]\nfrom:0xca3...a733c\nto:test.inputValue1(uint256,int256,string) 0x8c1...401f5\nvalue:0 wei\ndata:0xd69...00000\nlogs:0\nhash:0xf32...96505`, diff --git a/test-browser/tests/simpleContract.js b/test-browser/tests/simpleContract.js index c76a15305e..ba3de969e3 100644 --- a/test-browser/tests/simpleContract.js +++ b/test-browser/tests/simpleContract.js @@ -85,7 +85,7 @@ function testAutoDeployLib (browser, callback) { contractHelper.createContract(browser, '', () => { contractHelper.getAddressAtPosition(browser, 0, (address) => { console.log(address) - browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2)').perform(() => { + browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2) > div > button').perform(() => { contractHelper.testConstantFunction(browser, address, 'get - call', '', '0: uint256: 45', () => { callback(null, browser) }) }) }) @@ -146,7 +146,7 @@ function checkDeployShouldSucceed (browser, address, callback) { contractHelper.createContract(browser, '', () => { contractHelper.getAddressAtPosition(browser, 1, (address) => { browser.waitForElementPresent('.instance:nth-of-type(3)') - .click('.instance:nth-of-type(3)').perform(() => { + .click('.instance:nth-of-type(3) > div > button').perform(() => { contractHelper.testConstantFunction(browser, address, 'get - call', '', '0: uint256: 45', () => { callback(null, browser) }) }) }) diff --git a/test-browser/tests/units/testRecorder.js b/test-browser/tests/units/testRecorder.js index 5f5f5f201d..ac8eb30322 100644 --- a/test-browser/tests/units/testRecorder.js +++ b/test-browser/tests/units/testRecorder.js @@ -14,9 +14,9 @@ module.exports = { .click('div[class^="cardContainer"] i[class^="arrow"]') .click('#runTabView .runtransaction') .waitForElementPresent('.instance:nth-of-type(2)') - .click('.instance:nth-of-type(2)') + .click('.instance:nth-of-type(2) > div > button') .waitForElementPresent('.instance:nth-of-type(3)') - .click('.instance:nth-of-type(3)') + .click('.instance:nth-of-type(3) > div > button') .clickFunction('getInt - call') .clickFunction('getAddress - call') .clickFunction('getFromLib - call') @@ -38,7 +38,7 @@ module.exports = { }) }) .waitForElementPresent('.instance:nth-of-type(2)') - .click('.instance:nth-of-type(2)') + .click('.instance:nth-of-type(2) > div > button') .perform((client, done) => { browser.clickFunction('set - transact (not payable)', {types: 'uint256 _p', values: '34'}) .click('i.savetransaction').modalFooterOKClick().getEditorValue(function (result) {