jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use expandable instead of advanced mode toggle (#25052)

Browse Source
This commit is contained in:
Bram Kragten 2025-04-14 14:35:30 +02:00 committed by GitHub
parent cd91e8c07c
commit 2f086f4d00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 163 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/panels/config/helpers/dialog-helper-detail.ts
View File

@ -403,7 +403,7 @@ export class DialogHelperDetail extends LitElement {
ha-dialog { ha-dialog {
--dialog-content-padding: 0; --dialog-content-padding: 0;
--dialog-scroll-divider-color: transparent; --dialog-scroll-divider-color: transparent;
--mdc-dialog-max-height: 60vh; --mdc-dialog-max-height: 90vh;
} }
@media all and (min-width: 550px) { @media all and (min-width: 550px) {
ha-dialog { ha-dialog {

2
src/panels/config/helpers/forms/dialog-schedule-block-info.ts
View File

@ -139,7 +139,7 @@ class DialogScheduleBlockInfo extends LitElement {
return this.hass!.localize("ui.dialogs.helper_settings.schedule.data"); return this.hass!.localize("ui.dialogs.helper_settings.schedule.data");
case "advanced_settings": case "advanced_settings":
return this.hass!.localize( return this.hass!.localize(
"ui.dialogs.helper_settings.schedule.advanced_settings" "ui.dialogs.helper_settings.generic.advanced_settings"
); );
} }
return ""; return "";

56
src/panels/config/helpers/forms/ha-counter-form.ts
View File

@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch"; import "../../../../components/ha-switch";
import type { HaSwitch } from "../../../../components/ha-switch"; import type { HaSwitch } from "../../../../components/ha-switch";
@ -118,32 +119,35 @@ class HaCounterForm extends LitElement {
"ui.dialogs.helper_settings.counter.initial" "ui.dialogs.helper_settings.counter.initial"
)} )}
></ha-textfield> ></ha-textfield>
${this.hass.userData?.showAdvanced <ha-expansion-panel
? html` header=${this.hass.localize(
<ha-textfield "ui.dialogs.helper_settings.generic.advanced_settings"
.value=${this._step} )}
.configValue=${"step"} outlined
type="number" >
@input=${this._valueChanged} <ha-textfield
.label=${this.hass!.localize( .value=${this._step}
"ui.dialogs.helper_settings.counter.step" .configValue=${"step"}
)} type="number"
></ha-textfield> @input=${this._valueChanged}
<div class="row"> .label=${this.hass!.localize(
<ha-switch "ui.dialogs.helper_settings.counter.step"
.checked=${this._restore} )}
.configValue=${"restore"} ></ha-textfield>
@change=${this._valueChanged} <div class="row">
> <ha-switch
</ha-switch> .checked=${this._restore}
<div> .configValue=${"restore"}
${this.hass.localize( @change=${this._valueChanged}
"ui.dialogs.helper_settings.counter.restore" >
)} </ha-switch>
</div> <div>
</div> ${this.hass.localize(
` "ui.dialogs.helper_settings.counter.restore"
: ""} )}
</div>
</div>
</ha-expansion-panel>
</div> </div>
`; `;
} }

106
src/panels/config/helpers/forms/ha-input_number-form.ts
View File

@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-formfield"; import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-radio"; import "../../../../components/ha-radio";
@ -118,58 +119,61 @@ class HaInputNumberForm extends LitElement {
"ui.dialogs.helper_settings.input_number.max" "ui.dialogs.helper_settings.input_number.max"
)} )}
></ha-textfield> ></ha-textfield>
${this.hass.userData?.showAdvanced <ha-expansion-panel
? html` header=${this.hass.localize(
<div class="layout horizontal center justified"> "ui.dialogs.helper_settings.generic.advanced_settings"
${this.hass.localize( )}
"ui.dialogs.helper_settings.input_number.mode" outlined
)} >
<ha-formfield <div class="layout horizontal center justified">
.label=${this.hass.localize( ${this.hass.localize(
"ui.dialogs.helper_settings.input_number.slider" "ui.dialogs.helper_settings.input_number.mode"
)} )}
> <ha-formfield
<ha-radio .label=${this.hass.localize(
name="mode" "ui.dialogs.helper_settings.input_number.slider"
value="slider" )}
.checked=${this._mode === "slider"} >
@change=${this._modeChanged} <ha-radio
></ha-radio> name="mode"
</ha-formfield> value="slider"
<ha-formfield .checked=${this._mode === "slider"}
.label=${this.hass.localize( @change=${this._modeChanged}
"ui.dialogs.helper_settings.input_number.box" ></ha-radio>
)} </ha-formfield>
> <ha-formfield
<ha-radio .label=${this.hass.localize(
name="mode" "ui.dialogs.helper_settings.input_number.box"
value="box" )}
.checked=${this._mode === "box"} >
@change=${this._modeChanged} <ha-radio
></ha-radio> name="mode"
</ha-formfield> value="box"
</div> .checked=${this._mode === "box"}
<ha-textfield @change=${this._modeChanged}
.value=${this._step} ></ha-radio>
.configValue=${"step"} </ha-formfield>
type="number" </div>
step="any" <ha-textfield
@input=${this._valueChanged} .value=${this._step}
.label=${this.hass!.localize( .configValue=${"step"}
"ui.dialogs.helper_settings.input_number.step" type="number"
)} step="any"
></ha-textfield> @input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.step"
)}
></ha-textfield>
<ha-textfield <ha-textfield
.value=${this._unit_of_measurement || ""} .value=${this._unit_of_measurement || ""}
.configValue=${"unit_of_measurement"} .configValue=${"unit_of_measurement"}
@input=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.unit_of_measurement" "ui.dialogs.helper_settings.input_number.unit_of_measurement"
)} )}
></ha-textfield> ></ha-textfield>
` </ha-expansion-panel>
: ""}
</div> </div>
`; `;
} }

