From 6d49f6db3553f84cf32e6d2a743daaf29d0cf131 Mon Sep 17 00:00:00 2001 From: alexcherman Date: Thu, 5 Dec 2019 15:42:45 +0100 Subject: [PATCH] Style deploy & run tab --- src/app/tabs/runTab/contractDropdown.js | 5 +- src/app/tabs/runTab/settings.js | 18 ++-- src/app/tabs/styles/run-tab-styles.js | 80 +++++++++--------- src/app/tabs/styles/settings-tab-styles.js | 2 - src/app/udapp/run-tab.js | 6 +- src/app/ui/TreeView.js | 5 +- src/app/ui/card.js | 16 ++-- src/app/ui/multiParamManager.js | 17 ++-- src/app/ui/universal-dapp-ui.js | 10 +-- src/universal-dapp-styles.js | 96 +++++++++------------- 10 files changed, 124 insertions(+), 131 deletions(-) diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js index 6eccd72566..85d16124ac 100644 --- a/src/app/tabs/runTab/contractDropdown.js +++ b/src/app/tabs/runTab/contractDropdown.js @@ -51,10 +51,11 @@ class ContractDropdownUI { this.atAddressButtonInput = yo`` this.selectContractNames = yo`` - this.createPanel = yo`
` + this.createPanel = yo`
` this.orLabel = yo`
or
` let el = yo` -
+
+
Contract
${this.selectContractNames} ${this.compFails} ${info}
diff --git a/src/app/tabs/runTab/settings.js b/src/app/tabs/runTab/settings.js index c3e770e591..007e348886 100644 --- a/src/app/tabs/runTab/settings.js +++ b/src/app/tabs/runTab/settings.js @@ -56,10 +56,10 @@ class SettingsUI { var environmentEl = yo`
-
+
Environment
-
+
${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)} @@ -106,17 +106,17 @@ class SettingsUI { const gasPriceEl = yo`
-
Gas limit
+
Gas limit
` const valueEl = yo`
-
Value
+
Value
- @@ -127,7 +127,7 @@ class SettingsUI { ` const el = yo` -
+
${environmentEl} ${networkEl} ${accountEl} diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js index a4c8fe39fc..8afe366087 100644 --- a/src/app/tabs/styles/run-tab-styles.js +++ b/src/app/tabs/styles/run-tab-styles.js @@ -6,17 +6,16 @@ var css = csjs` flex-direction: column; } .instanceContainerTitle { - font-weight: bold; - margin-bottom: 25px; - font-size: 12px; display: flex; justify-content: space-between; - padding-left: 15px; - height: 0px; + align-items: center; + padding-left: 10px; + margin: 0 0 16px; + font-size: 14px; + line-height: 19px; } .settings { - margin-bottom: 2%; - padding: 10px 0px 15px 15px; + padding: 16px 24px; } .recorderCount { /* margin-right: 30px; */ @@ -27,33 +26,34 @@ var css = csjs` /* font-size: 10px; */ } .crow { - margin-top: .5em; - display: flex; - align-items: center; - /*width: 500px;*/ + display: block; + margin-top: 8px; } .col1 { width: 30%; float: left; align-self: center; } - .col1_1 { - font-size: 12px; - min-width: 75px; - float: left; - align-self: center; + .settingsLabel { + font-size: 11px; + margin-bottom: 4px; + text-transform: uppercase; } .environment { display: flex; align-items: center; position: relative; width: 100%; - padding-right: 25px; + } + .environment a { + margin-left: 7px; } .account { display: flex; align-items: center; - width: 90%; + } + .account i { + margin-left: 12px; } .col2 { border-radius: 3px; @@ -74,7 +74,7 @@ var css = csjs` margin-bottom: 2%; border: none; text-align: center; - padding: 10px 0px 15px 0px; + padding: 16px 14px; } .pendingTxsContainer { display: flex; @@ -84,8 +84,7 @@ var css = csjs` text-align: center; } .container { - margin-bottom: 4%; - padding-left: 15px; + padding: 16px 24px; } .recorderCollapsedView, .recorderExpandedView { @@ -104,7 +103,14 @@ var css = csjs` .subcontainer { display: flex; flex-direction: row; - align-items: baseline; + align-items: center; + margin-bottom: 8px; + } + .subcontainer i { + width: 16px; + display: flex; + justify-content: center; + margin-left: 1px; } .button button{ flex: none; @@ -127,13 +133,13 @@ var css = csjs` border-right: 0; } .atAddressSect { - margin-top: 6px; + margin-top: 8px; height: 32px; } .atAddressSect input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - height: 100%; + height: 32px; + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; } .ataddressinput { padding: .25rem; @@ -141,7 +147,7 @@ var css = csjs` .create { } .input { - font-size: 10px; + font-size: 10px !important; } .noInstancesText { font-style: italic; @@ -209,10 +215,11 @@ var css = csjs` width: 145px; } .orLabel { - margin-left: 44px; + text-align: center; + text-transform: uppercase; } .infoDeployAction { - margin-left: 5px; + margin-left: 1px; font-size: 13px; color: var(--info); } @@ -221,18 +228,17 @@ var css = csjs` display: flex; } .gasNval { - /* transform: scale(0.7); */ - /* transform-origin: left; */ - margin-right: 10px; - width: 100px; + width: 55%; font-size: 0.8rem; } .gasNvalUnit { - /* transform: scale(0.7); */ - /* transform-origin: left; */ - margin-right: 10px; + width: 41%; + margin-left: 10px; font-size: 0.8rem; - width: 70px; + } + .deployDropdown { + text-align: center; + text-transform: uppercase; } ` diff --git a/src/app/tabs/styles/settings-tab-styles.js b/src/app/tabs/styles/settings-tab-styles.js index 44bc2dd3d7..3c7cf404ce 100644 --- a/src/app/tabs/styles/settings-tab-styles.js +++ b/src/app/tabs/styles/settings-tab-styles.js @@ -49,8 +49,6 @@ const css = csjs` margin-bottom: 3px; } input { - margin-right: 5px; - cursor: pointer; width: inherit; } input[type=radio] { diff --git a/src/app/udapp/run-tab.js b/src/app/udapp/run-tab.js index bf2c89a509..b2f27add05 100644 --- a/src/app/udapp/run-tab.js +++ b/src/app/udapp/run-tab.js @@ -47,7 +47,7 @@ export class RunTab extends LibraryPlugin { } renderContainer () { - this.container = yo`
` + this.container = yo`
` var el = yo`
@@ -62,10 +62,10 @@ export class RunTab extends LibraryPlugin { } renderInstanceContainer () { - this.instanceContainer = yo`
` + this.instanceContainer = yo`
` const instanceContainerTitle = yo` -
Deployed Contracts this.event.trigger('clearInstance', [])} diff --git a/src/app/ui/TreeView.js b/src/app/ui/TreeView.js index 391f8be10d..c5d5b0780a 100644 --- a/src/app/ui/TreeView.js +++ b/src/app/ui/TreeView.js @@ -13,6 +13,9 @@ var css = csjs` } .ul_tv { list-style-type: none; + margin: 0; + padding: 0; + border: none; -webkit-margin-before: 0px; -webkit-margin-after: 0px; -webkit-margin-start: 0px; @@ -74,7 +77,7 @@ class TreeView { var children = Object.keys(json).map((innerkey) => { return this.renderObject(json[innerkey], json, innerkey, expand, innerkey) }) - return yo`
    ${children}
` + return yo`
    ${children}
` } formatData (key, data, children, expand, keyPath) { diff --git a/src/app/ui/card.js b/src/app/ui/card.js index 1c9f0d1255..4acefe2942 100644 --- a/src/app/ui/card.js +++ b/src/app/ui/card.js @@ -24,7 +24,7 @@ module.exports = class Card { self._view.statusBar = yo`
${self._opts.collapsedView}
` self._view.cardHeader = yo`
trigger(self._view.arrow)}> -
+
${self._opts.title}
${self._view.statusBar}
@@ -43,7 +43,7 @@ module.exports = class Card { // HTML self._view.el = yo` -
+
${self._view.cardHeader} ${self._view.cardBody}
` @@ -55,12 +55,13 @@ module.exports = class Card { const css = csjs` .cardContainer { - padding : 10px 15px 15px 0; - margin-bottom : 2%; + padding : 16px 24px; + margin : 0; } .cardHeader { display : flex; justify-content : space-between; + align-items : center; } .statusBar {} .cardBody {} @@ -70,9 +71,10 @@ const css = csjs` align-items : center; } .cardTitle { - font-size : 13px; - font-weight : bold; - margin-right : 5px; + font-size : 14px; + font-weight : 400; + margin-right : 8px; + line-height : 19px; } .expandCollapseButton {} .arrow { diff --git a/src/app/ui/multiParamManager.js b/src/app/ui/multiParamManager.js index 8c1d9bb780..c706abf654 100644 --- a/src/app/ui/multiParamManager.js +++ b/src/app/ui/multiParamManager.js @@ -100,7 +100,7 @@ class MultiParamManager { if (this.funABI.inputs) { return yo`
${this.funABI.inputs.map(function (inp) { - return yo`
` + return yo`
` })}
` } @@ -116,17 +116,16 @@ class MultiParamManager { title = this.funABI.type === 'receive' ? '(receive)' : '(fallback)' } - this.basicInputField = yo`` + this.basicInputField = yo`` this.basicInputField.setAttribute('placeholder', this.inputs) this.basicInputField.setAttribute('title', this.inputs) - this.basicInputField.setAttribute('style', 'flex: 4') var onClick = () => { this.clickCallBack(this.funABI.inputs, this.basicInputField.value) } let funcButton = yo`` this.contractActionsContainerSingle = yo` -
+
${funcButton} ${this.basicInputField} this.switchMethodViewOn()} title=${title} > @@ -146,14 +145,13 @@ class MultiParamManager { var expandedButton = yo`` this.contractActionsContainerMulti = yo`
-
-
{ this.switchMethodViewOff() }} class="${css.multiHeader}"> -
${title}
+
+
{ this.switchMethodViewOff() }} class="${css.multiHeader} run-instance-multi-header"> +
${title}
${this.multiFields}
- ${expandedButton} ${copyToClipboard( () => { var multiString = this.getMultiValsString() @@ -170,12 +168,13 @@ class MultiParamManager { return encodeObj.data } }, 'Encode values of input fields & copy to clipboard', 'fa-clipboard')} + ${expandedButton}
` var contractProperty = yo` -
+
${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti}
` diff --git a/src/app/ui/universal-dapp-ui.js b/src/app/ui/universal-dapp-ui.js index 5a21f2c41e..cc06e662e0 100644 --- a/src/app/ui/universal-dapp-ui.js +++ b/src/app/ui/universal-dapp-ui.js @@ -54,12 +54,12 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address let self = this address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex') address = ethJSUtil.toChecksumAddress(address) - var instance = yo`
` + var instance = yo`
` const context = this.blockchain.context() var shortAddress = helper.shortenAddress(address) var title = yo` -
+
@@ -87,7 +87,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address title.querySelector('.btn-group').appendChild(close) var contractActionsWrapper = yo` -
+
` @@ -97,7 +97,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address } function toggleClass (e) { - $(instance).toggleClass(`${css.hidesub}`) + $(instance).toggleClass(`${css.hidesub} expanded`) // e.currentTarget.querySelector('i') e.currentTarget.querySelector('i').classList.toggle(`fa-angle-right`) e.currentTarget.querySelector('i').classList.toggle(`fa-angle-down`) @@ -223,7 +223,7 @@ UniversalDAppUI.prototype.getCallButton = function (args) { self.blockchain.getInputs(args.funABI) ) - const contractActionsContainer = yo`
${multiParamManager.render()}
` + const contractActionsContainer = yo`
${multiParamManager.render()}
` contractActionsContainer.appendChild(outputOverride) return contractActionsContainer diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js index bb1ab54c18..b384971f08 100644 --- a/src/universal-dapp-styles.js +++ b/src/universal-dapp-styles.js @@ -9,31 +9,26 @@ var css = csjs` display: flex; justify-content: space-between; font-size: 11px; - /* height: 30px; */ width: 100%; overflow: hidden; word-break: break-word; line-height: initial; overflow: visible; - margin-bottom: 0px; - padding-left: 0px; - padding-right: 10px; - } - .noInstancesText { - + margin-bottom: 8px; + padding: 8px 10px; } .titleLine { display: flex; align-items: baseline; } .titleText { - /* margin-right: 1em; */ word-break: break-word; min-width: 170px; width: 100%; } .spanTitleText { - /* font-size: .8rem; */ + line-height: 12px; + padding: 0; font-size: 11px; width:100%; } @@ -44,7 +39,6 @@ var css = csjs` color: var(--primary); } .titleExpander { - /* margin-right: 10px; */ padding: 5px 7px; } .nameNbuts { @@ -54,9 +48,7 @@ var css = csjs` } .instance { display: block; - /* display: flex; */ flex-direction: column; - /* padding: 5px 0 0 10px; */ margin-bottom: 10px; } .instance.hidesub .title { @@ -69,19 +61,21 @@ var css = csjs` display: none; } .methCaret { - margin-right: 5px; + min-width: 12px; + width: 12px; + margin-left: 4px; cursor: pointer; font-size: 16px; - padding-top: 5px; - vertical-align: top; + line-height: 0.6; + vertical-align: middle; + padding: 0; } .cActionsWrapper { - padding: 0px 0 10px 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; + padding: 0 10px 7px; } .group:after { content: ""; @@ -93,11 +87,9 @@ var css = csjs` display: flex; overflow: hidden; } - .contractActions { - } .instanceButton { + height: 32px; border-radius: 3px; - flex: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -107,14 +99,12 @@ var css = csjs` cursor: pointer; margin-left: 5px; } - .udapp {} .udappClose { display: flex; justify-content: flex-end; } .contractProperty { - margin-bottom: 0.4em; - margin-top: 1em; + margin: 0 0 8px; width:100%; } .contractProperty.hasArgs input { @@ -126,10 +116,8 @@ var css = csjs` border-bottom-left-radius: 0; } .contractProperty button { - /* background-color: var(--warning); */ min-width: 100px; width: 100px; - /* font-size: 10px; */ margin:0; word-break: inherit; } @@ -139,7 +127,6 @@ var css = csjs` border-color: lightgray; } .contractProperty.constant button { - /* background-color:var(--info); */ min-width: 100px; width: 100px; margin:0; @@ -149,9 +136,6 @@ var css = csjs` overflow: hidden; text-overflow: ellipsis; } - .contractProperty input { - /* width: 75% */ - } .contractProperty > .value { box-sizing: border-box; float: left; @@ -164,42 +148,44 @@ var css = csjs` border-bottom: 4px solid var(--light); } .contractActionsContainer { - width: 98%; + width: 100%; } .contractActionsContainerSingle { display: flex; width: 100%; } + .contractActionsContainerSingle i { + line-height: 2; + } .contractActionsContainerMulti { display:none; width: 100%; } .contractActionsContainerMultiInner { - margin-bottom: 10px; - padding: 0px 5px 5px 5px; + width: 100%; + padding: 16px 8px 16px 14px; background-color: var(--light); - width: 99%; border-radius: 3px; } .multiHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; text-align: left; font-size: 10px; - margin-bottom: 5px; font-weight: bold; } .contractActionsContainerMultiInner .multiTitle { padding-left: 10px; } .contractProperty .multiTitle { + padding: 0; + line-height: 16px; display: inline-block; - width: 90%; font-size: 12px; - height: 25px; - padding-left: 20px; font-weight: bold; - line-height: 25px; cursor: default; - padding-top: 5px; } .contractProperty .contractActionsContainerMultiInner .multiArg label{ text-align: right; @@ -219,26 +205,26 @@ var css = csjs` cursor: default; } .multiArg { - margin-bottom: 8px; - /* display: flex; */ - clear:both; + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 4px; } .multiArg input{ padding: 5px; } - .multiArg label { - float: left; - margin-right: 6px; - font-size: 10px; - width: 30%; - padding-top: 5px; - word-break: break-all; + width: auto; + padding: 0; + margin: 0 4px 0 0; + font-size: 10px; + line-height: 12px; + text-align: right; + word-break: initial; } .multiArg button { + max-width: 100px; border-radius: 3px; - float: right; - margin-right: 2%; border-width: 1px; width: inherit; } @@ -252,12 +238,12 @@ var css = csjs` } .hasArgs input { display: block; + height: 32px; border: 1px solid #dddddd; padding: .36em; border-left: none; padding: 8px 8px 8px 10px; - font-size: 10px; - /* height: 25px; */ + font-size: 10px !important; } .hasArgs button { border-top-right-radius: 0; @@ -271,9 +257,7 @@ var css = csjs` border-radius: 3px; } .contractActionsContainerMultiInner .multiArg i { - padding-right: 15px; - padding-top: 5px; - float: right; + padding-right: 10px; }, .hideWarningsContainer { display: flex;