From a22adec66fd0c541eb350ea424a6b00d179eedaf Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 24 Jul 2017 17:04:13 -0700 Subject: Replace ui with responsive-ui --- ui/app/components/dropdown.js | 89 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 ui/app/components/dropdown.js (limited to 'ui/app/components/dropdown.js') diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js new file mode 100644 index 000000000..e77b4c40c --- /dev/null +++ b/ui/app/components/dropdown.js @@ -0,0 +1,89 @@ +const Component = require('react').Component +const PropTypes = require('react').PropTypes +const h = require('react-hyperscript') +const MenuDroppo = require('menu-droppo') + +const noop = () => {} + +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', + }, + }, + [ + h( + 'style', + ` + li.dropdown-menu-item:hover { color:rgb(225, 225, 225); } + li.dropdown-menu-item { color: rgb(185, 185, 185); } + ` + ), + ...children, + ] + ) + } +} + +Dropdown.defaultProps = { + isOpen: false, + onClick: noop, +} + +Dropdown.propTypes = { + isOpen: PropTypes.bool.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.dropdown-menu-item', + { + onClick: () => { + onClick() + closeMenu() + }, + style: { + listStyle: 'none', + padding: '8px 0px 8px 0px', + fontSize: '12px', + fontStyle: 'normal', + fontFamily: 'Montserrat Regular', + cursor: 'pointer', + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + }, + }, + children + ) + } +} + +DropdownMenuItem.propTypes = { + closeMenu: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired, + children: PropTypes.node, +} + +module.exports = { + Dropdown, + DropdownMenuItem, +} -- cgit From 8006d798ee8d1993ef4b06cce25480f0aea6c4f4 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 26 Jul 2017 13:02:08 -0700 Subject: Re-center network dropdown --- ui/app/components/dropdown.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdown.js') diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index e77b4c40c..70ed388f4 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -7,7 +7,7 @@ const noop = () => {} class Dropdown extends Component { render () { - const { isOpen, onClickOutside, style, children } = this.props + const { isOpen, onClickOutside, style, innerStyle, children } = this.props return h( MenuDroppo, @@ -21,6 +21,7 @@ class Dropdown extends Component { padding: '8px 16px', background: 'rgba(0, 0, 0, 0.8)', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + ...innerStyle, }, }, [ -- cgit From bc65484e1bd15fb6ccc9b94f23c991a170b8d39c Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 26 Jul 2017 15:10:50 -0700 Subject: Remove object spread syntax --- ui/app/components/dropdown.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) (limited to 'ui/app/components/dropdown.js') diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index 70ed388f4..759800fd6 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -2,6 +2,7 @@ const Component = require('react').Component const PropTypes = require('react').PropTypes const h = require('react-hyperscript') const MenuDroppo = require('menu-droppo') +const extend = require('xtend') const noop = () => {} @@ -9,6 +10,13 @@ class Dropdown extends Component { render () { const { isOpen, onClickOutside, style, innerStyle, children } = this.props + const innerStyleDefaults = extend({ + borderRadius: '4px', + padding: '8px 16px', + background: 'rgba(0, 0, 0, 0.8)', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, innerStyle) + return h( MenuDroppo, { @@ -16,13 +24,7 @@ class Dropdown extends Component { 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', - ...innerStyle, - }, + innerStyle: innerStyleDefaults, }, [ h( -- cgit From 086441e41c3a06cb062a475b59b542aa4ea6f185 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 3 Aug 2017 18:50:29 -0700 Subject: Increase size of network dropdown --- ui/app/components/dropdown.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdown.js') diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index 759800fd6..993a104ee 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -54,7 +54,7 @@ Dropdown.propTypes = { class DropdownMenuItem extends Component { render () { - const { onClick, closeMenu, children } = this.props + const { onClick, closeMenu, children, style } = this.props return h( 'li.dropdown-menu-item', @@ -73,6 +73,7 @@ class DropdownMenuItem extends Component { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', + ...style, }, }, children -- cgit From 36d8c3dd3984d37fb72115464f862d89d1559763 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 3 Aug 2017 18:55:11 -0700 Subject: Increase size of settings dropdown and account settings dropdown --- ui/app/components/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/dropdown.js') diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index 993a104ee..b99e0aa9a 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -66,7 +66,7 @@ class DropdownMenuItem extends Component { style: { listStyle: 'none', padding: '8px 0px 8px 0px', - fontSize: '12px', + fontSize: '18px', fontStyle: 'normal', fontFamily: 'Montserrat Regular', cursor: 'pointer', -- cgit From 29dcadc346fec8c2ea66c84c72d6c65bc565162f Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 3 Aug 2017 21:32:08 -0700 Subject: ui - dropdown - use Object.assign syntax to appease coverage parser --- ui/app/components/dropdown.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'ui/app/components/dropdown.js') diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index b99e0aa9a..8cdfc13e8 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -63,7 +63,7 @@ class DropdownMenuItem extends Component { onClick() closeMenu() }, - style: { + style: Object.assign({ listStyle: 'none', padding: '8px 0px 8px 0px', fontSize: '18px', @@ -73,8 +73,7 @@ class DropdownMenuItem extends Component { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', - ...style, - }, + }, style), }, children ) -- cgit From 781ac00eac5d947b2c88159d38267386992a05f2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 4 Aug 2017 11:31:07 -0700 Subject: Re-enable css transitions for dropdowns in header, needs menu-droppo library update --- ui/app/components/dropdown.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/dropdown.js') diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index 8cdfc13e8..ef1a274c3 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -8,7 +8,7 @@ const noop = () => {} class Dropdown extends Component { render () { - const { isOpen, onClickOutside, style, innerStyle, children } = this.props + const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props const innerStyleDefaults = extend({ borderRadius: '4px', @@ -20,6 +20,7 @@ class Dropdown extends Component { return h( MenuDroppo, { + useCssTransition, isOpen, zIndex: 11, onClickOutside, @@ -43,6 +44,7 @@ class Dropdown extends Component { Dropdown.defaultProps = { isOpen: false, onClick: noop, + useCssTransition: false, } Dropdown.propTypes = { -- cgit From 4d967ebea99b8c1a899a91e379a1fa12015b7e53 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 4 Aug 2017 11:47:36 -0700 Subject: Bring menu-droppo component into project, remove as a dependency --- ui/app/components/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/dropdown.js') diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js index ef1a274c3..34c7149ee 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdown.js @@ -1,7 +1,7 @@ const Component = require('react').Component const PropTypes = require('react').PropTypes const h = require('react-hyperscript') -const MenuDroppo = require('menu-droppo') +const MenuDroppo = require('./menu-droppo') const extend = require('xtend') const noop = () => {} -- cgit