From a49e5e158a03d4c2d89ddbeba853325d6f35cf29 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 13 Jul 2017 00:40:00 -0700 Subject: [PATCH 1/3] Implement redesigned dropdown --- ui/responsive/app/components/dropdown.js | 71 ++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 ui/responsive/app/components/dropdown.js diff --git a/ui/responsive/app/components/dropdown.js b/ui/responsive/app/components/dropdown.js new file mode 100644 index 000000000..d7f0e158a --- /dev/null +++ b/ui/responsive/app/components/dropdown.js @@ -0,0 +1,71 @@ +const Component = require('react').Component; +const PropTypes = require('react').PropTypes; +const h = require('react-hyperscript'); +const MenuDroppo = require('menu-droppo'); + +class Dropdown extends Component { + render() { + const { isOpen, onClickOutside, style, children } = this.props; + + return h( + MenuDroppo, + { + isOpen, + zIndex: 11, + onClickOutside, + style, + innerStyle: { + borderRadius: '4px', + padding: '8px 16px', + background: 'rgba(0, 0, 0, 0.8)', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, + }, + children, + ); + } +} + +Dropdown.propTypes = { + isOpen: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired, + children: PropTypes.node, + style: PropTypes.object.isRequired, +} + +class DropdownMenuItem extends Component { + render() { + const { onClick, closeMenu, children } = this.props; + + return h( + 'li', + { + onClick, + closeMenu, + style: { + listStyle: 'none', + padding: '8px 0px 8px 0px', + fontSize: '12px', + fontStyle: 'normal', + fontFamily: 'Montserrat Regular', + color: 'rgb(185, 185, 185)', + cursor: 'pointer', + display: 'flex', + justifyContent: 'flex-start', + }, + }, + children + ); + } +} + +DropdownMenuItem.propTypes = { + closeMenu: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired, + children: PropTypes.node, +}; + +module.exports = { + Dropdown, + DropdownMenuItem, +}; \ No newline at end of file From 1507da139d8c4f54451c7ecdd02a589332c97c8e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 13 Jul 2017 00:40:22 -0700 Subject: [PATCH 2/3] Add tests for new dropdown component --- package.json | 1 + .../responsive/components/dropdown-test.js | 51 +++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 test/unit/responsive/components/dropdown-test.js diff --git a/package.json b/package.json index 27fe7a84a..a587a4507 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dist": "npm install && gulp dist", "test": "npm run lint && npm run test-unit && npm run test-integration", "test-unit": "METAMASK_ENV=test mocha --require test/helper.js --recursive \"test/unit/**/*.js\"", + "test-responsive": "METAMASK_ENV=test mocha --require test/helper.js --recursive \"test/unit/responsive/**/*.js\"", "test-integration": "npm run buildMock && npm run buildCiUnits && testem ci -P 2", "lint": "gulp lint", "buildCiUnits": "node test/integration/index.js", diff --git a/test/unit/responsive/components/dropdown-test.js b/test/unit/responsive/components/dropdown-test.js new file mode 100644 index 000000000..feadc792e --- /dev/null +++ b/test/unit/responsive/components/dropdown-test.js @@ -0,0 +1,51 @@ +var assert = require('assert'); + +const additions = require('react-testutils-additions'); +const h = require('react-hyperscript'); +const ReactTestUtils = require('react-addons-test-utils'); +const sinon = require('sinon'); +const path = require('path'); +const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'responsive', 'app', 'components', 'dropdown.js')).Dropdown; +const DropdownMenuItem = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'responsive', 'app', 'components', 'dropdown.js')).DropdownMenuItem; + +describe('Dropdown components', function () { + it('can render two items', function () { + const renderer = ReactTestUtils.createRenderer() + + const onClickOutside = sinon.spy(); + const closeMenu = sinon.spy(); + const onClick = sinon.spy(); + + const dropdownComponent = h(Dropdown, { + isOpen: true, + zIndex: 11, + onClickOutside, + style: { + position: 'absolute', + right: 0, + top: '36px', + }, + innerStyle: {}, + }, [ // DROP MENU ITEMS + h('style', ` + .drop-menu-item:hover { background:rgb(235, 235, 235); } + .drop-menu-item i { margin: 11px; } + `), + + h(DropdownMenuItem, { + closeMenu, + onClick, + }, 'Item 1'), + + h(DropdownMenuItem, { + closeMenu, + onClick, + }, 'Item 2'), + ]) + + const component = additions.renderIntoDocument(dropdownComponent); + renderer.render(dropdownComponent); + const items = additions.find(component, 'li'); + assert.equal(items.length, 2); + }); +}); \ No newline at end of file From d01b5c927d9ae874cc8a7d68fbd1f8649dbba291 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 13 Jul 2017 22:39:44 -0700 Subject: [PATCH 3/3] Brighten dropdown menu item\'s text --- ui/responsive/app/components/dropdown.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/ui/responsive/app/components/dropdown.js b/ui/responsive/app/components/dropdown.js index d7f0e158a..6e09cd133 100644 --- a/ui/responsive/app/components/dropdown.js +++ b/ui/responsive/app/components/dropdown.js @@ -21,7 +21,16 @@ class Dropdown extends Component { boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', }, }, - children, + [ + h( + 'style', + ` + li.dropdown-menu-item:hover { color:rgb(225, 225, 225); } + li.dropdown-menu-item { color: rgb(185, 185, 185); } + ` + ), + ...children, + ], ); } } @@ -38,7 +47,7 @@ class DropdownMenuItem extends Component { const { onClick, closeMenu, children } = this.props; return h( - 'li', + 'li.dropdown-menu-item', { onClick, closeMenu, @@ -48,7 +57,6 @@ class DropdownMenuItem extends Component { fontSize: '12px', fontStyle: 'normal', fontFamily: 'Montserrat Regular', - color: 'rgb(185, 185, 185)', cursor: 'pointer', display: 'flex', justifyContent: 'flex-start',