message for empty content like placeholder

Author: Rokt33r

browser/components/MarkdownPreview.js

@@ -45,8 +45,12 @@ export default class MarkdownPreview extends React.Component {
   }
 
   render () {
+    let isEmpty = this.props.content.trim().length === 0
+    let content = isEmpty
+      ? '(Empty content)'
+      : this.props.content
     return (
-      <div className={'MarkdownPreview' + (this.props.className != null ? ' ' + this.props.className : '')} dangerouslySetInnerHTML={{__html: ' ' + markdown(this.props.content)}}/>
+      <div className={'MarkdownPreview' + (this.props.className != null ? ' ' + this.props.className : '') + (isEmpty ? ' empty' : '')} dangerouslySetInnerHTML={{__html: ' ' + markdown(content)}}/>
     )
   }
 }

browser/main/HomePage/ArticleList.js

@@ -118,7 +118,7 @@ export default class ArticleList extends React.Component {
               <ModeIcon className='mode' mode={article.mode}/> <div className='title' children={title}/>
             </div>
             <div className='ArticleList-item-middle2'>
-              <pre><code children={article.content.substring(0, 50)}/></pre>
+              <pre><code children={article.content.trim().length === 0 ? '(Empty content)' : article.content.substring(0, 50)}/></pre>
             </div>
             <div className='ArticleList-item-bottom'>
               <div className='tags'><i className='fa fa-fw fa-tags'/>{tagElements}</div>

browser/styles/finder/index.styl

@@ -50,6 +50,7 @@ button, input
     width 250px
     overflow-y auto
     z-index 0
+    user-select none
     &>ul>li
       .articleItem
         padding 10px
@@ -119,5 +120,9 @@ button, input
       overflow-y auto
       .MarkdownPreview
         marked()
+        &.empty
+          color lighten(inactiveTextColor, 10%)
+          user-select none
+          font-size 14px
       .CodeEditor
         absolute top bottom left right

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

@@ -257,6 +257,10 @@ infoButton()
       border-top solid 1px borderColor
       overflow-y auto
       user-select all
+      &.empty
+        color lighten(inactiveTextColor, 10%)
+        user-select none
+        font-size 14px
     .CodeEditor
       absolute left right bottom
       top 60px