Unsplash: UI improvements (#3438)

* add extra dot before file size

* show search term at the top when displaying results

* add inline search to result screen

* update locale

* update locale

* remove comments

* improve semantics, remove duplicate event handlers

packages/@uppy/core/src/locale.js

@@ -47,7 +47,7 @@ module.exports = {
     signInWithGoogle: 'Sign in with Google',
     searchImages: 'Search for images',
     enterTextToSearch: 'Enter text to search for images',
-    backToSearch: 'Back to Search',
+    search: 'Search',
     emptyFolderAdded: 'No files were added from empty folder',
     folderAlreadyAdded: 'The folder "%{folder}" was already added',
     folderAdded: {

packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js

@@ -48,6 +48,7 @@ const renderAuthor = (props) => {
         <Fragment>
           {` ${dot} `}
           {providerName}
+          {` ${dot} `}
         </Fragment>
       ) : null}
     </div>

packages/@uppy/locales/src/en_US.js

@@ -20,7 +20,6 @@ en_US.strings = {
   authenticateWith: 'Connect to %{pluginName}',
   authenticateWithTitle: 'Please authenticate with %{pluginName} to select files',
   back: 'Back',
-  backToSearch: 'Back to Search',
   browse: 'browse',
   browseFiles: 'browse files',
   browseFolders: 'browse folders',
@@ -133,6 +132,7 @@ en_US.strings = {
   rotate: 'Rotate',
   save: 'Save',
   saveChanges: 'Save changes',
+  search: 'Search',
   searchImages: 'Search for images',
   selectX: {
     '0': 'Select %{smart_count}',

packages/@uppy/provider-views/src/Filter.js

@@ -15,9 +15,9 @@ module.exports = class Filter extends Component {
 
   render () {
     return (
-      <div className="uppy-ProviderBrowser-search">
+      <div className="uppy-ProviderBrowser-filter">
         <input
-          className="uppy-u-reset uppy-ProviderBrowser-searchInput"
+          className="uppy-u-reset uppy-ProviderBrowser-filterInput"
           type="text"
           placeholder={this.props.i18n('filter')}
           aria-label={this.props.i18n('filter')}
@@ -27,12 +27,12 @@ module.exports = class Filter extends Component {
           onInput={(e) => this.props.filterQuery(e)}
           value={this.props.filterInput}
         />
-        <svg aria-hidden="true" focusable="false" className="uppy-c-icon uppy-ProviderBrowser-searchIcon" width="12" height="12" viewBox="0 0 12 12">
+        <svg aria-hidden="true" focusable="false" className="uppy-c-icon uppy-ProviderBrowser-filterIcon" width="12" height="12" viewBox="0 0 12 12">
           <path d="M8.638 7.99l3.172 3.172a.492.492 0 1 1-.697.697L7.91 8.656a4.977 4.977 0 0 1-2.983.983C2.206 9.639 0 7.481 0 4.819 0 2.158 2.206 0 4.927 0c2.721 0 4.927 2.158 4.927 4.82a4.74 4.74 0 0 1-1.216 3.17zm-3.71.685c2.176 0 3.94-1.726 3.94-3.856 0-2.129-1.764-3.855-3.94-3.855C2.75.964.984 2.69.984 4.819c0 2.13 1.765 3.856 3.942 3.856z" />
         </svg>
         {this.props.filterInput && (
           <button
-            className="uppy-u-reset uppy-ProviderBrowser-searchClose"
+            className="uppy-u-reset uppy-ProviderBrowser-filterClose"
             type="button"
             aria-label={this.props.i18n('resetFilter')}
             title={this.props.i18n('resetFilter')}

packages/@uppy/provider-views/src/SearchProviderView/Header.js

@@ -1,9 +1,32 @@
 const { h } = require('preact')
 
+const SUBMIT_KEY = 13
+
 module.exports = (props) => {
+  const { searchTerm, i18n, search } = props
+
+  const handleKeyPress = (ev) => {
+    if (ev.keyCode === SUBMIT_KEY) {
+      ev.stopPropagation()
+      ev.preventDefault()
+      search(ev.target.value)
+    }
+  }
+
   return (
-    <button type="button" onClick={props.triggerSearchInput} className="uppy-u-reset uppy-ProviderBrowser-userLogout">
-      {props.i18n('backToSearch')}
-    </button>
+    <div class="uppy-ProviderBrowser-search">
+      <input
+        class="uppy-u-reset uppy-ProviderBrowser-searchInput"
+        type="text"
+        placeholder={i18n('search')}
+        aria-label={i18n('search')}
+        value={searchTerm}
+        onKeyUp={handleKeyPress}
+        data-uppy-super-focusable
+      />
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon uppy-ProviderBrowser-searchIcon" width="12" height="12" viewBox="0 0 12 12">
+        <path d="M8.638 7.99l3.172 3.172a.492.492 0 1 1-.697.697L7.91 8.656a4.977 4.977 0 0 1-2.983.983C2.206 9.639 0 7.481 0 4.819 0 2.158 2.206 0 4.927 0c2.721 0 4.927 2.158 4.927 4.82a4.74 4.74 0 0 1-1.216 3.17zm-3.71.685c2.176 0 3.94-1.726 3.94-3.856 0-2.129-1.764-3.855-3.94-3.855C2.75.964.984 2.69.984 4.819c0 2.13 1.765 3.856 3.942 3.856z" />
+      </svg>
+    </div>
   )
 }

packages/@uppy/provider-views/src/SearchProviderView/InputView.js

@@ -18,7 +18,7 @@ module.exports = (props) => {
     <div className="uppy-SearchProvider">
       <input
         className="uppy-u-reset uppy-c-textInput uppy-SearchProvider-input"
-        type="text"
+        type="search"
         aria-label={props.i18n('enterTextToSearch')}
         placeholder={props.i18n('enterTextToSearch')}
         onKeyUp={handleKeyPress}

packages/@uppy/provider-views/src/SearchProviderView/SearchProviderView.js

@@ -12,8 +12,6 @@ const View = require('../View')
 module.exports = class SearchProviderView extends View {
   static VERSION = require('../../package.json').version
 
-  #searchTerm
-
   /**
    * @param {object} plugin instance of the plugin
    * @param {object} opts
@@ -49,8 +47,8 @@ module.exports = class SearchProviderView extends View {
       folders: [],
       directories: [],
       filterInput: '',
-      isSearchVisible: false,
       currentSelection: [],
+      searchTerm: null,
     })
   }
 
@@ -58,17 +56,29 @@ module.exports = class SearchProviderView extends View {
     // Nothing.
   }
 
+  clearSelection () {
+    this.plugin.setPluginState({
+      currentSelection: [],
+      isInputMode: true,
+      files: [],
+      searchTerm: null,
+    })
+  }
+
   #updateFilesAndInputMode (res, files) {
     this.nextPageQuery = res.nextPageQuery
-    this.#searchTerm = res.searchedFor
     res.items.forEach((item) => { files.push(item) })
-    this.plugin.setPluginState({ isInputMode: false, files })
+    this.plugin.setPluginState({
+      isInputMode: false,
+      files,
+      searchTerm: res.searchedFor,
+    })
   }
 
   search (query) {
-    if (query && query === this.#searchTerm) {
+    const { searchTerm } = this.plugin.getPluginState()
+    if (query && query === searchTerm) {
       // no need to search again as this is the same as the previous search
-      this.plugin.setPluginState({ isInputMode: false })
       return
     }
 
@@ -92,8 +102,8 @@ module.exports = class SearchProviderView extends View {
       this.isHandlingScroll = true
 
       try {
-        const response = await this.provider.search(this.#searchTerm, query)
-        const { files } = this.plugin.getPluginState()
+        const { files, searchTerm } = this.plugin.getPluginState()
+        const response = await this.provider.search(searchTerm, query)
 
         this.#updateFilesAndInputMode(response, files)
       } catch (error) {
@@ -114,7 +124,7 @@ module.exports = class SearchProviderView extends View {
   }
 
   render (state, viewOptions = {}) {
-    const { didFirstRender, isInputMode } = this.plugin.getPluginState()
+    const { didFirstRender, isInputMode, searchTerm } = this.plugin.getPluginState()
 
     if (!didFirstRender) {
       this.preFirstRender()
@@ -135,8 +145,9 @@ module.exports = class SearchProviderView extends View {
       done: this.donePicking,
       cancel: this.cancelPicking,
       headerComponent: Header({
-        triggerSearchInput: this.triggerSearchInput,
+        search: this.search,
         i18n: this.plugin.uppy.i18n,
+        searchTerm,
       }),
       title: this.plugin.title,
       viewType: targetViewOptions.viewType,

packages/@uppy/provider-views/src/style.scss

@@ -185,6 +185,7 @@
   .uppy-size--md & {
     display: flex;
     align-items: center;
+    flex-direction: column;
   }
 
   [data-uppy-theme="dark"] & {
@@ -204,7 +205,9 @@
   vertical-align: middle;
 }
 
-.uppy-ProviderBrowser-search {
+// Filter
+
+.uppy-ProviderBrowser-filter {
   position: relative;
   display: flex;
   align-items: center;
@@ -219,7 +222,7 @@
   }
 }
 
-.uppy-ProviderBrowser-searchIcon {
+.uppy-ProviderBrowser-filterIcon {
   position: absolute;
   z-index: $zIndex-3;
   width: 12px;
@@ -228,7 +231,7 @@
   inset-inline-start: 16px;
 }
 
-.uppy-ProviderBrowser-searchInput {
+.uppy-ProviderBrowser-filterInput {
   z-index: $zIndex-2;
   width: 100%;
   height: 30px;
@@ -248,7 +251,7 @@
   }
 }
 
-.uppy-ProviderBrowser-searchInput:focus {
+.uppy-ProviderBrowser-filterInput:focus {
   background-color: $gray-100;
   outline: 0;
 
@@ -257,24 +260,59 @@
   }
 }
 
-.uppy-ProviderBrowser-searchClose {
-  position: absolute;
-  top: 4px;
-  z-index: $zIndex-3;
-  width: 22px;
-  height: 22px;
-  padding: 6px;
+.uppy-ProviderBrowser-filterInput::placeholder {
   color: $gray-500;
-  cursor: pointer;
-  inset-inline-end: 12px;
+  opacity: 1;
+}
 
-  &:hover {
-    color: $gray-600;
+// Search
+
+.uppy-ProviderBrowser-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 30px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.uppy-ProviderBrowser-searchInput {
+  z-index: $zIndex-2;
+  width: 100%;
+  height: 30px;
+  font-size: 13px;
+  font-family: $font-family-base;
+  line-height: 1.4;
+  background-color: $gray-200;
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  padding-inline-start: 30px;
+  color: $gray-800;
+
+  [data-uppy-theme="dark"] & {
+    color: $gray-200;
+    background-color: $gray-900;
+  }
+}
+
+.uppy-ProviderBrowser-searchInput:focus {
+  background-color: $gray-300;
+  outline: 0;
+
+  [data-uppy-theme="dark"] & {
+    background-color: $gray-800;
   }
 }
 
-.uppy-ProviderBrowser-searchClose svg {
-  vertical-align: text-top;
+.uppy-ProviderBrowser-searchIcon {
+  position: absolute;
+  z-index: $zIndex-3;
+  width: 12px;
+  height: 12px;
+  color: $gray-600;
+  inset-inline-start: 10px;
 }
 
 .uppy-ProviderBrowser-searchInput::placeholder {

website/src/docs/core.md

@@ -329,7 +329,7 @@ module.exports = {
     signInWithGoogle: 'Sign in with Google',
     searchImages: 'Search for images',
     enterTextToSearch: 'Enter text to search for images',
-    backToSearch: 'Back to Search',
+    search: 'Search',
     emptyFolderAdded: 'No files were added from empty folder',
     folderAlreadyAdded: 'The folder "%{folder}" was already added',
     folderAdded: {