articleのタイトルの基本タイトル追加 / 何も書かれていない時にUntitled labelをだす

Author: Rokt33r

browser/main/HomePage/ArticleDetail.js

@@ -267,6 +267,9 @@ export default class ArticleDetail extends React.Component {
     newArticle.updatedAt = new Date()
     if (newArticle.createdAt == null) {
       newArticle.createdAt = new Date()
+      if (newArticle.title.trim().length === 0) {
+        newArticle.title = `Created at ${moment(newArticle.createdAt).format('YYYY/MM/DD HH:mm')}`
+      }
       activityRecord.emit('ARTICLE_CREATE')
     } else {
       activityRecord.emit('ARTICLE_UPDATE')
@@ -464,7 +467,15 @@ export default class ArticleDetail extends React.Component {
           <div className='detailPanel'>
             <div className='header'>
               <div className='title'>
-                <input onKeyDown={e => this.handleTitleKeyDown(e)} placeholder='Title' ref='title' value={this.state.article.title} onChange={e => this.handleTitleChange(e)}/>
+                <input
+                  onKeyDown={e => this.handleTitleKeyDown(e)}
+                  placeholder={this.state.article.createdAt == null
+                    ? `Created at ${moment().format('YYYY/MM/DD HH:mm')}`
+                    : 'Title'}
+                  ref='title'
+                  value={this.state.article.title}
+                  onChange={e => this.handleTitleChange(e)}
+                />
               </div>
               <ModeSelect
                 ref='mode'

browser/main/HomePage/ArticleList.js

@@ -80,6 +80,12 @@ export default class ArticleList extends React.Component {
         : (<span>Not tagged yet</span>)
       let folder = _.findWhere(folders, {key: article.FolderKey})
 
+      let title = article.status !== NEW
+        ? article.title.trim().length === 0
+        ? <small>(Untitled)</small>
+        : article.title
+        : '(New article)'
+
       return (
         <div key={'article-' + article.key}>
           <div onClick={e => this.handleArticleClick(article)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
@@ -91,7 +97,7 @@ export default class ArticleList extends React.Component {
             <span className='updatedAt'>{article.status != null ? article.status : moment(article.updatedAt).fromNow()}</span>
             </div>
             <div className='middle'>
-              <ModeIcon className='mode' mode={article.mode}/> <div className='title'>{article.status !== NEW ? article.title : '(New article)'}</div>
+              <ModeIcon className='mode' mode={article.mode}/> <div className='title'>{title}</div>
             </div>
             <div className='bottom'>
               <div className='tags'><i className='fa fa-fw fa-tags'/>{tagElements}</div>

browser/styles/main/HomeContainer/components/ArticleList.styl

@@ -48,6 +48,8 @@ articleItemColor = #777
           left 19px
           right 0
           overflow ellipsis
+          small
+            color #AAA
       .bottom
         padding 5px 0
         overflow-x auto