Label cards in editorial workflow
This commit is contained in:
@ -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;
|
||||
|
@ -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 }`}
|
||||
|
@ -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)
|
||||
}
|
@ -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;
|
Reference in New Issue
Block a user