140
src/panels/config/helpers/forms/ha-input_text-form.ts
View File

@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-form/ha-form"; import "../../../../components/ha-form/ha-form";
import "../../../../components/ha-formfield"; import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker"; import "../../../../components/ha-icon-picker";
@ -88,72 +89,73 @@ class HaInputTextForm extends LitElement {
"ui.dialogs.helper_settings.generic.icon" "ui.dialogs.helper_settings.generic.icon"
)} )}
></ha-icon-picker> ></ha-icon-picker>
${this.hass.userData?.showAdvanced <ha-expansion-panel
? html` header=${this.hass.localize(
<ha-textfield "ui.dialogs.helper_settings.generic.advanced_settings"
.value=${this._min} )}
.configValue=${"min"} outlined
type="number" >
min="0" <ha-textfield
max="255" .value=${this._min}
@input=${this._valueChanged} .configValue=${"min"}
.label=${this.hass!.localize( type="number"
"ui.dialogs.helper_settings.input_text.min" min="0"
)} max="255"
></ha-textfield> @input=${this._valueChanged}
<ha-textfield .label=${this.hass!.localize(
.value=${this._max} "ui.dialogs.helper_settings.input_text.min"
.configValue=${"max"} )}
min="0" ></ha-textfield>
max="255" <ha-textfield
type="number" .value=${this._max}
@input=${this._valueChanged} .configValue=${"max"}
.label=${this.hass!.localize( min="0"
"ui.dialogs.helper_settings.input_text.max" max="255"
)} type="number"
></ha-textfield> @input=${this._valueChanged}
<div class="layout horizontal center justified"> .label=${this.hass!.localize(
${this.hass.localize( "ui.dialogs.helper_settings.input_text.max"
"ui.dialogs.helper_settings.input_text.mode" )}
)} ></ha-textfield>
<ha-formfield <div class="layout horizontal center justified">
.label=${this.hass.localize( ${this.hass.localize("ui.dialogs.helper_settings.input_text.mode")}
"ui.dialogs.helper_settings.input_text.text" <ha-formfield
)} .label=${this.hass.localize(
> "ui.dialogs.helper_settings.input_text.text"
<ha-radio )}
name="mode" >
value="text" <ha-radio
.checked=${this._mode === "text"} name="mode"
@change=${this._modeChanged} value="text"
></ha-radio> .checked=${this._mode === "text"}
</ha-formfield> @change=${this._modeChanged}
<ha-formfield ></ha-radio>
.label=${this.hass.localize( </ha-formfield>
"ui.dialogs.helper_settings.input_text.password" <ha-formfield
)} .label=${this.hass.localize(
> "ui.dialogs.helper_settings.input_text.password"
<ha-radio )}
name="mode" >
value="password" <ha-radio
.checked=${this._mode === "password"} name="mode"
@change=${this._modeChanged} value="password"
></ha-radio> .checked=${this._mode === "password"}
</ha-formfield> @change=${this._modeChanged}
</div> ></ha-radio>
<ha-textfield </ha-formfield>
.value=${this._pattern || ""} </div>
.configValue=${"pattern"} <ha-textfield
@input=${this._valueChanged} .value=${this._pattern || ""}
.label=${this.hass!.localize( .configValue=${"pattern"}
"ui.dialogs.helper_settings.input_text.pattern_label" @input=${this._valueChanged}
)} .label=${this.hass!.localize(
.helper=${this.hass!.localize( "ui.dialogs.helper_settings.input_text.pattern_label"
"ui.dialogs.helper_settings.input_text.pattern_helper" )}
)} .helper=${this.hass!.localize(
></ha-textfield> "ui.dialogs.helper_settings.input_text.pattern_helper"
` )}
: ""} ></ha-textfield>
</ha-expansion-panel>
</div> </div>
`; `;
} }
@ -195,10 +197,14 @@ class HaInputTextForm extends LitElement {
.row { .row {
padding: 16px 0; padding: 16px 0;
} }
ha-textfield { ha-textfield,
ha-icon-picker {
display: block; display: block;
margin: 8px 0; margin: 8px 0;
} }
ha-expansion-panel {
margin-top: 16px;
}
`, `,
]; ];
} }

6
src/translations/en.json
View File

@ -1601,7 +1601,8 @@
"required_error_msg": "This field is required", "required_error_msg": "This field is required",
"generic": { "generic": {
"name": "Name", "name": "Name",
"icon": "Icon" "icon": "Icon",
"advanced_settings": "Advanced settings"
}, },
"input_datetime": { "input_datetime": {
"date": "Date", "date": "Date",
@ -1655,8 +1656,7 @@
"edit_schedule_block": "Edit schedule block", "edit_schedule_block": "Edit schedule block",
"start": "Start", "start": "Start",
"end": "End", "end": "End",
"data": "Additional data", "data": "Additional data"
"advanced_settings": "Advanced settings"
}, },
"template": { "template": {
"time": "[%key:ui::panel::developer-tools::tabs::templates::time%]", "time": "[%key:ui::panel::developer-tools::tabs::templates::time%]",