From 69e753cc71ae2caa596b166114ca0c31acb26365 Mon Sep 17 00:00:00 2001 From: sota1235 Date: Fri, 30 Dec 2016 13:53:51 +0900 Subject: [PATCH] modify: use new components insted of ConfigTab component --- .../main/modals/PreferencesModal/ConfigTab.js | 408 ------------------ .../main/modals/PreferencesModal/HotkeyTab.js | 2 +- browser/main/modals/PreferencesModal/index.js | 21 +- 3 files changed, 16 insertions(+), 415 deletions(-) delete mode 100644 browser/main/modals/PreferencesModal/ConfigTab.js diff --git a/browser/main/modals/PreferencesModal/ConfigTab.js b/browser/main/modals/PreferencesModal/ConfigTab.js deleted file mode 100644 index 4091a749..00000000 --- a/browser/main/modals/PreferencesModal/ConfigTab.js +++ /dev/null @@ -1,408 +0,0 @@ -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 ConfigTab 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 - }) - } - - handleKeyDown (e) { - if (e.keyCode === 13) { - this.submitHotKey() - } - } - - handleConfigKeyDown (e) { - if (e.keyCode === 13) { - this.submitConfig() - } - } - - handleLineNumberingClick (e) { - let config = this.state.config - - config['preview-line-number'] = e.target.checked - this.setState({ - config - }) - } - - handleDisableDirectWriteClick (e) { - let config = this.state.config - config['disable-direct-write'] = e.target.checked - this.setState({ - config - }) - } - - 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 - }) - } - - 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) { - let 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 () { - let keymapAlert = this.state.keymapAlert - let keymapAlertElement = keymapAlert != null - ?

- {keymapAlert.message} -

- : null - let themes = consts.THEMES - 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
    • -
-
- } -
- -
-
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
-
- -
-
-
- -
- -
- -
-
-
- ) - } -} - -ConfigTab.propTypes = { - user: PropTypes.shape({ - name: PropTypes.string - }), - dispatch: PropTypes.func -} - -export default CSSModules(ConfigTab, styles) diff --git a/browser/main/modals/PreferencesModal/HotkeyTab.js b/browser/main/modals/PreferencesModal/HotkeyTab.js index 21103c03..c64398d4 100644 --- a/browser/main/modals/PreferencesModal/HotkeyTab.js +++ b/browser/main/modals/PreferencesModal/HotkeyTab.js @@ -9,7 +9,7 @@ const ipc = electron.ipcRenderer const OSX = global.process.platform === 'darwin' -class HotkeyTagb extends React.Component { +class HotkeyTab extends React.Component { constructor (props) { super(props) diff --git a/browser/main/modals/PreferencesModal/index.js b/browser/main/modals/PreferencesModal/index.js index 8a8995be..070e8b2f 100644 --- a/browser/main/modals/PreferencesModal/index.js +++ b/browser/main/modals/PreferencesModal/index.js @@ -1,7 +1,8 @@ import React, { PropTypes } from 'react' import ReactDOM from 'react-dom' import { connect } from 'react-redux' -import ConfigTab from './ConfigTab' +import HotkeyTab from './HotkeyTab' +import UiTab from './UiTab' import InfoTab from './InfoTab' import StoragesTab from './StoragesTab' import CSSModules from 'browser/lib/CSSModules' @@ -39,9 +40,16 @@ class Preferences extends React.Component { switch (this.state.currentTab) { case 'INFO': return - case 'CONFIG': + case 'HOTKEY': return ( - + ) + case 'UI': + return ( + @@ -73,9 +81,10 @@ class Preferences extends React.Component { let content = this.renderContent() let tabs = [ - {target: 'STORAGES', label: 'Storages', icon: 'database'}, - {target: 'CONFIG', label: 'Config', icon: 'cogs'}, - {target: 'INFO', label: 'Info', icon: 'info-circle'} + {target: 'STORAGES', label: 'Storages'}, + {target: 'HOTKEY', label: 'Hotkey'}, + {target: 'UI', label: 'UI'}, + {target: 'INFO', label: 'Info'} ] let navButtons = tabs.map((tab) => {