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

Use icon button for compare on narrow (#12831)

Browse Source
This commit is contained in:
Bram Kragten 2022-05-31 15:29:32 +02:00 committed by GitHub
parent a564ceb9e3
commit 881f6b0531
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
View File

@ -851,7 +851,9 @@ export class HuiEnergySourcesTableCard
)}
</th>
${compare
? html`<td class="mdc-data-table__cell">
? html`<td
class="mdc-data-table__cell mdc-data-table__cell--numeric"
>
${formatNumber(
totalGasCostCompare + totalGridCostCompare,
this.hass.locale,
@ -862,9 +864,7 @@ export class HuiEnergySourcesTableCard
)}
</td>
${showCosts
? html`<td
class="mdc-data-table__cell mdc-data-table__cell--numeric"
></td>`
? html`<td class="mdc-data-table__cell"></td>`
: ""}`
: ""}
<td class="mdc-data-table__cell"></td>

48
src/panels/lovelace/components/hui-energy-period-selector.ts
View File

@ -1,5 +1,10 @@
import "@material/mwc-button/mwc-button";
import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
import {
mdiChevronLeft,
mdiChevronRight,
mdiCompare,
mdiCompareRemove,
} from "@mdi/js";
import {
addDays,
addMonths,
@ -40,13 +45,15 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
@property() public collectionKey?: string;
@property({ type: Boolean, reflect: true }) public narrow = false;
@state() _startDate?: Date;
@state() _endDate?: Date;
@state() private _period?: "day" | "week" | "month" | "year";
@state() private _compare? = false;
@state() private _compare = false;
public connectedCallback() {
super.connectedCallback();
@ -136,14 +143,24 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
dense
@value-changed=${this._handleView}
></ha-button-toggle-group>
<mwc-button
${this.narrow
? html`<ha-icon-button
class="compare ${this._compare ? "active" : ""}"
.path=${this._compare ? mdiCompareRemove : mdiCompare}
@click=${this._toggleCompare}
dense
outlined
>
Compare data
</ha-icon-button>`
: html`<mwc-button
class="compare ${this._compare ? "active" : ""}"
@click=${this._toggleCompare}
dense
outlined
>
Compare data
</mwc-button>
</mwc-button>`}
</div>
</div>
`;
@ -260,9 +277,6 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
:host([narrow]) .row {
flex-direction: column-reverse;
}
:host([narrow]) .period {
margin-bottom: 8px;
}
.label {
display: flex;
justify-content: flex-end;
@ -275,6 +289,17 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
justify-content: flex-end;
align-items: flex-end;
}
:host([narrow]) .period {
margin-bottom: 8px;
}
mwc-button {
margin-left: 8px;
}
ha-icon-button {
margin-left: 4px;
--mdc-icon-size: 20px;
}
ha-icon-button.active::before,
mwc-button.active::before {
top: 0;
left: 0;
@ -288,14 +313,11 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
transition: opacity 15ms linear, background-color 15ms linear;
opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
}
ha-icon-button.active::before {
border-radius: 50%;
}
.compare {
position: relative;
margin-left: 8px;
width: max-content;
}
:host([narrow]) .compare {
margin-left: auto;
margin-top: 8px;
}
:host {
--mdc-button-outline-color: currentColor;