Make "Events" dev tools use screen space better (#7449)

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -177,8 +177,9 @@ class HassioAddonDashboard extends LitElement {
       const requestedAddon = extractSearchParam("addon");
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        const validAddon = addonsInfo.addons
-          .some((addon) => addon.slug === requestedAddon);
+        const validAddon = addonsInfo.addons.some(
+          (addon) => addon.slug === requestedAddon
+        );
         if (!validAddon) {
           this._error = this.supervisor.localize("my.error_addon_not_found");
         } else {

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -242,14 +242,18 @@ class HassioAddonInfo extends LitElement {
               ? html`
                   Current version: ${this.addon.version}
                   <div class="changelog" @click=${this._openChangelog}>
-                    (<span class="changelog-link">${
-                      this.supervisor.localize("addon.dashboard.changelog")}</span
+                    (<span class="changelog-link"
+                      >${this.supervisor.localize(
+                        "addon.dashboard.changelog"
+                      )}</span
                     >)
                   </div>
                 `
-              : html`<span class="changelog-link" @click=${this._openChangelog}>${
-                  this.supervisor.localize("addon.dashboard.changelog")
-                }</span>`}
+              : html`<span class="changelog-link" @click=${this._openChangelog}
+                  >${this.supervisor.localize(
+                    "addon.dashboard.changelog"
+                  )}</span
+                >`}
           </div>
 
           <div class="description light-color">

src/panels/config/info/integrations-card.ts

@@ -30,8 +30,9 @@ class IntegrationsCard extends LitElement {
   private _sortedIntegrations = memoizeOne((components: string[]) => {
     return Array.from(
       new Set(
-        components
-          .map((comp) => (comp.includes(".") ? comp.split(".")[1] : comp))
+        components.map((comp) =>
+          comp.includes(".") ? comp.split(".")[1] : comp
+        )
       )
     ).sort();
   });

src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts

@@ -76,9 +76,7 @@ class DialogZHADeviceChildren extends LitElement {
     },
   };
 
-  public showDialog(
-    params: ZHADeviceChildrenDialogParams
-  ): void {
+  public showDialog(params: ZHADeviceChildrenDialogParams): void {
     this._device = params.device;
     this._fetchData();
   }

src/panels/developer-tools/event/developer-tools-event.js

@@ -24,17 +24,21 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
     return html`
       <style include="ha-style iron-flex iron-positioning"></style>
       <style>
+        .content {
+          padding: 16px;
+          max-width: 1200px;
+          margin: auto;
+        }
+
         :host {
           -ms-user-select: initial;
           -webkit-user-select: initial;
           -moz-user-select: initial;
           @apply --paper-font-body1;
-          padding: 16px;
           display: block;
         }
 
-        .ha-form {
-          margin-right: 16px;
+        .inputs {
           max-width: 400px;
         }
 
@@ -42,14 +46,17 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
           margin-top: 8px;
         }
 
+        .code-editor {
+          margin-right: 16px;
+        }
+
         .header {
           @apply --paper-font-title;
         }
 
         event-subscribe-card {
           display: block;
-          max-width: 800px;
-          margin: 16px auto;
+          margin: 16px 16px 0 0;
         }
 
         a {
@@ -70,7 +77,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
               )]]
             </a>
           </p>
-          <div class="ha-form">
+          <div class="inputs">
             <paper-input
               label="[[localize(
                 'ui.panel.developer-tools.tabs.events.type'
@@ -82,17 +89,20 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
             <p>
               [[localize( 'ui.panel.developer-tools.tabs.events.data' )]]
             </p>
+          </div>
+          <div class="code-editor">
             <ha-code-editor
               mode="yaml"
               value="[[eventData]]"
               error="[[!validJSON]]"
               on-value-changed="_yamlChanged"
             ></ha-code-editor>
-            <mwc-button on-click="fireEvent" raised disabled="[[!validJSON]]"
-              >[[localize( 'ui.panel.developer-tools.tabs.events.fire_event'
-              )]]</mwc-button
-            >
           </div>
+          <mwc-button on-click="fireEvent" raised disabled="[[!validJSON]]"
+            >[[localize( 'ui.panel.developer-tools.tabs.events.fire_event'
+            )]]</mwc-button
+          >
+          <event-subscribe-card hass="[[hass]]"></event-subscribe-card>
         </div>
 
         <div>
@@ -106,7 +116,6 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
           ></events-list>
         </div>
       </div>
-      <event-subscribe-card hass="[[hass]]"></event-subscribe-card>
     `;
   }
 
@@ -185,7 +194,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
   }
 
   computeFormClasses(narrow) {
-    return narrow ? "" : "layout horizontal";
+    return narrow ? "content" : "content layout horizontal";
   }
 }
 

src/panels/developer-tools/event/event-subscribe-card.ts

