Merge pull request #1368 from transloadit/chore/re-enable-gdrive-example

Re-enable google drive example and structure options better

website/src/examples/dashboard/app.es6

@@ -51,9 +51,9 @@ function uppyInit () {
     browserBackButtonClose: opts.browserBackButtonClose
   })
 
-  // if (opts.GoogleDrive) {
-  //   uppy.use(GoogleDrive, { target: Dashboard, serverUrl: COMPANION })
-  // }
+  if (opts.GoogleDrive) {
+    uppy.use(GoogleDrive, { target: Dashboard, serverUrl: COMPANION })
+  }
 
   if (opts.Dropbox) {
     uppy.use(Dropbox, { target: Dashboard, serverUrl: COMPANION })

website/src/examples/dashboard/app.html

@@ -2,15 +2,19 @@
 <link rel="stylesheet" href="/uppy/uppy.min.css">
 
 <div class="DashboardOptions">
-  <input type="checkbox" id="opts-DashboardInline" checked/><label for="opts-DashboardInline">Display inline</label>
-  <input type="checkbox" id="opts-autoProceed" checked/><label for="opts-autoProceed">Autoproceed</label>
-  <input type="checkbox" id="opts-restrictions" checked/><label for="opts-restrictions">Restrictions</label>
-  <input type="checkbox" id="opts-Webcam" checked/><label for="opts-Webcam">Webcam</label>
-  <!-- <input type="checkbox" id="opts-GoogleDrive" checked/><label for="opts-GoogleDrive">Google Drive</label> -->
-  <input type="checkbox" id="opts-Dropbox" checked/><label for="opts-Dropbox">Dropbox</label>
-  <input type="checkbox" id="opts-Instagram" checked/><label for="opts-Instagram">Instagram</label>
-  <input type="checkbox" id="opts-Url" checked/><label for="opts-Url">Url</label>
-  <input type="checkbox" id="opts-browserBackButtonClose" checked/><label for="opts-browserBackButtonClose">Close on browser back button</label>
+  <ul>
+    <li><label for="opts-DashboardInline"><input type="checkbox" id="opts-DashboardInline" checked/> Display inline</label></li>
+    <li><label for="opts-autoProceed"><input type="checkbox" id="opts-autoProceed" checked/> Autoproceed</label></li>
+    <li><label for="opts-restrictions"><input type="checkbox" id="opts-restrictions" checked/> Restrictions</label></li>
+    <li><label for="opts-browserBackButtonClose"><input type="checkbox" id="opts-browserBackButtonClose" checked/> Close on browser back button</label></li>
+  </ul>
+  <ul>
+    <li><label for="opts-Webcam"><input type="checkbox" id="opts-Webcam" checked/> Webcam</label></li>
+    <li><label for="opts-GoogleDrive"><input type="checkbox" id="opts-GoogleDrive" checked/> Google Drive</label></li>
+    <li><label for="opts-Dropbox"><input type="checkbox" id="opts-Dropbox" checked/> Dropbox</label></li>
+    <li><label for="opts-Instagram"><input type="checkbox" id="opts-Instagram" checked/> Instagram</label></li>
+    <li><label for="opts-Url"><input type="checkbox" id="opts-Url" checked/> Url</label></li>
+  </ul>
 </div>
 
 <!-- Modal trigger -->
@@ -26,7 +30,7 @@
   var optionInputs = {
     DashboardInline: document.querySelector('#opts-DashboardInline'),
     Webcam: document.querySelector('#opts-Webcam'),
-    // GoogleDrive: document.querySelector('#opts-GoogleDrive'),
+    GoogleDrive: document.querySelector('#opts-GoogleDrive'),
     Dropbox: document.querySelector('#opts-Dropbox'),
     Instagram: document.querySelector('#opts-Instagram'),
     Url: document.querySelector('#opts-Url'),
@@ -38,7 +42,7 @@
   var defaultOpts = {
     DashboardInline: true,
     Webcam: true,
-    // GoogleDrive: false,
+    GoogleDrive: true,
     Instagram: true,
     Dropbox: true,
     Url: true,

website/themes/uppy/source/css/_examples.scss

@@ -31,8 +31,19 @@
 }
 
 .DashboardOptions {
-  margin-bottom: 1.5em;
+  margin-bottom: 20px;
   font-size: 0.8em;
 
   label { margin-right: 10px; }
 }
+
+.DashboardOptions ul {
+  padding: 0;
+  margin: 0;
+  margin-bottom: 5px;
+}
+
+.DashboardOptions li {
+  list-style: none;
+  display: inline-block;
+}