mirror of
https://github.com/Lissy93/dashy.git
synced 2024-11-23 21:23:28 +03:00
Show splash screen while loading for first time
This commit is contained in:
Alicia Sykes
parent
506509fa04
commit
f6cecaf3bb
@ -49,6 +49,7 @@ All fields are optional, unless otherwise stated.
|
||||
**`cssThemes`** | `string[]` | _Optional_ | An array of custom theme names which can be used in the theme switcher dropdown
|
||||
**`externalStyleSheet`** | `string` or `string[]` | _Optional_ | Either a URL to an external stylesheet or an array or URLs, which can be applied as themes within the UI
|
||||
**`customCss`** | `string` | _Optional_ | Raw CSS that will be applied to the page. This can also be set from the UI. Please minify it first.
|
||||
**`showSplashScreen`** | `boolean` | _Optional_ | Should display a splash screen while the app is loading. Defaults to false, except on first load
|
||||
|
||||
#### `section`
|
||||
|
||||
|
||||
29
src/App.vue
29
src/App.vue
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div id="dashy" data-theme="dark">
|
||||
<div id="dashy">
|
||||
<LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash()" />
|
||||
<Header :pageInfo="pageInfo" />
|
||||
<router-view />
|
||||
<Footer v-if="showFooter" :text="getFooterText()" />
|
||||
@ -9,7 +10,8 @@
|
||||
|
||||
import Header from '@/components/PageStrcture/Header.vue';
|
||||
import Footer from '@/components/PageStrcture/Footer.vue';
|
||||
import Defaults, { localStorageKeys } from '@/utils/defaults';
|
||||
import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
|
||||
import Defaults, { localStorageKeys, splashScreenTime } from '@/utils/defaults';
|
||||
import conf from '../public/conf.yml';
|
||||
|
||||
export default {
|
||||
@ -17,11 +19,15 @@ export default {
|
||||
components: {
|
||||
Header,
|
||||
Footer,
|
||||
LoadingScreen,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// pageInfo: this.getPageInfo(conf.pageInfo),
|
||||
showFooter: Defaults.visibleComponents.footer,
|
||||
isLoading: true,
|
||||
};
|
||||
},
|
||||
data: () => ({
|
||||
// pageInfo: this.getPageInfo(conf.pageInfo),
|
||||
showFooter: Defaults.visibleComponents.footer,
|
||||
}),
|
||||
computed: {
|
||||
pageInfo() {
|
||||
return this.getPageInfo(conf.pageInfo);
|
||||
@ -68,8 +74,19 @@ export default {
|
||||
style.textContent = usersCss;
|
||||
document.head.append(style);
|
||||
},
|
||||
shouldShowSplash() {
|
||||
return this.appConfig.showSplashScreen || !localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
|
||||
},
|
||||
hideSplash() {
|
||||
if (this.shouldShowSplash()) {
|
||||
setTimeout(() => { this.isLoading = false; }, splashScreenTime || 2000);
|
||||
} else {
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.hideSplash();
|
||||
if (this.appConfig.customCss) {
|
||||
const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
|
||||
this.injectCustomStyles(cleanedCss);
|
||||
|
||||
114
src/components/PageStrcture/LoadingScreen.vue
Normal file
114
src/components/PageStrcture/LoadingScreen.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<transition name="slide-fade">
|
||||
<div id="loading" v-if="isLoading" :class="c" @click="c = 'hide'">
|
||||
<h2>Dashy</h2>
|
||||
<div class="inner-container">
|
||||
<p>Loading</p>
|
||||
<span class="dots-cont">
|
||||
<span class="dot dot-1"></span>
|
||||
<span class="dot dot-2"></span>
|
||||
<span class="dot dot-3"></span>
|
||||
<span class="dot dot-4"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LoadingScreen',
|
||||
props: {
|
||||
isLoading: { type: Boolean, default: false },
|
||||
},
|
||||
data: () => ({
|
||||
c: '',
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
div#loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 7;
|
||||
background: var(--loading-screen-background);
|
||||
color: var(--loading-screen-color);
|
||||
|
||||
&.hide { display: none; }
|
||||
|
||||
.inner-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 6vw;
|
||||
display: inline;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h2 {
|
||||
opacity: 0.35;
|
||||
font-size: 16vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dots-cont {
|
||||
display: inline;
|
||||
.dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: var(--loading-screen-color);
|
||||
display: inline-block;
|
||||
border-radius: 35%;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
margin: 0px 2.5px;
|
||||
position: relative;
|
||||
animation: jump 1s infinite;
|
||||
&.dot-1 {
|
||||
-webkit-animation-delay: 100ms;
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
&.dot-2 {
|
||||
-webkit-animation-delay: 200ms;
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
&.dot-3 {
|
||||
-webkit-animation-delay: 300ms;
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
&.dot-4 {
|
||||
-webkit-animation-delay: 400ms;
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
20% {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
40% {
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all .2s cubic-bezier(1, 0.9, 0.7, 0.4);
|
||||
}
|
||||
.slide-fade-enter, .slide-fade-leave-to {
|
||||
transform: translateY(-200px);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@ -75,7 +75,7 @@ export default {
|
||||
right: 10px;
|
||||
margin: 0.5em;
|
||||
padding: 0.1em 0.3em;
|
||||
z-index: 10;
|
||||
z-index: 6;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--welcome-popup-background);
|
||||
-webkit-box-shadow: 2px 1px 5px #130f23;
|
||||
|
||||
@ -77,4 +77,7 @@
|
||||
--toast-color: var(--background);
|
||||
--scroll-bar-color: var(--primary);
|
||||
--scroll-bar-background: var(--background-darker);
|
||||
--loading-screen-color: var(--primary);
|
||||
--loading-screen-background: var(--background);
|
||||
|
||||
}
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
{
|
||||
"type": "object",
|
||||
"required": [
|
||||
"sections"
|
||||
],
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"required": [
|
||||
"sections"
|
||||
],
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"pageInfo": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Title and heading for the app"
|
||||
"description": "Title and heading for the app"
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"description": "Sub-title, displayed in header"
|
||||
"description": "Sub-title, displayed in header"
|
||||
},
|
||||
"navLinks": {
|
||||
"type": "array",
|
||||
"maxItems": 6,
|
||||
"description": "Quick access links, displayed in header",
|
||||
"items": {
|
||||
"maxItems": 6,
|
||||
"description": "Quick access links, displayed in header",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"required": [
|
||||
"title",
|
||||
"path"
|
||||
],
|
||||
"properties": {
|
||||
"additionalProperties": false,
|
||||
"required": [
|
||||
"title",
|
||||
"path"
|
||||
],
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string"
|
||||
},
|
||||
@ -44,91 +44,96 @@
|
||||
"required": [
|
||||
"title"
|
||||
],
|
||||
"additionalProperties": false
|
||||
"additionalProperties": false
|
||||
},
|
||||
"appConfig": {
|
||||
"type": "object",
|
||||
"description": "Application configuration",
|
||||
"properties": {
|
||||
"description": "Application configuration",
|
||||
"properties": {
|
||||
"backgroundImg": {
|
||||
"type": "string",
|
||||
"description": "A URL to an image asset to be displayed as background"
|
||||
"description": "A URL to an image asset to be displayed as background"
|
||||
},
|
||||
"theme": {
|
||||
"type": "string",
|
||||
"default": "Callisto",
|
||||
"description": "A theme to be applied by default on first load"
|
||||
"default": "Callisto",
|
||||
"description": "A theme to be applied by default on first load"
|
||||
},
|
||||
"enableFontAwesome": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Should load font-awesome assets"
|
||||
"default": true,
|
||||
"description": "Should load font-awesome assets"
|
||||
},
|
||||
"fontAwesomeKey": {
|
||||
"type": "string",
|
||||
"pattern": "^[a-z0-9]{10}$",
|
||||
"description": "API key for font-awesome"
|
||||
"pattern": "^[a-z0-9]{10}$",
|
||||
"description": "API key for font-awesome"
|
||||
},
|
||||
"cssThemes": {
|
||||
"type": "array",
|
||||
"description": "Theme names to be added to the dropdown",
|
||||
"items": {
|
||||
"description": "Theme names to be added to the dropdown",
|
||||
"items": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"externalStyleSheet": {
|
||||
"description": "URL or URLs of external stylesheets to add to dropdown/ load",
|
||||
"type": [
|
||||
"string",
|
||||
"array"
|
||||
],
|
||||
"items": {
|
||||
"type": [
|
||||
"string",
|
||||
"array"
|
||||
],
|
||||
"items": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"customCss": {
|
||||
"type": "string",
|
||||
"description": "Any custom CSS overides, must be minified"
|
||||
"description": "Any custom CSS overides, must be minified"
|
||||
},
|
||||
"showSplashScreen": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Display a loading screen when the app is launched"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
},
|
||||
"sections": {
|
||||
"type": "array",
|
||||
"description": "Array of sections, containing items",
|
||||
"items": {
|
||||
"description": "Array of sections, containing items",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"required": [
|
||||
"name",
|
||||
"items"
|
||||
],
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"required": [
|
||||
"name",
|
||||
"items"
|
||||
],
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"description": "Title/ heading for a section"
|
||||
"description": "Title/ heading for a section"
|
||||
},
|
||||
"icon": {
|
||||
"type": "string",
|
||||
"description": "Icon will be displayed next to title"
|
||||
"description": "Icon will be displayed next to title"
|
||||
},
|
||||
"displayData": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"description": "Optional meta data for customizing a section",
|
||||
"properties": {
|
||||
"additionalProperties": false,
|
||||
"description": "Optional meta data for customizing a section",
|
||||
"properties": {
|
||||
"collapsed": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "If true, section needs to be clicked to open"
|
||||
"default": false,
|
||||
"description": "If true, section needs to be clicked to open"
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"description": "Hex code, or HTML color for section fill"
|
||||
"description": "Hex code, or HTML color for section fill"
|
||||
},
|
||||
"customStyles": {
|
||||
"type": "string",
|
||||
"description": "CSS overides for section container"
|
||||
"description": "CSS overides for section container"
|
||||
},
|
||||
"itemSize": {
|
||||
"enum": [
|
||||
@ -136,72 +141,72 @@
|
||||
"medium",
|
||||
"large"
|
||||
],
|
||||
"default": "medium",
|
||||
"description": "Size of items within the section"
|
||||
"default": "medium",
|
||||
"description": "Size of items within the section"
|
||||
},
|
||||
"rows": {
|
||||
"type": "number",
|
||||
"minimum": 1,
|
||||
"maximum": 5,
|
||||
"default": 1,
|
||||
"description": "The amount of space that the section spans vertically"
|
||||
"minimum": 1,
|
||||
"maximum": 5,
|
||||
"default": 1,
|
||||
"description": "The amount of space that the section spans vertically"
|
||||
},
|
||||
"cols": {
|
||||
"type": "number",
|
||||
"minimum": 1,
|
||||
"maximum": 5,
|
||||
"default": 1,
|
||||
"description": "The amount of space that the section spans horizontally"
|
||||
"minimum": 1,
|
||||
"maximum": 5,
|
||||
"default": 1,
|
||||
"description": "The amount of space that the section spans horizontally"
|
||||
},
|
||||
"layout": {
|
||||
"enum": [
|
||||
"grid",
|
||||
"auto"
|
||||
],
|
||||
"default": "auto",
|
||||
"description": "If set to grid, items have uniform width, and itemCount can be set"
|
||||
"default": "auto",
|
||||
"description": "If set to grid, items have uniform width, and itemCount can be set"
|
||||
},
|
||||
"itemCountX": {
|
||||
"type": "number",
|
||||
"minimum": 1,
|
||||
"maximum": 12,
|
||||
"description": "Number of items per column"
|
||||
"minimum": 1,
|
||||
"maximum": 12,
|
||||
"description": "Number of items per column"
|
||||
},
|
||||
"itemCountY": {
|
||||
"type": "number",
|
||||
"minimum": 1,
|
||||
"maximum": 12,
|
||||
"description": "Number of items per row"
|
||||
"minimum": 1,
|
||||
"maximum": 12,
|
||||
"description": "Number of items per row"
|
||||
}
|
||||
}
|
||||
},
|
||||
"items": {
|
||||
"type": "array",
|
||||
"description": "Array of items to display with a section",
|
||||
"items": {
|
||||
"description": "Array of items to display with a section",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"required": [
|
||||
"title"
|
||||
],
|
||||
"properties": {
|
||||
"additionalProperties": false,
|
||||
"required": [
|
||||
"title"
|
||||
],
|
||||
"properties": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Text shown on the item"
|
||||
"description": "Text shown on the item"
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"nullable": true,
|
||||
"description": "Short description, shown on hover or in a tooltip"
|
||||
"nullable": true,
|
||||
"description": "Short description, shown on hover or in a tooltip"
|
||||
},
|
||||
"icon": {
|
||||
"type": "string",
|
||||
"nullable": true,
|
||||
"description": "An icon, either as a font-awesome identifier, local or remote URL, or auto-fetched favicon"
|
||||
"nullable": true,
|
||||
"description": "An icon, either as a font-awesome identifier, local or remote URL, or auto-fetched favicon"
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"description": "The destination to navigate to when item is clicked"
|
||||
"description": "The destination to navigate to when item is clicked"
|
||||
},
|
||||
"target": {
|
||||
"enum": [
|
||||
@ -209,16 +214,16 @@
|
||||
"sametab",
|
||||
"iframe"
|
||||
],
|
||||
"default": "newtab",
|
||||
"description": "Opening method, when item is clicked"
|
||||
"default": "newtab",
|
||||
"description": "Opening method, when item is clicked"
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"description": "A custom fill color of the item"
|
||||
"description": "A custom fill color of the item"
|
||||
},
|
||||
"provider": {
|
||||
"type": "string",
|
||||
"description": "Provider name, e.g. Microsoft"
|
||||
"description": "Provider name, e.g. Microsoft"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,4 +72,5 @@ module.exports = {
|
||||
iconPack: 'fontawesome',
|
||||
},
|
||||
backupEndpoint: 'https://dashy-sync-service.as93.net',
|
||||
splashScreenTime: 1900,
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user