From 3cb86ffc85d51fe4d276c1ffa856038b47eb5e65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Wed, 7 Feb 2018 10:45:28 +0100 Subject: [PATCH] Add language in DevToolbar --- src/components/DevToolbar.js | 62 ++++++++++++++++++++++++++++-------- 1 file changed, 48 insertions(+), 14 deletions(-) diff --git a/src/components/DevToolbar.js b/src/components/DevToolbar.js index 12600495..88125481 100644 --- a/src/components/DevToolbar.js +++ b/src/components/DevToolbar.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import { ipcRenderer } from 'electron' +import { translate } from 'react-i18next' import { AreaChart, Area } from 'recharts' import takeRight from 'lodash/takeRight' import last from 'lodash/last' @@ -13,6 +14,7 @@ import styled from 'styled-components' import color from 'color' import Box from 'components/base/Box' +import GrowScroll from 'components/base/GrowScroll' import CopyToClipboard from 'components/base/CopyToClipboard' import theme from 'styles/theme' @@ -84,7 +86,6 @@ const Colors = styled(Box).attrs({ align: 'flex-start', })` flex-wrap: wrap; - width: ${(80 + 4) * 4}px; ` const Cl = styled(Box).attrs({ @@ -104,6 +105,22 @@ const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => ( ) +const Lang = styled(Box).attrs({ + bg: p => (p.current ? 'white' : 'night'), + color: p => (p.current ? 'night' : 'white'), + borderColor: 'white', + borderWidth: 1, + p: 1, +})` + border-radius: 3px; + cursor: pointer; +` + +const LANGUAGES = { + fr: 'français', + en: 'english', +} + type State = { isOpened: boolean, cpuUsage: Object, @@ -143,26 +160,43 @@ class DevToolbar extends PureComponent { } handleToggle = () => this.setState({ isOpened: !this.state.isOpened }) + handleChangeLanguage = lang => () => this.props.i18n.changeLanguage(lang) render() { + const { i18n } = this.props const { isOpened, cpuUsage } = this.state return ( {'DEV'} - - - {colors.map(color => ( - } - /> + + + {Object.keys(LANGUAGES).map(lang => ( + + {LANGUAGES[lang]} + ))} - - + + + + + {colors.map(color => ( + } + /> + ))} + + + + {Object.keys(cpuUsage).map(k => ( - + {k} {last(cpuUsage[k]).value}% @@ -172,7 +206,7 @@ class DevToolbar extends PureComponent { width={100} height={40} data={cpuUsage[k]} - margin={{ top: 10, right: 0, left: 0, bottom: 10 }} + margin={{ top: 10, right: 0, left: 0, bottom: 0 }} > { } } -export default DevToolbar +export default translate()(DevToolbar)