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

Fix time input with helper text width (#23134)

Browse Source 
* Fix time input with helper text width

* Make time input help text always newline

* Put helper text out of base-time-input
This commit is contained in:
Wendelin 2024-12-04 14:25:31 +01:00 committed by GitHub
parent 64e8b636b9
commit a78ddb50fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ha-base-time-input.ts
View File

@ -134,7 +134,7 @@ export class HaBaseTimeInput extends LitElement {
return html` return html`
${this.label ${this.label
? html`<label>${this.label}${this.required ? " *" : ""}</label>` ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
: ""} : nothing}
<div class="time-input-wrap-wrap"> <div class="time-input-wrap-wrap">
<div class="time-input-wrap"> <div class="time-input-wrap">
${this.enableDay ${this.enableDay
@ -158,7 +158,7 @@ export class HaBaseTimeInput extends LitElement {
> >
</ha-textfield> </ha-textfield>
` `
: ""} : nothing}
<ha-textfield <ha-textfield
id="hour" id="hour"
@ -221,7 +221,7 @@ export class HaBaseTimeInput extends LitElement {
class=${this.enableMillisecond ? "has-suffix" : ""} class=${this.enableMillisecond ? "has-suffix" : ""}
> >
</ha-textfield>` </ha-textfield>`
: ""} : nothing}
${this.enableMillisecond ${this.enableMillisecond
? html`<ha-textfield ? html`<ha-textfield
id="millisec" id="millisec"
@ -240,7 +240,7 @@ export class HaBaseTimeInput extends LitElement {
.disabled=${this.disabled} .disabled=${this.disabled}
> >
</ha-textfield>` </ha-textfield>`
: ""} : nothing}
${this.clearable && !this.required && !this.disabled ${this.clearable && !this.required && !this.disabled
? html`<ha-icon-button ? html`<ha-icon-button
label="clear" label="clear"
@ -251,7 +251,7 @@ export class HaBaseTimeInput extends LitElement {
</div> </div>
${this.format === 24 ${this.format === 24
? "" ? nothing
: html`<ha-select : html`<ha-select
.required=${this.required} .required=${this.required}
.value=${this.amPm} .value=${this.amPm}
@ -265,10 +265,10 @@ export class HaBaseTimeInput extends LitElement {
<mwc-list-item value="AM">AM</mwc-list-item> <mwc-list-item value="AM">AM</mwc-list-item>
<mwc-list-item value="PM">PM</mwc-list-item> <mwc-list-item value="PM">PM</mwc-list-item>
</ha-select>`} </ha-select>`}
${this.helper
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
: ""}
</div> </div>
${this.helper
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
: nothing}
`; `;
} }
@ -363,17 +363,17 @@ export class HaBaseTimeInput extends LitElement {
width: 85px; width: 85px;
} }
:host([clearable]) .mdc-select__anchor { :host([clearable]) .mdc-select__anchor {
padding-inline-end: var(--select-selected-text-padding-end, 12px); padding-inline-end: var(--select-selected-text-padding-end, 12px);
} }
ha-icon-button { ha-icon-button {
position: relative position: relative;
--mdc-icon-button-size: 36px; --mdc-icon-button-size: 36px;
--mdc-icon-size: 20px; --mdc-icon-size: 20px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
direction: var(--direction); direction: var(--direction);
display: flex; display: flex;
align-items: center; align-items: center;
background-color:var(--mdc-text-field-fill-color, whitesmoke); background-color: var(--mdc-text-field-fill-color, whitesmoke);
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
@ -398,6 +398,10 @@ export class HaBaseTimeInput extends LitElement {
padding-inline-start: 4px; padding-inline-start: 4px;
padding-inline-end: initial; padding-inline-end: initial;
} }
ha-input-helper-text {
padding-top: 8px;
line-height: normal;
}
`; `;
} }