0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-02 19:22:47 +00:00

Merge pull request #3073 from Gazook89/Fold-Buttons-in-Editor

Add foldAll and unfoldAll buttons to Snippet Bar
This commit is contained in:
Trevor Buckner
2023-11-09 16:36:20 -05:00
committed by GitHub
3 changed files with 45 additions and 1 deletions

View File

@@ -341,6 +341,14 @@ const Editor = createClass({
return this.refs.codeEditor?.undo(); return this.refs.codeEditor?.undo();
}, },
foldCode : function(){
return this.refs.codeEditor?.foldAllCode();
},
unfoldCode : function(){
return this.refs.codeEditor?.unfoldAllCode();
},
render : function(){ render : function(){
return ( return (
<div className='editor' ref='main'> <div className='editor' ref='main'>
@@ -354,6 +362,8 @@ const Editor = createClass({
theme={this.props.brew.theme} theme={this.props.brew.theme}
undo={this.undo} undo={this.undo}
redo={this.redo} redo={this.redo}
foldCode={this.foldCode}
unfoldCode={this.unfoldCode}
historySize={this.historySize()} historySize={this.historySize()}
currentEditorTheme={this.state.editorTheme} currentEditorTheme={this.state.editorTheme}
updateEditorTheme={this.updateEditorTheme} updateEditorTheme={this.updateEditorTheme}

View File

@@ -37,6 +37,8 @@ const Snippetbar = createClass({
undo : ()=>{}, undo : ()=>{},
redo : ()=>{}, redo : ()=>{},
historySize : ()=>{}, historySize : ()=>{},
foldCode : ()=>{},
unfoldCode : ()=>{},
updateEditorTheme : ()=>{}, updateEditorTheme : ()=>{},
cursorPos : {} cursorPos : {}
}; };
@@ -144,6 +146,22 @@ const Snippetbar = createClass({
renderEditorButtons : function(){ renderEditorButtons : function(){
if(!this.props.showEditButtons) return; if(!this.props.showEditButtons) return;
let foldButtons;
if(this.props.view == 'text'){
foldButtons =
<>
<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
onClick={this.props.foldCode} >
<i className='fas fa-compress-alt' />
</div>
<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
onClick={this.props.unfoldCode} >
<i className='fas fa-expand-alt' />
</div>
</>
}
return <div className='editors'> return <div className='editors'>
<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`} <div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
onClick={this.props.undo} > onClick={this.props.undo} >
@@ -154,6 +172,7 @@ const Snippetbar = createClass({
<i className='fas fa-redo' /> <i className='fas fa-redo' />
</div> </div>
<div className='divider'></div> <div className='divider'></div>
{foldButtons}
<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`} <div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
onClick={this.toggleThemeSelector} > onClick={this.toggleThemeSelector} >
<i className='fas fa-palette' /> <i className='fas fa-palette' />

View File

@@ -10,7 +10,6 @@
top : 0px; top : 0px;
right : 0px; right : 0px;
height : @menuHeight; height : @menuHeight;
width : 125px;
justify-content : space-between; justify-content : space-between;
&>div{ &>div{
height : @menuHeight; height : @menuHeight;
@@ -46,6 +45,22 @@
color : black; color : black;
} }
} }
&.foldAll{
.tooltipLeft('Fold All');
font-size : 0.75em;
color : grey;
&.active{
color : black;
}
}
&.unfoldAll{
.tooltipLeft('Unfold All');
font-size : 0.75em;
color : grey;
&.active{
color : black;
}
}
&.editorTheme{ &.editorTheme{
.tooltipLeft('Editor Themes'); .tooltipLeft('Editor Themes');
font-size : 0.75em; font-size : 0.75em;