mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-26 13:52:38 +00:00
Add dropdown to /share for source to unify options:
* "view" - View Source * "download" - Download Source * "clone to new" - Create New Brew from this Brew
This commit is contained in:
@@ -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 <div className='dropdown'>
|
||||
<a href={`/source/${this.processShareId()}`} color='teal' icon='fas fa-code' className='item'>
|
||||
view
|
||||
</a>
|
||||
<a href={`/download/${this.processShareId()}`} color='red' icon='fas fa-download' className='item'>
|
||||
download
|
||||
</a>
|
||||
<a href={`/new/${this.processShareId()}`} color='red' icon='fas fa-download' className='item'>
|
||||
clone to new
|
||||
</a>
|
||||
</div>;
|
||||
},
|
||||
|
||||
render : function(){
|
||||
return <div className='sharePage page'>
|
||||
<Meta name='robots' content='noindex, nofollow' />
|
||||
@@ -61,11 +89,11 @@ const SharePage = createClass({
|
||||
|
||||
<Nav.section>
|
||||
<PrintLink shareId={this.processShareId()} />
|
||||
<Nav.item href={`/source/${this.processShareId()}`} color='teal' icon='fas fa-code'>
|
||||
<Nav.item icon='fas fa-code' color='red' className='source'
|
||||
onMouseEnter={()=>this.handleDropdown(true)}
|
||||
onMouseLeave={()=>this.handleDropdown(false)}>
|
||||
source
|
||||
</Nav.item>
|
||||
<Nav.item href={`/download/${this.processShareId()}`} color='red' icon='fas fa-download'>
|
||||
download
|
||||
{this.renderDropdown()}
|
||||
</Nav.item>
|
||||
<RecentNavItem brew={this.props.brew} storageKey='view' />
|
||||
<Account />
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user