0
0
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:
G.Ambatte
2021-06-23 18:20:02 +12:00
parent d61fda9cff
commit 715ee88f38
2 changed files with 75 additions and 4 deletions

View File

@@ -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 />

View File

@@ -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;
}
}
}
}
}