Sidebar styling. Preview view.

src/plugins/GoogleDrive.js

@@ -287,8 +287,11 @@ export default class Google extends Plugin {
       previewElem = yo`
         <div>
           <h1><span class="UppyGoogleDrive-fileIcon"><img src=${state.active.iconLink}/></span>${state.active.title}</h1>
+          <ul>
+            <li>Type: ${this.getFileType(state.active)}</li>
+            <li>Modified By Me: ${state.active.modifiedByMeDate}</li>
+          </ul>
           ${state.active.thumbnailLink ? yo`<img src=${state.active.thumbnailLink} class="UppyGoogleDrive-fileThumbnail" />` : yo``}
-          <span>Type: ${this.getFileType(state.active)}</span>
         </div>
       `
     }
@@ -301,9 +304,9 @@ export default class Google extends Plugin {
           </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>
+          <li class="UppyGoogleDrive-filter"><label>Search:</label><input type='text' onkeyup=${this.filterQuery} value=${state.filterInput}/></li>
+          <li><img src="https://ssl.gstatic.com/docs/doclist/images/icon_11_collection_list_3.png"/> My Drive</li>
+          <li><img src="https://ssl.gstatic.com/docs/doclist/images/icon_11_shared_collection_list_1.png"/>Shared with me</li>
         </ul>
         <table class="UppyGoogleDrive-browser">
           <thead>

src/scss/_googledrive.scss

@@ -35,10 +35,17 @@
   padding: 8px 0;
 }
 
-.UppyGoogleDrive-breadcrumbs button {
+.UppyGoogleDrive-breadcrumbs button,
+.UppyGoogleDrive-sidebar button {
   background: transparent;
   border: 0;
   font-size: 16px;
+  outline: 0;
+}
+
+.UppyGoogleDrive-breadcrumbs button:focus,
+.UppyGoogleDrive-sidebar button:focus {
+  outline: 1px dotted #aaa;
 }
 
 .UppyGoogleDrive-breadcrumbs li {
@@ -58,13 +65,17 @@
   height: 100%;
   list-style-type: none;
   margin: 0;
-  padding: 0;
+  padding: 16px 32px;
   width: 200px;
 }
 
 .UppyGoogleDrive-sidebar li {
-  margin: 0 auto;
-  padding: 0 32px;
+  margin: 0 auto 16px;
+  padding: 0;
+}
+
+.UppyGoogleDrive-sidebar img {
+  margin-right: 8px;
 }
 
 .UppyGoogleDrive-browser {
@@ -113,3 +124,17 @@
 .UppyGoogleDrive-fileInfo .UppyGoogleDrive-fileIcon {
   margin-right: 8px;
 }
+
+.UppyGoogleDrive-sidebar label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.UppyGoogleDrive-sidebar input {
+  margin-bottom: 8px;
+  padding: 4px 0;
+}
+
+.UppyGoogleDrive-filter {
+  border: 1px solid #eee;
+}