From cdd015cfab7c5bb7511ee3b09a1720163393b4cd Mon Sep 17 00:00:00 2001 From: Evan Morikawa Date: Tue, 23 Feb 2016 10:49:12 -0800 Subject: [PATCH] feat(inbox-zero): add minimal graphic to inbox when no threads --- .../thread-list/lib/empty-state.cjsx | 16 ++++++++++++++ .../thread-list/stylesheets/empty-state.less | 20 ++++++++++++++++++ .../images/inbox-zero/inbox-zero-plain@2x.png | Bin 0 -> 8138 bytes static/variables/ui-variables.less | 1 + 4 files changed, 37 insertions(+) create mode 100644 static/images/inbox-zero/inbox-zero-plain@2x.png diff --git a/internal_packages/thread-list/lib/empty-state.cjsx b/internal_packages/thread-list/lib/empty-state.cjsx index 08f89c5b0..6ccc44edb 100644 --- a/internal_packages/thread-list/lib/empty-state.cjsx +++ b/internal_packages/thread-list/lib/empty-state.cjsx @@ -6,6 +6,7 @@ classNames = require 'classnames' NylasAPI, NylasSyncStatusStore, Message, + FocusedPerspectiveStore, WorkspaceStore} = require 'nylas-exports' EmptyMessages = [{ @@ -64,6 +65,18 @@ class ContentQuotes extends React.Component +class InboxZero extends React.Component + @displayName = "Inbox Zero" + + render: -> + msg = @props.messageOverride ? "No more messages" +
+
+ +
Hooray! You’re done.
+
+
class EmptyState extends React.Component @displayName = 'EmptyState' @@ -107,6 +120,9 @@ class EmptyState extends React.Component if @state.syncing messageOverride = "Please wait while we prepare your mailbox." + if FocusedPerspectiveStore.current()?.name is "Inbox" + ContentComponent = InboxZero + classes = classNames 'empty-state': true 'visible': @props.visible diff --git a/internal_packages/thread-list/stylesheets/empty-state.less b/internal_packages/thread-list/stylesheets/empty-state.less index 7ffb3aba5..5cf488a6f 100644 --- a/internal_packages/thread-list/stylesheets/empty-state.less +++ b/internal_packages/thread-list/stylesheets/empty-state.less @@ -19,6 +19,26 @@ height: 100%; } + .inbox-zero { + text-align: center; + position: relative; + .inbox-zero-plain { + position: relative; + top: 50%; + transform: translate(0, -50%); + img { + } + .message { + margin-top: 70px; + } + } + .message { + font-size: 28px; + color: @text-color-subtle; + font-weight: @font-weight-thin; + } + } + // Generic Mode .generic { text-align: center; diff --git a/static/images/inbox-zero/inbox-zero-plain@2x.png b/static/images/inbox-zero/inbox-zero-plain@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..0bd3775cf944473f38e43ba66e85ba4a6dcebdd9 GIT binary patch literal 8138 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 literal 0 HcmV?d00001 diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less index f1991c7e5..ea1fc363c 100644 --- a/static/variables/ui-variables.less +++ b/static/variables/ui-variables.less @@ -97,6 +97,7 @@ @font-family-heading: @font-family-sans-serif; // ----- Font Weights ----- +@font-weight-thin: 200; @font-weight-blond: 300; @font-weight-normal: 400; @font-weight-medium: 500;