Merge pull request #5375 from paulkaplan/studio-empty-states

Add empty states for curators and projects

src/views/studio/l10n.json

@@ -11,6 +11,11 @@
     "studio.projectsHeader": "Projects",
     "studio.addProjectsHeader": "Add Projects",
     "studio.addProject": "Add",
+
+    "studio.projectsEmptyCanAdd1": "Your studio is looking a little empty.",
+    "studio.projectsEmptyCanAdd2": "Add your first project!",
+    "studio.projectsEmpty1": "This studio has no projects yet.",
+    "studio.projectsEmpty2": "Suggest projects you want to add in the comments!",
     "studio.browseProjects": "Browse Projects",
 
     "studio.creatorRole": "Studio Creator",
@@ -24,6 +29,9 @@
     "studio.inviteCuratorsHeader": "Invite Curators",
     "studio.inviteCurator": "Invite",
     "studio.curatorAcceptInvite": "Accept Invite",
+    "studio.curatorsEmptyCanAdd1": "You don’t have curators right now.",
+    "studio.curatorsEmptyCanAdd2": "Add some curators to collaborate with!",
+    "studio.curatorsEmpty1": "This studio has no curators right now.",
 
     "studio.commentsHeader": "Comments",
 

src/views/studio/studio-curators.jsx

@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
+import classNames from 'classnames';
 
 import {curators} from './lib/redux-modules';
 import Debug from './debug.jsx';
@@ -27,22 +28,48 @@ const StudioCurators = ({
             data={error}
         />}
         <div className="studio-members-grid">
-            {items.map(item =>
-                (<CuratorTile
-                    key={item.username}
-                    username={item.username}
-                    image={item.profile.images['90x90']}
-                />)
+            {items.length === 0 && !loading ? (
+                <div className="studio-empty">
+                    <img
+                        width="179"
+                        height="111"
+                        className="studio-empty-img"
+                        src="/images/studios/curators-empty.png"
+                    />
+                    {canInviteCurators ? (
+                        <div className="studio-empty-msg">
+                            <div><FormattedMessage id="studio.curatorsEmptyCanAdd1" /></div>
+                            <div><FormattedMessage id="studio.curatorsEmptyCanAdd2" /></div>
+                        </div>
+                    ) : (
+                        <div className="studio-empty-msg">
+                            <div><FormattedMessage id="studio.curatorsEmpty1" /></div>
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <React.Fragment>
+                    {items.map(item =>
+                        (<CuratorTile
+                            key={item.username}
+                            username={item.username}
+                            image={item.profile.images['90x90']}
+                        />)
+                    )}
+                    {moreToLoad &&
+                        <div className="studio-members-load-more">
+                            <button
+                                className={classNames('button', {
+                                    'mod-mutating': loading
+                                })}
+                                onClick={onLoadMore}
+                            >
+                                <FormattedMessage id="general.loadMore" />
+                            </button>
+                        </div>
+                    }
+                </React.Fragment>
             )}
-            <div className="studio-members-load-more">
-                {loading ? <small>Loading...</small> : (
-                    moreToLoad ?
-                        <button onClick={onLoadMore}>
-                            <FormattedMessage id="general.loadMore" />
-                        </button> :
-                        <small>No more to load</small>
-                )}
-            </div>
         </div>
     </div>);
 };

src/views/studio/studio-managers.jsx

@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
+import classNames from 'classnames';
 
 import {managers} from './lib/redux-modules';
 import {loadManagers} from './lib/studio-member-actions';
@@ -30,15 +31,18 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
                         image={item.profile.images['90x90']}
                     />)
                 )}
-                <div className="studio-members-load-more">
-                    {loading ? <small>Loading...</small> : (
-                        moreToLoad ?
-                            <button onClick={onLoadMore}>
-                                <FormattedMessage id="general.loadMore" />
-                            </button> :
-                            <small>No more to load</small>
-                    )}
-                </div>
+                {moreToLoad &&
+                    <div className="studio-members-load-more">
+                        <button
+                            className={classNames('button', {
+                                'mod-mutating': loading
+                            })}
+                            onClick={onLoadMore}
+                        >
+                            <FormattedMessage id="general.loadMore" />
+                        </button>
+                    </div>
+                }
             </div>
         </div>
     );

