Refactor provider views: inline filter, option to hide breadcrumbs, checkbox styling

src/plugins/Dashboard/index.js

@@ -41,7 +41,7 @@ module.exports = class Dashboard extends Plugin {
         selectToUpload: 'Select files to upload',
         closeModal: 'Close Modal',
         upload: 'Upload',
-        importFrom: 'Import files from',
+        importFrom: 'Import from',
         dashboardWindowTitle: 'Uppy Dashboard Window (Press escape to close)',
         dashboardTitle: 'Uppy Dashboard',
         copyLinkToClipboardSuccess: 'Link copied to clipboard.',

src/plugins/Instagram/index.js

@@ -10,7 +10,7 @@ module.exports = class Instagram extends Plugin {
     this.id = this.opts.id || 'Instagram'
     this.title = 'Instagram'
     this.icon = () => (
-      <svg aria-hidden="true" class="UppyIcon UppyModalTab-icon" width="28" height="28" viewBox="0 0 512 512">
+      <svg aria-hidden="true" class="UppyIcon" width="28" height="28" viewBox="0 0 512 512">
         <path d="M256,49.471c67.266,0,75.233.257,101.8,1.469,24.562,1.121,37.9,5.224,46.778,8.674a78.052,78.052,0,0,1,28.966,18.845,78.052,78.052,0,0,1,18.845,28.966c3.45,8.877,7.554,22.216,8.674,46.778,1.212,26.565,1.469,34.532,1.469,101.8s-0.257,75.233-1.469,101.8c-1.121,24.562-5.225,37.9-8.674,46.778a83.427,83.427,0,0,1-47.811,47.811c-8.877,3.45-22.216,7.554-46.778,8.674-26.56,1.212-34.527,1.469-101.8,1.469s-75.237-.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051,78.051,0,0,1-28.966-18.845,78.053,78.053,0,0,1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233,1.469-101.8c1.121-24.562,5.224-37.9,8.674-46.778A78.052,78.052,0,0,1,78.458,78.458a78.053,78.053,0,0,1,28.966-18.845c8.877-3.45,22.216-7.554,46.778-8.674,26.565-1.212,34.532-1.469,101.8-1.469m0-45.391c-68.418,0-77,.29-103.866,1.516-26.815,1.224-45.127,5.482-61.151,11.71a123.488,123.488,0,0,0-44.62,29.057A123.488,123.488,0,0,0,17.3,90.982C11.077,107.007,6.819,125.319,5.6,152.134,4.369,179,4.079,187.582,4.079,256S4.369,333,5.6,359.866c1.224,26.815,5.482,45.127,11.71,61.151a123.489,123.489,0,0,0,29.057,44.62,123.486,123.486,0,0,0,44.62,29.057c16.025,6.228,34.337,10.486,61.151,11.71,26.87,1.226,35.449,1.516,103.866,1.516s77-.29,103.866-1.516c26.815-1.224,45.127-5.482,61.151-11.71a128.817,128.817,0,0,0,73.677-73.677c6.228-16.025,10.486-34.337,11.71-61.151,1.226-26.87,1.516-35.449,1.516-103.866s-0.29-77-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151a123.486,123.486,0,0,0-29.057-44.62A123.487,123.487,0,0,0,421.018,17.3C404.993,11.077,386.681,6.819,359.866,5.6,333,4.369,324.418,4.079,256,4.079h0Z" />
         <path d="M256,126.635A129.365,129.365,0,1,0,385.365,256,129.365,129.365,0,0,0,256,126.635Zm0,213.338A83.973,83.973,0,1,1,339.974,256,83.974,83.974,0,0,1,256,339.973Z" />
         <circle cx="390.476" cy="121.524" r="30.23" />

src/plugins/Provider/view/Browser.js

@@ -16,6 +16,7 @@ module.exports = (props) => {
     <div class={`uppy-ProviderBrowser uppy-ProviderBrowser-viewType--${props.viewType}`}>
       <div class="uppy-ProviderBrowser-header">
         <div class={`uppy-ProviderBrowser-headerBar ${!props.showBreadcrumbs ? 'uppy-ProviderBrowser-headerBar--simple' : ''}`}>
+          <div class="uppy-Provider-breadcrumbsIcon">{props.pluginIcon && props.pluginIcon()}</div>
           {props.showBreadcrumbs && Breadcrumbs({
             getFolder: props.getFolder,
             directories: props.directories,
@@ -58,3 +59,7 @@ module.exports = (props) => {
     </div>
   )
 }
+
+// <div class="uppy-Dashboard-actions">
+//  <button class="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Dashboard-actionsBtn" type="button">Select</button>
+// </div>

src/plugins/Provider/view/Filter.js

@@ -25,6 +25,7 @@ module.exports = class Filter extends Component {
 
   handleClear (ev) {
     this.input.value = ''
+    this.props.filterQuery()
   }
 
   render () {

src/plugins/Provider/view/index.js

@@ -203,7 +203,7 @@ module.exports = class View {
   filterQuery (e) {
     const state = this.plugin.getPluginState()
     this.plugin.setPluginState(Object.assign({}, state, {
-      filterInput: e.target.value
+      filterInput: e ? e.target.value : ''
     }))
   }
 
@@ -589,7 +589,8 @@ module.exports = class View {
       viewType: this.opts.viewType,
       showTitles: this.opts.showTitles,
       showFilter: this.opts.showFilter,
-      showBreadcrumbs: this.opts.showBreadcrumbs
+      showBreadcrumbs: this.opts.showBreadcrumbs,
+      pluginIcon: this.plugin.icon
     })
 
     return Browser(browserProps)

src/scss/_provider.scss

@@ -1,4 +1,6 @@
-.uppy-Provider-auth, .uppy-Provider-error, .uppy-Provider-loading {
+.uppy-Provider-auth, 
+.uppy-Provider-error, 
+.uppy-Provider-loading {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,9 +25,28 @@
   text-align: center;
 }
 
-// .uppy-Dashboard--wide .uppy-Provider-authBtn {
-//   font-size: 17px;
-// }
+.uppy-Provider-breadcrumbs {
+  flex: 1;
+  color: darken($color-gray, 25%);
+  font-size: 12px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.uppy-Provider-breadcrumbsIcon {
+  display: inline;
+  color: darken($color-gray, 25%);
+  vertical-align: middle;
+  // position: relative;
+  // top: 1px;
+  margin-right: 8px;
+}
+
+  .uppy-Provider-breadcrumbsIcon .UppyIcon {
+    width: 13px;
+    height: 13px;
+  }
 
 .uppy-Provider-breadcrumbs button {
   @include reset-button;
@@ -48,7 +69,7 @@
 
 .uppy-Provider-breadcrumbs li ~ li:before {
   content: '/';
-  padding: 0 10px;
+  padding: 0 7px;
 }
 
 .uppy-ProviderBrowser {
@@ -77,6 +98,7 @@
   padding: 0 16px;
   background-color: lighten($color-gray, 40%);
   z-index: $zIndex-2;
+  color: darken($color-gray, 20%);
 }
 
 .uppy-ProviderBrowser-headerBar--simple {
@@ -107,10 +129,11 @@
 }
 
 .uppy-ProviderBrowser-searchInput::-webkit-input-placeholder,
-  .uppy-ProviderBrowser-searchInput::-moz-placeholder,
-  .uppy-ProviderBrowser-searchInput::-ms-input-placeholder {
-    color: rgba(119,119,119, 0.75);
-  }
+.uppy-ProviderBrowser-searchInput::-moz-placeholder,
+.uppy-ProviderBrowser-searchInput::-ms-input-placeholder {
+  color: rgba($color-gray, 0.75);
+  letter-spacing: 1px;
+}
 
 .uppy-ProviderBrowser-searchIcon {
   width: 16px;
@@ -130,6 +153,7 @@
   top: 7px;
   z-index: $zIndex-3;
   color: rgba($color-gray, 0.6);
+  cursor: pointer;
 }
 
 .uppy-ProviderBrowser-userLogout {
@@ -139,28 +163,6 @@
   &:hover { text-decoration: underline; }
 }
 
-.uppy-Provider-breadcrumbs {
-  flex: 1;
-  color: $color-black;
-  font-size: 12px;
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  // margin-left: 16px;
-  // background-color: lighten($color-gray, 40%);
-}
-
-.uppy-ProviderBrowser-breadcrumbs span {
-  font-size: 16px;
-  margin-left: 32px;
-}
-
-.uppy-ProviderBrowser-breadcrumbs span.active {
-  color: $color-asphalt-gray;
-  flex: 1;
-  font-weight: 500;
-}
-
 .uppy-ProviderBrowser-body {
   flex: 1;
   position: relative;
@@ -205,7 +207,14 @@
   }
 
   .uppy-ProviderBrowserItem {
-    padding: 10px 14px;
+    padding: 10px 15px;
+  }
+
+  .uppy-ProviderBrowserItem-inner {
+    max-width: 80%;
+    word-wrap: break-word;
+    text-align: left;
+    line-height: 1.4;
   }
 
   .uppy-ProviderBrowserItem-inner img {