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' : ''}}">
<div class="loading-mask"> {{#if shown}}
<LoadingSpinner maskStyle="true"/> <div class="loading-mask">
</div> <LoadingSpinner maskStyle="true"/>
</div>
{{/if}}
</div> </div>
<style> <style>
.loading-container { .loading-mask-container {
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
@ -12,9 +14,12 @@
position: fixed; position: fixed;
z-index: 100; z-index: 100;
pointer-events: none; pointer-events: none;
opacity: 0;
transition: opacity 333ms linear;
} }
.loading-container.loading-container-shown { .loading-mask-container.loading-mask-container-shown {
pointer-events: auto; pointer-events: auto;
opacity: 0.6;
} }
.loading-mask { .loading-mask {
width: 100%; width: 100%;
@ -23,17 +28,17 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--mask-bg); background: var(--mask-bg);
opacity: 0;
transition: opacity 333ms linear;
}
.loading-container-shown .loading-mask {
opacity: 0.6;
} }
</style> </style>
<script> <script>
import LoadingSpinner from './LoadingSpinner.html' import LoadingSpinner from './LoadingSpinner.html'
import { store } from '../_store/store'
export default { export default {
store: () => store,
computed: {
shown: ($logInToInstanceLoading) => $logInToInstanceLoading
},
components: { components: {
LoadingSpinner 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"> <SettingsLayout page='settings/instances/add' label="Add an Instance">
<h1 id="add-an-instance-h1">Add an Instance</h1> <h1 id="add-an-instance-h1">Add an Instance</h1>
<LoadingMask shown="{{$logInToInstanceLoading}}"/>
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<p>Connect to an instance to log in.</p> <p>Connect to an instance to log in.</p>
{{else}} {{else}}
@ -74,7 +72,6 @@
import Layout from '../../_components/Layout.html'; import Layout from '../../_components/Layout.html';
import SettingsLayout from '../_components/SettingsLayout.html' import SettingsLayout from '../_components/SettingsLayout.html'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import LoadingMask from '../../_components/LoadingMask'
import { logInToInstance, handleOauthCode } from '../../_actions/addInstance' import { logInToInstance, handleOauthCode } from '../../_actions/addInstance'
import ExternalLink from '../../_components/ExternalLink.html' import ExternalLink from '../../_components/ExternalLink.html'
@ -88,7 +85,6 @@
components: { components: {
Layout, Layout,
SettingsLayout, SettingsLayout,
LoadingMask,
ExternalLink ExternalLink
}, },
store: () => store, 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 --> <!-- ModalDialog.html gets rendered here -->
<div id="modal-dialog" aria-hidden="true"></div> <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` <!-- Sapper creates a <script> tag containing `templates/main.js`
and anything else it needs to hydrate the app and and anything else it needs to hydrate the app and
initialise the router --> initialise the router -->

View file

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