Skip to content

Commit

Permalink
Add grid support to light card
Browse files Browse the repository at this point in the history
  • Loading branch information
@piitaya
piitaya committed Mar 5, 2024
1 parent 6741fdb commit 6343fab
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 60 deletions.
51 changes: 26 additions & 25 deletions src/cards/climate-card/climate-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,15 +89,35 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
return controls;
}

public getCardSize(): number | Promise<number> {
return 1;
}

public getGridSize(): [number, number] {
this._inGrid = true;
let column = 2;
let row = 1;
if (!this._config) return [column, row];

const appearance = computeAppearance(this._config);
if (appearance.layout === "vertical") {
row += 1;
}
if (this._controls.length) {
if (appearance.layout === "horizontal") {
column = 4;
} else if (!this._config?.collapsible_controls) {
row += 1;
}
}
return [column, row];
}

_onControlTap(ctrl, e): void {
e.stopPropagation();
this._activeControl = ctrl;
}

getCardSize(): number | Promise<number> {
return 1;
}

setConfig(config: ClimateCardConfig): void {
this._config = {
tap_action: {
Expand Down Expand Up @@ -192,7 +212,8 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
${isControlVisible
? html`
<div class="actions" ?rtl=${rtl}>
${this.renderActiveControl(stateObj)}${this.renderOtherControls()}
${this.renderActiveControl(stateObj)}
${this.renderOtherControls()}
</div>
`
: nothing}
Expand Down Expand Up @@ -290,26 +311,6 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
}
}

public getGridSize(): [number, number] {
this._inGrid = true;
let column = 2;
let row = 1;
if (!this._config) return [column, row];

const appearance = computeAppearance(this._config);
if (appearance.layout === "vertical") {
row += 1;
}
if (this._controls.length) {
if (appearance.layout === "horizontal") {
column = 4;
} else if (!this._config?.collapsible_controls) {
row += 1;
}
}
return [column, row];
}

static get styles(): CSSResultGroup {
return [
super.styles,
Expand Down
97 changes: 62 additions & 35 deletions src/cards/light-card/light-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,17 +78,54 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {

@state() private _activeControl?: LightCardControl;

@state() private _controls: LightCardControl[] = [];
@state() private brightness?: number;

_onControlTap(ctrl, e): void {
e.stopPropagation();
this._activeControl = ctrl;
@state() private _inGrid = false;

private get _controls(): LightCardControl[] {
if (!this._config || !this.hass || !this._config.entity) return [];

const entityId = this._config.entity;
const stateObj = this.hass.states[entityId] as LightEntity | undefined;
if (!stateObj) return [];

const controls: LightCardControl[] = [];
if (this._config.show_brightness_control && supportsBrightnessControl(stateObj)) {
controls.push("brightness_control");
}
if (this._config.show_color_temp_control && supportsColorTempControl(stateObj)) {
controls.push("color_temp_control");
}
if (this._config.show_color_control && supportsColorControl(stateObj)) {
controls.push("color_control");
}
return controls;
}

getCardSize(): number | Promise<number> {
public getCardSize(): number | Promise<number> {
return 1;
}

public getGridSize(): [number, number] {
this._inGrid = true;
let column = 2;
let row = 1;
if (!this._config) return [column, row];

const appearance = computeAppearance(this._config);
if (appearance.layout === "vertical") {
row += 1;
}
if (this._controls.length) {
if (appearance.layout === "horizontal") {
column = 4;
} else if (!this._config?.collapsible_controls) {
row += 1;
}
}
return [column, row];
}

setConfig(config: LightCardConfig): void {
this._config = {
tap_action: {
Expand All @@ -99,21 +136,23 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
},
...config,
};
this.updateControls();
this.updateActiveControls();
this.updateBrightness();
}

_onControlTap(ctrl, e): void {
e.stopPropagation();
this._activeControl = ctrl;
}

protected updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
if (this.hass && changedProperties.has("hass")) {
this.updateControls();
this.updateActiveControls();
this.updateBrightness();
}
}

@state()
private brightness?: number;

updateBrightness() {
this.brightness = undefined;
if (!this._config || !this.hass || !this._config.entity) return;
Expand All @@ -131,31 +170,11 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
}
}

updateControls() {
if (!this._config || !this.hass || !this._config.entity) return;

const entityId = this._config.entity;
const stateObj = this.hass.states[entityId] as LightEntity | undefined;

if (!stateObj) return;

const controls: LightCardControl[] = [];
if (!this._config.collapsible_controls || isActive(stateObj)) {
if (this._config.show_brightness_control && supportsBrightnessControl(stateObj)) {
controls.push("brightness_control");
}
if (this._config.show_color_temp_control && supportsColorTempControl(stateObj)) {
controls.push("color_temp_control");
}
if (this._config.show_color_control && supportsColorControl(stateObj)) {
controls.push("color_control");
}
}
this._controls = controls;
updateActiveControls() {
const isActiveControlSupported = this._activeControl
? controls.includes(this._activeControl)
? this._controls.includes(this._activeControl)
: false;
this._activeControl = isActiveControlSupported ? this._activeControl : controls[0];
this._activeControl = isActiveControlSupported ? this._activeControl : this._controls[0];
}

private _handleAction(ev: ActionHandlerEvent) {
Expand Down Expand Up @@ -194,8 +213,16 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {

const rtl = computeRTL(this.hass);

const isControlVisible =
(!this._config.collapsible_controls || isActive(stateObj)) && this._controls.length;

return html`
<ha-card class=${classMap({ "fill-container": appearance.fill_container })}>
<ha-card
class=${classMap({
"fill-container": appearance.fill_container,
"in-grid": this._inGrid,
})}
>
<mushroom-card .appearance=${appearance} ?rtl=${rtl}>
<mushroom-state-item
?rtl=${rtl}
Expand All @@ -210,7 +237,7 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
${this.renderBadge(stateObj)}
${this.renderStateInfo(stateObj, appearance, name, stateDisplay)};
</mushroom-state-item>
${this._controls.length > 0
${isControlVisible
? html`
<div class="actions" ?rtl=${rtl}>
${this.renderActiveControl(stateObj)}
Expand Down

0 comments on commit 6343fab

Please sign in to comment.