From c8834ed2515f9e51ec7b97b6f12de1e14b551259 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Fri, 23 Oct 2015 00:36:33 -0400
Subject: [PATCH] Add empty state for What's Happening box
---
src/components/activity/activity.jsx | 62 +++++++++++++++++-----------
src/components/box/box.scss | 4 ++
src/main.scss | 14 +++++++
3 files changed, 57 insertions(+), 23 deletions(-)
diff --git a/src/components/activity/activity.jsx b/src/components/activity/activity.jsx
index 452ecfc30..101d34cfd 100644
--- a/src/components/activity/activity.jsx
+++ b/src/components/activity/activity.jsx
@@ -1,6 +1,7 @@
var React = require('react');
var ReactIntl = require('react-intl');
var defineMessages = ReactIntl.defineMessages;
+var FormattedMessage = ReactIntl.FormattedMessage;
var FormattedRelative = ReactIntl.FormattedRelative;
var injectIntl = ReactIntl.injectIntl;
@@ -32,29 +33,44 @@ var Activity = React.createClass({
className="activity"
title={formatMessage(defaultMessages.whatsHappening)}>
- <ul>
- {this.props.items.map(function (item) {
- var actorProfileUrl = '/users/' + item.actor.username + '/';
- var actionDate = new Date(item.datetime_created + 'Z');
- var activityMessageHTML = '<a href=' + actorProfileUrl + '>' +
- item.actor.username + '</a>' + item.message;
- if (item.message.replace(/\s/g, '')) {
- return (
- <li key={item.pk}>
- <a href={actorProfileUrl}>
- <img src={item.actor.thumbnail_url} width="34" height="34" />
- <p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
- <p>
- <span className="stamp">
- <FormattedRelative value={actionDate} />
- </span>
- </p>
- </a>
- </li>
- );
- }
- })}
- </ul>
+ {this.props.items && this.props.items.length > 0 ? [
+ <ul>
+ {this.props.items.map(function (item) {
+ var actorProfileUrl = '/users/' + item.actor.username + '/';
+ var actionDate = new Date(item.datetime_created + 'Z');
+ var activityMessageHTML = '<a href=' + actorProfileUrl + '>' +
+ item.actor.username + '</a>' + item.message;
+ if (item.message.replace(/\s/g, '')) {
+ return (
+ <li key={item.pk}>
+ <a href={actorProfileUrl}>
+ <img src={item.actor.thumbnail_url} width="34" height="34" />
+ <p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
+ <p>
+ <span className="stamp">
+ <FormattedRelative value={actionDate} />
+ </span>
+ </p>
+ </a>
+ </li>
+ );
+ }
+ })}
+ </ul>
+ ] : [
+ <div className="empty">
+ <h4>
+ <FormattedMessage
+ id="activity.seeUpdates"
+ defaultMessage="This is where you will see updates from Scratchers you follow" />
+ </h4>
+ <a href="/studios/146521/">
+ <FormattedMessage
+ id="activity.checkOutScratchers"
+ defaultMessage="Check out some Scratchers you might like to follow" />
+ </a>
+ </div>
+ ]}
</Box>
);
}
diff --git a/src/components/box/box.scss b/src/components/box/box.scss
index 656b9fe53..99ef06dc0 100644
--- a/src/components/box/box.scss
+++ b/src/components/box/box.scss
@@ -44,4 +44,8 @@ $base-bg: $ui-white;
background-color: $base-bg;
padding: 8px 20px;
}
+
+ .empty {
+ margin-top: 20px;
+ }
}
diff --git a/src/main.scss b/src/main.scss
index d94f141c5..8e0916cb5 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -52,6 +52,20 @@ a:hover {
width: 942px;
}
+.empty {
+ $bg-blue: #d9edf7;
+ $bg-blue-accent: #bce8f1;
+ border: 1px solid $bg-blue-accent;
+ border-radius: 5px;
+ background-color: $bg-blue;
+ text-align: center;
+ line-height: 2rem;
+ color: $type-gray;
+ h4 {
+ color: $type-gray;
+ }
+}
+
#view {
/* NOTE: Margin should match height in navigation.scss */
margin-top: 50px;