jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add particles to onboarding (#8567)

Browse Source
This commit is contained in:
Paulus Schoutsen 2021-03-09 06:30:29 -08:00 committed by GitHub
parent 68ea1abc05
commit e50fd80b2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 133 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -132,6 +132,7 @@
"sortablejs": "^1.10.2",
"superstruct": "^0.10.13",
"tinykeys": "^1.1.1",
"tsparticles": "^1.19.2",
"unfetch": "^4.1.0",
"vis-data": "^7.1.1",
"vis-network": "^8.5.4",

52
src/html/onboarding.html.template
View File

@ -7,24 +7,16 @@
<style>
html {
color: var(--primary-text-color, #212121);
}
@media (prefers-color-scheme: dark) {
html {
background-color: #111111;
color: #e1e1e1;
}
ha-onboarding {
--primary-text-color: #e1e1e1;
--secondary-text-color: #9b9b9b;
--disabled-text-color: #6f6f6f;
--mdc-theme-surface: #1e1e1e;
--ha-card-background: #1e1e1e;
}
background-color: #0277bd !important;
}
.content {
box-sizing: border-box;
padding: 20px 16px;
max-width: 400px;
margin: 0 auto;
border-radius: 4px;
max-width: 432px;
margin: 64px auto 0;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
background-color: #fff;
}
.header {
@ -39,12 +31,36 @@
.header img {
margin-right: 16px;
}
@media (prefers-color-scheme: dark) {
html {
color: #e1e1e1;
}
ha-onboarding {
--primary-text-color: #e1e1e1;
--secondary-text-color: #9b9b9b;
--disabled-text-color: #6f6f6f;
--mdc-theme-surface: #1e1e1e;
--ha-card-background: #1e1e1e;
}
.content {
background-color: #111111;
}
}
@media (max-width: 450px) {
.content {
min-height: 100%;
margin: 0;
}
}
</style>
</head>
<body>
<body id='particles'>
<div class="content">
<div class="header">
<img src="/static/icons/favicon-192x192.png" height="52" />
<img src="/static/icons/favicon-192x192.png" height="52" width="52" />
Home Assistant
</div>
@ -76,4 +92,4 @@
})();
</script>
</body>
</html>
</html>

3
src/onboarding/ha-onboarding.ts
View File

@ -121,6 +121,9 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
import("./onboarding-core-config");
registerServiceWorker(this, false);
this.addEventListener("onboarding-step", (ev) => this._handleStepDone(ev));
if (window.innerWidth > 450) {
import("./particles");
}
}
protected updated(changedProps: PropertyValues) {

2
src/onboarding/onboarding-create-user.ts
View File

@ -206,7 +206,7 @@ class OnboardingCreateUser extends LitElement {
}
.action {
margin: 32px 0;
margin: 32px 0 16px;
text-align: center;
}
`;

82
src/onboarding/particles.ts Normal file
View File

@ -0,0 +1,82 @@
import { tsParticles } from "tsparticles";
tsParticles.load("particles", {
// autoPlay: true,
fullScreen: {
enable: true,
zIndex: -1,
},
detectRetina: true,
fpsLimit: 60,
motion: {
disable: false,
reduce: {
factor: 4,
value: true,
},
},
particles: {
color: {
value: "#fff",
animation: {
enable: true,
speed: 50,
sync: false,
},
},
links: {
color: {
value: "random",
},
distance: 100,
enable: true,
frequency: 1,
opacity: 0.7,
width: 1,
},
move: {
enable: true,
speed: 0.5,
},
number: {
density: {
enable: true,
area: 800,
factor: 1000,
},
limit: 0,
value: 50,
},
opacity: {
random: {
enable: true,
minimumValue: 0.3,
},
value: 0.5,
animation: {
destroy: "none",
enable: true,
minimumValue: 0.3,
speed: 0.5,
startValue: "random",
sync: false,
},
},
size: {
random: {
enable: true,
minimumValue: 1,
},
value: 3,
animation: {
destroy: "none",
enable: true,
minimumValue: 1,
speed: 3,
startValue: "random",
sync: false,
},
},
},
pauseOnBlur: true,
});

12
yarn.lock
View File

@ -11209,6 +11209,11 @@ path-type@^4.0.0:
resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
pathseg@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/pathseg/-/pathseg-1.2.0.tgz#22af051e28037671e7799e296fe96c5dcbe53acd"
integrity sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==
pathval@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
@ -13399,6 +13404,13 @@ tslib@^2.0.1:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
tsparticles@^1.19.2:
version "1.19.2"
resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-1.19.2.tgz#056d26149e67155e99efbfb1ea8f521fcc66520c"
integrity sha512-DqoseKpYxXAsmpUmXcqf4d7QK7zEcLcrcxjGB4qA6hn9XonVo1oa9hf1XaCgO/H23Dh4Ia31Z4DcSAgsqSt5Xg==
optionalDependencies:
pathseg "^1.2.0"
tsscmp@1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"