@@ -122,19 +122,23 @@ class EventSubscribeCard extends LitElement {
     return css`
       form {
         display: block;
-        padding: 16px;
+        padding: 0 0 16px 16px;
       }
       paper-input {
         display: inline-block;
         width: 200px;
       }
+      mwc-button {
+        vertical-align: middle;
+      }
       .events {
         margin: -16px 0;
         padding: 0 16px;
       }
       .event {
-        border-bottom: 1px solid var(--divider-color);
-        padding-bottom: 16px;
+        border-top: 1px solid var(--divider-color);
+        padding-top: 8px;
+        padding-bottom: 8px;
         margin: 16px 0;
       }
       .event:last-child {

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -129,7 +129,8 @@ class HuiGenericEntityRow extends LitElement {
                     stateObj.attributes.brightness
                   ? html`${Math.round(
                       (stateObj.attributes.brightness / 255) * 100
-                    )} %`
+                    )}
+                    %`
                   : "")}
               </div>
             `

src/translations/en.json

@@ -374,7 +374,7 @@
         "clear": "Clear",
         "show_areas": "Show areas",
         "area": "Area",
-        "add_new": "Add new area…",
+        "add_new": "Add new area...",
         "no_areas": "You don't have any areas",
         "no_match": "No matching areas found",
         "add_dialog": {
@@ -847,7 +847,7 @@
     },
     "notification_toast": {
       "service_call_failed": "Failed to call service {service}.",
-      "connection_lost": "Connection lost. Reconnecting…",
+      "connection_lost": "Connection lost. Reconnecting...",
       "started": "Home Assistant has started!",
       "starting": "Home Assistant is starting, not everything will be available until it is finished.",
       "wrapping_up_startup": "Wrapping up startup, not everything will be available until it is finished.",
@@ -1055,7 +1055,7 @@
           "description": "View the Home Assistant logs",
           "details": "Log Details ({level})",
           "load_full_log": "Load Full Home Assistant Log",
-          "loading_log": "Loading error log…",
+          "loading_log": "Loading error log...",
           "no_errors": "No errors have been reported",
           "no_issues": "There are no new issues!",
           "clear": "Clear",
@@ -1196,7 +1196,7 @@
             },
             "server_management": {
               "heading": "Server management",
-              "introduction": "Control your Home Assistant server… from Home Assistant.",
+              "introduction": "Control your Home Assistant server... from Home Assistant.",
               "restart": "Restart",
               "confirm_restart": "Are you sure you want to restart Home Assistant?",
               "stop": "Stop",
@@ -1781,7 +1781,7 @@
             "integrations_link_all_features": " all available features",
             "connected": "Connected",
             "not_connected": "Not Connected",
-            "fetching_subscription": "Fetching subscription…",
+            "fetching_subscription": "Fetching subscription...",
             "tts": {
               "title": "Text to Speech",
               "info": "Bring personality to your home by having it speak to you by using our Text-to-Speech services. You can use this in automations and scripts by using the {service} service.",
@@ -1846,7 +1846,7 @@
               "no_hooks_yet2": " or by creating a ",
               "no_hooks_yet_link_automation": "webhook automation",
               "link_learn_more": "Learn more about creating webhook-powered automations.",
-              "loading": "Loading ...",
+              "loading": "Loading...",
               "manage": "Manage",
               "disable_hook_error_msg": "Failed to disable webhook:"
             }
@@ -2799,7 +2799,7 @@
             "clear": "Clear",
             "delete": "Delete card",
             "duplicate": "Duplicate card",
-            "move": "Move to View",
+            "move": "Move to view",
             "move_before": "Move card before",
             "move_after": "Move card after",
             "options": "More options",
@@ -3410,7 +3410,7 @@
           "events": {
             "title": "Events",
             "description": "Fire an event on the event bus.",
-            "documentation": "Events Documentation.",
+            "documentation": "Events documentation",
             "type": "Event Type",
             "data": "Event Data (YAML, optional)",
             "fire_event": "Fire Event",
@@ -3423,7 +3423,7 @@
             "start_listening": "Start listening",
             "stop_listening": "Stop listening",
             "alert_event_type": "Event type is a mandatory field",
-            "notification_event_fired": "Event {type} successful fired!"
+            "notification_event_fired": "Event {type} successfully fired!"
           },
           "services": {
             "title": "Services",
@@ -3442,8 +3442,8 @@
           },
           "states": {
             "title": "States",
-            "description1": "Set the representation of a device within Home Assistant.",
-            "description2": "This will not communicate with the actual device.",
+            "description1": "Set the current state representation of an entity within Home Assistant.",
+            "description2": "If the entity belongs to a device, there will be no actual communication with that device.",
             "entity": "Entity",
             "state": "State",
             "attributes": "Attributes",