tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-27 07:34:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Show splash screen while loading for first time

Browse Source
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 **`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 **`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. **`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` #### `section`

29
src/App.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div id="dashy" data-theme="dark"> <div id="dashy">
<LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash()" />
<Header :pageInfo="pageInfo" /> <Header :pageInfo="pageInfo" />
<router-view /> <router-view />
<Footer v-if="showFooter" :text="getFooterText()" /> <Footer v-if="showFooter" :text="getFooterText()" />
@ -9,7 +10,8 @@
import Header from '@/components/PageStrcture/Header.vue'; import Header from '@/components/PageStrcture/Header.vue';
import Footer from '@/components/PageStrcture/Footer.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'; import conf from '../public/conf.yml';
export default { export default {
@ -17,11 +19,15 @@ export default {
components: { components: {
Header, Header,
Footer, 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: { computed: {
pageInfo() { pageInfo() {
return this.getPageInfo(conf.pageInfo); return this.getPageInfo(conf.pageInfo);
@ -68,8 +74,19 @@ export default {
style.textContent = usersCss; style.textContent = usersCss;
document.head.append(style); 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() { mounted() {
this.hideSplash();
if (this.appConfig.customCss) { if (this.appConfig.customCss) {
const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, ''); const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
this.injectCustomStyles(cleanedCss); 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; right: 10px;
margin: 0.5em; margin: 0.5em;
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
z-index: 10; z-index: 6;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--welcome-popup-background); border: 1px solid var(--welcome-popup-background);
-webkit-box-shadow: 2px 1px 5px #130f23; -webkit-box-shadow: 2px 1px 5px #130f23;

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

@ -77,4 +77,7 @@
--toast-color: var(--background); --toast-color: var(--background);
--scroll-bar-color: var(--primary); --scroll-bar-color: var(--primary);
--scroll-bar-background: var(--background-darker); --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", "type": "object",
"required": [ "required": [
"sections" "sections"
], ],
"additionalProperties": false, "additionalProperties": false,
"properties": { "properties": {
"pageInfo": { "pageInfo": {
"type": "object", "type": "object",
"properties": { "properties": {
"title": { "title": {
"type": "string", "type": "string",
"description": "Title and heading for the app" "description": "Title and heading for the app"
}, },
"description": { "description": {
"type": "string", "type": "string",
"description": "Sub-title, displayed in header" "description": "Sub-title, displayed in header"
}, },
"navLinks": { "navLinks": {
"type": "array", "type": "array",
"maxItems": 6, "maxItems": 6,
"description": "Quick access links, displayed in header", "description": "Quick access links, displayed in header",
"items": { "items": {
"type": "object", "type": "object",
"additionalProperties": false, "additionalProperties": false,
"required": [ "required": [
"title", "title",
"path" "path"
], ],
"properties": { "properties": {
"title": { "title": {
"type": "string" "type": "string"
}, },
@ -44,91 +44,96 @@
"required": [ "required": [
"title" "title"
], ],
"additionalProperties": false "additionalProperties": false
}, },
"appConfig": { "appConfig": {
"type": "object", "type": "object",
"description": "Application configuration", "description": "Application configuration",
"properties": { "properties": {
"backgroundImg": { "backgroundImg": {
"type": "string", "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": { "theme": {
"type": "string", "type": "string",
"default": "Callisto", "default": "Callisto",
"description": "A theme to be applied by default on first load" "description": "A theme to be applied by default on first load"
}, },
"enableFontAwesome": { "enableFontAwesome": {
"type": "boolean", "type": "boolean",
"default": true, "default": true,
"description": "Should load font-awesome assets" "description": "Should load font-awesome assets"
}, },
"fontAwesomeKey": { "fontAwesomeKey": {
"type": "string", "type": "string",
"pattern": "^[a-z0-9]{10}$", "pattern": "^[a-z0-9]{10}$",
"description": "API key for font-awesome" "description": "API key for font-awesome"
}, },
"cssThemes": { "cssThemes": {
"type": "array", "type": "array",
"description": "Theme names to be added to the dropdown", "description": "Theme names to be added to the dropdown",
"items": { "items": {
"type": "string" "type": "string"
} }
}, },
"externalStyleSheet": { "externalStyleSheet": {
"description": "URL or URLs of external stylesheets to add to dropdown/ load", "description": "URL or URLs of external stylesheets to add to dropdown/ load",
"type": [ "type": [
"string", "string",
"array" "array"
], ],
"items": { "items": {
"type": "string" "type": "string"
} }
}, },
"customCss": { "customCss": {
"type": "string", "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 "additionalProperties": false
}, },
"sections": { "sections": {
"type": "array", "type": "array",
"description": "Array of sections, containing items", "description": "Array of sections, containing items",
"items": { "items": {
"type": "object", "type": "object",
"required": [ "required": [
"name", "name",
"items" "items"
], ],
"additionalProperties": false, "additionalProperties": false,
"properties": { "properties": {
"name": { "name": {
"type": "string", "type": "string",
"description": "Title/ heading for a section" "description": "Title/ heading for a section"
}, },
"icon": { "icon": {
"type": "string", "type": "string",
"description": "Icon will be displayed next to title" "description": "Icon will be displayed next to title"
}, },
"displayData": { "displayData": {
"type": "object", "type": "object",
"additionalProperties": false, "additionalProperties": false,
"description": "Optional meta data for customizing a section", "description": "Optional meta data for customizing a section",
"properties": { "properties": {
"collapsed": { "collapsed": {
"type": "boolean", "type": "boolean",
"default": false, "default": false,
"description": "If true, section needs to be clicked to open" "description": "If true, section needs to be clicked to open"
}, },
"color": { "color": {
"type": "string", "type": "string",
"description": "Hex code, or HTML color for section fill" "description": "Hex code, or HTML color for section fill"
}, },
"customStyles": { "customStyles": {
"type": "string", "type": "string",
"description": "CSS overides for section container" "description": "CSS overides for section container"
}, },
"itemSize": { "itemSize": {
"enum": [ "enum": [
@ -136,72 +141,72 @@
"medium", "medium",
"large" "large"
], ],
"default": "medium", "default": "medium",
"description": "Size of items within the section" "description": "Size of items within the section"
}, },
"rows": { "rows": {
"type": "number", "type": "number",
"minimum": 1, "minimum": 1,
"maximum": 5, "maximum": 5,
"default": 1, "default": 1,
"description": "The amount of space that the section spans vertically" "description": "The amount of space that the section spans vertically"
}, },
"cols": { "cols": {
"type": "number", "type": "number",
"minimum": 1, "minimum": 1,
"maximum": 5, "maximum": 5,
"default": 1, "default": 1,
"description": "The amount of space that the section spans horizontally" "description": "The amount of space that the section spans horizontally"
}, },
"layout": { "layout": {
"enum": [ "enum": [
"grid", "grid",
"auto" "auto"
], ],
"default": "auto", "default": "auto",
"description": "If set to grid, items have uniform width, and itemCount can be set" "description": "If set to grid, items have uniform width, and itemCount can be set"
}, },
"itemCountX": { "itemCountX": {
"type": "number", "type": "number",
"minimum": 1, "minimum": 1,
"maximum": 12, "maximum": 12,
"description": "Number of items per column" "description": "Number of items per column"
}, },
"itemCountY": { "itemCountY": {
"type": "number", "type": "number",
"minimum": 1, "minimum": 1,
"maximum": 12, "maximum": 12,
"description": "Number of items per row" "description": "Number of items per row"
} }
} }
}, },
"items": { "items": {
"type": "array", "type": "array",
"description": "Array of items to display with a section", "description": "Array of items to display with a section",
"items": { "items": {
"type": "object", "type": "object",
"additionalProperties": false, "additionalProperties": false,
"required": [ "required": [
"title" "title"
], ],
"properties": { "properties": {
"title": { "title": {
"type": "string", "type": "string",
"description": "Text shown on the item" "description": "Text shown on the item"
}, },
"description": { "description": {
"type": "string", "type": "string",
"nullable": true, "nullable": true,
"description": "Short description, shown on hover or in a tooltip" "description": "Short description, shown on hover or in a tooltip"
}, },
"icon": { "icon": {
"type": "string", "type": "string",
"nullable": true, "nullable": true,
"description": "An icon, either as a font-awesome identifier, local or remote URL, or auto-fetched favicon" "description": "An icon, either as a font-awesome identifier, local or remote URL, or auto-fetched favicon"
}, },
"url": { "url": {
"type": "string", "type": "string",
"description": "The destination to navigate to when item is clicked" "description": "The destination to navigate to when item is clicked"
}, },
"target": { "target": {
"enum": [ "enum": [
@ -209,16 +214,16 @@
"sametab", "sametab",
"iframe" "iframe"
], ],
"default": "newtab", "default": "newtab",
"description": "Opening method, when item is clicked" "description": "Opening method, when item is clicked"
}, },
"color": { "color": {
"type": "string", "type": "string",
"description": "A custom fill color of the item" "description": "A custom fill color of the item"
}, },
"provider": { "provider": {
"type": "string", "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', iconPack: 'fontawesome',
}, },
backupEndpoint: 'https://dashy-sync-service.as93.net', backupEndpoint: 'https://dashy-sync-service.as93.net',
splashScreenTime: 1900,
}; };