diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js index 31769abf..2c93dc18 100644 --- a/browser/components/NoteItem.js +++ b/browser/components/NoteItem.js @@ -46,11 +46,22 @@ const TagElementList = (tags) => { * @param {Function} handleDragStart * @param {string} dateDisplay */ -const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname }) => ( +const NoteItem = ({ + isActive, + note, + dateDisplay, + handleNoteClick, + handleNoteContextMenu, + handleDragStart, + pathname, + storageName, + folderName, + viewType +}) => (
handleNoteClick(e, `${note.storage}-${note.key}`)} onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)} @@ -68,23 +79,33 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont : Empty }
+ {['ALL', 'STORAGE'].includes(viewType) &&
+
{dateDisplay}
+
+
+ {viewType === 'ALL' && storageName} + {viewType === 'STORAGE' && folderName} +
+
+
} -
{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..f213348a 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -90,6 +90,26 @@ $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 + float right + .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 bottom 0px @@ -124,9 +144,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 +153,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 +208,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 +282,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 +320,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 345dfe0d..8c3e8790 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -66,6 +66,9 @@ 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) + this.getNoteFolder = this.getNoteFolder.bind(this) + this.getViewType = this.getViewType.bind(this) this.restoreNote = this.restoreNote.bind(this) // TODO: not Selected noteKeys but SelectedNote(for reusing) @@ -723,6 +726,24 @@ class NoteList extends React.Component { }) } + getNoteStorage (note) { // note.storage = storage key + 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 @@ -759,6 +780,8 @@ class NoteList extends React.Component { } }) + const viewType = this.getViewType() + const noteList = notes .map(note => { if (note == null) { @@ -784,6 +807,9 @@ class NoteList extends React.Component { handleNoteClick={this.handleNoteClick.bind(this)} handleDragStart={this.handleDragStart.bind(this)} pathname={location.pathname} + folderName={this.getNoteFolder(note).name} + storageName={this.getNoteStorage(note).name} + viewType={viewType} /> ) } @@ -797,6 +823,9 @@ class NoteList extends React.Component { handleNoteClick={this.handleNoteClick.bind(this)} handleDragStart={this.handleDragStart.bind(this)} pathname={location.pathname} + folderName={this.getNoteFolder(note).name} + storageName={this.getNoteStorage(note).name} + viewType={viewType} /> ) })