aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/app/account-detail.js25
-rw-r--r--ui/app/app.js31
-rw-r--r--ui/app/components/loading.js47
-rw-r--r--ui/app/components/shapeshift-form.js10
-rw-r--r--ui/app/components/tab-bar.js1
-rw-r--r--ui/app/components/token-list.js40
-rw-r--r--ui/app/components/transaction-list.js12
-rw-r--r--ui/app/conf-tx.js48
-rw-r--r--ui/app/css/index.css46
-rw-r--r--ui/app/css/lib.css1
10 files changed, 129 insertions, 132 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 18c867153..24561c32e 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -4,7 +4,6 @@ const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('./actions')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
const valuesFor = require('./util').valuesFor
const Identicon = require('./components/identicon')
const EthBalance = require('./components/eth-balance')
@@ -51,14 +50,9 @@ AccountDetailScreen.prototype.render = function () {
return (
- h('.account-detail-section', {
- style: {
- height: '100%',
- maxWidth: '850px',
- },
- }, [
+ h('.account-detail-section.full-flex-height', [
- // identicon, label, balance, etc
+ // identicon, label, balance, etc
h('.account-data-subsection', {
style: {
margin: '0 20px',
@@ -205,14 +199,7 @@ AccountDetailScreen.prototype.render = function () {
]),
// subview (tx history, pk export confirm, buy eth warning)
- h(ReactCSSTransitionGroup, {
- className: 'css-transition-group',
- transitionName: 'main',
- transitionEnterTimeout: 300,
- transitionLeaveTimeout: 300,
- }, [
- this.subview(),
- ]),
+ this.subview(),
])
)
@@ -240,11 +227,7 @@ AccountDetailScreen.prototype.subview = function () {
AccountDetailScreen.prototype.tabSections = function () {
const { currentAccountTab } = this.props
- return h('section.tabSection', {
- style: {
- height: '100%',
- },
- }, [
+ return h('section.tabSection.full-flex-height.grow-tenx', [
h(TabBar, {
tabs: [
diff --git a/ui/app/app.js b/ui/app/app.js
index 973cb756c..6da48b9b6 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -3,7 +3,6 @@ const Component = require('react').Component
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const actions = require('./actions')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
// init
const InitializeMenuScreen = require('./first-time/init-menu')
const NewKeyChainScreen = require('./new-keychain')
@@ -67,17 +66,15 @@ App.prototype.render = function () {
const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
const loadMessage = loadingMessage || isLoadingNetwork ?
`Connecting to ${this.getNetworkName()}` : null
-
log.debug('Main ui render function')
return (
- h('.flex-column.flex-grow.full-height', {
+ h('.flex-column.full-height', {
style: {
// Windows was showing a vertical scroll bar:
overflow: 'hidden',
position: 'relative',
- height: '100%',
alignItems: 'center',
},
}, [
@@ -93,20 +90,12 @@ App.prototype.render = function () {
}),
// panel content
- h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
+ h('.app-primary' + (transForward ? '.from-right' : '.from-left'), {
style: {
- height: '100%',
maxWidth: '850px',
},
}, [
- h(ReactCSSTransitionGroup, {
- className: 'css-transition-group',
- transitionName: 'main',
- transitionEnterTimeout: 300,
- transitionLeaveTimeout: 300,
- }, [
- this.renderPrimary(),
- ]),
+ this.renderPrimary(),
]),
])
)
@@ -123,10 +112,8 @@ App.prototype.renderAppBar = function () {
return (
- h('div', {
- style: {
- width: '100%',
- },
+ h('.full-width', {
+ height: '38px',
}, [
h('.app-header.flex-row.flex-space-between', {
@@ -330,11 +317,6 @@ App.prototype.renderDropdown = function () {
h(DropdownMenuItem, {
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
- onClick: () => { this.props.dispatch(actions.showImportPage()) },
- }, 'Import Account'),
-
- h(DropdownMenuItem, {
- closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
onClick: () => { this.props.dispatch(actions.lockMetamask()) },
}, 'Lock'),
@@ -515,6 +497,8 @@ App.prototype.toggleMetamaskActive = function () {
App.prototype.renderCustomOption = function (provider) {
const { rpcTarget, type } = provider
+ const props = this.props
+
if (type !== 'rpc') return null
// Concatenate long URLs
@@ -533,6 +517,7 @@ App.prototype.renderCustomOption = function (provider) {
DropdownMenuItem,
{
key: rpcTarget,
+ onClick: () => props.dispatch(actions.setCustomRpc(rpcTarget)),
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
},
[
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 87d6f5d20..92d17ccd6 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,7 +1,6 @@
const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
inherits(LoadingIndicator, Component)
@@ -15,35 +14,27 @@ LoadingIndicator.prototype.render = function () {
const { isLoading, loadingMessage } = this.props
return (
- h(ReactCSSTransitionGroup, {
- className: 'css-transition-group',
- transitionName: 'loader',
- transitionEnterTimeout: 150,
- transitionLeaveTimeout: 150,
+ isLoading ? h('div', {
+ style: {
+ zIndex: 10,
+ position: 'absolute',
+ flexDirection: 'column',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ width: '100%',
+ background: 'rgba(255, 255, 255, 0.8)',
+ },
}, [
+ h('img', {
+ src: 'images/loading.svg',
+ }),
- isLoading ? h('div', {
- style: {
- zIndex: 10,
- position: 'absolute',
- flexDirection: 'column',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- height: '100%',
- width: '100%',
- background: 'rgba(255, 255, 255, 0.8)',
- },
- }, [
- h('img', {
- src: 'images/loading.svg',
- }),
-
- h('br'),
-
- showMessageIfAny(loadingMessage),
- ]) : null,
- ])
+ h('br'),
+
+ showMessageIfAny(loadingMessage),
+ ]) : null
)
}
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index e0a720426..76a265d63 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -2,7 +2,6 @@ const PersistentForm = require('../../lib/persistent-form')
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
const actions = require('../actions')
const Qr = require('./qr-code')
const isValidAddress = require('../util').isValidAddress
@@ -24,14 +23,7 @@ function ShapeshiftForm () {
}
ShapeshiftForm.prototype.render = function () {
- return h(ReactCSSTransitionGroup, {
- className: 'css-transition-group',
- transitionName: 'main',
- transitionEnterTimeout: 300,
- transitionLeaveTimeout: 300,
- }, [
- this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain(),
- ])
+ return this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain()
}
ShapeshiftForm.prototype.renderMain = function () {
diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js
index 6295e7dd9..bef444a48 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/tab-bar.js
@@ -21,6 +21,7 @@ TabBar.prototype.render = function () {
background: '#EBEBEB',
color: '#AEAEAE',
paddingTop: '4px',
+ minHeight: '30px',
},
}, tabs.map((tab) => {
const { key, content } = tab
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 20cfa897e..79ec3f351 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -47,10 +47,11 @@ TokenList.prototype.render = function () {
return h(TokenCell, tokenData)
})
- return h('div', [
- h('ol', {
+ return h('.full-flex-height', [
+ this.renderTokenStatusBar(),
+
+ h('ol.full-flex-height.flex-column', {
style: {
- height: '260px',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
@@ -63,6 +64,7 @@ TokenList.prototype.render = function () {
flex-direction: row;
align-items: center;
padding: 10px;
+ min-height: 50px;
}
li.token-cell > h3 {
@@ -76,17 +78,35 @@ TokenList.prototype.render = function () {
`),
...tokenViews,
- tokenViews.length ? null : this.message('No Tokens Found.'),
+ h('.flex-grow'),
]),
- this.addTokenButtonElement(),
])
}
-TokenList.prototype.addTokenButtonElement = function () {
- return h('div', [
- h('div.footer.hover-white.pointer', {
+TokenList.prototype.renderTokenStatusBar = function () {
+ const { tokens } = this.state
+
+ let msg
+ if (tokens.length > 0) {
+ msg = `You own ${tokens.length} tokens`
+ } else {
+ msg = `No tokens found`
+ }
+
+ return h('div', {
+ style: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ minHeight: '70px',
+ padding: '10px',
+ },
+ }, [
+ h('span', msg),
+ h('button', {
key: 'reveal-account-bar',
- onClick: () => {
+ onClick: (event) => {
+ event.preventDefault()
this.props.addToken()
},
style: {
@@ -97,7 +117,7 @@ TokenList.prototype.addTokenButtonElement = function () {
alignItems: 'center',
},
}, [
- h('i.fa.fa-plus.fa-lg'),
+ 'ADD TOKEN',
]),
])
}
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index ae6aaec8c..192931486 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -24,9 +24,9 @@ TransactionList.prototype.render = function () {
return (
- h('section.transaction-list', {
+ h('section.transaction-list.full-flex-height', {
style: {
- height: '100%',
+ justifyContent: 'center',
},
}, [
@@ -68,13 +68,15 @@ TransactionList.prototype.render = function () {
},
})
})
- : h('.flex-center', {
+ : h('.flex-center.full-flex-height', {
style: {
flexDirection: 'column',
- height: '100%',
+ justifyContent: 'center',
},
}, [
- 'No transaction history.',
+ h('p', {
+ marginTop: '50px',
+ }, 'No transaction history.'),
]),
]),
])
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 747d3ce2b..34727ff78 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -1,6 +1,5 @@
const inherits = require('util').inherits
const Component = require('react').Component
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('./actions')
@@ -92,34 +91,25 @@ ConfirmTxScreen.prototype.render = function () {
warningIfExists(props.warning),
- h(ReactCSSTransitionGroup, {
- className: 'css-transition-group',
- transitionName: 'main',
- transitionEnterTimeout: 300,
- transitionLeaveTimeout: 300,
- }, [
-
- currentTxView({
- // Properties
- txData: txData,
- key: txData.id,
- selectedAddress: props.selectedAddress,
- accounts: props.accounts,
- identities: props.identities,
- conversionRate,
- currentCurrency,
- blockGasLimit,
- // Actions
- buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
- sendTransaction: this.sendTransaction.bind(this),
- cancelTransaction: this.cancelTransaction.bind(this, txData),
- signMessage: this.signMessage.bind(this, txData),
- signPersonalMessage: this.signPersonalMessage.bind(this, txData),
- cancelMessage: this.cancelMessage.bind(this, txData),
- cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
- }),
-
- ]),
+ currentTxView({
+ // Properties
+ txData: txData,
+ key: txData.id,
+ selectedAddress: props.selectedAddress,
+ accounts: props.accounts,
+ identities: props.identities,
+ conversionRate,
+ currentCurrency,
+ blockGasLimit,
+ // Actions
+ buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
+ sendTransaction: this.sendTransaction.bind(this),
+ cancelTransaction: this.cancelTransaction.bind(this, txData),
+ signMessage: this.signMessage.bind(this, txData),
+ signPersonalMessage: this.signPersonalMessage.bind(this, txData),
+ cancelMessage: this.cancelMessage.bind(this, txData),
+ cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
+ }),
])
)
}
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 2ae92bbd6..00d4bea93 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -25,19 +25,48 @@ html, body {
padding: 0;
}
-.css-transition-group {
- flex: 1;
- height: 100%;
+html {
+ min-height: 400px;
+}
+
+.app-root {
+ overflow: hidden;
+ position: relative
+}
+
+.app-primary {
+ display: flex;
}
input:focus, textarea:focus {
outline: none;
}
+.full-size {
+ height: 100%;
+ width: 100%;
+}
+
+.full-width {
+ width: 100%;
+}
+
+.full-height {
+ height: 100%;
+}
+
+.full-flex-height {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+}
+
#app-content {
overflow-x: hidden;
min-width: 357px;
height: 100%;
+ display: flex;
+ flex-direction: column;
}
button, input[type="submit"] {
@@ -138,10 +167,6 @@ h2.page-subtitle {
margin: 12px;
}
-.app-primary {
-
-}
-
.app-footer {
padding-bottom: 10px;
align-items: center;
@@ -413,7 +438,14 @@ input.large-input {
.account-detail-section {
display: flex;
flex-wrap: wrap;
+ overflow-y: auto;
+ flex-direction: inherit;
}
+
+.grow-tenx {
+ flex-grow: 10;
+}
+
.name-label{
}
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index b0ca958a2..98570859a 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -270,3 +270,4 @@ hr.horizontal-line {
margin-top: 20px;
color: red;
}
+
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-27 02:56:19 +0800