jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Various RTL fixes (#19134)

Browse Source 
* Various RTL fixes

* Various RTL fixes
This commit is contained in:
Yosi Levy 2023-12-27 11:59:28 +02:00 committed by GitHub
parent 01a142790f
commit f5d13c9079
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ha-check-list-item.ts
View File

@ -30,6 +30,9 @@ export class HaCheckListItem extends CheckListItemBase {
}
.mdc-deprecated-list-item__meta {
flex-shrink: 0;
direction: var(--direction);
margin-inline-start: auto;
margin-inline-end: 0;
}
.mdc-deprecated-list-item__graphic {
margin-top: var(--check-list-item-graphic-margin-top);

13
src/components/ha-list-item.ts
View File

@ -36,12 +36,12 @@ export class HaListItem extends ListItemBase {
--mdc-list-item-graphic-margin,
16px
) !important;
direction: var(--direction);
direction: var(--direction) !important;
}
span.material-icons:last-of-type {
margin-inline-start: auto !important;
margin-inline-end: 0px !important;
direction: var(--direction);
direction: var(--direction) !important;
}
.mdc-deprecated-list-item__meta {
display: var(--mdc-list-item-meta-display);
@ -85,6 +85,15 @@ export class HaListItem extends ListItemBase {
pointer-events: unset;
}
`,
// safari workaround - must be explicit
document.dir === "rtl"
? css`
span.material-icons:first-of-type,
span.material-icons:last-of-type {
direction: rtl !important;
}
`
: css``,
];
}
}

7
src/components/ha-settings-row.ts
View File

@ -35,7 +35,12 @@ export class HaSettingsRow extends LitElement {
align-items: center;
}
.body {
padding: 8px 16px 8px 0;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 0;
padding-inline-start: 0;
padding-right: 16x;
padding-inline-end: 16px;
overflow: hidden;
display: var(--layout-vertical_-_display);
flex-direction: var(--layout-vertical_-_flex-direction);

4
src/components/ha-two-pane-top-app-bar-fixed.ts
View File

@ -280,6 +280,8 @@ export abstract class TopAppBarBaseBase extends BaseElement {
}
#title {
border-right: 1px solid rgba(255, 255, 255, 0.12);
border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
border-inline-start: initial;
box-sizing: border-box;
flex: 0 0 var(--sidepane-width, 250px);
width: var(--sidepane-width, 250px);
@ -290,6 +292,8 @@ export abstract class TopAppBarBaseBase extends BaseElement {
}
.pane {
border-right: 1px solid var(--divider-color);
border-inline-end: 1px solid var(--divider-color);
border-inline-start: initial;
box-sizing: border-box;
display: flex;
flex: 0 0 var(--sidepane-width, 250px);

11
src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
View File

@ -668,7 +668,12 @@ export class HaVoiceCommandDialog extends LitElement {
ha-button-menu {
--mdc-theme-on-primary: var(--text-primary-color);
--mdc-theme-primary: var(--primary-color);
margin: -8px 0 0 -8px;
margin-top: -8px;
margin-bottom: 0;
margin-right: 0;
margin-inline-end: 0;
margin-left: -8px;
margin-inline-start: -8px;
}
ha-button-menu ha-button {
--mdc-theme-primary: var(--secondary-text-color);
@ -689,7 +694,7 @@ export class HaVoiceCommandDialog extends LitElement {
height: 28px;
margin-left: 4px;
margin-inline-start: 4px;
margin-inline-end: 4px;
margin-inline-end: initial;
direction: var(--direction);
}
ha-list-item {
@ -698,7 +703,7 @@ export class HaVoiceCommandDialog extends LitElement {
ha-list-item ha-svg-icon {
margin-left: 4px;
margin-inline-start: 4px;
margin-inline-end: 4px;
margin-inline-end: initial;
direction: var(--direction);
display: block;
}

5
src/panels/lovelace/cards/hui-todo-list-card.ts
View File

@ -624,6 +624,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
.addRow ha-icon-button {
position: absolute;
right: 16px;
inset-inline-start: initial;
inset-inline-end: 16px;
}
.addRow,
@ -636,8 +638,11 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
.header {
padding-left: 30px;
padding-right: 16px;
padding-inline-start: 30px;
padding-inline-end: 16px;
margin-top: 8px;
justify-content: space-between;
direction: var(--direction);
}
.header span {

12
src/panels/lovelace/cards/hui-weather-forecast-card.ts
View File

@ -486,6 +486,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
align-items: center;
min-width: 64px;
margin-right: 16px;
margin-inline-end: 16px;
margin-inline-start: initial;
}
.icon-image > * {
@ -505,7 +507,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
}
.temp-attribute {
text-align: right;
text-align: var(--float-end);
}
.temp-attribute .temp {
@ -535,6 +537,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
.name-state {
overflow: hidden;
padding-right: 12px;
padding-inline-end: 12px;
padding-inline-start: initial;
width: 100%;
}
@ -634,6 +638,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
:host([narrow]) .temp-attribute .temp {
margin-right: 16px;
margin-inline-end: 16px;
margin-inline-start: initial;
}
:host([narrow]) .temp span {
@ -655,6 +661,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
:host([veryNarrow]) .name-state {
padding-right: 0;
padding-inline-end: 0;
padding-inline-start: initial;
}
/* ============= VERY VERY NARROW ============= */
@ -672,6 +680,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
:host([veryVeryNarrow]) .icon-image {
margin-right: 0;
margin-inline-end: 0;
margin-inline-start: initial;
}
`,
];