From b2630fe8ac17f2bae2fdef555ac6a26ad5c7f1fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Thu, 1 Feb 2018 17:41:44 +0100 Subject: [PATCH 1/2] Add backdrop-filter, and remove vibrancy on application --- src/components/AppRegionDrag.js | 6 ++++-- src/components/SideBar/Item.js | 7 ++----- src/components/SideBar/index.js | 7 +++---- src/components/TopBar.js | 35 +++++++++++++++++++++++++++++++-- src/components/Wrapper.js | 18 ++++++++--------- src/helpers/btc.js | 2 +- src/main/app.js | 4 +++- src/styles/global.js | 3 ++- 8 files changed, 56 insertions(+), 26 deletions(-) diff --git a/src/components/AppRegionDrag.js b/src/components/AppRegionDrag.js index 9be9f09d..61c12801 100644 --- a/src/components/AppRegionDrag.js +++ b/src/components/AppRegionDrag.js @@ -4,7 +4,9 @@ import styled from 'styled-components' export default styled.div` -webkit-app-region: drag; - background: ${p => p.theme.colors.white}; height: 40px; - z-index: 21; + position: absolute; + top: 0; + left: 0; + right: 0; ` diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js index 038e64a3..962e622e 100644 --- a/src/components/SideBar/Item.js +++ b/src/components/SideBar/Item.js @@ -30,12 +30,11 @@ const mapDispatchToProps = { const Container = styled(Box).attrs({ horizontal: true, align: 'center', - color: 'lead', p: 2, flow: 2, })` cursor: pointer; - color: ${p => (p.isActive ? p.theme.colors.white : '')}; + color: ${p => (p.isActive ? '#1d2027' : '#b8b8b8')}; background: ${p => (p.isActive ? 'rgba(255, 255, 255, 0.05)' : '')}; box-shadow: ${p => p.isActive ? `${p.theme.colors.blue} 4px 0 0 inset` : `${p.theme.colors.blue} 0 0 0 inset`}; @@ -71,9 +70,7 @@ function Item({ children, desc, icon, linkTo, push, location, modal, openModal } > {icon && }
- - {children} - + {children} {desc && ( {desc} diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index da5d8922..bfa10a27 100644 --- a/src/components/SideBar/index.js +++ b/src/components/SideBar/index.js @@ -15,7 +15,6 @@ import { openModal } from 'reducers/modals' import { getAccounts } from 'reducers/accounts' import { formatBTC } from 'helpers/format' -import { rgba } from 'styles/helpers' import Box from 'components/base/Box' import GrowScroll from 'components/base/GrowScroll' @@ -34,7 +33,7 @@ const CapsSubtitle = styled(Box).attrs({ const Container = styled(Box).attrs({ noShrink: true, })` - background-color: ${p => rgba(p.theme.colors[p.bg], process.platform === 'darwin' ? 0.4 : 1)}; + margin-top: 40px; width: ${p => p.theme.sizes.sideBarWidth}px; ` @@ -68,8 +67,8 @@ class SideBar extends PureComponent { const { t, accounts, openModal } = this.props return ( - - + + {t('sidebar.menu')}
diff --git a/src/components/TopBar.js b/src/components/TopBar.js index a70dde7a..36f67c23 100644 --- a/src/components/TopBar.js +++ b/src/components/TopBar.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import { connect } from 'react-redux' +import styled from 'styled-components' import { ipcRenderer } from 'electron' import type { MapStateToProps, MapDispatchToProps } from 'react-redux' @@ -16,6 +17,35 @@ import { hasPassword } from 'reducers/settings' import Box from 'components/base/Box' +const Container = styled(Box).attrs({ + borderColor: '#e2e2e2', + borderWidth: 1, + borderBottom: true, + noShrink: true, + px: 3, + align: 'center', + horizontal: true, +})` + height: 60px; + position: absolute; + overflow: hidden; + left: 0; + right: 0; + top: 0; + z-index: 20; +` + +const Filter = styled.div` + position: absolute; + top: 0; + right: 0; + left: 0; + margin: -300px; + bottom: 0; + backdrop-filter: blur(20px); + z-index: -1; +` + const mapStateToProps: MapStateToProps<*, *, *> = state => ({ hasAccounts: Object.keys(getAccounts(state)).length > 0, currentDevice: getCurrentDevice(state), @@ -100,7 +130,8 @@ class TopBar extends PureComponent { const { sync } = this.state return ( - + + {hasAccounts && (sync.progress === true @@ -111,7 +142,7 @@ class TopBar extends PureComponent { {hasPassword && } - + ) } } diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js index efd6bf01..0f330bbf 100644 --- a/src/components/Wrapper.js +++ b/src/components/Wrapper.js @@ -31,19 +31,17 @@ class Wrapper extends Component<{}> { ))} - + - + - - {__PROD__ && } - - - - - - + {__PROD__ && } + + + + + diff --git a/src/helpers/btc.js b/src/helpers/btc.js index ba760279..1c8ef560 100644 --- a/src/helpers/btc.js +++ b/src/helpers/btc.js @@ -46,7 +46,7 @@ export async function getAccount({ hdnode, segwit, network, - asyncDelay = 100, + asyncDelay = 500, }: { allAddresses?: Array, currentIndex?: number, diff --git a/src/main/app.js b/src/main/app.js index 0bbe8d3a..53dde287 100644 --- a/src/main/app.js +++ b/src/main/app.js @@ -14,7 +14,6 @@ function createMainWindow() { ? { frame: false, titleBarStyle: 'hiddenInset', - vibrancy: 'ultra-dark', // https://github.com/electron/electron/issues/10521 } : {}), center: true, @@ -23,6 +22,9 @@ function createMainWindow() { width: MIN_WIDTH, minHeight: MIN_HEIGHT, minWidth: MIN_WIDTH, + webPreferences: { + blinkFeatures: 'CSSBackdropFilter', + }, } const window = new BrowserWindow(windowOptions) diff --git a/src/styles/global.js b/src/styles/global.js index 4cf30cd2..a08115d4 100644 --- a/src/styles/global.js +++ b/src/styles/global.js @@ -46,12 +46,13 @@ injectGlobal` } .scrollbar-thumb { - background: rgba(102, 102, 102, 0.5) !important; + background: rgb(102, 102, 102) !important; padding: 2px; background-clip: content-box !important; } .scrollbar-track { background: transparent !important; transition: opacity 0.2s ease-in-out !important; + z-index: 20 !important; } ` From ca05dd93cbd7fa5adc81338873fe34884154bc50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Fri, 2 Feb 2018 14:15:20 +0100 Subject: [PATCH 2/2] Add feature for rename and archive account --- src/actions/accounts.js | 6 + src/components/AccountPage.js | 10 +- src/components/DashboardPage.js | 4 +- src/components/ReceiveBox.js | 5 +- src/components/SelectAccount/index.js | 4 +- src/components/SideBar/index.js | 41 +++-- src/components/TopBar.js | 5 +- src/components/base/Button/index.js | 1 + src/components/base/Modal/index.js | 13 +- src/components/base/Modal/stories.js | 2 - src/components/modals/SettingsAccount.js | 186 +++++++++++++++++++++++ src/components/modals/index.js | 1 + src/constants.js | 1 + src/main/app.js | 3 - src/reducers/accounts.js | 20 +++ src/reducers/modals.js | 11 ++ src/styles/global.js | 10 +- src/types/common.js | 1 + 18 files changed, 266 insertions(+), 58 deletions(-) create mode 100644 src/components/modals/SettingsAccount.js diff --git a/src/actions/accounts.js b/src/actions/accounts.js index bb4b20fd..ed8da2ad 100644 --- a/src/actions/accounts.js +++ b/src/actions/accounts.js @@ -14,6 +14,12 @@ export const addAccount: AddAccount = payload => ({ payload, }) +export type EditAccount = Account => { type: string, payload: Account } +export const editAccount: AddAccount = payload => ({ + type: 'DB:EDIT_ACCOUNT', + payload, +}) + type FetchAccounts = () => { type: string } export const fetchAccounts: FetchAccounts = () => ({ type: 'FETCH_ACCOUNTS', diff --git a/src/components/AccountPage.js b/src/components/AccountPage.js index e3db5bff..649c9fbf 100644 --- a/src/components/AccountPage.js +++ b/src/components/AccountPage.js @@ -5,7 +5,7 @@ import { compose } from 'redux' import { connect } from 'react-redux' import { translate } from 'react-i18next' -import { MODAL_SEND, MODAL_RECEIVE } from 'constants' +import { MODAL_SEND, MODAL_RECEIVE, MODAL_SETTINGS_ACCOUNT } from 'constants' import type { MapStateToProps } from 'react-redux' import type { T, Account, AccountData } from 'types/common' @@ -46,7 +46,7 @@ class AccountPage extends PureComponent { - {`${account.name} account`} + {account.name} @@ -70,7 +70,11 @@ class AccountPage extends PureComponent { - + + + + + ) : ( + account.name + )} + + {!editName && + nameHovered && ( + + + + )} + + + + + + + + + + + ) + }} + /> + ) + } +} + +export default connect(null, mapDispatchToProps)(SettingsAccount) diff --git a/src/components/modals/index.js b/src/components/modals/index.js index aede545a..26754eb5 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -1,3 +1,4 @@ export AddAccount from './AddAccount' export Receive from './Receive' export Send from './Send' +export SettingsAccount from './SettingsAccount' diff --git a/src/constants.js b/src/constants.js index 73575ade..b776dcd7 100644 --- a/src/constants.js +++ b/src/constants.js @@ -4,3 +4,4 @@ export const SYNC_ACCOUNT_TIMEOUT = 3e3 export const MODAL_ADD_ACCOUNT = 'MODAL_ADD_ACCOUNT' export const MODAL_SEND = 'MODAL_SEND' export const MODAL_RECEIVE = 'MODAL_RECEIVE' +export const MODAL_SETTINGS_ACCOUNT = 'MODAL_SETTINGS_ACCOUNT' diff --git a/src/main/app.js b/src/main/app.js index 53dde287..438eef12 100644 --- a/src/main/app.js +++ b/src/main/app.js @@ -22,9 +22,6 @@ function createMainWindow() { width: MIN_WIDTH, minHeight: MIN_HEIGHT, minWidth: MIN_WIDTH, - webPreferences: { - blinkFeatures: 'CSSBackdropFilter', - }, } const window = new BrowserWindow(windowOptions) diff --git a/src/reducers/accounts.js b/src/reducers/accounts.js index c6cfc5d7..2ab6d4d6 100644 --- a/src/reducers/accounts.js +++ b/src/reducers/accounts.js @@ -33,6 +33,13 @@ const handlers: Object = { ...state, [account.id]: getAccount(account), }), + EDIT_ACCOUNT: (state: AccountsState, { payload: account }: { payload: Account }) => ({ + ...state, + [account.id]: { + ...state[account.id], + ...getAccount(account), + }, + }), FETCH_ACCOUNTS: (state: AccountsState, { payload: accounts }: { payload: Accounts }) => accounts, SET_ACCOUNT_DATA: ( state: AccountsState, @@ -85,6 +92,19 @@ export function getAccounts(state: { accounts: AccountsState }) { }, {}) } +export function getVisibleAccounts(state: { accounts: AccountsState }) { + const accounts = getAccounts(state) + return Object.keys(accounts).reduce((result, key) => { + const account = accounts[key] + + if (account.archived !== true) { + result[key] = account + } + + return result + }, {}) +} + export function getAccountById(state: { accounts: AccountsState }, id: string) { return getAccounts(state)[id] } diff --git a/src/reducers/modals.js b/src/reducers/modals.js index 877b32de..5d871d77 100644 --- a/src/reducers/modals.js +++ b/src/reducers/modals.js @@ -41,12 +41,23 @@ const handlers = { }, } }, + MODAL_SET_DATA: (state, { payload }: { payload: OpenPayload }) => { + const { name, data } = payload + return { + ...state, + [name]: { + ...state[name], + data, + }, + } + }, } // Actions export const openModal = createAction('MODAL_OPEN', (name, data = {}) => ({ name, data })) export const closeModal = createAction('MODAL_CLOSE', name => ({ name })) +export const setDataModal = createAction('MODAL_SET_DATA', (name, data = {}) => ({ name, data })) // Selectors diff --git a/src/styles/global.js b/src/styles/global.js index a08115d4..767e00e0 100644 --- a/src/styles/global.js +++ b/src/styles/global.js @@ -14,21 +14,17 @@ injectGlobal` font: inherit; color: inherit; user-select: none; - cursor: inherit; min-width: 0; // it will surely make problem in the future... to be inspected. flex-shrink: 0; } - html { - -ms-overflow-style: -ms-autohiding-scrollbar; - } - body { - line-height: 1.5; - font-size: 16px; + cursor: default; font-family: "Open Sans", Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 1.5; } #app { diff --git a/src/types/common.js b/src/types/common.js index 69183ecd..fe576260 100644 --- a/src/types/common.js +++ b/src/types/common.js @@ -27,6 +27,7 @@ export type AccountData = { export type Account = { id: string, + archived?: boolean, name: string, type: string, data?: AccountData,