Show author of image in UI

- Pass author data in companion - Show author on hover - SHow author always for touch devices
transloadit · Sep 14, 2021 · 5067aea · 5067aea
1 parent 4f21687
commit 5067aea
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 11 deletions.
diff --git a/packages/@uppy/companion/src/server/provider/unsplash/adapter.js b/packages/@uppy/companion/src/server/provider/unsplash/adapter.js
@@ -49,3 +49,7 @@ exports.getNextPageQuery = (currentQuery) => {
   delete query.q
   return querystring.stringify(query)
 }
+
+exports.getAuthor = (item) => {
+  return { name: item.user.name, url: item.user.links.html }
+}
diff --git a/packages/@uppy/companion/src/server/provider/unsplash/index.js b/packages/@uppy/companion/src/server/provider/unsplash/index.js
@@ -25,6 +25,7 @@ function adaptData (body, currentQuery) {
       thumbnail: adapter.getItemThumbnailUrl(item),
       requestPath: adapter.getItemRequestPath(item),
       modifiedDate: adapter.getItemModifiedDate(item),
+      author: adapter.getAuthor(item),
       size: null,
     })),
     nextPageQuery: hasNextPage

diff --git a/packages/@uppy/provider-views/src/Item/components/GridLi.js b/packages/@uppy/provider-views/src/Item/components/GridLi.js
@@ -11,6 +11,7 @@ function GridListItem (props) {
     showTitles,
     toggleCheckbox,
     id,
+    children,
   } = props
 
   return (
@@ -35,8 +36,13 @@ function GridListItem (props) {
         aria-label={title}
         className="uppy-u-reset uppy-ProviderBrowserItem-inner"
       >
-        {itemIconEl}
-        {showTitles && title}
+        <span className="uppy-ProviderBrowserItem-inner-relative">
+          {itemIconEl}
+
+          {showTitles && title}
+
+          {children}
+        </span>
       </label>
     </li>
   )

diff --git a/packages/@uppy/provider-views/src/Item/index.js b/packages/@uppy/provider-views/src/Item/index.js
@@ -1,10 +1,11 @@
 const { h } = require('preact')
 const classNames = require('classnames')
 const ItemIcon = require('./components/ItemIcon')
-const GridLi = require('./components/GridLi')
-const ListLi = require('./components/ListLi')
+const GridListItem = require('./components/GridLi')
+const ListItem = require('./components/ListLi')
 
 module.exports = (props) => {
+  const { author } = props
   const itemIconString = props.getItemIcon()
 
   const className = classNames(
@@ -18,9 +19,30 @@ module.exports = (props) => {
 
   switch (props.viewType) {
     case 'grid':
-      return <GridLi {...props} className={className} itemIconEl={itemIconEl} />
+      return (
+        <GridListItem
+          {...props}
+          className={className}
+          itemIconEl={itemIconEl}
+        />
+      )
     case 'list':
-      return <ListLi {...props} className={className} itemIconEl={itemIconEl} />
+      return (
+        <ListItem {...props} className={className} itemIconEl={itemIconEl} />
+      )
+    case 'unsplash':
+      return (
+        <GridListItem {...props} className={className} itemIconEl={itemIconEl}>
+          <a
+            href={author.url}
+            target="_blank"
+            rel="noreferrer"
+            className="uppy-ProviderBrowserItem-author"
+          >
+            {author.name}
+          </a>
+        </GridListItem>
+      )
     default:
       throw new Error(`There is no such type ${props.viewType}`)
   }

diff --git a/packages/@uppy/provider-views/src/style/uppy-ProviderBrowser-viewType--grid.scss b/packages/@uppy/provider-views/src/style/uppy-ProviderBrowser-viewType--grid.scss
@@ -1,7 +1,8 @@
 // ***
-// View type: grid
+// View type: grid and unsplash
 // ***
-.uppy-ProviderBrowser-viewType--grid {
+.uppy-ProviderBrowser-viewType--grid,
+.uppy-ProviderBrowser-viewType--unsplash {
   ul.uppy-ProviderBrowser-list {
     display: flex;
     flex-direction: row;
@@ -80,9 +81,35 @@
     text-align: center;
     border-radius: 4px;
 
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px rgba($blue, 0.9);
+    .uppy.uppy-ProviderBrowserItem-inner-relative {
+      position: relative;
+    }
+
+    .uppy-ProviderBrowserItem-author {
+      position: absolute;
+      display: none;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: rgba(black, 0.4);
+      color: white;
+      font-weight: 600;
+      margin: 0;
+      padding: 6px;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+        background: rgba(black, 0.5);
+      }
+    }
+
+    // Always show the author on touch devices
+    // https://www.w3.org/TR/mediaqueries-4/#hover
+    @media (hover: none) {
+      .uppy-ProviderBrowserItem-author {
+        display: block;
+      }
     }
 
     [data-uppy-theme="dark"] & {
@@ -122,6 +149,13 @@
     opacity: 1;
   }
 
+  .uppy-ProviderBrowserItem-checkbox--grid:hover,
+  .uppy-ProviderBrowserItem-checkbox--grid:focus {
+    + label .uppy-ProviderBrowserItem-author {
+      display: block;
+    }
+  }
+
   .uppy-ProviderBrowserItem-checkbox--grid:focus + label {
     @include clear-focus();
 

diff --git a/packages/@uppy/unsplash/src/index.js b/packages/@uppy/unsplash/src/index.js
@@ -43,6 +43,7 @@ module.exports = class Unsplash extends UIPlugin {
   install () {
     this.view = new SearchProviderViews(this, {
       provider: this.provider,
+      viewType: 'unsplash',
     })
 
     const { target } = this.opts