From 06475382e84e3b1f9205ed736129cc59bbbffd08 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Wed, 5 Nov 2025 10:54:36 +0100 Subject: [PATCH] Fix auth language picker styles (#27805) --- landing-page/src/ha-landing-page.ts | 50 +++++++++++----------------- src/auth/ha-authorize.ts | 33 +++++++----------- src/components/ha-language-picker.ts | 47 ++++++++++++++++++++------ 3 files changed, 68 insertions(+), 62 deletions(-) diff --git a/landing-page/src/ha-landing-page.ts b/landing-page/src/ha-landing-page.ts index a8601b82b8..b1d64b02e5 100644 --- a/landing-page/src/ha-landing-page.ts +++ b/landing-page/src/ha-landing-page.ts @@ -1,22 +1,25 @@ import "@material/mwc-linear-progress"; -import { type PropertyValues, css, html, nothing } from "lit"; +import { mdiOpenInNew } from "@mdi/js"; +import { css, html, nothing, type PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { extractSearchParam } from "../../src/common/url/search-params"; import "../../src/components/ha-alert"; +import "../../src/components/ha-button"; import "../../src/components/ha-fade-in"; import "../../src/components/ha-spinner"; -import { haStyle } from "../../src/resources/styles"; -import "../../src/onboarding/onboarding-welcome-links"; -import "./components/landing-page-network"; -import "./components/landing-page-logs"; -import { extractSearchParam } from "../../src/common/url/search-params"; -import { onBoardingStyles } from "../../src/onboarding/styles"; +import "../../src/components/ha-svg-icon"; import { makeDialogManager } from "../../src/dialogs/make-dialog-manager"; -import { LandingPageBaseElement } from "./landing-page-base-element"; +import "../../src/onboarding/onboarding-welcome-links"; +import { onBoardingStyles } from "../../src/onboarding/styles"; +import { haStyle } from "../../src/resources/styles"; +import "./components/landing-page-logs"; +import "./components/landing-page-network"; import { getSupervisorNetworkInfo, pingSupervisor, type NetworkInfo, } from "./data/supervisor"; +import { LandingPageBaseElement } from "./landing-page-base-element"; export const ASSUME_CORE_START_SECONDS = 60; const SCHEDULE_CORE_CHECK_SECONDS = 1; @@ -94,16 +97,21 @@ class HaLandingPage extends LandingPageBaseElement { - ${this.localize("ui.panel.page-onboarding.help")} + ${this.localize("ui.panel.page-onboarding.help")} + + `; } @@ -218,26 +226,8 @@ class HaLandingPage extends LandingPageBaseElement { ha-alert p { text-align: unset; } - ha-language-picker { - display: block; - width: 200px; - border-radius: var(--ha-border-radius-sm); - overflow: hidden; - --ha-select-height: 40px; - --mdc-select-fill-color: none; - --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; - } - a { - text-decoration: none; - color: var(--primary-text-color); - margin-right: 16px; - margin-inline-end: 16px; - margin-inline-start: initial; + .footer ha-svg-icon { + --mdc-icon-size: var(--ha-space-5); } ha-fade-in { min-height: calc(100vh - 64px - 88px); diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index 56a0143031..294c0201bd 100644 --- a/src/auth/ha-authorize.ts +++ b/src/auth/ha-authorize.ts @@ -1,4 +1,5 @@ /* eslint-disable lit/prefer-static-styles */ +import { mdiOpenInNew } from "@mdi/js"; import type { PropertyValues } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -6,6 +7,8 @@ import punycode from "punycode"; import { applyThemesOnElement } from "../common/dom/apply_themes_on_element"; import { extractSearchParamsObject } from "../common/url/search-params"; import "../components/ha-alert"; +import "../components/ha-button"; +import "../components/ha-svg-icon"; import type { AuthProvider, AuthUrlSearchParams } from "../data/auth"; import { fetchAuthProviders } from "../data/auth"; import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin"; @@ -133,25 +136,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) { justify-content: space-between; align-items: center; } - ha-language-picker { - width: 200px; - border-radius: var(--ha-border-radius-sm); - overflow: hidden; - --ha-select-height: 40px; - --mdc-select-fill-color: none; - --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; - } - .footer a { - text-decoration: none; - color: var(--primary-text-color); - margin-right: 16px; - margin-inline-end: 16px; - margin-inline-start: initial; + .footer ha-svg-icon { + --mdc-icon-size: var(--ha-space-5); } h1 { font-size: var(--ha-font-size-3xl); @@ -205,16 +191,21 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) { - ${this.localize("ui.panel.page-authorize.help")} + ${this.localize("ui.panel.page-authorize.help")} + + `; } diff --git a/src/components/ha-language-picker.ts b/src/components/ha-language-picker.ts index f0f6d4449d..40fb2a039c 100644 --- a/src/components/ha-language-picker.ts +++ b/src/components/ha-language-picker.ts @@ -1,6 +1,7 @@ +import { mdiMenuDown } from "@mdi/js"; import type { PropertyValues } from "lit"; -import { css, html, LitElement } from "lit"; -import { customElement, property, state } from "lit/decorators"; +import { css, html, LitElement, nothing } from "lit"; +import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; import { formatLanguageCode } from "../common/language/format_language"; @@ -8,10 +9,10 @@ import { caseInsensitiveStringCompare } from "../common/string/compare"; import type { FrontendLocaleData } from "../data/translation"; import { translationMetadata } from "../resources/translations-metadata"; import type { HomeAssistant, ValueChangedEvent } from "../types"; +import "./ha-button"; import "./ha-generic-picker"; -import "./ha-list-item"; +import type { HaGenericPicker } from "./ha-generic-picker"; import type { PickerComboBoxItem } from "./ha-picker-combo-box"; -import "./ha-select"; export const getLanguageOptions = ( languages: string[], @@ -75,6 +76,9 @@ export class HaLanguagePicker extends LitElement { @property({ attribute: "native-name", type: Boolean }) public nativeName = false; + @property({ type: Boolean, attribute: "button-style" }) + public buttonStyle = false; + @property({ attribute: "no-sort", type: Boolean }) public noSort = false; @property({ attribute: "inline-arrow", type: Boolean }) @@ -82,6 +86,8 @@ export class HaLanguagePicker extends LitElement { @state() _defaultLanguages: string[] = []; + @query("ha-generic-picker", true) public genericPicker!: HaGenericPicker; + protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); this._computeDefaultLanguageOptions(); @@ -101,12 +107,13 @@ export class HaLanguagePicker extends LitElement { this.hass?.locale ); - private _valueRenderer = (value) => { - const language = this._getItems().find( - (lang) => lang.id === value - )?.primary; - return html`${language ?? value} `; - }; + private _getLanguageName = (lang?: string) => + this._getItems().find((language) => language.id === lang)?.primary; + + private _valueRenderer = (value) => + html`${this._getLanguageName(value) ?? value} `; protected render() { const value = @@ -130,10 +137,28 @@ export class HaLanguagePicker extends LitElement { .getItems=${this._getItems} @value-changed=${this._changed} hide-clear-icon - > + > + ${this.buttonStyle + ? html` + ${this._getLanguageName(value)} + + ` + : nothing} + `; } + private _openPicker(ev: Event) { + ev.stopPropagation(); + this.genericPicker.open(); + } + static styles = css` ha-generic-picker { width: 100%;