tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Show splash screen while loading for first time

This commit is contained in:
Alicia Sykes 2021-06-11 17:18:07 +01:00
parent 506509fa04
commit f6cecaf3bb
7 changed files with 235 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/configuring.md
View File

@ -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
View File

@ -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
View 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>

2
src/components/Settings/KeyboardShortcutInfo.vue
View File

@ -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;

3
src/styles/color-palette.scss
View File

@ -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);
}

179
src/utils/ConfigSchema.json
View File

@ -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"
}
}
}

1
src/utils/defaults.js
View File

@ -72,4 +72,5 @@ module.exports = {
iconPack: 'fontawesome',
},
backupEndpoint: 'https://dashy-sync-service.as93.net',
splashScreenTime: 1900,
};