Add collection label next to search results (#1068)

* add collection name next to title

Co-authored-by: Mike Romani <29218846+MichaelRomani@users.noreply.github.com>

* only show collection name when entries are searched

Co-authored-by: Mike Romani <29218846+MichaelRomani@users.noreply.github.com>

* add simple design to collection label

Co-authored-by: Mike Romani <29218846+MichaelRomani@users.noreply.github.com>

* remove  from higher components. Add props passing down directly from EntryListing

* fix design of collection label to top left corner

* update collection label styling to match workflow
This commit is contained in:
Sol Park
2018-02-07 17:16:20 -05:00
committed by Caleb
parent e29199003e
commit 1d41620509
6 changed files with 35 additions and 4 deletions

View File

@ -56,6 +56,12 @@
margin-bottom: 0;
}
.nc-entryListing-listCard-collection-label {
font-size: 12px;
color: var(--colorTextLead);
text-transform: uppercase;
}
.nc-entryListing-cardBody-full {
height: 100%;
}

View File

@ -7,11 +7,15 @@ import history from 'Routing/history';
import { resolvePath } from 'Lib/pathHelper';
import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
const CollectionLabel = ({ label }) =>
<h2 className="nc-entryListing-listCard-collection-label">{label}</h2>;
const EntryCard = ({
collection,
entry,
inferedFields,
publicFolder,
collectionLabel,
viewStyle = VIEW_STYLE_LIST,
}) => {
const label = entry.get('label');
@ -26,7 +30,8 @@ const EntryCard = ({
if (viewStyle === VIEW_STYLE_LIST) {
return (
<Link to={path} className="nc-entryListing-listCard">
<h2 className="nc-entryListing-listCard-title">{title}</h2>
{ collectionLabel ? <CollectionLabel label={collectionLabel}/> : null }
<h2 className="nc-entryListing-listCard-title">{ title }</h2>
</Link>
);
}
@ -35,6 +40,7 @@ const EntryCard = ({
return (
<Link to={path} className="nc-entryListing-gridCard">
<div className={c('nc-entryListing-cardBody', { 'nc-entryListing-cardBody-full': !image })}>
{ collectionLabel ? <CollectionLabel label={collectionLabel}/> : null }
<h2 className="nc-entryListing-cardHeading">{title}</h2>
</div>
{

View File

@ -45,8 +45,9 @@ export default class EntryListing extends React.Component {
return entries.map((entry, idx) => {
const collectionName = entry.get('collection');
const collection = collections.find(coll => coll.get('name') === collectionName);
const collectionLabel = collection.get('label');
const inferedFields = this.inferFields(collection);
const entryCardProps = { collection, entry, inferedFields, publicFolder, key: idx };
const entryCardProps = { collection, entry, inferedFields, publicFolder, key: idx, collectionLabel };
return <EntryCard {...entryCardProps}/>;
});
};

View File

@ -15,7 +15,6 @@
.nc-workflow-card-collection {
font-size: 14px;
font-weight: 16px;
color: var(--colorTextLead);
text-transform: uppercase;
margin-top: 12px;