Show placeholders when user has no notes (#666)

* Added placeholders that show when the app doesn't have any notes. * Adding compact (borderless) simplenote logo svg * Moved placeholders higher up into `app.jsx`. Added a new scss file for the placeholder styles. * Add 20% opacity to the placeholder text and logo. * Fixed toolbar height on mac, corrected a misspelling and used $toolbar-height var. * Don't change opacity of placeholder text, per design feedback. * RC3!
Automattic · Nov 16, 2017 · 4de4a14 · 4de4a14
1 parent 6f92ecb
commit 4de4a14
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 4 deletions.
diff --git a/lib/app.jsx b/lib/app.jsx
@@ -9,6 +9,7 @@ import { ContextMenu, MenuItem, Separator } from './context-menu';
 import * as Dialogs from './dialogs/index';
 import exportNotes from './utils/export';
 import exportToZip from './utils/export/to-zip';
+import SimplenoteCompactLogo from './icons/simplenote-compact';
 import NoteInfo from './note-info';
 import NoteList from './note-list';
 import NoteEditor from './note-editor';
@@ -402,6 +403,7 @@ export const App = connect(mapStateToProps, mapDispatchToProps)(
       const electron = get(this.state, 'electron');
       const isMacApp = isElectronMac();
       const filteredNotes = filterNotes(state);
+      const hasNotes = filteredNotes.length > 0;
 
       const noteIndex = Math.max(state.previousIndex, 0);
       const selectedNote =
@@ -439,9 +441,16 @@ export const App = connect(mapStateToProps, mapDispatchToProps)(
               )}
               <div className="source-list theme-color-bg theme-color-fg">
                 <SearchBar noteBucket={noteBucket} />
-                <NoteList noteBucket={noteBucket} />
+                {hasNotes ? (
+                  <NoteList noteBucket={noteBucket} />
+                ) : (
+                  <div className="placeholder-note-list">
+                    <span>No Notes</span>
+                  </div>
+                )}
               </div>
-              {selectedNote && (
+              {selectedNote &&
+              hasNotes && (
                 <NoteEditor
                   allTags={state.tags}
                   editorMode={state.editorMode}
@@ -462,6 +471,14 @@ export const App = connect(mapStateToProps, mapDispatchToProps)(
                   onNotePrinted={this.onNotePrinted}
                 />
               )}
+              {!hasNotes && (
+                <div className="placeholder-note-detail theme-color-border">
+                  <div className="placeholder-note-toolbar theme-color-border" />
+                  <div className="placeholder-note-editor">
+                    <SimplenoteCompactLogo />
+                  </div>
+                </div>
+              )}
               {state.showNoteInfo && <NoteInfo noteBucket={noteBucket} />}
             </div>
           ) : (

diff --git a/lib/icons/simplenote-compact.jsx b/lib/icons/simplenote-compact.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function SimplenoteCompactLogo() {
+  return (
+    <svg className="logo" width="96" height="96" viewBox="0 0 176 176">
+      <g fillRule="evenodd" clipRule="evenodd">
+        <path
+          d="M152.37 87.885c0-34.066-27.182-63.42-59.45-64.854-6.416-.284-12.647 1.432-17.58 5.573-5.002 4.196-8.07 10.09-8.638 16.595C65.43 59.73 78.537 68.618 91.225 72.09c30.69 8.398 48.462 30.086 46.655 56.757 9.057-11.194 14.49-25.442 14.49-40.962zM84.345 97.24c-28.696-7.853-45.817-29.174-43.62-54.317.027-.287.073-.567.102-.852C29.19 53.846 22 70.023 22 87.886c0 34.348 27.955 63.828 60.277 64.933 7.227.248 14.214-1.685 19.766-6.344 5.67-4.757 9.146-11.435 9.79-18.808 1.703-19.463-16.492-27.417-27.488-30.426z"
+          fill="#4895d9"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/lib/note-list.jsx b/lib/note-list.jsx
@@ -385,12 +385,13 @@ const NoteList = React.createClass({
       onEmptyTrash,
       noteDisplay,
       showTrash,
+      notes,
     } = this.props;
 
     const filterRegExp = new RegExp(escapeRegExp(filter), 'gi');
     const listItemsClasses = classNames('note-list-items', noteDisplay);
 
-    const renderNoteRow = renderNote(this.props.notes, {
+    const renderNoteRow = renderNote(notes, {
       filter,
       filterRegExp,
       noteDisplay,

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "simplenote",
   "productName": "Simplenote",
-  "version": "1.1.0-rc2",
+  "version": "1.1.0-rc3",
   "description": "Simplenote for desktop.",
   "author": "Automattic, Inc. (https://automattic.com)",
   "main": "desktop/index.js",

diff --git a/scss/app.scss b/scss/app.scss
@@ -23,6 +23,7 @@
 @import 'search-field';
 @import 'revisions';
 @import 'dialogs';
+@import 'placeholders';
 
 // Sections
 @import 'login-signup';

diff --git a/scss/general.scss b/scss/general.scss
@@ -130,6 +130,11 @@ a {
     -webkit-app-region: drag;
   }
 
+  .placeholder-note-detail .placeholder-note-toolbar {
+    height: 71px;
+    -webkit-app-region: drag;
+  }
+
   .navigation,
   .note-info {
     padding-top: 10px;

diff --git a/scss/placeholders.scss b/scss/placeholders.scss
@@ -0,0 +1,44 @@
+.placeholder-note-detail {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  border-left: 1px solid lighten($gray, 30%);
+
+  .placeholder-note-toolbar {
+    display: block;
+    height: $toolbar-height;
+    border-bottom: 1px solid lighten($gray, 30%);
+  }
+
+  .placeholder-note-editor{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      flex: 1;
+
+      .logo {
+        width: 140px;
+        height: 140px;
+        opacity: 0.2;
+
+        path {
+          fill: $gray;
+        }
+      }
+  }
+}
+
+.placeholder-note-list {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100vh;
+
+  span {
+    color: $gray;
+    font-size: 1.3em;
+  }
+}