jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-26 14:27:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

More granular control for row interaction catching and cursor (#10971)

Browse Source
This commit is contained in:
Philip Allgaier 2021-12-20 10:27:43 +01:00 committed by GitHub
parent 2f9c088091
commit 25ff5fef14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/common/const.ts
View File

@ -199,11 +199,12 @@ export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
"select", "select",
]; ];
/** Domains that render an input element instead of a text value when rendered in a row. /** Domains that render an input element instead of a text value when displayed in a row.
* Those rows should then not show a cursor pointer when hovered (which would normally * Those rows should then not show a cursor pointer when hovered (which would normally
* be the default) unless the element itself enforces it (e.g. a button). Also those elements * be the default) unless the element itself enforces it (e.g. a button). Also those elements
* should not act as a click target to open the more info dialog (the row name and state icon * should not act as a click target to open the more info dialog (the row name and state icon
* still do of course) as the click might instead e.g. activate the input field that this row shows. * still do of course) as the click should instead e.g. activate the input field or toggle
* the button that this row shows.
*/ */
export const DOMAINS_INPUT_ROW = [ export const DOMAINS_INPUT_ROW = [
"automation", "automation",
@ -225,6 +226,7 @@ export const DOMAINS_INPUT_ROW = [
"script", "script",
"select", "select",
"switch", "switch",
"vacuum",
]; ];
/** Domains that should have the history hidden in the more info dialog. */ /** Domains that should have the history hidden in the more info dialog. */

9
src/panels/lovelace/components/hui-generic-entity-row.ts
View File

@ -33,6 +33,13 @@ class HuiGenericEntityRow extends LitElement {
@property({ type: Boolean }) public hideName = false; @property({ type: Boolean }) public hideName = false;
// Allows to control if this row should capture the user interaction, e.g. with its
// toggle switch, button or input field. Some domains dynamically decide what to show
// => static determination will not work => the caller has to pass the desired value in.
// Same applies for custom components that want to override the default behavior.
// Default behavior is controlled by DOMAINS_INPUT_ROW.
@property({ type: Boolean }) public catchInteraction?;
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.hass || !this.config) { if (!this.hass || !this.config) {
return html``; return html``;
@ -147,7 +154,7 @@ class HuiGenericEntityRow extends LitElement {
: ""} : ""}
</div>` </div>`
: html``} : html``}
${!DOMAINS_INPUT_ROW.includes(domain) ${this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain)
? html` <div ? html` <div
class="text-content ${classMap({ class="text-content ${classMap({
pointer, pointer,

15
src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
View File

@ -41,11 +41,18 @@ class HuiToggleEntityRow extends LitElement implements LovelaceRow {
`; `;
} }
const showToggle =
stateObj.state === "on" ||
stateObj.state === "off" ||
UNAVAILABLE_STATES.includes(stateObj.state);
return html` return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}> <hui-generic-entity-row
${stateObj.state === "on" || .hass=${this.hass}
stateObj.state === "off" || .config=${this._config}
UNAVAILABLE_STATES.includes(stateObj.state) .catchInteraction=${!showToggle}
>
${showToggle
? html` ? html`
<ha-entity-toggle <ha-entity-toggle
.hass=${this.hass} .hass=${this.hass}