onkelbeh/ha-frontend-cdce8p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

RTL fix for drop downs (#3047)

Browse Source 
* RTL fix for drop downs

* Added new file
This commit is contained in:
yosilevy 2019-04-02 21:53:00 +03:00 committed by Paulus Schoutsen
parent a362b08113
commit 109c40b2d3
10 changed files with 68 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ha-paper-dropdown-menu.ts Normal file
View File

@ -0,0 +1,28 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import { Constructor } from "lit-element";
import { PolymerElement } from "@polymer/polymer";
const paperDropdownClass = customElements.get(
"paper-dropdown-menu"
) as Constructor<PolymerElement>;
// patches paper drop down to properly support RTL - https://github.com/PolymerElements/paper-dropdown-menu/issues/183
export class HaPaperDropdownClass extends paperDropdownClass {
public ready() {
super.ready();
// wait to check for direction since otherwise direction is wrong even though top level is RTL
setTimeout(() => {
if (window.getComputedStyle(this).direction === "rtl") {
this.style.textAlign = "right";
}
}, 100);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-paper-dropdown-menu": HaPaperDropdownClass;
}
}
customElements.define("ha-paper-dropdown-menu", HaPaperDropdownClass);

16
src/dialogs/more-info/controls/more-info-climate.js
View File

@ -1,5 +1,4 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-toggle-button/paper-toggle-button";
@ -10,6 +9,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-climate-control";
import "../../../components/ha-paper-slider";
import "../../../components/ha-paper-dropdown-menu";
import attributeClassNames from "../../../common/entity/attribute_class_names";
import featureClassNames from "../../../common/entity/feature_class_names";
@ -64,7 +64,7 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
margin: 22px 16px 0 0;
}
paper-dropdown-menu {
ha-paper-dropdown-menu {
width: 100%;
}
@ -193,7 +193,7 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
<template is="dom-if" if="[[supportsOperationMode(stateObj)]]">
<div class="container-operation_list">
<div class="controls">
<paper-dropdown-menu
<ha-paper-dropdown-menu
label-float=""
dynamic-align=""
label="[[localize('ui.card.climate.operation')]]"
@ -212,14 +212,14 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</div>
</div>
</template>
<template is="dom-if" if="[[supportsFanMode(stateObj)]]">
<div class="container-fan_list">
<paper-dropdown-menu
<ha-paper-dropdown-menu
label-float=""
dynamic-align=""
label="[[localize('ui.card.climate.fan_mode')]]"
@ -233,13 +233,13 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
<paper-item>[[_localizeFanMode(localize, item)]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</div>
</template>
<template is="dom-if" if="[[supportsSwingMode(stateObj)]]">
<div class="container-swing_list">
<paper-dropdown-menu
<ha-paper-dropdown-menu
label-float=""
dynamic-align=""
label="[[localize('ui.card.climate.swing_mode')]]"
@ -253,7 +253,7 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
<paper-item>[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</div>
</template>

8
src/dialogs/more-info/controls/more-info-fan.js
View File

@ -1,5 +1,4 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
@ -8,6 +7,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-attributes";
import "../../../components/ha-paper-dropdown-menu";
import attributeClassNames from "../../../common/entity/attribute_class_names";
import EventsMixin from "../../../mixins/events-mixin";
@ -33,7 +33,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
display: block;
}
paper-dropdown-menu {
ha-paper-dropdown-menu {
width: 100%;
}
@ -44,7 +44,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
<div class$="[[computeClassNames(stateObj)]]">
<div class="container-speed_list">
<paper-dropdown-menu
<ha-paper-dropdown-menu
label-float=""
dynamic-align=""
label="[[localize('ui.card.fan.speed')]]"
@ -57,7 +57,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
<paper-item>[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</div>
<div class="container-oscillating">

6
src/dialogs/more-info/controls/more-info-light.js
View File

@ -1,5 +1,4 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -8,6 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-attributes";
import "../../../components/ha-color-picker";
import "../../../components/ha-labeled-slider";
import "../../../components/ha-paper-dropdown-menu";
import featureClassNames from "../../../common/entity/feature_class_names";
import EventsMixin from "../../../mixins/events-mixin";
@ -177,7 +177,7 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
</div>
<div class="control effect_list">
<paper-dropdown-menu
<ha-paper-dropdown-menu
label-float=""
dynamic-align=""
label="[[localize('ui.card.light.effect')]]"
@ -190,7 +190,7 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
<paper-item>[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</div>
<ha-attributes

12
src/dialogs/more-info/controls/more-info-media_player.js
View File

@ -1,6 +1,5 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/iron-icon/iron-icon";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
@ -8,6 +7,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-paper-slider";
import "../../../components/ha-paper-dropdown-menu";
import HassMediaPlayerEntity from "../../../util/hass-media-player-model";
import attributeClassNames from "../../../common/entity/attribute_class_names";
@ -50,7 +50,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
margin-top: 15px;
}
paper-dropdown-menu.source-input {
ha-paper-dropdown-menu.source-input {
margin-left: 10px;
}
@ -148,7 +148,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
hidden$="[[computeHideSelectSource(playerObj)]]"
>
<iron-icon class="source-input" icon="hass:login-variant"></iron-icon>
<paper-dropdown-menu
<ha-paper-dropdown-menu
class="flex source-input"
dynamic-align=""
label-float=""
@ -159,13 +159,13 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
<paper-item>[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</div>
<!-- SOUND MODE PICKER -->
<template is="dom-if" if="[[!computeHideSelectSoundMode(playerObj)]]">
<div class="controls layout horizontal justified">
<iron-icon class="source-input" icon="hass:music-note"></iron-icon>
<paper-dropdown-menu
<ha-paper-dropdown-menu
class="flex source-input"
dynamic-align
label-float
@ -180,7 +180,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
<paper-item item-name$="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</div>
</template>
<!-- TTS -->

6
src/dialogs/more-info/controls/more-info-vacuum.js
View File

@ -1,6 +1,5 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/iron-icon/iron-icon";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
@ -8,6 +7,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-attributes";
import "../../../components/ha-paper-dropdown-menu";
import { supportsFeature } from "../../../common/entity/supports-feature";
class MoreInfoVacuum extends PolymerElement {
@ -104,7 +104,7 @@ class MoreInfoVacuum extends PolymerElement {
<div hidden$="[[!supportsFanSpeed(stateObj)]]">
<div class="horizontal justified layout">
<paper-dropdown-menu
<ha-paper-dropdown-menu
label-float=""
dynamic-align=""
label="Fan speed"
@ -117,7 +117,7 @@ class MoreInfoVacuum extends PolymerElement {
<paper-item>[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
<div
style="justify-content: center; align-self: center; padding-top: 1.3em"
>

8
src/dialogs/more-info/controls/more-info-water_heater.js
View File

@ -1,5 +1,4 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-toggle-button/paper-toggle-button";
@ -10,6 +9,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-water_heater-control";
import "../../../components/ha-paper-slider";
import "../../../components/ha-paper-dropdown-menu";
import featureClassNames from "../../../common/entity/feature_class_names";
import { supportsFeature } from "../../../common/entity/supports-feature";
@ -40,7 +40,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
.container-operation_list iron-icon,
paper-dropdown-menu {
ha-paper-dropdown-menu {
width: 100%;
}
@ -93,7 +93,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
<template is="dom-if" if="[[supportsOperationMode(stateObj)]]">
<div class="container-operation_list">
<div class="controls">
<paper-dropdown-menu
<ha-paper-dropdown-menu
label-float=""
dynamic-align=""
label="[[localize('ui.card.water_heater.operation')]]"
@ -112,7 +112,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</div>
</div>
</template>

8
src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
View File

@ -9,10 +9,10 @@ import {
PropertyValues,
} from "lit-element";
import { repeat } from "lit-html/directives/repeat";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/entity/state-badge";
import "../components/hui-warning";
@ -62,7 +62,7 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
return html`
<state-badge .stateObj="${stateObj}"></state-badge>
<paper-dropdown-menu
<ha-paper-dropdown-menu
selected-item-label="${stateObj.state}"
@selected-item-label-changed="${this._selectedChanged}"
label="${this._config.name || computeStateName(stateObj)}"
@ -79,7 +79,7 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
`
)}
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
`;
}
@ -89,7 +89,7 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
display: flex;
align-items: center;
}
paper-dropdown-menu {
ha-paper-dropdown-menu {
margin-left: 16px;
flex: 1;
}

7
src/panels/profile/ha-pick-language-row.js
View File

@ -1,10 +1,11 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-paper-dropdown-menu";
import EventsMixin from "../../mixins/events-mixin";
import LocalizeMixin from "../../mixins/localize-mixin";
@ -39,7 +40,7 @@ class HaPickLanguageRow extends LocalizeMixin(EventsMixin(PolymerElement)) {
>[[localize('ui.panel.profile.language.link_promo')]]</a
>
</span>
<paper-dropdown-menu
<ha-paper-dropdown-menu
label="[[localize('ui.panel.profile.language.dropdown_label')]]"
dynamic-align=""
>
@ -54,7 +55,7 @@ class HaPickLanguageRow extends LocalizeMixin(EventsMixin(PolymerElement)) {
</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</ha-settings-row>
`;
}

7
src/panels/profile/ha-pick-theme-row.js
View File

@ -1,10 +1,11 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-paper-dropdown-menu";
import EventsMixin from "../../mixins/events-mixin";
import LocalizeMixin from "../../mixins/localize-mixin";
@ -34,7 +35,7 @@ class HaPickThemeRow extends LocalizeMixin(EventsMixin(PolymerElement)) {
>[[localize('ui.panel.profile.themes.link_promo')]]</a
>
</span>
<paper-dropdown-menu
<ha-paper-dropdown-menu
label="[[localize('ui.panel.profile.themes.dropdown_label')]]"
dynamic-align
disabled="[[!_hasThemes]]"
@ -44,7 +45,7 @@ class HaPickThemeRow extends LocalizeMixin(EventsMixin(PolymerElement)) {
<paper-item>[[theme]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</ha-paper-dropdown-menu>
</ha-settings-row>
`;
}