Energy panel/cards - RTL fixes (#13171)

This commit is contained in:
Yosi Levy 2022-07-11 16:47:22 +03:00 committed by GitHub
parent 29c3fb0f92
commit 55e9ebc4d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 34 additions and 15 deletions

View File

@ -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;

View File

@ -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;

View File

@ -699,6 +699,7 @@ class HuiEnergyDistrubutionCard
}
.card-content {
position: relative;
direction: ltr;
}
.lines {
position: absolute;

View File

@ -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;
}
`;
}
}

View File

@ -356,6 +356,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
height: 50%;
top: 45%;
left: 50%;
direction: ltr;
}
#set-values {

View File

@ -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;

View File

@ -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;
}
`;
}
}

View File

@ -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;
}
`;
}
}