f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-31 08:42:40 +00:00
Code Wiki Activity

Merge pull request #2656 from naturalcrit/SubSnippets

Browse Source 
Add a side menu for sub-snippets
This commit is contained in:
Trevor Buckner
2023-02-02 15:49:10 -05:00
committed by GitHub
parent 85b3741df8 5e38ff66da
commit 9b06380b9c
2 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/homebrew/editor/snippetbar/snippetbar.jsx
View File

@@ -163,15 +163,22 @@ const SnippetGroup = createClass({
onSnippetClick : function(){}, onSnippetClick : function(){},
}; };
}, },
handleSnippetClick : function(snippet){ handleSnippetClick : function(e, snippet){
e.stopPropagation();
this.props.onSnippetClick(execute(snippet.gen, this.props.brew)); this.props.onSnippetClick(execute(snippet.gen, this.props.brew));
}, },
renderSnippets : function(){ renderSnippets : function(snippets){
return _.map(this.props.snippets, (snippet)=>{ return _.map(snippets, (snippet)=>{
return <div className='snippet' key={snippet.name} onClick={()=>this.handleSnippetClick(snippet)}> return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
<i className={snippet.icon} /> <i className={snippet.icon} />
{snippet.name} {snippet.name}
{snippet.subsnippets && <>
<i className='fas fa-caret-right'></i>
<div className='dropdown side'>
{this.renderSnippets(snippet.subsnippets)}
</div></>}
</div>; </div>;
}); });
}, },
@@ -182,7 +189,7 @@ const SnippetGroup = createClass({
<span className='groupName'>{this.props.groupName}</span> <span className='groupName'>{this.props.groupName}</span>
</div> </div>
<div className='dropdown'> <div className='dropdown'>
{this.renderSnippets()} {this.renderSnippets(this.props.snippets)}
</div> </div>
</div>; </div>;
}, },

16
client/homebrew/editor/snippetbar/snippetbar.less
View File

@@ -83,7 +83,7 @@
.snippetGroup{ .snippetGroup{
border-right : 1px solid black; border-right : 1px solid black;
&:hover{ &:hover{
.dropdown{ &>.dropdown{
visibility : visible; visibility : visible;
} }
} }
@@ -97,15 +97,29 @@
background-color : #ddd; background-color : #ddd;
.snippet{ .snippet{
.animate(background-color); .animate(background-color);
width : max-content;
padding : 5px; padding : 5px;
cursor : pointer; cursor : pointer;
font-size : 10px; font-size : 10px;
i{ i{
margin-right : 8px; margin-right : 8px;
font-size : 1.2em; font-size : 1.2em;
&~i{
margin-right: 0;
margin-left: 8px;
}
} }
&:hover{ &:hover{
background-color : #999; background-color : #999;
&>.dropdown{
visibility : visible;
&.side {
left: 100%;
top: 0%;
margin-left:0;
box-shadow: -1px 1px 2px 0px #999;
}
}
} }
} }
} }