diff options
4 files changed, 39 insertions, 22 deletions
diff --git a/packages/gitbook-core/src/components/Dropdown.js b/packages/gitbook-core/src/components/Dropdown.js index 78bad8d..83a377f 100644 --- a/packages/gitbook-core/src/components/Dropdown.js +++ b/packages/gitbook-core/src/components/Dropdown.js @@ -38,11 +38,30 @@ const DropdownContainer = React.createClass({ }); /** - * A dropdown item, which is always a link, and can contain a nested - * DropdownMenu. + * A dropdown item which can contains informations. */ const DropdownItem = React.createClass({ propTypes: { + children: React.PropTypes.node + }, + + render() { + const { children } = this.props; + + return ( + <div className="GitBook-DropdownItem"> + {children} + </div> + ); + } +}); + + +/** + * A dropdown item, which is always a link. + */ +const DropdownItemLink = React.createClass({ + propTypes: { children: React.PropTypes.node, onClick: React.PropTypes.func, href: React.PropTypes.string @@ -64,26 +83,17 @@ const DropdownItem = React.createClass({ }, render() { - const { children, href, onClick, ...otherProps } = this.props; - - let inner = children; - - if (href || onClick) { - inner = ( - <a className="GitBook-DropdownItemLink" href={href || '#'} onClick={this.onClick} {...otherProps} > - {inner} - </a> - ); - } + const { children, href, ...otherProps } = this.props; return ( - <div className="GitBook-DropdownItem"> - {inner} - </div> + <a {...otherProps} className="GitBook-DropdownItemLink" href={href || '#'} onClick={this.onClick} > + {children} + </a> ); } }); + /** * A DropdownMenu to display DropdownItems. Must be inside a * DropdownContainer. @@ -108,6 +118,7 @@ const DropdownMenu = React.createClass({ const Dropdown = { Item: DropdownItem, + ItemLink: DropdownItemLink, Menu: DropdownMenu, Container: DropdownContainer }; diff --git a/packages/gitbook-plugin-sharing/src/components/ShareButton.js b/packages/gitbook-plugin-sharing/src/components/ShareButton.js index cd55169..8983423 100644 --- a/packages/gitbook-plugin-sharing/src/components/ShareButton.js +++ b/packages/gitbook-plugin-sharing/src/components/ShareButton.js @@ -34,9 +34,9 @@ const ShareButton = React.createClass({ {open ? ( <Dropdown.Menu> {siteIds.map((id) => ( - <Dropdown.Item onClick={() => onShare(SITES[id])} key={id}> + <Dropdown.ItemLink onClick={() => onShare(SITES[id])} key={id}> {SITES[id].label} - </Dropdown.Item> + </Dropdown.ItemLink> ))} </Dropdown.Menu>) : null} </Dropdown.Container> diff --git a/packages/gitbook-plugin-theme-default/less/Dropdown.less b/packages/gitbook-plugin-theme-default/less/Dropdown.less index ca56aee..513c57a 100644 --- a/packages/gitbook-plugin-theme-default/less/Dropdown.less +++ b/packages/gitbook-plugin-theme-default/less/Dropdown.less @@ -45,7 +45,11 @@ .GitBook-DropdownItemLink { width: 100%; display: inline-block; - padding: 6px 20px; + padding: @dropdown-padding-v @dropdown-padding-h; text-align: center; - color: #aaa; + color: @dropdown-color; + + &:hover { + color: @dropdown-hover-color; + } } diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less index 62f4f52..56cfa48 100644 --- a/packages/gitbook-plugin-theme-default/less/variables.less +++ b/packages/gitbook-plugin-theme-default/less/variables.less @@ -32,10 +32,12 @@ @button-color: #ddd; @button-hover-color: #bbb; // Dropdown -@dropdown-padding-v: 6px; -@dropdown-padding-h: 10px; +@dropdown-padding-v: 10px; +@dropdown-padding-h: 15px; @dropdown-arrow-width: 8px; @dropdown-border-color: #e5e5e5; +@dropdown-color: @button-color; +@dropdown-hover-color: @button-hover-color; // Font awesome @path-assets: '.'; @path-fonts: '@{path-assets}/fonts'; |