From 129ef6766b064fdacab2319929ae965bc235969a Mon Sep 17 00:00:00 2001 From: pfftdammitchris Date: Mon, 19 Feb 2018 10:17:36 -0800 Subject: [PATCH] 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 ( ) })