Refactor Provider views: Filter, add showFilter and showBreadcrumbs options

src/plugins/Instagram/index.js

@@ -38,7 +38,9 @@ module.exports = class Instagram extends Plugin {
   install () {
     this.view = new View(this, {
       viewType: 'grid',
-      showTitles: false
+      showTitles: false,
+      showFilter: false,
+      showBreadcrumbs: false
     })
     // Set default state for Instagram
     this.setPluginState({

src/plugins/Provider/view/Breadcrumb.js

@@ -1,5 +0,0 @@
-const { h } = require('preact')
-
-module.exports = (props) => {
-  return <li><button type="button" onclick={props.getFolder}>{props.title}</button></li>
-}

src/plugins/Provider/view/Breadcrumbs.js

@@ -1,5 +1,10 @@
 const { h } = require('preact')
-const Breadcrumb = require('./Breadcrumb')
+
+const Breadcrumb = (props) => {
+  return (
+    <li><button type="button" onclick={props.getFolder}>{props.title}</button></li>
+  )
+}
 
 module.exports = (props) => {
   return (

src/plugins/Provider/view/Browser.js

@@ -13,26 +13,18 @@ module.exports = (props) => {
   }
 
   return (
-    <div class={`uppy uppy-ProviderBrowser uppy-ProviderBrowser-viewType--${props.viewType}`}>
-      <header class="uppy-ProviderBrowser-header">
-        <div class="uppy-ProviderBrowser-search" aria-hidden={!props.isSearchVisible}>
-          { props.isSearchVisible && <Filter {...props} /> }
-        </div>
-        <div class="uppy-ProviderBrowser-headerBar">
-          <button type="button" class="uppy-ProviderBrowser-searchToggle"
-            onclick={props.toggleSearch}>
-            <svg class="UppyIcon" viewBox="0 0 100 100">
-              <path d="M87.533 80.03L62.942 55.439c3.324-4.587 5.312-10.207 5.312-16.295 0-.312-.043-.611-.092-.908.05-.301.093-.605.093-.922 0-15.36-12.497-27.857-27.857-27.857-.273 0-.536.043-.799.08-.265-.037-.526-.08-.799-.08-15.361 0-27.858 12.497-27.858 27.857 0 .312.042.611.092.909a5.466 5.466 0 0 0-.093.921c0 15.36 12.496 27.858 27.857 27.858.273 0 .535-.043.8-.081.263.038.524.081.798.081 5.208 0 10.071-1.464 14.245-3.963L79.582 87.98a5.603 5.603 0 0 0 3.976 1.647 5.621 5.621 0 0 0 3.975-9.597zM39.598 55.838c-.265-.038-.526-.081-.8-.081-9.16 0-16.612-7.452-16.612-16.612 0-.312-.042-.611-.092-.908.051-.301.093-.605.093-.922 0-9.16 7.453-16.612 16.613-16.612.272 0 .534-.042.799-.079.263.037.525.079.799.079 9.16 0 16.612 7.452 16.612 16.612 0 .312.043.611.092.909-.05.301-.094.604-.094.921 0 9.16-7.452 16.612-16.612 16.612-.274 0-.536.043-.798.081z" />
-            </svg>
-          </button>
-          {Breadcrumbs({
+    <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' : ''}`}>
+          {props.showBreadcrumbs && Breadcrumbs({
             getFolder: props.getFolder,
             directories: props.directories,
             title: props.title
           })}
           <button type="button" onclick={props.logout} class="uppy-ProviderBrowser-userLogout">Log out</button>
         </div>
-      </header>
+      </div>
+      { props.showFilter && <Filter {...props} /> }
       {Table({
         columns: [{
           name: 'Name',

src/plugins/Provider/view/Filter.js

@@ -3,13 +3,15 @@ const { h, Component } = require('preact')
 module.exports = class Filter extends Component {
   constructor (props) {
     super(props)
-
+    this.isEmpty = true
     this.handleKeyPress = this.handleKeyPress.bind(this)
+    this.handleClear = this.handleClear.bind(this)
   }
 
-  componentDidMount () {
-    this.input.focus()
-  }
+  // componentDidMount () {
+  //   this.isEmpty = true
+  //   // this.input.focus()
+  // }
 
   handleKeyPress (ev) {
     if (ev.keyCode === 13) {
@@ -17,28 +19,39 @@ module.exports = class Filter extends Component {
       ev.preventDefault()
       return
     }
+    this.isEmpty = !this.input.value.length > 0
     this.props.filterQuery(ev)
   }
 
+  handleClear (ev) {
+    this.input.value = ''
+  }
+
   render () {
-    return <div style={{ display: 'flex', width: '100%' }}>
+    return <div class="uppy-u-reset uppy-ProviderBrowser-search">
+      <svg class="UppyIcon uppy-ProviderBrowser-searchIcon" viewBox="0 0 100 100">
+        <path d="M87.533 80.03L62.942 55.439c3.324-4.587 5.312-10.207 5.312-16.295 0-.312-.043-.611-.092-.908.05-.301.093-.605.093-.922 0-15.36-12.497-27.857-27.857-27.857-.273 0-.536.043-.799.08-.265-.037-.526-.08-.799-.08-15.361 0-27.858 12.497-27.858 27.857 0 .312.042.611.092.909a5.466 5.466 0 0 0-.093.921c0 15.36 12.496 27.858 27.857 27.858.273 0 .535-.043.8-.081.263.038.524.081.798.081 5.208 0 10.071-1.464 14.245-3.963L79.582 87.98a5.603 5.603 0 0 0 3.976 1.647 5.621 5.621 0 0 0 3.975-9.597zM39.598 55.838c-.265-.038-.526-.081-.8-.081-9.16 0-16.612-7.452-16.612-16.612 0-.312-.042-.611-.092-.908.051-.301.093-.605.093-.922 0-9.16 7.453-16.612 16.613-16.612.272 0 .534-.042.799-.079.263.037.525.079.799.079 9.16 0 16.612 7.452 16.612 16.612 0 .312.043.611.092.909-.05.301-.094.604-.094.921 0 9.16-7.452 16.612-16.612 16.612-.274 0-.536.043-.798.081z" />
+      </svg>
       <input
-        class="uppy-ProviderBrowser-searchInput"
+        class="uppy-u-reset uppy-ProviderBrowser-searchInput"
         type="text"
-        placeholder="Search"
+        placeholder="Filter"
+        aria-label="Filter"
         onkeyup={this.handleKeyPress}
         onkeydown={this.handleKeyPress}
         onkeypress={this.handleKeyPress}
         value={this.props.filterInput}
         ref={(input) => { this.input = input }} />
-      <button
-        class="uppy-ProviderBrowser-searchClose"
-        type="button"
-        onclick={this.props.toggleSearch}>
-        <svg class="UppyIcon" viewBox="0 0 19 19">
-          <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
-        </svg>
-      </button>
+      { !this.isEmpty &&
+        <button
+          class="uppy-u-reset uppy-ProviderBrowser-searchClose"
+          type="button"
+          onclick={this.handleClear}>
+          <svg class="UppyIcon" viewBox="0 0 19 19">
+            <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
+          </svg>
+        </button>
+      }
     </div>
   }
 }

src/plugins/Provider/view/index.js

@@ -45,7 +45,9 @@ module.exports = class View {
     // set default options
     const defaultOptions = {
       viewType: 'list',
-      showTitles: true
+      showTitles: true,
+      showFilter: true,
+      showBreadcrumbs: true
     }
 
     // merge default options with the ones set by user
@@ -585,7 +587,9 @@ module.exports = class View {
       done: this.donePicking,
       title: this.plugin.title,
       viewType: this.opts.viewType,
-      showTitles: this.opts.showTitles
+      showTitles: this.opts.showTitles,
+      showFilter: this.opts.showFilter,
+      showBreadcrumbs: this.opts.showBreadcrumbs
     })
 
     return Browser(browserProps)

src/scss/_provider.scss

@@ -38,7 +38,7 @@
 }
 
 .uppy-Provider-breadcrumbs button:focus {
-  outline: 1px dotted #aaa;
+  outline: 1px dotted rgb(145, 145, 145);
 }
 
 .uppy-Provider-breadcrumbs li {
@@ -69,84 +69,71 @@
   position: relative;
 }
 
-::-webkit-input-placeholder {
-   color: rgba(119,119,119,0.75);
-}
-
-::-moz-placeholder {
-   color: rgba(119,119,119,0.75);
-}
-
-:-ms-input-placeholder {
-   color: rgba(119,119,119,0.75);
-}
-
 .uppy-ProviderBrowser-headerBar {
-  height: 50px;
-  line-height: 50px;
+  height: 40px;
+  line-height: 40px;
   display: flex;
   align-items: center;
-  padding-left: 16px;
+  padding: 0 16px;
   background-color: lighten($color-gray, 40%);
   z-index: $zIndex-2;
 }
 
+.uppy-ProviderBrowser-headerBar--simple {
+  text-align: center;
+  display: block;
+}
+
 .uppy-ProviderBrowser-search {
-  height: 50px;
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
-  z-index: $zIndex-3;
-  background-color: lighten($color-gray, 40%);
-  transform: translate(0, -50px);
-  transition: all .2s;
-  display: flex;
-  align-items: center;
+  background-color: $color-white;
+  position: relative;
+  height: 30px;
+  margin-top: 15px;
+  margin-bottom: 5px;
 }
 
-  .uppy-ProviderBrowser-search:not([aria-hidden=true]) {
-    transform: translate(0, 0);
-  }
-
-.uppy-ProviderBrowser-search input {
-  flex: 1;
+.uppy-ProviderBrowser-searchInput {
+  width: 100%;
+  height: 30px;
   background-color: transparent;
   outline: 0;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 50px;
+  font-family: sans-serif;
+  font-size: 14px;
+  line-height: 30px;
   border: 0;
-  padding: 0 16px;
+  padding: 0 16px 0 43px;
+  z-index: $zIndex-2;
 }
 
-
-.uppy-ProviderBrowser-searchToggle {
-  @include reset-button();
-  width: 15px;
-  cursor: pointer;
-  color: $color-gray;
-  transition: all .2s;
-
-  &:hover { color: $color-black;
+.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-searchIcon {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  left: 16px;
+  top: 7px;
+  z-index: $zIndex-3;
+  color: rgba($color-gray, 0.6);
 }
 
 .uppy-ProviderBrowser-searchClose {
-  @include reset-button();
-  cursor: pointer;
   width: 12px;
-  color: $color-gray;
-  transition: all .2s;
-  position: relative;
+  height: 12px;
+  position: absolute;
   right: 16px;
-
-  &:hover { color: $color-black; }
+  top: 7px;
+  z-index: $zIndex-3;
+  color: rgba($color-gray, 0.6);
 }
 
 .uppy-ProviderBrowser-userLogout {
   @include reset-button();
-  margin-right: 16px;
   cursor: pointer;
 
   &:hover { text-decoration: underline; }
@@ -159,7 +146,8 @@
   list-style-type: none;
   padding: 0;
   margin: 0;
-  margin-left: 16px;
+  // margin-left: 16px;
+  // background-color: lighten($color-gray, 40%);
 }
 
 .uppy-ProviderBrowser-breadcrumbs span {
@@ -210,8 +198,10 @@
 
 .uppy-ProviderBrowser-viewType--list {
 
+  background-color: $color-white;
+
   .uppy-ProviderBrowser-list {
-    padding-top: 6px;
+    // padding-top: 6px;
   }
 
   .uppy-ProviderBrowserItem {
@@ -224,7 +214,7 @@
   }
 
   .uppy-ProviderBrowserItem-checkbox label:before {
-    border-color: rgba($color-asphalt-gray, 0.3);
+    border-color: rgba($color-asphalt-gray, 0.4);
   }
 
   .uppy-ProviderBrowserItem-checkbox input:checked + label:before {
@@ -322,7 +312,7 @@
   position: relative;
   display: inline-block;
   top: -3px;
-  margin-right: 25px;
+  margin-right: 20px;
 }
 
 .uppy-ProviderBrowserItem-checkbox label {
@@ -339,12 +329,13 @@
 .uppy-ProviderBrowserItem-checkbox label:before {
   content: "";
   display: inline-block;
-  height: 20px;
-  width: 20px;
-  top: 0;
+  height: 18px;
+  width: 18px;
+  top: 2px;
   border: 1px solid $color-cornflower-blue; 
   background-color: $color-white;
-  border-radius: 50%; 
+  border-radius: 2px;
+  // border-radius: 50%;
 }
 
 // Inner checkbox
@@ -353,8 +344,8 @@
   display: inline-block;
   height: 5px;
   width: 8px;
-  left: 6px;
-  top: 7px;
+  left: 5px;
+  top: 8px;
   border-left: 2px solid $color-white;
   border-bottom: 2px solid $color-white;
   transform: rotate(-45deg);