From dbe4ec08eec62729d6a2bfb25907ac2e34028ed1 Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Sun, 12 Nov 2017 11:36:59 -0500
Subject: [PATCH] =?UTF-8?q?hide=20inner=20content=20of=20a=20tab=20when=20?=
 =?UTF-8?q?it=E2=80=99s=20inactive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/Dashboard/Dashboard.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/plugins/Dashboard/Dashboard.js b/src/plugins/Dashboard/Dashboard.js
index add761fd1..76137c2da 100644
--- a/src/plugins/Dashboard/Dashboard.js
+++ b/src/plugins/Dashboard/Dashboard.js
@@ -7,6 +7,7 @@ const { isTouchDevice, toArray } = require('../../core/Utils')
 const { closeIcon } = require('./icons')
 
 // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
+// https://github.com/ghosh/micromodal
 
 module.exports = function Dashboard (props) {
   function handleInputChange (ev) {
@@ -48,6 +49,20 @@ module.exports = function Dashboard (props) {
     })
   }
 
+  const renderInnerPanel = (props) => {
+    return html`<div style="width: 100%; height: 100%;">
+          <div class="UppyDashboardContent-bar">
+          <h2 class="UppyDashboardContent-title">
+            ${props.i18n('importFrom')} ${props.activePanel ? props.activePanel.name : null}
+          </h2>
+          <button class="UppyDashboardContent-back"
+                type="button"
+                onclick=${props.hideAllPanels}>${props.i18n('done')}</button>
+        </div>
+        ${props.getPlugin(props.activePanel.id).render(props.state)}
+    </div>`
+  }
+
   return html`
     <div class="Uppy UppyTheme--default UppyDashboard
                           ${isTouchDevice() ? 'Uppy--isTouchDevice' : ''}
@@ -136,15 +151,7 @@ module.exports = function Dashboard (props) {
         <div class="UppyDashboardContent-panel"
              role="tabpanel"
              aria-hidden="${props.activePanel ? 'false' : 'true'}">
-          <div class="UppyDashboardContent-bar">
-            <h2 class="UppyDashboardContent-title">
-              ${props.i18n('importFrom')} ${props.activePanel ? props.activePanel.name : null}
-            </h2>
-            <button class="UppyDashboardContent-back"
-                    type="button"
-                    onclick=${props.hideAllPanels}>${props.i18n('done')}</button>
-          </div>
-          ${props.activePanel ? props.getPlugin(props.activePanel.id).render(props.state) : ''}
+         ${props.activePanel ? renderInnerPanel(props) : ''}
         </div>
 
         <div class="UppyDashboard-progressindicators">