From 5648ae12acd31b5288df853a3c98b023a330d0db Mon Sep 17 00:00:00 2001 From: meriadec Date: Fri, 13 Apr 2018 18:20:03 +0200 Subject: [PATCH] Connect the countervalue & language settings --- .../SettingsPage/sections/Display.js | 31 +++++++++++++++++-- .../SettingsPage/sections/Profile.js | 16 ++++++++-- src/components/base/Input/index.js | 27 ++++++++++------ src/components/base/Select/index.js | 3 +- static/i18n/en/settings.yml | 10 +++++- yarn.lock | 3 -- 6 files changed, 72 insertions(+), 18 deletions(-) diff --git a/src/components/SettingsPage/sections/Display.js b/src/components/SettingsPage/sections/Display.js index d2373463..bec97e04 100644 --- a/src/components/SettingsPage/sections/Display.js +++ b/src/components/SettingsPage/sections/Display.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import moment from 'moment' +import { listFiats } from '@ledgerhq/currencies' import type { Settings, T } from 'types/common' @@ -15,6 +16,12 @@ import { SettingsSectionRow as Row, } from '../SettingsSection' +const fiats = listFiats().map(fiat => ({ + key: fiat.code, + fiat, + name: `${fiat.name} - ${fiat.code}${fiat.symbol ? ` (${fiat.symbol})` : ''}`, +})) + type Props = { t: T, settings: Settings, @@ -24,11 +31,13 @@ type Props = { type State = { cachedLanguageKey: string, + cachedCounterValue: ?string, } class TabProfile extends PureComponent { state = { cachedLanguageKey: this.props.settings.language, + cachedCounterValue: fiats.find(fiat => fiat.fiat.code === this.props.settings.counterValue), } getDatas() { @@ -38,6 +47,14 @@ class TabProfile extends PureComponent { } } + handleChangeCounterValue = item => { + const { saveSettings } = this.props + this.setState({ cachedCounterValue: item.fiat }) + window.requestIdleCallback(() => { + saveSettings({ counterValue: item.fiat.code }) + }) + } + handleChangeLanguage = (languageKey: string) => { const { i18n, saveSettings } = this.props this.setState({ cachedLanguageKey: languageKey }) @@ -50,7 +67,7 @@ class TabProfile extends PureComponent { render() { const { t } = this.props - const { cachedLanguageKey } = this.state + const { cachedLanguageKey, cachedCounterValue } = this.state const { languages } = this.getDatas() const currentLanguage = languages.find(l => l.key === cachedLanguageKey) @@ -66,7 +83,17 @@ class TabProfile extends PureComponent { title={t('settings:display.counterValue')} desc={t('settings:display.counterValueDesc')} > - {'-'} + { desc="Lorem ipsum dolor sit amet" /> - - noetuhnoeth + + {'-'} + + + {'-'} + + + {'-'} + + + {'-'} + + + {'-'} diff --git a/src/components/base/Input/index.js b/src/components/base/Input/index.js index 0db390ce..c8bb5e5a 100644 --- a/src/components/base/Input/index.js +++ b/src/components/base/Input/index.js @@ -16,17 +16,17 @@ const Container = styled(Box).attrs({ border-radius: ${p => p.theme.radii[1]}px; border: 1px solid ${p => (p.isFocus ? p.theme.colors.wallet : p.theme.colors.fog)}; box-shadow: ${p => (p.isFocus ? `rgba(0, 0, 0, 0.05) 0 2px 2px` : 'none')}; - height: 40px; + height: ${p => (p.small ? '34' : '40')}px; ` const Base = styled.input.attrs({ - ff: p => p.ff || 'Open Sans|SemiBold', + ff: p => (p.ff || p.small ? 'Open Sans' : 'Open Sans|SemiBold'), fontSize: 4, })` ${fontFamily}; ${fontSize}; border: 0; - color: ${p => p.theme.colors.dark}; + color: ${p => p.theme.colors.graphite}; height: 100%; outline: none; padding: 0; @@ -65,6 +65,7 @@ type Props = { renderLeft?: any, renderRight?: any, containerProps?: Object, + small?: boolean, } type State = { @@ -77,6 +78,7 @@ class Input extends PureComponent { onFocus: noop, renderLeft: null, renderRight: null, + small: false, } state = { @@ -93,34 +95,41 @@ class Input extends PureComponent { handleClick = () => this._input && this._input.focus() - handleFocus = () => { + handleFocus = e => { const { onFocus } = this.props this.setState({ isFocus: true, }) - onFocus() + onFocus(e) } - handleBlur = () => { + handleBlur = e => { const { onBlur } = this.props this.setState({ isFocus: false, }) - onBlur() + onBlur(e) } _input = null render() { const { isFocus } = this.state - const { renderLeft, renderRight, containerProps } = this.props + const { renderLeft, renderRight, containerProps, small } = this.props return ( - + {renderLeft} (this._input = n)} onFocus={this.handleFocus} onBlur={this.handleBlur} diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js index f9b3985b..1baa0fcb 100644 --- a/src/components/base/Select/index.js +++ b/src/components/base/Select/index.js @@ -297,10 +297,11 @@ class Select extends PureComponent { {searchable ? ( } + {...getInputProps({ placeholder })} /> ) : ( diff --git a/static/i18n/en/settings.yml b/static/i18n/en/settings.yml index 1e7843ec..69a9ef43 100644 --- a/static/i18n/en/settings.yml +++ b/static/i18n/en/settings.yml @@ -23,8 +23,16 @@ currencies: explorer: Blockchain explorer explorerDesc: Lorem ipsum dolor sit amet profile: - protectWithPassword: Protect local data with a password + username: Username + usernameDesc: Lorem ipsum dolor sit amet password: Password + passwordDesc: Lorem ipsum dolor sit amet + sync: Sync accounts + syncDesc: Lorem ipsum dolor sit amet + export: Export logs + exportDesc: Lorem ipsum dolor sit amet + reset: Reset application + resetDesc: Lorem ipsum dolor sit amet about: faq: FAQ faqDesc: Lorem ipsum dolor sit amet diff --git a/yarn.lock b/yarn.lock index 7448044d..eb9f1709 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8013,9 +8013,6 @@ ledger-test-library@KhalilBellakrid/ledger-test-library-nodejs#7d37482: dependencies: axios "^0.17.1" bindings "^1.3.0" - electron "^1.8.2" - electron-builder "^20.0.4" - electron-rebuild "^1.7.3" nan "^2.6.2" prebuild-install "^2.2.2"