diff options
Diffstat (limited to 'ui/app/components/sidebars')
-rw-r--r-- | ui/app/components/sidebars/index.js | 1 | ||||
-rw-r--r-- | ui/app/components/sidebars/index.scss | 81 | ||||
-rw-r--r-- | ui/app/components/sidebars/sidebar-content.scss | 112 | ||||
-rw-r--r-- | ui/app/components/sidebars/sidebar.component.js | 69 | ||||
-rw-r--r-- | ui/app/components/sidebars/sidebar.constants.js | 1 | ||||
-rw-r--r-- | ui/app/components/sidebars/tests/sidebars-component.test.js | 97 |
6 files changed, 0 insertions, 361 deletions
diff --git a/ui/app/components/sidebars/index.js b/ui/app/components/sidebars/index.js deleted file mode 100644 index 732925f69..000000000 --- a/ui/app/components/sidebars/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './sidebar.component' diff --git a/ui/app/components/sidebars/index.scss b/ui/app/components/sidebars/index.scss deleted file mode 100644 index b9845d564..000000000 --- a/ui/app/components/sidebars/index.scss +++ /dev/null @@ -1,81 +0,0 @@ -@import './sidebar-content'; - -.sidebar-right-enter { - transition: transform 300ms ease-in-out; - transform: translateX(-100%); -} - -.sidebar-right-enter.sidebar-right-enter-active { - transition: transform 300ms ease-in-out; - transform: translateX(0%); -} - -.sidebar-right-leave { - transition: transform 200ms ease-out; - transform: translateX(0%); -} - -.sidebar-right-leave.sidebar-right-leave-active { - transition: transform 200ms ease-out; - transform: translateX(-100%); -} - -.sidebar-left-enter { - transition: transform 300ms ease-in-out; - transform: translateX(100%); -} - -.sidebar-left-enter.sidebar-left-enter-active { - transition: transform 300ms ease-in-out; - transform: translateX(0%); -} - -.sidebar-left-leave { - transition: transform 200ms ease-out; - transform: translateX(0%); -} - -.sidebar-left-leave.sidebar-left-leave-active { - transition: transform 200ms ease-out; - transform: translateX(100%); -} - -.sidebar-left { - flex: 1 0 230px; - background: rgb(250, 250, 250); - z-index: $sidebar-z-index; - position: fixed; - left: 15%; - right: 0; - bottom: 0; - opacity: 1; - visibility: visible; - will-change: transform; - overflow-y: auto; - box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px; - width: 85%; - height: 100%; - - @media screen and (min-width: 769px) { - width: 408px; - left: calc(100% - 408px); - } - - @media screen and (max-width: $break-small) { - width: 100%; - left: 0%; - } -} - -.sidebar-overlay { - z-index: $sidebar-overlay-z-index; - position: fixed; - height: 100%; - width: 100%; - left: 0; - right: 0; - bottom: 0; - opacity: 1; - visibility: visible; - background-color: rgba(0, 0, 0, .3); -}
\ No newline at end of file diff --git a/ui/app/components/sidebars/sidebar-content.scss b/ui/app/components/sidebars/sidebar-content.scss deleted file mode 100644 index ca6b0a458..000000000 --- a/ui/app/components/sidebars/sidebar-content.scss +++ /dev/null @@ -1,112 +0,0 @@ -.sidebar-left { - display: flex; - - .gas-modal-page-container { - display: flex; - - .page-container { - flex: 1; - max-width: 100%; - - &__content { - display: flex; - overflow-y: initial; - } - - @media screen and (max-width: $break-small) { - max-width: 344px; - min-height: auto; - } - - @media screen and (min-width: $break-small) { - max-height: none; - } - } - - .gas-price-chart { - margin-left: 10px; - - &__root { - max-height: 160px !important; - } - } - - .page-container__bottom { - display: flex; - flex-direction: column; - flex-flow: space-between; - height: 100%; - } - - .page-container__content { - overflow-y: inherit; - } - - .basic-tab-content { - height: auto; - margin-bottom: 0px; - border-bottom: 1px solid #d2d8dd; - flex: 1 1 70%; - - @media screen and (max-width: $break-small) { - padding-left: 14px; - padding-bottom: 21px; - } - - .gas-price-button-group--alt { - @media screen and (max-width: $break-small) { - max-width: 318px; - - &__time-estimate { - font-size: 12px; - } - } - } - } - - .advanced-tab { - @media screen and (min-width: $break-small) { - flex: 1 1 70%; - } - - &__fee-chart { - height: 320px; - - @media screen and (max-width: $break-small) { - height: initial; - } - } - - &__fee-chart__speed-buttons { - bottom: 77px; - - @media screen and (max-width: $break-small) { - display: none; - } - } - } - - .gas-modal-content { - display: flex; - flex-direction: column; - width: 100%; - - &__info-row-wrapper { - display: flex; - @media screen and (min-width: $break-small) { - flex: 1 1 30%; - } - } - - &__info-row { - height: 170px; - - @media screen and (max-width: $break-small) { - height: initial; - display: flex; - justify-content: center; - } - } - } - } -}
\ No newline at end of file diff --git a/ui/app/components/sidebars/sidebar.component.js b/ui/app/components/sidebars/sidebar.component.js deleted file mode 100644 index b9e0f9e81..000000000 --- a/ui/app/components/sidebars/sidebar.component.js +++ /dev/null @@ -1,69 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import ReactCSSTransitionGroup from 'react-addons-css-transition-group' -import WalletView from '../wallet-view' -import { WALLET_VIEW_SIDEBAR } from './sidebar.constants' -import CustomizeGas from '../gas-customization/gas-modal-page-container/' - -export default class Sidebar extends Component { - - static propTypes = { - sidebarOpen: PropTypes.bool, - hideSidebar: PropTypes.func, - sidebarShouldClose: PropTypes.bool, - transitionName: PropTypes.string, - type: PropTypes.string, - sidebarProps: PropTypes.object, - onOverlayClose: PropTypes.func, - }; - - renderOverlay () { - const { onOverlayClose } = this.props - - return <div - className="sidebar-overlay" - onClick={() => { - onOverlayClose && onOverlayClose() - this.props.hideSidebar() - } - } /> - } - - renderSidebarContent () { - const { type, sidebarProps = {} } = this.props - const { transaction = {} } = sidebarProps - switch (type) { - case WALLET_VIEW_SIDEBAR: - return <WalletView responsiveDisplayClassname={'sidebar-right' } /> - case 'customize-gas': - return <div className={'sidebar-left'}><CustomizeGas transaction={transaction} /></div> - default: - return null - } - - } - - componentDidUpdate (prevProps) { - if (!prevProps.sidebarShouldClose && this.props.sidebarShouldClose) { - this.props.hideSidebar() - } - } - - render () { - const { transitionName, sidebarOpen, sidebarShouldClose } = this.props - - return ( - <div> - <ReactCSSTransitionGroup - transitionName={transitionName} - transitionEnterTimeout={300} - transitionLeaveTimeout={200} - > - { sidebarOpen && !sidebarShouldClose ? this.renderSidebarContent() : null } - </ReactCSSTransitionGroup> - { sidebarOpen && !sidebarShouldClose ? this.renderOverlay() : null } - </div> - ) - } - -} diff --git a/ui/app/components/sidebars/sidebar.constants.js b/ui/app/components/sidebars/sidebar.constants.js deleted file mode 100644 index 1613a8245..000000000 --- a/ui/app/components/sidebars/sidebar.constants.js +++ /dev/null @@ -1 +0,0 @@ -export const WALLET_VIEW_SIDEBAR = 'wallet-view' diff --git a/ui/app/components/sidebars/tests/sidebars-component.test.js b/ui/app/components/sidebars/tests/sidebars-component.test.js deleted file mode 100644 index cee22aca8..000000000 --- a/ui/app/components/sidebars/tests/sidebars-component.test.js +++ /dev/null @@ -1,97 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import sinon from 'sinon' -import ReactCSSTransitionGroup from 'react-addons-css-transition-group' -import Sidebar from '../sidebar.component.js' - -import WalletView from '../../wallet-view' -import CustomizeGas from '../../gas-customization/gas-modal-page-container/' - -const propsMethodSpies = { - hideSidebar: sinon.spy(), -} - -describe('Sidebar Component', function () { - let wrapper - - beforeEach(() => { - wrapper = shallow(<Sidebar - sidebarOpen={false} - hideSidebar={propsMethodSpies.hideSidebar} - transitionName={'someTransition'} - type={'wallet-view'} - />) - }) - - afterEach(() => { - propsMethodSpies.hideSidebar.resetHistory() - }) - - describe('renderOverlay', () => { - let renderOverlay - - beforeEach(() => { - renderOverlay = shallow(wrapper.instance().renderOverlay()) - }) - - it('should render a overlay element', () => { - assert(renderOverlay.hasClass('sidebar-overlay')) - }) - - it('should pass the correct onClick function to the element', () => { - assert.equal(propsMethodSpies.hideSidebar.callCount, 0) - renderOverlay.props().onClick() - assert.equal(propsMethodSpies.hideSidebar.callCount, 1) - }) - }) - - describe('renderSidebarContent', () => { - let renderSidebarContent - - beforeEach(() => { - wrapper.setProps({ type: 'wallet-view' }) - renderSidebarContent = wrapper.instance().renderSidebarContent() - }) - - it('should render sidebar content with the correct props', () => { - wrapper.setProps({ type: 'wallet-view' }) - renderSidebarContent = wrapper.instance().renderSidebarContent() - assert.equal(renderSidebarContent.props.responsiveDisplayClassname, 'sidebar-right') - }) - - it('should render sidebar content with the correct props', () => { - wrapper.setProps({ type: 'customize-gas' }) - renderSidebarContent = wrapper.instance().renderSidebarContent() - const renderedSidebarContent = shallow(renderSidebarContent) - assert(renderedSidebarContent.hasClass('sidebar-left')) - assert(renderedSidebarContent.childAt(0).is(CustomizeGas)) - }) - - it('should not render with an unrecognized type', () => { - wrapper.setProps({ type: 'foobar' }) - renderSidebarContent = wrapper.instance().renderSidebarContent() - assert.equal(renderSidebarContent, undefined) - }) - }) - - describe('render', () => { - it('should render a div with one child', () => { - assert(wrapper.is('div')) - assert.equal(wrapper.children().length, 1) - }) - - it('should render the ReactCSSTransitionGroup without any children', () => { - assert(wrapper.children().at(0).is(ReactCSSTransitionGroup)) - assert.equal(wrapper.children().at(0).children().length, 0) - }) - - it('should render sidebar content and the overlay if sidebarOpen is true', () => { - wrapper.setProps({ sidebarOpen: true }) - assert.equal(wrapper.children().length, 2) - assert(wrapper.children().at(1).hasClass('sidebar-overlay')) - assert.equal(wrapper.children().at(0).children().length, 1) - assert(wrapper.children().at(0).children().at(0).is(WalletView)) - }) - }) -}) |