Align styling cast buttons (#3579)

* Align styling cast buttons

* Split dev constants

* Ignore dev_const

* Update README.md

.gitignore

@@ -25,6 +25,9 @@ dist
 .vscode/*
 !.vscode/extensions.json
 
+# Cast dev settings 
+src/cast/dev_const.ts
+
 # Secrets
 .lokalise_token
 yarn-error.log

cast/README.md

@@ -25,7 +25,7 @@ Home Assistant Cast is made up of two separate applications:
 
 ### Setting dev variables
 
-Open `src/cast/const.ts` and change `CAST_DEV` to `true` and `CAST_DEV_APP_ID` to the ID of the app you just created.
+Open `src/cast/dev_const.ts` and change `CAST_DEV_APP_ID` to the ID of the app you just created. And set the `CAST_DEV_HASS_URL` to the url of you development machine.
 
 ### Changing configuration
 

src/cast/cast_manager.ts

@@ -1,5 +1,6 @@
 import { castApiAvailable } from "./cast_framework";
-import { CAST_APP_ID, CAST_NS, CAST_DEV_HASS_URL, CAST_DEV } from "./const";
+import { CAST_APP_ID, CAST_NS, CAST_DEV } from "./const";
+import { CAST_DEV_HASS_URL } from "./dev_const";
 import {
   castSendAuth,
   HassMessage as ReceiverMessage,

src/cast/const.ts

@@ -1,11 +1,7 @@
+import { CAST_DEV_APP_ID } from "./dev_const";
+
 // Guard dev mode with `__dev__` so it can only ever be enabled in dev mode.
 export const CAST_DEV = __DEV__ && true;
-// Replace this with your own unpublished cast app that points at your local dev
+
-const CAST_DEV_APP_ID = "5FE44367";
 export const CAST_APP_ID = CAST_DEV ? CAST_DEV_APP_ID : "B12CE3CA";
 export const CAST_NS = "urn:x-cast:com.nabucasa.hast";
-
-// Chromecast SDK will only load on localhost and HTTPS
-// So during local development we have to send our dev IP address,
-// but then run the UI on localhost.
-export const CAST_DEV_HASS_URL = "http://192.168.1.234:8123";

src/cast/dev_const.ts

@@ -0,0 +1,7 @@
+// Replace this with your own unpublished cast app that points at your local dev
+export const CAST_DEV_APP_ID = "5FE44367";
+
+// Chromecast SDK will only load on localhost and HTTPS
+// So during local development we have to send our dev IP address,
+// but then run the UI on localhost.
+export const CAST_DEV_HASS_URL = "http://192.168.1.234:8123";

src/cast/receiver_messages.ts

@@ -4,7 +4,8 @@ import { Auth } from "home-assistant-js-websocket";
 import { CastManager } from "./cast_manager";
 
 import { BaseCastMessage } from "./types";
-import { CAST_DEV_HASS_URL, CAST_DEV } from "./const";
+import { CAST_DEV } from "./const";
+import { CAST_DEV_HASS_URL } from "./dev_const";
 
 export interface GetStatusMessage extends BaseCastMessage {
   type: "get_status";

src/panels/lovelace/special-rows/hui-cast-row.ts

@@ -7,6 +7,7 @@ import {
   css,
   CSSResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 
 import { EntityRow, CastConfig } from "../entity-rows/types";
 import { HomeAssistant } from "../../../types";
@@ -45,6 +46,11 @@ class HuiCastRow extends LitElement implements EntityRow {
       return html``;
     }
 
+    const active =
+      this._castManager &&
+      this._castManager.status &&
+      this._config.view === this._castManager.status.lovelacePath;
+
     return html`
       <ha-icon .icon="${this._config.icon}"></ha-icon>
       <div class="flex">
@@ -68,8 +74,8 @@ class HuiCastRow extends LitElement implements EntityRow {
                 <google-cast-launcher></google-cast-launcher>
                 <mwc-button
                   @click=${this._sendLovelace}
-                  .unelevated=${this._castManager.status &&
+                  class=${classMap({ inactive: !Boolean(active) })}
-                    this._config.view === this._castManager.status.lovelacePath}
+                  .unelevated=${active}
                   .disabled=${!this._castManager.status}
                 >
                   SHOW
@@ -124,7 +130,6 @@ class HuiCastRow extends LitElement implements EntityRow {
       :host {
         display: flex;
         align-items: center;
-        overflow: visible;
       }
       ha-icon {
         padding: 8px;
@@ -143,7 +148,6 @@ class HuiCastRow extends LitElement implements EntityRow {
         text-overflow: ellipsis;
       }
       .controls {
-        margin-right: -0.57em;
         display: flex;
         align-items: center;
       }
@@ -154,6 +158,9 @@ class HuiCastRow extends LitElement implements EntityRow {
         height: 24px;
         width: 24px;
       }
+      .inactive {
+        padding: 0 4px;
+      }
     `;
   }
 }