jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 11:16:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use ha-dialog-header for data-entry-flow (#25403)

Browse Source 
* Use ha-dialog-header for data-entry-flow header

* Fix header wrap
This commit is contained in:
Wendelin 2025-05-13 13:17:54 +02:00 committed by GitHub
parent e1b9b47ac7
commit 910e7e10a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 208 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
src/dialogs/config-flow/dialog-data-entry-flow.ts
View File

@ -1,17 +1,20 @@
import { mdiClose, mdiHelpCircle } from "@mdi/js"; import { mdiClose, mdiHelpCircle } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup, PropertyValues } from "lit"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import type { HASSDomEvent } from "../../common/dom/fire_event"; import type { HASSDomEvent } from "../../common/dom/fire_event";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-dialog"; import "../../components/ha-dialog";
import "../../components/ha-dialog-header";
import "../../components/ha-icon-button"; import "../../components/ha-icon-button";
import type { DataEntryFlowStep } from "../../data/data_entry_flow"; import type { DataEntryFlowStep } from "../../data/data_entry_flow";
import { import {
subscribeDataEntryFlowProgress, subscribeDataEntryFlowProgress,
subscribeDataEntryFlowProgressed, subscribeDataEntryFlowProgressed,
} from "../../data/data_entry_flow"; } from "../../data/data_entry_flow";
import type { DeviceRegistryEntry } from "../../data/device_registry";
import { haStyleDialog } from "../../resources/styles"; import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import { documentationUrl } from "../../util/documentation-url"; import { documentationUrl } from "../../util/documentation-url";
@ -171,6 +174,92 @@ class DataEntryFlowDialog extends LitElement {
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
private _devices = memoizeOne(
(
showDevices: boolean,
devices: DeviceRegistryEntry[],
entry_id?: string
) =>
showDevices && entry_id
? devices.filter((device) => device.config_entries.includes(entry_id))
: []
);
private _getDialogTitle(): string {
if (this._loading || !this._step || !this._params) {
return "";
}
switch (this._step.type) {
case "form":
return this._params.flowConfig.renderShowFormStepHeader(
this.hass,
this._step
);
case "abort":
return this._params.flowConfig.renderAbortHeader
? this._params.flowConfig.renderAbortHeader(this.hass, this._step)
: this.hass.localize(
`component.${this._params.domain ?? this._step.handler}.title`
);
case "progress":
return this._params.flowConfig.renderShowFormProgressHeader(
this.hass,
this._step
);
case "menu":
return this._params.flowConfig.renderMenuHeader(this.hass, this._step);
case "create_entry": {
const devicesLength = this._devices(
this._params.flowConfig.showDevices,
Object.values(this.hass.devices),
this._step.result?.entry_id
).length;
return this.hass.localize(
`ui.panel.config.integrations.config_flow.${
devicesLength ? "device_created" : "success"
}`,
{
number: devicesLength,
}
);
}
default:
return "";
}
}
private _getDialogSubtitle(): string | TemplateResult | undefined {
if (this._loading || !this._step || !this._params) {
return "";
}
switch (this._step.type) {
case "form":
return this._params.flowConfig.renderShowFormStepSubheader?.(
this.hass,
this._step
);
case "abort":
return this._params.flowConfig.renderAbortSubheader?.(
this.hass,
this._step
);
case "progress":
return this._params.flowConfig.renderShowFormProgressSubheader?.(
this.hass,
this._step
);
case "menu":
return this._params.flowConfig.renderMenuSubheader?.(
this.hass,
this._step
);
default:
return "";
}
}
protected render() { protected render() {
if (!this._params) { if (!this._params) {
return nothing; return nothing;
@ -187,6 +276,9 @@ class DataEntryFlowDialog extends LitElement {
this._params.manifest?.is_built_in) || this._params.manifest?.is_built_in) ||
!!this._params.manifest?.documentation; !!this._params.manifest?.documentation;
const dialogTitle = this._getDialogTitle();
const dialogSubtitle = this._getDialogSubtitle();
return html` return html`
<ha-dialog <ha-dialog
open open
@ -194,7 +286,50 @@ class DataEntryFlowDialog extends LitElement {
scrimClickAction scrimClickAction
escapeKeyAction escapeKeyAction
hideActions hideActions
.heading=${dialogTitle}
> >
<ha-dialog-header slot="heading">
<ha-icon-button
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
dialogAction="close"
slot="navigationIcon"
></ha-icon-button>
<div
slot="title"
class="dialog-title${this._step?.type === "form" ? " form" : ""}"
title=${dialogTitle}
>
${dialogTitle}
</div>
${dialogSubtitle
? html` <div slot="subtitle">${dialogSubtitle}</div>`
: nothing}
${showDocumentationLink && !this._loading && this._step
? html`
<a
slot="actionItems"
class="help"
href=${this._params.manifest!.is_built_in
? documentationUrl(
this.hass,
`/integrations/${this._params.manifest!.domain}`
)
: this._params.manifest!.documentation}
target="_blank"
rel="noreferrer noopener"
>
<ha-icon-button
.label=${this.hass.localize("ui.common.help")}
.path=${mdiHelpCircle}
>
</ha-icon-button
></a>
`
: nothing}
</ha-dialog-header>
<div> <div>
${this._loading || this._step === null ${this._loading || this._step === null
? html` ? html`
@ -211,40 +346,12 @@ class DataEntryFlowDialog extends LitElement {
// to reset the element. // to reset the element.
nothing nothing
: html` : html`
<div class="dialog-actions">
${showDocumentationLink
? html`
<a
href=${this._params.manifest!.is_built_in
? documentationUrl(
this.hass,
`/integrations/${this._params.manifest!.domain}`
)
: this._params.manifest!.documentation}
target="_blank"
rel="noreferrer noopener"
>
<ha-icon-button
.label=${this.hass.localize("ui.common.help")}
.path=${mdiHelpCircle}
>
</ha-icon-button
></a>
`
: nothing}
<ha-icon-button
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
dialogAction="close"
></ha-icon-button>
</div>
${this._step.type === "form" ${this._step.type === "form"
? html` ? html`
<step-flow-form <step-flow-form
.flowConfig=${this._params.flowConfig} .flowConfig=${this._params.flowConfig}
.step=${this._step} .step=${this._step}
.hass=${this.hass} .hass=${this.hass}
.increasePaddingEnd=${showDocumentationLink}
></step-flow-form> ></step-flow-form>
` `
: this._step.type === "external" : this._step.type === "external"
@ -253,7 +360,6 @@ class DataEntryFlowDialog extends LitElement {
.flowConfig=${this._params.flowConfig} .flowConfig=${this._params.flowConfig}
.step=${this._step} .step=${this._step}
.hass=${this.hass} .hass=${this.hass}
.increasePaddingEnd=${showDocumentationLink}
></step-flow-external> ></step-flow-external>
` `
: this._step.type === "abort" : this._step.type === "abort"
@ -265,7 +371,6 @@ class DataEntryFlowDialog extends LitElement {
.handler=${this._step.handler} .handler=${this._step.handler}
.domain=${this._params.domain ?? .domain=${this._params.domain ??
this._step.handler} this._step.handler}
.increasePaddingEnd=${showDocumentationLink}
></step-flow-abort> ></step-flow-abort>
` `
: this._step.type === "progress" : this._step.type === "progress"
@ -275,7 +380,6 @@ class DataEntryFlowDialog extends LitElement {
.step=${this._step} .step=${this._step}
.hass=${this.hass} .hass=${this.hass}
.progress=${this._progress} .progress=${this._progress}
.increasePaddingEnd=${showDocumentationLink}
></step-flow-progress> ></step-flow-progress>
` `
: this._step.type === "menu" : this._step.type === "menu"
@ -284,7 +388,6 @@ class DataEntryFlowDialog extends LitElement {
.flowConfig=${this._params.flowConfig} .flowConfig=${this._params.flowConfig}
.step=${this._step} .step=${this._step}
.hass=${this.hass} .hass=${this.hass}
.increasePaddingEnd=${showDocumentationLink}
></step-flow-menu> ></step-flow-menu>
` `
: html` : html`
@ -294,7 +397,11 @@ class DataEntryFlowDialog extends LitElement {
.hass=${this.hass} .hass=${this.hass}
.navigateToResult=${this._params .navigateToResult=${this._params
.navigateToResult ?? false} .navigateToResult ?? false}
.increasePaddingEnd=${showDocumentationLink} .devices=${this._devices(
this._params.flowConfig.showDevices,
Object.values(this.hass.devices),
this._step.result?.entry_id
)}
></step-flow-create-entry> ></step-flow-create-entry>
`} `}
`} `}
@ -384,16 +491,14 @@ class DataEntryFlowDialog extends LitElement {
ha-dialog { ha-dialog {
--dialog-content-padding: 0; --dialog-content-padding: 0;
} }
.dialog-actions { .dialog-title {
padding: 16px; overflow: hidden;
position: absolute; text-overflow: ellipsis;
top: 0;
right: 0;
inset-inline-start: initial;
inset-inline-end: 0px;
direction: var(--direction);
} }
.dialog-actions > * { .dialog-title.form {
white-space: normal;
}
.help {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
`, `,

20
src/dialogs/config-flow/show-dialog-data-entry-flow.ts
View File

@ -31,10 +31,12 @@ export interface FlowConfig {
deleteFlow(hass: HomeAssistant, flowId: string): Promise<unknown>; deleteFlow(hass: HomeAssistant, flowId: string): Promise<unknown>;
renderAbortHeader?( renderAbortHeader?(hass: HomeAssistant, step: DataEntryFlowStepAbort): string;
renderAbortSubheader?(
hass: HomeAssistant, hass: HomeAssistant,
step: DataEntryFlowStepAbort step: DataEntryFlowStepAbort
): TemplateResult | string; ): string | TemplateResult;
renderAbortDescription( renderAbortDescription(
hass: HomeAssistant, hass: HomeAssistant,
@ -44,6 +46,11 @@ export interface FlowConfig {
renderShowFormStepHeader( renderShowFormStepHeader(
hass: HomeAssistant, hass: HomeAssistant,
step: DataEntryFlowStepForm step: DataEntryFlowStepForm
): string;
renderShowFormStepSubheader?(
hass: HomeAssistant,
step: DataEntryFlowStepForm
): string | TemplateResult; ): string | TemplateResult;
renderShowFormStepDescription( renderShowFormStepDescription(
@ -100,6 +107,11 @@ export interface FlowConfig {
renderShowFormProgressHeader( renderShowFormProgressHeader(
hass: HomeAssistant, hass: HomeAssistant,
step: DataEntryFlowStepProgress step: DataEntryFlowStepProgress
): string;
renderShowFormProgressSubheader?(
hass: HomeAssistant,
step: DataEntryFlowStepProgress
): string | TemplateResult; ): string | TemplateResult;
renderShowFormProgressDescription( renderShowFormProgressDescription(
@ -107,7 +119,9 @@ export interface FlowConfig {
step: DataEntryFlowStepProgress step: DataEntryFlowStepProgress
): TemplateResult | ""; ): TemplateResult | "";
renderMenuHeader( renderMenuHeader(hass: HomeAssistant, step: DataEntryFlowStepMenu): string;
renderMenuSubheader?(
hass: HomeAssistant, hass: HomeAssistant,
step: DataEntryFlowStepMenu step: DataEntryFlowStepMenu
): string | TemplateResult; ): string | TemplateResult;

8
src/dialogs/config-flow/step-flow-abort.ts
View File

@ -22,9 +22,6 @@ class StepFlowAbort extends LitElement {
@property({ attribute: false }) public handler!: string; @property({ attribute: false }) public handler!: string;
@property({ type: Boolean, attribute: "increase-padding-end" })
public increasePaddingEnd = false;
protected firstUpdated(changed: PropertyValues) { protected firstUpdated(changed: PropertyValues) {
super.firstUpdated(changed); super.firstUpdated(changed);
if (this.step.reason === "missing_credentials") { if (this.step.reason === "missing_credentials") {
@ -37,11 +34,6 @@ class StepFlowAbort extends LitElement {
return nothing; return nothing;
} }
return html` return html`
<h2 class=${this.increasePaddingEnd ? "end-space" : ""}>
${this.params.flowConfig.renderAbortHeader
? this.params.flowConfig.renderAbortHeader(this.hass, this.step)
: this.hass.localize(`component.${this.domain}.title`)}
</h2>
<div class="content"> <div class="content">
${this.params.flowConfig.renderAbortDescription(this.hass, this.step)} ${this.params.flowConfig.renderAbortDescription(this.hass, this.step)}
</div> </div>

48
src/dialogs/config-flow/step-flow-create-entry.ts
View File

@ -36,8 +36,7 @@ class StepFlowCreateEntry extends LitElement {
@property({ attribute: false }) public step!: DataEntryFlowStepCreateEntry; @property({ attribute: false }) public step!: DataEntryFlowStepCreateEntry;
@property({ type: Boolean, attribute: "increase-padding-end" }) @property({ attribute: false }) public devices!: DeviceRegistryEntry[];
public increasePaddingEnd = false;
public navigateToResult = false; public navigateToResult = false;
@ -46,17 +45,6 @@ class StepFlowCreateEntry extends LitElement {
{ name?: string; area?: string } { name?: string; area?: string }
> = {}; > = {};
private _devices = memoizeOne(
(
showDevices: boolean,
devices: DeviceRegistryEntry[],
entry_id?: string
) =>
showDevices && entry_id
? devices.filter((device) => device.config_entries.includes(entry_id))
: []
);
private _deviceEntities = memoizeOne( private _deviceEntities = memoizeOne(
( (
deviceId: string, deviceId: string,
@ -75,22 +63,16 @@ class StepFlowCreateEntry extends LitElement {
return; return;
} }
const devices = this._devices(
this.flowConfig.showDevices,
Object.values(this.hass.devices),
this.step.result?.entry_id
);
if ( if (
devices.length !== 1 || this.devices.length !== 1 ||
devices[0].primary_config_entry !== this.step.result?.entry_id || this.devices[0].primary_config_entry !== this.step.result?.entry_id ||
this.step.result.domain === "voip" this.step.result.domain === "voip"
) { ) {
return; return;
} }
const assistSatellites = this._deviceEntities( const assistSatellites = this._deviceEntities(
devices[0].id, this.devices[0].id,
Object.values(this.hass.entities), Object.values(this.hass.entities),
"assist_satellite" "assist_satellite"
); );
@ -103,26 +85,14 @@ class StepFlowCreateEntry extends LitElement {
this.navigateToResult = false; this.navigateToResult = false;
this._flowDone(); this._flowDone();
showVoiceAssistantSetupDialog(this, { showVoiceAssistantSetupDialog(this, {
deviceId: devices[0].id, deviceId: this.devices[0].id,
}); });
} }
} }
protected render(): TemplateResult { protected render(): TemplateResult {
const localize = this.hass.localize; const localize = this.hass.localize;
const devices = this._devices(
this.flowConfig.showDevices,
Object.values(this.hass.devices),
this.step.result?.entry_id
);
return html` return html`
<h2 class=${this.increasePaddingEnd ? "end-space" : ""}>
${devices.length
? localize("ui.panel.config.integrations.config_flow.assign_area", {
number: devices.length,
})
: `${localize("ui.panel.config.integrations.config_flow.success")}!`}
</h2>
<div class="content"> <div class="content">
${this.flowConfig.renderCreateEntryDescription(this.hass, this.step)} ${this.flowConfig.renderCreateEntryDescription(this.hass, this.step)}
${this.step.result?.state === "not_loaded" ${this.step.result?.state === "not_loaded"
@ -132,10 +102,10 @@ class StepFlowCreateEntry extends LitElement {
)}</span )}</span
>` >`
: nothing} : nothing}
${devices.length === 0 && ${this.devices.length === 0 &&
["options_flow", "repair_flow"].includes(this.flowConfig.flowType) ["options_flow", "repair_flow"].includes(this.flowConfig.flowType)
? nothing ? nothing
: devices.length === 0 : this.devices.length === 0
? html`<p> ? html`<p>
${localize( ${localize(
"ui.panel.config.integrations.config_flow.created_config", "ui.panel.config.integrations.config_flow.created_config",
@ -144,7 +114,7 @@ class StepFlowCreateEntry extends LitElement {
</p>` </p>`
: html` : html`
<div class="devices"> <div class="devices">
${devices.map( ${this.devices.map(
(device) => html` (device) => html`
<div class="device"> <div class="device">
<div class="device-info"> <div class="device-info">
@ -203,7 +173,7 @@ class StepFlowCreateEntry extends LitElement {
<div class="buttons"> <div class="buttons">
<mwc-button @click=${this._flowDone} <mwc-button @click=${this._flowDone}
>${localize( >${localize(
`ui.panel.config.integrations.config_flow.${!devices.length || Object.keys(this._deviceUpdate).length ? "finish" : "finish_skip"}` `ui.panel.config.integrations.config_flow.${!this.devices.length || Object.keys(this._deviceUpdate).length ? "finish" : "finish_skip"}`
)}</mwc-button )}</mwc-button
> >
</div> </div>

9
src/dialogs/config-flow/step-flow-external.ts
View File

@ -15,16 +15,10 @@ class StepFlowExternal extends LitElement {
@property({ attribute: false }) public step!: DataEntryFlowStepExternal; @property({ attribute: false }) public step!: DataEntryFlowStepExternal;
@property({ type: Boolean, attribute: "increase-padding-end" })
public increasePaddingEnd = false;
protected render(): TemplateResult { protected render(): TemplateResult {
const localize = this.hass.localize; const localize = this.hass.localize;
return html` return html`
<h2 class=${this.increasePaddingEnd ? "end-space" : ""}>
${this.flowConfig.renderExternalStepHeader(this.hass, this.step)}
</h2>
<div class="content"> <div class="content">
${this.flowConfig.renderExternalStepDescription(this.hass, this.step)} ${this.flowConfig.renderExternalStepDescription(this.hass, this.step)}
<div class="open-button"> <div class="open-button">
@ -56,9 +50,6 @@ class StepFlowExternal extends LitElement {
.open-button a { .open-button a {
text-decoration: none; text-decoration: none;
} }
h2.end-space {
padding-inline-end: 72px;
}
`, `,
]; ];
} }

15
src/dialogs/config-flow/step-flow-form.ts
View File

@ -6,18 +6,18 @@ import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { isNavigationClick } from "../../common/dom/is-navigation-click"; import { isNavigationClick } from "../../common/dom/is-navigation-click";
import "../../components/ha-alert"; import "../../components/ha-alert";
import "../../components/ha-spinner";
import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data"; import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data";
import "../../components/ha-form/ha-form"; import "../../components/ha-form/ha-form";
import type { HaFormSchema } from "../../components/ha-form/types"; import type { HaFormSchema } from "../../components/ha-form/types";
import "../../components/ha-markdown"; import "../../components/ha-markdown";
import "../../components/ha-spinner";
import { autocompleteLoginFields } from "../../data/auth"; import { autocompleteLoginFields } from "../../data/auth";
import type { DataEntryFlowStepForm } from "../../data/data_entry_flow"; import type { DataEntryFlowStepForm } from "../../data/data_entry_flow";
import { previewModule } from "../../data/preview";
import { haStyle } from "../../resources/styles";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import type { FlowConfig } from "./show-dialog-data-entry-flow"; import type { FlowConfig } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles"; import { configFlowContentStyles } from "./styles";
import { haStyle } from "../../resources/styles";
import { previewModule } from "../../data/preview";
@customElement("step-flow-form") @customElement("step-flow-form")
class StepFlowForm extends LitElement { class StepFlowForm extends LitElement {
@ -27,9 +27,6 @@ class StepFlowForm extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean, attribute: "increase-padding-end" })
public increasePaddingEnd = false;
@state() private _loading = false; @state() private _loading = false;
@state() private _stepData?: Record<string, any>; @state() private _stepData?: Record<string, any>;
@ -46,9 +43,6 @@ class StepFlowForm extends LitElement {
const stepData = this._stepDataProcessed; const stepData = this._stepDataProcessed;
return html` return html`
<h2 class=${this.increasePaddingEnd ? "end-space" : ""}>
${this.flowConfig.renderShowFormStepHeader(this.hass, this.step)}
</h2>
<div class="content" @click=${this._clickHandler}> <div class="content" @click=${this._clickHandler}>
${this.flowConfig.renderShowFormStepDescription(this.hass, this.step)} ${this.flowConfig.renderShowFormStepDescription(this.hass, this.step)}
${this._errorMsg ${this._errorMsg
@ -281,9 +275,6 @@ class StepFlowForm extends LitElement {
margin-top: 24px; margin-top: 24px;
display: block; display: block;
} }
h2 {
word-break: break-word;
}
`, `,
]; ];
} }

6
src/dialogs/config-flow/step-flow-menu.ts
View File

@ -17,9 +17,6 @@ class StepFlowMenu extends LitElement {
@property({ attribute: false }) public step!: DataEntryFlowStepMenu; @property({ attribute: false }) public step!: DataEntryFlowStepMenu;
@property({ type: Boolean, attribute: "increase-padding-end" })
public increasePaddingEnd = false;
protected render(): TemplateResult { protected render(): TemplateResult {
let options: string[]; let options: string[];
let translations: Record<string, string>; let translations: Record<string, string>;
@ -45,9 +42,6 @@ class StepFlowMenu extends LitElement {
); );
return html` return html`
<h2 class=${this.increasePaddingEnd ? "end-space" : ""}>
${this.flowConfig.renderMenuHeader(this.hass, this.step)}
</h2>
${description ? html`<div class="content">${description}</div>` : ""} ${description ? html`<div class="content">${description}</div>` : ""}
<div class="options"> <div class="options">
${options.map( ${options.map(

8
src/dialogs/config-flow/step-flow-progress.ts
View File

@ -2,13 +2,13 @@ import "@material/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { blankBeforePercent } from "../../common/translations/blank_before_percent";
import "../../components/ha-progress-ring"; import "../../components/ha-progress-ring";
import "../../components/ha-spinner"; import "../../components/ha-spinner";
import type { DataEntryFlowStepProgress } from "../../data/data_entry_flow"; import type { DataEntryFlowStepProgress } from "../../data/data_entry_flow";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import type { FlowConfig } from "./show-dialog-data-entry-flow"; import type { FlowConfig } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles"; import { configFlowContentStyles } from "./styles";
import { blankBeforePercent } from "../../common/translations/blank_before_percent";
@customElement("step-flow-progress") @customElement("step-flow-progress")
class StepFlowProgress extends LitElement { class StepFlowProgress extends LitElement {
@ -24,14 +24,8 @@ class StepFlowProgress extends LitElement {
@property({ type: Number }) @property({ type: Number })
public progress?: number; public progress?: number;
@property({ type: Boolean, attribute: "increase-padding-end" })
public increasePaddingEnd = false;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<h2 class=${this.increasePaddingEnd ? "end-space" : ""}>
${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)}
</h2>
<div class="content"> <div class="content">
${this.progress ${this.progress
? html` ? html`

3
src/dialogs/config-flow/styles.ts
View File

@ -25,9 +25,6 @@ export const configFlowContentStyles = css`
text-transform: var(--mdc-typography-headline6-text-transform, inherit); text-transform: var(--mdc-typography-headline6-text-transform, inherit);
box-sizing: border-box; box-sizing: border-box;
} }
h2.end-space {
padding-inline-end: 72px;
}
.content, .content,
.preview { .preview {

40
src/panels/config/repairs/show-dialog-repair-flow.ts
View File

@ -1,7 +1,6 @@
import { html, nothing } from "lit"; import { html, nothing } from "lit";
import type { DataEntryFlowStep } from "../../../data/data_entry_flow"; import type { DataEntryFlowStep } from "../../../data/data_entry_flow";
import { domainToName } from "../../../data/integration"; import { domainToName } from "../../../data/integration";
import "./dialog-repairs-issue-subtitle";
import type { RepairsIssue } from "../../../data/repairs"; import type { RepairsIssue } from "../../../data/repairs";
import { import {
createRepairsFlow, createRepairsFlow,
@ -14,6 +13,7 @@ import {
showFlowDialog, showFlowDialog,
} from "../../../dialogs/config-flow/show-dialog-data-entry-flow"; } from "../../../dialogs/config-flow/show-dialog-data-entry-flow";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import "./dialog-repairs-issue-subtitle";
const mergePlaceholders = (issue: RepairsIssue, step: DataEntryFlowStep) => const mergePlaceholders = (issue: RepairsIssue, step: DataEntryFlowStep) =>
step.description_placeholders && issue.translation_placeholders step.description_placeholders && issue.translation_placeholders
@ -68,8 +68,11 @@ export const showRepairsFlowDialog = (
deleteFlow: deleteRepairsFlow, deleteFlow: deleteRepairsFlow,
renderAbortHeader(hass) { renderAbortHeader(hass) {
return hass.localize("ui.dialogs.repair_flow.form.header");
},
renderAbortSubheader(hass) {
return html` return html`
${hass.localize("ui.dialogs.repair_flow.form.header")}
<dialog-repairs-issue-subtitle <dialog-repairs-issue-subtitle
.hass=${hass} .hass=${hass}
.issue=${issue} .issue=${issue}
@ -98,13 +101,18 @@ export const showRepairsFlowDialog = (
}, },
renderShowFormStepHeader(hass, step) { renderShowFormStepHeader(hass, step) {
return html` return (
${hass.localize( hass.localize(
`component.${issue.domain}.issues.${ `component.${issue.domain}.issues.${
issue.translation_key || issue.issue_id issue.translation_key || issue.issue_id
}.fix_flow.step.${step.step_id}.title`, }.fix_flow.step.${step.step_id}.title`,
mergePlaceholders(issue, step) mergePlaceholders(issue, step)
) || hass.localize("ui.dialogs.repair_flow.form.header")} ) || hass.localize("ui.dialogs.repair_flow.form.header")
);
},
renderShowFormStepSubheader(hass) {
return html`
<dialog-repairs-issue-subtitle <dialog-repairs-issue-subtitle
.hass=${hass} .hass=${hass}
.issue=${issue} .issue=${issue}
@ -196,13 +204,18 @@ export const showRepairsFlowDialog = (
}, },
renderShowFormProgressHeader(hass, step) { renderShowFormProgressHeader(hass, step) {
return html` return (
${hass.localize( hass.localize(
`component.${issue.domain}.issues.step.${ `component.${issue.domain}.issues.step.${
issue.translation_key || issue.issue_id issue.translation_key || issue.issue_id
}.fix_flow.${step.step_id}.title`, }.fix_flow.${step.step_id}.title`,
mergePlaceholders(issue, step) mergePlaceholders(issue, step)
) || hass.localize(`component.${issue.domain}.title`)} ) || hass.localize(`component.${issue.domain}.title`)
);
},
renderShowFormProgressSubheader(hass) {
return html`
<dialog-repairs-issue-subtitle <dialog-repairs-issue-subtitle
.hass=${hass} .hass=${hass}
.issue=${issue} .issue=${issue}
@ -229,13 +242,18 @@ export const showRepairsFlowDialog = (
}, },
renderMenuHeader(hass, step) { renderMenuHeader(hass, step) {
return html` return (
${hass.localize( hass.localize(
`component.${issue.domain}.issues.${ `component.${issue.domain}.issues.${
issue.translation_key || issue.issue_id issue.translation_key || issue.issue_id
}.fix_flow.step.${step.step_id}.title`, }.fix_flow.step.${step.step_id}.title`,
mergePlaceholders(issue, step) mergePlaceholders(issue, step)
) || hass.localize(`component.${issue.domain}.title`)} ) || hass.localize(`component.${issue.domain}.title`)
);
},
renderMenuSubheader(hass) {
return html`
<dialog-repairs-issue-subtitle <dialog-repairs-issue-subtitle
.hass=${hass} .hass=${hass}
.issue=${issue} .issue=${issue}

2
src/translations/en.json
View File

@ -5340,7 +5340,7 @@
}, },
"config_flow": { "config_flow": {
"success": "Success", "success": "Success",
"assign_area": "Assign {number, plural,\n one {device}\n other {devices}\n} to area", "device_created": "{number, plural,\n one {Device}\n other {Devices}\n} created",
"device_name": "Device name", "device_name": "Device name",
"aborted": "Aborted", "aborted": "Aborted",
"close": "Close", "close": "Close",