From 7ffc0ee9907dbadd3b8cdebdd0d6296d8b95dea2 Mon Sep 17 00:00:00 2001
From: Harry Hedger <hedgerh@gmail.com>
Date: Thu, 21 Apr 2016 11:18:40 -0400
Subject: [PATCH] GoogleDrive UI markup and some styling.  New render method
 for UI.

---
 src/plugins/GoogleDrive.js | 39 ++++++++++++++++++++++++++++-
 src/scss/_googledrive.scss | 50 ++++++++++++++++++++++++++++++++++++++
 src/scss/uppy.scss         |  1 +
 3 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/scss/_googledrive.scss

diff --git a/src/plugins/GoogleDrive.js b/src/plugins/GoogleDrive.js
index 21731f503..3b90dcac5 100644
--- a/src/plugins/GoogleDrive.js
+++ b/src/plugins/GoogleDrive.js
@@ -220,6 +220,43 @@ export default class Google extends Plugin {
     `
   }
 
+  renderTemp (state) {
+    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 ondblclick=${this.getSubFolder.bind(this, folder.id, folder.title)}><td>[Folder] - ${folder.title}</td><td>Me</td><td>${folder.modifiedByMeDate}</td><td>-</td></tr>`)
+    const files = state.files.map((file) => yo`<tr><td>[File] - ${file.title}</td><td>Me</td><td>${file.modifiedByMeDate}</td><td>-</td></tr>`)
+
+    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>
+        <table class="UppyGoogleDrive-browser">
+          <thead>
+            <tr>
+              <td>Name</td>
+              <td>Owner</td>
+              <td>Last Modified</td>
+              <td>Filesize</td>
+            </tr>
+          </thead>
+          <tbody>
+            ${folders}
+            ${files}
+          </tbody>
+        </table>
+        <div class="UppyGoogleDrive-fileInfo">
+          File active
+        </div>
+      </div>
+    `
+  }
+
   renderError (err) {
     return `Something went wrong.  Probably our fault. ${err}`
   }
@@ -260,7 +297,7 @@ export default class Google extends Plugin {
 
   render (state) {
     if (state.googleDrive.authenticated) {
-      return this.renderBrowser(state.googleDrive)
+      return this.renderTemp(state.googleDrive)
     } else {
       return this.renderAuth()
     }
diff --git a/src/scss/_googledrive.scss b/src/scss/_googledrive.scss
new file mode 100644
index 000000000..06292ea06
--- /dev/null
+++ b/src/scss/_googledrive.scss
@@ -0,0 +1,50 @@
+.UppyGoogleDrive-breadcrumbs {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.UppyGoogleDrive-breadcrumbs li {
+  display: inline-block;
+}
+
+.UppyGoogleDrive-breadcrumbs li:after {
+  content: '>';
+}
+
+.UppyGoogleDrive-breadcrumbs li:last-child:after {
+  content: '';
+}
+
+.UppyGoogleDrive-sidebar {
+  background-color: #eee;
+  float: left;
+  height: 100%;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  width: 200px;
+}
+
+.UppyGoogleDrive-sidebar li {
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+.UppyGoogleDrive-browser {
+  border: 1px solid #eee;
+  border-collapse: collapse;
+  float: left;
+}
+
+.UppyGoogleDrive-browser td {
+  border-bottom: 1px solid #eee;
+  padding: 8px;
+}
+
+.UppyGoogleDrive-browser thead td {
+  background-color: #eee;
+}
+.UppyGoogleDrive-browser tbody tr:last-child td {
+  border-bottom: 0;
+}
diff --git a/src/scss/uppy.scss b/src/scss/uppy.scss
index 7f9af2f78..07d865f97 100644
--- a/src/scss/uppy.scss
+++ b/src/scss/uppy.scss
@@ -5,6 +5,7 @@
 @import '_variables.scss';
 @import '_utils.scss';
 @import '_dragdrop.scss';
+@import '_googledrive.scss';
 @import '_progressbar.scss';
 @import '_progressdrawer.scss';
 @import '_spinner.scss';