diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less index a199ecbe4..d1a54da6f 100644 --- a/client/homebrew/navbar/navbar.less +++ b/client/homebrew/navbar/navbar.less @@ -55,11 +55,16 @@ text-align : center; text-transform : initial; } - .save-menu .navItem i.fa-power-off { - color : red; - &.active { - color : rgb(0, 182, 52); - filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765)) + .save-menu { + .dropdown { + z-index: 1000; + } + .navItem i.fa-power-off { + color : red; + &.active { + color : rgb(0, 182, 52); + filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765)) + } } } .patreon.navItem{ diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 9a90d7ad9..49903a4b2 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -25,7 +25,6 @@ const googleDriveActive = require('../../googleDrive.png'); const googleDriveInactive = require('../../googleDriveMono.png'); const SAVE_TIMEOUT = 3000; -const AUTOSAVE_TIMEOUT = 10000; const EditPage = createClass({ displayName : 'EditPage', @@ -64,21 +63,27 @@ const EditPage = createClass({ errors : null, htmlErrors : Markdown.validate(this.props.brew.text), url : '', - autoSave : true + autoSave : true, + autoSaveWarning : false }; }, savedBrew : null, componentDidMount : function(){ - this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) }); - this.setState({ url : window.location.href }); this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy - this.trySave(); + this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) }, ()=>{ + if(this.state.autoSave){ + this.trySave(); + } else { + this.setState({ autoSaveWarning: true }); + } + }); + window.onbeforeunload = ()=>{ if(this.state.isSaving || this.state.isPending){ return 'You have unsaved changes!'; @@ -147,13 +152,6 @@ const EditPage = createClass({ }, trySave : function(){ - // if(!this.state.autoSave){ - // if(this.autoSaveInterval){ - // clearInterval(this.autoSaveInterval); - // } - // this.autoSaveInterval = setInterval(this.trySave, 10000); - // return; - // }; if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT); if(this.hasChanges()){ this.debounceSave(); @@ -340,6 +338,18 @@ const EditPage = createClass({ ; } + if(this.state.autoSaveWarning){ + setTimeout(()=>this.setState({ autoSaveWarning: false }), 4000); + this.setAutosaveWarning(); + + return + Reminder... + + Autosave has been turned off, and you haven't saved for {Math.round((new Date() - new Date(this.props.brew.updatedAt)) / 1000 / 60)} minutes. + + ; + } + if(this.state.isSaving){ return saving...; } @@ -355,14 +365,20 @@ const EditPage = createClass({ }, handleAutoSave : function(){ + if(this.warningTimer) clearTimeout(this.warningTimer); this.setState((prevState)=>({ - autoSave : !prevState.autoSave + autoSave : !prevState.autoSave, + autoSaveWarning : prevState.autoSave }), ()=>{ - if(this.state.autoSave) this.trySave(); localStorage.setItem('AUTOSAVE_ON', JSON.stringify(this.state.autoSave)); }); }, + setAutosaveWarning : function(){ + this.warningTimer = setTimeout(()=>{this.setState({ autoSaveWarning: true });}, 15000); + this.warningTimer; + }, + renderAutoSaveButton : function(){ return Autosave diff --git a/client/homebrew/pages/editPage/editPage.less b/client/homebrew/pages/editPage/editPage.less index 5d0d21b64..9d3f69221 100644 --- a/client/homebrew/pages/editPage/editPage.less +++ b/client/homebrew/pages/editPage/editPage.less @@ -32,7 +32,7 @@ position : absolute; top : 100%; left : 50%; - z-index : 100000; + z-index : 500; width : 140px; padding : 3px; color : white;