mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-24 09:18:09 +00:00
Styled MenuItems component
This commit is contained in:
Vladimir Volek
parent
ab4ecbebd7
commit
9e86cfdc0c
@ -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',
|
||||
],
|
||||
|
||||
@ -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 (
|
||||
<Wrapper>
|
||||
<Item>Device settings</Item>
|
||||
<Item>Forget</Item>
|
||||
{this.showClone() && <Item>Create hidden wallet</Item>}
|
||||
{this.showRenewSession() && <Item>Renew session</Item>}
|
||||
<Item>
|
||||
<Icon icon={icons.COG} size={25} color={colors.TEXT_SECONDARY} />
|
||||
<Label>Device settings</Label>
|
||||
</Item>
|
||||
<Item>
|
||||
<Icon icon={icons.EJECT} size={25} color={colors.TEXT_SECONDARY} />
|
||||
<Label>Forget</Label>
|
||||
</Item>
|
||||
{this.showClone() && (
|
||||
<Item>
|
||||
<Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
|
||||
<Label>Create hidden wallet</Label>
|
||||
</Item>
|
||||
)}
|
||||
{this.showRenewSession() && (
|
||||
<Item>
|
||||
<Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
|
||||
<Label>Renew session</Label>
|
||||
</Item>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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<Props> {
|
||||
// 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,13 +128,15 @@ export class DeviceDropdown extends Component<Props> {
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
{currentDeviceMenu}
|
||||
{/* {currentDeviceMenu} */}
|
||||
{this.showMenuItems() && <MenuItems selectedDevice={selectedDevice} />}
|
||||
{this.showDivider() && <AsideDivider textLeft="Other devices" />}
|
||||
<DeviceList
|
||||
devices={devices}
|
||||
selectedDevice={selectedDevice}
|
||||
onSelectDevice={onSelectDevice}
|
||||
/>
|
||||
<ButtonWrapper>
|
||||
{isWebUSB(transport) && (
|
||||
<Button
|
||||
className="trezor-webusb-button"
|
||||
@ -153,6 +144,7 @@ export class DeviceDropdown extends Component<Props> {
|
||||
isWebUsb
|
||||
/>
|
||||
)}
|
||||
</ButtonWrapper>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user