From 825cd6a93be471ffa219ac5209c12a554d434540 Mon Sep 17 00:00:00 2001 From: sota1235 Date: Fri, 30 Dec 2016 18:11:45 +0900 Subject: [PATCH] modify: change design for note list on finder --- browser/finder/NoteItem.js | 85 ----------------- browser/finder/NoteItem.styl | 179 ----------------------------------- browser/finder/NoteList.js | 21 ++-- 3 files changed, 12 insertions(+), 273 deletions(-) delete mode 100644 browser/finder/NoteItem.js delete mode 100644 browser/finder/NoteItem.styl diff --git a/browser/finder/NoteItem.js b/browser/finder/NoteItem.js deleted file mode 100644 index a940338c..00000000 --- a/browser/finder/NoteItem.js +++ /dev/null @@ -1,85 +0,0 @@ -import React, { PropTypes } from 'react' -import CSSModules from 'browser/lib/CSSModules' -import styles from './NoteItem.styl' -import moment from 'moment' -import _ from 'lodash' - -class NoteItem extends React.Component { - constructor (props) { - super(props) - - this.state = { - } - } - - handleClick (e) { - this.props.onClick(e) - } - - render () { - let { note, folder, storage, isActive } = this.props - - let tagList = _.isArray(note.tags) - ? note.tags.map((tag) => { - return ( - - {tag} - - ) - }) - : [] - return ( -
this.handleClick(e)} - > -
-
- - {folder.name} - in {storage.name} - -
-
- -
- {note.type === 'SNIPPET_NOTE' - ? - : - } - {note.title.trim().length > 0 - ? note.title - : Empty - } -
- -
- -
- {tagList.length > 0 - ? tagList - : Not tagged yet - } -
- -
- {moment(note.updatedAt).fromNow()} -
-
-
- ) - } -} - -NoteItem.propTypes = { -} - -export default CSSModules(NoteItem, styles) diff --git a/browser/finder/NoteItem.styl b/browser/finder/NoteItem.styl deleted file mode 100644 index 4c56eada..00000000 --- a/browser/finder/NoteItem.styl +++ /dev/null @@ -1,179 +0,0 @@ -.root - position relative - border-bottom $ui-border - padding 2px 5px - user-select none - cursor pointer - transition background-color 0.15s - &:hover - background-color alpha($ui-active-color, 20%) - -.root--active - @extend .root - background-color $ui-active-color - &:hover - background-color $ui-active-color - color white - .info-left-folder - .info-left-folder-surfix - .title - .title-icon - .title-empty - .bottom-tagIcon - .bottom-tagList-item - .bottom-tagList-empty - .bottom-time - color white - .bottom-tagList-item - color white - background-color transparent - -.border - absolute top bottom left right - border-style solid - border-width 2px - border-color transparent - transition 0.15s - -.info - height 20px - clearfix() - font-size 12px - color $ui-inactive-text-color - line-height 20px - overflow-y hidden - -.info-left - float left - overflow ellipsis - -.info-left-folder - border-left 4px solid transparent - padding 2px 5px - color $ui-text-color -.info-left-folder-surfix - font-size 10px - margin-left 5px - color $ui-inactive-text-color -.info-right - float right - -.title - height 24px - box-sizing border-box - line-height 24px - height 20px - line-height 20px - padding 0 5px 0 0 - overflow ellipsis - color $ui-text-color - -.title-icon - font-size 12px - color $ui-inactive-text-color - padding-right 3px - -.title-empty - font-weight normal - color $ui-inactive-text-color - -.bottom - margin-top 2px - height 20px - font-size 12px - line-height 20px - overflow ellipsis - display flex - -.bottom-tagIcon - vertical-align middle - color $ui-button-color - height 20px - line-height 20px - -.bottom-tagList - flex 1 - overflow ellipsis - line-height 20px - -.bottom-tagList-item - margin 0 4px - padding 0 4px - height 20px - box-sizing border-box - border-radius 3px - vertical-align middle - border-style solid - border-color $ui-button--focus-borderColor - border-width 0 0 0 3px - background-color $ui-backgroundColor - color $ui-text-color - transition 0.15s - -.bottom-tagList-empty - color $ui-inactive-text-color - vertical-align middle - font-size 10px - margin-left 5px - -.bottom-time - color $ui-inactive-text-color - margin-left 5px - font-size 10px - -body[data-theme="dark"] - .root - border-color $ui-dark-borderColor - - .root--active - @extend .root - border-color $ui-dark-borderColor - &:hover - background-color $ui-active-color - .info-left-folder - .info-left-folder-surfix - .title - .title-icon - .title-empty - .bottom-tagIcon - .bottom-tagList-item - .bottom-tagList-empty - .bottom-time - color white - .bottom-tagList-item - color white - background-color transparent - - .info - color $ui-dark-inactive-text-color - - .info-left-folder - color $ui-dark-text-color - - .info-left-folder-surfix - color $ui-dark-inactive-text-color - - .title - color $ui-dark-text-color - - .title-icon - color $ui-dark-inactive-text-color - - .title-empty - color $ui-dark-inactive-text-color - - .tagList-empty - color $ui-dark-inactive-text-color - - .bottom-tagIcon - color $ui-dark-button-color - - .bottom-tagList-item - color $ui-dark-text-color - background-color $ui-dark-backgroundColor - - .bottom-tagList-empty - color $ui-dark-inactive-text-color - - .bottom-time - color $ui-dark-inactive-text-color diff --git a/browser/finder/NoteList.js b/browser/finder/NoteList.js index 30d0163a..106ac54a 100644 --- a/browser/finder/NoteList.js +++ b/browser/finder/NoteList.js @@ -1,6 +1,6 @@ import React, { PropTypes } from 'react' -import NoteItem from './NoteItem' -import _ from 'lodash' +import NoteItem from 'browser/components/NoteItem' +import moment from 'moment' class NoteList extends React.Component { constructor (props) { @@ -59,16 +59,19 @@ class NoteList extends React.Component { let notesList = notes .slice(0, 10 + 10 * this.state.range) .map((note, _index) => { - let storage = storageMap[note.storage] - let folder = _.find(storage.folders, {key: note.folder}) + + const isActive = (index === _index) + const key = `${note.storage}-${note.key}` + const dateDisplay = moment(note.updatedAt).fromNow() + return ( this.props.handleNoteClick(e, _index)} + dateDisplay={dateDisplay} + key={key} + handleNoteClick={(e) => this.props.handleNoteClick(e, _index)} + handleNoteContextMenu={() => ''} /> ) })