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

Fix RTL icon placement (#14019)

Browse Source 
* Fix RTL icon placement

* Fix combo box icons

* Removed duplicate after merge

* Refactor ha-button

* Refactor fix 2
This commit is contained in:
Yosi Levy 2023-02-01 10:45:03 +02:00 committed by GitHub
parent 596d371781
commit 5aeaa65a89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/entity/ha-entity-picker.ts
View File

@ -1,3 +1,4 @@
import "../ha-list-item";
import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
@ -9,7 +10,6 @@ import { computeStateName } from "../../common/entity/compute_state_name";
import { caseInsensitiveStringCompare } from "../../common/string/compare";
import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
import "../ha-list-item";
import "../ha-combo-box";
import type { HaComboBox } from "../ha-combo-box";
import "../ha-icon-button";

24
src/components/ha-button.ts Normal file
View File

@ -0,0 +1,24 @@
import { Button } from "@material/mwc-button";
import { css } from "lit";
import { customElement } from "lit/decorators";
import { styles } from "@material/mwc-button/styles.css";
@customElement("ha-button")
export class HaButton extends Button {
static override styles = [
styles,
css`
::slotted([slot="icon"]) {
margin-inline-start: 0px;
margin-inline-end: 8px;
direction: var(--direction);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-button": HaButton;
}
}

1
src/components/ha-combo-box.ts
View File

@ -16,7 +16,6 @@ import { fireEvent } from "../common/dom/fire_event";
import { HomeAssistant } from "../types";
import "./ha-list-item";
import "./ha-icon-button";
import "./ha-textfield";
import type { HaTextField } from "./ha-textfield";
registerStyles(

5
src/panels/config/automation/action/ha-automation-action.ts
View File

@ -11,6 +11,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { stringCompare } from "../../../../common/string/compare";
import { LocalizeFunc } from "../../../../common/translations/localize";
import "../../../../components/ha-button-menu";
import "../../../../components/ha-button";
import type { HaSelect } from "../../../../components/ha-select";
import "../../../../components/ha-svg-icon";
import { ACTION_TYPES } from "../../../../data/action";
@ -132,7 +133,7 @@ export default class HaAutomationAction extends LitElement {
@action=${this._addAction}
.disabled=${this.disabled}
>
<mwc-button
<ha-button
slot="trigger"
outlined
.disabled=${this.disabled}
@ -141,7 +142,7 @@ export default class HaAutomationAction extends LitElement {
)}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</mwc-button>
</ha-button>
${this._processedTypes(this.hass.localize).map(
([opt, label, icon]) => html`
<mwc-list-item .value=${opt} graphic="icon">

8
src/panels/config/automation/action/types/ha-automation-action-choose.ts
View File

@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { ensureArray } from "../../../../../common/array/ensure-array";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-button";
import { Condition } from "../../../../../data/automation";
import { Action, ChooseAction } from "../../../../../data/script";
import { haStyle } from "../../../../../resources/styles";
@ -80,7 +81,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
</div>
</ha-card>`
)}
<mwc-button
<ha-button
outlined
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.add_option"
@ -89,7 +90,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
@click=${this._addOption}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</mwc-button>
</ha-button>
${this._showDefault || action.default
? html`
<h2>
@ -196,6 +197,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
ha-icon-button {
position: absolute;
right: 0;
inset-inline-start: initial;
inset-inline-end: 0;
direction: var(--direction);
padding: 4px;
}
ha-svg-icon {

5
src/panels/config/automation/condition/ha-automation-condition.ts
View File

@ -8,6 +8,7 @@ import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import type { SortableEvent } from "sortablejs";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button";
import "../../../../components/ha-button-menu";
import "../../../../components/ha-svg-icon";
import type { Condition } from "../../../../data/automation";
@ -177,7 +178,7 @@ export default class HaAutomationCondition extends LitElement {
@action=${this._addCondition}
.disabled=${this.disabled}
>
<mwc-button
<ha-button
slot="trigger"
outlined
.disabled=${this.disabled}
@ -186,7 +187,7 @@ export default class HaAutomationCondition extends LitElement {
)}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</mwc-button>
</ha-button>
${this._processedTypes(this.hass.localize).map(
([opt, label, icon]) => html`
<mwc-list-item .value=${opt} graphic="icon">

5
src/panels/config/automation/trigger/ha-automation-trigger.ts
View File

@ -11,6 +11,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { stringCompare } from "../../../../common/string/compare";
import type { LocalizeFunc } from "../../../../common/translations/localize";
import "../../../../components/ha-button-menu";
import "../../../../components/ha-button";
import type { HaSelect } from "../../../../components/ha-select";
import "../../../../components/ha-svg-icon";
import { Trigger } from "../../../../data/automation";
@ -125,7 +126,7 @@ export default class HaAutomationTrigger extends LitElement {
)}
</div>
<ha-button-menu @action=${this._addTrigger} .disabled=${this.disabled}>
<mwc-button
<ha-button
slot="trigger"
outlined
.label=${this.hass.localize(
@ -134,7 +135,7 @@ export default class HaAutomationTrigger extends LitElement {
.disabled=${this.disabled}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</mwc-button>
</ha-button>
${this._processedTypes(this.hass.localize).map(
([opt, label, icon]) => html`
<mwc-list-item .value=${opt} graphic="icon">

5
src/panels/config/logs/ha-config-logs.ts
View File

@ -4,6 +4,7 @@ import { customElement, property, query, state } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { extractSearchParam } from "../../../common/url/search-params";
import "../../../components/ha-button-menu";
import "../../../components/ha-button";
import "../../../components/search-input";
import { LogProvider } from "../../../data/error_log";
import { fetchHassioAddonsInfo } from "../../../data/hassio/addon";
@ -115,7 +116,7 @@ export class HaConfigLogs extends LitElement {
this.hass.userData?.showAdvanced
? html`
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
<mwc-button
<ha-button
slot="trigger"
.label=${this._logProviders.find(
(p) => p.key === this._selectedLogProvider
@ -125,7 +126,7 @@ export class HaConfigLogs extends LitElement {
slot="trailingIcon"
.path=${mdiChevronDown}
></ha-svg-icon>
</mwc-button>
</ha-button>
${this._logProviders.map(
(provider) => html`
<mwc-list-item

5
src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts
View File

@ -15,6 +15,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-button";
import "../../../../components/ha-svg-icon";
import { sortableStyles } from "../../../../resources/ha-sortable-style";
import {
@ -160,7 +161,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
@action=${this._addFeature}
@closed=${stopPropagation}
>
<mwc-button
<ha-button
slot="trigger"
outlined
.label=${this.hass!.localize(
@ -168,7 +169,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
)}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
</mwc-button>
</ha-button>
${this._supportedFeatureTypes.map(
(featureType) => html`<mwc-list-item .value=${featureType}>
<ha-svg-icon

10
src/panels/media-browser/ha-bar-media-player.ts
View File

@ -30,6 +30,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
import { domainIcon } from "../../common/entity/domain_icon";
import { supportsFeature } from "../../common/entity/supports-feature";
import "../../components/ha-button-menu";
import "../../components/ha-button";
import "../../components/ha-circular-progress";
import "../../components/ha-icon-button";
import { UNAVAILABLE } from "../../data/entity";
@ -323,7 +324,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
></ha-icon-button>
`
: html`
<mwc-button
<ha-button
slot="trigger"
.label=${this.narrow
? ""
@ -344,7 +345,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
slot="trailingIcon"
.path=${mdiChevronDown}
></ha-svg-icon>
</mwc-button>
</ha-button>
`
}
<mwc-list-item
@ -720,11 +721,6 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
font-weight: bold;
}
ha-svg-icon[slot="icon"] {
margin-inline-start: 8px !important;
margin-inline-end: 8px !important;
direction: var(--direction);
}
ha-svg-icon[slot="trailingIcon"] {
margin-inline-start: 8px !important;
margin-inline-end: 0px !important;