public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 01:36:22 +00:00
Code Issues Releases Wiki Activity

Merge pull request #15 from sota1235/feature-design_renewal_rebase

Browse Source 
Design renewal (v0.8.0)
This commit is contained in:
Sota Sugiura
2017-01-03 17:57:10 +09:00
committed by GitHub
parent 7811039651 cba743c895
commit 042d059d53
81 changed files with 1536 additions and 1580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
browser/components/MarkdownPreview.js
View File

@@ -5,7 +5,7 @@ import CodeMirror from 'codemirror'
import consts from 'browser/lib/consts'
import Raphael from 'raphael'
import flowchart from 'flowchart'
import SequenceDiagram from 'sequence-diagram'
import SequenceDiagram from 'js-sequence-diagrams'
function decodeHTMLEntities (text) {
var entities = [
@@ -54,6 +54,20 @@ code {
${lineNumber && 'display: block !important;'}
font-family: ${codeBlockFontFamily.join(', ')};
}
h1, h2 {
border: none;
}
h1 {
padding-bottom: 4px;
margin: 1em 0 8px;
}
h2 {
padding-bottom: 0.2em;
margin: 1em 0 0.37em;
}
`
}

100
browser/components/NoteItem.js Normal file
View File

@@ -0,0 +1,100 @@
/**
* @fileoverview Note item component.
*/
import React, { PropTypes } from 'react'
import { isArray } from 'lodash'
import CSSModules from 'browser/lib/CSSModules'
import styles from './NoteItem.styl'
/**
* @description Tag element component.
* @param {string} tagName
* @return {React.Component}
*/
const TagElement = ({ tagName }) => (
<span styleName='item-bottom-tagList-item' key={tagName}>
{tagName}
</span>
)
/**
* @description Tag element list component.
* @param {Array|null} tags
* @return {React.Component}
*/
const TagElementList = (tags) => {
if (!isArray(tags)) {
return []
}
const tagElements = tags.map(tag => (
TagElement({tagName: tag})
))
return tagElements
}
/**
* @description Note item component when using normal display mode.
* @param {boolean} isActive
* @param {Object} note
* @param {Function} handleNoteClick
* @param {Function} handleNoteContextMenu
* @param {string} dateDisplay
*/
const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu }) => (
<div styleName={isActive
? 'item--active'
: 'item'
}
key={`${note.storage}-${note.key}`}
onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
>
<div styleName='item-wrapper'>
<div styleName='item-bottom-time'>{dateDisplay}</div>
<div styleName='item-title'>
{note.title.trim().length > 0
? note.title
: <span styleName='item-title-empty'>Empty</span>
}
</div>
<div styleName='item-bottom'>
<div styleName='item-bottom-tagList'>
{note.tags.length > 0
? TagElementList(note.tags)
: ''
}
</div>
</div>
{note.type === 'SNIPPET_NOTE'
? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
: <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
}
{note.isStarred ?
<i styleName='item-star' className='fa fa-star' /> : ''
}
</div>
</div>
)
NoteItem.propTypes = {
isActive: PropTypes.bool.isRequired,
dateDisplay: PropTypes.string.isRequired,
note: PropTypes.shape({
storage: PropTypes.string.isRequired,
key: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
title: PropTypes.string.isrequired,
tags: PropTypes.array,
isStarred: PropTypes.bool.isRequired,
}),
handleNoteClick: PropTypes.func.isRequired,
handleNoteContextMenu: PropTypes.func.isRequired,
}
export default CSSModules(NoteItem, styles)

168
browser/components/NoteItem.styl Normal file
View File

@@ -0,0 +1,168 @@
$control-height = 30px
.root
absolute left bottom
top $topBar-height - 1
background-color $ui-noteList-backgroundColor
.item
position relative
padding 0 25px
user-select none
cursor pointer
background-color $ui-noteList-backgroundColor
transition background-color 0.15s
&:hover
background-color alpha($ui-active-color, 20%)
&:active
background-color $ui-active-color
color white
.item-title
.item-title-empty
.item-bottom-tagList-empty
.item-bottom-time
.item-title-icon
color white
.item-bottom-tagList-item
background-color transparent
color white
.item-wrapper
padding 20px 0
border-bottom $ui-border
.item--active
@extend .item
background-color $ui-active-color
color white
.item-title
.item-title-empty
.item-bottom-tagList-empty
.item-bottom-time
.item-title-icon
color white
.item-bottom-tagList-item
background-color transparent
color white
.item-wrapper
border-color transparent
&:hover
background-color $ui-active-color
.item-title
font-size 14px
height 40px
box-sizing border-box
line-height 24px
padding-top 5px
padding-bottom 20px
overflow ellipsis
color $ui-text-color
.item-title-icon
position absolute
top 20px
right 25px
font-size 14px
color $ui-inactive-text-color
.item-title-empty
font-weight normal
color $ui-inactive-text-color
.item-bottom
position relative
bottom 0px
margin-top 2px
height 20px
font-size 12px
line-height 20px
overflow ellipsis
display flex
.item-bottom-tagList
flex 1
overflow ellipsis
line-height 20px
color #FFFFFF
.item-bottom-tagList-item
font-size 12px
margin-right 8px
padding 0 10px
height 20px
box-sizing border-box
border-radius 20px
vertical-align middle
background-color $ui-tag-backgroundColor
color #FFFFFF
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle
font-size 10px
margin-left 5px
.item-bottom-time
color $ui-inactive-text-color
font-size 12px
.item-star
position absolute
top 20px
right 29px
width 34px
height 34px
color $ui-favorite-star-button-color
font-size 14px
padding 0
border-radius 17px
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
.item
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
background-color $ui-active-color
&:hover
background-color alpha($ui-active-color, 20%)
.item-wrapper
border-color $ui-dark-borderColor
.item--active
@extend .item
border-color $ui-dark-borderColor
background-color $ui-active-color
.item-wrapper
border-color transparent
.item-title
color white
.item-bottom-tagList-item
background-color transparent
color white
.item-bottom-tagList-empty
color white
&:hover
background-color $ui-active-color
.item-title
color $ui-dark-text-color
.item-title-icon
color $ui-darkinactive-text-color
.item-title-empty
color $ui-dark-inactive-text-color
.item-bottom-tagList-item
background-color $ui-dark-tag-backgroundColor
color $ui-dark-text-color
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle

49
browser/components/NoteItemSimple.js Normal file
View File

@@ -0,0 +1,49 @@
/**
* @fileoverview Note item component with simple display mode.
*/
import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './NoteItemSimple.styl'
/**
* @description Note item component when using simple display mode.
* @param {boolean} isActive
* @param {Object} note
* @param {Function} handleNoteClick
* @param {Function} handleNoteContextMenu
*/
const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
<div styleName={isActive
? 'item-simple--active'
: 'item-simple'
}
key={`${note.storage}-${note.key}`}
onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
>
<div styleName='item-simple-title'>
{note.type === 'SNIPPET_NOTE'
? <i styleName='item-simple-title-icon' className='fa fa-fw fa-code' />
: <i styleName='item-simple-title-icon' className='fa fa-fw fa-file-text-o' />
}
{note.title.trim().length > 0
? note.title
: <span styleName='item-simple-title-empty'>Empty</span>
}
</div>
</div>
)
NoteItemSimple.propTypes = {
isActive: PropTypes.bool.isRequired,
note: PropTypes.shape({
storage: PropTypes.string.isRequired,
key: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
title: PropTypes.string.isrequired,
}),
handleNoteClick: PropTypes.func.isRequired,
handleNoteContextMenu: PropTypes.func.isRequired,
}
export default CSSModules(NoteItemSimple, styles)

89
browser/components/NoteItemSimple.styl Normal file
View File

@@ -0,0 +1,89 @@
$control-height = 30px
.root
absolute left bottom
top $topBar-height - 1
background-color $ui-noteList-backgroundColor
.item-simple
position relative
padding 0 25px
user-select none
cursor pointer
background-color $ui-noteList-backgroundColor
transition background-color 0.15s
&:hover
background-color alpha($ui-active-color, 20%)
&:active
background-color $ui-active-color
color white
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
color white
.item-simple--active
@extend .item-simple
background-color $ui-active-color
color white
.item-simple-title
.item-simple-title-empty
border-color transparent
color white
.item-simple-title-icon
color white
&:hover
background-color $ui-active-color
.item-simple-title
font-size 14px
height 40px
box-sizing border-box
line-height 24px
padding-top 8px
overflow ellipsis
color $ui-text-color
border-bottom $ui-border
.item-simple-title-icon
font-size 12px
color $ui-inactive-text-color
padding-right 6px
.item-simple-title-empty
font-weight normal
color $ui-inactive-text-color
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
.item-simple
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
background-color $ui-active-color
&:hover
background-color alpha($ui-active-color, 20%)
.item-simple--active
@extend .item-simple
border-color $ui-dark-borderColor
background-color $ui-active-color
.item-simple-title
.item-simple-title-empty
color white
border-color transparent
&:hover
background-color $ui-active-color
.item-simple-title
color $ui-dark-text-color
border-color $ui-dark-borderColor
.item-simple-title-icon
color $ui-darkinactive-text-color
.item-simple-title-empty
color $ui-dark-inactive-text-color

44
browser/components/SideNavFilter.js Normal file
View File

@@ -0,0 +1,44 @@
/**
* @fileoverview Filter for all notes.
*/
import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './SideNavFilter.styl'
/**
* @param {boolean} isFolded
* @param {boolean} isHomeActive
* @param {Function} handleAllNotesButtonClick
* @param {boolean} isStarredActive
* @param {Function} handleStarredButtonClick
* @return {React.Component}
*/
const SideNavFilter = ({
isFolded, isHomeActive, handleAllNotesButtonClick,
isStarredActive, handleStarredButtonClick
}) => (
<div styleName={ isFolded ? 'menu--folded' : 'menu' }>
<button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
onClick={handleAllNotesButtonClick}
>
<i className='fa fa-book fa-fw'/>
<span styleName='menu-button-label'>All Notes</span>
</button>
<button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
onClick={handleStarredButtonClick}
>
<i className='fa fa-star fa-fw'/>
<span styleName='menu-button-label'>Starred</span>
</button>
</div>
)
SideNavFilter.propTypes = {
isFolded: PropTypes.bool,
isHomeActive: PropTypes.bool.isRequired,
handleAllNotesButtonClick: PropTypes.func.isRequired,
isStarredActive: PropTypes.bool.isRequired,
handleStarredButtonClick: PropTypes.func.isRequired,
}
export default CSSModules(SideNavFilter, styles)

58
browser/components/SideNavFilter.styl Normal file
View File

@@ -0,0 +1,58 @@
.menu
margin-bottom 30px
.menu-button
navButtonColor()
height 32px
padding 0 15px
font-size 14px
width 100%
text-align left
overflow ellipsis
.menu-button--active
@extend .menu-button
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
&:hover
background-color $ui-button--active-backgroundColor
.menu-button-label
margin-left 5px
.menu--folded
@extend .menu
.menu-button, .menu-button--active
text-align center
&:hover .menu-button-label
transition opacity 0.15s
opacity 1
.menu-button-label
position fixed
display inline-block
height 32px
left 44px
padding 0 10px
margin-top -8px
margin-left 0
overflow ellipsis
background-color $ui-tooltip-backgroundColor
z-index 10
color white
line-height 32px
border-top-right-radius 2px
border-bottom-right-radius 2px
pointer-events none
opacity 0
font-size 12px
body[data-theme="dark"]
.menu-button
navDarkButtonColor()
.menu-button--active
@extend .menu-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
&:hover
background-color $ui-dark-button--active-backgroundColor

0
browser/main/Detail/SnippetTab.js → browser/components/SnippetTab.js
View File

15
browser/main/Detail/SnippetTab.styl → browser/components/SnippetTab.styl
View File

@@ -2,9 +2,6 @@
position relative
flex 1
overflow hidden
border-right $ui-border
&:last-child
border-right none
&:hover
.deleteButton
color $ui-inactive-text-color
@@ -13,11 +10,11 @@
&:active
color white
background-color $ui-active-color
.root--active
@extend .root
min-width 100px
.button
border-color $brand-color
border-bottom $ui-border
.button
width 100%
@@ -31,8 +28,6 @@
border-left 4px solid transparent
&:hover
background-color $ui-button--hover-backgroundColor
&:active, &:active:hover
border-color $brand-color
.deleteButton
position absolute
@@ -71,8 +66,6 @@ body[data-theme="dark"]
.root--active
color $ui-dark-text-color
border-color $ui-dark-borderColor
.button
border-color $brand-color
&:hover
background-color $ui-dark-button--hover-backgroundColor
.deleteButton
@@ -92,10 +85,6 @@ body[data-theme="dark"]
&:hover
color white
background-color $ui-dark-button--hover-backgroundColor
&:active
color $ui-dark-button--active-color
&:active, &:active:hover
color $ui-dark-button--active-color
.input
background-color $ui-dark-button--hover-backgroundColor

58
browser/components/StorageItem.js Normal file
View File

@@ -0,0 +1,58 @@
/**
* @fileoverview Micro component for showing storage.
*/
import React, { PropTypes } from 'react'
import styles from './StorageItem.styl'
import CSSModules from 'browser/lib/CSSModules'
import { isNumber } from 'lodash'
/**
* @param {boolean} isActive
* @param {Function} handleButtonClick
* @param {Function} handleContextMenu
* @param {string} folderName
* @param {string} folderColor
* @param {boolean} isFolded
* @param {number} noteCount
* @return {React.Component}
*/
const StorageItem = ({
isActive, handleButtonClick, handleContextMenu, folderName,
folderColor, isFolded, noteCount
}) => (
<button styleName={isActive
? 'folderList-item--active'
: 'folderList-item'
}
onClick={handleButtonClick}
onContextMenu={handleContextMenu}
>
<span styleName={isFolded ?
'folderList-item-name--folded' : 'folderList-item-name'
}
style={{borderColor: folderColor}}
>
{isFolded ? folderName.substring(0, 1) : folderName}
</span>
{(!isFolded && isNumber(noteCount)) &&
<span styleName='folderList-item-noteCount'>{noteCount}</span>
}
{isFolded &&
<span styleName='folderList-item-tooltip'>
{folderName}
</span>
}
</button>
)
StorageItem.propTypes = {
isActive: PropTypes.bool.isRequired,
handleButtonClick: PropTypes.func,
handleContextMenu: PropTypes.func,
folderName: PropTypes.string.isRequired,
folderColor: PropTypes.string,
isFolded: PropTypes.bool.isRequired,
noteCount: PropTypes.number,
}
export default CSSModules(StorageItem, styles)

68
browser/components/StorageItem.styl Normal file
View File

@@ -0,0 +1,68 @@
.root
width 100%
user-select none
.folderList-item
display flex
width 100%
height 26px
background-color transparent
color $ui-inactive-text-color
padding 0
margin-bottom 5px
text-align left
border none
overflow ellipsis
font-size 14px
&:first-child
margin-top 0
&:hover
background-color $ui-button--hover-backgroundColor
&:active
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
.folderList-item--active
@extend .folderList-item
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
&:hover
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
.folderList-item-name
display block
flex 1
padding 0 30px
height 26px
line-height 26px
border-width 0 0 0 3px
border-style solid
border-color transparent
.folderList-item-noteCount
float right
line-height 26px
padding-right 15px
font-size 12px
.folderList-item-tooltip
tooltip()
position fixed
padding 0 10px
left 44px
z-index 10
pointer-events none
opacity 0
border-top-right-radius 2px
border-bottom-right-radius 2px
height 26px
line-height 26px
.folderList-item:hover, .folderList-item--active:hover
.folderList-item-tooltip
opacity 1
.folderList-item-name--folded
@extend .folderList-item-name
padding-left 14px

4
browser/components/markdown.styl
View File

@@ -55,6 +55,7 @@ body
line-height 1.6
overflow-x hidden
user-select all
background-color $ui-noteDetail-backgroundColor
.katex
font 400 1.2em 'KaTeX_Main'
line-height 1.2em
@@ -273,13 +274,14 @@ table
themeDarkBackground = darken(#21252B, 10%)
themeDarkText = #DDDDDD
themeDarkBorder = lighten(themeDarkBackground, 20%)
themeDarkPreview = #282C34
themeDarkPreview = $ui-dark-noteDetail-backgroundColor
themeDarkTableOdd = themeDarkPreview
themeDarkTableEven = darken(themeDarkPreview, 10%)
themeDarkTableHead = themeDarkTableEven
themeDarkTableBorder = themeDarkBorder
themeDarkModalButtonDefault = themeDarkPreview
themeDarkModalButtonDanger = #BF360C
body[data-theme="dark"]
color themeDarkText
border-color themeDarkBorder

14
browser/finder/FinderMain.styl
View File

@@ -21,6 +21,7 @@ $list-width = 250px
outline none
text-align center
background-color transparent
.result
absolute left right bottom
top $search-height
@@ -32,7 +33,7 @@ $list-width = 250px
background-color $ui-backgroundColor
.result-nav-filter
margin-bottom 5px
margin-bottom 10px
.result-nav-filter-option
height 25px
@@ -62,7 +63,7 @@ $list-width = 250px
.result-nav-storageList
absolute bottom left right
top 80px + 32px + 10px
top 80px + 32px + 10px + 10px
overflow-y auto
.result-list
@@ -70,15 +71,15 @@ $list-width = 250px
absolute top bottom
left $nav-width
width $list-width
border-width 0 1px
border-style solid
border-color $ui-borderColor
box-sizing border-box
overflow-y auto
box-shadow 2px 0 15px -8px #b1b1b1
z-index 1
.result-detail
absolute top bottom right
left $nav-width + $list-width
background-color $ui-noteDetail-backgroundColor
body[data-theme="dark"]
.root
@@ -104,7 +105,10 @@ body[data-theme="dark"]
.result-list
border-color $ui-dark-borderColor
box-shadow none
top 0
.result-detail
absolute top bottom right
left $nav-width + $list-width
background-color $ui-dark-noteDetail-backgroundColor

82
browser/finder/NoteDetail.styl
View File

@@ -1,12 +1,16 @@
@import('../main/Detail/DetailVars.styl')
.root
absolute top bottom left right
width 100%
left $note-detail-left-margin
right $note-detail-right-margin
height 100%
width 365px
background-color $ui-noteDetail-backgroundColor
.description
absolute top left right
height 80px
border-bottom $ui-border
box-sizing border-box
.description-textarea
@@ -18,52 +22,43 @@
padding 10px
line-height 1.6
box-sizing border-box
background-color $ui-noteDetail-backgroundColor
.tabList
absolute left right
top 80px
box-sizing border-box
height 30px
border-bottom $ui-border
display flex
background-color $ui-backgroundColor
background-color $ui-noteDetail-backgroundColor
.tabList-item
position relative
flex 1
border-right $ui-border
overflow hidden
&:hover
background-color $ui-button--hover-backgroundColorg
.tabList-item--active
@extend .tabList-item
.tabList-item-button
border-color $brand-color
border-bottom $ui-border
.tabList-item-button
width 100%
height 29px
navButtonColor()
outline none
border-left 4px solid transparent
.tabList-item-deleteButton
position absolute
top 5px
height 20px
right 5px
width 20px
text-align center
overflow ellipsis
text-align left
padding-right 30px
padding-left 10px
border none
padding 0
color transparent
background-color transparent
border-radius 2px
.tabList-plusButton
navButtonColor()
width 30px
transition 0.15s
&:hover
background-color $ui-button--hover-backgroundColor
.tabView
absolute left right bottom
top 110px
top 130px
.tabView-content
absolute top left right bottom
@@ -72,38 +67,31 @@
width 100%
body[data-theme="dark"]
.root
background-color $ui-dark-noteDetail-backgroundColor
.description
border-color $ui-dark-borderColor
background-color $ui-dark-noteDetail-backgroundColor
.description-textarea
background-color $ui-dark-button--hover-backgroundColor
background-color $ui-dark-noteDetail-backgroundColor
color white
.tabList
background-color $ui-button--active-backgroundColor
border-bottom-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
background-color $ui-dark-noteDetail-backgroundColor
.tabList-item
border-color $ui-dark-borderColor
&:hover
background-color $ui-dark-button--hover-backgroundColor
.tabList-item--active
border-color $ui-dark-borderColor
.tabList-item-button
border-color $brand-color
.tabList-item-button
navDarkButtonColor()
border-left 4px solid transparent
.tabList-plusButton
navDarkButtonColor()
.tabView-top
border-color $ui-dark-borderColor
.tabView-top-name
border-color $ui-dark-borderColor
.tabList-item-button
border none
color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor
.tabView-top-mode
border-color $ui-dark-borderColor
background-color $dark-default-button-background
color $ui-dark-inactive-text-color
background-color transparent
transition color background-color 0.15s
border-left 4px solid transparent
&:hover
color white
background-color $ui-dark-button--hover-backgroundColor

85
browser/finder/NoteItem.js
View File

@@ -1,85 +0,0 @@
import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './NoteItem.styl'
import moment from 'moment'
import _ from 'lodash'
class NoteItem extends React.Component {
constructor (props) {
super(props)
this.state = {
}
}
handleClick (e) {
this.props.onClick(e)
}
render () {
let { note, folder, storage, isActive } = this.props
let tagList = _.isArray(note.tags)
? note.tags.map((tag) => {
return (
<span styleName='bottom-tagList-item'
key={tag}>
{tag}
</span>
)
})
: []
return (
<div styleName={isActive
? 'root--active'
: 'root'
}
key={note.storage + '-' + note.key}
onClick={(e) => this.handleClick(e)}
>
<div styleName='info'>
<div styleName='info-left'>
<span styleName='info-left-folder'
style={{borderColor: folder.color}}
>
{folder.name}
<span styleName='info-left-folder-surfix'>in {storage.name}</span>
</span>
</div>
</div>
<div styleName='title'>
{note.type === 'SNIPPET_NOTE'
? <i styleName='title-icon' className='fa fa-fw fa-code' />
: <i styleName='title-icon' className='fa fa-fw fa-file-text-o' />
}
{note.title.trim().length > 0
? note.title
: <span styleName='title-empty'>Empty</span>
}
</div>
<div styleName='bottom'>
<i styleName='bottom-tagIcon'
className='fa fa-tags fa-fw'
/>
<div styleName='bottom-tagList'>
{tagList.length > 0
? tagList
: <span styleName='bottom-tagList-empty'>Not tagged yet</span>
}
</div>
<div styleName='bottom-time'>
{moment(note.updatedAt).fromNow()}
</div>
</div>
</div>
)
}
}
NoteItem.propTypes = {
}
export default CSSModules(NoteItem, styles)

179
browser/finder/NoteItem.styl
View File

@@ -1,179 +0,0 @@
.root
position relative
border-bottom $ui-border
padding 2px 5px
user-select none
cursor pointer
transition background-color 0.15s
&:hover
background-color alpha($ui-active-color, 20%)
.root--active
@extend .root
background-color $ui-active-color
&:hover
background-color $ui-active-color
color white
.info-left-folder
.info-left-folder-surfix
.title
.title-icon
.title-empty
.bottom-tagIcon
.bottom-tagList-item
.bottom-tagList-empty
.bottom-time
color white
.bottom-tagList-item
color white
background-color transparent
.border
absolute top bottom left right
border-style solid
border-width 2px
border-color transparent
transition 0.15s
.info
height 20px
clearfix()
font-size 12px
color $ui-inactive-text-color
line-height 20px
overflow-y hidden
.info-left
float left
overflow ellipsis
.info-left-folder
border-left 4px solid transparent
padding 2px 5px
color $ui-text-color
.info-left-folder-surfix
font-size 10px
margin-left 5px
color $ui-inactive-text-color
.info-right
float right
.title
height 24px
box-sizing border-box
line-height 24px
height 20px
line-height 20px
padding 0 5px 0 0
overflow ellipsis
color $ui-text-color
.title-icon
font-size 12px
color $ui-inactive-text-color
padding-right 3px
.title-empty
font-weight normal
color $ui-inactive-text-color
.bottom
margin-top 2px
height 20px
font-size 12px
line-height 20px
overflow ellipsis
display flex
.bottom-tagIcon
vertical-align middle
color $ui-button-color
height 20px
line-height 20px
.bottom-tagList
flex 1
overflow ellipsis
line-height 20px
.bottom-tagList-item
margin 0 4px
padding 0 4px
height 20px
box-sizing border-box
border-radius 3px
vertical-align middle
border-style solid
border-color $ui-button--focus-borderColor
border-width 0 0 0 3px
background-color $ui-backgroundColor
color $ui-text-color
transition 0.15s
.bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle
font-size 10px
margin-left 5px
.bottom-time
color $ui-inactive-text-color
margin-left 5px
font-size 10px
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
.root--active
@extend .root
border-color $ui-dark-borderColor
&:hover
background-color $ui-active-color
.info-left-folder
.info-left-folder-surfix
.title
.title-icon
.title-empty
.bottom-tagIcon
.bottom-tagList-item
.bottom-tagList-empty
.bottom-time
color white
.bottom-tagList-item
color white
background-color transparent
.info
color $ui-dark-inactive-text-color
.info-left-folder
color $ui-dark-text-color
.info-left-folder-surfix
color $ui-dark-inactive-text-color
.title
color $ui-dark-text-color
.title-icon
color $ui-dark-inactive-text-color
.title-empty
color $ui-dark-inactive-text-color
.tagList-empty
color $ui-dark-inactive-text-color
.bottom-tagIcon
color $ui-dark-button-color
.bottom-tagList-item
color $ui-dark-text-color
background-color $ui-dark-backgroundColor
.bottom-tagList-empty
color $ui-dark-inactive-text-color
.bottom-time
color $ui-dark-inactive-text-color

21
browser/finder/NoteList.js
View File

@@ -1,6 +1,6 @@
import React, { PropTypes } from 'react'
import NoteItem from './NoteItem'
import _ from 'lodash'
import NoteItem from 'browser/components/NoteItem'
import moment from 'moment'
class NoteList extends React.Component {
constructor (props) {
@@ -59,16 +59,19 @@ class NoteList extends React.Component {
let notesList = notes
.slice(0, 10 + 10 * this.state.range)
.map((note, _index) => {
let storage = storageMap[note.storage]
let folder = _.find(storage.folders, {key: note.folder})
const isActive = (index === _index)
const key = `${note.storage}-${note.key}`
const dateDisplay = moment(note.updatedAt).fromNow()
return (
<NoteItem
isActive={isActive}
note={note}
key={`${note.storage}-${note.key}`}
storage={storage}
folder={folder}
isActive={index === _index}
onClick={(e) => this.props.handleNoteClick(e, _index)}
dateDisplay={dateDisplay}
key={key}
handleNoteClick={(e) => this.props.handleNoteClick(e, _index)}
handleNoteContextMenu={() => ''}
/>
)
})

26
browser/finder/StorageSection.js
View File

@@ -1,6 +1,7 @@
import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './StorageSection.styl'
import StorageItem from 'browser/components/StorageItem'
class StorageSection extends React.Component {
constructor (props) {
@@ -30,20 +31,17 @@ class StorageSection extends React.Component {
render () {
let { storage, filter } = this.props
let folderList = storage.folders
.map((folder) => {
return (
<button styleName={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key
? 'folderList-item--active'
: 'folderList-item'
}
style={{borderColor: folder.color}}
key={folder.key}
onClick={(e) => this.handleFolderClick(e, folder)}
>
{folder.name}
</button>
)
})
.map(folder => (
<StorageItem
key={folder.key}
isActive={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key}
handleButtonClick={(e) => this.handleFolderClick(e, folder)}
folderName={folder.name}
folderColor={folder.color}
isFolded={false}
/>
))
return (
<div styleName='root'>
<div styleName='header'>

19
browser/finder/index.js
View File

@@ -9,6 +9,7 @@ import styles from './FinderMain.styl'
import StorageSection from './StorageSection'
import NoteList from './NoteList'
import NoteDetail from './NoteDetail'
import SideNavFilter from 'browser/components/SideNavFilter'
require('!!style!css!stylus?sourceMap!../main/global.styl')
require('../lib/customMeta')
@@ -307,18 +308,12 @@ class FinderMain extends React.Component {
/> Only Markdown</label>
</div>
</div>
<button styleName={filter.type === 'ALL'
? 'result-nav-menu--active'
: 'result-nav-menu'
}
onClick={(e) => this.handleAllNotesButtonClick(e)}
><i className='fa fa-files-o fa-fw'/> All Notes</button>
<button styleName={filter.type === 'STARRED'
? 'result-nav-menu--active'
: 'result-nav-menu'
}
onClick={(e) => this.handleStarredButtonClick(e)}
><i className='fa fa-star fa-fw'/> Starred</button>
<SideNavFilter
isHomeActive={filter.type === 'ALL'}
handleAllNotesButtonClick={(e) => this.handleAllNotesButtonClick(e)}
isStarredActive={filter.type === 'STARRED'}
handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
/>
<div styleName='result-nav-storageList'>
{storageList}
</div>

18
browser/lib/date-formatter.js Normal file
View File

@@ -0,0 +1,18 @@
/**
* @fileoverview Formatting date string.
*/
import moment from 'moment';
/**
* @description Return date string. For example, 'Sep.9, 2016 12:00'.
* @param {mixed}
* @return {string}
*/
export function getLastUpdated(date) {
const m = moment(date)
if (!m.isValid()) {
throw Error('Invalid argument.');
}
return m.format('MMM D, gggg H:mm')
}

9
browser/main/Detail/DetailVars.styl Normal file
View File

@@ -0,0 +1,9 @@
/**
* Varibales for note detail space.
*/
// Margin on the left side and the right side for NoteDetail component.
$note-detail-left-margin = 25px
$note-detail-right-margin = 25px
$note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset

27
browser/main/Detail/LastUpdatedString.js Normal file
View File

@@ -0,0 +1,27 @@
/**
* @fileoverview Component for show updated date of the detail.
*/
import React, { PropTypes } from 'react'
import { getLastUpdated } from 'browser/lib/date-formatter'
import CSSModules from 'browser/lib/CSSModules'
import styles from './LastUpdatedString.styl'
const LastUpdatedString = ({ date }) => {
let text = ''
try {
text = `Last updated at ${getLastUpdated(date)}`
} catch (e) {
text = ''
}
return (
<p styleName='info-right-date'>{text}</p>
)
}
LastUpdatedString.propTypes = {
date: PropTypes.string,
}
export default CSSModules(LastUpdatedString, styles)

8
browser/main/Detail/LastUpdatedString.styl Normal file
View File

@@ -0,0 +1,8 @@
.info-right-date
display inline
font-size 11px
color $ui-button-color
body[data-theme="dark"]
.info-right-date
color $ui-dark-button-color

56
browser/main/Detail/MarkdownNoteDetail.js
View File

@@ -4,7 +4,7 @@ import styles from './MarkdownNoteDetail.styl'
import MarkdownEditor from 'browser/components/MarkdownEditor'
import StarButton from './StarButton'
import TagSelect from './TagSelect'
import FolderSelect from './FolderSelect'
import LastUpdatedString from './LastUpdatedString'
import dataApi from 'browser/main/lib/dataApi'
import { hashHistory } from 'react-router'
import ee from 'browser/main/lib/eventEmitter'
@@ -166,20 +166,6 @@ class MarkdownNoteDetail extends React.Component {
}
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({
@@ -229,44 +215,22 @@ class MarkdownNoteDetail extends React.Component {
>
<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'
data={data}
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'
<StarButton styleName='info-left-button'
onClick={(e) => this.handleStarButtonClick(e)}
isActive={note.isStarred}
/>
<button styleName='info-right-button'
onClick={(e) => this.handleShareButtonClick(e)}
disabled
>
<i className='fa fa-share-alt fa-fw' />
<span styleName='info-right-button-tooltip'
style={{right: 20}}
>Share Note</span>
</button>
<TagSelect
ref='tags'
value={this.state.note.tags}
onChange={(e) => this.handleChange(e)}
/>
</div>
<div styleName='info-right'>
<LastUpdatedString date={note.updatedAt} />
<button styleName='info-right-button'
onClick={(e) => this.handleContextButtonClick(e)}
>
<i className='fa fa-ellipsis-v' />
<span styleName='info-right-button-tooltip'
style={{right: 5}}
>More Options</span>
</button>
</div>
</div>

94
browser/main/Detail/MarkdownNoteDetail.styl
View File

@@ -1,68 +1,19 @@
$info-height = 75px
@import('NoteDetailInfo')
@import('DetailVars')
.root
absolute top right bottom
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 .info-right-button-tooltip
opacity 1
&:focus
border-color $ui-button--focus-borderColor
.info-right-button-tooltip
tooltip()
position fixed
top 45px
padding 5px
opacity 0
border-radius 2px
background-color $ui-noteDetail-backgroundColor
box-shadow $note-detail-box-shadow
.body
absolute left right
top $info-height
left $note-detail-left-margin
right $note-detail-right-margin
top $info-height + $info-margin-under-border
bottom $statusBar-height
.body-noteEditor
@@ -71,32 +22,5 @@ $info-height = 75px
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
.info
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.info-delete
color $ui-dark-text-color
.info-delete-confirmButton
colorDarkDangerButton()
color $ui-dark-text-color
.info-delete-cancelButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor
color $ui-dark-text-color
.info-right-button
navDarkButtonColor()
border-color $ui-dark-borderColor
&:active
border-color $ui-dark-button--focus-borderColor
&:hover .info-right-button-tooltip
opacity 1
&:focus
border-color $ui-button--focus-borderColor
.info-right-button-tooltip
darkTooltip()
background-color $ui-dark-noteDetail-backgroundColor
box-shadow none

85
browser/main/Detail/NoteDetailInfo.styl Normal file
View File

@@ -0,0 +1,85 @@
@import('DetailVars')
$info-height = 60px
$info-margin-under-border = 27px
.info
absolute top left right
left $note-detail-left-margin
right $note-detail-right-margin
height $info-height
border-bottom $ui-border
background-color $ui-noteDetail-backgroundColor
.info-left
float left
padding 0 5px
margin 0px 2px
.info-left-button
width 34px
height 34px
navButtonColor()
color $ui-favorite-star-button-color
font-size 14px
margin 13px 2px
padding 0
border-radius 17px
&:hover .info-right-button-tooltip
opacity 1
&:focus
border-color $ui-favorite-star-button-color
&:active, &:active:hover
background-color $ui-favorite-star-button-color
color $ui-button--active-color
.info-right
position absolute
right 0
top 0
background $ui-noteDetail-backgroundColor
bottom 1px
padding-left 30px
.info-right-button
width 34px
height 34px
border-radius 17px
font-size 14px
margin 13px 7px
padding 0
border none
color $ui-button-color
background-color transparent
&:hover
opacity 1
background-color $ui-button--hover-backgroundColor
body[data-theme="dark"]
.info
border-color $ui-dark-borderColor
background-color $ui-dark-noteDetail-backgroundColor
.info-delete
color $ui-dark-text-color
.info-delete-confirmButton
colorDarkDangerButton()
color $ui-dark-text-color
.info-delete-cancelButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor
color $ui-dark-text-color
.info-right
background-color $ui-dark-noteDetail-backgroundColor
.info-right-button
navDarkButtonColor()
border-color $ui-dark-borderColor
&:active
border-color $ui-dark-button--focus-borderColor
&:focus
border-color $ui-button--focus-borderColor

59
browser/main/Detail/SnippetNoteDetail.js
View File

@@ -5,12 +5,12 @@ import CodeEditor from 'browser/components/CodeEditor'
import MarkdownEditor from 'browser/components/MarkdownEditor'
import StarButton from './StarButton'
import TagSelect from './TagSelect'
import FolderSelect from './FolderSelect'
import LastUpdatedString from './LastUpdatedString'
import dataApi from 'browser/main/lib/dataApi'
import { hashHistory } from 'react-router'
import ee from 'browser/main/lib/eventEmitter'
import CodeMirror from 'codemirror'
import SnippetTab from './SnippetTab'
import SnippetTab from 'browser/components/SnippetTab'
import StatusBar from '../StatusBar'
import context from 'browser/lib/context'
import ConfigManager from 'browser/main/lib/ConfigManager'
@@ -188,21 +188,6 @@ class SnippetNoteDetail extends React.Component {
}
handleShareButtonClick (e) {
let menu = new Menu()
menu.append(new MenuItem({
label: 'Export as a File',
disabled: true,
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) {
context.popup([{
label: 'Delete',
@@ -538,44 +523,22 @@ class SnippetNoteDetail extends React.Component {
>
<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'
data={data}
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'
<StarButton styleName='info-left-button'
onClick={(e) => this.handleStarButtonClick(e)}
isActive={note.isStarred}
/>
<button styleName='info-right-button'
onClick={(e) => this.handleShareButtonClick(e)}
disabled
>
<i className='fa fa-share-alt fa-fw'/>
<span styleName='info-right-button-tooltip'
style={{right: 20}}
>Share Note</span>
</button>
<TagSelect
ref='tags'
value={this.state.note.tags}
onChange={(e) => this.handleChange(e)}
/>
</div>
<div styleName='info-right'>
<LastUpdatedString date={note.updatedAt} />
<button styleName='info-right-button'
onClick={(e) => this.handleContextButtonClick(e)}
>
<i className='fa fa-ellipsis-v'/>
<span styleName='info-right-button-tooltip'
style={{right: 5}}
>More Options</span>
</button>
</div>
</div>

110
browser/main/Detail/SnippetNoteDetail.styl
View File

@@ -1,72 +1,25 @@
$info-height = 75px
@import('NoteDetailInfo')
@import('DetailVars')
.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 .info-right-button-tooltip
opacity 1
&:focus
border-color $ui-button--focus-borderColor
.info-right-button-tooltip
tooltip()
position fixed
top 45px
padding 5px
opacity 0
background-color $ui-noteDetail-backgroundColor
box-shadow $note-detail-box-shadow
.body
absolute left right
top $info-height
left $note-detail-left-margin
right $note-detail-right-margin
top $info-height + $info-margin-under-border
bottom $statusBar-height
background-color $ui-noteDetail-backgroundColor
.body .description
absolute top left right
height 80px
border-bottom $ui-border
.body .description textarea
display block
@@ -76,20 +29,19 @@ $info-height = 75px
border none
padding 10px
line-height 1.6
background-color $ui-noteDetail-backgroundColor
.tabList
absolute left right
top 80px
height 30px
border-bottom $ui-border
display flex
background-color $ui-backgroundColor
background-color $ui-noteDetail-backgroundColor
.tabList .list
flex 1
display flex
overflow hidden
border-right $ui-border
.tabList .plusButton
navButtonColor()
@@ -97,7 +49,7 @@ $info-height = 75px
.tabView
absolute left right bottom
top 110px
top 130px
.tabView-content
absolute top left right bottom
@@ -118,47 +70,19 @@ $info-height = 75px
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
background-color $ui-dark-noteDetail-backgroundColor
box-shadow none
.info
border-bottom-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.info-delete
color $ui-dark-text-color
.info-delete-confirmButton
colorDarkDangerButton()
color $ui-dark-text-color
.info-delete-cancelButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor
color $ui-dark-text-color
.info-right-button
navDarkButtonColor()
border-color $ui-dark-borderColor
&:active
border-color $ui-dark-button--focus-borderColor
&:hover .info-right-button-tooltip
opacity 1
&:focus
border-color $ui-button--focus-borderColor
.info-right-button-tooltip
darkTooltip()
.body .description
border-bottom-color $ui-dark-borderColor
.body
background-color $ui-dark-noteDetail-backgroundColor
.body .description textarea
background-color $ui-dark-button--hover-backgroundColor
background-color $ui-dark-noteDetail-backgroundColor
color white
.tabList
background-color $ui-button--active-backgroundColor
border-bottom-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
background-color $ui-dark-noteDetail-backgroundColor
.tabList .list
border-color $ui-dark-borderColor

1
browser/main/Detail/StarButton.js
View File

@@ -53,7 +53,6 @@ class StarButton extends React.Component {
: 'fa fa-star-o'
}
/>
<span styleName='tooltip'>Star Note</span>
</button>
)
}

18
browser/main/Detail/StarButton.styl
View File

@@ -1,5 +1,7 @@
.root
position relative
position absolute
left 7px
top 0
padding 0
&:hover
.icon
@@ -9,19 +11,11 @@
.root--active
@extend .root
color $brand-color
color $ui-favorite-star-button-color
&:hover
color $brand-color !important
color $ui-favorite-star-button-color
.icon
transform rotate(-72deg)
.icon
transition transform 0.15s
.tooltip
tooltip()
position fixed
top 45px
right 65px
padding 5px
opacity 0
border-radius 2px

12
browser/main/Detail/TagSelect.js
View File

@@ -8,7 +8,7 @@ class TagSelect extends React.Component {
super(props)
this.state = {
newTag: ''
newTag: '',
}
}
@@ -107,12 +107,12 @@ class TagSelect extends React.Component {
<span styleName='tag'
key={tag}
>
<span styleName='tag-label'>{tag}</span>
<button styleName='tag-removeButton'
onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
>
<i className='fa fa-times fa-fw'/>
<i className='fa fa-times fa-fw tag-removeButton-icon'/>
</button>
<span styleName='tag-label'>{tag}</span>
</span>
)
})
@@ -125,10 +125,7 @@ class TagSelect extends React.Component {
}
styleName='root'
>
<i styleName='icon'
className='fa fa-tags'
/>
{tagList}
{tagList}
<input styleName='newTag'
ref='newTag'
value={this.state.newTag}
@@ -136,7 +133,6 @@ class TagSelect extends React.Component {
onChange={(e) => this.handleNewTagInputChange(e)}
onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
/>
</div>
)
}

66
browser/main/Detail/TagSelect.styl
View File

@@ -1,46 +1,48 @@
.root
position relative
position absolute
top 19px
left 44px
user-select none
.icon
display inline-block
width 30px
vertical-align middle
text-align center
color $ui-button-color
width 300px
overflow-x scroll
white-space nowrap
.root::-webkit-scrollbar
display none
.tag
display inline-block
margin 0 2px
padding-left 10px
vertical-align middle
height 20px
background-color white
border-radius 3px
background-color $ui-tag-backgroundColor
border-radius 20px
overflow hidden
clearfix()
.tag-removeButton
float left
float right
height 20px
width 18px
margin 0
padding 0
border-style solid
border-color $ui-button--focus-borderColor
border-width 0 0 0 3px
border-width 0
border-radius 20px
line-height 18px
background-color transparent
color $ui-button-color
&:hover
background-color $ui-button--hover-backgroundColor
&:active, &:active:hover
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
border-color $ui-button--focus-borderColor
&:focus
border-color $ui-button--focus-borderColor
.tag-removeButton-icon
width 5px
padding-right 4px
.tag-label
font-size 12px
font-weight bold
color: #FFFFFF
float left
height 20px
line-height 20px
@@ -62,12 +64,27 @@
&:disabled
background-color $ui-input--disabled-backgroundColor = #DDD
.add-tag-button
display inline
margin-left 5px
width 20px
height 20px
border none
border-radius 20px
padding 0
color #FFFFFF
&:hover
background-color rgba(0, 0, 0, 0.3)
&:active, &:active:hover
background-color rgba(0, 0, 0, 0.5)
color $ui-button--active-color
body[data-theme="dark"]
.icon
color $ui-dark-button-color
.tag
background-color $ui-dark-button--hover-backgroundColor
background-color $ui-dark-tag-backgroundColor
.tag-removeButton
border-color $ui-button--focus-borderColor
@@ -85,3 +102,10 @@ body[data-theme="dark"]
border-color $ui-input--focus-borderColor = #369DCD
&:disabled
background-color $ui-input--disabled-backgroundColor = #DDD
.add-tag-button
&:hover
background-color rgba(255, 255, 255, 0.3)
&:active, &:active:hover
background-color rgba(255, 255, 255, 0.5)
color $ui-button--active-color

17
browser/main/Main.js
View File

@@ -26,7 +26,7 @@ class Main extends React.Component {
this.state = {
isRightSliderFocused: false,
listWidth: config.listWidth,
navWidth: config.listWidth,
navWidth: config.navWidth,
isLeftSliderFocused: false
}
}
@@ -85,6 +85,7 @@ class Main extends React.Component {
}
handleMouseUp (e) {
// Change width of NoteList component.
if (this.state.isRightSliderFocused) {
this.setState({
isRightSliderFocused: false
@@ -99,6 +100,8 @@ class Main extends React.Component {
})
})
}
// Change width of SideNav component.
if (this.state.isLeftSliderFocused) {
this.setState({
isLeftSliderFocused: false
@@ -106,10 +109,10 @@ class Main extends React.Component {
let { dispatch } = this.props
let navWidth = this.state.navWidth
// TODO: ConfigManager should dispatch itself.
ConfigManager.set({listWidth: navWidth})
ConfigManager.set({ navWidth })
dispatch({
type: 'SET_NAV_WIDTH',
listWidth: navWidth
navWidth,
})
})
}
@@ -162,7 +165,7 @@ class Main extends React.Component {
/>
{!config.isSideNavFolded &&
<div styleName={this.state.isLeftSliderFocused ? 'slider--active' : 'slider'}
style={{left: this.state.navWidth - 1}}
style={{left: this.state.navWidth}}
onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
draggable='false'
>
@@ -191,15 +194,15 @@ class Main extends React.Component {
'location'
])}
/>
<div styleName={this.state.isRightSliderFocused ? 'slider--active' : 'slider'}
style={{left: this.state.listWidth}}
<div styleName={this.state.isRightSliderFocused ? 'slider-right--active' : 'slider-right'}
style={{left: this.state.listWidth - 1}}
onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
draggable='false'
>
<div styleName='slider-hitbox' />
</div>
<Detail
style={{left: this.state.listWidth + 1}}
style={{left: this.state.listWidth}}
{..._.pick(this.props, [
'dispatch',
'data',

22
browser/main/Main.styl
View File

@@ -11,15 +11,18 @@
.slider
absolute top bottom
top -2px
width 0
.slider-right
@extend .slider
width 1px
background-color $ui-borderColor
border-width 0
border-style solid
border-color $ui-borderColor
.slider--active
@extend .slider
background-color $ui-button--active-backgroundColor
.slider-right--active
@extend .slider-right
.slider-hitbox
absolute top bottom left right
@@ -33,9 +36,6 @@ body[data-theme="dark"]
.root
absolute top left bottom right
.slider
background-color $ui-dark-borderColor
border-color $ui-dark-borderColor
.slider--active
background-color $ui-button--active-backgroundColor
.slider-right
.slider-right--active
box-shadow none

168
browser/main/NoteDetail/ShareButton.js
View File

@@ -1,168 +0,0 @@
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import api from 'browser/lib/api'
import clientKey from 'browser/lib/clientKey'
import activityRecord from 'browser/lib/activityRecord'
const clipboard = require('electron').clipboard
function notify (...args) {
return new window.Notification(...args)
}
function getDefault () {
return {
openDropdown: false,
isSharing: false,
// Fetched url
url: null,
// for tooltip Copy -> Copied!
copied: false,
failed: false
}
}
export default class ShareButton extends React.Component {
constructor (props) {
super(props)
this.state = getDefault()
}
componentWillReceiveProps (nextProps) {
this.setState(getDefault())
}
componentDidMount () {
this.dropdownInterceptor = e => {
this.dropdownClicked = true
}
ReactDOM.findDOMNode(this.refs.dropdown).addEventListener('click', this.dropdownInterceptor)
this.shareViaPublicURLHandler = e => {
this.handleShareViaPublicURLClick(e)
}
}
componentWillUnmount () {
document.removeEventListener('click', this.dropdownHandler)
ReactDOM.findDOMNode(this.refs.dropdown).removeEventListener('click', this.dropdownInterceptor)
}
handleOpenButtonClick (e) {
this.openDropdown()
if (this.dropdownHandler == null) {
this.dropdownHandler = e => {
if (!this.dropdownClicked) {
this.closeDropdown()
} else {
this.dropdownClicked = false
}
}
}
document.removeEventListener('click', this.dropdownHandler)
document.addEventListener('click', this.dropdownHandler)
}
openDropdown () {
this.setState({openDropdown: true})
}
closeDropdown () {
document.removeEventListener('click', this.dropdownHandler)
this.setState({openDropdown: false})
}
handleClipboardButtonClick (e) {
activityRecord.emit('MAIN_DETAIL_COPY')
clipboard.writeText(this.props.article.content)
notify('Saved to Clipboard!', {
body: 'Paste it wherever you want!'
})
this.setState({openDropdown: false})
}
handleShareViaPublicURLClick (e) {
let { user } = this.props
let input = Object.assign({}, this.props.article, {
clientKey: clientKey.get(),
writerName: user.name
})
this.setState({
isSharing: true,
failed: false
}, () => {
api.shareViaPublicURL(input)
.then(res => {
let url = res.body.url
this.setState({url: url, isSharing: false})
activityRecord.emit('ARTICLE_SHARE')
})
.catch(err => {
console.log(err)
this.setState({isSharing: false, failed: true})
})
})
}
handleCopyURLClick () {
clipboard.writeText(this.state.url)
this.setState({copied: true})
}
// Restore copy url tooltip
handleCopyURLMouseLeave () {
this.setState({copied: false})
}
render () {
let hasPublicURL = this.state.url != null
return (
<div className='ShareButton'>
<button ref='openButton' onClick={e => this.handleOpenButtonClick(e)} className='ShareButton-open-button'>
<i className='fa fa-fw fa-share-alt'/>
{
this.state.openDropdown ? null : (
<span className='tooltip'>Share</span>
)
}
</button>
<div ref='dropdown' className={'ShareButton-dropdown' + (this.state.openDropdown ? '' : ' hide')}>
{
!hasPublicURL ? (
<button
onClick={e => this.shareViaPublicURLHandler(e)}
ref='sharePublicURL'
disabled={this.state.isSharing}>
<i className='fa fa-fw fa-external-link'/> {this.state.failed ? 'Failed : Click to Try again' : !this.state.isSharing ? 'Share via public URL' : 'Sharing...'}
</button>
) : (
<div className='ShareButton-url'>
<input className='ShareButton-url-input' value={this.state.url} readOnly/>
<button
onClick={e => this.handleCopyURLClick(e)}
className='ShareButton-url-button'
onMouseLeave={e => this.handleCopyURLMouseLeave(e)}
>
<i className='fa fa-fw fa-clipboard'/>
<div className='ShareButton-url-button-tooltip'>{this.state.copied ? 'Copied!' : 'Copy URL'}</div>
</button>
<div className='ShareButton-url-alert'>This url is valid for 7 days.</div>
</div>
)
}
<button onClick={e => this.handleClipboardButtonClick(e)}>
<i className='fa fa-fw fa-clipboard'/>&nbsp;Copy to clipboard
</button>
</div>
</div>
)
}
}
ShareButton.propTypes = {
article: PropTypes.shape({
publicURL: PropTypes.string,
content: PropTypes.string
}),
user: PropTypes.shape({
name: PropTypes.string
})
}

187
browser/main/NoteList/NoteList.styl
View File

@@ -1,25 +1,28 @@
$control-height = 30px
.root
absolute left bottom
border-top $ui-border
top $topBar-height - 1
background-color $ui-noteList-backgroundColor
.control
absolute top left right
user-select none
height 25px
font-size 10px
border-bottom $ui-border
height $control-height
font-size 12px
line-height 25px
display flex
background-color $ui-backgroundColor
background-color $ui-noteList-backgroundColor
color $ui-inactive-text-color
.control-sortBy
flex 1
padding-left 5px
padding-left 25px
.control-sortBy-select
margin-left 5px
margin-left 0
font-size 12px
color $ui-inactive-text-color
padding 0
border none
background-color transparent
@@ -36,8 +39,6 @@
color $ui-active-color
&:hover
color $ui-text-color
.control-button-tooltip
opacity 1
.control-button--active
@extend .control-button
@@ -45,178 +46,22 @@
&:hover
color $ui-active-color
.control-button-tooltip
tooltip()
position absolute
top 20px
right 5px
padding 5px
opacity 0
white-space nowrap
border-radius 2px
z-index 1
.list
absolute left right bottom
top 24px
top $control-height
overflow auto
.item
position relative
border-bottom $ui-border
padding 2px 5px
user-select none
cursor pointer
transition background-color 0.15s
&:hover
background-color alpha($ui-active-color, 20%)
&:active
background-color $ui-active-color
color white
.item-title
.item-title-empty
.item-title-icon
.item-bottom-tagIcon
.item-bottom-tagList-empty
.item-bottom-time
color white
.item-bottom-tagList-item
background-color transparent
color white
.item--active
@extend .item
background-color $ui-active-color
color white
.item-title
.item-title-empty
.item-title-icon
.item-bottom-tagIcon
.item-bottom-tagList-empty
.item-bottom-time
color white
.item-bottom-tagList-item
background-color transparent
color white
&:hover
background-color $ui-active-color
.item-border
absolute top bottom left right
border-style solid
border-width 2px
border-color transparent
transition 0.15s
.item-title
height 24px
box-sizing border-box
line-height 24px
padding 0
overflow ellipsis
color $ui-text-color
.item-title-icon
font-size 12px
color $ui-inactive-text-color
padding-right 3px
.item-title-empty
font-weight normal
color $ui-inactive-text-color
.item-bottom
margin-top 2px
height 20px
font-size 12px
line-height 20px
overflow ellipsis
display flex
.item-bottom-tagIcon
vertical-align middle
color $ui-button-color
height 20px
line-height 20px
.item-bottom-tagList
flex 1
overflow ellipsis
line-height 20px
.item-bottom-tagList-item
margin 0 4px
padding 0 4px
height 20px
box-sizing border-box
border-radius 3px
vertical-align middle
border-style solid
border-color $ui-button--focus-borderColor
border-width 0 0 0 3px
background-color $ui-backgroundColor
color $ui-text-color
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle
font-size 10px
margin-left 5px
.item-bottom-time
color $ui-inactive-text-color
margin-left 5px
font-size 10px
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
.item
border-color $ui-dark-borderColor
&:hover
background-color alpha($ui-active-color, 20%)
.item--active
@extend .item
border-color $ui-dark-borderColor
.item-title
color white
.item-bottom-tagList-item
background-color transparent
color white
.item-bottom-tagList-empty
color white
&:hover
background-color $ui-active-color
.item-title
color $ui-dark-text-color
.item-title-icon
color $ui-darkinactive-text-color
.item-title-empty
color $ui-dark-inactive-text-color
.item-bottom-tagIcon
color $ui-dark-button-color
.item-bottom-tagList-item
border-color $ui-dark-button--focus-borderColor
background-color $ui-dark-button--hover-backgroundColor
color $ui-dark-text-color
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle
background-color $ui-dark-noteList-backgroundColor
.control
background-color $ui-dark-backgroundColor
background-color $ui-dark-noteList-backgroundColor
.control
background-color $ui-dark-noteList-backgroundColor
border-color $ui-dark-borderColor
.control-sortBy-select
color $ui-dark-text-color
.control-button
color $ui-dark-inactive-text-color

95
browser/main/NoteList/index.js
View File

@@ -6,6 +6,8 @@ import _ from 'lodash'
import ee from 'browser/main/lib/eventEmitter'
import dataApi from 'browser/main/lib/dataApi'
import ConfigManager from 'browser/main/lib/ConfigManager'
import NoteItem from 'browser/components/NoteItem'
import NoteItemSimple from 'browser/components/NoteItemSimple'
const { remote } = require('electron')
const { Menu, MenuItem, dialog } = remote
@@ -314,57 +316,40 @@ class NoteList extends React.Component {
.sort(sortFunc)
let noteList = notes
.map((note) => {
if (note == null) return null
let tagElements = _.isArray(note.tags)
? note.tags.map((tag) => {
return (
<span styleName='item-bottom-tagList-item'
key={tag}>
{tag}
</span>
)
})
: []
let isActive = location.query.key === note.storage + '-' + note.key
.map(note => {
if (note == null) {
return null
}
const isDefault = config.listStyle === 'DEFAULT'
const isActive = location.query.key === note.storage + '-' + note.key
const dateDisplay = moment(
config.sortBy === 'CREATED_AT' ?
note.createdAt : note.updatedAt
).fromNow()
const key = `${note.storage}-${note.key}`
if (isDefault) {
return (
<NoteItem
isActive={isActive}
note={note}
dateDisplay={dateDisplay}
key={key}
handleNoteClick={this.handleNoteClick.bind(this)}
handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
/>
)
}
return (
<div styleName={isActive
? 'item--active'
: 'item'
}
key={note.storage + '-' + note.key}
onClick={(e) => this.handleNoteClick(e, note.storage + '-' + note.key)}
onContextMenu={(e) => this.handleNoteContextMenu(e, note.storage + '-' + note.key)}
>
<div styleName='item-title'>
{note.type === 'SNIPPET_NOTE'
? <i styleName='item-title-icon' className='fa fa-fw fa-code'/>
: <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o'/>
}
{note.title.trim().length > 0
? note.title
: <span styleName='item-title-empty'>Empty</span>
}
</div>
{config.listStyle === 'DEFAULT' &&
<div styleName='item-bottom'>
<i styleName='item-bottom-tagIcon'
className='fa fa-tags fa-fw'
/>
<div styleName='item-bottom-tagList'>
{tagElements.length > 0
? tagElements
: <span styleName='item-bottom-tagList-empty'>Not tagged yet</span>
}
</div>
<div styleName='item-bottom-time'>
{moment(config.sortBy === 'CREATED_AT' ? note.createdAt : note.updatedAt).fromNow()}
</div>
</div>
}
</div>
<NoteItemSimple
isActive={isActive}
note={note}
key={key}
handleNoteClick={this.handleNoteClick.bind(this)}
handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
/>
)
})
@@ -391,10 +376,7 @@ class NoteList extends React.Component {
}
onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
>
<i className='fa fa-th-list'/>
<span styleName='control-button-tooltip'>
Default Size
</span>
<i className='fa fa-th-large'/>
</button>
<button styleName={config.listStyle === 'SMALL'
? 'control-button--active'
@@ -402,10 +384,7 @@ class NoteList extends React.Component {
}
onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
>
<i className='fa fa-list'/>
<span styleName='control-button-tooltip'>
Small Size
</span>
<i className='fa fa-list-ul'/>
</button>
</div>
<div styleName='list'

40
browser/main/SideNav/SideNav.styl
View File

@@ -1,19 +1,17 @@
.root
absolute top left bottom
width $sideNav-width
border-right $ui-border
background-color $ui-backgroundColor
user-select none
color $ui-text-color
.top
height $topBar-height
border-bottom $ui-border
.top-menu
navButtonColor()
height $topBar-height - 1
padding 0 10px
padding 0 15px
font-size 14px
width 100%
text-align left
@@ -22,32 +20,10 @@
margin-left 5px
overflow ellipsis
.menu
margin 0
.menu-button
navButtonColor()
height 32px
padding 0 10px
font-size 14px
width 100%
text-align left
overflow ellipsis
.menu-button--active
@extend .menu-button
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
&:hover
background-color $ui-button--active-backgroundColor
.menu-button-label
margin-left 5px
.storageList
absolute left right
bottom 32px
top 120px
bottom 37px
top 160px
overflow-y auto
.storageList-empty
@@ -135,16 +111,6 @@ body[data-theme="dark"]
.top-menu
navDarkButtonColor()
.menu-button
navDarkButtonColor()
.menu-button--active
@extend .menu-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
&:hover
background-color $ui-dark-button--active-backgroundColor
.storageList-empty
color $ui-dark-inactive-text-color

37
browser/main/SideNav/StorageItem.js
View File

@@ -6,6 +6,7 @@ import modal from 'browser/main/lib/modal'
import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
import dataApi from 'browser/main/lib/dataApi'
import StorageItemChild from 'browser/components/StorageItem'
const { remote } = require('electron')
const { Menu, MenuItem, dialog } = remote
@@ -134,34 +135,24 @@ class StorageItem extends React.Component {
let { storage, location, isFolded, data } = this.props
let { folderNoteMap } = data
let folderList = storage.folders.map((folder) => {
let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key))
let isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
let noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
let noteCount = noteSet != null
? noteSet.size
: 0
return <button styleName={isActive
? 'folderList-item--active'
: 'folderList-item'
}
key={folder.key}
onClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
onContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
>
<span styleName='folderList-item-name'
style={{borderColor: folder.color}}
>
{isFolded ? folder.name.substring(0, 1) : folder.name}
</span>
{!isFolded &&
<span styleName='folderList-item-noteCount'>{noteCount}</span>
}
{isFolded &&
<span styleName='folderList-item-tooltip'>
{folder.name}
</span>
}
</button>
return (
<StorageItemChild
key={folder.key}
isActive={isActive}
handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
folderName={folder.name}
folderColor={folder.color}
isFolded={isFolded}
noteCount={noteCount}
/>
)
})
let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))

67
browser/main/SideNav/StorageItem.styl
View File

@@ -1,10 +1,12 @@
.root
width 100%
user-select none
.header
position relative
height 26px
width 100%
margin-bottom 5px
transition 0.15s
&:hover
background-color $ui-button--hover-backgroundColor
@@ -45,7 +47,7 @@
.header-info
display block
width 100%
height 26px
height 30px
padding-left 25px
padding-right 10px
line-height 26px
@@ -78,63 +80,6 @@
&:active
color $ui-active-color
.folderList-item
display flex
width 100%
height 26px
background-color transparent
color $ui-inactive-text-color
padding 0
margin-bottom 2px
text-align left
border none
overflow ellipsis
font-size 14px
&:first-child
margin-top 0
&:hover
background-color $ui-button--hover-backgroundColor
&:active
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
.folderList-item--active
@extend .folderList-item
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
&:hover
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
.folderList-item-name
display block
flex 1
padding 0 10px
height 26px
line-height 26px
border-width 0 0 0 6px
border-style solid
border-color transparent
.folderList-item-noteCount
float right
line-height 26px
padding-right 5px
font-size 12px
.folderList-item-tooltip
tooltip()
position fixed
padding 0 10px
left 44px
z-index 10
pointer-events none
opacity 0
border-top-right-radius 2px
border-bottom-right-radius 2px
height 26px
line-height 26px
.root--folded
@extend .root
.header
@@ -161,11 +106,7 @@
.header-info--folded-tooltip-path
font-size 10px
margin 0 5px
.folderList-item:hover, .folderList-item--active:hover
.folderList-item-tooltip
opacity 1
.folderList-item-name
padding-left 14px
body[data-theme="dark"]
.header-toggleButton
.header-addFolderButton

26
browser/main/SideNav/index.js
View File

@@ -5,6 +5,7 @@ import { openModal } from 'browser/main/lib/modal'
import PreferencesModal from '../modals/PreferencesModal'
import ConfigManager from 'browser/main/lib/ConfigManager'
import StorageItem from './StorageItem'
import SideNavFilter from 'browser/components/SideNavFilter'
const electron = require('electron')
const { remote } = electron
@@ -39,8 +40,8 @@ class SideNav extends React.Component {
let { data, location, config, dispatch } = this.props
let isFolded = config.isSideNavFolded
let isHomeActive = location.pathname.match(/^\/home$/)
let isStarredActive = location.pathname.match(/^\/starred$/)
let isHomeActive = !!location.pathname.match(/^\/home$/)
let isStarredActive = !!location.pathname.match(/^\/starred$/)
let storageList = data.storageMap.map((storage, key) => {
return <StorageItem
@@ -69,20 +70,13 @@ class SideNav extends React.Component {
</button>
</div>
<div styleName='menu'>
<button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
onClick={(e) => this.handleHomeButtonClick(e)}
>
<i className='fa fa-files-o fa-fw'/>
<span styleName='menu-button-label'>All Notes</span>
</button>
<button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
onClick={(e) => this.handleStarredButtonClick(e)}
>
<i className='fa fa-star fa-fw'/>
<span styleName='menu-button-label'>Starred</span>
</button>
</div>
<SideNavFilter
isFolded={isFolded}
isHomeActive={isHomeActive}
handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
isStarredActive={isStarredActive}
handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
/>
<div styleName='storageList'>
{storageList.length > 0 ? storageList : (

8
browser/main/StatusBar/StatusBar.styl
View File

@@ -1,9 +1,12 @@
@import('../Detail/DetailVars')
.root
absolute bottom left right
height $statusBar-height
background-color $ui-backgroundColor
background-color $ui-noteDetail-backgroundColor
border-top $ui-border
display flex
box-shadow $note-detail-box-shadow
.blank
flex 1
@@ -39,8 +42,9 @@
body[data-theme="dark"]
.root
background-color $ui-dark-backgroundColor
background-color $ui-dark-noteDetail-backgroundColor
border-color $ui-dark-borderColor
box-shadow none
.zoom
border-color $ui-dark-borderColor

48
browser/main/TopBar/TopBar.styl
View File

@@ -1,19 +1,19 @@
.root
position relative
background-color $ui-backgroundColor
background-color $ui-noteList-backgroundColor
height $topBar-height - 1
.root--expanded
@extend .root
$control-height = 34px
.control
position absolute
top 8px
top 13px
left 8px
right 8px
height $control-height
border $ui-border
border-radius 20px
overflow hidden
display flex
@@ -28,6 +28,7 @@ $control-height = 34px
line-height 32px
width 35px
color $ui-inactive-text-color
background-color $ui-noteList-backgroundColor
.control-search-input
display block
@@ -38,6 +39,7 @@ $control-height = 34px
height 100%
outline none
border none
background-color $ui-noteList-backgroundColor
.control-search-optionList
position fixed
@@ -58,6 +60,7 @@ $control-height = 34px
overflow ellipsis
&:hover
background-color alpha($ui-active-color, 10%)
.control-search-optionList-item-folder
border-left 4px solid transparent
padding 2px 5px
@@ -66,40 +69,30 @@ $control-height = 34px
font-size 12px
height 16px
margin-bottom 4px
.control-search-optionList-item-folder-surfix
font-size 10px
margin-left 5px
color $ui-inactive-text-color
.control-search-optionList-item-type
font-size 12px
color $ui-inactive-text-color
padding-right 3px
.control-search-optionList-empty
height 150px
color $ui-inactive-text-color
line-height 150px
text-align center
.control-contextButton
display block
width 20px
height $control-height - 2
navButtonColor()
border-left $ui-border
font-size 14px
line-height 28px
padding 0
&:active
border-color $ui-button--active-backgroundColor
&:hover .control-newPostButton-tooltip
opacity 1
.control-newPostButton
display block
width 36px
width 32px
height $control-height - 2
navButtonColor()
border-left $ui-border
border $ui-border
border-radius 32px
font-size 14px
line-height 28px
padding 0
@@ -112,17 +105,18 @@ $control-height = 34px
tooltip()
position fixed
pointer-events none
top 45px
left 385px
z-index 10
top 50px
left 433px
z-index 200
padding 5px
line-height normal
border-radius 2px
opacity 0
transition 0.1s
body[data-theme="dark"]
.root, .root--expanded
background-color $ui-dark-backgroundColor
background-color $ui-dark-noteList-backgroundColor
.control
border-color $ui-dark-borderColor
@@ -134,11 +128,13 @@ body[data-theme="dark"]
line-height 32px
width 35px
color $ui-dark-inactive-text-color
background-color $ui-dark-noteList-backgroundColor
.control-search-input
input
background-color $dark-background-color
background-color $ui-dark-noteList-backgroundColor
color $ui-dark-text-color
.control-search-optionList
color white
background-color $ui-dark-button--hover-backgroundColor
@@ -162,10 +158,10 @@ body[data-theme="dark"]
.control-search-optionList-empty
color $ui-inactive-text-color
.control-contextButton,
.control-newPostButton
colorDarkDefaultButton()
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
border-color $ui-dark-button--active-backgroundColor

48
browser/main/TopBar/index.js
View File

@@ -192,47 +192,6 @@ class TopBar extends React.Component {
}
}
handleContextButtonClick (e) {
let { config } = this.props
let menu = new Menu()
menu.append(new MenuItem({
label: 'Create Markdown Note',
click: (e) => this.createNote('MARKDOWN_NOTE')
}))
menu.append(new MenuItem({
label: 'Create Snippet Note',
click: (e) => this.createNote('SNIPPET_NOTE')
}))
menu.append(new MenuItem({
type: 'separator'
}))
menu.append(new MenuItem({
label: 'Change Default Note',
submenu: [
{
type: 'radio',
label: 'Markdown Note',
checked: config.ui.defaultNote === 'MARKDOWN_NOTE',
click: (e) => this.setDefaultNote('MARKDOWN_NOTE')
},
{
type: 'radio',
label: 'Snippet Note',
checked: config.ui.defaultNote === 'SNIPPET_NOTE',
click: (e) => this.setDefaultNote('SNIPPET_NOTE')
},
{
type: 'radio',
label: 'Always Ask',
checked: config.ui.defaultNote === 'ALWAYS_ASK',
click: (e) => this.setDefaultNote('ALWAYS_ASK')
}
]
}))
menu.popup(remote.getCurrentWindow())
}
createNote (noteType) {
let { dispatch, location } = this.props
if (noteType !== 'MARKDOWN_NOTE' && noteType !== 'SNIPPET_NOTE') throw new Error('Invalid note type.')
@@ -353,14 +312,9 @@ class TopBar extends React.Component {
onClick={(e) => this.handleNewPostButtonClick(e)}>
<i className='fa fa-plus'/>
<span styleName='control-newPostButton-tooltip'>
New Note {OSX ? '⌘' : '^'} + n
Make a Note {OSX ? '⌘' : '^'} + n
</span>
</button>
<button styleName='control-contextButton'
onClick={(e) => this.handleContextButtonClick(e)}
>
<i className='fa fa-caret-down'/>
</button>
</div>
</div>
)

2
browser/main/lib/ConfigManager.js
View File

@@ -10,7 +10,7 @@ let isInitialized = false
export const DEFAULT_CONFIG = {
zoom: 1,
isSideNavFolded: false,
listWidth: 250,
listWidth: 280,
navWidth: 200,
sortBy: 'UPDATED_AT', // 'CREATED_AT', 'UPDATED_AT', 'APLHABETICAL'
listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'

27
browser/main/modals/CreateFolderModal.js
View File

@@ -75,24 +75,27 @@ class CreateFolderModal extends React.Component {
onKeyDown={(e) => this.handleKeyDown(e)}
>
<div styleName='header'>
<div styleName='title'>New Folder</div>
<div styleName='title'>Create new folder</div>
</div>
<button styleName='closeButton'
onClick={(e) => this.handleCloseButtonClick(e)}
>Close</button>
<button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
<div styleName='close-mark'>X</div>
<div styleName='close-text'>esc</div>
</button>
<div styleName='control'>
<input styleName='control-input'
placeholder='Folder Name'
ref='name'
value={this.state.name}
onChange={(e) => this.handleChange(e)}
onKeyDown={(e) => this.handleInputKeyDown(e)}
/>
<div styleName='control-folder'>
<div styleName='control-folder-label'>Folder name</div>
<input styleName='control-folder-input'
ref='name'
value={this.state.name}
onChange={(e) => this.handleChange(e)}
onKeyDown={(e) => this.handleInputKeyDown(e)}
/>
</div>
<button styleName='control-confirmButton'
onClick={(e) => this.handleConfirmButtonClick(e)}
>
Confirm
Create Folder
</button>
</div>
</div>

72
browser/main/modals/CreateFolderModal.styl
View File

@@ -1,47 +1,52 @@
.root
modal()
max-width 340px
width 700px
height 200px
overflow hidden
position relative
padding 0 40px
.header
height 50px
margin-bottom 10px
margin-top 10px
font-size 18px
line-height 50px
padding 0 15px
background-color $ui-backgroundColor
border-bottom solid 1px $ui-borderColor
color $ui-text-color
.closeButton
.close-mark
font-size 15px
.close
height 50px
position absolute
top 10px
background-color transparent
color $ui-inactive-text-color
border none
top 7px
right 10px
height 30px
width 0 25px
border $ui-border
border-radius 2px
color $ui-text-color
colorDefaultButton()
.control
padding 25px 15px 15px
text-align center
width top-bar--height
height top-bar--height
.control-input
.control-folder-label
text-align left
font-size 14px
color $ui-text-color
.control-folder-input
display block
height 30px
width 240px
width 620px
padding 0 5px
margin 0 auto 15px
border none
border-bottom solid 1px $border-color
border-radius 2px
margin 10px auto 15px
border 1px solid #C9C9C9 // TODO: use variable.
border-radius 5px
background-color transparent
outline none
vertical-align middle
font-size 18px
text-align center
&:disabled
background-color $ui-input--disabled-backgroundColor
&:focus, &:active
@@ -50,21 +55,35 @@
.control-confirmButton
display block
height 30px
width 620px
border none
border-radius 2px
border-radius 5px
padding 0 25px
margin 0 auto
margin 20px auto
font-size 14px
colorPrimaryButton()
body[data-theme="dark"]
.root
modalDark()
width 700px
height 200px
overflow hidden
position relative
padding 0 40px
.header
background-color $ui-dark-button--hover-backgroundColor
background-color transparent
border-color $ui-dark-borderColor
color $ui-dark-text-color
.control-folder-label
color $ui-dark-text-color
.control-folder-input
border 1px solid #C9C9C9 // TODO: use variable.
color white
.closeButton
border-color $ui-dark-borderColor
color $ui-dark-text-color
@@ -72,8 +91,3 @@ body[data-theme="dark"]
.description
color $ui-inactive-text-color
.control-input
border-color $ui-dark-borderColor
color white

2
browser/main/modals/NewNoteModal.js
View File

@@ -100,7 +100,7 @@ class NewNoteModal extends React.Component {
onKeyDown={(e) => this.handleKeyDown(e)}
>
<div styleName='header'>
<div styleName='title'>New Note</div>
<div styleName='title'>Make a Note</div>
</div>
<button styleName='closeButton'
onClick={(e) => this.handleCloseButtonClick(e)}

48
browser/main/modals/PreferencesModal/ConfigTab.styl
View File

@@ -1,39 +1,44 @@
@import('./Tab')
.root
padding 15px
color $ui-text-color
margin-bottom 30px
.group
margin-bottom 45px
.group-header
font-size 24px
@extend .header
color $ui-text-color
padding 5px
border-bottom $default-border
margin-bottom 15px
.group-header2
font-size 18px
font-size 20px
color $ui-text-color
padding 5px
margin-bottom 15px
margin-top 30px
.group-section
margin-bottom 15px
margin-bottom 20px
display flex
line-height 30px
.group-section-label
width 150px
text-align right
text-align left
margin-right 10px
font-size 14px
.group-section-control
flex 1
.group-section-control-input
height 30px
vertical-align middle
width 150px
font-size 12px
width 400px
font-size $tab--button-font-size
border solid 1px $border-color
border-radius 2px
border-radius $tab--input-border-radius
padding 0 5px
&:disabled
background-color $ui-input--disabled-backgroundColor
@@ -45,7 +50,6 @@
padding-left 15px
.group-control
border-top $default-border
padding-top 10px
box-sizing border-box
height 40px
@@ -56,22 +60,26 @@
line-height 30px
padding 0 5px
float right
.group-control-leftButton
float left
colorDefaultButton()
border $default-border
border-radius 2px
height 30px
border none
border-radius 5px
font-size $tab--button-font-size
height $tab--button-height
padding 0 15px
margin-right 5px
margin-right 10px
.group-control-rightButton
float right
colorPrimaryButton()
border none
border-radius 2px
height 30px
border-radius $tab--button-border-radius
font-size $tab--button-font-size
height $tab--button-height
padding 0 15px
margin-right 5px
margin-right 10px
.group-hint
border $ui-border
padding 10px 15px

156
browser/main/modals/PreferencesModal/HotkeyTab.js Normal file
View File

@@ -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 HotkeyTab 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
? <p className={`alert ${keymapAlert.type}`}>
{keymapAlert.message}
</p>
: null
let { config } = this.state
return (
<div styleName='root'>
<div styleName='group'>
<div styleName='group-header'>Hotkey</div>
<div styleName='group-section'>
<div styleName='group-section-label'>Toggle Main</div>
<div styleName='group-section-control'>
<input styleName='group-section-control-input'
onChange={(e) => this.handleHotkeyChange(e)}
ref='toggleMain'
value={config.hotkey.toggleMain}
type='text'
/>
</div>
</div>
<div styleName='group-section'>
<div styleName='group-section-label'>Toggle Finder(popup)</div>
<div styleName='group-section-control'>
<input styleName='group-section-control-input'
onChange={(e) => this.handleHotkeyChange(e)}
ref='toggleFinder'
value={config.hotkey.toggleFinder}
type='text'
/>
</div>
</div>
<div styleName='group-control'>
<button styleName='group-control-leftButton'
onClick={(e) => this.handleHintToggleButtonClick(e)}
>
{this.state.isHotkeyHintOpen
? 'Hide Hint'
: 'Hint?'
}
</button>
<button styleName='group-control-rightButton'
onClick={(e) => this.handleSaveButtonClick(e)}>Save
</button>
{keymapAlertElement}
</div>
{this.state.isHotkeyHintOpen &&
<div styleName='group-hint'>
<p>Available Keys</p>
<ul>
<li><code>0</code> to <code>9</code></li>
<li><code>A</code> to <code>Z</code></li>
<li><code>F1</code> to <code>F24</code></li>
<li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
<li><code>Plus</code></li>
<li><code>Space</code></li>
<li><code>Backspace</code></li>
<li><code>Delete</code></li>
<li><code>Insert</code></li>
<li><code>Return</code> (or <code>Enter</code> as alias)</li>
<li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
<li><code>Home</code> and <code>End</code></li>
<li><code>PageUp</code> and <code>PageDown</code></li>
<li><code>Escape</code> (or <code>Esc</code> for short)</li>
<li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
<li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
</ul>
</div>
}
</div>
</div>
)
}
}
HotkeyTab.propTypes = {
dispatch: PropTypes.func,
}
export default CSSModules(HotkeyTab, styles)

17
browser/main/modals/PreferencesModal/InfoTab.js
View File

@@ -22,17 +22,24 @@ class InfoTab extends React.Component {
render () {
return (
<div styleName='root'>
<div styleName='header'>Info</div>
<div styleName='top'>
<img styleName='icon' src='../resources/app.png' width='150' height='150'/>
<div styleName='appId'>Boostnote {appVersion}</div>
<div styleName='description'>
A simple markdown/snippet note app for developer.
<div styleName='icon-space'>
<img styleName='icon' src='../resources/app.png' width='92' height='92'/>
<div styleName='icon-right'>
<div styleName='appId'>Boostnote {appVersion}</div>
<div styleName='description'>
A simple markdown/snippet note app for developer.
</div>
</div>
</div>
<div styleName='clear'></div>
<div styleName='madeBy'>Made by&nbsp;
<a href='http://maisin.co/'
onClick={(e) => this.handleLinkClick(e)}
>MAISIN&CO.</a></div>
<div styleName='copyright'>Copyright 2016 MAISIN&CO. All rights reserved.</div>
<div styleName='copyright'>Copyright 2017 MAISIN&CO. All rights reserved.</div>
</div>
<ul styleName='list'>
<li>

34
browser/main/modals/PreferencesModal/InfoTab.styl
View File

@@ -1,3 +1,5 @@
@import('./Tab')
.root
padding 15px
white-space pre
@@ -5,27 +7,39 @@
color $ui-text-color
width 100%
.clear
clear both
.top
text-align center
margin-bottom 25px
text-align left
margin-bottom 20px
.icon-space
margin 20px 0
height 100px
.icon
display inline-block
vertical-align middle
.icon-right
display inline-block
vertical-align middle
margin-left 20px
.appId
font-size 24px
margin-bottom 13px
.description
overflow hidden
white-space normal
line-height 1.5
margin 5px auto 10px
font-size 14px
text-align center
.madeBy
font-size 12px
font-size 14px
$ui-inactive-text-color
.copyright
font-size 12px
font-size 14px
$ui-inactive-text-color
.list
@@ -36,7 +50,7 @@
body[data-theme="dark"]
.root
color $ui-dark-text-color
color $tab--dark-text-color
.madeBy
color $ui-dark-inactive-text-color

68
browser/main/modals/PreferencesModal/PreferencesModal.styl
View File

@@ -1,51 +1,93 @@
@import('./Tab')
top-bar--height = 50px
.root
modal()
max-width 540px
min-height 400px
max-width 800px
min-height 500px
height 80%
overflow hidden
position relative
.nav
.top-bar
absolute top left right
height 50px
height top-bar--height
background-color $ui-backgroundColor
border-bottom solid 1px $ui-borderColor
p
text-align center
font-size 18px
line-height top-bar--height
.top-bar-close
position absolute
background-color transparent
color $ui-inactive-text-color
border none
top 0
right 0
text-align center
width top-bar--height
height top-bar--height
.nav
absolute top left right
top top-bar--height
left 0
width 140px
margin-left 30px
margin-top 20px
background-color $ui-backgroundColor
.nav-button
width 80px
height 50px
font-size 14px
text-align left
width 100px
margin 4px 0
padding 7px 0
padding-left 7px
border none
border-radius 3px
background-color transparent
color #939395
color $ui-text-color
font-size 14px
&:hover
color #515151
color $ui-active-color
.nav-button--active
@extend .nav-button
color #6AA5E9
color white
background-color $ui-active-color
&:hover
color #6AA5E9
color white
.nav-button-icon
display block
.content
absolute left right bottom
top 50px
top top-bar--height
left 140px
margin-top 10px
overflow-y auto
body[data-theme="dark"]
.root
modalDark()
.top-bar
background-color transparent
border-color #4A4D52
p
color $tab--dark-text-color
.nav
background-color $ui-dark-button--hover-backgroundColor
background-color transparent
border-color $ui-dark-borderColor
.nav-button
background-color transparent
color #939395
color $tab--dark-text-color
&:hover
color $ui-dark-text-color

1
browser/main/modals/PreferencesModal/StoragesTab.js
View File

@@ -63,6 +63,7 @@ class StoragesTab extends React.Component {
})
return (
<div styleName='list'>
<div styleName='header'>Storages</div>
{storageList.length > 0
? storageList
: <div styleName='list-empty'>No storage found.</div>

7
browser/main/modals/PreferencesModal/StoragesTab.styl
View File

@@ -1,3 +1,5 @@
@import('./Tab')
.root
padding 15px
color $ui-text-color
@@ -26,11 +28,12 @@
.list-control
height 30px
.list-control-addStorageButton
height 30px
height $tab--button-height
padding 0 15px
border $ui-border
colorDefaultButton()
border-radius 2px
font-size $tab--button-font-size
border-radius $tab--button-border-radius
.addStorage
margin-bottom 15px

18
browser/main/modals/PreferencesModal/Tab.styl Normal file
View File

@@ -0,0 +1,18 @@
/**
* Common style for tabs on config modal.
*/
$tab--input-border-radius = 5px
$tab--button-border-radius = 5px
$tab--button-height = 40px
$tab--button-font-size = 14px
$tab--dark-text-color = #E5E5E5
.header
font-size 24px
margin-bottom 30px
body[data-theme="dark"]
.header
color $tab--dark-text-color

171
browser/main/modals/PreferencesModal/ConfigTab.js → browser/main/modals/PreferencesModal/UiTab.js
View File

@@ -10,97 +10,15 @@ const ipc = electron.ipcRenderer
const OSX = global.process.platform === 'darwin'
class ConfigTab extends React.Component {
class UiTab 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
@@ -125,13 +43,11 @@ class ConfigTab extends React.Component {
lineNumber: this.refs.previewLineNumber.checked
}
this.setState({
config
})
this.setState({ config })
}
handleSaveUIClick (e) {
let newConfig = {
const newConfig = {
ui: this.state.config.ui,
editor: this.state.config.editor,
preview: this.state.config.preview
@@ -146,84 +62,17 @@ class ConfigTab extends React.Component {
}
render () {
let keymapAlert = this.state.keymapAlert
let keymapAlertElement = keymapAlert != null
? <p className={`alert ${keymapAlert.type}`}>
{keymapAlert.message}
</p>
: null
let themes = consts.THEMES
let { config } = this.state
const themes = consts.THEMES
const { config } = this.state
return (
<div styleName='root'>
<div styleName='group'>
<div styleName='group-header'>Hotkey</div>
<div styleName='group-section'>
<div styleName='group-section-label'>Toggle Main</div>
<div styleName='group-section-control'>
<input styleName='group-section-control-input'
onChange={(e) => this.handleHotkeyChange(e)}
ref='toggleMain'
value={config.hotkey.toggleMain}
type='text'
/>
</div>
</div>
<div styleName='group-section'>
<div styleName='group-section-label'>Toggle Finder(popup)</div>
<div styleName='group-section-control'>
<input styleName='group-section-control-input'
onChange={(e) => this.handleHotkeyChange(e)}
ref='toggleFinder'
value={config.hotkey.toggleFinder}
type='text'
/>
</div>
</div>
<div styleName='group-control'>
<button styleName='group-control-leftButton'
onClick={(e) => this.handleHintToggleButtonClick(e)}
>
{this.state.isHotkeyHintOpen
? 'Hide Hint'
: 'Show Hint'
}
</button>
<button styleName='group-control-rightButton'
onClick={(e) => this.handleSaveButtonClick(e)}>Save Hotkey
</button>
{keymapAlertElement}
</div>
{this.state.isHotkeyHintOpen &&
<div styleName='group-hint'>
<p>Available Keys</p>
<ul>
<li><code>0</code> to <code>9</code></li>
<li><code>A</code> to <code>Z</code></li>
<li><code>F1</code> to <code>F24</code></li>
<li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
<li><code>Plus</code></li>
<li><code>Space</code></li>
<li><code>Backspace</code></li>
<li><code>Delete</code></li>
<li><code>Insert</code></li>
<li><code>Return</code> (or <code>Enter</code> as alias)</li>
<li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
<li><code>Home</code> and <code>End</code></li>
<li><code>PageUp</code> and <code>PageDown</code></li>
<li><code>Escape</code> (or <code>Esc</code> for short)</li>
<li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
<li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
</ul>
</div>
}
</div>
<div styleName='group'>
<div styleName='group-header'>UI</div>
<div styleName='group-header2'>Theme</div>
<div styleName='group-section'>
<div styleName='group-section-label'>Theme</div>
<div styleName='group-section-control'>
<select value={config.ui.theme}
onChange={(e) => this.handleUIChange(e)}
@@ -398,11 +247,11 @@ class ConfigTab extends React.Component {
}
}
ConfigTab.propTypes = {
UiTab.propTypes = {
user: PropTypes.shape({
name: PropTypes.string
}),
dispatch: PropTypes.func
}
export default CSSModules(ConfigTab, styles)
export default CSSModules(UiTab, styles)

35
browser/main/modals/PreferencesModal/index.js
View File

@@ -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'
@@ -32,6 +33,10 @@ class Preferences extends React.Component {
}
}
handleEscButtonClick () {
this.props.close()
}
renderContent () {
const { boundingBox } = this.state
let { dispatch, config, data } = this.props
@@ -39,9 +44,16 @@ class Preferences extends React.Component {
switch (this.state.currentTab) {
case 'INFO':
return <InfoTab/>
case 'CONFIG':
case 'HOTKEY':
return (
<ConfigTab
<HotkeyTab
dispatch={dispatch}
config={config}
/>
)
case 'UI':
return (
<UiTab
dispatch={dispatch}
config={config}
/>
@@ -73,9 +85,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) => {
@@ -88,9 +101,6 @@ class Preferences extends React.Component {
key={tab.target}
onClick={(e) => this.handleNavButtonClick(tab.target)(e)}
>
<i styleName='nav-button-icon'
className={'fa fa-' + tab.icon}
/>
<span styleName='nav-button-label'>
{tab.label}
</span>
@@ -104,6 +114,13 @@ class Preferences extends React.Component {
tabIndex='-1'
onKeyDown={(e) => this.handleKeyDown(e)}
>
<div styleName='top-bar'>
<p>Your menu for Boostnote</p>
</div>
<button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
<div styleName='top-bar-close-mark'>X</div>
<div styleName='top-bar-close-text'>esc</div>
</button>
<div styleName='nav'>
{navButtons}
</div>

15
browser/styles/index.styl
View File

@@ -8,15 +8,18 @@ $danger-lighten-color = lighten(#c9302c, 5%)
$statusBar-height = 24px
$sideNav-width = 200px
$sideNav--folded-width = 44px
$topBar-height = 50px
$topBar-height = 60px
// UI default
$ui-text-color = #515151
$ui-inactive-text-color = #939395
$ui-borderColor = #D1D1D1
$ui-backgroundColor = #FAFAFA
$ui-backgroundColor = #FFFFFF
$ui-noteList-backgroundColor = #F3F3F3
$ui-noteDetail-backgroundColor = #F4F4F4
$ui-border = solid 1px $ui-borderColor
$ui-active-color = #6AA5E9
$ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
// UI Button
$ui-button-color = #939395
@@ -44,6 +47,9 @@ tooltip()
$ui-input--focus-borderColor = #369DCD
$ui-input--disabled-backgroundColor = #DDD
// Parts
$ui-favorite-star-button-color = #FFC216
/*
* # Border
*/
@@ -135,7 +141,10 @@ modal()
// Dark theme
$ui-dark-borderColor = lighten(#21252B, 20%)
$ui-dark-backgroundColor = darken(#21252B, 10%)
$ui-dark-backgroundColor = #1D1D1D
$ui-dark-noteList-backgroundColor = #181818
$ui-dark-noteDetail-backgroundColor = #0D0D0D
$ui-dark-tag-backgroundColor = rgba(255, 255, 255, 0.3)
$dark-background-color = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-text-color = #DDDDDD
$ui-dark-button--active-color = white

2
lib/finder.html
View File

@@ -44,7 +44,7 @@
<script>
window._ = require('lodash');
</script>
<script src="../compiled/sequence-diagram.js"></script>
<script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
<script>
const electron = require('electron')
electron.webFrame.setZoomLevelLimits(1, 1)

2
lib/main-window.js
View File

@@ -8,7 +8,7 @@ var showMenu = process.platform !== 'win32'
var mainWindow = new BrowserWindow({
width: 1080,
height: 720,
minWidth: 420,
minWidth: 500,
minHeight: 320,
autoHideMenuBar: showMenu,
webPreferences: {

2
lib/main.html
View File

@@ -66,7 +66,7 @@
<script>
window._ = require('lodash')
</script>
<script src="../compiled/sequence-diagram.js"></script>
<script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
<script src="../compiled/katex.js"></script>
<script src="../compiled/react.js"></script>

3
oh-my-cdn.json
View File

@@ -8,7 +8,6 @@
"katex": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js",
"katex-style": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css",
"raphael": "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js",
"flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js",
"sequence-diagram": "https://cdn.rawgit.com/bramp/js-sequence-diagrams/master/dist/sequence-diagram-min.js"
"flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js"
}
}

1
package.json
View File

@@ -52,6 +52,7 @@
"electron-gh-releases": "^2.0.2",
"font-awesome": "^4.3.0",
"immutable": "^3.8.1",
"js-sequence-diagrams": "^1000000.0.6",
"lodash": "^4.11.1",
"markdown-it": "^6.0.1",
"markdown-it-checkbox": "^1.1.0",

BIN
resources/app.icns Normal file → Executable file
View File

Binary file not shown.

BIN
resources/app.ico Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 361 KiB

After

Width:  |  Height:  |  Size: 361 KiB

BIN
resources/app.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
resources/boostnote-install.gif Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
resources/boostnote-install.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
resources/boostnote-install@2x.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 71 KiB

BIN
resources/dmg.icns Normal file → Executable file
View File

Binary file not shown.

BIN
resources/dmg.ico Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 361 KiB

After

Width:  |  Height:  |  Size: 361 KiB

BIN
resources/dmg.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
resources/favicon.ico Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
resources/tray-icon-dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 289 B

After

Width:  |  Height:  |  Size: 802 B

BIN
resources/tray-icon-dark@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 484 B

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
resources/tray-icon-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 381 B

After

Width:  |  Height:  |  Size: 802 B

BIN
resources/tray-icon-default@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 684 B

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
resources/tray-icon.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 959 B

After

Width:  |  Height:  |  Size: 802 B

BIN
resources/tray-icon@2x.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

12
tests/date-formatter-test.js Normal file
View File

@@ -0,0 +1,12 @@
/**
* @fileoverview Unit test for browser/lib/date-formatter.js
*/
const test = require('ava')
const { getLastUpdated } = require('browser/lib/date-formatter')
test(t => {
t.throws(
() => getLastUpdated('invalid argument'),
'Invalid argument.'
)
})