Merge pull request #1220 from PaulRosset/add-notification-onChangeUi

Add notification on change ui

browser/main/StatusBar/index.js

@@ -63,7 +63,7 @@ class StatusBar extends React.Component {
         {status.updateReady
           ? <button onClick={this.updateApp} styleName='update'>
             <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
-            </button>
+          </button>
           : null
         }
       </div>

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -76,8 +76,8 @@
       color #1EC38B
     .error
       color red
-
-
+    .warning
+      color #FFA500
 
 .group-control-leftButton
   colorDefaultButton()

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -32,6 +32,7 @@ class HotkeyTab extends React.Component {
         message: err.message != null ? err.message : 'Error occurs!'
       }})
     }
+    this.oldHotkey = this.state.config.hotkey
     ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
     ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
   }
@@ -53,6 +54,7 @@ class HotkeyTab extends React.Component {
       config: newConfig
     })
     this.clearMessage()
+    this.props.haveToSave()
   }
 
   handleHintToggleButtonClick (e) {
@@ -70,6 +72,15 @@ class HotkeyTab extends React.Component {
     this.setState({
       config
     })
+    if (_.isEqual(this.oldHotkey, config.hotkey)) {
+      this.props.haveToSave()
+    } else {
+      this.props.haveToSave({
+        tab: 'Hotkey',
+        type: 'warning',
+        message: 'You have to save!'
+      })
+    }
   }
 
   clearMessage () {
@@ -161,7 +172,8 @@ class HotkeyTab extends React.Component {
 }
 
 HotkeyTab.propTypes = {
-  dispatch: PropTypes.func
+  dispatch: PropTypes.func,
+  haveToSave: PropTypes.func
 }
 
 export default CSSModules(HotkeyTab, styles)

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -42,6 +42,8 @@ top-bar--height = 50px
   background-color transparent
   color $ui-text-color
   font-size 16px
+  .saving--warning
+    haveToSave()
 
 .nav-button--active
   @extend .nav-button
@@ -49,6 +51,8 @@ top-bar--height = 50px
   background-color $ui-button--active-backgroundColor
   &:hover
     color $ui-text-color
+  .saving--warning
+    haveToSave()
 
 .nav-button-icon
   display block

browser/main/modals/PreferencesModal/Tab.styl

@@ -20,3 +20,8 @@ $tab--dark-text-color = #E5E5E5
 body[data-theme="dark"]
   .header
     color $tab--dark-text-color
+
+haveToSave()
+  color #FFA500
+  font-size 10px
+  margin-top 3px

browser/main/modals/PreferencesModal/UiTab.js

@@ -7,11 +7,10 @@ import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
 import ReactCodeMirror from 'react-codemirror'
 import CodeMirror from 'codemirror'
+import _ from 'lodash'
 
 const OSX = global.process.platform === 'darwin'
 
-import _ from 'lodash'
-
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 
@@ -93,8 +92,19 @@ class UiTab extends React.Component {
     if (newCodemirrorTheme !== codemirrorTheme) {
       checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme.split(' ')[0]}.css`)
     }
-
-    this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme })
+    this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme }, () => {
+      const {ui, editor, preview} = this.props.config
+      this.currentConfig = {ui, editor, preview}
+      if (_.isEqual(this.currentConfig, this.state.config)) {
+        this.props.haveToSave()
+      } else {
+        this.props.haveToSave({
+          tab: 'UI',
+          type: 'warning',
+          message: 'You have to save!'
+        })
+      }
+    })
   }
 
   handleSaveUIClick (e) {
@@ -111,6 +121,7 @@ class UiTab extends React.Component {
       config: newConfig
     })
     this.clearMessage()
+    this.props.haveToSave()
   }
 
   clearMessage () {
@@ -412,7 +423,8 @@ UiTab.propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string
   }),
-  dispatch: PropTypes.func
+  dispatch: PropTypes.func,
+  haveToSave: PropTypes.func
 }
 
 export default CSSModules(UiTab, styles)

browser/main/modals/PreferencesModal/index.js

@@ -17,7 +17,9 @@ class Preferences extends React.Component {
     super(props)
 
     this.state = {
-      currentTab: 'STORAGES'
+      currentTab: 'STORAGES',
+      UIAlert: '',
+      HotkeyAlert: ''
     }
   }
 
@@ -58,6 +60,7 @@ class Preferences extends React.Component {
           <HotkeyTab
             dispatch={dispatch}
             config={config}
+            haveToSave={alert => this.setState({HotkeyAlert: alert})}
           />
         )
       case 'UI':
@@ -65,6 +68,7 @@ class Preferences extends React.Component {
           <UiTab
             dispatch={dispatch}
             config={config}
+            haveToSave={alert => this.setState({UIAlert: alert})}
           />
         )
       case 'CROWDFUNDING':
@@ -94,19 +98,26 @@ class Preferences extends React.Component {
     return node.getBoundingClientRect()
   }
 
+  haveToSaveNotif (type, message) {
+    return (
+      <p styleName={`saving--${type}`}>{message}</p>
+    )
+  }
+
   render () {
     const content = this.renderContent()
 
     const tabs = [
       {target: 'STORAGES', label: 'Storages'},
-      {target: 'HOTKEY', label: 'Hotkey'},
-      {target: 'UI', label: 'UI'},
+      {target: 'HOTKEY', label: 'Hotkey', Hotkey: this.state.HotkeyAlert},
+      {target: 'UI', label: 'UI', UI: this.state.UIAlert},
       {target: 'INFO', label: 'Community / Info'},
       {target: 'CROWDFUNDING', label: 'Crowdfunding'}
     ]
 
     const navButtons = tabs.map((tab) => {
       const isActive = this.state.currentTab === tab.target
+      const isUiHotkeyTab = _.isObject(tab[tab.label]) && tab.label === tab[tab.label].tab
       return (
         <button styleName={isActive
             ? 'nav-button--active'
@@ -118,6 +129,7 @@ class Preferences extends React.Component {
           <span styleName='nav-button-label'>
             {tab.label}
           </span>
+          {isUiHotkeyTab ? this.haveToSaveNotif(tab[tab.label].type, tab[tab.label].message) : null}
         </button>
       )
     })