Skip to content

GitLab

S
scratch-www
Commit c25fb3a9 authored by Paul Kaplan's avatar Paul Kaplan
Browse files
Options

Add empty states for curators and projects

parent a9d70b2c
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 44 deletions
src/views/studio/l10n.json
View file @ c25fb3a9
......@@ -11,6 +11,10 @@
"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.creatorRole": "Studio Creator",
......@@ -23,6 +27,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"
}
\ No newline at end of file
src/views/studio/studio-curators.jsx
View file @ c25fb3a9
......@@ -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
View file @ c25fb3a9
......@@ -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
View file @ c25fb3a9
......@@ -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
View file @ c25fb3a9
......@@ -236,6 +236,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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment