From 1ff9995fe5d7bb070adbd04dd4a18f282754c64f Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Thu, 15 Mar 2018 11:39:46 +0100 Subject: [PATCH 01/25] Start with routes for new page --- src/constants/routes.js | 1 + src/utils/routes.js | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/src/constants/routes.js b/src/constants/routes.js index 78a3106a86..74e76fe126 100644 --- a/src/constants/routes.js +++ b/src/constants/routes.js @@ -7,6 +7,7 @@ export default { searchResult: { path: '/result' }, transaction: { path: '/transactions' }, login: { path: '/' }, + accounts: { path: '/accounts' }, addAccount: { path: '/add-account' }, register: { path: '/register' }, sidechains: { path: '/sidechains' }, diff --git a/src/utils/routes.js b/src/utils/routes.js index caaba26708..08c562a5e7 100644 --- a/src/utils/routes.js +++ b/src/utils/routes.js @@ -31,6 +31,11 @@ export default [ path: `${routes.addAccount.path}/`, params: 'dialog', name: 'add-account', + }, { + regex: /\/accounts(?:\/[^/]*)?$/, + path: `${routes.accounts.path}/`, + params: 'dialog', + name: 'accounts', }, { regex: /\/explorer\/accounts\/\d{1,21}[L|l](?:\/[^/]*)?$/, path: new RegExp(`${routes.explorer.path}${routes.account.path}/\\d{1,21}[L|l]/`), From 02464448fa2acf81a4c846325bcbedabec030a8e Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Thu, 15 Mar 2018 15:22:24 +0100 Subject: [PATCH 02/25] adapt styles for saved accounts when rendered in mainbox --- src/components/app/index.js | 2 ++ src/components/savedAccounts/savedAccounts.css | 13 ++++++------- src/components/savedAccounts/savedAccounts.js | 9 ++------- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/components/app/index.js b/src/components/app/index.js index d67b8b6ce5..c6972b8428 100644 --- a/src/components/app/index.js +++ b/src/components/app/index.js @@ -11,6 +11,7 @@ import SearchResult from '../search/searchResult'; import TransactionDashboard from '../transactionDashboard'; import AccountTransactions from '../accountTransactions'; import Voting from '../voting'; +import SavedAccounts from '../savedAccounts'; import SingleTransaction from './../singleTransaction'; import styles from './app.css'; import Dialog from '../dialog'; @@ -59,6 +60,7 @@ class App extends React.Component { )} /> + diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 57d1dab1e5..0600fe5d8e 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -18,13 +18,14 @@ --card-width-m: 267px; --card-height-m: 336px; --add-button-margin: 240px; - --wrapper-margin: -24px; } .wrapper { - margin: var(--wrapper-margin); - background: #013165; + margin: 0; + /* background: #013165; */ overflow-y: auto; + height: 75vh; /* stylelint-disable-line */ + position: relative; & > h1 { position: absolute; @@ -42,14 +43,12 @@ .cardsWrapper { display: table-cell; vertical-align: middle; - overflow: auto; + overflow: visible; white-space: nowrap; padding: 0 232px; text-align: center; - height: 100vh; /* stylelint-disable-line */ - width: 100vw; /* stylelint-disable-line */ - max-width: 100vw; /* stylelint-disable-line */ position: relative; + margin: auto; & > li { display: inline-block; diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js index 621aa12d67..f95ad177e9 100644 --- a/src/components/savedAccounts/savedAccounts.js +++ b/src/components/savedAccounts/savedAccounts.js @@ -1,16 +1,14 @@ -import { Button as ToolBoxButton } from 'react-toolbox/lib/button'; import { Link } from 'react-router-dom'; // import FontIcon from 'react-toolbox/lib/font_icon'; import React from 'react'; +import grid from 'flexboxgrid/dist/flexboxgrid.css'; import { extractAddress } from '../../utils/api/account'; import { PrimaryButton, SecondaryLightButton } from '../toolbox/buttons/button'; import AccountVisual from '../accountVisual'; import LiskAmount from '../liskAmount'; -import BackgroundMaker from '../backgroundMaker'; import networks from '../../constants/networks'; import getNetwork from '../../utils/getNetwork'; import routes from '../../constants/routes'; - import plusShapeIcon from '../../assets/images/plus-shape.svg'; import circleImage from '../../assets/images/add-id-oval.svg'; import rectangleOnTheRight from '../../assets/images/add-id-rectangle-1.svg'; @@ -59,7 +57,6 @@ class SavedAccounts extends React.Component { render() { const { - closeDialog, accountSwitched, savedAccounts, history, @@ -74,8 +71,7 @@ class SavedAccounts extends React.Component { }; return ( -
- +

{t('Your Lisk IDs')}

@@ -147,7 +143,6 @@ class SavedAccounts extends React.Component { value={this.state.editing ? 'checkmark' : 'edit'} /> {this.state.editing ? t('Done') : t('Edit')} - } floating onClick={closeDialog} className={`x-button ${styles.closeButton}`} />
); } From 1c7cb963dc0ae50ab75316b26e7ade7a7ffecb35 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Thu, 15 Mar 2018 15:51:54 +0100 Subject: [PATCH 03/25] fix overflow hiding the remove button on cards --- src/components/header/header.js | 10 +++++----- src/components/savedAccounts/savedAccounts.css | 3 +-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/header/header.js b/src/components/header/header.js index 1364c727ec..94b9f475bd 100644 --- a/src/components/header/header.js +++ b/src/components/header/header.js @@ -12,7 +12,6 @@ import logo from '../../assets/images/logo-beta.svg'; import PrivateWrapper from '../privateWrapper'; import { ActionButton } from './../toolbox/buttons/button'; import styles from './header.css'; -import RelativeLink from '../relativeLink'; import routes from './../../constants/routes'; class Header extends React.Component { @@ -68,16 +67,17 @@ class Header extends React.Component {
} - + - +
- + + +
diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 0600fe5d8e..2c13c10ba4 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -22,7 +22,6 @@ .wrapper { margin: 0; - /* background: #013165; */ overflow-y: auto; height: 75vh; /* stylelint-disable-line */ position: relative; @@ -43,7 +42,7 @@ .cardsWrapper { display: table-cell; vertical-align: middle; - overflow: visible; + overflow-y: visible; white-space: nowrap; padding: 0 232px; text-align: center; From 9c4a8aa8b7aa63f9614b5c3dcba45f2b2c1724d7 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Thu, 15 Mar 2018 18:00:34 +0100 Subject: [PATCH 04/25] Fix overflow-x behaviour, breaks overflow-y --- src/components/savedAccounts/savedAccounts.css | 12 ++++++++---- src/components/savedAccounts/savedAccounts.js | 3 +-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 2c13c10ba4..67f0bb32f9 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -21,10 +21,13 @@ } .wrapper { - margin: 0; - overflow-y: auto; + margin: 0 -; height: 75vh; /* stylelint-disable-line */ position: relative; + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-flow: row wrap; & > h1 { position: absolute; @@ -42,12 +45,13 @@ .cardsWrapper { display: table-cell; vertical-align: middle; - overflow-y: visible; + overflow-y: auto; white-space: nowrap; - padding: 0 232px; text-align: center; position: relative; margin: auto; + padding: 0; + overflow-x: scroll; & > li { display: inline-block; diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js index f95ad177e9..1429b6a19f 100644 --- a/src/components/savedAccounts/savedAccounts.js +++ b/src/components/savedAccounts/savedAccounts.js @@ -1,7 +1,6 @@ import { Link } from 'react-router-dom'; // import FontIcon from 'react-toolbox/lib/font_icon'; import React from 'react'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; import { extractAddress } from '../../utils/api/account'; import { PrimaryButton, SecondaryLightButton } from '../toolbox/buttons/button'; import AccountVisual from '../accountVisual'; @@ -71,7 +70,7 @@ class SavedAccounts extends React.Component { }; return ( -
+

{t('Your Lisk IDs')}

From fd7d0bdb806f3b41cb27e00d4ae204d10fa24c93 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Thu, 15 Mar 2018 18:09:24 +0100 Subject: [PATCH 05/25] fix typo --- src/components/savedAccounts/savedAccounts.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 67f0bb32f9..336ae1bf04 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -21,7 +21,7 @@ } .wrapper { - margin: 0 -; + margin: 0; height: 75vh; /* stylelint-disable-line */ position: relative; box-sizing: border-box; From 196d87044b10d20fcea87154b7a85ce06b0268a8 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Fri, 16 Mar 2018 10:15:36 +0100 Subject: [PATCH 06/25] render saved accounts outside content section --- src/components/app/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/app/index.js b/src/components/app/index.js index c6972b8428..00b24a4dca 100644 --- a/src/components/app/index.js +++ b/src/components/app/index.js @@ -35,6 +35,7 @@ class App extends React.Component {
{ this.main = el; }}> +
@@ -60,7 +61,6 @@ class App extends React.Component {
)} /> - From 7a8c2bb8bb2f6f908bb4f5ef13d665aeb631fd6a Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Fri, 16 Mar 2018 10:16:13 +0100 Subject: [PATCH 07/25] revert changed styles for accounts in content section --- .../savedAccounts/savedAccounts.css | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 336ae1bf04..57d1dab1e5 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -18,16 +18,13 @@ --card-width-m: 267px; --card-height-m: 336px; --add-button-margin: 240px; + --wrapper-margin: -24px; } .wrapper { - margin: 0; - height: 75vh; /* stylelint-disable-line */ - position: relative; - box-sizing: border-box; - display: flex; - flex: 0 1 auto; - flex-flow: row wrap; + margin: var(--wrapper-margin); + background: #013165; + overflow-y: auto; & > h1 { position: absolute; @@ -45,13 +42,14 @@ .cardsWrapper { display: table-cell; vertical-align: middle; - overflow-y: auto; + overflow: auto; white-space: nowrap; + padding: 0 232px; text-align: center; + height: 100vh; /* stylelint-disable-line */ + width: 100vw; /* stylelint-disable-line */ + max-width: 100vw; /* stylelint-disable-line */ position: relative; - margin: auto; - padding: 0; - overflow-x: scroll; & > li { display: inline-block; From 2a5113d8d3b1db973d24cea3efd415dac87f0191 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Fri, 16 Mar 2018 10:58:33 +0100 Subject: [PATCH 08/25] Adapt fontsizes after change em to px --- src/components/app/variables.css | 3 +++ src/components/dialog/dialogs.js | 6 ------ src/components/header/header.css | 2 +- src/components/menuBar/menuBar.css | 2 +- src/components/savedAccounts/modalTheme.css | 19 ------------------- .../savedAccounts/savedAccounts.css | 12 +++++++----- src/components/savedAccounts/savedAccounts.js | 2 ++ 7 files changed, 14 insertions(+), 32 deletions(-) delete mode 100644 src/components/savedAccounts/modalTheme.css diff --git a/src/components/app/variables.css b/src/components/app/variables.css index 35116d7bc8..4dd259e153 100644 --- a/src/components/app/variables.css +++ b/src/components/app/variables.css @@ -129,6 +129,9 @@ or "warn/action" ineastd of "red/green" Z-Indexes *************************/ --normal-index: 1; + --headerbar-index: 20; + --menubar-index: 4; + --accounts-index: 21; /************************* Margins diff --git a/src/components/dialog/dialogs.js b/src/components/dialog/dialogs.js index d1d92d27b3..eddd8baa57 100644 --- a/src/components/dialog/dialogs.js +++ b/src/components/dialog/dialogs.js @@ -1,7 +1,5 @@ import i18next from 'i18next'; import RegisterDelegate from '../registerDelegate'; -import SavedAccounts from '../savedAccounts'; -import savedAccountsTheme from '../savedAccounts/modalTheme.css'; import SecondPassphrase from '../secondPassphrase'; import Send from '../sendWritable'; import VoteDialog from '../voteDialog'; @@ -23,8 +21,4 @@ export default () => ({ title: i18next.t('Vote for delegates'), component: VoteDialog, }, - 'saved-accounts': { - component: SavedAccounts, - theme: savedAccountsTheme, - }, }); diff --git a/src/components/header/header.css b/src/components/header/header.css index bd628f245c..6b1c700c9f 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -183,7 +183,7 @@ position: fixed; top: 0; background-color: var(--color-white); - z-index: 20; + z-index: var(--headerbar-index); height: auto; & .searchBar { diff --git a/src/components/menuBar/menuBar.css b/src/components/menuBar/menuBar.css index d1981535d5..c96afe8473 100644 --- a/src/components/menuBar/menuBar.css +++ b/src/components/menuBar/menuBar.css @@ -39,7 +39,7 @@ font-size: var(--menu-bar-font-size-m); font-family: var(--heading-font); background-color: var(--color-white); - z-index: 1; + z-index: var(--menubar-index); flex-direction: row-reverse; justify-content: space-between; } diff --git a/src/components/savedAccounts/modalTheme.css b/src/components/savedAccounts/modalTheme.css deleted file mode 100644 index 299477177c..0000000000 --- a/src/components/savedAccounts/modalTheme.css +++ /dev/null @@ -1,19 +0,0 @@ -.dialog.fullscreen { - width: 100vw; /* stylelint-disable-line */ - height: 100vh; /* stylelint-disable-line */ - max-width: 100vw; /* stylelint-disable-line */ - max-height: 100vh; /* stylelint-disable-line */ - border-radius: 0; - background: #013165; -} - -.innerBody { - padding: 24px; - max-height: auto; -} - -@media screen and (min-width: 600px) { - .innerBody { - max-height: auto; - } -} diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 57d1dab1e5..45c583ecc1 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -3,10 +3,10 @@ :root { --font-size-ids-h1-xl: 64px; --font-size-ids-h1-l: 48px; - --font-size-ids-h1-s: 32px; - --font-size-card-h2: 32px; + --font-size-ids-h1-s: 30px; + --font-size-card-h2: 30px; --font-size-card-h2-s: 24px; - --address-font-size: 18px; + --address-font-size: 17px; --small-font-size: 20px; --close-button-shadow: 0 20px 20px 0 rgba(0, 32, 68, 0.25); --h1-padding-xl: 85px; @@ -22,9 +22,12 @@ } .wrapper { - margin: var(--wrapper-margin); background: #013165; overflow-y: auto; + z-index: var(--accounts-index); + position: absolute; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; /* stylelint-disable property-no-unknown */ & > h1 { position: absolute; @@ -44,7 +47,6 @@ vertical-align: middle; overflow: auto; white-space: nowrap; - padding: 0 232px; text-align: center; height: 100vh; /* stylelint-disable-line */ width: 100vw; /* stylelint-disable-line */ diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js index 1429b6a19f..ee41964096 100644 --- a/src/components/savedAccounts/savedAccounts.js +++ b/src/components/savedAccounts/savedAccounts.js @@ -5,6 +5,7 @@ import { extractAddress } from '../../utils/api/account'; import { PrimaryButton, SecondaryLightButton } from '../toolbox/buttons/button'; import AccountVisual from '../accountVisual'; import LiskAmount from '../liskAmount'; +import BackgroundMaker from '../backgroundMaker'; import networks from '../../constants/networks'; import getNetwork from '../../utils/getNetwork'; import routes from '../../constants/routes'; @@ -71,6 +72,7 @@ class SavedAccounts extends React.Component { return (
+

{t('Your Lisk IDs')}

From f34fddc2d169a9a49b1fa410d2d260d26c066983 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Fri, 16 Mar 2018 16:52:57 +0100 Subject: [PATCH 09/25] add react-router-redux --- package.json | 1 + src/components/app/index.js | 6 +++++- src/components/savedAccounts/index.js | 2 +- src/components/savedAccounts/savedAccounts.js | 21 +++++++++++++++++++ src/store/index.js | 13 ++++++++---- 5 files changed, 37 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index f370ee73ef..aec7707014 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "react-redux": "5.0.6", "react-router": "4.2.0", "react-router-dom": "4.2.2", + "react-router-redux": "5.0.0-alpha.9", "react-swipe": "5.1.1", "react-toolbox": "=2.0.0-beta.12", "react-waypoint": "7.1.0", diff --git a/src/components/app/index.js b/src/components/app/index.js index 00b24a4dca..3715659964 100644 --- a/src/components/app/index.js +++ b/src/components/app/index.js @@ -1,5 +1,6 @@ import React from 'react'; import { Route, Switch } from 'react-router-dom'; +import { ConnectedRouter } from 'react-router-redux'; import PrivateRoutes from '../privateRoute'; import Dashboard from '../dashboard'; import Sidechains from '../sidechains'; @@ -23,6 +24,7 @@ import OfflineWrapper from '../offlineWrapper'; import offlineStyle from '../offlineWrapper/offlineWrapper.css'; import AccountVisualDemo from '../accountVisual/demo'; import routes from '../../constants/routes'; +import { history } from '../../store'; class App extends React.Component { markAsLoaded() { @@ -35,7 +37,9 @@ class App extends React.Component {
{ this.main = el; }}> - + + +
diff --git a/src/components/savedAccounts/index.js b/src/components/savedAccounts/index.js index 85f72caa1d..3975b14ea9 100644 --- a/src/components/savedAccounts/index.js +++ b/src/components/savedAccounts/index.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; -import { withRouter } from 'react-router'; import { translate } from 'react-i18next'; +import { withRouter } from 'react-router'; import { accountRemoved, accountSwitched } from '../../actions/savedAccounts'; import SavedAccounts from './savedAccounts'; diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js index ee41964096..5eb4868483 100644 --- a/src/components/savedAccounts/savedAccounts.js +++ b/src/components/savedAccounts/savedAccounts.js @@ -1,3 +1,4 @@ +import { Button as ToolBoxButton } from 'react-toolbox/lib/button'; import { Link } from 'react-router-dom'; // import FontIcon from 'react-toolbox/lib/font_icon'; import React from 'react'; @@ -9,14 +10,17 @@ import BackgroundMaker from '../backgroundMaker'; import networks from '../../constants/networks'; import getNetwork from '../../utils/getNetwork'; import routes from '../../constants/routes'; +import routesReg from '../../utils/routes'; import plusShapeIcon from '../../assets/images/plus-shape.svg'; import circleImage from '../../assets/images/add-id-oval.svg'; import rectangleOnTheRight from '../../assets/images/add-id-rectangle-1.svg'; import rectangleImage2 from '../../assets/images/add-id-rectangle-2.svg'; import rectangleImage3 from '../../assets/images/add-id-rectangle-3.svg'; import triangleImage from '../../assets/images/add-id-triangle.svg'; + import { FontIcon } from '../fontIcon'; + import styles from './savedAccounts.css'; @@ -24,10 +28,22 @@ class SavedAccounts extends React.Component { constructor() { super(); + this.current = { + pathname: '/', + reg: routesReg[3], + list: [], + dialog: '', + }; + this.state = { }; } + shouldComponentUpdate(nextProps) { + console.log(this.props.location); + console.log(nextProps.location); + } + toggleEdit() { this.setState({ editing: !this.state.editing, @@ -63,6 +79,10 @@ class SavedAccounts extends React.Component { t, } = this.props; + const goBack = () => { + + }; + const switchAccount = (account) => { if (!this.state.editing) { accountSwitched(account); @@ -144,6 +164,7 @@ class SavedAccounts extends React.Component { value={this.state.editing ? 'checkmark' : 'edit'} /> {this.state.editing ? t('Done') : t('Edit')} + } floating onClick={goBack.bind(this)} className={`x-button ${styles.closeButton}`} />
); } diff --git a/src/store/index.js b/src/store/index.js index 12ced1e43f..890e4c8344 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,16 +1,21 @@ import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; +import { routerReducer, routerMiddleware } from 'react-router-redux'; import throttle from 'lodash.throttle'; - +import createHistory from 'history/createBrowserHistory'; import actionTypes from '../constants/actions'; import * as reducers from './reducers'; import middleWares from './middlewares'; import savedAccountsSubscriber from './subscribers/savedAccounts'; -const App = combineReducers(reducers); +export const history = createHistory(); +const App = combineReducers({ + ...reducers, + router: routerReducer, +}); const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; - -const store = createStore(App, composeEnhancers(applyMiddleware(...middleWares))); +const store = createStore(App, + composeEnhancers(applyMiddleware(...middleWares), applyMiddleware(routerMiddleware(history)))); store.dispatch({ type: actionTypes.storeCreated }); store.subscribe(throttle(savedAccountsSubscriber.bind(null, store), 1000)); From bbac6440ebf8b193bf4b223978051c98ddf82f81 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Fri, 16 Mar 2018 17:44:55 +0100 Subject: [PATCH 10/25] revert react-router-redux --- package.json | 1 - src/components/app/index.js | 6 +--- src/components/savedAccounts/index.js | 3 +- src/components/savedAccounts/savedAccounts.js | 30 ++++++++----------- src/store/index.js | 13 +++----- 5 files changed, 18 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index aec7707014..f370ee73ef 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,6 @@ "react-redux": "5.0.6", "react-router": "4.2.0", "react-router-dom": "4.2.2", - "react-router-redux": "5.0.0-alpha.9", "react-swipe": "5.1.1", "react-toolbox": "=2.0.0-beta.12", "react-waypoint": "7.1.0", diff --git a/src/components/app/index.js b/src/components/app/index.js index 3715659964..00b24a4dca 100644 --- a/src/components/app/index.js +++ b/src/components/app/index.js @@ -1,6 +1,5 @@ import React from 'react'; import { Route, Switch } from 'react-router-dom'; -import { ConnectedRouter } from 'react-router-redux'; import PrivateRoutes from '../privateRoute'; import Dashboard from '../dashboard'; import Sidechains from '../sidechains'; @@ -24,7 +23,6 @@ import OfflineWrapper from '../offlineWrapper'; import offlineStyle from '../offlineWrapper/offlineWrapper.css'; import AccountVisualDemo from '../accountVisual/demo'; import routes from '../../constants/routes'; -import { history } from '../../store'; class App extends React.Component { markAsLoaded() { @@ -37,9 +35,7 @@ class App extends React.Component {
{ this.main = el; }}> - - - +
diff --git a/src/components/savedAccounts/index.js b/src/components/savedAccounts/index.js index 3975b14ea9..6ad4d92ce2 100644 --- a/src/components/savedAccounts/index.js +++ b/src/components/savedAccounts/index.js @@ -1,6 +1,5 @@ import { connect } from 'react-redux'; import { translate } from 'react-i18next'; -import { withRouter } from 'react-router'; import { accountRemoved, accountSwitched } from '../../actions/savedAccounts'; import SavedAccounts from './savedAccounts'; @@ -17,4 +16,4 @@ const mapDispatchToProps = dispatch => ({ export default connect( mapStateToProps, mapDispatchToProps, -)(withRouter(translate()(SavedAccounts))); +)(translate()(SavedAccounts)); diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js index 5eb4868483..8a24cda401 100644 --- a/src/components/savedAccounts/savedAccounts.js +++ b/src/components/savedAccounts/savedAccounts.js @@ -10,17 +10,15 @@ import BackgroundMaker from '../backgroundMaker'; import networks from '../../constants/networks'; import getNetwork from '../../utils/getNetwork'; import routes from '../../constants/routes'; -import routesReg from '../../utils/routes'; + import plusShapeIcon from '../../assets/images/plus-shape.svg'; import circleImage from '../../assets/images/add-id-oval.svg'; import rectangleOnTheRight from '../../assets/images/add-id-rectangle-1.svg'; import rectangleImage2 from '../../assets/images/add-id-rectangle-2.svg'; import rectangleImage3 from '../../assets/images/add-id-rectangle-3.svg'; import triangleImage from '../../assets/images/add-id-triangle.svg'; - import { FontIcon } from '../fontIcon'; - import styles from './savedAccounts.css'; @@ -28,22 +26,10 @@ class SavedAccounts extends React.Component { constructor() { super(); - this.current = { - pathname: '/', - reg: routesReg[3], - list: [], - dialog: '', - }; - this.state = { }; } - shouldComponentUpdate(nextProps) { - console.log(this.props.location); - console.log(nextProps.location); - } - toggleEdit() { this.setState({ editing: !this.state.editing, @@ -79,14 +65,22 @@ class SavedAccounts extends React.Component { t, } = this.props; - const goBack = () => { + const goToDashboard = () => { + history.push(`${routes.main.path}${routes.dashboard.path}`); + }; + const goBack = () => { + if (history.length <= 2) { + goToDashboard(); + return; + } + history.goBack(); }; const switchAccount = (account) => { if (!this.state.editing) { accountSwitched(account); - history.push(`${routes.main.path}${routes.dashboard.path}`); + goToDashboard(); } }; @@ -164,7 +158,7 @@ class SavedAccounts extends React.Component { value={this.state.editing ? 'checkmark' : 'edit'} /> {this.state.editing ? t('Done') : t('Edit')} - } floating onClick={goBack.bind(this)} className={`x-button ${styles.closeButton}`} /> + } floating onClick={goBack} className={`x-button ${styles.closeButton}`} />
); } diff --git a/src/store/index.js b/src/store/index.js index 890e4c8344..12ced1e43f 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,21 +1,16 @@ import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; -import { routerReducer, routerMiddleware } from 'react-router-redux'; import throttle from 'lodash.throttle'; -import createHistory from 'history/createBrowserHistory'; + import actionTypes from '../constants/actions'; import * as reducers from './reducers'; import middleWares from './middlewares'; import savedAccountsSubscriber from './subscribers/savedAccounts'; -export const history = createHistory(); -const App = combineReducers({ - ...reducers, - router: routerReducer, -}); +const App = combineReducers(reducers); const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -const store = createStore(App, - composeEnhancers(applyMiddleware(...middleWares), applyMiddleware(routerMiddleware(history)))); + +const store = createStore(App, composeEnhancers(applyMiddleware(...middleWares))); store.dispatch({ type: actionTypes.storeCreated }); store.subscribe(throttle(savedAccountsSubscriber.bind(null, store), 1000)); From 75c39d6926fda270a9d45251d2c7b52be416073f Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Mon, 19 Mar 2018 15:29:01 +0100 Subject: [PATCH 11/25] add utils func to handle uniqueIds in components --- src/components/accountVisual/index.js | 22 +++++++++++++++++++--- src/utils/generateUniqueId.js | 13 +++++++++++++ src/utils/generateUniqueId.test.js | 14 ++++++++++++++ 3 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 src/utils/generateUniqueId.js create mode 100644 src/utils/generateUniqueId.test.js diff --git a/src/components/accountVisual/index.js b/src/components/accountVisual/index.js index 030a4aa4ae..9e2caad714 100644 --- a/src/components/accountVisual/index.js +++ b/src/components/accountVisual/index.js @@ -2,6 +2,7 @@ import BigNumber from 'bignumber.js'; import React from 'react'; import sha256 from 'js-sha256'; import { Gradients, gradientSchemes } from './gradients'; +import generateUniqueId from './../../utils/generateUniqueId'; import breakpoints from './../../constants/breakpoints'; import styles from './accountVisual.css'; @@ -184,6 +185,10 @@ class AccountVisual extends React.Component { this.setState({ isSBreakpoint: window.innerWidth <= breakpoints.s }); } + componentWillMount() { + this.uniqueSvgUrlHash = generateUniqueId(); + } + componentDidMount() { window.addEventListener('resize', this.resizeWindow.bind(this)); } @@ -196,14 +201,25 @@ class AccountVisual extends React.Component { const { address, size, sizeS, className, } = this.props; + + const replaceUrlByHashOnScheme = gradientScheme => ({ + ...gradientScheme, + url: gradientScheme.url.replace(/\)/g, `-${this.uniqueSvgUrlHash})`), + id: `${gradientScheme.id}-${this.uniqueSvgUrlHash}`, + }); const sizeL = size || 200; const newSize = this.state.isSBreakpoint && sizeS ? sizeS : sizeL; const addressHashChunks = getHashChunks(address); const gradientScheme = gradientSchemes[ addressHashChunks[0].substr(1, 2) % gradientSchemes.length]; - const primaryGradients = pickTwo(addressHashChunks[1], gradientScheme.primary); - const secondaryGradients = pickTwo(addressHashChunks[2], gradientScheme.secondary); + + const gradientsSchemesUrlsHashed = { + primary: gradientScheme.primary.map(replaceUrlByHashOnScheme), + secondary: gradientScheme.secondary.map(replaceUrlByHashOnScheme), + }; + const primaryGradients = pickTwo(addressHashChunks[1], gradientsSchemesUrlsHashed.primary); + const secondaryGradients = pickTwo(addressHashChunks[2], gradientsSchemesUrlsHashed.secondary); const shapes = [ getBackgroundCircle(newSize, primaryGradients[0]), getShape(addressHashChunks[1], newSize, primaryGradients[1], 1), @@ -213,7 +229,7 @@ class AccountVisual extends React.Component { return (
- + {shapes.map((shape, i) => ( ))} diff --git a/src/utils/generateUniqueId.js b/src/utils/generateUniqueId.js new file mode 100644 index 0000000000..59552ceb98 --- /dev/null +++ b/src/utils/generateUniqueId.js @@ -0,0 +1,13 @@ +const randomCharsSequence = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + +const generateUniqueId = (randomDigits = 5) => { + let uniqueId = `${new Date().getTime()}-`; + Array.from(Array(randomDigits).keys()).map(() => { + const randomCharIndex = Math.floor(Math.random() * randomCharsSequence.length); + uniqueId = uniqueId.concat(randomCharsSequence.charAt(randomCharIndex)); + return uniqueId; + }); + return uniqueId; +}; + +export default generateUniqueId; diff --git a/src/utils/generateUniqueId.test.js b/src/utils/generateUniqueId.test.js new file mode 100644 index 0000000000..4ae6fa5127 --- /dev/null +++ b/src/utils/generateUniqueId.test.js @@ -0,0 +1,14 @@ +import { expect } from 'chai'; +import generateUniqueId from './generateUniqueId'; + +describe('genearateUniqueId', () => { + let generatedUniqueId; + beforeEach(() => { + generatedUniqueId = generateUniqueId(); + }); + + it('should not generate two equal ids', () => { + const uniqueId = generateUniqueId(); + expect(uniqueId).to.not.equal(generatedUniqueId); + }); +}); From e096df0b8d0e9ca01460e4e9064702fc6a7988c4 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Mon, 19 Mar 2018 16:07:12 +0100 Subject: [PATCH 12/25] Progress on fix test after refactor, history not available --- test/integration/accountSwitch.test.js | 27 +++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/test/integration/accountSwitch.test.js b/test/integration/accountSwitch.test.js index 10ab3827d9..bfd0c08fc0 100644 --- a/test/integration/accountSwitch.test.js +++ b/test/integration/accountSwitch.test.js @@ -1,7 +1,8 @@ import { step } from 'mocha-steps'; -import { stub, match } from 'sinon'; +import { stub, match, spy } from 'sinon'; import { mount } from 'enzyme'; import thunk from 'redux-thunk'; +import PropTypes from 'prop-types'; import { prepareStore, renderWithRouter } from '../utils/applicationInit'; import { accountsRetrieved } from '../../src/actions/savedAccounts'; @@ -16,6 +17,8 @@ import SavedAccounts from '../../src/components/savedAccounts'; import * as accountApi from '../../src/utils/api/account'; import * as peers from '../../src/utils/api/peers'; import GenericStepDefinition from '../utils/genericStepDefinition'; +import i18n from '../../src/i18n'; +import routes from '../../src/constants/routes'; describe('@integration: Account switch', () => { let store; @@ -72,7 +75,23 @@ describe('@integration: Account switch', () => { loginMiddleware, ]); - wrapper = mount(renderWithRouter(SavedAccounts, store)); + const history = { + location: { + pathname: `${routes.main.path}${routes.dashboard.path}`, + }, + push: spy(), + }; + + const options = { + context: { store, history, i18n }, + childContextTypes: { + store: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, + i18n: PropTypes.object.isRequired, + }, + }; + + wrapper = mount(renderWithRouter(SavedAccounts, store), options); store.dispatch(accountsRetrieved()); wrapper.update(); helper = new GenericStepDefinition(wrapper, store); @@ -100,9 +119,11 @@ describe('@integration: Account switch', () => { step('Then I should see 2 instances of "saved account card"', () => helper.shouldSeeCountInstancesOf(2, '.saved-account-card')); }); - describe('Scenario: should allow to switch account', () => { + /* eslint-disable mocha/no-exclusive-tests */ + describe.only('Scenario: should allow to switch account', () => { step('Given I\'m on "account switcher" with accounts: "genesis,delegate,empty account"', setupStep); step('When I click "saved account card"', () => helper.clickOnElement('.saved-account-card')); step('Then I should be logged in as "genesis" account', () => helper.shouldBeLoggedInAs(accounts.genesis.publicKey)); }); + /* eslint-enable mocha/no-exclusive-tests */ }); From 162c28cac5e74c5f0c6d74ba945b8e3076f34b4e Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Mon, 19 Mar 2018 16:11:44 +0100 Subject: [PATCH 13/25] fix integration test failing due to missing history --- test/integration/accountSwitch.test.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/test/integration/accountSwitch.test.js b/test/integration/accountSwitch.test.js index bfd0c08fc0..a3a8256ea0 100644 --- a/test/integration/accountSwitch.test.js +++ b/test/integration/accountSwitch.test.js @@ -2,7 +2,6 @@ import { step } from 'mocha-steps'; import { stub, match, spy } from 'sinon'; import { mount } from 'enzyme'; import thunk from 'redux-thunk'; -import PropTypes from 'prop-types'; import { prepareStore, renderWithRouter } from '../utils/applicationInit'; import { accountsRetrieved } from '../../src/actions/savedAccounts'; @@ -17,7 +16,6 @@ import SavedAccounts from '../../src/components/savedAccounts'; import * as accountApi from '../../src/utils/api/account'; import * as peers from '../../src/utils/api/peers'; import GenericStepDefinition from '../utils/genericStepDefinition'; -import i18n from '../../src/i18n'; import routes from '../../src/constants/routes'; describe('@integration: Account switch', () => { @@ -82,16 +80,7 @@ describe('@integration: Account switch', () => { push: spy(), }; - const options = { - context: { store, history, i18n }, - childContextTypes: { - store: PropTypes.object.isRequired, - history: PropTypes.object.isRequired, - i18n: PropTypes.object.isRequired, - }, - }; - - wrapper = mount(renderWithRouter(SavedAccounts, store), options); + wrapper = mount(renderWithRouter(SavedAccounts, store, { history })); store.dispatch(accountsRetrieved()); wrapper.update(); helper = new GenericStepDefinition(wrapper, store); @@ -119,11 +108,9 @@ describe('@integration: Account switch', () => { step('Then I should see 2 instances of "saved account card"', () => helper.shouldSeeCountInstancesOf(2, '.saved-account-card')); }); - /* eslint-disable mocha/no-exclusive-tests */ - describe.only('Scenario: should allow to switch account', () => { + describe('Scenario: should allow to switch account', () => { step('Given I\'m on "account switcher" with accounts: "genesis,delegate,empty account"', setupStep); step('When I click "saved account card"', () => helper.clickOnElement('.saved-account-card')); step('Then I should be logged in as "genesis" account', () => helper.shouldBeLoggedInAs(accounts.genesis.publicKey)); }); - /* eslint-enable mocha/no-exclusive-tests */ }); From 448f5e301e4583cb4d841fe213ef79addbfd77ca Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Wed, 21 Mar 2018 11:40:43 +0100 Subject: [PATCH 14/25] :recycle: adapt styles for margins set on body, PR changes --- i18n/locales/en/common.json | 3 - src/components/app/index.js | 20 ++- src/components/dialog/dialogs.js | 24 ---- .../savedAccounts/savedAccounts.css | 37 +++-- src/components/savedAccounts/savedAccounts.js | 126 +++++++++--------- src/utils/routes.js | 74 ---------- 6 files changed, 99 insertions(+), 185 deletions(-) delete mode 100644 src/components/dialog/dialogs.js delete mode 100644 src/utils/routes.js diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 0b08a9d4dd..e1cd4de27d 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -141,8 +141,6 @@ "Redo": "Redo", "Register": "Register", "Register 2nd passphrase": "Register 2nd passphrase", - "Register Second Passphrase": "Register Second Passphrase", - "Register as delegate": "Register as delegate", "Reload": "Reload", "Remove": "Remove", "Remove vote from": "Remove vote from", @@ -202,7 +200,6 @@ "Username": "Username", "Version": "Version", "View": "View", - "Vote for delegates": "Vote for delegates", "Vote_noun": "Vote", "Vote_verb": "Vote", "Voted": "Voted", diff --git a/src/components/app/index.js b/src/components/app/index.js index 00b24a4dca..1b2e422bc8 100644 --- a/src/components/app/index.js +++ b/src/components/app/index.js @@ -14,7 +14,6 @@ import Voting from '../voting'; import SavedAccounts from '../savedAccounts'; import SingleTransaction from './../singleTransaction'; import styles from './app.css'; -import Dialog from '../dialog'; import Toaster from '../toaster'; import MainMenu from '../mainMenu'; import LoadingBar from '../loadingBar'; @@ -35,7 +34,7 @@ class App extends React.Component {
{ this.main = el; }}> - +
@@ -43,30 +42,29 @@ class App extends React.Component { (
- - - - - + + + + +
)} /> (
- +
)} /> - - + +
-
diff --git a/src/components/dialog/dialogs.js b/src/components/dialog/dialogs.js deleted file mode 100644 index eddd8baa57..0000000000 --- a/src/components/dialog/dialogs.js +++ /dev/null @@ -1,24 +0,0 @@ -import i18next from 'i18next'; -import RegisterDelegate from '../registerDelegate'; -import SecondPassphrase from '../secondPassphrase'; -import Send from '../sendWritable'; -import VoteDialog from '../voteDialog'; - -export default () => ({ - send: { - title: i18next.t('Send'), - component: Send, - }, - 'register-delegate': { - title: i18next.t('Register as delegate'), - component: RegisterDelegate, - }, - 'register-second-passphrase': { - title: i18next.t('Register Second Passphrase'), - component: SecondPassphrase, - }, - vote: { - title: i18next.t('Vote for delegates'), - component: VoteDialog, - }, -}); diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 45c583ecc1..a81b99b834 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -21,13 +21,11 @@ --wrapper-margin: -24px; } -.wrapper { - background: #013165; - overflow-y: auto; - z-index: var(--accounts-index); - position: absolute; - -webkit-font-smoothing: antialiased; - font-smoothing: antialiased; /* stylelint-disable property-no-unknown */ +.content { + position: relative; + padding: 24px; + height: 100%; + box-sizing: border-box; & > h1 { position: absolute; @@ -42,16 +40,29 @@ } } +.wrapper { + display: flex; + background: #013165; + z-index: var(--accounts-index); + position: absolute; + height: 100vh; /* stylelint-disable-line */ + width: 100vw; /* stylelint-disable-line */ + max-width: 100vw; /* stylelint-disable-line */ + font-smoothing: antialiased; /* stylelint-disable property-no-unknown */ + border-radius: 0; + top: 0; +} + .cardsWrapper { display: table-cell; vertical-align: middle; overflow: auto; white-space: nowrap; text-align: center; - height: 100vh; /* stylelint-disable-line */ - width: 100vw; /* stylelint-disable-line */ - max-width: 100vw; /* stylelint-disable-line */ - position: relative; + height: calc(100vh - (24px * 2)); /* stylelint-disable-line */ + width: calc(100vw - (24px * 2)); /* stylelint-disable-line */ + max-width: calc(100vw - (24px * 2)); /* stylelint-disable-line */ + padding: 0 232px; & > li { display: inline-block; @@ -266,6 +277,8 @@ @media (--medium-viewport) { .wrapper { + top: -100px; + & > h1 { font-size: var(--font-size-ids-h1-l); padding: var(--h1-padding-m); @@ -318,6 +331,8 @@ @media (--small-viewport) { .wrapper { + top: -67px; + & > h1 { font-size: var(--font-size-ids-h1-s); } diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js index 8a24cda401..c89e18fd18 100644 --- a/src/components/savedAccounts/savedAccounts.js +++ b/src/components/savedAccounts/savedAccounts.js @@ -87,70 +87,72 @@ class SavedAccounts extends React.Component { return (
-

- {t('Your Lisk IDs')} -

-
    -
  • - -
    -
    - +
    +

    + {t('Your Lisk IDs')} +

    +
      +
    • + +
      +
      + +
      + + + + + +

      {t('Add a Lisk ID')}

      - - - - - -

      {t('Add a Lisk ID')}

      -
    - -
  • - {savedAccounts.map(account => ( -
  • - {(account.passphrase ? - - - {t('Unlocked')} - : - null)} - {(account.network !== networks.mainnet.code ? - - {account.address ? account.address : t(getNetwork(account.network).name)} - : - null)} -
    - -
    -

    - LSK -

    -
    {extractAddress(account.publicKey)}
    - { this.isSelectedForRemove(account) ? -
    -

    {t('You can always get it back.')}

    - {t('Keep it')} -
    : - null - } - { this.state.editing ? - : - null - } +
  • - ))} -
+ {savedAccounts.map(account => ( +
  • + {(account.passphrase ? + + + {t('Unlocked')} + : + null)} + {(account.network !== networks.mainnet.code ? + + {account.address ? account.address : t(getNetwork(account.network).name)} + : + null)} +
    + +
    +

    + LSK +

    +
    {extractAddress(account.publicKey)}
    + { this.isSelectedForRemove(account) ? +
    +

    {t('You can always get it back.')}

    + {t('Keep it')} +
    : + null + } + { this.state.editing ? + : + null + } +
  • + ))} + +
    diff --git a/src/utils/routes.js b/src/utils/routes.js deleted file mode 100644 index 08c562a5e7..0000000000 --- a/src/utils/routes.js +++ /dev/null @@ -1,74 +0,0 @@ -import routes from './../constants/routes'; - -export default [ - { - regex: /\/main\/account-visual-demo(?:\/[^/]*)?$/, - path: `${routes.main.path}${routes.accountVisualDemo.path}/`, - params: 'dialog', - name: 'account-visual-demo', - }, { - regex: /\/main\/dashboard(?:\/[^/]*)?$/, - path: `${routes.main.path}${routes.dashboard.path}/`, - params: 'dialog', - name: 'dashboard', - }, { - regex: /\/main\/transactions(?:\/[^/]*)?$/, - path: `${routes.main.path}${routes.wallet.path}/`, - params: 'dialog', - name: 'transactions', - }, { - regex: /\/main\/voting(?:\/[^/]*)?$/, - path: `${routes.main.path}${routes.voting.path}/`, - params: 'dialog', - name: 'voting', - }, { - regex: /\/main\/sidechains(?:\/[^/]*)?$/, - path: `${routes.main.path}${routes.sidechains.path}/`, - params: 'dialog', - name: 'sidechains', - }, { - regex: /\/add-account(?:\/[^/]*)?$/, - path: `${routes.addAccount.path}/`, - params: 'dialog', - name: 'add-account', - }, { - regex: /\/accounts(?:\/[^/]*)?$/, - path: `${routes.accounts.path}/`, - params: 'dialog', - name: 'accounts', - }, { - regex: /\/explorer\/accounts\/\d{1,21}[L|l](?:\/[^/]*)?$/, - path: new RegExp(`${routes.explorer.path}${routes.account.path}/\\d{1,21}[L|l]/`), - params: 'address', - name: 'accounts', - }, { - regex: /\/explorer\/result\/([0-9]+|[a-z]+)(?:\/[^/]*)?$/, - path: new RegExp(`${routes.explorer.path}${routes.searchResult.path}/([0-9]+|[a-z]+)/`), - params: 'query', - name: 'result', - }, { - regex: /\/explorer\/search(?:\/[^/]*)?$/, - path: `${routes.explorer.path}${routes.search.path}/`, - name: 'explorer', - }, { - regex: /\/explorer\/transactions\/\d+(?:\/[^/]*)?$/, - path: new RegExp(`${routes.explorer.path}${routes.transaction.path}/\\d+/`), - params: 'id', - name: 'explorer-transaction', - }, { - regex: /register(?:\/[^/]*)?$/, - path: `${routes.register.path}/`, - params: 'dialog', - name: 'register', - }, { - regex: /^\/$/, - path: '/', - params: 'dialog', - name: 'login', - }, { - regex: /./, - path: '/', - params: 'notFound', - name: 'not-found', - }, -]; From ffc1e5154af4b9c206efd792281a8979a3f1390f Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Wed, 21 Mar 2018 11:47:44 +0100 Subject: [PATCH 15/25] :recycle: handle scrolling on cards area --- .../savedAccounts/savedAccounts.css | 25 ++++++++++--------- src/components/savedAccounts/savedAccounts.js | 6 ++--- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index a81b99b834..9d8c835759 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -26,18 +26,7 @@ padding: 24px; height: 100%; box-sizing: border-box; - - & > h1 { - position: absolute; - color: var(--color-white); - font-size: var(--font-size-ids-h1-l); - text-align: center; - padding-top: var(--h1-padding-l); - margin: 0; - left: 50%; - transform: translateX(-50%); - white-space: nowrap; - } + overflow: auto; } .wrapper { @@ -51,6 +40,18 @@ font-smoothing: antialiased; /* stylelint-disable property-no-unknown */ border-radius: 0; top: 0; + + & > h1 { + position: absolute; + color: var(--color-white); + font-size: var(--font-size-ids-h1-l); + text-align: center; + padding-top: var(--h1-padding-l); + margin: 0; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + } } .cardsWrapper { diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js index c89e18fd18..361aaa3546 100644 --- a/src/components/savedAccounts/savedAccounts.js +++ b/src/components/savedAccounts/savedAccounts.js @@ -87,10 +87,10 @@ class SavedAccounts extends React.Component { return (
    +

    + {t('Your Lisk IDs')} +

    -

    - {t('Your Lisk IDs')} -

    • From f55284769dc57643fe6d8f809c120f01710a5425 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Wed, 21 Mar 2018 11:53:55 +0100 Subject: [PATCH 16/25] :nail_care: prefix font-smoothing, postcss doesn't recognize it --- src/components/savedAccounts/savedAccounts.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 9d8c835759..3259e00051 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -37,7 +37,8 @@ height: 100vh; /* stylelint-disable-line */ width: 100vw; /* stylelint-disable-line */ max-width: 100vw; /* stylelint-disable-line */ - font-smoothing: antialiased; /* stylelint-disable property-no-unknown */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; border-radius: 0; top: 0; From aa83abdb659714ee0504750c13c5fb240d74f9ee Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Wed, 21 Mar 2018 12:15:27 +0100 Subject: [PATCH 17/25] :books: add comment for non suported property --- src/components/savedAccounts/savedAccounts.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 3259e00051..493f78179d 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -37,10 +37,11 @@ height: 100vh; /* stylelint-disable-line */ width: 100vw; /* stylelint-disable-line */ max-width: 100vw; /* stylelint-disable-line */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; border-radius: 0; top: 0; + /* vendor specific, not supported by autoprefixer */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; & > h1 { position: absolute; From c6c4f04948f808eef680474d670798a2dd2b564e Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Wed, 21 Mar 2018 15:04:47 +0100 Subject: [PATCH 18/25] :nail_care: fix lint errors after merge --- .../savedAccounts/savedAccounts.css | 5 +- src/components/savedAccounts/savedAccounts.js | 132 +++++++++--------- 2 files changed, 68 insertions(+), 69 deletions(-) diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index ec8fbe0434..31c1e47b61 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -39,9 +39,8 @@ max-width: 100vw; /* stylelint-disable-line */ border-radius: 0; top: 0; - /* vendor specific, not supported by autoprefixer */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; /* vendor specific, not supported by autoprefixer */ + -moz-osx-font-smoothing: grayscale; & > h1 { position: absolute; diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js index 1bf230c497..ab9292f0fc 100644 --- a/src/components/savedAccounts/savedAccounts.js +++ b/src/components/savedAccounts/savedAccounts.js @@ -110,74 +110,74 @@ class SavedAccounts extends React.Component { {t('Your Lisk IDs')}
      -
        -
      • - -
        -
        - -
        - - - - - -

        {t('Add a Lisk ID')}

        -
        - -
      • - {savedAccounts.map(account => ( -
      • - {(account.passphrase ? - - - {t('Lock ID')} - : - null)} - {(this.state.isSecureAppears[`${account.network}${account.publicKey}`] ? - - {t('Your ID is now secured!')} - : - null)} - {(account.network !== networks.mainnet.code ? - - {account.address ? account.address : t(getNetwork(account.network).name)} - : - null)} +
          +
        • + +
          - +
          -

          - LSK -

          -
          {extractAddress(account.publicKey)}
          - { this.isSelectedForRemove(account) ? -
          -

          {t('You can always get it back.')}

          - {t('Keep it')} -
          : - null - } - { this.state.editing ? - : - null - } -
        • - ))} -
        + + + + + +

        {t('Add a Lisk ID')}

        +
      + +
    • + {savedAccounts.map(account => ( +
    • + {(account.passphrase ? + + + {t('Lock ID')} + : + null)} + {(this.state.isSecureAppears[`${account.network}${account.publicKey}`] ? + + {t('Your ID is now secured!')} + : + null)} + {(account.network !== networks.mainnet.code ? + + {account.address ? account.address : t(getNetwork(account.network).name)} + : + null)} +
      + +
      +

      + LSK +

      +
      {extractAddress(account.publicKey)}
      + { this.isSelectedForRemove(account) ? +
      +

      {t('You can always get it back.')}

      + {t('Keep it')} +
      : + null + } + { this.state.editing ? + : + null + } +
    • + ))} +
    Date: Wed, 21 Mar 2018 15:06:12 +0100 Subject: [PATCH 19/25] :recycle: remove unneeded dialog files, pr changes, breaking tests --- src/components/dialog/dialog.js | 27 +++++---------------------- src/components/relativeLink/index.js | 9 +-------- 2 files changed, 6 insertions(+), 30 deletions(-) diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index 26dd779f56..a9df9f6886 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -5,19 +5,11 @@ import AppBar from 'react-toolbox/lib/app_bar'; import IconButton from '../toolbox/buttons/iconButton'; import { parseSearchParams } from '../../utils/searchParams'; import styles from './dialog.css'; -import getDialogs from './dialogs'; -import routesReg from '../../utils/routes'; class DialogElement extends Component { constructor() { super(); this.state = {}; - this.current = { - pathname: '/', - reg: routesReg[3], - list: [], - dialog: '', - }; } componentDidMount() { @@ -31,26 +23,17 @@ class DialogElement extends Component { checkForDialog() { // if the dialog is wrong, show a toast if (this.current.pathname !== this.props.history.location.pathname) { - this.current.reg = routesReg.find(item => - item.regex.test(this.props.history.location.pathname)); - this.current.pathname = this.props.history.location.pathname; - const dialogName = this.props.history.location.pathname.replace(this.current.reg.path, ''); - const dialogs = getDialogs(); - if (dialogs[dialogName] !== undefined) { - this.open(this.current.reg, dialogs[dialogName]); - } else { - this.close(); - } + this.open(); } } - open(config, dialog) { + open() { clearTimeout(this.timeout); this.setState({ hidden: false }); this.props.dialogDisplayed({ - title: dialog.title, - theme: dialog.theme, - childComponent: dialog.component, + title: this.props.dialog.title, + theme: this.props.dialog.theme, + childComponent: this.props.dialog.childComponent, childComponentProps: parseSearchParams(this.props.history.location.search), }); } diff --git a/src/components/relativeLink/index.js b/src/components/relativeLink/index.js index 046eea8d62..c29095a158 100644 --- a/src/components/relativeLink/index.js +++ b/src/components/relativeLink/index.js @@ -4,7 +4,6 @@ import { Link } from 'react-router-dom'; import { withRouter } from 'react-router'; import buttonStyle from 'react-toolbox/lib/button/theme.css'; import offlineStyle from '../offlineWrapper/offlineWrapper.css'; -import dialogs from '../dialog/dialogs'; const RelativeLink = ({ location, to, children, className, raised, neutral, primary, flat, disableWhenOffline, @@ -17,13 +16,7 @@ const RelativeLink = ({ if (disableWhenOffline !== undefined) style += `${offlineStyle.disableWhenOffline} `; if (style !== '') style += ` ${buttonStyle.button}`; - const dialogNames = Object.keys(dialogs()); - let pathname = location.pathname; - dialogNames.forEach((dialog) => { - pathname = pathname.replace(`/${dialog}`, ''); - }); - - const path = `${pathname}/${to}`.replace('//', '/'); + const path = `${location.pathname}/${to}`.replace('//', '/'); return ( { children } ); From 24c07fd6975692a78b2cbe25cd77d5c993f0038e Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Wed, 21 Mar 2018 15:35:57 +0100 Subject: [PATCH 20/25] :white_check_mark: fix dialog tests after refactor --- src/components/dialog/dialog.js | 17 ++--------------- src/components/dialog/dialog.test.js | 8 ++++---- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index a9df9f6886..d7f2117d1b 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -12,19 +12,8 @@ class DialogElement extends Component { this.state = {}; } - componentDidMount() { - this.checkForDialog(); - } - componentDidUpdate() { - this.checkForDialog(); - } - - checkForDialog() { - // if the dialog is wrong, show a toast - if (this.current.pathname !== this.props.history.location.pathname) { - this.open(); - } + this.open(); } open() { @@ -47,9 +36,7 @@ class DialogElement extends Component { } goBack() { - this.props.history.push((this.current.reg.path instanceof RegExp) ? - this.props.history.location.pathname.match(this.current.reg.path)[0] : - this.current.reg.path); + this.props.history.goBack(); } render() { diff --git a/src/components/dialog/dialog.test.js b/src/components/dialog/dialog.test.js index b12e925ab7..657ba9a809 100644 --- a/src/components/dialog/dialog.test.js +++ b/src/components/dialog/dialog.test.js @@ -19,7 +19,7 @@ describe('Dialog', () => { pathname: `${routes.explorer.path}${routes.search.path}saved-accounts`, search: '', }, - push: sinon.spy(), + goBack: sinon.spy(), }; dialogProps = { title: 'Saved Accounts', @@ -49,14 +49,14 @@ describe('Dialog', () => { history.location.pathname = `${basePath}saved-accounts`; wrapper.setProps({ history }); wrapper.find('.x-button').simulate('click'); - expect(history.push).to.have.been.calledWith(basePath); + expect(history.goBack).to.have.been.calledWith(); }); it('allows to close the dialog on non-regexp path ', () => { history.location.pathname = `${routes.main.path}${routes.wallet.path}saved-accounts`; wrapper.setProps({ history }); wrapper.find('.x-button').simulate('click'); - expect(history.push).to.have.been.calledWith(); + expect(history.goBack).to.have.been.calledWith(); }); // this test used to pass only because the history.push spy was not in beforeEach @@ -65,6 +65,6 @@ describe('Dialog', () => { newProps.dialog.title = 'Send1'; // trying to update the component wrapper.setProps(newProps); - expect(history.push).to.have.been.calledWith(); + expect(history.goBack).to.have.been.calledWith(); }); }); From 511312316310021e0aed782ad777cca639dd3357 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Wed, 21 Mar 2018 16:23:31 +0100 Subject: [PATCH 21/25] :white_check_mark: increase coverage of dialog --- src/components/dialog/dialog.js | 1 + src/components/dialog/dialog.test.js | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index d7f2117d1b..9a1aed7324 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -36,6 +36,7 @@ class DialogElement extends Component { } goBack() { + this.close(); this.props.history.goBack(); } diff --git a/src/components/dialog/dialog.test.js b/src/components/dialog/dialog.test.js index 657ba9a809..dfe3249793 100644 --- a/src/components/dialog/dialog.test.js +++ b/src/components/dialog/dialog.test.js @@ -31,6 +31,7 @@ describe('Dialog', () => { props = { dialogDisplayed: () => {}, + dialogHidden: sinon.spy(), t: key => key, }; wrapper = shallow(); @@ -44,6 +45,20 @@ describe('Dialog', () => { expect(wrapper.find(SavedAccounts)).to.have.length(1); }); + it('doesn\'t render appBar if title not provided', () => { + const propsWithoutTitle = { ...dialogProps }; + delete propsWithoutTitle.title; + wrapper = shallow(); + expect(wrapper.find('AppBar')).to.have.length(0); + }); + + it('doesn\'t render body if not childComponents present', () => { + const propsWithoutChildComponent = { ...dialogProps }; + delete propsWithoutChildComponent.childComponent; + wrapper = shallow(); + expect(wrapper.find(SavedAccounts)).to.have.length(0); + }); + it('allows to close the dialog on regexp path ', () => { const basePath = `${routes.explorer.path}${routes.wallet.path}/1523498127498/`; history.location.pathname = `${basePath}saved-accounts`; @@ -53,12 +68,20 @@ describe('Dialog', () => { }); it('allows to close the dialog on non-regexp path ', () => { + const clock = sinon.useFakeTimers({ + toFake: ['setTimeout', 'clearTimeout'], + }); history.location.pathname = `${routes.main.path}${routes.wallet.path}saved-accounts`; wrapper.setProps({ history }); wrapper.find('.x-button').simulate('click'); + clock.tick(600); + expect(props.dialogHidden).to.have.been.calledWith(); expect(history.goBack).to.have.been.calledWith(); + clock.restore(); }); + + // this test used to pass only because the history.push spy was not in beforeEach it.skip('should fix the route if there are two dialog names', () => { const newProps = Object.assign({}, { dialog: dialogProps, history }, props); From baa3e10b210f749719285d6c8ac5c7fa1957cea8 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Wed, 21 Mar 2018 16:27:31 +0100 Subject: [PATCH 22/25] :nail_care: fix lint errors --- src/components/dialog/dialog.test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/dialog/dialog.test.js b/src/components/dialog/dialog.test.js index dfe3249793..db95d65333 100644 --- a/src/components/dialog/dialog.test.js +++ b/src/components/dialog/dialog.test.js @@ -80,8 +80,6 @@ describe('Dialog', () => { clock.restore(); }); - - // this test used to pass only because the history.push spy was not in beforeEach it.skip('should fix the route if there are two dialog names', () => { const newProps = Object.assign({}, { dialog: dialogProps, history }, props); From 985c30d26e869f7e6038fc8ee840d1f2804f0151 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Wed, 21 Mar 2018 18:03:59 +0100 Subject: [PATCH 23/25] :bug: fix vertical scroll --- src/components/savedAccounts/savedAccounts.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index 31c1e47b61..edb0aa22b7 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -65,6 +65,7 @@ width: calc(100vw - (24px * 2)); /* stylelint-disable-line */ max-width: calc(100vw - (24px * 2)); /* stylelint-disable-line */ padding: 0 232px; + box-sizing: border-box; & > li { display: inline-block; From fbafd0cf5b6d9b26c30bdeb97a4e561930467c46 Mon Sep 17 00:00:00 2001 From: Pablo Molina Date: Thu, 22 Mar 2018 10:26:02 +0100 Subject: [PATCH 24/25] :bug: remove padding showing scrollbar displaced --- src/components/savedAccounts/savedAccounts.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css index edb0aa22b7..91ad70a0df 100644 --- a/src/components/savedAccounts/savedAccounts.css +++ b/src/components/savedAccounts/savedAccounts.css @@ -23,7 +23,6 @@ .content { position: relative; - padding: 24px; height: 100%; box-sizing: border-box; overflow: auto; @@ -61,9 +60,9 @@ overflow: auto; white-space: nowrap; text-align: center; - height: calc(100vh - (24px * 2)); /* stylelint-disable-line */ - width: calc(100vw - (24px * 2)); /* stylelint-disable-line */ - max-width: calc(100vw - (24px * 2)); /* stylelint-disable-line */ + height: 100vh; /* stylelint-disable-line */ + width: 100vw; /* stylelint-disable-line */ + max-width: 100vw; /* stylelint-disable-line */ padding: 0 232px; box-sizing: border-box; From 91b3c7659edf920e22854273b7357f80a7364386 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Thu, 22 Mar 2018 15:31:53 +0100 Subject: [PATCH 25/25] Make vote url e2e scenario pending ... because the dialog it uses was removed. It will be re-enabled in #279. --- test/e2e/voting.feature | 1 + 1 file changed, 1 insertion(+) diff --git a/test/e2e/voting.feature b/test/e2e/voting.feature index 10ce6d1c60..62566c308b 100644 --- a/test/e2e/voting.feature +++ b/test/e2e/voting.feature @@ -51,6 +51,7 @@ Feature: Voting page And I wait 0.5 seconds Then I should see text "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain." in "result box message" element + @pending Scenario: should allow to select delegates by URL Given I'm logged in as "delegate candidate" When I go to "/main/voting/vote?votes=standby_27,standby_28,standby_29,nonexisting_22&unvotes=standby_33"