Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-23 14:15:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/config/src/config/build.js
View File

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

6
packages/config/test/__snapshots__/options.test.js.snap
View File

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

12
packages/config/test/config/__snapshots__/index.test.js.snap
View File

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

16
packages/vue-app/template/components/nuxt-build-indicator.vue
View File

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