Merge pull request #275 from meriadec/manager-page

Redesign manager page

src/components/ManagerPage/AppsList.js

@@ -2,19 +2,20 @@
 
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
+import { translate } from 'react-i18next'
 
 import { runJob } from 'renderer/events'
 
 import Box from 'components/base/Box'
 import Modal, { ModalBody } from 'components/base/Modal'
 
-import type { Device } from 'types/common'
+import type { Device, T } from 'types/common'
 
 import ManagerApp from './ManagerApp'
 
 const List = styled(Box).attrs({
   horizontal: true,
-  m: -2,
+  m: -3,
 })`
   flex-wrap: wrap;
 `
@@ -35,12 +36,14 @@ type jobHandlerOptions = {
 
 type LedgerApp = {
   name: string,
+  version: string,
   icon: string,
   app: Object,
 }
 
 type Props = {
   device: Device,
+  t: T,
 }
 
 type State = {
@@ -86,7 +89,9 @@ class AppsList extends PureComponent<Props, State> {
     this.setState({ status: 'busy' })
     try {
       const { job, successResponse, errorResponse } = options
-      const { device: { path: devicePath } } = this.props
+      const {
+        device: { path: devicePath },
+      } = this.props
       const data = { appParams, devicePath }
       await runJob({ channel: 'usb', job, successResponse, errorResponse, data })
       this.setState({ status: 'success' })
@@ -109,7 +114,7 @@ class AppsList extends PureComponent<Props, State> {
 
   handleCloseModal = () => this.setState({ status: 'idle' })
 
-  render() {
+  renderList() {
     const { status, error } = this.state
     return (
       <List>
@@ -117,6 +122,7 @@ class AppsList extends PureComponent<Props, State> {
           <ManagerApp
             key={c.name}
             name={c.name}
+            version={`Version ${c.version}`}
             icon={ICONS_FALLBACK[c.icon] || c.icon}
             onInstall={this.handleInstall(c)}
             onUninstall={this.handleUninstall(c)}
@@ -146,6 +152,20 @@ class AppsList extends PureComponent<Props, State> {
       </List>
     )
   }
+
+  render() {
+    const { t } = this.props
+    return (
+      <Box flow={6}>
+        <Box>
+          <Box mb={4} color="dark" ff="Museo Sans" fontSize={6}>
+            {t('manager:allApps')}
+          </Box>
+          {this.renderList()}
+        </Box>
+      </Box>
+    )
+  }
 }
 
-export default AppsList
+export default translate()(AppsList)

src/components/ManagerPage/DeviceInfos.js

@@ -29,7 +29,9 @@ class DeviceInfos extends PureComponent<Props, State> {
   handleGetMemInfos = async () => {
     try {
       this.setState({ isLoading: true })
-      const { device: { path: devicePath } } = this.props
+      const {
+        device: { path: devicePath },
+      } = this.props
       const memoryInfos = await runJob({
         channel: 'usb',
         job: 'manager.getMemInfos',

src/components/ManagerPage/ManagerApp.js

@@ -2,51 +2,72 @@
 
 import React from 'react'
 import styled from 'styled-components'
+import { translate } from 'react-i18next'
 
-import Box, { Tabbable } from 'components/base/Box'
+import type { T } from 'types/common'
+
+import Box from 'components/base/Box'
 import Text from 'components/base/Text'
+import Button from 'components/base/Button'
 
 const Container = styled(Box).attrs({
   align: 'center',
-  justify: 'center',
+  m: 3,
-  m: 2,
+  p: 4,
+  boxShadow: 0,
+  flow: 3,
 })`
-  width: 150px;
+  width: 156px;
-  height: 150px;
+  height: 186px;
   background: white;
+  line-height: normal;
 `
 
-// https://api.ledgerwallet.com/update/assets/icons/bitcoin
-
-const ActionBtn = styled(Tabbable).attrs({
-  fontSize: 3,
-})``
-
 const AppIcon = styled.img`
   display: block;
   width: 50px;
   height: 50px;
 `
 
+const AppName = styled(Box).attrs({
+  ff: 'Museo Sans|Regular',
+  fontSize: 4,
+  color: 'dark',
+})`
+  display: block;
+  width: 115px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
 type Props = {
+  t: T,
   name: string,
+  version: string,
   icon: string,
   onInstall: Function,
-  onUninstall: Function,
+  // onUninstall: Function,
 }
 
-export default function ManagerApp(props: Props) {
+function ManagerApp(props: Props) {
-  const { name, icon, onInstall, onUninstall } = props
+  const { name, version, icon, onInstall, t } = props
   const iconUrl = `https://api.ledgerwallet.com/update/assets/icons/${icon}`
   return (
-    <Container flow={3}>
+    <Container>
       <AppIcon src={iconUrl} />
-
+      <Box align="center">
-      <Text ff="Museo Sans|Bold">{name}</Text>
+        <AppName>{name}</AppName>
-      <Box horizontal flow={2}>
+        <Text ff="Open Sans|Regular" fontSize={3} color="grey">
-        <ActionBtn onClick={onInstall}>{'Install'}</ActionBtn>
+          {version}
-        <ActionBtn onClick={onUninstall}>{'Remove'}</ActionBtn>
+        </Text>
       </Box>
+      <Button outline onClick={onInstall}>
+        {t('manager:install')}
+      </Button>
     </Container>
   )
 }
+
+export default translate()(ManagerApp)

src/components/ManagerPage/index.js

@@ -34,7 +34,7 @@ type State = {
 
 class ManagerPage extends PureComponent<Props, State> {
   state = {
-    currentTab: 'device',
+    currentTab: 'apps',
   }
 
   handleTabChange = t => this.setState({ currentTab: t.value })
@@ -42,9 +42,6 @@ class ManagerPage extends PureComponent<Props, State> {
   render() {
     const { device, t, nbDevices } = this.props
     const { currentTab } = this.state
-    if (!device) {
-      return 'eu... connecte ton device?'
-    }
     const tabs = TABS.map(i => {
       let label = t(`manager:tabs.${i.key}`)
       if (i.key === 'device') {

src/components/ManagerPage/stories/ManagerApp.stories.js

@@ -0,0 +1,54 @@
+// @flow
+
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { text, select } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+
+import Box from 'components/base/Box'
+import ManagerApp from '../ManagerApp'
+
+const stories = storiesOf('Components', module)
+
+const icons = {
+  bitcoin: 'bitcoin',
+  bitcoin_cash: 'bitcoin_cash',
+  bitcoin_gold: 'bitcoin_gold',
+  digibyte: 'digibyte',
+  hcash: 'hcash',
+  qtum: 'qtum',
+  pivx: 'pivx',
+  stealthcoin: 'stealthcoin',
+  vertcoin: 'vertcoin',
+  viacoin: 'viacoin',
+  ubiq: 'ubiq',
+  expanse: 'expanse',
+  dash: 'dash',
+  dogecoin: 'dogecoin',
+  ethereum: 'ethereum',
+  fido: 'fido',
+  litecoin: 'litecoin',
+  stratis: 'stratis',
+  ripple: 'ripple',
+  zcash: 'zcash',
+  komodo: 'komodo',
+  ssh: 'ssh',
+  posw: 'posw',
+  ark: 'ark',
+  neo: 'neo',
+  stellar: 'stellar',
+  monero: 'monero',
+  gnupg: 'gnupg',
+}
+
+stories.add('ManagerApp', () => (
+  <Box bg="lightGrey" p={6} m={-4}>
+    <ManagerApp
+      name={text('name', 'Bitcoin')}
+      icon={select('icon', icons, 'bitcoin')}
+      version={text('version', 'Version 1.0.0')}
+      onInstall={action('onInstall')}
+    />
+  </Box>
+))

src/components/OperationsList/index.js

@@ -71,7 +71,7 @@ const OperationRaw = styled(Box).attrs({
   }
 
   &:hover {
-    background: ${p => p.theme.colors.lightGrey};
+    background: ${p => p.theme.colors.lightFog};
   }
 `
 

src/components/base/Button/index.js

@@ -12,7 +12,7 @@ import fontFamily from 'styles/styled/fontFamily'
 const Base = styled.button.attrs({
   ff: 'Museo Sans|Regular',
   fontSize: p => p.fontSize || 3,
-  px: p => (p.primary ? (p.small ? 2 : 3) : 1),
+  px: p => (p.primary ? (p.small ? 2 : 3) : 2),
 })`
   ${space};
   ${color};
@@ -20,7 +20,8 @@ const Base = styled.button.attrs({
   ${fontWeight};
   ${fontFamily};
   border-radius: ${p => p.theme.radii[1]}px;
-  border: none;
+  border: ${p => (p.outline ? `1px solid ${p.theme.colors.wallet}` : 'none')};
+  color: ${p => (p.outline ? p.theme.colors.wallet : '')};
   cursor: ${p => (p.disabled ? 'default' : 'pointer')};
   height: ${p => (p.small ? 30 : 36)}px;
   outline: none;
@@ -30,7 +31,13 @@ const Base = styled.button.attrs({
   }
 
   &:active {
-    color: ${p => (p.primary ? '' : darken(p.theme.colors.grey, 0.2))};
+    color: ${p =>
+      p.primary
+        ? ''
+        : p.outline
+          ? darken(p.theme.colors.wallet, 0.1)
+          : darken(p.theme.colors.grey, 0.2)};
+    border-color: ${p => (p.outline ? darken(p.theme.colors.wallet, 0.1) : '')};
     background: ${p => (p.primary ? darken(p.theme.colors.wallet, 0.1) : '')};
   }
 `

src/components/base/Button/stories.js

@@ -47,6 +47,17 @@ stories.add('Button', () => (
           </Button>
         </Td>
       </tr>
+      <tr>
+        <Td>outline</Td>
+        <Td>
+          <Button outline>Outline button</Button>
+        </Td>
+        <Td>
+          <Button outline disabled>
+            Outline button
+          </Button>
+        </Td>
+      </tr>
     </tbody>
   </table>
 ))

static/i18n/en/manager.yml

@@ -1,3 +1,5 @@
 tabs:
   apps: Apps
   device: My device
+install: Install
+allApps: All apps

yarn.lock

@@ -4785,7 +4785,7 @@ electron-builder-lib@~20.6.2:
     semver "^5.5.0"
     temp-file "^3.1.1"
 
-electron-builder@^20.0.4, electron-builder@^20.8.1:
+electron-builder@^20.8.1:
   version "20.8.1"
   resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-20.8.1.tgz#3d19607a7f7d3ee7f3e110a6fc66c720ed1d2cc0"
   dependencies:
@@ -4965,7 +4965,7 @@ electron-webpack@^2.0.1:
     webpack-merge "^4.1.2"
     yargs "^11.1.0"
 
-electron@1.8.4, electron@^1.8.2:
+electron@1.8.4:
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/electron/-/electron-1.8.4.tgz#cca8d0e6889f238f55b414ad224f03e03b226a38"
   dependencies: