From 129ef6766b064fdacab2319929ae965bc235969a Mon Sep 17 00:00:00 2001 From: pfftdammitchris Date: Mon, 19 Feb 2018 10:17:36 -0800 Subject: [PATCH 1/4] Add storage labels to 'All Notes' Added storage labelings to 'All Notes' in Default and Compressed views --- browser/components/NoteItem.js | 53 ++++++++++++++++++-------- browser/components/NoteItem.styl | 33 +++++++++++----- browser/components/NoteItemSimple.js | 22 +++++++++-- browser/components/NoteItemSimple.styl | 11 ++++-- browser/main/NoteList/index.js | 9 +++++ 5 files changed, 96 insertions(+), 32 deletions(-) diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js index 31769abf..e55db70a 100644 --- a/browser/components/NoteItem.js +++ b/browser/components/NoteItem.js @@ -46,11 +46,21 @@ const TagElementList = (tags) => { * @param {Function} handleDragStart * @param {string} dateDisplay */ -const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname }) => ( +const NoteItem = ({ + isActive, + isAllNotesView, + note, + dateDisplay, + handleNoteClick, + handleNoteContextMenu, + handleDragStart, + pathname, + storage +}) => (
handleNoteClick(e, `${note.storage}-${note.key}`)} onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)} @@ -68,23 +78,34 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont : Empty }
+ {isAllNotesView &&
+
{dateDisplay}
+
+
+ + {storage.name} + +
+
+
} -
{dateDisplay}
- {note.isStarred - ? : '' - } - {note.isPinned && !pathname.match(/\/starred|\/trash/) - ? : '' - } - {note.type === 'MARKDOWN_NOTE' - ? - : '' - }
{note.tags.length > 0 ? TagElementList(note.tags) - : + : No tags + } +
+
+ {note.isStarred + ? : '' + } + {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/) + ? : '' + } + {note.type === 'MARKDOWN_NOTE' + ? + : '' }
diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index c57908b0..5a8be3c5 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -90,6 +90,25 @@ $control-height = 30px font-weight normal color $ui-inactive-text-color +.item-middle + font-size 13px + padding-left 2px + padding-bottom 2px + +.item-middle-time + color $ui-inactive-text-color + display inline-block + +.item-middle-app-meta + display inline-block + float right + opacity 0.8 + +.item-middle-app-meta-label + color $ui-inactive-text-color + opacity 0.6 + padding 0 3px + .item-bottom position relative bottom 0px @@ -124,9 +143,7 @@ $control-height = 30px padding-bottom 2px .item-star - position absolute - right -6px - bottom 23px + position relative width 16px height 16px color alpha($ui-favorite-star-button-color, 60%) @@ -135,9 +152,7 @@ $control-height = 30px border-radius 17px .item-pin - position absolute - right 0px - bottom 2px + position relative width 34px height 34px color #E54D42 @@ -192,7 +207,7 @@ body[data-theme="dark"] .item-bottom-tagList-item transition 0.15s background-color alpha(white, 10%) - color $ui-dark-text-color + color $ui-dark-text-color .item-wrapper border-color alpha($ui-dark-button--active-backgroundColor, 60%) @@ -266,7 +281,7 @@ body[data-theme="solarized-dark"] .item-bottom-tagList-item transition 0.15s background-color alpha($ui-solarized-dark-noteList-backgroundColor, 10%) - color $ui-solarized-dark-text-color + color $ui-solarized-dark-text-color .item-wrapper border-color alpha($ui-solarized-dark-button--active-backgroundColor, 60%) @@ -304,4 +319,4 @@ body[data-theme="solarized-dark"] .item-bottom-tagList-empty color $ui-inactive-text-color - vertical-align middle \ No newline at end of file + vertical-align middle diff --git a/browser/components/NoteItemSimple.js b/browser/components/NoteItemSimple.js index 6b0dd4e0..0d2465e9 100644 --- a/browser/components/NoteItemSimple.js +++ b/browser/components/NoteItemSimple.js @@ -14,11 +14,20 @@ import styles from './NoteItemSimple.styl' * @param {Function} handleNoteContextMenu * @param {Function} handleDragStart */ -const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname }) => ( +const NoteItemSimple = ({ + isActive, + isAllNotesView, + note, + handleNoteClick, + handleNoteContextMenu, + handleDragStart, + pathname, + storage +}) => (
handleNoteClick(e, `${note.storage}-${note.key}`)} onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)} @@ -38,6 +47,11 @@ const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu ? note.title : Empty } + {isAllNotesView &&
+ + {storage.name} + +
}
) diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index fdf0c2e3..3097b82c 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -124,7 +124,7 @@ body[data-theme="dark"] .item-simple-bottom-tagList-item transition 0.15s background-color alpha(white, 10%) - color $ui-dark-text-color + color $ui-dark-text-color .item-simple--active border-color $ui-dark-borderColor @@ -188,7 +188,7 @@ body[data-theme="solarized-dark"] .item-simple-bottom-tagList-item transition 0.15s background-color alpha(white, 10%) - color $ui-solarized-dark-text-color + color $ui-solarized-dark-text-color .item-simple--active border-color $ui-solarized-dark-borderColor @@ -206,4 +206,9 @@ body[data-theme="solarized-dark"] // background-color alpha($ui-dark-button--active-backgroundColor, 60%) color #c0392b .item-simple-bottom-tagList-item - background-color alpha(#fff, 20%) \ No newline at end of file + background-color alpha(#fff, 20%) +.item-simple-right + float right + .item-simple-right-storageName + padding-left 4px + opacity 0.4 diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index cb71ac07..8ec64ec8 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.getNoteStorage = this.getNoteStorage.bind(this) // TODO: not Selected noteKeys but SelectedNote(for reusing) this.state = { @@ -691,6 +692,10 @@ class NoteList extends React.Component { }) } + getNoteStorage (note) { // note.storage = storage key + return this.props.data.storageMap.toJS()[note.storage] + } + render () { const { location, config } = this.props let { notes } = this.props @@ -745,6 +750,7 @@ class NoteList extends React.Component { return ( ) } @@ -759,12 +766,14 @@ class NoteList extends React.Component { return ( ) }) From 2a26e8a010dc1c505cf0562c06ceeb51b944b8bc Mon Sep 17 00:00:00 2001 From: pfftdammitchris Date: Thu, 22 Feb 2018 17:31:31 -0800 Subject: [PATCH 2/4] Added folder labels to note items when viewing a specific storage --- browser/components/NoteItem.js | 10 ++++++---- browser/main/NoteList/index.js | 26 ++++++++++++++++++++++---- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js index e55db70a..7abb86b9 100644 --- a/browser/components/NoteItem.js +++ b/browser/components/NoteItem.js @@ -48,14 +48,15 @@ const TagElementList = (tags) => { */ const NoteItem = ({ isActive, - isAllNotesView, note, dateDisplay, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname, - storage + storageName, + folderName, + viewType }) => (
Empty }
- {isAllNotesView &&
+ {['ALL', 'STORAGE'].includes(viewType) &&
{dateDisplay}
- {storage.name} + {viewType === 'ALL' && storageName} + {viewType === 'STORAGE' && folderName}
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index 8ec64ec8..6ba45faa 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -67,6 +67,8 @@ class NoteList extends React.Component { this.focusNote = this.focusNote.bind(this) this.pinToTop = this.pinToTop.bind(this) this.getNoteStorage = this.getNoteStorage.bind(this) + this.getNoteFolder = this.getNoteFolder.bind(this) + this.getViewType = this.getViewType.bind(this) // TODO: not Selected noteKeys but SelectedNote(for reusing) this.state = { @@ -696,6 +698,20 @@ class NoteList extends React.Component { return this.props.data.storageMap.toJS()[note.storage] } + getNoteFolder (note) { // note.folder = folder key + return _.find(this.getNoteStorage(note).folders, ({ key }) => key === note.folder) + } + + getViewType () { + const { pathname } = this.props.location + const folder = /\/folders\/[a-zA-Z0-9]+/.test(pathname) + const storage = /\/storages\/[a-zA-Z0-9]+/.test(pathname) && !folder + const allNotes = pathname === '/home' + if (allNotes) return 'ALL' + if (folder) return 'FOLDER' + if (storage) return 'STORAGE' + } + render () { const { location, config } = this.props let { notes } = this.props @@ -750,7 +766,6 @@ class NoteList extends React.Component { return ( ) } @@ -766,14 +783,15 @@ class NoteList extends React.Component { return ( ) }) From ba888a7165c5196f30e97f20aee74a04258c61e6 Mon Sep 17 00:00:00 2001 From: pfftdammitchris Date: Sat, 24 Feb 2018 07:10:46 -0800 Subject: [PATCH 3/4] Moved viewType to outer scope so it invokes once (to save resources) --- browser/main/NoteList/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index ff003479..8c3e8790 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -780,6 +780,8 @@ class NoteList extends React.Component { } }) + const viewType = this.getViewType() + const noteList = notes .map(note => { if (note == null) { @@ -807,7 +809,7 @@ class NoteList extends React.Component { pathname={location.pathname} folderName={this.getNoteFolder(note).name} storageName={this.getNoteStorage(note).name} - viewType={this.getViewType()} + viewType={viewType} /> ) } @@ -823,7 +825,7 @@ class NoteList extends React.Component { pathname={location.pathname} folderName={this.getNoteFolder(note).name} storageName={this.getNoteStorage(note).name} - viewType={this.getViewType()} + viewType={viewType} /> ) }) From 8f90bb83e77947e75d3f32a787a39256808f5b56 Mon Sep 17 00:00:00 2001 From: pfftdammitchris Date: Sat, 24 Feb 2018 08:42:02 -0800 Subject: [PATCH 4/4] Added title attributes to support long folder names and foldernames are no longer overflowing nearby elements --- browser/components/NoteItem.js | 8 +++----- browser/components/NoteItem.styl | 15 ++++++++------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js index 7abb86b9..2c93dc18 100644 --- a/browser/components/NoteItem.js +++ b/browser/components/NoteItem.js @@ -82,11 +82,9 @@ const NoteItem = ({ {['ALL', 'STORAGE'].includes(viewType) &&
{dateDisplay}
-
- - {viewType === 'ALL' && storageName} - {viewType === 'STORAGE' && folderName} - +
+ {viewType === 'ALL' && storageName} + {viewType === 'STORAGE' && folderName}
} diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 5a8be3c5..f213348a 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -100,14 +100,15 @@ $control-height = 30px display inline-block .item-middle-app-meta - display inline-block float right - opacity 0.8 - -.item-middle-app-meta-label - color $ui-inactive-text-color - opacity 0.6 - padding 0 3px + .item-middle-app-meta-label + opacity 0.4 + color $ui-inactive-text-color + padding 0 3px + white-space nowrap + text-overflow ellipsis + overflow hidden + max-width 200px .item-bottom position relative