Label cards in editorial workflow

This commit is contained in:
Benaiah Mischenko
2017-03-15 18:47:18 -07:00
parent dda4ecd50a
commit c079cb96c4
8 changed files with 93 additions and 4 deletions

View File

@ -2,12 +2,14 @@
--defaultColor: #333;
--defaultColorLight: #eee;
--backgroundColor: #fff;
--backgroundColorShaded: #eee;
--shadowColor: rgba(0, 0, 0, .25);
--infoColor: #69c;
--successColor: #1c7;
--warningColor: #fa0;
--errorColor: #f52;
--borderRadius: 2px;
--borderRadiusLarge: 10px;
--topmostZindex: 99999;
--foregroundAltColor: #fff;
--backgroundAltColor: #272e30;

View File

@ -3,8 +3,11 @@ import { DragSource, DropTarget, HTML5DragDrop } from 'react-simple-dnd';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Link } from 'react-router';
import moment from 'moment';
import pluralize from 'pluralize';
import { capitalize } from 'lodash'
import { Card, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
import Button from 'react-toolbox/lib/button';
import UnpublishedListingCardMeta from './UnpublishedListingCardMeta.js';
import { status, statusDescriptions } from '../../constants/publishModes';
import styles from './UnpublishedListing.css';
@ -68,6 +71,7 @@ class UnpublishedListing extends React.Component {
const slug = entry.get('slug');
const ownStatus = entry.getIn(['metaData', 'status']);
const collection = entry.getIn(['metaData', 'collection']);
const isModification = entry.get('isModification');
return (
<DragSource
key={slug}
@ -77,6 +81,10 @@ class UnpublishedListing extends React.Component {
>
<div className={styles.draggable}>
<Card className={styles.card}>
<UnpublishedListingCardMeta
meta={capitalize(pluralize(collection))}
label={isModification ? "" : "New"}
/>
<CardTitle
title={entry.getIn(['data', 'title'])}
subtitle={`by ${ author }`}

View File

@ -0,0 +1,25 @@
@import '../UI/theme.css';
.cardMeta {
display: flex;
align-items: center;
justify-content: space-between;
height: 34px;
padding: 0 16px;
margin-bottom: -6px;
font-size: .75em;
text-transform: uppercase;
background: var(--backgroundColorShaded);
}
.meta {}
.label {
padding: 5px 8px 4px 8px;
border-radius: var(--borderRadiusLarge);
background: var(--backgroundAltColor);
color: var(--defaultColorLight)
}

View File

@ -0,0 +1,17 @@
import React, { PropTypes } from 'react';
import styles from './UnpublishedListingCardMeta.css';
const UnpublishedListingCardMeta = ({ meta, label }) =>
<div className={styles.cardMeta}>
<span className={styles.meta}>{meta}</span>
{(label && label.length > 0)
? <span className={styles.label}>{label}</span>
: ""}
</div>;
UnpublishedListingCardMeta.propTypes = {
meta: PropTypes.string.isRequired,
label: PropTypes.string,
};
export default UnpublishedListingCardMeta;