diff --git a/src/actions/accounts.js b/src/actions/accounts.js index 4e0ee38d..8820f771 100644 --- a/src/actions/accounts.js +++ b/src/actions/accounts.js @@ -22,11 +22,27 @@ function sortAccounts(accounts, orderAccounts) { return accountsSorted } -export type AddAccount = Account => { type: string, payload: Account } -export const addAccount: AddAccount = payload => ({ - type: 'DB:ADD_ACCOUNT', - payload, -}) +export type UpdateOrderAccounts = string => (Dispatch<*>, Function) => void +export const updateOrderAccounts: UpdateOrderAccounts = (orderAccounts: string) => ( + dispatch, + getState, +) => { + const { accounts } = getState() + dispatch({ + type: 'DB:SET_ACCOUNTS', + payload: sortAccounts(accounts, orderAccounts), + }) +} + +export type AddAccount = Account => (Function, Function) => void +export const addAccount: AddAccount = payload => (dispatch, getState) => { + const { settings: { orderAccounts } } = getState() + dispatch({ + type: 'ADD_ACCOUNT', + payload, + }) + dispatch(updateOrderAccounts(orderAccounts)) +} export type RemoveAccount = Account => { type: string, payload: Account } export const removeAccount: RemoveAccount = payload => ({ @@ -44,25 +60,12 @@ export const fetchAccounts: FetchAccounts = () => (dispatch, getState) => { }) } -export type UpdateOrderAccounts = string => (Dispatch<*>, Function) => void -export const updateOrderAccounts: UpdateOrderAccounts = (orderAccounts: string) => ( - dispatch, - getState, -) => { - const { accounts } = getState() - - dispatch({ - type: 'DB:SET_ACCOUNTS', - payload: sortAccounts(accounts, orderAccounts), - }) -} - export type UpdateAccount = Account => (Function, Function) => void export const updateAccount: UpdateAccount = payload => (dispatch, getState) => { - const { settings } = getState() + const { settings: { orderAccounts } } = getState() dispatch({ type: 'UPDATE_ACCOUNT', payload, }) - dispatch(updateOrderAccounts(settings.orderAccounts)) + dispatch(updateOrderAccounts(orderAccounts)) } diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index 892659b4..31465fd4 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -30,6 +30,8 @@ import Text from 'components/base/Text' import TransactionsList from 'components/TransactionsList' import DropDown from 'components/base/DropDown' +import IconAngleDown from 'icons/AngleDown' + import AccountCard from './AccountCard' import BalanceInfos from './BalanceInfos' @@ -143,19 +145,21 @@ class DashboardPage extends PureComponent { addFakeDatasOnAccounts = () => { const { accounts } = this.props - this._timeout = setTimeout(() => { - window.requestAnimationFrame(() => { - this.setState(prev => ({ - fakeDatas: [ - ...accounts.reduce((res, acc, i) => { - if (res[i]) { - const nextIndex = res[i].length - res[i][nextIndex] = generateFakeData(nextIndex) - } - return res - }, prev.fakeDatas), - ], - })) + window.requestAnimationFrame(() => { + this.setState(prev => ({ + fakeDatas: [ + ...accounts.reduce((res, acc, i) => { + if (res[i]) { + const nextIndex = res[i].length + res[i][nextIndex] = generateFakeData(nextIndex) + } + return res + }, prev.fakeDatas), + ], + })) + + this._timeout = setTimeout(() => { + this.addFakeDatasOnAccounts() }, TIMEOUT_REFRESH_DATAS) }) } @@ -250,8 +254,12 @@ class DashboardPage extends PureComponent { items={sortItems} ff="Open Sans|SemiBold" fontSize={4} + value={sortItems.find(s => s.key === orderAccounts)} > - {t(`orderAccounts.${orderAccounts}`)} + + {t(`orderAccounts.${orderAccounts}`)} + + @@ -282,10 +290,10 @@ class DashboardPage extends PureComponent { ))} - - - + + + )} diff --git a/src/components/TopBar.js b/src/components/TopBar.js index b0e20601..136ee881 100644 --- a/src/components/TopBar.js +++ b/src/components/TopBar.js @@ -14,6 +14,7 @@ import { hasPassword } from 'reducers/settings' import IconDevices from 'icons/Devices' import IconActivity from 'icons/Activity' +import IconAngleDown from 'icons/AngleDown' import DropDown from 'components/base/DropDown' import Box from 'components/base/Box' @@ -44,6 +45,19 @@ const Bar = styled.div` background: ${p => p.theme.colors.mouse}; ` +const Activity = styled.div` + background: ${p => + p.progress === true + ? p.theme.colors.dodgerBlue + : p.fail === true ? p.theme.colors.grenade : p.theme.colors.green}; + border-radius: 50%; + bottom: 20px; + height: 4px; + position: absolute; + right: -2px; + width: 4px; +` + const mapStateToProps: MapStateToProps<*, *, *> = state => ({ hasAccounts: getAccounts(state).length > 0, hasPassword: hasPassword(state), @@ -125,18 +139,13 @@ class TopBar extends PureComponent { - + + {hasAccounts && } - - {hasAccounts && - (sync.progress === true - ? 'Synchronizing...' - : sync.fail === true ? 'Synchronization fail :(' : 'Synchronisation finished!')} - {hasPassword && } @@ -147,7 +156,10 @@ class TopBar extends PureComponent { ff="Open Sans|SemiBold" fontSize={4} > - {'Khalil Benihoud'} + + {'Khalil Benihoud'} + + diff --git a/src/components/base/DropDown/index.js b/src/components/base/DropDown/index.js index 9fe82f4e..b07dd485 100644 --- a/src/components/base/DropDown/index.js +++ b/src/components/base/DropDown/index.js @@ -27,14 +27,21 @@ const Trigger = styled(Box)` const Drop = styled(Box).attrs({ bg: 'white', boxShadow: 0, + borderRadius: 1, + mt: 1, })` position: absolute; top: 100%; right: 0; + + > * + * { + border-top: 1px solid ${p => p.theme.colors.argile}; + } ` const Item = styled(Box).attrs({ py: 2, + fontSize: 3, px: 4, bg: p => (p.isHighlighted ? 'pearl' : ''), })` diff --git a/src/components/base/GrowScroll/index.js b/src/components/base/GrowScroll/index.js index ed81bdad..baa0554b 100644 --- a/src/components/base/GrowScroll/index.js +++ b/src/components/base/GrowScroll/index.js @@ -1,7 +1,10 @@ // @flow +/* eslint-disable class-methods-use-this */ + import React, { PureComponent } from 'react' import Scrollbar from 'react-smooth-scrollbar' +import SmoothScrollbar, { ScrollbarPlugin } from 'smooth-scrollbar' import noop from 'lodash/noop' import Box from 'components/base/Box' @@ -73,4 +76,17 @@ class GrowScroll extends PureComponent { } } +SmoothScrollbar.use( + class DisableXScroll extends ScrollbarPlugin { + static pluginName = 'disableXScroll' + + transformDelta(delta) { + return { + x: 0, + y: delta.y, + } + } + }, +) + export default GrowScroll diff --git a/src/components/base/Pills/index.js b/src/components/base/Pills/index.js index e86d7865..b8942f8b 100644 --- a/src/components/base/Pills/index.js +++ b/src/components/base/Pills/index.js @@ -26,13 +26,13 @@ const Pill = styled(Tabbable).attrs({ ff: p => (p.isActive ? 'Open Sans|SemiBold' : 'Open Sans'), color: p => (p.isActive ? 'dodgerBlue' : 'warmGrey'), bg: p => (p.isActive ? rgba(p.theme.colors.dodgerBlue, 0.1) : ''), - px: 2, + px: 3, fontSize: 4, + borderRadius: 1, align: 'center', justify: 'center', })` - height: 30px; - border-radius: 4px; + height: 28px; outline: none; cursor: ${p => (p.isActive ? 'default' : 'pointer')}; diff --git a/src/icons/AngleDown.js b/src/icons/AngleDown.js new file mode 100644 index 00000000..deb20ad9 --- /dev/null +++ b/src/icons/AngleDown.js @@ -0,0 +1,10 @@ +import React from 'react' + +export default props => ( + + + +)