From 1d4f74cda314674fa052e845a0a3250b0f429271 Mon Sep 17 00:00:00 2001
From: yosilevy <37745463+yosilevy@users.noreply.github.com>
Date: Fri, 11 Jan 2019 01:39:41 +0200
Subject: [PATCH] Force dev panels to LTR even in RTL language to make it
 usable. Same for logbook. (#2432)

---
 src/panels/dev-event/ha-panel-dev-event.js     |  1 +
 src/panels/dev-info/ha-panel-dev-info.js       |  2 ++
 src/panels/dev-mqtt/ha-panel-dev-mqtt.js       |  1 +
 src/panels/dev-service/ha-panel-dev-service.js |  1 +
 .../dev-template/ha-panel-dev-template.js      |  1 +
 src/panels/logbook/ha-logbook.js               | 18 ++++++++++++++++++
 6 files changed, 24 insertions(+)

diff --git a/src/panels/dev-event/ha-panel-dev-event.js b/src/panels/dev-event/ha-panel-dev-event.js
index 255f728c1c..9fddd75adf 100644
--- a/src/panels/dev-event/ha-panel-dev-event.js
+++ b/src/panels/dev-event/ha-panel-dev-event.js
@@ -30,6 +30,7 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
         .content {
           @apply --paper-font-body1;
           padding: 16px;
+          direction: ltr;
         }
 
         .ha-form {
diff --git a/src/panels/dev-info/ha-panel-dev-info.js b/src/panels/dev-info/ha-panel-dev-info.js
index 72945f4cb0..0bf12ed769 100644
--- a/src/panels/dev-info/ha-panel-dev-info.js
+++ b/src/panels/dev-info/ha-panel-dev-info.js
@@ -35,6 +35,7 @@ class HaPanelDevInfo extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
       .content {
         padding: 16px 0px 16px 0;
+        direction: ltr;
       }
 
       .about {
@@ -90,6 +91,7 @@ class HaPanelDevInfo extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
       paper-dialog {
         border-radius: 2px;
+        direction: ltr;
       }
 
       @media all and (max-width: 450px), all and (max-height: 500px) {
diff --git a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
index d50dc289cc..2d8647179e 100644
--- a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
+++ b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
@@ -26,6 +26,7 @@ class HaPanelDevMqtt extends PolymerElement {
           padding: 24px 0 32px;
           max-width: 600px;
           margin: 0 auto;
+          direction: ltr;
         }
 
         paper-card {
diff --git a/src/panels/dev-service/ha-panel-dev-service.js b/src/panels/dev-service/ha-panel-dev-service.js
index 9c590e1f55..f249a5de69 100644
--- a/src/panels/dev-service/ha-panel-dev-service.js
+++ b/src/panels/dev-service/ha-panel-dev-service.js
@@ -25,6 +25,7 @@ class HaPanelDevService extends PolymerElement {
 
         .content {
           padding: 16px;
+          direction: ltr;
         }
 
         .ha-form {
diff --git a/src/panels/dev-template/ha-panel-dev-template.js b/src/panels/dev-template/ha-panel-dev-template.js
index ace78a48cf..61a07919ab 100644
--- a/src/panels/dev-template/ha-panel-dev-template.js
+++ b/src/panels/dev-template/ha-panel-dev-template.js
@@ -24,6 +24,7 @@ class HaPanelDevTemplate extends PolymerElement {
 
         .content {
           padding: 16px;
+          direction: ltr;
         }
 
         .edit-pane {
diff --git a/src/panels/logbook/ha-logbook.js b/src/panels/logbook/ha-logbook.js
index 18a87f5a47..1c30cfe6b1 100644
--- a/src/panels/logbook/ha-logbook.js
+++ b/src/panels/logbook/ha-logbook.js
@@ -7,6 +7,7 @@ import formatTime from "../../common/datetime/format_time";
 import formatDate from "../../common/datetime/format_date";
 import EventsMixin from "../../mixins/events-mixin";
 import domainIcon from "../../common/entity/domain_icon";
+import { computeRTL } from "../../common/util/compute_rtl";
 
 /*
  * @appliesMixin EventsMixin
@@ -20,6 +21,10 @@ class HaLogbook extends EventsMixin(PolymerElement) {
           display: block;
         }
 
+        :host([rtl]) {
+          direction: ltr;
+        }
+
         .entry {
           @apply --paper-font-body1;
           line-height: 2em;
@@ -31,6 +36,10 @@ class HaLogbook extends EventsMixin(PolymerElement) {
           color: var(--secondary-text-color);
         }
 
+        :host([rtl]) .date {
+          direction: rtl;
+        }
+
         iron-icon {
           margin: 0 8px 0 16px;
           color: var(--primary-text-color);
@@ -83,6 +92,11 @@ class HaLogbook extends EventsMixin(PolymerElement) {
         type: Array,
         value: [],
       },
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
     };
   }
 
@@ -109,6 +123,10 @@ class HaLogbook extends EventsMixin(PolymerElement) {
     return domainIcon(domain);
   }
 
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
+
   entityClicked(ev) {
     ev.preventDefault();
     this.fire("hass-more-info", { entityId: ev.model.item.entity_id });