From fd603c6a708306e7c10575a086677a67f55d4a98 Mon Sep 17 00:00:00 2001 From: Szymon Lesisz Date: Wed, 9 May 2018 13:11:38 +0200 Subject: [PATCH] new device menu + device settings --- src/js/components/wallet/DeviceSettings.js | 9 +++-- .../wallet/account/DeviceSettingsTabs.js | 31 +++++++++++++++++ .../wallet/aside/DeviceSelection.js | 7 ++-- src/js/components/wallet/index.js | 2 ++ src/styles/aside.less | 33 ++++++++++++++----- src/styles/deviceSettings.less | 32 ++++++++++++++++++ src/styles/index.less | 1 + 7 files changed, 103 insertions(+), 12 deletions(-) create mode 100644 src/js/components/wallet/account/DeviceSettingsTabs.js create mode 100644 src/styles/deviceSettings.less diff --git a/src/js/components/wallet/DeviceSettings.js b/src/js/components/wallet/DeviceSettings.js index 6fd7daeb..984524d8 100644 --- a/src/js/components/wallet/DeviceSettings.js +++ b/src/js/components/wallet/DeviceSettings.js @@ -7,8 +7,13 @@ import { connect } from 'react-redux'; export const DeviceSettings = () => { return ( -
- Device settings +
+

Device settings

+
+

Device settings is under construction

+

Please use old wallet to edit your device settings

+ Take me to the old wallet +
); } diff --git a/src/js/components/wallet/account/DeviceSettingsTabs.js b/src/js/components/wallet/account/DeviceSettingsTabs.js new file mode 100644 index 00000000..b1536a71 --- /dev/null +++ b/src/js/components/wallet/account/DeviceSettingsTabs.js @@ -0,0 +1,31 @@ +/* @flow */ +'use strict'; + +import React, { Component } from 'react'; +import { NavLink } from 'react-router-dom'; + + +type Props = { + pathname: string; +} +type State = { + style: { + width: number, + left: number + }; +} + +const AccountTabs = (props: any): any => { + + const urlParams = props.match.params; + //const urlParams = props.match ? props.match.params : { address: '0' }; + const basePath = `/device/${urlParams.device}/network/${urlParams.network}/address/${urlParams.address}`; + + return ( +
+ Device settings +
+ ); +} + +export default AccountTabs; \ No newline at end of file diff --git a/src/js/components/wallet/aside/DeviceSelection.js b/src/js/components/wallet/aside/DeviceSelection.js index 866b09cb..e592fc7a 100644 --- a/src/js/components/wallet/aside/DeviceSelection.js +++ b/src/js/components/wallet/aside/DeviceSelection.js @@ -245,7 +245,7 @@ export class DeviceDropdown extends Component { ); } - const deviceList: Array = devices.map((dev, index) => { + const deviceList = devices.map((dev, index) => { if (dev === selected) return null; let deviceStatus: string = "Connected"; @@ -272,11 +272,14 @@ export class DeviceDropdown extends Component { ); }); + + return (
{ currentDeviceMenu } - { webUsbButton } + { deviceList.length > 1 ?
Other devices
: null } { deviceList } + { webUsbButton }
); } diff --git a/src/js/components/wallet/index.js b/src/js/components/wallet/index.js index 33641ddc..a20c6a37 100644 --- a/src/js/components/wallet/index.js +++ b/src/js/components/wallet/index.js @@ -9,6 +9,7 @@ import { Route, withRouter } from 'react-router-dom'; import Header from '../common/Header'; import Footer from '../common/Footer'; import AccountTabs from './account/AccountTabs'; +import DeviceSettingsTabs from './account/DeviceSettingsTabs'; import AsideContainer from './aside'; import ModalContainer from '../modal'; import Notifications from '../common/Notification'; @@ -25,6 +26,7 @@ const Content = (props: Props) => {
diff --git a/src/styles/aside.less b/src/styles/aside.less index f34cace3..47f5238a 100644 --- a/src/styles/aside.less +++ b/src/styles/aside.less @@ -57,7 +57,6 @@ aside { } } - .sticky-container { position: relative; @@ -92,11 +91,11 @@ aside { } .trezor-webusb-button { - margin: 12px 0px 12px 80px; + margin: 12px 0px 12px 30px; + padding: 6px 24px 6px 40px; + width: 256px; } - - .device-select { background: @color_white; border-bottom: 1px solid @color_divider; @@ -123,6 +122,8 @@ aside { } &.opened { + border-bottom: 0px; + box-shadow: none; .arrow:after { transform: rotate(180deg); } @@ -250,11 +251,13 @@ aside { .device-menu { padding: 8px 0px; - // padding-left: 80px; - padding-left: 74px; + padding-left: 28px; + // padding-left: 74px; border-bottom: 1px solid @color_divider; + background: @color_white; div { + padding: 4px 0px; display: flex; align-items: center; line-height: 24px; @@ -267,7 +270,8 @@ aside { // color: @color_text_secondary; position: relative; font-size: 24px; - margin-right: 12px; + // margin-right: 12px; + margin-right: 28px; .hover(); } @@ -286,7 +290,10 @@ aside { &.clone { &:before { - .icomoon-settings; + .icomoon-T1; + font-size: 32px; + transform: translateX(-4px); + margin-right: 20px; } } @@ -493,6 +500,16 @@ aside { } } + .device-divider { + font-size: 12px; + display: flex; + justify-content: space-between; + color: @color_text_secondary; + background: @color_gray_light; + padding: 8px 30px 8px 31px; + border-bottom: 1px solid @color_divider; + } + .help { width: 320px; padding: 14px 0px; diff --git a/src/styles/deviceSettings.less b/src/styles/deviceSettings.less new file mode 100644 index 00000000..0f26d5f5 --- /dev/null +++ b/src/styles/deviceSettings.less @@ -0,0 +1,32 @@ +.device-settings { + .row { + flex: 1; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0px 48px; + padding-bottom: 98px; + + h2 { + padding: 0; + position: relative; + &:before { + .icomoon-warning; + position: absolute; + color: @color_warning_primary; + font-size: 48px; + top: -48px; + left: 0; + right: 0; + text-align: center; + } + } + + p { + padding: 12px 0px 24px 0px; + text-align: center; + } + } +} \ No newline at end of file diff --git a/src/styles/index.less b/src/styles/index.less index dde75258..2b44b544 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -17,6 +17,7 @@ @import './receive.less'; @import './summary.less'; @import './signverify.less'; +@import './deviceSettings.less'; @import './landingPage.less';