fix display of loading mask

This commit is contained in:
Nolan Lawson 2018-02-14 18:37:19 -08:00
parent 6ebb0ef394
commit a56591fb8e
5 changed files with 37 additions and 15 deletions

View File

@ -1,10 +1,12 @@
<div class="loading-container {{shown ? 'loading-container-shown' : ''}}">
<div class="loading-mask-container {{shown ? 'loading-mask-container-shown' : ''}}">
{{#if shown}}
<div class="loading-mask">
<LoadingSpinner maskStyle="true"/>
</div>
{{/if}}
</div>
<style>
.loading-container {
.loading-mask-container {
left: 0;
right: 0;
top: 0;
@ -12,9 +14,12 @@
position: fixed;
z-index: 100;
pointer-events: none;
opacity: 0;
transition: opacity 333ms linear;
}
.loading-container.loading-container-shown {
.loading-mask-container.loading-mask-container-shown {
pointer-events: auto;
opacity: 0.6;
}
.loading-mask {
width: 100%;
@ -23,17 +28,17 @@
align-items: center;
justify-content: center;
background: var(--mask-bg);
opacity: 0;
transition: opacity 333ms linear;
}
.loading-container-shown .loading-mask {
opacity: 0.6;
}
</style>
<script>
import LoadingSpinner from './LoadingSpinner.html'
import { store } from '../_store/store'
export default {
store: () => store,
computed: {
shown: ($logInToInstanceLoading) => $logInToInstanceLoading
},
components: {
LoadingSpinner
}

View File

@ -0,0 +1,17 @@
import LoadingMask from '../_components/LoadingMask.html'
let loadingMask
if (process.browser) {
loadingMask = new LoadingMask({
target: document.querySelector('#loading-mask')
})
if (process.env.NODE_ENV !== 'production') {
window.loadingMask = loadingMask // for debugging
}
} else {
loadingMask = {
}
}
export { loadingMask }

View File

@ -6,8 +6,6 @@
<SettingsLayout page='settings/instances/add' label="Add an Instance">
<h1 id="add-an-instance-h1">Add an Instance</h1>
<LoadingMask shown="{{$logInToInstanceLoading}}"/>
{{#if $isUserLoggedIn}}
<p>Connect to an instance to log in.</p>
{{else}}
@ -74,7 +72,6 @@
import Layout from '../../_components/Layout.html';
import SettingsLayout from '../_components/SettingsLayout.html'
import { store } from '../../_store/store'
import LoadingMask from '../../_components/LoadingMask'
import { logInToInstance, handleOauthCode } from '../../_actions/addInstance'
import ExternalLink from '../../_components/ExternalLink.html'
@ -88,7 +85,6 @@
components: {
Layout,
SettingsLayout,
LoadingMask,
ExternalLink
},
store: () => store,

View File

@ -102,6 +102,9 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
<!-- ModalDialog.html gets rendered here -->
<div id="modal-dialog" aria-hidden="true"></div>
<!-- LoadingMask.html gets rendered here -->
<div id="loading-mask" aria-hidden="true"></div>
<!-- Sapper creates a <script> tag containing `templates/main.js`
and anything else it needs to hydrate the app and
initialise the router -->

View File

@ -3,6 +3,7 @@ import { loadPolyfills } from '../routes/_utils/loadPolyfills'
import '../routes/_utils/offlineNotification'
import '../routes/_utils/serviceWorkerClient'
import '../routes/_utils/historyEvents'
import '../routes/_utils/loadingMask'
loadPolyfills().then(() => {
// `routes` is an array of route objects injected by Sapper