diff --git a/browser/main/modals/PreferencesModal/HotkeyTab.js b/browser/main/modals/PreferencesModal/HotkeyTab.js new file mode 100644 index 00000000..21103c03 --- /dev/null +++ b/browser/main/modals/PreferencesModal/HotkeyTab.js @@ -0,0 +1,156 @@ +import React, { PropTypes } from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './ConfigTab.styl' +import ConfigManager from 'browser/main/lib/ConfigManager' +import store from 'browser/main/store' + +const electron = require('electron') +const ipc = electron.ipcRenderer + +const OSX = global.process.platform === 'darwin' + +class HotkeyTagb extends React.Component { + constructor (props) { + super(props) + + this.state = { + isHotkeyHintOpen: false, + config: props.config + } + } + + componentDidMount () { + this.handleSettingDone = () => { + this.setState({keymapAlert: { + type: 'success', + message: 'Successfully applied!' + }}) + } + this.handleSettingError = (err) => { + this.setState({keymapAlert: { + type: 'error', + message: err.message != null ? err.message : 'Error occurs!' + }}) + } + ipc.addListener('APP_SETTING_DONE', this.handleSettingDone) + ipc.addListener('APP_SETTING_ERROR', this.handleSettingError) + } + + componentWillUnmount () { + ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone) + ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError) + } + + handleSaveButtonClick (e) { + let newConfig = { + hotkey: this.state.config.hotkey + } + + ConfigManager.set(newConfig) + + store.dispatch({ + type: 'SET_UI', + config: newConfig + }) + } + + handleHintToggleButtonClick (e) { + this.setState({ + isHotkeyHintOpen: !this.state.isHotkeyHintOpen + }) + } + + handleHotkeyChange (e) { + let { config } = this.state + config.hotkey = { + toggleFinder: this.refs.toggleFinder.value, + toggleMain: this.refs.toggleMain.value + } + this.setState({ + config + }) + } + + render () { + let keymapAlert = this.state.keymapAlert + let keymapAlertElement = keymapAlert != null + ?

+ {keymapAlert.message} +

+ : null + let { config } = this.state + + return ( +
+
+
Hotkey
+
+
Toggle Main
+
+ this.handleHotkeyChange(e)} + ref='toggleMain' + value={config.hotkey.toggleMain} + type='text' + /> +
+
+
+
Toggle Finder(popup)
+
+ this.handleHotkeyChange(e)} + ref='toggleFinder' + value={config.hotkey.toggleFinder} + type='text' + /> +
+
+
+ + + {keymapAlertElement} +
+ {this.state.isHotkeyHintOpen && +
+

Available Keys

+
    +
  • 0 to 9
    • +
  • A to Z
    • +
  • F1 to F24
    • +
  • Punctuations like ~, !, @, #, $, etc.
    • +
  • Plus
    • +
  • Space
    • +
  • Backspace
    • +
  • Delete
    • +
  • Insert
    • +
  • Return (or Enter as alias)
    • +
  • Up, Down, Left and Right
    • +
  • Home and End
    • +
  • PageUp and PageDown
    • +
  • Escape (or Esc for short)
    • +
  • VolumeUp, VolumeDown and VolumeMute
    • +
  • MediaNextTrack, MediaPreviousTrack, MediaStop and MediaPlayPause
    • +
+
+ } +
+
+ ) + } +} + +HotkeyTab.propTypes = { + dispatch: PropTypes.func, +} + +export default CSSModules(HotkeyTab, styles) diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js new file mode 100644 index 00000000..09ae6d57 --- /dev/null +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -0,0 +1,255 @@ +import React, { PropTypes } from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './ConfigTab.styl' +import ConfigManager from 'browser/main/lib/ConfigManager' +import store from 'browser/main/store' +import consts from 'browser/lib/consts' + +const electron = require('electron') +const ipc = electron.ipcRenderer + +const OSX = global.process.platform === 'darwin' + +class UiTab extends React.Component { + constructor (props) { + super(props) + + this.state = { + config: props.config + } + } + + handleUIChange (e) { + let { config } = this.state + + config.ui = { + theme: this.refs.uiTheme.value, + disableDirectWrite: this.refs.uiD2w != null + ? this.refs.uiD2w.checked + : false + } + config.editor = { + theme: this.refs.editorTheme.value, + fontSize: this.refs.editorFontSize.value, + fontFamily: this.refs.editorFontFamily.value, + indentType: this.refs.editorIndentType.value, + indentSize: this.refs.editorIndentSize.value, + switchPreview: this.refs.editorSwitchPreview.value + } + config.preview = { + fontSize: this.refs.previewFontSize.value, + fontFamily: this.refs.previewFontFamily.value, + codeBlockTheme: this.refs.previewCodeBlockTheme.value, + lineNumber: this.refs.previewLineNumber.checked + } + + this.setState({ config }) + } + + handleSaveUIClick (e) { + const newConfig = { + ui: this.state.config.ui, + editor: this.state.config.editor, + preview: this.state.config.preview + } + + ConfigManager.set(newConfig) + + store.dispatch({ + type: 'SET_UI', + config: newConfig + }) + } + + render () { + const themes = consts.THEMES + const { config } = this.state + + return ( +
+
+
UI
+
+
Theme
+
+ +
+
+ { + global.process.platform === 'win32' + ?
+ +
+ : null + } +
Editor
+ +
+
+ Editor Theme +
+
+ +
+
+
+
+ Editor Font Size +
+
+ this.handleUIChange(e)} + type='text' + /> +
+
+
+
+ Editor Font Family +
+
+ this.handleUIChange(e)} + type='text' + /> +
+
+
+
+ Editor Indent Style +
+
+   + +
+
+ +
+
+ Switching Preview +
+
+ +
+
+
Preview
+
+
+ Preview Font Size +
+
+ this.handleUIChange(e)} + type='text' + /> +
+
+
+
+ Preview Font Family +
+
+ this.handleUIChange(e)} + type='text' + /> +
+
+
+
Code block Theme
+
+ +
+
+
+ +
+ +
+ +
+
+
+ ) + } +} + +UiTab.propTypes = { + user: PropTypes.shape({ + name: PropTypes.string + }), + dispatch: PropTypes.func +} + +export default CSSModules(UiTab, styles)