Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-28 20:40:06 +00:00
Code Issues Projects Releases Wiki Activity

hide inner content of a tab when it’s inactive

Browse source
This commit is contained in:
Artur Paikin 2017-11-12 11:36:59 -05:00
parent da7ef3ba72
commit dbe4ec08ee
1 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/plugins/Dashboard/Dashboard.js
View file

@ -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">