feat(vue-app): allow customizing loading indicator (#5844)

This commit is contained in:
Pooya Parsa 2019-06-06 12:39:28 +04:30 committed by GitHub
parent 7b6b3917c1
commit cb1b980d8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 9 deletions

View File

@ -3,7 +3,11 @@ import env from 'std-env'
export default () => ({
quiet: Boolean(env.ci || env.test),
analyze: false,
indicator: true,
indicator: {
position: 'bottom-right',
backgroundColor: '#2E495E',
color: '#00C48D'
},
profile: process.argv.includes('--profile'),
extractCSS: false,
crossorigin: undefined,

View File

@ -55,7 +55,11 @@ Object {
"useShortDoctype": true,
},
},
"indicator": true,
"indicator": Object {
"backgroundColor": "#2E495E",
"color": "#00C48D",
"position": "bottom-right",
},
"loaders": Object {
"css": Object {
"sourceMap": false,

View File

@ -42,7 +42,11 @@ Object {
"useShortDoctype": true,
},
},
"indicator": true,
"indicator": Object {
"backgroundColor": "#2E495E",
"color": "#00C48D",
"position": "bottom-right",
},
"loaders": Object {
"css": Object {},
"cssModules": Object {
@ -378,7 +382,11 @@ Object {
"useShortDoctype": true,
},
},
"indicator": true,
"indicator": Object {
"backgroundColor": "#2E495E",
"color": "#00C48D",
"position": "bottom-right",
},
"loaders": Object {
"css": Object {},
"cssModules": Object {

View File

@ -1,6 +1,6 @@
<template>
<transition appear>
<div class="nuxt__build_indicator" v-if="building">
<div class="nuxt__build_indicator" :style="indicatorStyle" v-if="building">
<svg viewBox="0 0 96 72" version="1" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M6 66h23l1-3 21-37L40 6 6 66zM79 66h11L62 17l-5 9 22 37v3zM54 31L35 66h38z"/>
@ -40,6 +40,16 @@ export default {
const _path = '<%= router.base %>_loading/ws'
const _protocol = location.protocol === 'https:' ? 'wss' : 'ws'
return `${_protocol}://${location.hostname}:${location.port}${_path}`
},
options: () => (<%= JSON.stringify(buildIndicator) %>),
indicatorStyle() {
const [ d1, d2 ] = this.options.position.split('-')
return {
[d1]: '20px',
[d2]: '20px',
'background-color': this.options.backgroundColor,
color: this.options.color,
}
}
},
watch: {
@ -128,13 +138,9 @@ export default {
box-sizing: border-box;
position: absolute;
font-family: monospace;
bottom: 20px;
right: 20px;
background-color: #2E495E;
padding: 5px 10px;
border-radius: 5px;
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
color: #00C48D;
width: 84px;
z-index: 2147483647;
}