diff --git a/browser/components/ColorPicker.js b/browser/components/ColorPicker.js new file mode 100644 index 00000000..9e0199c2 --- /dev/null +++ b/browser/components/ColorPicker.js @@ -0,0 +1,68 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { SketchPicker } from 'react-color' +import CSSModules from 'browser/lib/CSSModules' +import styles from './ColorPicker.styl' + +const componentHeight = 330 + +class ColorPicker extends React.Component { + constructor (props) { + super(props) + + this.state = { + color: this.props.color || '#939395' + } + + this.onColorChange = this.onColorChange.bind(this) + this.handleConfirm = this.handleConfirm.bind(this) + } + + componentWillReceiveProps (nextProps) { + this.onColorChange(nextProps.color) + } + + onColorChange (color) { + this.setState({ + color + }) + } + + handleConfirm () { + this.props.onConfirm(this.state.color) + } + + render () { + const { onReset, onCancel, targetRect } = this.props + const { color } = this.state + + const clientHeight = document.body.clientHeight + const alignX = targetRect.right + 4 + let alignY = targetRect.top + if (targetRect.top + componentHeight > clientHeight) { + alignY = targetRect.bottom - componentHeight + } + + return ( +
+
+ +
+ + + +
+
+ ) + } +} + +ColorPicker.propTypes = { + color: PropTypes.string, + targetRect: PropTypes.object, + onConfirm: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, + onReset: PropTypes.func.isRequired +} + +export default CSSModules(ColorPicker, styles) diff --git a/browser/components/ColorPicker.styl b/browser/components/ColorPicker.styl new file mode 100644 index 00000000..fbc1212a --- /dev/null +++ b/browser/components/ColorPicker.styl @@ -0,0 +1,39 @@ +.colorPicker + position fixed + z-index 2 + display flex + flex-direction column + +.cover + position fixed + top 0 + right 0 + bottom 0 + left 0 + +.footer + display flex + justify-content center + z-index 2 + align-items center + & > button + button + margin-left 10px + +.btn-cancel, +.btn-confirm, +.btn-reset + vertical-align middle + height 25px + margin-top 2.5px + border-radius 2px + border none + padding 0 5px + background-color $default-button-background + &:hover + background-color $default-button-background--hover +.btn-confirm + background-color #1EC38B + &:hover + background-color darken(#1EC38B, 25%) + + diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 68484b04..4c638dc9 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -398,6 +398,31 @@ export default class MarkdownPreview extends React.Component { } } + /** + * @description Convert special characters between three ``` + * @param {string[]} splitWithCodeTag Array of HTML strings separated by three ``` + * @returns {string} HTML in which special characters between three ``` have been converted + */ + escapeHtmlCharactersInCodeTag (splitWithCodeTag) { + for (let index = 0; index < splitWithCodeTag.length; index++) { + const codeTagRequired = (splitWithCodeTag[index] !== '\`\`\`' && index < splitWithCodeTag.length - 1) + if (codeTagRequired) { + splitWithCodeTag.splice((index + 1), 0, '\`\`\`') + } + } + let inCodeTag = false + let result = '' + for (let content of splitWithCodeTag) { + if (content === '\`\`\`') { + inCodeTag = !inCodeTag + } else if (inCodeTag) { + content = escapeHtmlCharacters(content) + } + result += content + } + return result + } + getScrollBarStyle () { const { theme } = this.props @@ -632,11 +657,16 @@ export default class MarkdownPreview extends React.Component { indentSize, showCopyNotification, storagePath, - noteKey + noteKey, + sanitize } = this.props let { value, codeBlockTheme } = this.props this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme) + if (sanitize === 'NONE') { + const splitWithCodeTag = value.split('```') + value = this.escapeHtmlCharactersInCodeTag(splitWithCodeTag) + } const renderedHTML = this.markdown.render(value) attachmentManagement.migrateAttachments(value, storagePath, noteKey) this.refs.root.contentWindow.document.body.innerHTML = attachmentManagement.fixLocalURLS( diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js index 2fc70a39..625bb38d 100644 --- a/browser/components/NoteItem.js +++ b/browser/components/NoteItem.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types' import React from 'react' import { isArray } from 'lodash' +import invertColor from 'invert-color' import CSSModules from 'browser/lib/CSSModules' import { getTodoStatus } from 'browser/lib/getTodoStatus' import styles from './NoteItem.styl' @@ -13,29 +14,38 @@ import i18n from 'browser/lib/i18n' /** * @description Tag element component. * @param {string} tagName + * @param {string} color * @return {React.Component} */ -const TagElement = ({ tagName }) => ( - - #{tagName} - -) +const TagElement = ({ tagName, color }) => { + const style = {} + if (color) { + style.backgroundColor = color + style.color = invertColor(color, { black: '#222', white: '#f1f1f1', threshold: 0.3 }) + } + return ( + + #{tagName} + + ) +} /** * @description Tag element list component. * @param {Array|null} tags * @param {boolean} showTagsAlphabetically + * @param {Object} coloredTags * @return {React.Component} */ -const TagElementList = (tags, showTagsAlphabetically) => { +const TagElementList = (tags, showTagsAlphabetically, coloredTags) => { if (!isArray(tags)) { return [] } if (showTagsAlphabetically) { - return _.sortBy(tags).map(tag => TagElement({ tagName: tag })) + return _.sortBy(tags).map(tag => TagElement({ tagName: tag, color: coloredTags[tag] })) } else { - return tags.map(tag => TagElement({ tagName: tag })) + return tags.map(tag => TagElement({ tagName: tag, color: coloredTags[tag] })) } } @@ -46,6 +56,7 @@ const TagElementList = (tags, showTagsAlphabetically) => { * @param {Function} handleNoteClick * @param {Function} handleNoteContextMenu * @param {Function} handleDragStart + * @param {Object} coloredTags * @param {string} dateDisplay */ const NoteItem = ({ @@ -59,7 +70,8 @@ const NoteItem = ({ storageName, folderName, viewType, - showTagsAlphabetically + showTagsAlphabetically, + coloredTags }) => (
{note.tags.length > 0 - ? TagElementList(note.tags, showTagsAlphabetically) + ? TagElementList(note.tags, showTagsAlphabetically, coloredTags) : ( +const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count, color}) => (
handleContextMenu(e, name)}> {isRelated ? -) +}) => { + const hotkey = (OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')) + '+B' + return ( + + ) +} FullscreenButton.propTypes = { onClick: PropTypes.func.isRequired diff --git a/browser/main/Detail/FullscreenButton.styl b/browser/main/Detail/FullscreenButton.styl index cc1a8dff..133577f3 100644 --- a/browser/main/Detail/FullscreenButton.styl +++ b/browser/main/Detail/FullscreenButton.styl @@ -17,6 +17,10 @@ opacity 0 transition 0.1s +.tooltip:lang(ja) + @extend .tooltip + right 35px + body[data-theme="dark"] .control-fullScreenButton topBarButtonDark() \ No newline at end of file diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index bc6cd499..ad7eb590 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -437,6 +437,7 @@ class MarkdownNoteDetail extends React.Component { showTagsAlphabetically={config.ui.showTagsAlphabetically} data={data} onChange={this.handleUpdateTag.bind(this)} + coloredTags={config.coloredTags} /> this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index e9b0ee37..11d8ac2a 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -20,6 +20,7 @@ import _ from 'lodash' import {findNoteTitle} from 'browser/lib/findNoteTitle' import convertModeName from 'browser/lib/convertModeName' import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig' +import FullscreenButton from './FullscreenButton' import TrashButton from './TrashButton' import RestoreButton from './RestoreButton' import PermanentDeleteButton from './PermanentDeleteButton' @@ -791,6 +792,7 @@ class SnippetNoteDetail extends React.Component { showTagsAlphabetically={config.ui.showTagsAlphabetically} data={data} onChange={(e) => this.handleChange(e)} + coloredTags={config.coloredTags} />
@@ -799,11 +801,7 @@ class SnippetNoteDetail extends React.Component { isActive={note.isStarred} /> - + this.handleFullScreenButton(e)} /> this.handleTrashButtonClick(e)} /> diff --git a/browser/main/Detail/StarButton.js b/browser/main/Detail/StarButton.js index d74809cd..8000970d 100644 --- a/browser/main/Detail/StarButton.js +++ b/browser/main/Detail/StarButton.js @@ -54,7 +54,7 @@ class StarButton extends React.Component { : '../resources/icon/icon-star.svg' } /> - {i18n.__('Star')} + {i18n.__('Star')} ) } diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl index d5fd755b..e9c523e9 100644 --- a/browser/main/Detail/StarButton.styl +++ b/browser/main/Detail/StarButton.styl @@ -21,6 +21,11 @@ opacity 0 transition 0.1s +.tooltip:lang(ja) + @extend .tooltip + right 103px + width 70px + .root--active @extend .root transition 0.15s diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js index c5221f66..e3d9a567 100644 --- a/browser/main/Detail/TagSelect.js +++ b/browser/main/Detail/TagSelect.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types' import React from 'react' +import invertColor from 'invert-color' import CSSModules from 'browser/lib/CSSModules' import styles from './TagSelect.styl' import _ from 'lodash' @@ -185,19 +186,34 @@ class TagSelect extends React.Component { } render () { - const { value, className, showTagsAlphabetically } = this.props + const { value, className, showTagsAlphabetically, coloredTags } = this.props const tagList = _.isArray(value) ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => { + const wrapperStyle = {} + const textStyle = {} + const BLACK = '#333333' + const WHITE = '#f1f1f1' + const color = coloredTags[tag] + const invertedColor = color && invertColor(color, { black: BLACK, white: WHITE }) + let iconRemove = '../resources/icon/icon-x.svg' + if (color) { + wrapperStyle.backgroundColor = color + textStyle.color = invertedColor + } + if (invertedColor === WHITE) { + iconRemove = '../resources/icon/icon-x-light.svg' + } return ( - this.handleTagLabelClick(tag)}>#{tag} + this.handleTagLabelClick(tag)}>#{tag} ) @@ -246,7 +262,8 @@ TagSelect.contextTypes = { TagSelect.propTypes = { className: PropTypes.string, value: PropTypes.arrayOf(PropTypes.string), - onChange: PropTypes.func + onChange: PropTypes.func, + coloredTags: PropTypes.object } export default CSSModules(TagSelect, styles) diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl index c6b13f3c..844561c6 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/browser/main/Detail/TagSelect.styl @@ -3,19 +3,18 @@ align-items center user-select none vertical-align middle - width 100% - overflow-x scroll + width 96% + overflow-x auto white-space nowrap - margin-top 31px + top 50px position absolute - -.root::-webkit-scrollbar - display none + &::-webkit-scrollbar + height 8px .tag display flex align-items center - margin 0px 2px + margin 0px 2px 2px padding 2px 4px background-color alpha($ui-tag-backgroundColor, 3%) border-radius 4px diff --git a/browser/main/Detail/ToggleModeButton.js b/browser/main/Detail/ToggleModeButton.js index 7c026429..fcbaab34 100644 --- a/browser/main/Detail/ToggleModeButton.js +++ b/browser/main/Detail/ToggleModeButton.js @@ -14,7 +14,7 @@ const ToggleModeButton = ({
onClick('EDITOR_PREVIEW')}>
- {i18n.__('Toggle Mode')} + {i18n.__('Toggle Mode')}
) diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl index 73f5acbd..2b47b932 100644 --- a/browser/main/Detail/ToggleModeButton.styl +++ b/browser/main/Detail/ToggleModeButton.styl @@ -40,6 +40,11 @@ opacity 0 transition 0.1s +.tooltip:lang(ja) + @extend .tooltip + left -8px + width 70px + body[data-theme="dark"] .control-fullScreenButton topBarButtonDark() diff --git a/browser/main/Detail/TrashButton.js b/browser/main/Detail/TrashButton.js index 473c2d0b..d26be66e 100644 --- a/browser/main/Detail/TrashButton.js +++ b/browser/main/Detail/TrashButton.js @@ -11,7 +11,7 @@ const TrashButton = ({ onClick={(e) => onClick(e)} > - {i18n.__('Trash')} + {i18n.__('Trash')} ) diff --git a/browser/main/Detail/TrashButton.styl b/browser/main/Detail/TrashButton.styl index 7c7af878..a82cfa6b 100644 --- a/browser/main/Detail/TrashButton.styl +++ b/browser/main/Detail/TrashButton.styl @@ -17,6 +17,10 @@ opacity 0 transition 0.1s +.tooltip:lang(ja) + @extend .tooltip + right 46px + .control-trashButton--in-trash top 60px topBarButtonRight() diff --git a/browser/main/Main.js b/browser/main/Main.js index 556c5daf..26fc8377 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -172,10 +172,21 @@ class Main extends React.Component { delete CodeMirror.keyMap.emacs['Ctrl-V'] eventEmitter.on('editor:fullscreen', this.toggleFullScreen) + eventEmitter.on('menubar:togglemenubar', this.toggleMenuBarVisible.bind(this)) } componentWillUnmount () { eventEmitter.off('editor:fullscreen', this.toggleFullScreen) + eventEmitter.off('menubar:togglemenubar', this.toggleMenuBarVisible.bind(this)) + } + + toggleMenuBarVisible () { + const { config } = this.props + const { ui } = config + + const newUI = Object.assign(ui, {showMenuBar: !ui.showMenuBar}) + const newConfig = Object.assign(config, newUI) + ConfigManager.set(newConfig) } handleLeftSlideMouseDown (e) { diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index dbc9cfd3..ca513c04 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -1047,6 +1047,7 @@ class NoteList extends React.Component { storageName={this.getNoteStorage(note).name} viewType={viewType} showTagsAlphabetically={config.ui.showTagsAlphabetically} + coloredTags={config.coloredTags} /> ) } diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index b98d859d..640bedbf 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -20,6 +20,7 @@ import i18n from 'browser/lib/i18n' import context from 'browser/lib/context' import { remote } from 'electron' import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote' +import ColorPicker from 'browser/components/ColorPicker' function matchActiveTags (tags, activeTags) { return _.every(activeTags, v => tags.indexOf(v) >= 0) @@ -27,6 +28,22 @@ function matchActiveTags (tags, activeTags) { class SideNav extends React.Component { // TODO: should not use electron stuff v0.7 + constructor (props) { + super(props) + + this.state = { + colorPicker: { + show: false, + color: null, + tagName: null, + targetRect: null + } + } + + this.dismissColorPicker = this.dismissColorPicker.bind(this) + this.handleColorPickerConfirm = this.handleColorPickerConfirm.bind(this) + this.handleColorPickerReset = this.handleColorPickerReset.bind(this) + } componentDidMount () { EventEmitter.on('side:preferences', this.handleMenuButtonClick) @@ -104,9 +121,64 @@ class SideNav extends React.Component { click: this.deleteTag.bind(this, tag) }) + menu.push({ + label: i18n.__('Customize Color'), + click: this.displayColorPicker.bind(this, tag, e.target.getBoundingClientRect()) + }) + context.popup(menu) } + dismissColorPicker () { + this.setState({ + colorPicker: { + show: false + } + }) + } + + displayColorPicker (tagName, rect) { + const { config } = this.props + this.setState({ + colorPicker: { + show: true, + color: config.coloredTags[tagName], + tagName, + targetRect: rect + } + }) + } + + handleColorPickerConfirm (color) { + const { dispatch, config: {coloredTags} } = this.props + const { colorPicker: { tagName } } = this.state + const newColoredTags = Object.assign({}, coloredTags, {[tagName]: color.hex}) + + const config = { coloredTags: newColoredTags } + ConfigManager.set(config) + dispatch({ + type: 'SET_CONFIG', + config + }) + this.dismissColorPicker() + } + + handleColorPickerReset () { + const { dispatch, config: {coloredTags} } = this.props + const { colorPicker: { tagName } } = this.state + const newColoredTags = Object.assign({}, coloredTags) + + delete newColoredTags[tagName] + + const config = { coloredTags: newColoredTags } + ConfigManager.set(config) + dispatch({ + type: 'SET_CONFIG', + config + }) + this.dismissColorPicker() + } + handleToggleButtonClick (e) { const { dispatch, config } = this.props @@ -207,6 +279,7 @@ class SideNav extends React.Component { tagListComponent () { const { data, location, config } = this.props + const { colorPicker } = this.state const activeTags = this.getActiveTags(location.pathname) const relatedTags = this.getRelatedTags(activeTags, data.noteMap) let tagList = _.sortBy(data.tagNoteMap.map( @@ -237,10 +310,11 @@ class SideNav extends React.Component { handleClickTagListItem={this.handleClickTagListItem.bind(this)} handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)} handleContextMenu={this.handleTagContextMenu.bind(this)} - isActive={this.getTagActive(location.pathname, tag.name)} + isActive={this.getTagActive(location.pathname, tag.name) || (colorPicker.tagName === tag.name)} isRelated={tag.related} key={tag.name} count={tag.size} + color={config.coloredTags[tag.name]} /> ) }) @@ -333,6 +407,7 @@ class SideNav extends React.Component { render () { const { data, location, config, dispatch } = this.props + const { colorPicker: colorPickerState } = this.state const isFolded = config.isSideNavFolded @@ -349,6 +424,20 @@ class SideNav extends React.Component { useDragHandle /> }) + + let colorPicker + if (colorPickerState.show) { + colorPicker = ( + + ) + } + const style = {} if (!isFolded) style.width = this.props.width const isTagActive = location.pathname.match(/tag/) @@ -368,6 +457,7 @@ class SideNav extends React.Component {
{this.SideNavComponent(isFolded, storageList)} + {colorPicker} ) } diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 81165777..059589d0 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -26,14 +26,16 @@ export const DEFAULT_CONFIG = { toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E', toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M', deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace', - pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V' + pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V', + toggleMenuBar: 'Alt' }, ui: { language: 'en', theme: 'default', showCopyNotification: true, disableDirectWrite: false, - defaultNote: 'ALWAYS_ASK' // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE' + defaultNote: 'ALWAYS_ASK', // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE' + showMenuBar: false }, editor: { theme: 'base16-light', @@ -86,7 +88,8 @@ export const DEFAULT_CONFIG = { token: '', username: '', password: '' - } + }, + coloredTags: {} } function validate (config) { diff --git a/browser/main/lib/shortcut.js b/browser/main/lib/shortcut.js index 93e33c9b..3165606a 100644 --- a/browser/main/lib/shortcut.js +++ b/browser/main/lib/shortcut.js @@ -6,5 +6,8 @@ module.exports = { }, 'deleteNote': () => { ee.emit('hotkey:deletenote') + }, + 'toggleMenuBar': () => { + ee.emit('menubar:togglemenubar') } } diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl index 2ded3ada..618e9bc4 100644 --- a/browser/main/modals/PreferencesModal/FolderItem.styl +++ b/browser/main/modals/PreferencesModal/FolderItem.styl @@ -62,7 +62,7 @@ .folderItem-right-button vertical-align middle height 25px - margin-top 2.5px + margin-top 2px colorDefaultButton() border-radius 2px border $ui-border diff --git a/browser/main/modals/PreferencesModal/HotkeyTab.js b/browser/main/modals/PreferencesModal/HotkeyTab.js index 25098faa..218a68f6 100644 --- a/browser/main/modals/PreferencesModal/HotkeyTab.js +++ b/browser/main/modals/PreferencesModal/HotkeyTab.js @@ -80,7 +80,8 @@ class HotkeyTab extends React.Component { toggleMain: this.refs.toggleMain.value, toggleMode: this.refs.toggleMode.value, deleteNote: this.refs.deleteNote.value, - pasteSmartly: this.refs.pasteSmartly.value + pasteSmartly: this.refs.pasteSmartly.value, + toggleMenuBar: this.refs.toggleMenuBar.value } this.setState({ config @@ -128,6 +129,17 @@ class HotkeyTab extends React.Component { /> +
+
{i18n.__('Show/Hide Menu Bar')}
+
+ this.handleHotkeyChange(e)} + ref='toggleMenuBar' + value={config.hotkey.toggleMenuBar} + type='text' + /> +
+
{i18n.__('Toggle Editor Mode')}
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index c8646c39..c6181a13 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -75,6 +75,7 @@ class UiTab extends React.Component { showTagsAlphabetically: this.refs.showTagsAlphabetically.checked, saveTagsAlphabetically: this.refs.saveTagsAlphabetically.checked, enableLiveNoteCounts: this.refs.enableLiveNoteCounts.checked, + showMenuBar: this.refs.showMenuBar.checked, disableDirectWrite: this.refs.uiD2w != null ? this.refs.uiD2w.checked : false @@ -238,6 +239,16 @@ class UiTab extends React.Component {
+
+ +