src/views/studio/studio-projects.jsx

@@ -10,6 +10,7 @@ import Debug from './debug.jsx';
 import StudioProjectAdder from './studio-project-adder.jsx';
 import StudioProjectTile from './studio-project-tile.jsx';
 import {loadProjects} from './lib/studio-project-actions.js';
+import classNames from 'classnames';
 
 const StudioProjects = ({
     canAddProjects, canEditOpenToAll, items, error, loading, moreToLoad, onLoadMore
@@ -28,27 +29,64 @@ const StudioProjects = ({
                 data={error}
             />}
             <div className="studio-projects-grid">
-                {items.map(item =>
-                    (<StudioProjectTile
-                        fetching={loading}
-                        key={item.id}
-                        id={item.id}
-                        title={item.title}
-                        image={item.image}
-                        avatar={item.avatar['90x90']}
-                        username={item.username}
-                        addedBy={item.actor_id}
-                    />)
+                {items.length === 0 && !loading ? (
+                    <div className="studio-empty">
+                        {canAddProjects ? (
+                            <React.Fragment>
+                                <img
+                                    width="388"
+                                    height="265"
+                                    className="studio-empty-img"
+                                    src="/images/studios/projects-empty-can-add.png"
+                                />
+                                <div className="studio-empty-msg">
+                                    <div><FormattedMessage id="studio.projectsEmptyCanAdd1" /></div>
+                                    <div><FormattedMessage id="studio.projectsEmptyCanAdd2" /></div>
+                                </div>
+                            </React.Fragment>
+                        ) : (
+                            <React.Fragment>
+                                <img
+                                    width="186"
+                                    height="138"
+                                    className="studio-empty-img"
+                                    src="/images/studios/projects-empty.png"
+                                />
+                                <div className="studio-empty-msg">
+                                    <div><FormattedMessage id="studio.projectsEmpty1" /></div>
+                                    <div><FormattedMessage id="studio.projectsEmpty2" /></div>
+                                </div>
+                            </React.Fragment>
+                        )}
+                    </div>
+                ) : (
+                    <React.Fragment>
+                        {items.map(item =>
+                            (<StudioProjectTile
+                                fetching={loading}
+                                key={item.id}
+                                id={item.id}
+                                title={item.title}
+                                image={item.image}
+                                avatar={item.avatar['90x90']}
+                                username={item.username}
+                                addedBy={item.actor_id}
+                            />)
+                        )}
+                        {moreToLoad &&
+                            <div className="studio-projects-load-more">
+                                <button
+                                    className={classNames('button', {
+                                        'mod-mutating': loading
+                                    })}
+                                    onClick={onLoadMore}
+                                >
+                                    <FormattedMessage id="general.loadMore" />
+                                </button>
+                            </div>
+                        }
+                    </React.Fragment>
                 )}
-                <div className="studio-projects-load-more">
-                    {loading ? <small>Loading...</small> : (
-                        moreToLoad ?
-                            <button onClick={onLoadMore}>
-                                <FormattedMessage id="general.loadMore" />
-                            </button> :
-                            <small>No more to load</small>
-                    )}
-                </div>
             </div>
         </div>
     );

src/views/studio/studio.scss

@@ -267,6 +267,22 @@ $radius: 8px;
     }
 }
 
+.studio-empty {
+    grid-column: 1 / -1; /* take up all columns */
+    text-align: center;
+
+    .studio-empty-img {
+        margin-top: 45px;
+        margin-bottom: 25px;
+    }
+
+    .studio-empty-msg {
+        font-size: 20px;
+        line-height: 30px;
+        font-style: italic;
+    }
+}
+
 /* Modification classes for different interaction states */
 .mod-fetching { /* When a field has no content to display yet */
     position: relative;