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

Add foldAll and unfoldAll buttons to Snippet Bar

client/homebrew/editor/editor.jsx

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

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -37,6 +37,8 @@ const Snippetbar = createClass({
 			undo              : ()=>{},
 			redo              : ()=>{},
 			historySize       : ()=>{},
+			foldCode          : ()=>{},
+			unfoldCode        : ()=>{},
 			updateEditorTheme : ()=>{},
 			cursorPos         : {}
 		};
@@ -144,6 +146,22 @@ const Snippetbar = createClass({
 	renderEditorButtons : function(){
 		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'>
 			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
 				onClick={this.props.undo} >
@@ -154,6 +172,7 @@ const Snippetbar = createClass({
 				<i className='fas fa-redo' />
 			</div>
 			<div className='divider'></div>
+			{foldButtons}
 			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 				onClick={this.toggleThemeSelector} >
 				<i className='fas fa-palette' />

client/homebrew/editor/snippetbar/snippetbar.less

@@ -10,7 +10,6 @@
 		top             : 0px;
 		right           : 0px;
 		height          : @menuHeight;
-		width           : 125px;
 		justify-content : space-between;
 		&>div{
 			height      : @menuHeight;
@@ -46,6 +45,22 @@
 					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{
 				.tooltipLeft('Editor Themes');
 				font-size : 0.75em;