mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Energy panel/cards - RTL fixes (#13171)
This commit is contained in:
parent
29c3fb0f92
commit
55e9ebc4d2
@ -376,6 +376,7 @@ export default class HaChartBase extends LitElement {
|
||||
.chartTooltip .title {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
direction: ltr;
|
||||
}
|
||||
.chartTooltip .footer {
|
||||
font-weight: 500;
|
||||
|
@ -8,6 +8,9 @@ export const energyCardStyles = css`
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
margin-inline-start: initial;
|
||||
direction: var(--direction);
|
||||
}
|
||||
h3 {
|
||||
margin-top: 24px;
|
||||
@ -24,6 +27,9 @@ export const energyCardStyles = css`
|
||||
.row ha-icon,
|
||||
.row img {
|
||||
margin-right: 16px;
|
||||
margin-inline-end: 16px;
|
||||
margin-inline-start: initial;
|
||||
direction: var(--direction);
|
||||
}
|
||||
.row img {
|
||||
height: 24px;
|
||||
|
@ -699,6 +699,7 @@ class HuiEnergyDistrubutionCard
|
||||
}
|
||||
.card-content {
|
||||
position: relative;
|
||||
direction: ltr;
|
||||
}
|
||||
.lines {
|
||||
position: absolute;
|
||||
|
@ -900,6 +900,7 @@ export class HuiEnergySourcesTableCard
|
||||
.mdc-data-table__cell {
|
||||
color: var(--primary-text-color);
|
||||
border-bottom-color: var(--divider-color);
|
||||
text-align: var(--float-start);
|
||||
}
|
||||
.mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
|
||||
background-color: rgba(var(--rgb-primary-text-color), 0.04);
|
||||
@ -925,6 +926,9 @@ export class HuiEnergySourcesTableCard
|
||||
.cell-bullet {
|
||||
width: 32px;
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
padding-inline-start: 16px;
|
||||
direction: var(--direction);
|
||||
}
|
||||
.bullet {
|
||||
border-width: 1px;
|
||||
@ -933,6 +937,9 @@ export class HuiEnergySourcesTableCard
|
||||
height: 16px;
|
||||
width: 32px;
|
||||
}
|
||||
.mdc-data-table__cell--numeric {
|
||||
direction: ltr;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@ -356,6 +356,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
|
||||
height: 50%;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#set-values {
|
||||
|
@ -1,10 +1,5 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import {
|
||||
mdiChevronLeft,
|
||||
mdiChevronRight,
|
||||
mdiCompare,
|
||||
mdiCompareRemove,
|
||||
} from "@mdi/js";
|
||||
import { mdiCompare, mdiCompareRemove } from "@mdi/js";
|
||||
import {
|
||||
addDays,
|
||||
addMonths,
|
||||
@ -35,9 +30,12 @@ import {
|
||||
import { toggleAttribute } from "../../../common/dom/toggle_attribute";
|
||||
import "../../../components/ha-button-toggle-group";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-icon-button-prev";
|
||||
import "../../../components/ha-icon-button-next";
|
||||
import { EnergyData, getEnergyDataCollection } from "../../../data/energy";
|
||||
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||
import { HomeAssistant, ToggleButton } from "../../../types";
|
||||
import { computeRTLDirection } from "../../../common/util/compute_rtl";
|
||||
|
||||
@customElement("hui-energy-period-selector")
|
||||
export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
||||
@ -116,20 +114,18 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
||||
this._endDate || new Date(),
|
||||
this.hass.locale
|
||||
)}`}
|
||||
<ha-icon-button
|
||||
<ha-icon-button-prev
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.components.energy_period_selector.previous"
|
||||
)}
|
||||
@click=${this._pickPrevious}
|
||||
.path=${mdiChevronLeft}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
></ha-icon-button-prev>
|
||||
<ha-icon-button-next
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.components.energy_period_selector.next"
|
||||
)}
|
||||
@click=${this._pickNext}
|
||||
.path=${mdiChevronRight}
|
||||
></ha-icon-button>
|
||||
></ha-icon-button-next>
|
||||
<mwc-button dense outlined @click=${this._pickToday}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.lovelace.components.energy_period_selector.today"
|
||||
@ -142,6 +138,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
||||
.active=${this._period}
|
||||
dense
|
||||
@value-changed=${this._handleView}
|
||||
.dir=${computeRTLDirection(this.hass)}
|
||||
></ha-button-toggle-group>
|
||||
${this.narrow
|
||||
? html`<ha-icon-button
|
||||
@ -291,7 +288,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
:host([narrow]) .period {
|
||||
margin-bottom: 8px;
|
||||
|
@ -156,7 +156,7 @@ class HuiGenericEntityRow extends LitElement {
|
||||
: html``}
|
||||
${this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain)
|
||||
? html`<div
|
||||
class="text-content ${classMap({
|
||||
class="text-content value ${classMap({
|
||||
pointer,
|
||||
})}"
|
||||
@action=${this._handleAction}
|
||||
@ -236,6 +236,9 @@ class HuiGenericEntityRow extends LitElement {
|
||||
.state.rtl {
|
||||
text-align: left;
|
||||
}
|
||||
.value {
|
||||
direction: ltr;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@ -62,7 +62,7 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow {
|
||||
return html`
|
||||
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
|
||||
<div
|
||||
class="text-content"
|
||||
class="text-content value"
|
||||
@action=${this._handleAction}
|
||||
.actionHandler=${actionHandler({
|
||||
hasHold: hasAction(this._config.hold_action),
|
||||
@ -99,6 +99,9 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow {
|
||||
div {
|
||||
text-align: right;
|
||||
}
|
||||
.value {
|
||||
direction: ltr;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user