martin
/
homeassistant-config
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Room glance card: optional three rows when too many scenes

This commit is contained in:
Martin Bauer 2020-04-19 11:20:24 +02:00
parent 44835e0fa2
commit b6b6b3cec6
2 changed files with 164 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
custom_frontend_sources/room-glance-card/dist/room-glance-card.js vendored
View File

File diff suppressed because one or more lines are too long

118
custom_frontend_sources/room-glance-card/src/room-glance-card.ts
View File

@ -26,42 +26,60 @@ export class RoomGlanceCard extends LitElement {
protected render(): TemplateResult | void { protected render(): TemplateResult | void {
const ratio = {'w': 16, 'h': 9};
return html`
<ha-card>
<img style="width: 100%; display: block" src="${this._config.image}">
<div class="box box-upper"> if(this._config.scenes.length >= 5) {
<div>${this._config.name}</div> return html`
<div> <ha-card>
${this.renderCoverControl()} <img style="width: 100%; display: block" src="${this._config.image}">
</div>
</div>
<div class="box box-lower">
<div class="title"></div>
<div>
${this._config.scenes.map((sceneButtonCfg) => this.renderSceneButton(sceneButtonCfg))}
<paper-icon-button
icon="mdi:close-circle" <div class="box box-top">
@click=${this.serviceHandler("light", "turn_off")} <div>${this._config.name}</div>
></paper-icon-button> <div>
${this.renderCoverControl()}
<paper-icon-button </div>
icon="mdi:chevron-up" </div>
title="Heller"
@click=${this.serviceHandler("dimmer", "dim", {offset: 30})} <div class="box box-upper">
></paper-icon-button> <div class="title"></div>
<paper-icon-button <div> ${this.renderLightControl()} </div>
icon="mdi:chevron-down" </div>
title="Dunkler"
@click=${this.serviceHandler("dimmer", "dim", {offset: -30})} <div class="box box-lower">
></paper-icon-button> <div class="title"></div>
</div> <div>
</div> ${this._config.scenes.map((sceneButtonCfg) => this.renderSceneButton(sceneButtonCfg))}
</ha-card> </div>
`; </div>
</ha-card>
`;
}
else
{
return html`
<ha-card>
<img style="width: 100%; display: block" src="${this._config.image}">
<div class="box box-upper">
<div class="title"></div>
<div>${this._config.name}</div>
<div>
${this.renderCoverControl()}
</div>
</div>
<div class="box box-lower">
<div class="title"></div>
<div>
${this._config.scenes.map((sceneButtonCfg) => this.renderSceneButton(sceneButtonCfg))}
${this.renderLightControl()}
</div>
</div>
</ha-card>
`;
}
} }
private renderSceneButton(buttonCfg: any) { private renderSceneButton(buttonCfg: any) {
@ -75,9 +93,28 @@ export class RoomGlanceCard extends LitElement {
`; `;
} }
private renderCoverControl() { private renderLightControl() {
return html` return html`
<paper-icon-button <paper-icon-button
icon="mdi:close-circle"
@click=${this.serviceHandler("light", "turn_off")}
></paper-icon-button>
<paper-icon-button
icon="mdi:chevron-up"
title="Heller"
@click=${this.serviceHandler("dimmer", "dim", {offset: 30})}
></paper-icon-button>
<paper-icon-button
icon="mdi:chevron-down"
title="Dunkler"
@click=${this.serviceHandler("dimmer", "dim", {offset: -30})}
></paper-icon-button>`;
}
private renderCoverControl() {
return html`
<paper-icon-button
icon="hass:menu" icon="hass:menu"
@click=${this.serviceHandler("cover_half", "set_half")} @click=${this.serviceHandler("cover_half", "set_half")}
></paper-icon-button> ></paper-icon-button>
@ -162,11 +199,18 @@ export class RoomGlanceCard extends LitElement {
justify-content: space-between; justify-content: space-between;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.box-top {
bottom: 90px;
height:45px;
padding-top: 0px;
padding-bottom: 0;
}
.box-upper { .box-upper {
bottom: 45px; bottom: 45px;
padding-top: 4px; height:45px;
padding-top: 0px;
padding-bottom: 0; padding-bottom: 0;
} }
.box-lower { .box-lower {