f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-09 18:02:39 +00:00
Code Wiki Activity

Shift Recent Items to use Nav.dropdown

Browse Source
This commit is contained in:
G.Ambatte
2023-06-29 23:58:52 +12:00
parent 3cb5e8ed42
commit 678ac90cd0
2 changed files with 70 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
client/homebrew/navbar/navbar.less
View File

@@ -81,20 +81,70 @@
color : pink; color : pink;
} }
} }
.recent.navItem { .recent.navDropdownContainer {
position : relative; position : relative;
.dropdown { .navDropdown .navItem {
position : absolute;
z-index : 10000;
top : 28px;
left : 0;
overflow : hidden auto; overflow : hidden auto;
width : 100%;
max-height : ~"calc(100vh - 28px)"; max-height : ~"calc(100vh - 28px)";
scrollbar-color : #666 #333; scrollbar-color : #666 #333;
scrollbar-width : thin; scrollbar-width : thin;
h4 {
font-size : 0.8em;
#backgroundColorsHover;
.animate(background-color);
position : relative;
display : block;
overflow : clip;
box-sizing : border-box;
padding : 8px 5px 13px;
text-decoration : none;
color : white;
border-top : 1px solid #888;
background-color : #333;
.clear {
position : absolute;
top : 50%;
right : 0;
display : none;
width : 20px;
height : 100%;
transform : translateY(-50%);
opacity : 70%;
border-radius : 3px;
background-color : #333;
&:hover {
opacity : 100%;
}
i {
font-size : 10px;
width : 100%;
height : 100%;
margin : 0;
text-align : center;
}
}
&:hover {
background-color : @blue;
.clear {
display : grid;
place-content : center;
}
}
.title {
display : inline-block;
overflow : hidden;
width : 100%;
white-space : nowrap;
text-overflow : ellipsis;
}
.time {
font-size : 0.7em;
position : absolute;
right : 2px;
bottom : 2px;
color : #888;
}
&.header {
display : block; display : block;
box-sizing : border-box; box-sizing : border-box;
padding : 5px 0; padding : 5px 0;
@@ -109,62 +159,6 @@
background-color : darken(@purple, 30%); background-color : darken(@purple, 30%);
} }
} }
.item {
#backgroundColorsHover;
.animate(background-color);
position : relative;
display : block;
overflow : clip;
box-sizing : border-box;
padding : 8px 5px 13px;
text-decoration : none;
color : white;
border-top : 1px solid #888;
background-color : #333;
.clear {
position : absolute;
top : 50%;
right : 0;
display : none;
width : 20px;
height : 100%;
transform : translateY(-50%);
opacity : 70%;
border-radius : 3px;
background-color : #333;
&:hover {
opacity : 100%;
}
i {
font-size : 10px;
width : 100%;
height : 100%;
margin : 0;
text-align : center;
}
}
&:hover {
background-color : @blue;
.clear {
display : grid;
place-content : center;
}
}
.title {
display : inline-block;
overflow : hidden;
width : 100%;
white-space : nowrap;
text-overflow : ellipsis;
}
.time {
font-size : 0.7em;
position : absolute;
right : 2px;
bottom : 2px;
color : #888;
}
}
} }
} }
.metadata.navItem { .metadata.navItem {

22
client/homebrew/navbar/recent.navitem.jsx
View File

@@ -139,11 +139,11 @@ const RecentItems = createClass({
}, },
renderDropdown : function(){ renderDropdown : function(){
if(!this.state.showDropdown) return null; // if(!this.state.showDropdown) return null;
const makeItems = (brews)=>{ const makeItems = (brews)=>{
return _.map(brews, (brew, i)=>{ return _.map(brews, (brew, i)=>{
return <a href={brew.url} className='item' key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}> return <a className='navItem' href={brew.url} key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
<span className='title'>{brew.title || '[ no title ]'}</span> <span className='title'>{brew.title || '[ no title ]'}</span>
<span className='time'>{Moment(brew.ts).fromNow()}</span> <span className='time'>{Moment(brew.ts).fromNow()}</span>
<div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div> <div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div>
@@ -151,25 +151,25 @@ const RecentItems = createClass({
}); });
}; };
return <div className='dropdown'> return <>
{(this.props.showEdit && this.props.showView) ? {(this.props.showEdit && this.props.showView) ?
<h4>edited</h4> : null } <Nav.item className='header'>edited</Nav.item> : null }
{this.props.showEdit ? {this.props.showEdit ?
makeItems(this.state.edit) : null } makeItems(this.state.edit) : null }
{(this.props.showEdit && this.props.showView) ? {(this.props.showEdit && this.props.showView) ?
<h4>viewed</h4> : null } <Nav.item className='header'>viewed</Nav.item> : null }
{this.props.showView ? {this.props.showView ?
makeItems(this.state.view) : null } makeItems(this.state.view) : null }
</div>; </>;
}, },
render : function(){ render : function(){
return <Nav.item icon='fas fa-history' color='grey' className='recent' return <Nav.dropdown className='recent'>
onMouseEnter={()=>this.handleDropdown(true)} <Nav.item icon='fas fa-history' color='grey' >
onMouseLeave={()=>this.handleDropdown(false)}> {this.props.text}
{this.props.text} </Nav.item>
{this.renderDropdown()} {this.renderDropdown()}
</Nav.item>; </Nav.dropdown>;
} }
}); });