From 9e86cfdc0c6cc71d2fb6b8d77be5e0c90c785e89 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 27 Aug 2018 15:28:23 +0200 Subject: [PATCH] Styled MenuItems component --- src/js/config/icons.js | 9 +++ .../DeviceMenu/components/MenuItems/index.js | 61 ++++++++++++++++--- .../components/DeviceMenu/index.js | 38 +++++------- 3 files changed, 78 insertions(+), 30 deletions(-) diff --git a/src/js/config/icons.js b/src/js/config/icons.js index 1fa19a8c..629801ad 100644 --- a/src/js/config/icons.js +++ b/src/js/config/icons.js @@ -1,4 +1,13 @@ export default { + REFRESH: [ + 'M347.392 473.312c17.28-82.24 90.4-142.336 173.92-142.336 31.648 0 61.92 8.704 88.576 24.416 6.656 3.936 12.8 8.672 18.944 13.504l-68.832 68.736 192 33.056-32-198.272-38.4 42.016c-5.92-5.024-12.064-9.728-18.336-14.144-40.928-28.672-89.92-44.288-141.92-44.288-121.664 0-225.12 89.312-245.984 210.368l-3.36 20.896h72.672l2.72-13.952zM676.608 550.688c-17.28 82.24-90.4 142.336-173.92 142.336-31.648 0-61.92-8.704-88.576-24.416-6.624-3.936-12.8-8.672-18.944-13.504l68.832-68.736-192-33.056 32 198.272 38.4-42.016c5.92 5.024 12.032 9.696 18.336 14.144 40.928 28.672 89.92 44.288 141.952 44.288 121.664 0 225.12-89.312 245.984-210.368l3.328-20.864h-72.672l-2.72 13.92z', + ], + T1: [ + 'M603.2 265.6h-6.4c-25.494-5.341-54.79-8.398-84.8-8.398s-59.305 3.058-87.592 8.879l2.792-0.48h-6.72c-30.053 5.643-52.489 31.68-52.489 62.956 0 0.367 0.003 0.733 0.009 1.099l-0.001-0.055v234.88c0.075 40.921 11.238 79.22 30.643 112.071l-0.563-1.031 35.2 60.48c11.655 19.297 32.515 32.001 56.342 32.001 0.105 0 0.209 0 0.314-0.001h44.144c0.359 0.007 0.783 0.011 1.208 0.011 23.569 0 44.162-12.74 55.269-31.709l0.164-0.302 36.16-64c18.232-31.447 29.027-69.173 29.12-109.413v-232.987c0.005-0.293 0.008-0.639 0.008-0.986 0-31.391-22.599-57.503-52.416-62.954l-0.392-0.059zM629.76 563.2c-0.193 35.364-9.792 68.446-26.418 96.923l0.498-0.923-35.84 64c-6.868 11.865-19.463 19.742-33.906 19.84h-44.174c-0.073 0-0.159 0.001-0.246 0.001-14.427 0-27.041-7.762-33.894-19.338l-0.1-0.183-34.88-59.84c-16.656-28.155-26.515-62.042-26.56-98.227v-235.853c0.133-19.025 13.742-34.833 31.751-38.359l0.249-0.041h6.72c24.050-5.126 51.682-8.062 80-8.062s55.949 2.936 82.608 8.519l-2.608-0.457h6.72c18.258 3.568 31.867 19.375 32 38.386v0.014zM422.4 353.92h179.2c3.535 0 6.4 2.865 6.4 6.4v99.2c0 3.535-2.865 6.4-6.4 6.4h-179.2c-3.535 0-6.4-2.865-6.4-6.4v-99.2c0-3.535 2.865-6.4 6.4-6.4z', + ], + COG: [ + 'M739.552 462.144h-71.328c-4.256-13.664-10.208-26.56-17.472-38.56l47.264-47.424c11.2-11.008 11.2-29.056 0-40.192l-20.064-20.032c-11.136-11.104-29.152-11.040-40.192 0l-48.128 48.032c-12.992-7.392-27.072-13.152-42.080-16.992v-62.496c0-15.68-12.672-28.48-28.448-28.48h-28.448c-15.68 0-28.416 12.8-28.416 28.48v62.464c-16.352 4.128-31.68 10.656-45.728 19.2l-40.288-40.224c-11.072-11.040-29.184-11.104-40.288 0l-20.096 20.096c-11.104 11.072-10.976 29.152 0.064 40.288l40.992 40.992c-8.672 15.136-15.168 31.648-18.88 49.152h-53.504c-15.776 0-28.544 12.736-28.544 28.48v28.416c0 15.68 12.768 28.416 28.544 28.416h57.152c5.184 17.152 12.992 32.928 23.008 47.328l-38.656 38.656c-11.136 11.136-11.136 29.216-0.064 40.288l20.064 20.096c11.2 11.040 29.248 11.040 40.32-0.032l43.232-43.2c14.528 7.232 30.336 12.48 46.944 15.2v59.488c0 15.68 12.736 28.448 28.448 28.48h28.448c15.68-0.032 28.448-12.8 28.448-28.48v-66.816c14.336-5.088 27.904-11.872 40.224-20.544l45.76 45.888c11.104 11.072 29.12 11.072 40.224 0l20.096-20.128c11.168-11.072 11.168-29.056-0.096-40.288l-50.144-50.24c6.144-12.512 10.944-25.792 13.92-39.904h67.776c15.744 0 28.448-12.672 28.48-28.448v-28.448c-0.096-15.68-12.8-28.512-28.544-28.512zM504.928 583.072c-39.264 0-71.072-31.776-71.072-71.104 0-39.264 31.808-71.040 71.072-71.040 39.296 0 71.136 31.776 71.136 71.040 0 39.328-31.84 71.104-71.136 71.104z', + ], EJECT: [ 'M276 768h471.968c11.072 0 20.032-9.76 20.032-21.824v-75.968c0-12.064-8.96-21.824-20-21.824h-472c-11.040 0-20 9.76-20 21.824v75.968c0 12.064 8.96 21.824 20 21.824zM503.552 260.192l-231.232 288.128c-6.368 7.904-1.184 20.32 8.448 20.32h462.496c9.664 0 14.816-12.384 8.448-20.32l-231.232-288.128c-4.512-5.6-12.448-5.6-16.928 0z', ], diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js index 5f5d5d72..63469ddb 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js @@ -3,26 +3,73 @@ import styled from 'styled-components'; import Icon from 'components/Icon'; import icons from 'config/icons'; import colors from 'config/colors'; +import { FONT_SIZE } from 'config/variables'; -const Wrapper = styled.div``; -const Item = styled.div``; +const Wrapper = styled.div` + padding: 0px 24px 8px 19px; + border-bottom: 1px solid ${colors.DIVIDER}; + background: ${colors.WHITE}; +`; + +const Item = styled.div` + padding: 4px 2px; + display: flex; + align-items: center; + font-size: ${FONT_SIZE.SMALL}; + line-height: 24px; + cursor: pointer; + color: ${colors.TEXT_SECONDARY}; +`; + +const Label = styled.div` + padding-left: 15px; +`; class MenuItems extends Component { + onClick(action, device) { + if (action === 'reload') { + this.props.acquireDevice(); + } else if (action === 'forget') { + this.props.forgetDevice(device); + } else if (action === 'clone') { + this.props.duplicateDevice(device); + } else if (action === 'settings') { + this.props.toggleDeviceDropdown(false); + this.props.gotoDeviceSettings(device); + } + } + showClone() { return this.props.selectedDevice.features.passphrase_protection && this.props.selectedDevice.connected && this.props.selectedDevice.available; } showRenewSession() { - return this.props.selectedDevice.status; + return this.props.selectedDevice.status !== 'available'; } render() { return ( - Device settings - Forget - {this.showClone() && Create hidden wallet} - {this.showRenewSession() && Renew session} + + + + + + + + + {this.showClone() && ( + + + + + )} + {this.showRenewSession() && ( + + + + + )} ); } diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 5103173c..00e6968b 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -6,6 +6,7 @@ import type { TrezorDevice } from 'flowtype'; import DeviceHeader from 'components/DeviceHeader'; import Button from 'components/Button'; import { isWebUSB } from 'utils/device'; +import MenuItems from './components/MenuItems'; import DeviceList from './components/DeviceList'; import type { Props } from '../common'; @@ -13,6 +14,7 @@ import type { Props } from '../common'; import AsideDivider from '../Divider'; const Wrapper = styled.div``; +const ButtonWrapper = styled.div``; export const DeviceSelect = (props: Props) => { const handleOpen = () => { @@ -84,25 +86,12 @@ export class DeviceDropdown extends Component { // window.removeEventListener('blur', this.blurHandler, false); } - onDeviceMenuClick(item: DeviceMenuItem, device: TrezorDevice): void { - if (item.type === 'reload') { - this.props.acquireDevice(); - } else if (item.type === 'forget') { - this.props.forgetDevice(device); - } else if (item.type === 'clone') { - this.props.duplicateDevice(device); - } else if (item.type === 'settings') { - this.props.toggleDeviceDropdown(false); - this.props.gotoDeviceSettings(device); - } - } - showDivider() { return this.props.devices.length > 1; } - getMenu() { - + showMenuItems() { + return this.props.wallet.selectedDevice; } render() { @@ -139,20 +128,23 @@ export class DeviceDropdown extends Component { return ( - {currentDeviceMenu} + {/* {currentDeviceMenu} */} + {this.showMenuItems() && } {this.showDivider() && } - {isWebUSB(transport) && ( -