mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Make energy period selector less wide for mobile (#9814)
This commit is contained in:
parent
456209dded
commit
3a112531cc
@ -53,6 +53,11 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
|||||||
|
|
||||||
@state() private _period?: "day" | "week" | "month" | "year";
|
@state() private _period?: "day" | "week" | "month" | "year";
|
||||||
|
|
||||||
|
public connectedCallback() {
|
||||||
|
super.connectedCallback();
|
||||||
|
this.toggleAttribute("narrow", this.offsetWidth < 600);
|
||||||
|
}
|
||||||
|
|
||||||
public hassSubscribe(): UnsubscribeFunc[] {
|
public hassSubscribe(): UnsubscribeFunc[] {
|
||||||
return [
|
return [
|
||||||
getEnergyDataCollection(this.hass, {
|
getEnergyDataCollection(this.hass, {
|
||||||
@ -82,24 +87,24 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
|||||||
this._endDate || new Date(),
|
this._endDate || new Date(),
|
||||||
this.hass.locale
|
this.hass.locale
|
||||||
)}`}
|
)}`}
|
||||||
|
<mwc-icon-button label="Previous" @click=${this._pickPrevious}>
|
||||||
|
<ha-svg-icon .path=${mdiChevronLeft}></ha-svg-icon>
|
||||||
|
</mwc-icon-button>
|
||||||
|
<mwc-icon-button label="Next" @click=${this._pickNext}>
|
||||||
|
<ha-svg-icon .path=${mdiChevronRight}></ha-svg-icon>
|
||||||
|
</mwc-icon-button>
|
||||||
|
<mwc-button dense outlined @click=${this._pickToday}>
|
||||||
|
Today
|
||||||
|
</mwc-button>
|
||||||
|
</div>
|
||||||
|
<div class="period">
|
||||||
|
<ha-button-toggle-group
|
||||||
|
.buttons=${viewButtons}
|
||||||
|
.active=${this._period}
|
||||||
|
dense
|
||||||
|
@value-changed=${this._handleView}
|
||||||
|
></ha-button-toggle-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<mwc-icon-button label="Previous" @click=${this._pickPrevious}>
|
|
||||||
<ha-svg-icon .path=${mdiChevronLeft}></ha-svg-icon>
|
|
||||||
</mwc-icon-button>
|
|
||||||
<mwc-icon-button label="Next" @click=${this._pickNext}>
|
|
||||||
<ha-svg-icon .path=${mdiChevronRight}></ha-svg-icon>
|
|
||||||
</mwc-icon-button>
|
|
||||||
|
|
||||||
<mwc-button dense outlined @click=${this._pickToday}>
|
|
||||||
Today
|
|
||||||
</mwc-button>
|
|
||||||
<ha-button-toggle-group
|
|
||||||
.buttons=${viewButtons}
|
|
||||||
.active=${this._period}
|
|
||||||
dense
|
|
||||||
@value-changed=${this._handleView}
|
|
||||||
></ha-button-toggle-group>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -200,14 +205,24 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
|||||||
return css`
|
return css`
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
:host([narrow]) .row {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
:host([narrow]) .period {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
.label {
|
.label {
|
||||||
padding: 0 8px;
|
display: flex;
|
||||||
text-align: center;
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
.period {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
:host {
|
:host {
|
||||||
--mdc-button-outline-color: currentColor;
|
--mdc-button-outline-color: currentColor;
|
||||||
--primary-color: currentColor;
|
--primary-color: currentColor;
|
||||||
@ -219,7 +234,6 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
|||||||
mwc-icon-button {
|
mwc-icon-button {
|
||||||
--mdc-icon-button-size: 28px;
|
--mdc-icon-button-size: 28px;
|
||||||
}
|
}
|
||||||
mwc-button,
|
|
||||||
ha-button-toggle-group {
|
ha-button-toggle-group {
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user