History+logbook positioning update + RTL fixes + label refactor (#2659)

src/panels/history/ha-panel-history.js

@@ -18,6 +18,7 @@ import "../../resources/ha-style";
 
 import formatDate from "../../common/datetime/format_date";
 import LocalizeMixin from "../../mixins/localize-mixin";
+import { computeRTL } from "../../common/util/compute_rtl";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -37,6 +38,15 @@ class HaPanelHistory extends LocalizeMixin(PolymerElement) {
 
         paper-dropdown-menu {
           max-width: 100px;
+          margin-top: 13px;
+          margin-right: 16px;
+          --paper-input-container-label-floating: {
+            padding-bottom: 10px;
+          }
+        }
+
+        :host([rtl]) paper-dropdown-menu {
+          text-align: right;
         }
 
         paper-item {
@@ -158,6 +168,12 @@ class HaPanelHistory extends LocalizeMixin(PolymerElement) {
         type: String,
         value: "date",
       },
+
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
     };
   }
 
@@ -198,6 +214,10 @@ class HaPanelHistory extends LocalizeMixin(PolymerElement) {
         return 1;
     }
   }
+
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
 }
 
 customElements.define("ha-panel-history", HaPanelHistory);

src/panels/logbook/ha-panel-logbook.js

@@ -18,6 +18,7 @@ import "./ha-logbook";
 
 import formatDate from "../../common/datetime/format_date";
 import LocalizeMixin from "../../mixins/localize-mixin";
+import { computeRTL } from "../../common/util/compute_rtl";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -52,6 +53,13 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
         paper-dropdown-menu {
           max-width: 100px;
           margin-right: 16px;
+          --paper-input-container-label-floating: {
+            padding-bottom: 10px;
+          }
+        }
+
+        :host([rtl]) paper-dropdown-menu {
+          text-align: right;
         }
 
         paper-item {
@@ -205,6 +213,12 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
       datePicker: {
         type: Object,
       },
+
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
     };
   }
 
@@ -242,6 +256,10 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
   refreshLogbook() {
     this.shadowRoot.querySelector("ha-logbook-data").refreshLogbook();
   }
+
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
 }
 
 customElements.define("ha-panel-logbook", HaPanelLogbook);

src/translations/en.json

@@ -808,7 +808,8 @@
         "period": "Period"
       },
       "logbook": {
-        "showing_entries": "[%key:ui::panel::history::showing_entries%]"
+        "showing_entries": "[%key:ui::panel::history::showing_entries%]",
+        "period": "Period"
       },
       "lovelace": {
         "cards": {