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
2018-02-07 17:16:20 -05:00 · 2018-02-07 17:16:20 -05:00 · 1d41620509
commit 1d41620509
parent e29199003e
6 changed files with 35 additions and 4 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@ -720,6 +720,24 @@
        "design",
        "doc"
      ]
+    },
+    {
+      "login": "solpark",
+      "name": "Sol Park",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/30510616?v=4",
+      "profile": "https://github.com/solpark",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "michaelromani",
+      "name": "Michael Romani",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/29218846?v=4",
+      "profile": "https://github.com/michaelromani",
+      "contributions": [
+        "code"
+      ]
    }
  ]
 }
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # Netlify CMS

-[![All Contributors](https://img.shields.io/badge/all_contributors-84-orange.svg)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-86-orange.svg)](#contributors)
 [![Open Source Helpers](https://www.codetriage.com/netlify/netlify-cms/badges/users.svg)](https://www.codetriage.com/netlify/netlify-cms)
 [![](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/netlify/netlifycms)

@ -63,6 +63,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 | [<img src="https://avatars2.githubusercontent.com/u/799360?v=4" width="100px;"/><br /><sub><b>Bryan Robinson</b></sub>](http://bryanlrobinson.com)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=brob "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/561983?v=4" width="100px;"/><br /><sub><b>Darren</b></sub>](https://github.com/dardub)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=dardub "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/576512?v=4" width="100px;"/><br /><sub><b>Richard Pullinger</b></sub>](http://www.richardpullinger.com)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=rpullinger "Code") | [<img src="https://avatars1.githubusercontent.com/u/3718939?v=4" width="100px;"/><br /><sub><b>Taylor Bryant</b></sub>](https://taylorbryant.blog)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=taylorbryant "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/5881826?v=4" width="100px;"/><br /><sub><b>kvanerkelens</b></sub>](https://github.com/kvanerkelens)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=kvanerkelens "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/8291663?v=4" width="100px;"/><br /><sub><b>Patrick Sier</b></sub>](https://patsier.com/)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=pjsier "Code") | [<img src="https://avatars2.githubusercontent.com/u/6132191?v=4" width="100px;"/><br /><sub><b>Christian Nolte</b></sub>](http://noltech.net)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=drlogout "Code") |
 | [<img src="https://avatars1.githubusercontent.com/u/3818?v=4" width="100px;"/><br /><sub><b>Edward Betts</b></sub>](http://edwardbetts.com/)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=EdwardBetts "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/8771435?v=4" width="100px;"/><br /><sub><b>Josh Hardman</b></sub>](https://github.com/jhardman0830)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=jhardman0830 "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/11616378?v=4" width="100px;"/><br /><sub><b>Mantas</b></sub>](https://behance.net/mistermantas)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=mistermantas "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/5244986?v=4" width="100px;"/><br /><sub><b>Marco Biedermann</b></sub>](https://www.marcobiedermann.com)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=marcobiedermann "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/7525670?v=4" width="100px;"/><br /><sub><b>Max Stoiber</b></sub>](https://mxstbr.blog/newsletter)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=mxstbr "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/89368?v=4" width="100px;"/><br /><sub><b>Vyacheslav Matyukhin</b></sub>](http://berekuk.ru)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=berekuk "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/9059048?v=4" width="100px;"/><br /><sub><b>jimmaaay</b></sub>](https://jimmythompson.me)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=jimmaaay "Code") |
 | [<img src="https://avatars3.githubusercontent.com/u/802086?v=4" width="100px;"/><br /><sub><b>Luís Miguel</b></sub>](https://github.com/Quicksaver)<br />[🐛](https://github.com/netlify/netlify-cms/issues?q=author%3AQuicksaver "Bug reports") [💻](https://github.com/netlify/netlify-cms/commits?author=Quicksaver "Code") | [<img src="https://avatars2.githubusercontent.com/u/357379?v=4" width="100px;"/><br /><sub><b>Chris Swithinbank</b></sub>](http://chrisswithinbank.net/)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=delucis "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/1262221?v=4" width="100px;"/><br /><sub><b>remmah</b></sub>](https://github.com/remmah)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=remmah "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/29388?v=4" width="100px;"/><br /><sub><b>Sumeet Jain</b></sub>](http://sumeetjain.com)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=sumeetjain "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/26816046?v=4" width="100px;"/><br /><sub><b>Sagar Khatri</b></sub>](https://github.com/ragasirtahk)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=ragasirtahk "Documentation") [💡](#example-ragasirtahk "Examples") | [<img src="https://avatars0.githubusercontent.com/u/8182932?v=4" width="100px;"/><br /><sub><b>Kevin Doocey</b></sub>](https://www.dooceykev.in)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=Doocey "Code") | [<img src="https://avatars2.githubusercontent.com/u/283419?v=4" width="100px;"/><br /><sub><b>Tim Carry</b></sub>](http://www.pixelastic.com/)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=pixelastic "Code") [🎨](#design-pixelastic "Design") [📖](https://github.com/netlify/netlify-cms/commits?author=pixelastic "Documentation") |
+| [<img src="https://avatars0.githubusercontent.com/u/30510616?v=4" width="100px;"/><br /><sub><b>Sol Park</b></sub>](https://github.com/solpark)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=solpark "Code") | [<img src="https://avatars0.githubusercontent.com/u/29218846?v=4" width="100px;"/><br /><sub><b>Michael Romani</b></sub>](https://github.com/michaelromani)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=michaelromani "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
--- a/src/components/Collection/Entries/EntryCard.css
+++ b/src/components/Collection/Entries/EntryCard.css
@ -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%;
 }
--- a/src/components/Collection/Entries/EntryCard.js
+++ b/src/components/Collection/Entries/EntryCard.js
@ -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>
        {
--- a/src/components/Collection/Entries/EntryListing.js
+++ b/src/components/Collection/Entries/EntryListing.js
@ -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}/>;
    });
  };
--- a/src/components/Workflow/WorkflowCard.css
+++ b/src/components/Workflow/WorkflowCard.css
@ -15,7 +15,6 @@

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