From 55e9441547ad4a1a909a034602f7baa293e4597a Mon Sep 17 00:00:00 2001 From: Nikolay Lopin Date: Sat, 17 Feb 2018 00:37:36 +0300 Subject: [PATCH 1/7] Introduce RestoreButton component instead of plain JSX --- browser/main/Detail/MarkdownNoteDetail.js | 6 ++---- browser/main/Detail/RestoreButton.js | 21 +++++++++++++++++++++ browser/main/Detail/RestoreButton.styl | 22 ++++++++++++++++++++++ browser/main/Detail/SnippetNoteDetail.js | 6 ++---- 4 files changed, 47 insertions(+), 8 deletions(-) create mode 100644 browser/main/Detail/RestoreButton.js create mode 100644 browser/main/Detail/RestoreButton.styl diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index bb76b8f3..19a3f034 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -19,6 +19,7 @@ import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig' import ConfigManager from 'browser/main/lib/ConfigManager' import TrashButton from './TrashButton' import FullscreenButton from './FullscreenButton' +import RestoreButton from './RestoreButton' import PermanentDeleteButton from './PermanentDeleteButton' import InfoButton from './InfoButton' import ToggleModeButton from './ToggleModeButton' @@ -324,10 +325,7 @@ class MarkdownNoteDetail extends React.Component { const trashTopBar =
- this.handleUndoButtonClick(e)} - /> + this.handleUndoButtonClick(e)} />
this.handleTrashButtonClick(e)} /> diff --git a/browser/main/Detail/RestoreButton.js b/browser/main/Detail/RestoreButton.js new file mode 100644 index 00000000..cb1ccec2 --- /dev/null +++ b/browser/main/Detail/RestoreButton.js @@ -0,0 +1,21 @@ +import PropTypes from 'prop-types' +import React from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './RestoreButton.styl' + +const RestoreButton = ({ + onClick +}) => ( + +) + +RestoreButton.propTypes = { + onClick: PropTypes.func.isRequired +} + +export default CSSModules(RestoreButton, styles) diff --git a/browser/main/Detail/RestoreButton.styl b/browser/main/Detail/RestoreButton.styl new file mode 100644 index 00000000..58ce745d --- /dev/null +++ b/browser/main/Detail/RestoreButton.styl @@ -0,0 +1,22 @@ +.control-restoreButton + top 115px + topBarButtonRight() + &:hover .tooltip + opacity 1 + +.tooltip + tooltip() + position absolute + pointer-events none + top 50px + left 25px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + +body[data-theme="dark"] + .control-restoreButton + topBarButtonDark() diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 366c785b..8eb85970 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 AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig' import TrashButton from './TrashButton' +import RestoreButton from './RestoreButton' import PermanentDeleteButton from './PermanentDeleteButton' import InfoButton from './InfoButton' import InfoPanel from './InfoPanel' @@ -588,10 +589,7 @@ class SnippetNoteDetail extends React.Component { const trashTopBar =
- this.handleUndoButtonClick(e)} - /> + this.handleUndoButtonClick(e)} />
this.handleTrashButtonClick(e)} /> From 419a4c6b2d440c3b69d798a8a7d59f95d0ce6216 Mon Sep 17 00:00:00 2001 From: Nikolay Lopin Date: Sat, 17 Feb 2018 00:38:19 +0300 Subject: [PATCH 2/7] Add "Restore note" item to menu in Trash view. --- browser/main/NoteList/index.js | 60 ++++++++++++++++++++++++++-------- 1 file changed, 46 insertions(+), 14 deletions(-) diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index 7dd28340..ea7a0a8d 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -66,6 +66,7 @@ class NoteList extends React.Component { this.deleteNote = this.deleteNote.bind(this) this.focusNote = this.focusNote.bind(this) this.pinToTop = this.pinToTop.bind(this) + this.restoreNote = this.restoreNote.bind(this) // TODO: not Selected noteKeys but SelectedNote(for reusing) this.state = { @@ -440,6 +441,7 @@ class NoteList extends React.Component { const pinLabel = note.isPinned ? 'Remove pin' : 'Pin to Top' const deleteLabel = 'Delete Note' const cloneNote = 'Clone Note' + const restoreNote = 'Restore Note' const menu = new Menu() if (!location.pathname.match(/\/starred|\/trash/)) { @@ -448,6 +450,14 @@ class NoteList extends React.Component { click: this.pinToTop })) } + + if (location.pathname.match(/\/trash/)) { + menu.append(new MenuItem({ + label: restoreNote, + click: this.restoreNote + })) + } + menu.append(new MenuItem({ label: deleteLabel, click: this.deleteNote @@ -459,28 +469,50 @@ class NoteList extends React.Component { menu.popup() } - pinToTop () { + updateSelectedNotes (updateFunc, cleanSelection = true) { const { selectedNoteKeys } = this.state const { dispatch } = this.props const notes = this.notes.map((note) => Object.assign({}, note)) const selectedNotes = findNotesByKeys(notes, selectedNoteKeys) + if (!_.isFunction(updateFunc)) { + console.warn('Update function is not defined. No update will happen') + updateFunc = (note) => { return note } + } + Promise.all( - selectedNotes.map((note) => { - note.isPinned = !note.isPinned - return dataApi - .updateNote(note.storage, note.key, note) - }) - ) - .then((updatedNotes) => { - updatedNotes.forEach((note) => { - dispatch({ - type: 'UPDATE_NOTE', - note + selectedNotes.map((note) => { + note = updateFunc(note) + return dataApi + .updateNote(note.storage, note.key, note) }) - }) + ) + .then((updatedNotes) => { + updatedNotes.forEach((note) => { + dispatch({ + type: 'UPDATE_NOTE', + note + }) + }) + }) + + if (cleanSelection) { + this.selectNextNote() + } + } + + pinToTop () { + this.updateSelectedNotes((note) => { + note.isPinned = !note.isPinned + return note + }) + } + + restoreNote () { + this.updateSelectedNotes((note) => { + note.isTrashed = false + return note }) - this.setState({ selectedNoteKeys: [] }) } deleteNote () { From e6ae45f13381a08009e17d90c7c8180321e1614e Mon Sep 17 00:00:00 2001 From: pfftdammitchris Date: Mon, 19 Feb 2018 12:27:04 -0800 Subject: [PATCH 3/7] Added option Empty Trash --- browser/components/SideNavFilter.js | 22 +++++++++---------- browser/main/SideNav/index.js | 34 +++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 11 deletions(-) diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js index dba26f92..2f839a84 100644 --- a/browser/components/SideNavFilter.js +++ b/browser/components/SideNavFilter.js @@ -17,7 +17,7 @@ import styles from './SideNavFilter.styl' const SideNavFilter = ({ isFolded, isHomeActive, handleAllNotesButtonClick, isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick, counterDelNote, - counterTotalNote, counterStarredNote + counterTotalNote, counterStarredNote, handleFilterButtonContextMenu }) => (
@@ -26,9 +26,9 @@ const SideNavFilter = ({ >
All Notes @@ -40,9 +40,9 @@ const SideNavFilter = ({ >
Starred @@ -54,12 +54,12 @@ const SideNavFilter = ({ >
- Trash + Trash {counterDelNote} diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 9b95ae3e..3ae13e58 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -1,6 +1,9 @@ import PropTypes from 'prop-types' import React from 'react' import CSSModules from 'browser/lib/CSSModules' +const { remote } = require('electron') +const { Menu } = remote +import dataApi from 'browser/main/lib/dataApi' import styles from './SideNav.styl' import { openModal } from 'browser/main/lib/modal' import PreferencesModal from '../modals/PreferencesModal' @@ -89,6 +92,7 @@ class SideNav extends React.Component { counterTotalNote={data.noteMap._map.size - data.trashedSet._set.size} counterStarredNote={data.starredSet._set.size} counterDelNote={data.trashedSet._set.size} + handleFilterButtonContextMenu={this.handleFilterButtonContextMenu.bind(this)} /> @@ -139,6 +143,36 @@ class SideNav extends React.Component { router.push(`/tags/${name}`) } + emptyTrash (entries) { + const { dispatch } = this.props + const deletionPromises = entries.map((storageAndNoteKey) => { + const storageKey = storageAndNoteKey.split('-')[0] + const noteKey = storageAndNoteKey.split('-')[1] + return dataApi.deleteNote(storageKey, noteKey) + }) + Promise.all(deletionPromises) + .then((arrayOfStorageAndNoteKeys) => { + arrayOfStorageAndNoteKeys.forEach(({ storageKey, noteKey }) => { + dispatch({ type: 'DELETE_NOTE', storageKey, noteKey }) + }) + }) + .catch((err) => { + console.error('Cannot Delete note: ' + err) + }) + console.log('Trash emptied') + } + + handleFilterButtonContextMenu (event) { + const { location, data } = this.props + if (location.pathname === '/trashed') { + const entries = data.trashedSet.toJS() + const menu = Menu.buildFromTemplate([ + { label: 'Empty Trash', click: () => this.emptyTrash(entries) } + ]) + menu.popup() + } + } + render () { const { data, location, config, dispatch } = this.props From c2afdba6592aa959dadafab897f383e67e118831 Mon Sep 17 00:00:00 2001 From: pfftdammitchris Date: Mon, 19 Feb 2018 12:41:36 -0800 Subject: [PATCH 4/7] Removed useless url route check --- browser/main/SideNav/index.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 3ae13e58..2120220b 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -163,14 +163,12 @@ class SideNav extends React.Component { } handleFilterButtonContextMenu (event) { - const { location, data } = this.props - if (location.pathname === '/trashed') { - const entries = data.trashedSet.toJS() - const menu = Menu.buildFromTemplate([ - { label: 'Empty Trash', click: () => this.emptyTrash(entries) } - ]) - menu.popup() - } + const { data } = this.props + const entries = data.trashedSet.toJS() + const menu = Menu.buildFromTemplate([ + { label: 'Empty Trash', click: () => this.emptyTrash(entries) } + ]) + menu.popup() } render () { From 74af199afce600db94d47e94bc6395a1f555b3af Mon Sep 17 00:00:00 2001 From: pfftdammitchris Date: Mon, 19 Feb 2018 13:08:09 -0800 Subject: [PATCH 5/7] Added note counts to tags view in side nav --- browser/components/TagListItem.js | 3 ++- browser/components/TagListItem.styl | 9 ++++++++- browser/main/SideNav/index.js | 23 +++++++++++++---------- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js index 2625412a..ebef7df4 100644 --- a/browser/components/TagListItem.js +++ b/browser/components/TagListItem.js @@ -12,10 +12,11 @@ import CSSModules from 'browser/lib/CSSModules' * @param {bool} isActive */ -const TagListItem = ({name, handleClickTagListItem, isActive}) => ( +const TagListItem = ({name, handleClickTagListItem, isActive, count}) => ( ) diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl index cd3a5387..b35b30cf 100644 --- a/browser/components/TagListItem.styl +++ b/browser/components/TagListItem.styl @@ -48,6 +48,9 @@ overflow hidden text-overflow ellipsis +.tagList-item-count + padding 0 3px + body[data-theme="white"] .tagList-item color $ui-inactive-text-color @@ -63,6 +66,8 @@ body[data-theme="white"] color $ui-text-color &:hover background-color alpha($ui-button--active-backgroundColor, 60%) + .tagList-item-count + color $ui-text-color body[data-theme="dark"] .tagList-item @@ -81,4 +86,6 @@ body[data-theme="dark"] background-color alpha($ui-dark-button--active-backgroundColor, 50%) &:hover color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 50%) \ No newline at end of file + background-color alpha($ui-dark-button--active-backgroundColor, 50%) + .tagList-item-count + color $ui-dark-button--active-color diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 9b95ae3e..c31f39af 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -113,18 +113,21 @@ class SideNav extends React.Component { tagListComponent () { const { data, location } = this.props - const tagList = data.tagNoteMap.map((tag, key) => { - return key + const tagList = data.tagNoteMap.map((tag, name) => { + return { name, size: tag.size } }) return ( - tagList.map(tag => ( - - )) + tagList.map(tag => { + return ( + + ) + }) ) } From 4f15cc3f0853af0e410722dddcd7793ba793d34d Mon Sep 17 00:00:00 2001 From: pfftdammitchris Date: Tue, 20 Feb 2018 21:09:43 -0800 Subject: [PATCH 6/7] Fixed ToggleMode button overlapping CSS issue The absolute positioning of the toggle mode button was creating a static overlapping position issue with the top bar. This fix solves that problem by removing the static positioning and coupling the button component with the buttons to the right --- browser/main/Detail/MarkdownNoteDetail.js | 4 +--- browser/main/Detail/MarkdownNoteDetail.styl | 3 ++- browser/main/Detail/ToggleModeButton.styl | 6 +++--- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index bb76b8f3..1c1cfcc5 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -362,12 +362,10 @@ class MarkdownNoteDetail extends React.Component { value={this.state.note.tags} onChange={this.handleUpdateTag.bind(this)} /> - - this.handleSwitchMode(e)} editorType={editorType} /> -
+ this.handleSwitchMode(e)} editorType={editorType} /> this.handleStarButtonClick(e)} isActive={note.isStarred} diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index 652532c7..ad20f0f2 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -7,6 +7,7 @@ background-color $ui-noteDetail-backgroundColor box-shadow none padding 20px 40px + overflow hidden .lock-button padding-bottom 3px @@ -44,7 +45,7 @@ margin 0 30px .body-noteEditor absolute top bottom left right - + body[data-theme="white"] .root box-shadow $note-detail-box-shadow diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl index c69401f8..185a780c 100644 --- a/browser/main/Detail/ToggleModeButton.styl +++ b/browser/main/Detail/ToggleModeButton.styl @@ -5,8 +5,8 @@ width 52px display flex align-items center - position absolute - right 165px + position: relative + top 2px .active background-color #1EC38B width 33px @@ -55,4 +55,4 @@ body[data-theme="solarized-dark"] background-color #002B36 .active background-color #1EC38B - box-shadow 2px 0px 7px #222222 \ No newline at end of file + box-shadow 2px 0px 7px #222222 From 77542597f5d5c7f6460e1efd9c7cc2144a190ed6 Mon Sep 17 00:00:00 2001 From: Nikolay Lopin Date: Fri, 23 Feb 2018 10:26:48 +0300 Subject: [PATCH 7/7] onClick listener fix --- browser/main/Detail/RestoreButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/main/Detail/RestoreButton.js b/browser/main/Detail/RestoreButton.js index cb1ccec2..0f9c992e 100644 --- a/browser/main/Detail/RestoreButton.js +++ b/browser/main/Detail/RestoreButton.js @@ -7,7 +7,7 @@ const RestoreButton = ({ onClick }) => (