jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-26 06:17: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",
];
/** 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
* 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
* 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 = [
"automation",
@ -225,6 +226,7 @@ export const DOMAINS_INPUT_ROW = [
"script",
"select",
"switch",
"vacuum",
];
/** 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;
// 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 {
if (!this.hass || !this.config) {
return html``;
@ -147,7 +154,7 @@ class HuiGenericEntityRow extends LitElement {
: ""}
</div>`
: html``}
${!DOMAINS_INPUT_ROW.includes(domain)
${this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain)
? html` <div
class="text-content ${classMap({
pointer,

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

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