mirror of
https://github.com/BoostIo/Boostnote
synced 2026-02-20 19:28:52 +00:00
snippet note
This commit is contained in:
Dick Choi
@@ -1,6 +1,6 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './NoteDetail.styl'
|
||||
import styles from './MarkdownNoteDetail.styl'
|
||||
import MarkdownEditor from 'browser/components/MarkdownEditor'
|
||||
import StarButton from './StarButton'
|
||||
import TagSelect from './TagSelect'
|
||||
@@ -13,7 +13,7 @@ const { remote } = electron
|
||||
const Menu = remote.Menu
|
||||
const MenuItem = remote.MenuItem
|
||||
|
||||
class NoteDetail extends React.Component {
|
||||
class MarkdownNoteDetail extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
@@ -217,7 +217,7 @@ class NoteDetail extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
NoteDetail.propTypes = {
|
||||
MarkdownNoteDetail.propTypes = {
|
||||
dispatch: PropTypes.func,
|
||||
repositories: PropTypes.array,
|
||||
note: PropTypes.shape({
|
||||
@@ -229,4 +229,4 @@ NoteDetail.propTypes = {
|
||||
ignorePreviewPointerEvents: PropTypes.bool
|
||||
}
|
||||
|
||||
export default CSSModules(NoteDetail, styles)
|
||||
export default CSSModules(MarkdownNoteDetail, styles)
|
||||
@@ -2,7 +2,7 @@ $info-height = 75px
|
||||
|
||||
.root
|
||||
absolute top bottom right
|
||||
border-width 1px 0
|
||||
border-width 0 0 1px
|
||||
border-style solid
|
||||
border-color $ui-borderColor
|
||||
|
||||
410
browser/main/Detail/SnippetNoteDetail.js
Normal file
410
browser/main/Detail/SnippetNoteDetail.js
Normal file
@@ -0,0 +1,410 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './SnippetNoteDetail.styl'
|
||||
import CodeEditor from 'browser/components/CodeEditor'
|
||||
import StarButton from './StarButton'
|
||||
import TagSelect from './TagSelect'
|
||||
import FolderSelect from './FolderSelect'
|
||||
import Commander from 'browser/main/lib/Commander'
|
||||
import dataApi from 'browser/main/lib/dataApi'
|
||||
import modes from 'browser/lib/modes'
|
||||
|
||||
const electron = require('electron')
|
||||
const { remote } = electron
|
||||
const Menu = remote.Menu
|
||||
const MenuItem = remote.MenuItem
|
||||
|
||||
class SnippetNoteDetail extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
snippetIndex: 0,
|
||||
note: Object.assign({
|
||||
description: ''
|
||||
}, props.note, {
|
||||
snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
Commander.bind('note-detail', this)
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
Commander.release(this)
|
||||
}
|
||||
|
||||
fire (command) {
|
||||
switch (command) {
|
||||
case 'focus':
|
||||
this.refs.description.focus()
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (nextProps.note.key !== this.props.note.key) {
|
||||
this.setState({
|
||||
snippetIndex: 0,
|
||||
note: Object.assign({
|
||||
description: ''
|
||||
}, nextProps.note, {
|
||||
snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
|
||||
})
|
||||
}, () => {
|
||||
let { snippets } = this.state.note
|
||||
snippets.forEach((snippet, index) => {
|
||||
this.refs['code-' + index].reload()
|
||||
})
|
||||
this.refs.tags.reset()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
findTitle (value) {
|
||||
let splitted = value.split('\n')
|
||||
let title = null
|
||||
|
||||
for (let i = 0; i < splitted.length; i++) {
|
||||
let trimmedLine = splitted[i].trim()
|
||||
if (trimmedLine.match(/^# .+/)) {
|
||||
title = trimmedLine.substring(1, trimmedLine.length).trim()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (title == null) {
|
||||
for (let i = 0; i < splitted.length; i++) {
|
||||
let trimmedLine = splitted[i].trim()
|
||||
if (trimmedLine.length > 0) {
|
||||
title = trimmedLine
|
||||
break
|
||||
}
|
||||
}
|
||||
if (title == null) {
|
||||
title = ''
|
||||
}
|
||||
}
|
||||
|
||||
return title
|
||||
}
|
||||
|
||||
handleChange (e) {
|
||||
let { note } = this.state
|
||||
|
||||
note.tags = this.refs.tags.value
|
||||
note.description = this.refs.description.value
|
||||
note.updatedAt = new Date()
|
||||
note.title = this.findTitle(note.description)
|
||||
|
||||
this.setState({
|
||||
note
|
||||
}, () => {
|
||||
this.save()
|
||||
})
|
||||
}
|
||||
|
||||
save () {
|
||||
let { note, dispatch } = this.props
|
||||
|
||||
dispatch({
|
||||
type: 'UPDATE_NOTE',
|
||||
note: this.state.note
|
||||
})
|
||||
|
||||
dataApi
|
||||
.updateNote(note.storage, note.folder, note.key, this.state.note)
|
||||
}
|
||||
|
||||
handleFolderChange (e) {
|
||||
|
||||
}
|
||||
|
||||
handleStarButtonClick (e) {
|
||||
let { note } = this.state
|
||||
|
||||
note.isStarred = !note.isStarred
|
||||
|
||||
this.setState({
|
||||
note
|
||||
}, () => {
|
||||
this.save()
|
||||
})
|
||||
}
|
||||
|
||||
exportAsFile () {
|
||||
|
||||
}
|
||||
|
||||
handleShareButtonClick (e) {
|
||||
let menu = new Menu()
|
||||
menu.append(new MenuItem({
|
||||
label: 'Export as a File',
|
||||
click: (e) => this.handlePreferencesButtonClick(e)
|
||||
}))
|
||||
menu.append(new MenuItem({
|
||||
label: 'Export to Web',
|
||||
disabled: true,
|
||||
click: (e) => this.handlePreferencesButtonClick(e)
|
||||
}))
|
||||
menu.popup(remote.getCurrentWindow())
|
||||
}
|
||||
|
||||
handleContextButtonClick (e) {
|
||||
let menu = new Menu()
|
||||
menu.append(new MenuItem({
|
||||
label: 'Delete',
|
||||
click: (e) => this.handlePreferencesButtonClick(e)
|
||||
}))
|
||||
menu.popup(remote.getCurrentWindow())
|
||||
}
|
||||
|
||||
handleTabPlusButtonClick (e) {
|
||||
let { note } = this.state
|
||||
|
||||
note.snippets = note.snippets.concat([{
|
||||
name: '',
|
||||
mode: 'text',
|
||||
content: ''
|
||||
}])
|
||||
|
||||
this.setState({
|
||||
note
|
||||
})
|
||||
}
|
||||
|
||||
handleTabButtonClick (index) {
|
||||
return (e) => {
|
||||
this.setState({
|
||||
snippetIndex: index
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleTabDeleteButtonClick (index) {
|
||||
return (e) => {
|
||||
if (this.state.note.snippets.length > 1) {
|
||||
let snippets = this.state.note.snippets.slice()
|
||||
snippets.splice(index, 1)
|
||||
this.state.note.snippets = snippets
|
||||
this.setState({
|
||||
note: this.state.note
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleNameInputChange (index) {
|
||||
return (e) => {
|
||||
let snippets = this.state.note.snippets.slice()
|
||||
snippets[index].name = e.target.value
|
||||
this.state.note.snippets = snippets
|
||||
|
||||
this.setState({
|
||||
note: this.state.note
|
||||
}, () => {
|
||||
this.save()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleModeButtonClick (index) {
|
||||
return (e) => {
|
||||
let menu = new Menu()
|
||||
modes.forEach((mode) => {
|
||||
menu.append(new MenuItem({
|
||||
label: mode.label,
|
||||
click: (e) => this.handleModeOptionClick(index, mode.name)(e)
|
||||
}))
|
||||
})
|
||||
menu.popup(remote.getCurrentWindow())
|
||||
}
|
||||
}
|
||||
|
||||
handleModeOptionClick (index, name) {
|
||||
return (e) => {
|
||||
let snippets = this.state.note.snippets.slice()
|
||||
snippets[index].mode = name
|
||||
this.state.note.snippets = snippets
|
||||
|
||||
this.setState({
|
||||
note: this.state.note
|
||||
}, () => {
|
||||
this.save()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleCodeChange (index) {
|
||||
return (e) => {
|
||||
let snippets = this.state.note.snippets.slice()
|
||||
snippets[index].content = this.refs['code-' + index].value
|
||||
this.state.note.snippets = snippets
|
||||
this.setState({
|
||||
note: this.state.note
|
||||
}, () => {
|
||||
this.save()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
let { storages, config } = this.props
|
||||
let { note } = this.state
|
||||
|
||||
let editorFontSize = parseInt(config.editor.fontSize, 10)
|
||||
if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
|
||||
let editorIndentSize = parseInt(config.editor.indentSize, 10)
|
||||
if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
|
||||
|
||||
let tabList = note.snippets.map((snippet, index) => {
|
||||
let isActive = this.state.snippetIndex === index
|
||||
return <div styleName={isActive
|
||||
? 'tabList-item--active'
|
||||
: 'tabList-item'
|
||||
}
|
||||
key={index}
|
||||
>
|
||||
<button styleName='tabList-item-button'
|
||||
onClick={(e) => this.handleTabButtonClick(index)(e)}
|
||||
>
|
||||
{snippet.name.trim().length > 0
|
||||
? snippet.name
|
||||
: <span styleName='tabList-item-unnamed'>
|
||||
Unnamed
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
{note.snippets.length > 1 &&
|
||||
<button styleName='tabList-item-deleteButton'
|
||||
onClick={(e) => this.handleTabDeleteButtonClick(index)(e)}
|
||||
>
|
||||
<i className='fa fa-times'/>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
})
|
||||
let viewList = note.snippets.map((snippet, index) => {
|
||||
let isActive = this.state.snippetIndex === index
|
||||
let mode = snippet.mode === 'text'
|
||||
? null
|
||||
: modes.filter((mode) => mode.name === snippet.mode)[0]
|
||||
|
||||
return <div styleName='tabView'
|
||||
key={index}
|
||||
style={{zIndex: isActive ? 5 : 4}}
|
||||
>
|
||||
<div styleName='tabView-top'>
|
||||
<input styleName='tabView-top-name'
|
||||
placeholder='Filename including extensions...'
|
||||
value={snippet.name}
|
||||
onChange={(e) => this.handleNameInputChange(index)(e)}
|
||||
/>
|
||||
<button styleName='tabView-top-mode'
|
||||
onClick={(e) => this.handleModeButtonClick(index)(e)}
|
||||
>
|
||||
{mode == null
|
||||
? 'Select Syntax...'
|
||||
: mode.label
|
||||
}
|
||||
<i className='fa fa-caret-down'/>
|
||||
</button>
|
||||
</div>
|
||||
<CodeEditor styleName='tabView-content'
|
||||
mode={snippet.mode}
|
||||
value={snippet.content}
|
||||
theme={config.editor.theme}
|
||||
fontFamily={config.editor.fontFamily}
|
||||
fontSize={editorFontSize}
|
||||
indentType={config.editor.indentType}
|
||||
indentSize={editorIndentSize}
|
||||
onChange={(e) => this.handleCodeChange(index)(e)}
|
||||
ref={'code-' + index}
|
||||
/>
|
||||
</div>
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='NoteDetail'
|
||||
style={this.props.style}
|
||||
styleName='root'
|
||||
>
|
||||
<div styleName='info'>
|
||||
<div styleName='info-left'>
|
||||
|
||||
<div styleName='info-left-top'>
|
||||
<FolderSelect styleName='info-left-top-folderSelect'
|
||||
value={this.state.note.storage + '-' + this.state.note.folder}
|
||||
ref='folder'
|
||||
storages={storages}
|
||||
onChange={(e) => this.handleFolderChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div styleName='info-left-bottom'>
|
||||
<TagSelect
|
||||
styleName='info-left-bottom-tagSelect'
|
||||
ref='tags'
|
||||
value={this.state.note.tags}
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div styleName='info-right'>
|
||||
<StarButton styleName='info-right-button'
|
||||
onClick={(e) => this.handleStarButtonClick(e)}
|
||||
isActive={note.isStarred}
|
||||
/>
|
||||
<button styleName='info-right-button'
|
||||
onClick={(e) => this.handleShareButtonClick(e)}
|
||||
>
|
||||
<i className='fa fa-share-alt fa-fw'/>
|
||||
</button>
|
||||
<button styleName='info-right-button'
|
||||
onClick={(e) => this.handleContextButtonClick(e)}
|
||||
>
|
||||
<i className='fa fa-ellipsis-v'/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div styleName='body'>
|
||||
<div styleName='body-description'>
|
||||
<textarea styleName='body-description-textarea'
|
||||
style={{
|
||||
fontFamily: config.preview.fontFamily,
|
||||
fontSize: parseInt(config.preview.fontSize, 10)
|
||||
}}
|
||||
ref='description'
|
||||
placeholder='Description...'
|
||||
value={this.state.note.description}
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
</div>
|
||||
<div styleName='tabList'>
|
||||
{tabList}
|
||||
<button styleName='tabList-plusButton'
|
||||
onClick={(e) => this.handleTabPlusButtonClick(e)}
|
||||
>
|
||||
<i className='fa fa-plus'/>
|
||||
</button>
|
||||
</div>
|
||||
{viewList}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
SnippetNoteDetail.propTypes = {
|
||||
dispatch: PropTypes.func,
|
||||
repositories: PropTypes.array,
|
||||
note: PropTypes.shape({
|
||||
|
||||
}),
|
||||
style: PropTypes.shape({
|
||||
left: PropTypes.number
|
||||
}),
|
||||
ignorePreviewPointerEvents: PropTypes.bool
|
||||
}
|
||||
|
||||
export default CSSModules(SnippetNoteDetail, styles)
|
||||
139
browser/main/Detail/SnippetNoteDetail.styl
Normal file
139
browser/main/Detail/SnippetNoteDetail.styl
Normal file
@@ -0,0 +1,139 @@
|
||||
$info-height = 75px
|
||||
|
||||
.root
|
||||
absolute top bottom right
|
||||
border-width 0 0 1px
|
||||
border-style solid
|
||||
border-color $ui-borderColor
|
||||
|
||||
.info
|
||||
absolute top left right
|
||||
height $info-height
|
||||
border-bottom $ui-border
|
||||
background-color $ui-backgroundColor
|
||||
|
||||
.info-left
|
||||
float left
|
||||
padding 0 5px
|
||||
|
||||
.info-left-top
|
||||
height 40px
|
||||
line-height 40px
|
||||
|
||||
.info-left-top-folderSelect
|
||||
display inline-block
|
||||
height 34px
|
||||
width 200px
|
||||
vertical-align middle
|
||||
|
||||
.info-left-bottom
|
||||
height 30px
|
||||
|
||||
.info-left-bottom-tagSelect
|
||||
height 30px
|
||||
line-height 30px
|
||||
|
||||
.info-right
|
||||
float right
|
||||
|
||||
.info-right-button
|
||||
width 34px
|
||||
height 34px
|
||||
border-radius 17px
|
||||
navButtonColor()
|
||||
border $ui-border
|
||||
font-size 14px
|
||||
margin 8px 2px
|
||||
padding 0
|
||||
&:active
|
||||
border-color $ui-button--focus-borderColor
|
||||
&:hover .left-control-newPostButton-tooltip
|
||||
display block
|
||||
&:focus
|
||||
border-color $ui-button--focus-borderColor
|
||||
|
||||
.body
|
||||
absolute bottom left right
|
||||
top $info-height
|
||||
|
||||
.body-description
|
||||
absolute top left right
|
||||
height 80px
|
||||
border-bottom $ui-border
|
||||
|
||||
.body-description-textarea
|
||||
display block
|
||||
height 100%
|
||||
width 100%
|
||||
resize none
|
||||
border none
|
||||
padding 10px
|
||||
|
||||
.tabList
|
||||
absolute left right
|
||||
top 80px
|
||||
height 30px
|
||||
border-bottom $ui-border
|
||||
display flex
|
||||
background-color $ui-backgroundColor
|
||||
.tabList-item
|
||||
position relative
|
||||
flex 1
|
||||
border-right $ui-border
|
||||
&:hover
|
||||
.tabList-item-deleteButton
|
||||
color $ui-inactive-text-color
|
||||
&:hover
|
||||
background-color darken($ui-backgroundColor, 15%)
|
||||
&:active
|
||||
color white
|
||||
background-color $ui-active-color
|
||||
.tabList-item--active
|
||||
@extend .tabList-item
|
||||
.tabList-item-button
|
||||
border-color $brand-color
|
||||
.tabList-item-button
|
||||
width 100%
|
||||
height 100%
|
||||
navButtonColor()
|
||||
border-left 4px solid transparent
|
||||
.tabList-item-deleteButton
|
||||
position absolute
|
||||
top 5px
|
||||
height 20px
|
||||
right 5px
|
||||
width 20px
|
||||
text-align center
|
||||
border none
|
||||
padding 0
|
||||
color transparent
|
||||
background-color transparent
|
||||
border-radius 2px
|
||||
.tabList-plusButton
|
||||
navButtonColor()
|
||||
width 30px
|
||||
.tabView
|
||||
absolute left right bottom
|
||||
top 110px
|
||||
.tabView-top
|
||||
absolute top left right
|
||||
height 30px
|
||||
border-bottom $ui-border
|
||||
display flex
|
||||
.tabView-top-name
|
||||
flex 1
|
||||
border none
|
||||
padding 0 10px
|
||||
font-size 14px
|
||||
.tabView-top-mode
|
||||
width 110px
|
||||
padding 0
|
||||
border none
|
||||
border-left $ui-border
|
||||
colorDefaultButton()
|
||||
color $ui-inactive-text-color
|
||||
&:hover
|
||||
color $ui-text-color
|
||||
.tabView-content
|
||||
absolute left right bottom
|
||||
top 30px
|
||||
@@ -2,7 +2,8 @@ import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './Detail.styl'
|
||||
import _ from 'lodash'
|
||||
import NoteDetail from './NoteDetail'
|
||||
import MarkdownNoteDetail from './MarkdownNoteDetail'
|
||||
import SnippetNoteDetail from './SnippetNoteDetail'
|
||||
|
||||
const electron = require('electron')
|
||||
|
||||
@@ -13,7 +14,7 @@ class Detail extends React.Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
let { storages, location, notes, config } = this.props
|
||||
let { location, notes, config } = this.props
|
||||
let note = null
|
||||
if (location.query.key != null) {
|
||||
let splitted = location.query.key.split('-')
|
||||
@@ -41,8 +42,23 @@ class Detail extends React.Component {
|
||||
)
|
||||
}
|
||||
|
||||
if (note.type === 'SNIPPET_NOTE') {
|
||||
return (
|
||||
<SnippetNoteDetail
|
||||
note={note}
|
||||
config={config}
|
||||
{..._.pick(this.props, [
|
||||
'dispatch',
|
||||
'storages',
|
||||
'style',
|
||||
'ignorePreviewPointerEvents'
|
||||
])}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<NoteDetail
|
||||
<MarkdownNoteDetail
|
||||
note={note}
|
||||
config={config}
|
||||
{..._.pick(this.props, [
|
||||
|
||||
Reference in New Issue
Block a user