From a217779e764a2d4b57c24885e25d854d4ad9fab4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 15 Nov 2025 16:05:21 +0100 Subject: [PATCH 01/11] fix snippetbar wrap --- client/homebrew/editor/snippetbar/snippetbar.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index c53d4be8e..8e50aa764 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -14,7 +14,7 @@ .snippets { display : flex; justify-content : flex-start; - min-width : 432.18px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied + min-width : 499.35px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied } .editors { @@ -237,7 +237,7 @@ } } -@container editor (width < 683px) { +@container editor (width < 750px) { .snippetBar { .editors { flex : 1; From 7bc41f9b0d5231897c46239c46cc81c54b33ce4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 15 Nov 2025 16:49:48 +0100 Subject: [PATCH 02/11] fix snippetbar hidden --- client/homebrew/editor/editor.jsx | 32 ++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index a00c47403..968850272 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -58,7 +58,6 @@ const Editor = createClass({ return { editorTheme : this.props.editorTheme, view : 'text', //'text', 'style', 'meta', 'snippet' - snippetbarHeight : 25 }; }, @@ -85,7 +84,18 @@ const Editor = createClass({ editorTheme : editorTheme }); } - this.setState({ snippetbarHeight: document.querySelector('.editor > .snippetBar').offsetHeight }); + const snippetBar = document.querySelector('.editor > .snippetBar'); + if (!snippetBar) return; + + this.resizeObserver = new ResizeObserver(entries => { + // throttle/debounce inside if you like + const h = snippetBar.offsetHeight; + const editor = document.querySelector('.editor .codeEditor'); + if (!editor) return; + editor.style.height = `calc(100% - ${h}px)`; + }); + + this.resizeObserver.observe(snippetBar); }, componentDidUpdate : function(prevProps, prevState, snapshot) { @@ -108,6 +118,10 @@ const Editor = createClass({ } }, + componentWillUnmount() { + if (this.resizeObserver) this.resizeObserver.disconnect(); + }, + handleControlKeys : function(e){ if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return; const LEFTARROW_KEY = 37; @@ -407,13 +421,6 @@ const Editor = createClass({ } }, - //Called when there are changes to the editor's dimensions - update : function(){ - const snipHeight = document.querySelector('.editor > .snippetBar').offsetHeight; - if(snipHeight !== this.state.snippetbarHeight) - this.setState({ snippetbarHeight: snipHeight }); - }, - updateEditorTheme : function(newTheme){ window.localStorage.setItem(EDITOR_THEME_KEY, newTheme); this.setState({ @@ -437,7 +444,7 @@ const Editor = createClass({ onChange={this.props.onBrewChange('text')} editorTheme={this.state.editorTheme} rerenderParent={this.rerenderParent} - style={{ height: `calc(100% - ${this.state.snippetbarHeight}px)` }} /> + style={{ height: `calc(100% - 26px)` }} /> ; } if(this.isStyle()){ @@ -451,7 +458,7 @@ const Editor = createClass({ enableFolding={true} editorTheme={this.state.editorTheme} rerenderParent={this.rerenderParent} - style={{ height: `calc(100% - ${this.state.snippetbarHeight}px)` }} /> + style={{ height: `calc(100% - 26px)` }} /> ; } if(this.isMeta()){ @@ -468,7 +475,6 @@ const Editor = createClass({ userThemes={this.props.userThemes}/> ; } - if(this.isSnip()){ if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; } return <> @@ -481,7 +487,7 @@ const Editor = createClass({ enableFolding={true} editorTheme={this.state.editorTheme} rerenderParent={this.rerenderParent} - style={{ height: `calc(100% - ${this.state.snippetbarHeight}px)` }} /> + style={{ height: `calc(100% - 26px)` }} /> ; } }, From b78f5079dfc0f5053b2b9e6cc0255ff92febcd81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 15 Nov 2025 16:59:32 +0100 Subject: [PATCH 03/11] bring back update native func --- client/homebrew/editor/editor.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 968850272..7148a7c22 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -421,6 +421,9 @@ const Editor = createClass({ } }, + //Called when there are changes to the editor's dimensions + update : function(){}, + updateEditorTheme : function(newTheme){ window.localStorage.setItem(EDITOR_THEME_KEY, newTheme); this.setState({ From f18a73e1fff1304d1fe42dfd0f9e833cdbfb4150 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 15 Nov 2025 17:25:05 +0100 Subject: [PATCH 04/11] fix glitch in newPage --- client/homebrew/pages/newPage/newPage.less | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/client/homebrew/pages/newPage/newPage.less b/client/homebrew/pages/newPage/newPage.less index 083e1ee09..d2f07ac40 100644 --- a/client/homebrew/pages/newPage/newPage.less +++ b/client/homebrew/pages/newPage/newPage.less @@ -1,12 +1,15 @@ .newPage { .navItem.save { - .fadeInRight(); - .transition(opacity); background-color : @orange; + transition:all 0.2s; &:hover { background-color : @green; } + &.neverSaved { - .fadeOutRight(); + translate:-100%; opacity: 0; + background-color :#333; + cursor:auto; } } } + From b6478f3964000ef291dabed79812a0edb34aecfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 15 Nov 2025 17:25:25 +0100 Subject: [PATCH 05/11] remove new brew nav item from new page --- client/homebrew/pages/newPage/newPage.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index 83eaeda45..41d2077d6 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -228,7 +228,6 @@ const NewPage = (props)=>{ {error ? : renderSaveButton()} - From 5e7fdb34a93d01e5448c209aa7ffeeff13133e8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 15 Nov 2025 23:40:01 +0100 Subject: [PATCH 06/11] Revert "remove new brew nav item from new page" This reverts commit b6478f3964000ef291dabed79812a0edb34aecfb. --- client/homebrew/pages/newPage/newPage.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index 41d2077d6..83eaeda45 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -228,6 +228,7 @@ const NewPage = (props)=>{ {error ? : renderSaveButton()} + From c784e2e63bf287ec5c659f42a44e123a88226498 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sun, 16 Nov 2025 13:12:40 +1300 Subject: [PATCH 07/11] Fix New item on Nav Bar --- client/homebrew/navbar/newbrew.navitem.jsx | 51 ++++++++++++++++++---- 1 file changed, 42 insertions(+), 9 deletions(-) diff --git a/client/homebrew/navbar/newbrew.navitem.jsx b/client/homebrew/navbar/newbrew.navitem.jsx index d19b7595f..6197d6fc5 100644 --- a/client/homebrew/navbar/newbrew.navitem.jsx +++ b/client/homebrew/navbar/newbrew.navitem.jsx @@ -3,19 +3,16 @@ const _ = require('lodash'); const Nav = require('naturalcrit/nav/nav.jsx'); const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js -const BREWKEY = 'homebrewery-new'; -const STYLEKEY = 'homebrewery-new-style'; -const METAKEY = 'homebrewery-new-meta'; +const BREWKEY = 'HB_newPage_content'; +const STYLEKEY = 'HB_newPage_style'; +const METAKEY = 'HB_newPage_meta'; const NewBrew = ()=>{ const handleFileChange = (e)=>{ const file = e.target.files[0]; if(!file) return; - const currentNew = localStorage.getItem(BREWKEY); - if(currentNew && !confirm( - `You have some text in the new brew space, if you load a file that text will be lost, are you sure you want to load the file?` - )) return; + if(!confirmLocalStorageChange()) return; const reader = new FileReader(); reader.onload = (e)=>{ @@ -43,6 +40,34 @@ const NewBrew = ()=>{ reader.readAsText(file); }; + const checkLocalStorage = ()=>{ + // Check if changes exist for New editor + const currentText = localStorage.getItem(BREWKEY); + const currentStyle = localStorage.getItem(STYLEKEY); + const currentMeta = localStorage.getItem(METAKEY); + return (currentText || currentStyle || currentMeta); + }; + + const confirmLocalStorageChange = ()=>{ + // TRUE if no data in any local storage key + // TRUE if data in any local storage key AND approval given + // FALSE if data in any local storage key AND approval declined + return (!checkLocalStorage() || confirm( + `You have made changes in the new brew space. If you continue, that information will be PERMANENTLY LOST.\nAre you sure you wish to continue?` + )); + }; + + const clearLocalStorage = ()=>{ + if(!confirmLocalStorageChange()) return; + + localStorage.removeItem(BREWKEY); + localStorage.removeItem(STYLEKEY); + localStorage.removeItem(METAKEY); + + window.location.href = '/new'; + return; + }; + return ( @@ -53,17 +78,25 @@ const NewBrew = ()=>{ new + resume editing + + { clearLocalStorage(); }}> from blank { document.getElementById('uploadTxt').click(); }}> From f1891d925014d8197f3b739c1e50bd7475adfe2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 16 Nov 2025 19:02:37 +0100 Subject: [PATCH 08/11] use state instead --- client/homebrew/editor/editor.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 7148a7c22..4c753dbc3 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -58,6 +58,7 @@ const Editor = createClass({ return { editorTheme : this.props.editorTheme, view : 'text', //'text', 'style', 'meta', 'snippet' + snippetBarHeight : 26, }; }, @@ -88,11 +89,9 @@ const Editor = createClass({ if (!snippetBar) return; this.resizeObserver = new ResizeObserver(entries => { - // throttle/debounce inside if you like - const h = snippetBar.offsetHeight; - const editor = document.querySelector('.editor .codeEditor'); - if (!editor) return; - editor.style.height = `calc(100% - ${h}px)`; + const height = document.querySelector('.editor > .snippetBar').offsetHeight; + this.setState({ snippetbarHeight: height }); + console.log('setting state to ', height ); }); this.resizeObserver.observe(snippetBar); @@ -437,6 +436,7 @@ const Editor = createClass({ }, renderEditor : function(){ + console.log('state at rendering is: ',this.state.snippetBarHeight); if(this.isText()){ return <> + style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }} /> ; } if(this.isStyle()){ @@ -461,7 +461,7 @@ const Editor = createClass({ enableFolding={true} editorTheme={this.state.editorTheme} rerenderParent={this.rerenderParent} - style={{ height: `calc(100% - 26px)` }} /> + style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }} /> ; } if(this.isMeta()){ @@ -490,7 +490,7 @@ const Editor = createClass({ enableFolding={true} editorTheme={this.state.editorTheme} rerenderParent={this.rerenderParent} - style={{ height: `calc(100% - 26px)` }} /> + style={{ height: `calc(100% -${this.state.snippetBarHeight}px)` }} /> ; } }, From 73b7d6887bd0bb17c39c9851e604800e6bcc8d81 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Mon, 17 Nov 2025 17:09:23 +1300 Subject: [PATCH 09/11] Fix typo in state property name for snippet bar height --- client/homebrew/editor/editor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 4c753dbc3..ff32ef4a5 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -90,7 +90,7 @@ const Editor = createClass({ this.resizeObserver = new ResizeObserver(entries => { const height = document.querySelector('.editor > .snippetBar').offsetHeight; - this.setState({ snippetbarHeight: height }); + this.setState({ snippetBarHeight: height }); console.log('setting state to ', height ); }); From 059d6d7939675583aadccf66cf160f09777617a3 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Mon, 17 Nov 2025 23:09:47 -0500 Subject: [PATCH 10/11] Lint --- client/homebrew/editor/editor.jsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index ff32ef4a5..0ffd2e8a0 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -85,16 +85,15 @@ const Editor = createClass({ editorTheme : editorTheme }); } - const snippetBar = document.querySelector('.editor > .snippetBar'); - if (!snippetBar) return; + const snippetBar = document.querySelector('.editor > .snippetBar'); + if (!snippetBar) return; - this.resizeObserver = new ResizeObserver(entries => { + this.resizeObserver = new ResizeObserver(entries => { const height = document.querySelector('.editor > .snippetBar').offsetHeight; this.setState({ snippetBarHeight: height }); - console.log('setting state to ', height ); - }); + }); - this.resizeObserver.observe(snippetBar); + this.resizeObserver.observe(snippetBar); }, componentDidUpdate : function(prevProps, prevState, snapshot) { @@ -118,7 +117,7 @@ const Editor = createClass({ }, componentWillUnmount() { - if (this.resizeObserver) this.resizeObserver.disconnect(); + if (this.resizeObserver) this.resizeObserver.disconnect(); }, handleControlKeys : function(e){ @@ -436,7 +435,6 @@ const Editor = createClass({ }, renderEditor : function(){ - console.log('state at rendering is: ',this.state.snippetBarHeight); if(this.isText()){ return <> Date: Mon, 17 Nov 2025 23:48:56 -0500 Subject: [PATCH 11/11] Linting and move checkLocalStorage inside confirmLocalStorageChange --- client/homebrew/navbar/newbrew.navitem.jsx | 24 ++++++++-------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/client/homebrew/navbar/newbrew.navitem.jsx b/client/homebrew/navbar/newbrew.navitem.jsx index 4914782a5..b8cf82ab7 100644 --- a/client/homebrew/navbar/newbrew.navitem.jsx +++ b/client/homebrew/navbar/newbrew.navitem.jsx @@ -34,25 +34,20 @@ const NewBrew = ()=>{ alert(`This file is invalid: ${!type ? 'Missing file extension' :`.${type} files are not supported`}. Only .txt files exported from the Homebrewery are allowed.`); - console.log(file); }; reader.readAsText(file); }; - const checkLocalStorage = ()=>{ - // Check if changes exist for New editor - const currentText = localStorage.getItem(BREWKEY); - const currentStyle = localStorage.getItem(STYLEKEY); - const currentMeta = localStorage.getItem(METAKEY); - return (currentText || currentStyle || currentMeta); - }; - const confirmLocalStorageChange = ()=>{ + const currentText = localStorage.getItem(BREWKEY); + const currentStyle = localStorage.getItem(STYLEKEY); + const currentMeta = localStorage.getItem(METAKEY); + // TRUE if no data in any local storage key // TRUE if data in any local storage key AND approval given // FALSE if data in any local storage key AND approval declined - return (!checkLocalStorage() || confirm( + return (!(currentText || currentStyle || currentMeta) || confirm( `You have made changes in the new brew space. If you continue, that information will be PERMANENTLY LOST.\nAre you sure you wish to continue?` )); }; @@ -75,7 +70,7 @@ const NewBrew = ()=>{ className='new' color='purple' icon='fa-solid fa-plus-square'> - new + new { newTab={true} color='purple' icon='fa-solid fa-file'> - resume editing + resume draft { color='yellow' icon='fa-solid fa-file-circle-plus' onClick={()=>{ clearLocalStorage(); }}> - from blank + from blank - { document.getElementById('uploadTxt').click(); }}> - from file + from file );