github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Onboarding style updates

This commit is contained in:
Bram Kragten 2023-08-24 16:55:59 +02:00
parent ac51a53513
commit b5ab9be544
11 changed files with 328 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/ha-language-picker.ts
View File

@ -7,6 +7,7 @@ import { formatLanguageCode } from "../common/language/format_language";
import { caseInsensitiveStringCompare } from "../common/string/compare";
import { FrontendLocaleData } from "../data/translation";
import "../resources/intl-polyfill";
import { translationMetadata } from "../resources/translations-metadata";
import { HomeAssistant } from "../types";
import "./ha-list-item";
import "./ha-select";
@ -20,7 +21,7 @@ export class HaLanguagePicker extends LitElement {
@property() public languages?: string[];
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ type: Boolean, reflect: true }) public disabled = false;
@ -51,8 +52,8 @@ export class HaLanguagePicker extends LitElement {
}
const languageOptions = this._getLanguagesOptions(
this.languages ?? this._defaultLanguages,
this.hass.locale,
this.nativeName
this.nativeName,
this.hass?.locale
);
const selectedItem = languageOptions.find(
(option) => option.value === this.value
@ -64,11 +65,11 @@ export class HaLanguagePicker extends LitElement {
}
private _getLanguagesOptions = memoizeOne(
(languages: string[], locale: FrontendLocaleData, nativeName: boolean) => {
(languages: string[], nativeName: boolean, locale?: FrontendLocaleData) => {
let options: { label: string; value: string }[] = [];
if (nativeName) {
const translations = this.hass.translationMetadata.translations;
const translations = translationMetadata.translations;
options = languages.map((lang) => {
let label = translations[lang]?.nativeName;
if (!label) {
@ -87,14 +88,14 @@ export class HaLanguagePicker extends LitElement {
label,
};
});
} else {
} else if (locale) {
options = languages.map((lang) => ({
value: lang,
label: formatLanguageCode(lang, locale),
}));
}
if (!this.noSort) {
if (!this.noSort && locale) {
options.sort((a, b) =>
caseInsensitiveStringCompare(a.label, b.label, locale.language)
);
@ -104,20 +105,14 @@ export class HaLanguagePicker extends LitElement {
);
private _computeDefaultLanguageOptions() {
if (!this.hass.translationMetadata?.translations) {
return;
}
this._defaultLanguages = Object.keys(
this.hass.translationMetadata.translations
);
this._defaultLanguages = Object.keys(translationMetadata.translations);
}
protected render() {
const languageOptions = this._getLanguagesOptions(
this.languages ?? this._defaultLanguages,
this.hass.locale,
this.nativeName
this.nativeName,
this.hass?.locale
);
const value =
@ -125,9 +120,10 @@ export class HaLanguagePicker extends LitElement {
return html`
<ha-select
.label=${this.label ||
this.hass.localize("ui.components.language-picker.language")}
.value=${value}
.label=${this.label ??
(this.hass?.localize("ui.components.language-picker.language") ||
"Language")}
.value=${value || ""}
.required=${this.required}
.disabled=${this.disabled}
@selected=${this._changed}
@ -137,9 +133,9 @@ export class HaLanguagePicker extends LitElement {
>
${languageOptions.length === 0
? html`<ha-list-item value=""
>${this.hass.localize(
>${this.hass?.localize(
"ui.components.language-picker.no_languages"
)}</ha-list-item
) || "No languages"}</ha-list-item
>`
: languageOptions.map(
(option) => html`
@ -162,7 +158,7 @@ export class HaLanguagePicker extends LitElement {
private _changed(ev): void {
const target = ev.target as HaSelect;
if (!this.hass || target.value === "" || target.value === this.value) {
if (target.value === "" || target.value === this.value) {
return;
}
this.value = target.value;

15
src/components/language-datalist.ts
View File

@ -1,15 +0,0 @@
import { HomeAssistant } from "../types";
export const createLanguageListEl = (hass: HomeAssistant) => {
const list = document.createElement("datalist");
list.id = "languages";
for (const [language, metadata] of Object.entries(
hass.translationMetadata.translations
)) {
const option = document.createElement("option");
option.value = language;
option.innerText = metadata.nativeName;
list.appendChild(option);
}
return list;
};

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

@ -6,38 +6,35 @@
<%= renderTemplate("_style_base.html.template") %>
<style>
html {
background-color: var(--primary-background-color, #fafafa);
color: var(--primary-text-color, #212121);
background-color: #0277bd !important;
}
@media (prefers-color-scheme: dark) {
html {
background-color: var(--primary-background-color, #111111);
color: var(--primary-text-color, #e1e1e1);
}
}
body {
height: auto;
padding: 64px 0;
padding: 40px 0;
}
.content {
max-width: 432px;
max-width: 560px;
margin: 0 auto;
box-sizing: border-box;
}
.header {
text-align: center;
font-size: 1.96em;
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
color: var(--text-primary-color, #fff);
margin-bottom: 16px;
}
.header img {
margin-right: 16px;
}
@media (prefers-color-scheme: dark) {
html {
color: #e1e1e1;
}
height: 56px;
width: 56px;
}
@media (max-width: 450px) {
@ -51,8 +48,7 @@
<body id="particles">
<div class="content">
<div class="header">
<img src="/static/icons/favicon-192x192.png" height="52" width="52" alt="" />
Home Assistant
<img src="/static/icons/favicon-192x192.png" alt="Home Assistant" />
</div>
<ha-onboarding></ha-onboarding>
</div>

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

@ -35,6 +35,7 @@ import {
loadTokens,
saveTokens,
} from "../common/auth/token_storage";
import { storeState } from "../util/ha-pref-storage";
type OnboardingEvent =
| {
@ -80,15 +81,12 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
return html`<ha-card>
<div class="card-content">${this._renderStep()}</div>
</ha-card>
${this.hass
? html`<ha-language-picker
.hass=${this.hass}
.value=${this.language}
.label=${this.localize("ui.panel.page-onboarding.language")}
nativeName
@value-changed=${this._languageChanged}
></ha-language-picker>`
: nothing} `;
<ha-language-picker
.value=${this.language}
.label=${""}
nativeName
@value-changed=${this._languageChanged}
></ha-language-picker>`;
}
private _renderStep() {
@ -348,6 +346,14 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
subscribeOne(conn, subscribeUser),
]);
this.initializeHass(auth, conn);
if (this.language && this.language !== this.hass!.language) {
this._updateHass({
locale: { ...this.hass!.locale, language: this.language },
language: this.language,
selectedLanguage: this.language,
});
storeState(this.hass!);
}
// Load config strings for integrations
(this as any)._loadFragmentTranslations(this.hass!.language, "config");
// Make sure hass is initialized + the config/user callbacks have called.
@ -359,12 +365,14 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
private _languageChanged(ev: CustomEvent) {
const language = ev.detail.value;
this.language = language;
this._updateHass({
locale: { ...this.hass!.locale, language },
language,
selectedLanguage: language,
});
storeState(this.hass!);
if (this.hass) {
this._updateHass({
locale: { ...this.hass!.locale, language },
language,
selectedLanguage: language,
});
storeState(this.hass!);
}
}
static styles = css`
@ -372,12 +380,15 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
display: block;
width: 200px;
margin-top: 8px;
border-radius: 4px;
overflow: hidden;
--mdc-select-fill-color: none;
--mdc-select-label-ink-color: var(--text-primary-color, #fff);
--mdc-select-ink-color: var(--text-primary-color, #fff);
--mdc-select-idle-line-color: var(--text-primary-color, #fff);
--mdc-select-hover-line-color: var(--text-primary-color, #fff);
--mdc-select-dropdown-icon-color: var(--text-primary-color, #fff);
--mdc-select-label-ink-color: var(--primary-text-color, #212121);
--mdc-select-ink-color: var(--primary-text-color, #212121);
--mdc-select-idle-line-color: transparent;
--mdc-select-hover-line-color: transparent;
--mdc-select-dropdown-icon-color: var(--primary-text-color, #212121);
--mdc-shape-small: 0;
}
`;
}

60
src/onboarding/onboarding-analytics.ts
View File

@ -1,4 +1,5 @@
import "@material/mwc-button/mwc-button";
import { mdiOpenInNew } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
@ -8,6 +9,7 @@ import { Analytics, setAnalyticsPreferences } from "../data/analytics";
import { onboardAnalyticsStep } from "../data/onboarding";
import type { HomeAssistant } from "../types";
import { documentationUrl } from "../util/documentation-url";
import { onBoardingStyles } from "./styles";
@customElement("onboarding-analytics")
class OnboardingAnalytics extends LitElement {
@ -23,7 +25,18 @@ class OnboardingAnalytics extends LitElement {
protected render(): TemplateResult {
return html`
<h1>Help us help you</h1>
<p>${this.localize("ui.panel.page-onboarding.analytics.intro")}</p>
<p>
<a
.href=${documentationUrl(this.hass, "/integrations/analytics/")}
target="_blank"
rel="noreferrer"
>
${this.localize("ui.panel.page-onboarding.analytics.learn_more")}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</a>
</p>
<ha-analytics
translation_key_panel="page-onboarding"
@analytics-preferences-changed=${this._preferencesChanged}
@ -33,16 +46,13 @@ class OnboardingAnalytics extends LitElement {
</ha-analytics>
${this._error ? html`<div class="error">${this._error}</div>` : ""}
<div class="footer">
<mwc-button @click=${this._save} .disabled=${!this._analyticsDetails}>
<mwc-button
unelevated
@click=${this._save}
.disabled=${!this._analyticsDetails}
>
${this.localize("ui.panel.page-onboarding.analytics.finish")}
</mwc-button>
<a
.href=${documentationUrl(this.hass, "/integrations/analytics/")}
target="_blank"
rel="noreferrer"
>
${this.localize("ui.panel.page-onboarding.analytics.learn_more")}
</a>
</div>
`;
}
@ -81,27 +91,19 @@ class OnboardingAnalytics extends LitElement {
}
static get styles(): CSSResultGroup {
return css`
p {
font-size: 14px;
line-height: 20px;
}
.error {
color: var(--error-color);
}
.footer {
margin-top: 16px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}
a {
color: var(--primary-color);
}
`;
// footer is direction reverse to tab to "NEXT" first
return [
onBoardingStyles,
css`
.error {
color: var(--error-color);
}
a {
color: var(--primary-color);
text-decoration: none;
--mdc-icon-size: 14px;
}
`,
];
}
}

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

@ -1,7 +1,6 @@
import "@material/mwc-button";
import { genClientId } from "home-assistant-js-websocket";
import {
css,
CSSResultGroup,
html,
LitElement,
@ -16,6 +15,7 @@ import type { HaForm } from "../components/ha-form/ha-form";
import { HaFormDataContainer, HaFormSchema } from "../components/ha-form/types";
import { onboardUserStep } from "../data/onboarding";
import { ValueChangedEvent } from "../types";
import { onBoardingStyles } from "./styles";
const CREATE_USER_SCHEMA: HaFormSchema[] = [
{
@ -58,7 +58,7 @@ class OnboardingCreateUser extends LitElement {
protected render(): TemplateResult {
return html`
<p>${this.localize("ui.panel.page-onboarding.intro")}</p>
<h1>Create user</h1>
<p>${this.localize("ui.panel.page-onboarding.user.intro")}</p>
${this._errorMsg
@ -67,25 +67,27 @@ class OnboardingCreateUser extends LitElement {
<ha-form
.computeLabel=${this._computeLabel(this.localize)}
.computeHelper=${this._computeHelper(this.localize)}
.data=${this._newUser}
.disabled=${this._loading}
.error=${this._formError}
.schema=${CREATE_USER_SCHEMA}
@value-changed=${this._handleValueChanged}
></ha-form>
<mwc-button
raised
@click=${this._submitForm}
.disabled=${this._loading ||
!this._newUser.name ||
!this._newUser.username ||
!this._newUser.password ||
!this._newUser.password_confirm ||
this._newUser.password !== this._newUser.password_confirm}
>
${this.localize("ui.panel.page-onboarding.user.create_account")}
</mwc-button>
<div class="footer">
<mwc-button
unelevated
@click=${this._submitForm}
.disabled=${this._loading ||
!this._newUser.name ||
!this._newUser.username ||
!this._newUser.password ||
!this._newUser.password_confirm ||
this._newUser.password !== this._newUser.password_confirm}
>
${this.localize("ui.panel.page-onboarding.user.create_account")}
</mwc-button>
</div>
`;
}
@ -111,6 +113,11 @@ class OnboardingCreateUser extends LitElement {
localize(`ui.panel.page-onboarding.user.data.${schema.name}`);
}
private _computeHelper(localize) {
return (schema: HaFormSchema) =>
localize(`ui.panel.page-onboarding.user.helper.${schema.name}`);
}
private _handleValueChanged(
ev: ValueChangedEvent<HaFormDataContainer>
): void {
@ -120,6 +127,7 @@ class OnboardingCreateUser extends LitElement {
this._maybePopulateUsername();
}
this._formError.password_confirm =
this._newUser.password_confirm &&
this._newUser.password !== this._newUser.password_confirm
? this.localize(
"ui.panel.page-onboarding.user.error.password_not_match"
@ -167,14 +175,7 @@ class OnboardingCreateUser extends LitElement {
}
static get styles(): CSSResultGroup {
return css`
mwc-button {
margin: 32px 0 0;
text-align: center;
display: block;
text-align: right;
}
`;
return onBoardingStyles;
}
}

48
src/onboarding/onboarding-integrations.ts
View File

@ -21,6 +21,7 @@ import { scanUSBDevices } from "../data/usb";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { HomeAssistant } from "../types";
import "./integration-badge";
import { onBoardingStyles } from "./styles";
const HIDDEN_DOMAINS = new Set([
"hassio",
@ -131,11 +132,11 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
}
return html`
<h2>
<h1>
${this.onboardingLocalize(
"ui.panel.page-onboarding.integration.header"
)}
</h2>
</h1>
<p>
${this.onboardingLocalize("ui.panel.page-onboarding.integration.intro")}
</p>
@ -158,7 +159,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
: nothing}
</div>
<div class="footer">
<mwc-button @click=${this._finish}>
<mwc-button unelevated @click=${this._finish}>
${this.onboardingLocalize(
"ui.panel.page-onboarding.integration.finish"
)}
@ -187,30 +188,23 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
}
static get styles(): CSSResultGroup {
return css`
h2 {
text-align: center;
}
p {
font-size: 14px;
line-height: 20px;
}
.badges {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
row-gap: 24px;
}
.more {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.footer {
text-align: right;
}
`;
return [
onBoardingStyles,
css`
.badges {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
row-gap: 24px;
}
.more {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
`,
];
}
}

304
src/onboarding/onboarding-location.ts
View File

@ -1,5 +1,10 @@
import "@material/mwc-button/mwc-button";
import { mdiCrosshairsGps, mdiMapMarker, mdiMapSearchOutline } from "@mdi/js";
import {
mdiCrosshairsGps,
mdiMagnify,
mdiMapMarker,
mdiMapSearchOutline,
} from "@mdi/js";
import {
css,
CSSResultGroup,
@ -30,6 +35,7 @@ import {
reverseGeocode,
searchPlaces,
} from "../data/openstreetmap";
import { onBoardingStyles } from "./styles";
const AMSTERDAM: [number, number] = [52.3731339, 4.8903147];
const mql = matchMedia("(prefers-color-scheme: dark)");
@ -43,7 +49,7 @@ class OnboardingLocation extends LitElement {
@state() private _working = false;
@state() private _location?: [number, number];
@state() private _location: [number, number] = AMSTERDAM;
@state() private _places?: OpenStreetMapPlace[] | null;
@ -87,6 +93,7 @@ class OnboardingLocation extends LitElement {
);
return html`
<h1>Home location</h1>
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: nothing}
@ -97,78 +104,85 @@ class OnboardingLocation extends LitElement {
)}
</p>
<ha-textfield
label=${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.address_label"
)}
.disabled=${this._working}
iconTrailing
@keyup=${this._addressSearch}
>
${this._working
<div class="location-search">
<ha-textfield
label=${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.address_label"
)}
.disabled=${this._working}
icon
iconTrailing
@keyup=${this._addressSearch}
>
<ha-svg-icon slot="leadingIcon" .path=${mdiMagnify}></ha-svg-icon>
${this._working
? html`
<ha-circular-progress
slot="trailingIcon"
active
size="small"
></ha-circular-progress>
`
: html`
<ha-icon-button
@click=${this._handleButtonClick}
slot="trailingIcon"
.disabled=${this._working}
.label=${this.onboardingLocalize(
this._search
? "ui.common.search"
: "ui.panel.page-onboarding.core-config.button_detect"
)}
.path=${this._search ? mdiMapSearchOutline : mdiCrosshairsGps}
></ha-icon-button>
`}
</ha-textfield>
${this._places !== undefined
? html`
<ha-circular-progress
slot="trailingIcon"
active
size="small"
></ha-circular-progress>
<mwc-list activatable>
${this._places?.length
? this._places.map((place) => {
const primary = [
place.name || place.address[place.category],
place.address.house_number,
place.address.road || place.address.waterway,
place.address.village || place.address.town,
place.address.suburb || place.address.subdivision,
place.address.city || place.address.municipality,
]
.filter(Boolean)
.join(", ");
const secondary = [
place.address.county ||
place.address.state_district ||
place.address.region,
place.address.state,
place.address.country,
]
.filter(Boolean)
.join(", ");
return html`<ha-list-item
@click=${this._itemClicked}
.placeId=${place.place_id}
.selected=${this._highlightedMarker === place.place_id}
.activated=${this._highlightedMarker === place.place_id}
.twoline=${primary && secondary}
>
${primary || secondary}
<span slot="secondary"
>${primary ? secondary : ""}</span
>
</ha-list-item>`;
})
: html`<ha-list-item noninteractive
>${this._places === null
? ""
: "No results"}</ha-list-item
>`}
</mwc-list>
`
: html`
<ha-icon-button
@click=${this._handleButtonClick}
slot="trailingIcon"
.disabled=${this._working}
.label=${this.onboardingLocalize(
this._search
? "ui.common.search"
: "ui.panel.page-onboarding.core-config.button_detect"
)}
.path=${this._search ? mdiMapSearchOutline : mdiCrosshairsGps}
></ha-icon-button>
`}
</ha-textfield>
${this._places !== undefined
? html`
<mwc-list activatable>
${this._places?.length
? this._places.map((place) => {
const primary = [
place.name || place.address[place.category],
place.address.house_number,
place.address.road || place.address.waterway,
place.address.village || place.address.town,
place.address.suburb || place.address.subdivision,
place.address.city || place.address.municipality,
]
.filter(Boolean)
.join(", ");
const secondary = [
place.address.county ||
place.address.state_district ||
place.address.region,
place.address.state,
place.address.country,
]
.filter(Boolean)
.join(", ");
return html`<ha-list-item
@click=${this._itemClicked}
.placeId=${place.place_id}
.selected=${this._highlightedMarker === place.place_id}
.activated=${this._highlightedMarker === place.place_id}
.twoline=${primary && secondary}
>
${primary || secondary}
<span slot="secondary">${primary ? secondary : ""}</span>
</ha-list-item>`;
})
: html`<ha-list-item noninteractive
>${this._places === null ? "" : "No results"}</ha-list-item
>`}
</mwc-list>
`
: nothing}
<p class="attribution">${addressAttribution}</p>
: nothing}
</div>
<ha-locations-editor
class="flex"
.hass=${this.hass}
@ -184,11 +198,10 @@ class OnboardingLocation extends LitElement {
@marker-clicked=${this._markerClicked}
></ha-locations-editor>
<p class="attribution">${addressAttribution}</p>
<div class="footer">
<mwc-button
@click=${this._save}
.disabled=${!this._location || this._working}
>
<mwc-button @click=${this._save} unelevated .disabled=${this._working}>
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.finish"
)}
@ -301,7 +314,6 @@ class OnboardingLocation extends LitElement {
private async _searchAddress(address: string) {
this._working = true;
this._location = undefined;
this._highlightedMarker = undefined;
this._error = undefined;
this._places = null;
@ -464,74 +476,76 @@ class OnboardingLocation extends LitElement {
}
static get styles(): CSSResultGroup {
return css`
p {
font-size: 14px;
line-height: 20px;
}
ha-textfield {
display: block;
}
ha-textfield > ha-icon-button {
position: absolute;
top: 10px;
right: 10px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
inset-inline-start: initial;
inset-inline-end: 10px;
direction: var(--direction);
}
ha-textfield > ha-circular-progress {
position: relative;
left: 12px;
}
ha-locations-editor {
display: block;
height: 300px;
margin-top: 8px;
border-radius: var(--mdc-shape-small, 4px);
overflow: hidden;
}
mwc-list {
width: 100%;
border: 1px solid var(--divider-color);
box-sizing: border-box;
border-top-width: 0;
border-bottom-left-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: var(--mdc-shape-small, 4px);
--mdc-list-vertical-padding: 0;
}
ha-list-item {
height: 72px;
}
.footer {
margin-top: 16px;
text-align: right;
}
.attribution {
/* textfield helper style */
margin: 0;
padding: 4px 16px 12px 16px;
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
font-family: var(
--mdc-typography-caption-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif)
);
font-size: var(--mdc-typography-caption-font-size, 0.75rem);
font-weight: var(--mdc-typography-caption-font-weight, 400);
letter-spacing: var(
--mdc-typography-caption-letter-spacing,
0.0333333333em
);
text-decoration: var(--mdc-typography-caption-text-decoration, inherit);
text-transform: var(--mdc-typography-caption-text-transform, inherit);
}
.attribution a {
color: inherit;
}
`;
return [
onBoardingStyles,
css`
.location-search {
margin-top: 32px;
margin-bottom: 32px;
}
ha-textfield {
display: block;
}
ha-textfield > ha-icon-button {
position: absolute;
top: 10px;
right: 10px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
inset-inline-start: initial;
inset-inline-end: 10px;
direction: var(--direction);
}
ha-textfield > ha-circular-progress {
position: relative;
left: 12px;
}
ha-locations-editor {
display: block;
height: 300px;
margin-top: 8px;
border-radius: var(--mdc-shape-large, 16px);
overflow: hidden;
}
mwc-list {
width: 100%;
border: 1px solid var(--divider-color);
box-sizing: border-box;
border-top-width: 0;
border-bottom-left-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: var(--mdc-shape-small, 4px);
--mdc-list-vertical-padding: 0;
}
ha-list-item {
height: 72px;
}
.attribution {
/* textfield helper style */
margin: 0;
padding: 4px 16px 12px 16px;
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
font-family: var(
--mdc-typography-caption-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif)
);
font-size: var(--mdc-typography-caption-font-size, 0.75rem);
font-weight: var(--mdc-typography-caption-font-weight, 400);
letter-spacing: var(
--mdc-typography-caption-letter-spacing,
0.0333333333em
);
text-decoration: var(
--mdc-typography-caption-text-decoration,
inherit
);
text-transform: var(--mdc-typography-caption-text-transform, inherit);
}
.attribution a {
color: inherit;
}
`,
];
}
}

15
src/onboarding/particles.ts
View File

@ -1,5 +1,6 @@
import { tsParticles } from "tsparticles-engine";
import { loadLinksPreset } from "tsparticles-preset-links";
import { DEFAULT_PRIMARY_COLOR } from "../resources/ha-style";
loadLinksPreset(tsParticles).then(() => {
tsParticles.load("particles", {
@ -22,16 +23,16 @@ loadLinksPreset(tsParticles).then(() => {
},
particles: {
color: {
value: "#fff",
animation: {
enable: true,
speed: 50,
sync: false,
},
value: DEFAULT_PRIMARY_COLOR,
},
animation: {
enable: true,
speed: 50,
sync: false,
},
links: {
color: {
value: "random",
value: DEFAULT_PRIMARY_COLOR,
},
distance: 100,
enable: true,

19
src/onboarding/styles.ts Normal file
View File

@ -0,0 +1,19 @@
import { css } from "lit";
export const onBoardingStyles = css`
h1 {
text-align: center;
font-weight: 400;
font-size: 28px;
line-height: 36px;
}
p {
font-size: 1rem;
line-height: 1.5rem;
text-align: center;
}
.footer {
margin-top: 16px;
text-align: right;
}
`;

7
src/translations/en.json
View File

@ -5687,6 +5687,9 @@
"password": "Password",
"password_confirm": "Confirm password"
},
"helper": {
"password": "Choose a strong and unique password. Make sure to save it, so you don't forget it."
},
"create_account": "Create account",
"error": {
"password_not_match": "Passwords don't match"
@ -5706,8 +5709,8 @@
"finish": "Next"
},
"integration": {
"header": "We already found compatible devices on your network!",
"intro": "We have set some of them up for you. Some might need more configuration.",
"header": "We found compatible devices!",
"intro": "These are found on your local network. Some are already added, others may need extra configuration.",
"more_integrations": "+{count} more",
"finish": "Finish"
},