mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Increase target area in tile card and area card (#26017)
This commit is contained in:
parent
96bbfe8a93
commit
e0b32ea789
@ -26,7 +26,6 @@ export class HaControlButtonGroup extends LitElement {
|
|||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: var(--control-button-group-alignment, start);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -25,9 +25,6 @@ export const cardFeatureStyles = css`
|
|||||||
flex-basis: 20px;
|
flex-basis: 20px;
|
||||||
--control-button-padding: 0px;
|
--control-button-padding: 0px;
|
||||||
}
|
}
|
||||||
ha-control-button-group[no-stretch] > ha-control-button {
|
|
||||||
max-width: 48px;
|
|
||||||
}
|
|
||||||
ha-control-button {
|
ha-control-button {
|
||||||
--control-button-focus-color: var(--feature-color);
|
--control-button-focus-color: var(--feature-color);
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import type { HassEntity } from "home-assistant-js-websocket";
|
import type { HassEntity } from "home-assistant-js-websocket";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
|
import { classMap } from "lit/directives/class-map";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { styleMap } from "lit/directives/style-map";
|
import { styleMap } from "lit/directives/style-map";
|
||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
@ -229,7 +230,11 @@ class HuiAreaControlsCardFeature
|
|||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<ha-control-button-group ?no-stretch=${this.position === "inline"}>
|
<ha-control-button-group
|
||||||
|
class=${classMap({
|
||||||
|
"no-stretch": this.position === "inline",
|
||||||
|
})}
|
||||||
|
>
|
||||||
${displayControls.map((control) => {
|
${displayControls.map((control) => {
|
||||||
const button = AREA_CONTROLS_BUTTONS[control];
|
const button = AREA_CONTROLS_BUTTONS[control];
|
||||||
|
|
||||||
@ -292,8 +297,22 @@ class HuiAreaControlsCardFeature
|
|||||||
return [
|
return [
|
||||||
cardFeatureStyles,
|
cardFeatureStyles,
|
||||||
css`
|
css`
|
||||||
|
:host {
|
||||||
|
pointer-events: none !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
ha-control-button-group {
|
ha-control-button-group {
|
||||||
--control-button-group-alignment: flex-end;
|
pointer-events: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
ha-control-button-group.no-stretch {
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
ha-control-button-group.no-stretch > ha-control-button {
|
||||||
|
width: 48px;
|
||||||
}
|
}
|
||||||
ha-control-button {
|
ha-control-button {
|
||||||
--active-color: var(--state-active-color);
|
--active-color: var(--state-active-color);
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { LitElement, html, nothing } from "lit";
|
import { LitElement, css, html, nothing } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import type { HomeAssistant } from "../../../types";
|
import type { HomeAssistant } from "../../../types";
|
||||||
import type { HuiErrorCard } from "../cards/hui-error-card";
|
import type { HuiErrorCard } from "../cards/hui-error-card";
|
||||||
@ -56,6 +56,12 @@ export class HuiCardFeature extends LitElement {
|
|||||||
}
|
}
|
||||||
return html`${element}`;
|
return html`${element}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
:host > * {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
@ -46,6 +46,7 @@ export class HuiCardFeatures extends LitElement {
|
|||||||
--feature-height: 42px;
|
--feature-height: 42px;
|
||||||
--feature-border-radius: 12px;
|
--feature-border-radius: 12px;
|
||||||
--feature-button-spacing: 12px;
|
--feature-button-spacing: 12px;
|
||||||
|
pointer-events: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user