RTL calendar fix - arrows fix and views fix (#12314)

* RTL calendar fix - arrows fix and views fix

* Removed path attributes
This commit is contained in:
Yosi Levy 2022-04-15 21:47:46 +03:00 committed by GitHub
parent 85d1f49763
commit bad5a389b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 6 deletions

View File

@ -117,6 +117,19 @@ export class HaButtonToggleGroup extends LitElement {
--mdc-shape-small: 4px; --mdc-shape-small: 4px;
border-right-width: 1px; border-right-width: 1px;
} }
:host([dir="rtl"]) ha-icon-button:first-child,
:host([dir="rtl"]) mwc-button:first-child {
border-radius: 0 4px 4px 0;
border-right-width: 1px;
--mdc-shape-small: 0 4px 4px 0;
--mdc-button-outline-width: 1px;
}
:host([dir="rtl"]) ha-icon-button:last-child,
:host([dir="rtl"]) mwc-button:last-child {
--mdc-shape-small: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
`; `;
} }
} }

View File

@ -34,7 +34,10 @@ import { useAmPm } from "../../common/datetime/use_am_pm";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-button-toggle-group"; import "../../components/ha-button-toggle-group";
import "../../components/ha-icon-button"; import "../../components/ha-icon-button";
import "../../components/ha-icon-button-prev";
import "../../components/ha-icon-button-next";
import { haStyle } from "../../resources/styles"; import { haStyle } from "../../resources/styles";
import { computeRTLDirection } from "../../common/util/compute_rtl";
import type { import type {
CalendarEvent, CalendarEvent,
CalendarViewChanged, CalendarViewChanged,
@ -124,26 +127,25 @@ export class HAFullCalendar extends LitElement {
"ui.components.calendar.today" "ui.components.calendar.today"
)}</mwc-button )}</mwc-button
> >
<ha-icon-button <ha-icon-button-prev
.label=${this.hass.localize("ui.common.previous")} .label=${this.hass.localize("ui.common.previous")}
.path=${mdiChevronLeft}
class="prev" class="prev"
@click=${this._handlePrev} @click=${this._handlePrev}
> >
</ha-icon-button> </ha-icon-button-prev>
<ha-icon-button <ha-icon-button-next
.label=${this.hass.localize("ui.common.next")} .label=${this.hass.localize("ui.common.next")}
.path=${mdiChevronRight}
class="next" class="next"
@click=${this._handleNext} @click=${this._handleNext}
> >
</ha-icon-button> </ha-icon-button-next>
</div> </div>
<h1>${this.calendar.view.title}</h1> <h1>${this.calendar.view.title}</h1>
<ha-button-toggle-group <ha-button-toggle-group
.buttons=${viewToggleButtons} .buttons=${viewToggleButtons}
.active=${this._activeView} .active=${this._activeView}
@value-changed=${this._handleView} @value-changed=${this._handleView}
.dir=${computeRTLDirection(this.hass)}
></ha-button-toggle-group> ></ha-button-toggle-group>
` `
: html` : html`
@ -179,6 +181,7 @@ export class HAFullCalendar extends LitElement {
.buttons=${viewToggleButtons} .buttons=${viewToggleButtons}
.active=${this._activeView} .active=${this._activeView}
@value-changed=${this._handleView} @value-changed=${this._handleView}
.dir=${computeRTLDirection(this.hass)}
></ha-button-toggle-group> ></ha-button-toggle-group>
</div> </div>
`} `}