static styles (#2533)

2025-07-28 19:56:42 +00:00 · 2019-01-23 22:47:20 -05:00 · 2019-01-23 22:47:20 -05:00 · 334c4fe90f
commit 334c4fe90f
parent a2816800e8
7 changed files with 143 additions and 180 deletions
--- a/src/panels/config/zha/ha-config-zha.ts
+++ b/src/panels/config/zha/ha-config-zha.ts
@ -1,18 +1,18 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
  html,
  LitElement,
  PropertyDeclarations,
  TemplateResult,
+  CSSResult,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { Cluster } from "../../../data/zha";
 import "../../../layouts/ha-app-layout";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import {
  ZHAClusterSelectedParams,
@ -27,8 +27,6 @@ import "./zha-node";
 export class HaConfigZha extends LitElement {
  public hass?: HomeAssistant;
  public isWide?: boolean;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
  private _selectedNode?: HassEntity;
  private _selectedCluster?: Cluster;
  private _selectedEntity?: HassEntity;
@ -45,7 +43,6 @@ export class HaConfigZha extends LitElement {

  protected render(): TemplateResult | void {
    return html`
-      ${this.renderStyle()}
      <ha-app-layout>
        <app-header slot="header">
          <app-toolbar>
@ -114,24 +111,8 @@ export class HaConfigZha extends LitElement {
    this._selectedEntity = selectedEntityEvent.detail.entity;
  }

-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-    `;
+  static get styles(): CSSResult[] {
+    return [haStyle];
  }

  private _onBackTapped(): void {
--- a/src/panels/config/zha/zha-cluster-attributes.ts
+++ b/src/panels/config/zha/zha-cluster-attributes.ts
@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
  html,
  LitElement,
  PropertyDeclarations,
  PropertyValues,
  TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-card/paper-card";
@ -20,7 +21,7 @@ import {
  readAttributeValue,
  ZHADeviceEntity,
 } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import {
@ -36,8 +37,6 @@ export class ZHAClusterAttributes extends LitElement {
  public selectedNode?: HassEntity;
  public selectedEntity?: ZHADeviceEntity;
  public selectedCluster?: Cluster;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
  private _attributes: Attribute[];
  private _selectedAttributeIndex: number;
  private _attributeValue?: any;
@ -80,7 +79,6 @@ export class ZHAClusterAttributes extends LitElement {

  protected render(): TemplateResult | void {
    return html`
-      ${this.renderStyle()}
      <ha-config-section .isWide="${this.isWide}">
        <div style="position: relative" slot="header">
          <span>Cluster Attributes</span>
@ -254,24 +252,18 @@ export class ZHAClusterAttributes extends LitElement {
    this._attributeValue = "";
  }

-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
        .content {
          margin-top: 24px;
        }
@ -287,8 +279,15 @@ export class ZHAClusterAttributes extends LitElement {
        }

        .attribute-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
          padding-left: 28px;
          padding-right: 28px;
          padding-bottom: 10px;
@ -316,7 +315,8 @@ export class ZHAClusterAttributes extends LitElement {
          display: none;
        }
      </style>
-    `;
+    `,
+    ];
  }
 }

--- a/src/panels/config/zha/zha-cluster-commands.ts
+++ b/src/panels/config/zha/zha-cluster-commands.ts
@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
  html,
  LitElement,
  PropertyDeclarations,
  PropertyValues,
  TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-card/paper-card";
 import { HassEntity } from "home-assistant-js-websocket";
@ -16,7 +17,7 @@ import {
  fetchCommandsForCluster,
  ZHADeviceEntity,
 } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import {
@ -32,8 +33,6 @@ export class ZHAClusterCommands extends LitElement {
  public selectedEntity?: ZHADeviceEntity;
  public selectedCluster?: Cluster;
  private _showHelp: boolean;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
  private _commands: Command[];
  private _selectedCommandIndex: number;
  private _manufacturerCodeOverride?: number;
@ -72,7 +71,6 @@ export class ZHAClusterCommands extends LitElement {

  protected render(): TemplateResult | void {
    return html`
-      ${this.renderStyle()}
      <ha-config-section .isWide="${this.isWide}">
        <div class="sectionHeader" slot="header">
          <span>Cluster Commands</span>
@ -198,24 +196,18 @@ export class ZHAClusterCommands extends LitElement {
    this._issueClusterCommandServiceData = this._computeIssueClusterCommandServiceData();
  }

-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
        .content {
          margin-top: 24px;
        }
@ -231,8 +223,15 @@ export class ZHAClusterCommands extends LitElement {
        }

        .command-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
          padding-left: 28px;
          padding-right: 28px;
          padding-bottom: 10px;
@ -269,7 +268,8 @@ export class ZHAClusterCommands extends LitElement {
          display: none;
        }
      </style>
-    `;
+    `,
+    ];
  }
 }

--- a/src/panels/config/zha/zha-clusters.ts
+++ b/src/panels/config/zha/zha-clusters.ts
@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
  html,
  LitElement,
  PropertyDeclarations,
  PropertyValues,
  TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-card/paper-card";
 import { fireEvent } from "../../../common/dom/fire_event";
@ -15,7 +16,7 @@ import {
  fetchClustersForZhaNode,
  ZHADeviceEntity,
 } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import { ItemSelectedEvent } from "./types";
@ -40,8 +41,6 @@ export class ZHAClusters extends LitElement {
  public selectedEntity?: ZHADeviceEntity;
  private _selectedClusterIndex: number;
  private _clusters: Cluster[];
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;

  constructor() {
    super();
@ -75,7 +74,6 @@ export class ZHAClusters extends LitElement {

  protected render(): TemplateResult | void {
    return html`
-      ${this._renderStyle()}
      <div class="node-picker">
        <paper-dropdown-menu label="Clusters" class="flex">
          <paper-listbox
@ -122,27 +120,28 @@ export class ZHAClusters extends LitElement {
    });
  }

-  private _renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
        .node-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
          padding-left: 28px;
          padding-right: 28px;
          padding-bottom: 10px;
@ -151,8 +150,8 @@ export class ZHAClusters extends LitElement {
          color: grey;
          padding: 16px;
        }
-      </style>
-    `;
+      `,
+    ];
  }
 }

--- a/src/panels/config/zha/zha-entities.ts
+++ b/src/panels/config/zha/zha-entities.ts
@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
  html,
  LitElement,
  PropertyDeclarations,
  PropertyValues,
  TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-item/paper-item";
@ -12,7 +13,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import { HassEntity } from "home-assistant-js-websocket";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { fetchEntitiesForZhaNode } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import { ItemSelectedEvent } from "./types";

@ -31,8 +32,6 @@ export class ZHAEntities extends LitElement {
  public selectedNode?: HassEntity;
  private _selectedEntityIndex: number;
  private _entities: HassEntity[];
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;

  constructor() {
    super();
@ -64,7 +63,6 @@ export class ZHAEntities extends LitElement {

  protected render(): TemplateResult | void {
    return html`
-      ${this._renderStyle()}
      <div class="node-picker">
        <paper-dropdown-menu label="Entities" class="flex">
          <paper-listbox
@ -125,27 +123,28 @@ export class ZHAEntities extends LitElement {
    });
  }

-  private _renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
        .node-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
          padding-left: 28px;
          padding-right: 28px;
          padding-bottom: 10px;
@ -163,8 +162,8 @@ export class ZHAEntities extends LitElement {
          color: grey;
          padding: 16px;
        }
-      </style>
-    `;
+      `,
+    ];
  }
 }

--- a/src/panels/config/zha/zha-network.ts
+++ b/src/panels/config/zha/zha-network.ts
@ -1,16 +1,17 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
  html,
  LitElement,
  PropertyDeclarations,
  TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";

@ -18,8 +19,6 @@ export class ZHANetwork extends LitElement {
  public hass?: HomeAssistant;
  public isWide?: boolean;
  private _showHelp: boolean;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;

  constructor() {
    super();
@ -36,7 +35,6 @@ export class ZHANetwork extends LitElement {

  protected render(): TemplateResult | void {
    return html`
-      ${this.renderStyle()}
      <ha-config-section .isWide="${this.isWide}">
        <div style="position: relative" slot="header">
            <span>Network Management</span>
@ -71,24 +69,10 @@ export class ZHANetwork extends LitElement {
    this._showHelp = !this._showHelp;
  }

-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
        .content {
          margin-top: 24px;
        }
@ -119,7 +103,8 @@ export class ZHANetwork extends LitElement {
          display: none;
        }
      </style>
-    `;
+    `,
+    ];
  }
 }

--- a/src/panels/config/zha/zha-node.ts
+++ b/src/panels/config/zha/zha-node.ts
@ -1,9 +1,10 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
  html,
  LitElement,
  PropertyDeclarations,
  TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-card/paper-card";
@ -16,7 +17,7 @@ import computeStateName from "../../../common/entity/compute_state_name";
 import sortByName from "../../../common/entity/states_sort_by_name";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import {
@ -45,8 +46,6 @@ export class ZHANode extends LitElement {
  private _selectedNode?: HassEntity;
  private _selectedEntity?: HassEntity;
  private _serviceData?: {};
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
  private _nodes: HassEntity[];

  constructor() {
@ -71,7 +70,6 @@ export class ZHANode extends LitElement {
  protected render(): TemplateResult | void {
    this._nodes = this._computeNodes(this.hass);
    return html`
-      ${this.renderStyle()}
      <ha-config-section .isWide="${this.isWide}">
        <div class="sectionHeader" slot="header">
          <span>Node Management</span>
@ -242,24 +240,18 @@ export class ZHANode extends LitElement {
    this._selectedEntity = entitySelectedEvent.detail.entity;
  }

-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
        .content {
          margin-top: 24px;
        }
@ -289,8 +281,15 @@ export class ZHANode extends LitElement {
        }

        .node-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
          padding-left: 28px;
          padding-right: 28px;
          padding-bottom: 10px;
@ -311,8 +310,8 @@ export class ZHANode extends LitElement {
          right: 0;
          color: var(--primary-color);
        }
-      </style>
-    `;
+      `,
+    ];
  }
 }