mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 09:46:22 +00:00
5b17808569
CodeMirror seems to have the two solarized themes within the `node_modules/coemirror/theme/solarized.css`. So passing the string "solarized light" and "solarized dark" to the editor theme appropriately sets these themes. The Boostnote app appears to be dynamically determining themes based on the css files found within `node_modules/codemirror/theme/`. So that's why there was just a single option of 'solarized' before. The light and dark 'solarized' themes appear to be the *only* themes that share a css style, whereas all other light and dark variarnt themes get their own css file (ex: base16-dark.css and base16-light.css). Weird!
309 lines
10 KiB
JavaScript
309 lines
10 KiB
JavaScript
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'
|
|
import ReactCodeMirror from 'react-codemirror'
|
|
import CodeMirror from 'codemirror'
|
|
|
|
const OSX = global.process.platform === 'darwin'
|
|
|
|
class UiTab extends React.Component {
|
|
constructor (props) {
|
|
super(props)
|
|
this.state = {
|
|
config: props.config,
|
|
codemirrorTheme: props.config.editor.theme
|
|
}
|
|
}
|
|
|
|
componentWillMount () {
|
|
CodeMirror.autoLoadMode(ReactCodeMirror, 'javascript')
|
|
}
|
|
|
|
handleUIChange (e) {
|
|
const { codemirrorTheme } = this.state
|
|
let checkHighLight = document.getElementById('checkHighLight')
|
|
|
|
if (checkHighLight === null) {
|
|
checkHighLight = document.createElement('link')
|
|
checkHighLight.setAttribute('id', 'checkHighLight')
|
|
checkHighLight.setAttribute('rel', 'stylesheet')
|
|
document.head.appendChild(checkHighLight)
|
|
}
|
|
|
|
const newConfig = {
|
|
ui: {
|
|
theme: this.refs.uiTheme.value,
|
|
showCopyNotification: this.refs.showCopyNotification.checked,
|
|
disableDirectWrite: this.refs.uiD2w != null
|
|
? this.refs.uiD2w.checked
|
|
: false
|
|
},
|
|
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,
|
|
keyMap: this.refs.editorKeyMap.value
|
|
},
|
|
preview: {
|
|
fontSize: this.refs.previewFontSize.value,
|
|
fontFamily: this.refs.previewFontFamily.value,
|
|
codeBlockTheme: this.refs.previewCodeBlockTheme.value,
|
|
lineNumber: this.refs.previewLineNumber.checked
|
|
}
|
|
}
|
|
|
|
const newCodemirrorTheme = this.refs.editorTheme.value
|
|
|
|
if (newCodemirrorTheme !== codemirrorTheme) {
|
|
checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme.split(" ")[0]}.css`)
|
|
}
|
|
|
|
this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme })
|
|
}
|
|
|
|
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, codemirrorTheme } = this.state
|
|
const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t console.log("I am Happy!")\n\t} else {\n\t console.log("I am not Happy!")\n\t}\n};'
|
|
return (
|
|
<div styleName='root'>
|
|
<div styleName='group'>
|
|
<div styleName='group-header'>UI</div>
|
|
|
|
<div styleName='group-section'>
|
|
Color Theme
|
|
<div styleName='group-section-control'>
|
|
<select value={config.ui.theme}
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
ref='uiTheme'
|
|
>
|
|
<option value='default'>Light</option>
|
|
<option value='dark'>Dark</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div styleName='group-checkBoxSection'>
|
|
<label>
|
|
<input onChange={(e) => this.handleUIChange(e)}
|
|
checked={this.state.config.ui.showCopyNotification}
|
|
ref='showCopyNotification'
|
|
type='checkbox'
|
|
/>
|
|
Show "Saved to Clipboard" notification when copying
|
|
</label>
|
|
</div>
|
|
{
|
|
global.process.platform === 'win32'
|
|
? <div styleName='group-checkBoxSection'>
|
|
<label>
|
|
<input onChange={(e) => this.handleUIChange(e)}
|
|
checked={this.state.config.ui.disableDirectWrite}
|
|
refs='uiD2w'
|
|
disabled={OSX}
|
|
type='checkbox'
|
|
/>
|
|
Disable Direct Write(It will be applied after restarting)
|
|
</label>
|
|
</div>
|
|
: null
|
|
}
|
|
<div styleName='group-header2'>Editor</div>
|
|
|
|
<div styleName='group-section'>
|
|
<div styleName='group-section-label'>
|
|
Editor Theme
|
|
</div>
|
|
<div styleName='group-section-control'>
|
|
<select value={config.editor.theme}
|
|
ref='editorTheme'
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
>
|
|
{
|
|
themes.map((theme) => {
|
|
return (<option value={theme} key={theme}>{theme}</option>)
|
|
})
|
|
}
|
|
</select>
|
|
<div styleName='code-mirror'>
|
|
<ReactCodeMirror value={codemirrorSampleCode} options={{ lineNumbers: true, readOnly: true, mode: 'javascript', theme: codemirrorTheme }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div styleName='group-section'>
|
|
<div styleName='group-section-label'>
|
|
Editor Font Size
|
|
</div>
|
|
<div styleName='group-section-control'>
|
|
<input styleName='group-section-control-input'
|
|
ref='editorFontSize'
|
|
value={config.editor.fontSize}
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
type='text'
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div styleName='group-section'>
|
|
<div styleName='group-section-label'>
|
|
Editor Font Family
|
|
</div>
|
|
<div styleName='group-section-control'>
|
|
<input styleName='group-section-control-input'
|
|
ref='editorFontFamily'
|
|
value={config.editor.fontFamily}
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
type='text'
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div styleName='group-section'>
|
|
<div styleName='group-section-label'>
|
|
Editor Indent Style
|
|
</div>
|
|
<div styleName='group-section-control'>
|
|
<select value={config.editor.indentSize}
|
|
ref='editorIndentSize'
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
>
|
|
<option value='1'>1</option>
|
|
<option value='2'>2</option>
|
|
<option value='4'>4</option>
|
|
<option value='8'>8</option>
|
|
</select>
|
|
<select value={config.editor.indentType}
|
|
ref='editorIndentType'
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
>
|
|
<option value='space'>Spaces</option>
|
|
<option value='tab'>Tabs</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div styleName='group-section'>
|
|
<div styleName='group-section-label'>
|
|
Switch to Preview
|
|
</div>
|
|
<div styleName='group-section-control'>
|
|
<select value={config.editor.switchPreview}
|
|
ref='editorSwitchPreview'
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
>
|
|
<option value='BLUR'>When Editor Blurred</option>
|
|
<option value='RIGHTCLICK'>On Right Click</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div styleName='group-section'>
|
|
<div styleName='group-section-label'>
|
|
Editor Keymap
|
|
</div>
|
|
<div styleName='group-section-control'>
|
|
<select value={config.editor.keyMap}
|
|
ref='editorKeyMap'
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
>
|
|
<option value='sublime'>default</option>
|
|
<option value='vim'>vim</option>
|
|
<option value='emacs'>emacs</option>
|
|
</select>
|
|
<span styleName='note-for-keymap'>Please restart boostnote after you change the keymap</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div styleName='group-header2'>Preview</div>
|
|
<div styleName='group-section'>
|
|
<div styleName='group-section-label'>
|
|
Preview Font Size
|
|
</div>
|
|
<div styleName='group-section-control'>
|
|
<input styleName='group-section-control-input'
|
|
value={config.preview.fontSize}
|
|
ref='previewFontSize'
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
type='text'
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div styleName='group-section'>
|
|
<div styleName='group-section-label'>
|
|
Preview Font Family
|
|
</div>
|
|
<div styleName='group-section-control'>
|
|
<input styleName='group-section-control-input'
|
|
ref='previewFontFamily'
|
|
value={config.preview.fontFamily}
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
type='text'
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div styleName='group-section'>
|
|
<div styleName='group-section-label'>Code block Theme</div>
|
|
<div styleName='group-section-control'>
|
|
<select value={config.preview.codeBlockTheme}
|
|
ref='previewCodeBlockTheme'
|
|
onChange={(e) => this.handleUIChange(e)}
|
|
>
|
|
{
|
|
themes.map((theme) => {
|
|
return (<option value={theme} key={theme}>{theme}</option>)
|
|
})
|
|
}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div styleName='group-checkBoxSection'>
|
|
<label>
|
|
<input onChange={(e) => this.handleUIChange(e)}
|
|
checked={this.state.config.preview.lineNumber}
|
|
ref='previewLineNumber'
|
|
type='checkbox'
|
|
/>
|
|
Show line numbers for preview code blocks
|
|
</label>
|
|
</div>
|
|
|
|
<div className='group-control'>
|
|
<button styleName='group-control-rightButton'
|
|
onClick={(e) => this.handleSaveUIClick(e)}
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
UiTab.propTypes = {
|
|
user: PropTypes.shape({
|
|
name: PropTypes.string
|
|
}),
|
|
dispatch: PropTypes.func
|
|
}
|
|
|
|
export default CSSModules(UiTab, styles)
|