diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx index 1411c3175..a4393314b 100644 --- a/client/homebrew/pages/sharePage/sharePage.jsx +++ b/client/homebrew/pages/sharePage/sharePage.jsx @@ -29,6 +29,12 @@ const SharePage = createClass({ }; }, + getInitialState : function() { + return { + showDropdown : false + }; + }, + componentDidMount : function() { document.addEventListener('keydown', this.handleControlKeys); }, @@ -51,6 +57,28 @@ const SharePage = createClass({ this.props.brew.shareId; }, + handleDropdown : function(show){ + this.setState({ + showDropdown : show + }); + }, + + renderDropdown : function(){ + if(!this.state.showDropdown) return null; + + return
+ + view + + + download + + + clone to new + +
; + }, + render : function(){ return
@@ -61,11 +89,11 @@ const SharePage = createClass({ - + this.handleDropdown(true)} + onMouseLeave={()=>this.handleDropdown(false)}> source - - - download + {this.renderDropdown()} diff --git a/client/homebrew/pages/sharePage/sharePage.less b/client/homebrew/pages/sharePage/sharePage.less index 7d0820257..089ccae31 100644 --- a/client/homebrew/pages/sharePage/sharePage.less +++ b/client/homebrew/pages/sharePage/sharePage.less @@ -2,4 +2,47 @@ .content{ overflow-y : hidden; } + .source.navItem{ + position : relative; + .dropdown{ + position : absolute; + top : 28px; + left : 0px; + z-index : 10000; + width : 100%; + h4{ + display : block; + box-sizing : border-box; + padding : 5px 0px; + background-color : #333; + font-size : 0.8em; + color : #bbb; + text-align : center; + border-top : 1px solid #888; + &:nth-of-type(1){ background-color: darken(@teal, 20%); } + &:nth-of-type(2){ background-color: darken(@purple, 30%); } + } + .item{ + .animate(background-color); + position : relative; + display : block; + box-sizing : border-box; + padding : 13px 5px; + background-color : #333; + color : white; + text-decoration : none; + border-top : 1px solid #888; + &:hover{ + background-color : @blue; + } + .title{ + display : inline-block; + overflow : hidden; + width : 100%; + text-overflow : ellipsis; + white-space : nowrap; + } + } + } + } } \ No newline at end of file