public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2026-05-20 14:31:57 +00:00
Code Issues Releases Wiki Activity

clean old codes

Browse Source
This commit is contained in:
Rokt33r
2016-05-03 23:21:27 +09:00
parent 27c22a4b09
commit 66856d1229
9 changed files with 24 additions and 1185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
browser/main/modal/Preference/AppSettingTab.js
View File

@@ -88,58 +88,27 @@ export default class AppSettingTab extends React.Component {
})
}
handleNameSaveButtonClick (e) {
let { dispatch } = this.props
dispatch(updateUser({name: this.state.user.name}))
this.setState({
userAlert: {
type: 'success',
message: 'Successfully done!'
}
})
}
render () {
let keymapAlert = this.state.keymapAlert
let keymapAlertElement = keymapAlert != null
? (
<p className={`alert ${keymapAlert.type}`}>
{keymapAlert.message}
</p>
) : null
let userAlert = this.state.userAlert
let userAlertElement = userAlert != null
? (
<p className={`alert ${userAlert.type}`}>
{userAlert.message}
</p>
) : null
let aceThemeList = ace.require("ace/ext/themelist")
? <p className={`alert ${keymapAlert.type}`}>
{keymapAlert.message}
</p>
: null
let aceThemeList = ace.require('ace/ext/themelist')
let hljsThemeList = hljsTheme()
return (
<div className='AppSettingTab content'>
<div className='section'>
<div className='sectionTitle'>User&apos;s info</div>
<div className='sectionInput'>
<label>User name</label>
<input valueLink={this.linkState('user.name')} type='text'/>
</div>
<div className='sectionConfirm'>
<button onClick={e => this.handleNameSaveButtonClick(e)}>Save</button>
{userAlertElement}
</div>
</div>
<div className='section'>
<div className='sectionTitle'>Editor</div>
<div className='sectionInput'>
<label>Editor Font Size</label>
<input valueLink={this.linkState('config.editor-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
<input valueLink={this.linkState('config.editor-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
</div>
<div className='sectionInput'>
<label>Editor Font Family</label>
<input valueLink={this.linkState('config.editor-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
<input valueLink={this.linkState('config.editor-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
</div>
<div className='sectionMultiSelect'>
<label>Editor Indent Style</label>
@@ -160,11 +129,11 @@ export default class AppSettingTab extends React.Component {
<div className='sectionTitle'>Preview</div>
<div className='sectionInput'>
<label>Preview Font Size</label>
<input valueLink={this.linkState('config.preview-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
<input valueLink={this.linkState('config.preview-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
</div>
<div className='sectionInput'>
<label>Preview Font Family</label>
<input valueLink={this.linkState('config.preview-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
<input valueLink={this.linkState('config.preview-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
</div>
<div className='sectionSelect'>
<label>Switching Preview</label>
@@ -194,8 +163,8 @@ export default class AppSettingTab extends React.Component {
<label>Code block Theme</label>
<select valueLink={this.linkState('config.theme-code')}>
{
hljsThemeList.map(function(v, i){
return (<option value={v.name} key={v.name}>{v.caption}</option>)
hljsThemeList.map((theme) => {
return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
})
}
</select>
@@ -204,28 +173,28 @@ export default class AppSettingTab extends React.Component {
<label>Editor Theme</label>
<select valueLink={this.linkState('config.theme-syntax')}>
{
aceThemeList.themes.map(function(v, i){
return (<option value={v.name} key={v.name}>{v.caption}</option>)
aceThemeList.themes.map((theme) => {
return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
})
}
</select>
</div>
<div className='sectionConfirm'>
<button onClick={e => this.handleConfigSaveButtonClick(e)}>Save</button>
<button onClick={(e) => this.handleConfigSaveButtonClick(e)}>Save</button>
</div>
</div>
<div className='section'>
<div className='sectionTitle'>Hotkey</div>
<div className='sectionInput'>
<label>Toggle Main</label>
<input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleMain')} type='text'/>
<input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleMain')} type='text'/>
</div>
<div className='sectionInput'>
<label>Toggle Finder(popup)</label>
<input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleFinder')} type='text'/>
<input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleFinder')} type='text'/>
</div>
<div className='sectionConfirm'>
<button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
<button onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
{keymapAlertElement}
</div>
<div className='description'>

96
browser/main/modal/Preference/FolderSettingTab.js
View File

@@ -1,96 +0,0 @@
import React, { PropTypes } from 'react'
import FolderRow from './FolderRow'
import linkState from 'browser/lib/linkState'
export default class FolderSettingTab extends React.Component {
constructor (props) {
super(props)
this.state = {
name: ''
}
}
handleNewFolderNameKeyDown (e) {
if (e.keyCode === 13) {
this.handleSaveButtonClick()
}
}
handleSaveButtonClick (e) {
this.setState({alert: null}, () => {
let { dispatch } = this.props
try {
// dispatch(createFolder({
// name: this.state.name
// }))
} catch (e) {
this.setState({alert: {
type: 'error',
message: e.message
}})
return
}
this.setState({name: ''})
})
}
setAlert (alert, cb) {
this.setState({alert: alert}, cb)
}
render () {
let { folders } = this.props
let folderElements = folders.map((folder, index) => {
return (
<FolderRow
key={'folder-' + folder.key}
folder={folder}
index={index}
count={folders.length}
setAlert={(alert, cb) => this.setAlert(alert, cb)}
/>
)
})
let alert = this.state.alert
let alertElement = alert != null ? (
<p className={`alert ${alert.type}`}>
{alert.message}
</p>
) : null
return (
<div className='FolderSettingTab content'>
<div className='section'>
<div className='sectionTitle'>Manage folder</div>
<div className='folderTable'>
<div className='folderHeader'>
<div className='folderName'>Folder</div>
<div className='folderControl'>Edit/Delete</div>
</div>
{folderElements}
<div className='newFolder'>
<div className='folderName'>
<input onKeyDown={(e) => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
</div>
<div className='folderControl'>
<button onClick={(e) => this.handleSaveButtonClick(e)} className='primary'>Add</button>
</div>
</div>
{alertElement}
</div>
</div>
</div>
)
}
}
FolderSettingTab.propTypes = {
folders: PropTypes.array,
dispatch: PropTypes.func
}
FolderSettingTab.prototype.linkState = linkState

35
browser/main/modal/Preferences.js
View File

@@ -3,12 +3,10 @@ import { connect, Provider } from 'react-redux'
import linkState from 'browser/lib/linkState'
import store from '../store'
import AppSettingTab from './Preference/AppSettingTab'
import FolderSettingTab from './Preference/FolderSettingTab'
import ContactTab from './Preference/ContactTab'
import { closeModal } from 'browser/lib/modal'
const APP = 'APP'
const FOLDER = 'FOLDER'
const CONTACT = 'CONTACT'
class Preferences extends React.Component {
@@ -25,7 +23,7 @@ class Preferences extends React.Component {
}
handleNavButtonClick (tab) {
return e => {
return (e) => {
this.setState({currentTab: tab})
}
}
@@ -35,19 +33,18 @@ class Preferences extends React.Component {
let tabs = [
{target: APP, label: 'Preferences'},
{target: FOLDER, label: 'Manage folder'},
{target: CONTACT, label: 'Contact form'}
{target: CONTACT, label: 'Contact'}
]
let navButtons = tabs.map(tab => (
<button key={tab.target} onClick={e => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
let navButtons = tabs.map((tab) => (
<button key={tab.target} onClick={(e) => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
))
return (
<div className='Preferences modal'>
<div className='header'>
<div className='title'>Setting</div>
<button onClick={e => closeModal()} className='closeBtn'>Done</button>
<button onClick={(e) => closeModal()} className='closeBtn'>Done</button>
</div>
<div className='nav'>
@@ -60,16 +57,9 @@ class Preferences extends React.Component {
}
renderContent () {
let { user, folders, dispatch } = this.props
let { user, dispatch } = this.props
switch (this.state.currentTab) {
case FOLDER:
return (
<FolderSettingTab
dispatch={dispatch}
folders={folders}
/>
)
case CONTACT:
return (
<ContactTab/>
@@ -90,23 +80,12 @@ Preferences.propTypes = {
user: PropTypes.shape({
name: PropTypes.string
}),
folders: PropTypes.array,
dispatch: PropTypes.func
}
Preferences.prototype.linkState = linkState
function remap (state) {
let { user, folders, status } = state
return {
user,
folders,
status
}
}
let RootComponent = connect(remap)(Preferences)
let RootComponent = connect((x) => x)(Preferences)
export default class PreferencesModal extends React.Component {
render () {
return (

115
browser/main/modal/Tutorial.js
View File

@@ -1,115 +0,0 @@
import React, { PropTypes } from 'react'
import MarkdownPreview from 'browser/components/MarkdownPreview'
import CodeEditor from 'browser/components/CodeEditor'
export default class Tutorial extends React.Component {
constructor (props) {
super(props)
this.state = {
slideIndex: 0
}
}
handlePriorSlideClick () {
if (this.state.slideIndex > 0) this.setState({slideIndex: this.state.slideIndex - 1})
}
handleNextSlideClick () {
if (this.state.slideIndex < 4) this.setState({slideIndex: this.state.slideIndex + 1})
}
startButtonClick (e) {
this.props.close()
}
render () {
let content = this.renderContent(this.state.slideIndex)
let dotElements = []
for (let i = 0; i < 5; i++) {
dotElements.push(<i key={i} className={'fa fa-fw fa-circle' + (i === this.state.slideIndex ? ' active' : '')}/>)
}
return (
<div className='Tutorial modal'>
<button onClick={(e) => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
<i className='fa fa-fw fa-angle-left'/>
</button>
<button onClick={(e) => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
<i className='fa fa-fw fa-angle-right'/>
</button>
{content}
<div className='dots'>
{dotElements}
</div>
</div>
)
}
renderContent (index) {
switch (index) {
case 0:
return (<div className='slide slide0'>
<div className='title'>Welcome to Boost</div>
<div className='content'>
Boost is a brand new note app for software<br/>
Don't waste time cleaning up your data.<br/>
devote that time to more creative work.<br/>
Hack your memory.
</div>
</div>)
case 1:
let content = '## Boost is a note app for engineer.\n\n - Write with markdown\n - Stylize beautiful'
return (<div className='slide slide1'>
<div className='title'>Write with Markdown</div>
<div className='content'>
Markdown is available.<br/>
Your notes will be stylized beautifully and quickly.
<div className='markdown'>
<pre className='left'>{content}</pre>
<MarkdownPreview className='right' content={content}/>
</div>
</div>
</div>)
case 2:
let code = 'import shell from \'shell\'\r\nvar React = require(\'react\')\r\nvar { PropTypes } = React\r\nimport markdown from \'boost\/markdown\'\r\nvar ReactDOM = require(\'react-dom\')\r\n\r\nfunction handleAnchorClick (e) {\r\n shell.openExternal(e.target.href)\r\n e.preventDefault()\r\n}\r\n\r\nexport default class MarkdownPreview extends React.Component {\r\n componentDidMount () {\r\n this.addListener()\r\n }\r\n\r\n componentDidUpdate () {\r\n this.addListener()\r\n }\r\n\r\n componentWillUnmount () {\r\n this.removeListener()\r\n }'
return (<div className='slide slide2'>
<div className='title'>Beautiful code highlighting</div>
<div className='content'>
Boost supports code syntax highlighting.<br/>
There are more than 100 different type of language.
<div className='code'>
<CodeEditor readOnly article={{content: code, mode: 'jsx'}}/>
</div>
</div>
</div>)
case 3:
return (<div className='slide slide3'>
<div className='title'>Easy to access with Finder</div>
<div className='content'>
The Finder helps you organize all of the files and documents.<br/>
There is a short-cut key [⌘ + alt + s] to open the Finder.<br/>
It is available to save your articles on the Clipboard<br/>
by selecting your file with pressing Enter key,<br/>
and to paste the contents of the Clipboard with [{process.platform === 'darwin' ? 'Command' : 'Control'}-V]
<img width='480' src='../resources/finder.png'/>
</div>
</div>)
case 4:
return (<div className='slide slide4'>
<div className='title'>Are you ready?</div>
<div className='content'>
<button onClick={(e) => this.startButtonClick(e)}>Start<br/>Boost</button>
</div>
</div>)
default:
return null
}
}
}
Tutorial.propTypes = {
close: PropTypes.func
}