Styling work. Add search filter for files/folders.

src/plugins/GoogleDrive.js

@@ -14,6 +14,7 @@ export default class Google extends Plugin {
       </svg>
     `
 
+    this.filterQuery = this.filterQuery.bind(this)
     this.getFile = this.getFile.bind(this)
     this.getFolder = this.getFolder.bind(this)
     this.handleClick = this.handleClick.bind(this)
@@ -242,34 +243,50 @@ export default class Google extends Plugin {
     this.updateState(newState)
   }
 
+  filterQuery (e) {
+    const state = this.core.getState().googleDrive
+    this.updateState(Object.assign({}, state, {
+      filterInput: e.target.value
+    }))
+  }
+
   /**
    * Render file browser
    * @param  {Object} state Google Drive state
    */
   renderTemp (state) {
+    let folders = []
+    let files = []
+    if (state.filterInput !== '') {
+      folders = state.folders.filter((folder) => folder.title.toLowerCase().indexOf(state.filterInput.toLowerCase()) !== -1).map((folder) => yo`<tr class=${(state.active[0] && state.active[0].id === folder.id) ? 'is-active' : ''} onclick=${this.handleClick.bind(this, folder)} ondblclick=${this.getSubFolder.bind(this, folder.id, folder.title)}><td><span class="UppyGoogleDrive-fileIcon"><img src=${folder.iconLink}/></span> ${folder.title}</td><td>Me</td><td>${folder.modifiedByMeDate}</td><td>-</td></tr>`)
+      files = state.files.filter((file) => file.title.toLowerCase().indexOf(state.filterInput.toLowerCase()) !== -1).map((file) => yo`<tr class=${(state.active[0] && state.active[0].id === file.id) ? 'is-active' : ''} onclick=${this.handleClick.bind(this, file)} ondblclick=${this.getFile.bind(this, file.id)}><td><span class="UppyGoogleDrive-fileIcon"><img src=${file.iconLink}/></span> ${file.title}</td><td>Me</td><td>${file.modifiedByMeDate}</td><td>-</td></tr>`)
+    } else {
+      folders = state.folders.map((folder) => yo`<tr class=${(state.active[0] && state.active[0].id === folder.id) ? 'is-active' : ''} onclick=${this.handleClick.bind(this, folder)} ondblclick=${this.getSubFolder.bind(this, folder.id, folder.title)}><td><span class="UppyGoogleDrive-fileIcon"><img src=${folder.iconLink}/></span> ${folder.title}</td><td>Me</td><td>${folder.modifiedByMeDate}</td><td>-</td></tr>`)
+      files = state.files.map((file) => yo`<tr class=${(state.active[0] && state.active[0].id === file.id) ? 'is-active' : ''} onclick=${this.handleClick.bind(this, file)} ondblclick=${this.getFile.bind(this, file.id)}><td><span class="UppyGoogleDrive-fileIcon"><img src=${file.iconLink}/></span> ${file.title}</td><td>Me</td><td>${file.modifiedByMeDate}</td><td>-</td></tr>`)
+    }
+
     const breadcrumbs = state.directory.map((dir) => yo`<li><button onclick=${this.getSubFolder.bind(this, dir.id, dir.title)}>${dir.title}</button></li> `)
-    const folders = state.folders.map((folder) => yo`<tr class=${(state.active[0] && state.active[0].id === folder.id) ? 'is-active' : ''} onclick=${this.handleClick.bind(this, folder)} ondblclick=${this.getSubFolder.bind(this, folder.id, folder.title)}><td><span class="UppyGoogleDrive-fileIcon"><img src=${folder.iconLink}/></span> ${folder.title}</td><td>Me</td><td>${folder.modifiedByMeDate}</td><td>-</td></tr>`)
-    const files = state.files.map((file) => yo`<tr class=${(state.active[0] && state.active[0].id === file.id) ? 'is-active' : ''} onclick=${this.handleClick.bind(this, file)} ondblclick=${this.getFile.bind(this, file.id)}><td><span class="UppyGoogleDrive-fileIcon"><img src=${file.iconLink}/></span> ${file.title}</td><td>Me</td><td>${file.modifiedByMeDate}</td><td>-</td></tr>`)
     const previewElem = state.active.map((preview) => {
       return yo`
         <div>
           <h1><span class="UppyGoogleDrive-fileIcon"><img src=${preview.iconLink}/></span>${preview.title}</h1>
-          ${preview.thumbnailLink ? yo`<img src=${preview.thumbnailLink}/>` : yo``}
+          ${preview.thumbnailLink ? yo`<img src=${preview.thumbnailLink} class="UppyGoogleDrive-fileThumbnail" />` : yo``}
         </div>
       `
     })
 
     return yo`
       <div>
-        <ul class="UppyGoogleDrive-sidebar">
-          <li>My Drive</li>
-          <li>Shared with me</li>
-        </ul>
         <div class="UppyGoogleDrive-header">
           <ul class="UppyGoogleDrive-breadcrumbs">
             ${breadcrumbs}
           </ul>
         </div>
+        <ul class="UppyGoogleDrive-sidebar">
+          <li><input type='text' onkeyup=${this.filterQuery} value=${state.filterInput}/></li>
+          <li>My Drive</li>
+          <li>Shared with me</li>
+        </ul>
         <table class="UppyGoogleDrive-browser">
           <thead>
             <tr>
@@ -306,7 +323,8 @@ export default class Google extends Plugin {
           title: 'My Drive',
           id: 'root'
         }],
-        active: [{}]
+        active: [{}],
+        filterInput: ''
       }
     })
 

src/scss/_googledrive.scss

@@ -1,7 +1,14 @@
 .UppyGoogleDrive-breadcrumbs {
   list-style-type: none;
   margin: 0;
-  padding: 0;
+  margin-left: 200px;
+  padding: 8px 0;
+}
+
+.UppyGoogleDrive-breadcrumbs button {
+  background: transparent;
+  border: 0;
+  font-size: 16px;
 }
 
 .UppyGoogleDrive-breadcrumbs li {
@@ -17,7 +24,6 @@
 }
 
 .UppyGoogleDrive-sidebar {
-  background-color: #eee;
   float: left;
   height: 100%;
   list-style-type: none;
@@ -35,6 +41,7 @@
   border: 1px solid #eee;
   border-collapse: collapse;
   float: left;
+  width: 50%;
 }
 
 .UppyGoogleDrive-browser td {
@@ -42,9 +49,6 @@
   padding: 8px;
 }
 
-.UppyGoogleDrive-browser thead td {
-  background-color: #eee;
-}
 .UppyGoogleDrive-browser tbody tr:last-child td {
   border-bottom: 0;
 }
@@ -58,3 +62,16 @@
   background-color: #78BDF2;
   color: #fff;
 }
+
+.UppyGoogleDrive-fileInfo {
+  float: left;
+  padding: 0 16px;
+}
+
+.UppyGoogleDrive-fileInfo .UppyGoogleDrive-fileThumbnail {
+  width: 50%;
+}
+
+.UppyGoogleDrive-fileInfo .UppyGoogleDrive-fileIcon {
+  margin-right: 8px;
+}

src/scss/_modal.scss

@@ -99,8 +99,6 @@
     overflow: visible;
   }
 
-  &:focus .UppyModalTab-name,
-  &:active .UppyModalTab-name,
   &:hover .UppyModalTab-name {
     opacity: 1;
   }