diff options
Diffstat (limited to 'ui/app/components/app-header')
-rw-r--r-- | ui/app/components/app-header/app-header.component.js | 127 | ||||
-rw-r--r-- | ui/app/components/app-header/app-header.container.js | 40 | ||||
-rw-r--r-- | ui/app/components/app-header/index.js | 1 | ||||
-rw-r--r-- | ui/app/components/app-header/index.scss | 90 |
4 files changed, 0 insertions, 258 deletions
diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js deleted file mode 100644 index 14f8b9f30..000000000 --- a/ui/app/components/app-header/app-header.component.js +++ /dev/null @@ -1,127 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import Identicon from '../identicon' -import { DEFAULT_ROUTE } from '../../routes' -const NetworkIndicator = require('../network') - -export default class AppHeader extends PureComponent { - static propTypes = { - history: PropTypes.object, - network: PropTypes.string, - provider: PropTypes.object, - networkDropdownOpen: PropTypes.bool, - showNetworkDropdown: PropTypes.func, - hideNetworkDropdown: PropTypes.func, - toggleAccountMenu: PropTypes.func, - selectedAddress: PropTypes.string, - isUnlocked: PropTypes.bool, - hideNetworkIndicator: PropTypes.bool, - disabled: PropTypes.bool, - isAccountMenuOpen: PropTypes.bool, - } - - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - handleNetworkIndicatorClick (event) { - event.preventDefault() - event.stopPropagation() - - const { networkDropdownOpen, showNetworkDropdown, hideNetworkDropdown } = this.props - - if (networkDropdownOpen === false) { - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Opened Network Menu', - }, - }) - showNetworkDropdown() - } else { - hideNetworkDropdown() - } - } - - renderAccountMenu () { - const { isUnlocked, toggleAccountMenu, selectedAddress, disabled, isAccountMenuOpen } = this.props - - return isUnlocked && ( - <div - className={classnames('account-menu__icon', { - 'account-menu__icon--disabled': disabled, - })} - onClick={() => { - if (!disabled) { - !isAccountMenuOpen && this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Opened Main Menu', - }, - }) - toggleAccountMenu() - } - }} - > - <Identicon - address={selectedAddress} - diameter={32} - /> - </div> - ) - } - - render () { - const { - history, - network, - provider, - isUnlocked, - hideNetworkIndicator, - disabled, - } = this.props - - return ( - <div - className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}> - <div className="app-header__contents"> - <div - className="app-header__logo-container" - onClick={() => history.push(DEFAULT_ROUTE)} - > - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> - <div className="app-header__account-menu-container"> - { - !hideNetworkIndicator && ( - <div className="app-header__network-component-wrapper"> - <NetworkIndicator - network={network} - provider={provider} - onClick={event => this.handleNetworkIndicatorClick(event)} - disabled={disabled} - /> - </div> - ) - } - { this.renderAccountMenu() } - </div> - </div> - </div> - ) - } -} diff --git a/ui/app/components/app-header/app-header.container.js b/ui/app/components/app-header/app-header.container.js deleted file mode 100644 index 1abc2afeb..000000000 --- a/ui/app/components/app-header/app-header.container.js +++ /dev/null @@ -1,40 +0,0 @@ -import { connect } from 'react-redux' -import { withRouter } from 'react-router-dom' -import { compose } from 'recompose' - -import AppHeader from './app-header.component' -const actions = require('../../actions') - -const mapStateToProps = state => { - const { appState, metamask } = state - const { networkDropdownOpen } = appState - const { - network, - provider, - selectedAddress, - isUnlocked, - isAccountMenuOpen, - } = metamask - - return { - networkDropdownOpen, - network, - provider, - selectedAddress, - isUnlocked, - isAccountMenuOpen, - } -} - -const mapDispatchToProps = dispatch => { - return { - showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), - hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), - toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), - } -} - -export default compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(AppHeader) diff --git a/ui/app/components/app-header/index.js b/ui/app/components/app-header/index.js deleted file mode 100644 index 6de2f9c78..000000000 --- a/ui/app/components/app-header/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './app-header.container' diff --git a/ui/app/components/app-header/index.scss b/ui/app/components/app-header/index.scss deleted file mode 100644 index 325844af5..000000000 --- a/ui/app/components/app-header/index.scss +++ /dev/null @@ -1,90 +0,0 @@ -.app-header { - align-items: center; - background: $gallery; - position: relative; - z-index: $header-z-index; - display: flex; - flex-flow: column nowrap; - width: 100%; - flex: 0 0 auto; - - @media screen and (max-width: 575px) { - padding: 12px; - box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); - z-index: $mobile-header-z-index; - } - - @media screen and (min-width: 576px) { - height: 75px; - justify-content: center; - - &--back-drop { - &::after { - content: ''; - position: absolute; - width: 100%; - height: 32px; - background: $gallery; - bottom: -32px; - } - } - } - - &__metafox-logo { - cursor: pointer; - - &--icon { - @media screen and (min-width: $break-large) { - display: none; - } - } - - &--horizontal { - @media screen and (max-width: $break-small) { - display: none; - } - } - } - - &__contents { - display: flex; - justify-content: space-between; - flex-flow: row nowrap; - width: 100%; - - @media screen and (max-width: 575px) { - height: 100%; - } - - @media screen and (min-width: 576px) { - width: 85vw; - } - - @media screen and (min-width: 769px) { - width: 80vw; - } - - @media screen and (min-width: 1281px) { - width: 62vw; - } - } - - &__logo-container { - display: flex; - flex-direction: row; - align-items: center; - cursor: pointer; - } - - &__account-menu-container { - display: flex; - flex-flow: row nowrap; - align-items: center; - } - - &__network-component-wrapper { - display: flex; - flex-direction: row; - align-items: center; - } -} |