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

Fix flow form padding end (#25328)

Browse Source 
* Fix flow form padding end

* Use more end padding if docs are present
This commit is contained in:
Wendelin 2025-05-06 13:52:00 +02:00 committed by GitHub
parent 852278e8aa
commit 00d708fbd4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 61 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,3 @@
import "@material/mwc-button";
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 } from "lit";
@ -177,6 +176,17 @@ class DataEntryFlowDialog extends LitElement {
return nothing; return nothing;
} }
const showDocumentationLink =
([
"form",
"menu",
"external",
"progress",
"data_entry_flow_progressed",
].includes(this._step?.type as any) &&
this._params.manifest?.is_built_in) ||
!!this._params.manifest?.documentation;
return html` return html`
<ha-dialog <ha-dialog
open open
@ -191,7 +201,7 @@ class DataEntryFlowDialog extends LitElement {
<step-flow-loading <step-flow-loading
.flowConfig=${this._params.flowConfig} .flowConfig=${this._params.flowConfig}
.hass=${this.hass} .hass=${this.hass}
.loadingReason=${this._loading} .loadingReason=${this._loading!}
.handler=${this._handler} .handler=${this._handler}
.step=${this._step} .step=${this._step}
></step-flow-loading> ></step-flow-loading>
@ -199,26 +209,18 @@ class DataEntryFlowDialog extends LitElement {
: this._step === undefined : this._step === undefined
? // When we are going to next step, we render 1 round of empty ? // When we are going to next step, we render 1 round of empty
// to reset the element. // to reset the element.
"" nothing
: html` : html`
<div class="dialog-actions"> <div class="dialog-actions">
${([ ${showDocumentationLink
"form",
"menu",
"external",
"progress",
"data_entry_flow_progressed",
].includes(this._step?.type as any) &&
this._params.manifest?.is_built_in) ||
this._params.manifest?.documentation
? html` ? html`
<a <a
href=${this._params.manifest.is_built_in href=${this._params.manifest!.is_built_in
? documentationUrl( ? documentationUrl(
this.hass, this.hass,
`/integrations/${this._params.manifest.domain}` `/integrations/${this._params.manifest!.domain}`
) )
: this._params?.manifest?.documentation} : this._params.manifest!.documentation}
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
@ -229,7 +231,7 @@ class DataEntryFlowDialog extends LitElement {
</ha-icon-button </ha-icon-button
></a> ></a>
` `
: ""} : nothing}
<ha-icon-button <ha-icon-button
.label=${this.hass.localize("ui.common.close")} .label=${this.hass.localize("ui.common.close")}
.path=${mdiClose} .path=${mdiClose}
@ -242,6 +244,7 @@ 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-form> ></step-flow-form>
` `
: this._step.type === "external" : this._step.type === "external"
@ -250,6 +253,7 @@ 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"
@ -261,6 +265,7 @@ 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"
@ -270,6 +275,7 @@ 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"
@ -278,6 +284,7 @@ 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`
@ -286,7 +293,8 @@ class DataEntryFlowDialog extends LitElement {
.step=${this._step} .step=${this._step}
.hass=${this.hass} .hass=${this.hass}
.navigateToResult=${this._params .navigateToResult=${this._params
.navigateToResult} .navigateToResult ?? false}
.increasePaddingEnd=${showDocumentationLink}
></step-flow-create-entry> ></step-flow-create-entry>
`} `}
`} `}

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

@ -22,6 +22,9 @@ 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") {
@ -34,7 +37,7 @@ class StepFlowAbort extends LitElement {
return nothing; return nothing;
} }
return html` return html`
<h2> <h2 class=${this.increasePaddingEnd ? "end-space" : ""}>
${this.params.flowConfig.renderAbortHeader ${this.params.flowConfig.renderAbortHeader
? this.params.flowConfig.renderAbortHeader(this.hass, this.step) ? this.params.flowConfig.renderAbortHeader(this.hass, this.step)
: this.hass.localize(`component.${this.domain}.title`)} : this.hass.localize(`component.${this.domain}.title`)}

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

@ -36,6 +36,9 @@ class StepFlowCreateEntry extends LitElement {
@property({ attribute: false }) public step!: DataEntryFlowStepCreateEntry; @property({ attribute: false }) public step!: DataEntryFlowStepCreateEntry;
@property({ type: Boolean, attribute: "increase-padding-end" })
public increasePaddingEnd = false;
public navigateToResult = false; public navigateToResult = false;
@state() private _deviceUpdate: Record< @state() private _deviceUpdate: Record<
@ -113,7 +116,7 @@ class StepFlowCreateEntry extends LitElement {
this.step.result?.entry_id this.step.result?.entry_id
); );
return html` return html`
<h2> <h2 class=${this.increasePaddingEnd ? "end-space" : ""}>
${devices.length ${devices.length
? localize("ui.panel.config.integrations.config_flow.assign_area", { ? localize("ui.panel.config.integrations.config_flow.assign_area", {
number: devices.length, number: devices.length,

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

@ -15,11 +15,16 @@ 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>${this.flowConfig.renderExternalStepHeader(this.hass, this.step)}</h2> <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">
@ -51,6 +56,9 @@ class StepFlowExternal extends LitElement {
.open-button a { .open-button a {
text-decoration: none; text-decoration: none;
} }
h2.end-space {
padding-inline-end: 72px;
}
`, `,
]; ];
} }

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

@ -27,6 +27,9 @@ 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>;
@ -43,7 +46,9 @@ class StepFlowForm extends LitElement {
const stepData = this._stepDataProcessed; const stepData = this._stepDataProcessed;
return html` return html`
<h2>${this.flowConfig.renderShowFormStepHeader(this.hass, this.step)}</h2> <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

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

@ -17,6 +17,9 @@ 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>;
@ -42,7 +45,9 @@ class StepFlowMenu extends LitElement {
); );
return html` return html`
<h2>${this.flowConfig.renderMenuHeader(this.hass, this.step)}</h2> <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(

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

@ -24,9 +24,12 @@ 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> <h2 class=${this.increasePaddingEnd ? "end-space" : ""}>
${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)} ${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)}
</h2> </h2>
<div class="content"> <div class="content">

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

@ -22,6 +22,9 @@ 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 {