Merge pull request #275 from meriadec/manager-page

Redesign manager page
7 years ago · 2eb0d537cd
10 changed files with 150 additions and 36 deletions
--- a/src/components/ManagerPage/AppsList.js
+++ b/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)
--- a/src/components/ManagerPage/DeviceInfos.js
+++ b/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',
--- a/src/components/ManagerPage/ManagerApp.js
+++ b/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: 2,
+  m: 3,
+  p: 4,
+  boxShadow: 0,
+  flow: 3,
 })`
-  width: 150px;
-  height: 150px;
+  width: 156px;
+  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) {
-  const { name, icon, onInstall, onUninstall } = props
+function ManagerApp(props: 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} />
-
-      <Text ff="Museo Sans|Bold">{name}</Text>
-      <Box horizontal flow={2}>
-        <ActionBtn onClick={onInstall}>{'Install'}</ActionBtn>
-        <ActionBtn onClick={onUninstall}>{'Remove'}</ActionBtn>
+      <Box align="center">
+        <AppName>{name}</AppName>
+        <Text ff="Open Sans|Regular" fontSize={3} color="grey">
+          {version}
+        </Text>
      </Box>
+      <Button outline onClick={onInstall}>
+        {t('manager:install')}
+      </Button>
    </Container>
  )
 }
+
+export default translate()(ManagerApp)
--- a/src/components/ManagerPage/index.js
+++ b/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') {
--- a/src/components/ManagerPage/stories/ManagerApp.stories.js
+++ b/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>
+))
--- a/src/components/OperationsList/index.js
+++ b/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};
  }
 `

--- a/src/components/base/Button/index.js
+++ b/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) : '')};
  }
 `
--- a/src/components/base/Button/stories.js
+++ b/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>
 ))
--- a/static/i18n/en/manager.yml
+++ b/static/i18n/en/manager.yml
@ -1,3 +1,5 @@
 tabs:
  apps: Apps
  device: My device
+install: Install
+allApps: All apps
--- a/yarn.lock
+++ b/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: