ha-card migration - step #2 (#3187)

* Convert profile settings to ha-card

* Convert dev- panels to ha-card

* Convert empty-state-card to ha-card

* Convert zha config to ha-card - UNTESTED

* Convert zwave config to ha-card - UNTESTED

* Convert various panels to ha-card - UNTESTED

* Convert gallery to ha-card
This commit is contained in:
Thomas Lovén 2019-05-13 10:24:43 +02:00 committed by Paulus Schoutsen
parent e02d11a51f
commit d99744e054
31 changed files with 110 additions and 150 deletions

View File

@ -2,7 +2,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/iron-icon/iron-icon";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-icon-button/paper-icon-button";
@ -10,6 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../src/managers/notification-manager";
import "../../src/components/ha-card";
const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
@ -38,13 +38,13 @@ class HaGallery extends PolymerElement {
align-items: start;
}
.pickers paper-card {
.pickers ha-card {
width: 400px;
display: block;
margin: 16px 8px;
}
.pickers paper-card:last-child {
.pickers ha-card:last-child {
margin-bottom: 16px;
}
@ -79,7 +79,7 @@ class HaGallery extends PolymerElement {
<div id='demo'></div>
<template is='dom-if' if='[[!_demo]]'>
<div class='pickers'>
<paper-card heading="Lovelace card demos">
<ha-card header="Lovelace card demos">
<div class='card-content intro'>
<p>
Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same.
@ -101,9 +101,9 @@ class HaGallery extends PolymerElement {
</paper-item>
</a>
</template>
</paper-card>
</ha-card>
<paper-card heading="More Info demos">
<ha-card header="More Info demos">
<div class='card-content intro'>
<p>
More info screens show up when an entity is clicked.
@ -117,9 +117,9 @@ class HaGallery extends PolymerElement {
</paper-item>
</a>
</template>
</paper-card>
</ha-card>
<paper-card heading="Util demos">
<ha-card header="Util demos">
<div class='card-content intro'>
<p>
Test pages for our utility functions.
@ -133,7 +133,7 @@ class HaGallery extends PolymerElement {
</paper-item>
</a>
</template>
</paper-card>
</ha-card>
</div>
</template>
</div>

View File

@ -2,7 +2,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-item/paper-item";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -11,6 +10,7 @@ import moment from "moment";
import dates from "react-big-calendar/lib/utils/dates";
import "../../components/ha-menu-button";
import "../../components/ha-card";
import "../../resources/ha-style";
import "./ha-big-calendar";
@ -74,7 +74,7 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
<div class="flex content">
<div id="calendars" class="layout vertical wrap">
<paper-card heading="Calendars">
<ha-card header="Calendars">
<paper-listbox
id="calendar_list"
multi
@ -92,7 +92,7 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
</paper-item>
</template>
</paper-listbox>
</paper-card>
</ha-card>
</div>
<div class="flex layout horizontal wrap">
<ha-big-calendar

View File

@ -1,8 +1,8 @@
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import "../../../components/ha-card";
import "../ha-config-section";
import "@material/mwc-button/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-listbox/paper-listbox";
@ -55,7 +55,7 @@ export class ZHABindingControl extends LitElement {
</div>
<span slot="introduction">Bind and unbind devices.</span>
<paper-card class="content">
<ha-card class="content">
<div class="command-picker">
<paper-dropdown-menu label="Bindable Devices" class="flex">
<paper-listbox
@ -102,7 +102,7 @@ export class ZHABindingControl extends LitElement {
`
: ""}
</div>
</paper-card>
</ha-card>
</ha-config-section>
`;
}
@ -155,8 +155,7 @@ export class ZHABindingControl extends LitElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}

View File

@ -1,8 +1,8 @@
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import "../../../components/ha-card";
import "../ha-config-section";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-input/paper-input";
@ -95,7 +95,7 @@ export class ZHAClusterAttributes extends LitElement {
</div>
<span slot="introduction">View and edit cluster attributes.</span>
<paper-card class="content">
<ha-card class="content">
<div class="attribute-picker">
<paper-dropdown-menu
label="Attributes of the selected cluster"
@ -129,7 +129,7 @@ export class ZHAClusterAttributes extends LitElement {
${this._selectedAttributeIndex !== -1
? this._renderAttributeInteractions()
: ""}
</paper-card>
</ha-card>
</ha-config-section>
`;
}
@ -280,8 +280,7 @@ export class ZHAClusterAttributes extends LitElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}

View File

@ -1,7 +1,7 @@
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import "../../../components/ha-card";
import "../ha-config-section";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-input/paper-input";
@ -88,7 +88,7 @@ export class ZHAClusterCommands extends LitElement {
</div>
<span slot="introduction">View and issue cluster commands.</span>
<paper-card class="content">
<ha-card class="content">
<div class="command-picker">
<paper-dropdown-menu
label="Commands of the selected cluster"
@ -149,7 +149,7 @@ export class ZHAClusterCommands extends LitElement {
</div>
`
: ""}
</paper-card>
</ha-card>
</ha-config-section>
`;
}
@ -215,8 +215,7 @@ export class ZHAClusterCommands extends LitElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}

View File

@ -1,7 +1,7 @@
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import "../../../components/ha-card";
import "../ha-config-section";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";

View File

@ -1,8 +1,8 @@
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import "../../../components/entity/state-badge";
import "../../../components/ha-card";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-icon-item";
@ -108,7 +108,7 @@ class ZHADeviceCard extends LitElement {
protected render(): TemplateResult | void {
return html`
<paper-card heading="${this.isJoinPage ? this.device!.name : ""}">
<ha-card header="${this.isJoinPage ? this.device!.name : ""}">
${
this.isJoinPage
? html`
@ -256,7 +256,7 @@ class ZHADeviceCard extends LitElement {
: ""
}
</div>
</paper-card>
</ha-card>
`;
}
@ -326,7 +326,7 @@ class ZHADeviceCard extends LitElement {
padding: 4px;
justify-content: left;
}
paper-card {
ha-card {
flex: 1 0 100%;
padding-bottom: 10px;
min-width: 425px;

View File

@ -1,8 +1,8 @@
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import "../../../components/ha-card";
import "../ha-config-section";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import {
@ -50,7 +50,7 @@ export class ZHANetwork extends LitElement {
</div>
<span slot="introduction">Commands that affect entire network</span>
<paper-card class="content">
<ha-card class="content">
<div class="card-actions">
<mwc-button @click=${this._onAddDevicesClick}>
Add Devices
@ -66,7 +66,7 @@ export class ZHANetwork extends LitElement {
`
: ""}
</div>
</paper-card>
</ha-card>
</ha-config-section>
`;
}
@ -87,8 +87,7 @@ export class ZHANetwork extends LitElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}

View File

@ -1,10 +1,10 @@
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import "../../../components/ha-card";
import "../ha-config-section";
import "./zha-clusters";
import "./zha-device-card";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
@ -70,7 +70,7 @@ export class ZHANode extends LitElement {
press at ~5 second intervals that keep devices awake while you
interact with them.
</span>
<paper-card class="content">
<ha-card class="content">
<div class="node-picker">
<paper-dropdown-menu
label="Devices"
@ -116,7 +116,7 @@ export class ZHANode extends LitElement {
`
: ""}
${this._selectedDevice ? this._renderClusters() : ""}
</paper-card>
</ha-card>
</ha-config-section>
`;
}
@ -183,8 +183,7 @@ export class ZHANode extends LitElement {
padding-bottom: 16px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}

View File

@ -1,6 +1,5 @@
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-input/paper-input";
@ -15,6 +14,7 @@ import "../../../components/ha-service-description";
import "../../../components/ha-paper-icon-button-arrow-prev";
import "../../../layouts/ha-app-layout";
import "../../../resources/ha-style";
import "../../../components/ha-card";
import "../ha-config-section";
import "../ha-form-style";
@ -53,8 +53,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
padding-right: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}
@ -116,7 +115,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
list of available commands.
</span>
<paper-card class="content">
<ha-card class="content">
<div class="device-picker">
<paper-dropdown-menu dynamic-align="" label="Nodes" class="flex">
<paper-listbox
@ -309,7 +308,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
</div>
</template>
</template>
</paper-card>
</ha-card>
<template is="dom-if" if="[[computeIsNodeSelected(selectedNode)]]">
<!-- Value card -->

View File

@ -1,4 +1,3 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
@ -6,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-card";
import computeStateName from "../../../common/entity/compute_state_name";
@ -17,8 +17,7 @@ class ZwaveGroups extends PolymerElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}
@ -37,7 +36,7 @@ class ZwaveGroups extends PolymerElement {
padding-bottom: 12px;
}
</style>
<paper-card class="content" heading="Node group associations">
<ha-card class="content" header="Node group associations">
<!-- TODO make api for getting groups and members -->
<div class="device-picker">
<paper-dropdown-menu label="Group" dynamic-align="" class="flex">
@ -120,7 +119,7 @@ class ZwaveGroups extends PolymerElement {
</template>
</div>
</template>
</paper-card>
</ha-card>
`;
}

View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -8,6 +7,7 @@ import { EventsMixin } from "../../../mixins/events-mixin";
import isPwa from "../../../common/config/is_pwa";
import "../ha-config-section";
import "../../../components/ha-card";
let registeredDialog = false;
@ -19,8 +19,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}
@ -34,7 +33,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
</style>
<ha-config-section is-wide="[[isWide]]">
<span slot="header">OZW Log</span>
<paper-card>
<ha-card>
<div class="device-picker">
<paper-input label="Number of last log lines." type="number" min="0" max="1000" step="10" value="{{numLogLines}}">
</paper-input>
@ -42,7 +41,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
<div class="card-actions">
<mwc-button raised="true" on-click="_openLogWindow">Load</mwc-button>
<mwc-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</mwc-button>
</paper-card>
</ha-card>
</ha-config-section>
`;
}

View File

@ -1,4 +1,3 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -6,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/buttons/ha-call-api-button";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import "../../../components/ha-card";
import "../ha-config-section";
class ZwaveNetwork extends PolymerElement {
@ -16,8 +16,7 @@ class ZwaveNetwork extends PolymerElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}
@ -57,7 +56,7 @@ class ZwaveNetwork extends PolymerElement {
to figure out.
</span>
<paper-card class="content">
<ha-card class="content">
<div class="card-actions">
<ha-call-service-button
hass="[[hass]]"
@ -193,7 +192,7 @@ class ZwaveNetwork extends PolymerElement {
Save Config
</ha-call-api-button>
</div>
</paper-card>
</ha-card>
</ha-config-section>
`;
}

View File

@ -1,4 +1,3 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-card";
class ZwaveNodeConfig extends PolymerElement {
static get template() {
@ -16,8 +16,7 @@ class ZwaveNodeConfig extends PolymerElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}
@ -36,7 +35,7 @@ class ZwaveNodeConfig extends PolymerElement {
}
</style>
<div class="content">
<paper-card heading="Node config options">
<ha-card header="Node config options">
<template is="dom-if" if="[[_wakeupNode]]">
<div class="card-actions">
<paper-input
@ -159,7 +158,7 @@ class ZwaveNodeConfig extends PolymerElement {
</ha-call-service-button>
</div>
</template>
</paper-card>
</ha-card>
</div>
`;
}

View File

@ -1,4 +1,3 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/buttons/ha-call-api-button";
import "../../../components/ha-card";
class ZwaveNodeProtection extends PolymerElement {
static get template() {
@ -19,8 +19,7 @@ class ZwaveNodeProtection extends PolymerElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}
@ -33,7 +32,7 @@ class ZwaveNodeProtection extends PolymerElement {
</style>
<div class="content">
<paper-card heading="Node protection">
<ha-card header="Node protection">
<div class="device-picker">
<paper-dropdown-menu label="Protection" dynamic-align class="flex" placeholder="{{_loadedProtectionValue}}">
<paper-listbox slot="dropdown-content" selected="{{_selectedProtectionParameter}}">
@ -51,6 +50,7 @@ class ZwaveNodeProtection extends PolymerElement {
Set Protection
</ha-call-service-button>
</div>
</ha-card>
</div>
`;
}

View File

@ -1,4 +1,3 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-card";
class ZwaveUsercodes extends PolymerElement {
static get template() {
@ -16,8 +16,7 @@ class ZwaveUsercodes extends PolymerElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}
@ -31,7 +30,7 @@ class ZwaveUsercodes extends PolymerElement {
}
</style>
<div class="content">
<paper-card heading="Node user codes">
<ha-card header="Node user codes">
<div class="device-picker">
<paper-dropdown-menu
label="Code slot"
@ -83,7 +82,7 @@ class ZwaveUsercodes extends PolymerElement {
</ha-call-service-button>
</div>
</template>
</paper-card>
</ha-card>
</div>
`;
}

View File

@ -1,4 +1,3 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
@ -6,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-card";
class ZwaveValues extends PolymerElement {
static get template() {
@ -15,8 +15,7 @@ class ZwaveValues extends PolymerElement {
margin-top: 24px;
}
paper-card {
display: block;
ha-card {
margin: 0 auto;
max-width: 600px;
}
@ -35,7 +34,7 @@ class ZwaveValues extends PolymerElement {
}
</style>
<div class="content">
<paper-card heading="Node Values">
<ha-card header="Node Values">
<div class="device-picker">
<paper-dropdown-menu label="Value" dynamic-align="" class="flex">
<paper-listbox
@ -48,7 +47,7 @@ class ZwaveValues extends PolymerElement {
</paper-listbox>
</paper-dropdown-menu>
</div>
</paper-card>
</ha-card>
</div>
`;
}

View File

@ -6,8 +6,8 @@ import {
PropertyDeclarations,
TemplateResult,
} from "lit-element";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-spinner/paper-spinner";
import "../../components/ha-card";
import { HomeAssistant } from "../../types";
import {
@ -85,9 +85,9 @@ class SystemHealthCard extends LitElement {
}
return html`
<paper-card heading="System Health">
<ha-card header="System Health">
<div class="card-content">${sections}</div>
</paper-card>
</ha-card>
`;
}
@ -114,10 +114,6 @@ class SystemHealthCard extends LitElement {
static get styles(): CSSResult {
return css`
paper-card {
display: block;
}
table {
width: 100%;
}

View File

@ -6,11 +6,11 @@ import {
PropertyDeclarations,
TemplateResult,
} from "lit-element";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-spinner/paper-spinner";
import "../../components/ha-card";
import "../../components/buttons/ha-call-service-button";
import "../../components/buttons/ha-progress-button";
import { HomeAssistant } from "../../types";
@ -43,7 +43,7 @@ class SystemLogCard extends LitElement {
protected render(): TemplateResult | void {
return html`
<div class="system-log-intro">
<paper-card>
<ha-card>
${this._items === undefined
? html`
<div class="loading-container">
@ -96,7 +96,7 @@ class SystemLogCard extends LitElement {
>
</div>
`}
</paper-card>
</ha-card>
</div>
`;
}
@ -131,8 +131,7 @@ class SystemLogCard extends LitElement {
static get styles(): CSSResult {
return css`
paper-card {
display: block;
ha-card {
padding-top: 16px;
}

View File

@ -2,12 +2,12 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-input/paper-textarea";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-card";
import "../../components/ha-menu-button";
import "../../resources/ha-style";
import "../../util/app-localstorage-document";
@ -29,10 +29,6 @@ class HaPanelDevMqtt extends PolymerElement {
direction: ltr;
}
paper-card {
display: block;
}
mwc-button {
background-color: white;
}
@ -55,7 +51,7 @@ class HaPanelDevMqtt extends PolymerElement {
</app-localstorage-document>
<div class="content">
<paper-card heading="Publish a packet">
<ha-card header="Publish a packet">
<div class="card-content">
<paper-input label="topic" value="{{topic}}"></paper-input>
@ -68,7 +64,7 @@ class HaPanelDevMqtt extends PolymerElement {
<div class="card-actions">
<mwc-button on-click="_publish">Publish</mwc-button>
</div>
</paper-card>
</ha-card>
</div>
</app-header-layout>
`;

View File

@ -8,7 +8,7 @@ import {
property,
} from "lit-element";
import "@polymer/paper-card/paper-card";
import "../../../components/ha-card";
import { LovelaceCard } from "../types";
import { HomeAssistant } from "../../../types";
@ -32,8 +32,8 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
}
return html`
<paper-card
.heading="${this.hass.localize(
<ha-card
.header="${this.hass.localize(
"ui.panel.lovelace.cards.empty_state.title"
)}"
>
@ -51,7 +51,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
</mwc-button>
</a>
</div>
</paper-card>
</header-card>
`;
}

View File

@ -2,7 +2,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-textarea";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-item/paper-item";
@ -12,6 +11,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-menu-button";
import "../../components/ha-card";
import "../../resources/ha-style";
import formatDateTime from "../../common/datetime/format_date_time";
@ -39,8 +39,8 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
margin: 0 auto;
}
paper-card {
display: block;
ha-card {
overflow: hidden;
}
paper-item {
@ -98,7 +98,7 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
</div>
</app-header>
<div class="content">
<paper-card>
<ha-card>
<template is="dom-if" if="[[!_messages.length]]">
<div class="card-content empty">
[[localize('ui.panel.mailbox.empty')]]
@ -120,7 +120,7 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
</paper-item-body>
</paper-item>
</template>
</paper-card>
</ha-card>
</div>
</app-header-layout>
`;

View File

@ -1,9 +1,9 @@
import "@material/mwc-button";
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-spinner/paper-spinner";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-card";
import LocalizeMixin from "../../mixins/localize-mixin";
@ -27,16 +27,13 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
position: absolute;
top: -4px;
}
paper-card {
display: block;
}
.currentPassword {
margin-top: -4px;
}
</style>
<div>
<paper-card
heading="[[localize('ui.panel.profile.change_password.header')]]"
<ha-card
header="[[localize('ui.panel.profile.change_password.header')]]"
>
<div class="card-content">
<template is="dom-if" if="[[_errorMsg]]">
@ -83,7 +80,7 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
>
</template>
</div>
</paper-card>
</ha-card>
</div>
`;
}

View File

@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import { EventsMixin } from "../../mixins/events-mixin";
import LocalizeMixin from "../../mixins/localize-mixin";
import formatDateTime from "../../common/datetime/format_date_time";
import "../../components/ha-card";
import "../../resources/ha-style";
@ -18,9 +19,6 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() {
return html`
<style include="ha-style">
paper-card {
display: block;
}
.card-content {
margin: -1em 0;
}
@ -31,8 +29,8 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
color: var(--primary-text-color);
}
</style>
<paper-card
heading="[[localize('ui.panel.profile.long_lived_access_tokens.header')]]"
<ha-card
header="[[localize('ui.panel.profile.long_lived_access_tokens.header')]]"
>
<div class="card-content">
<p>
@ -65,7 +63,7 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
[[localize('ui.panel.profile.long_lived_access_tokens.create')]]
</mwc-button>
</div>
</paper-card>
</ha-card>
`;
}

View File

@ -1,9 +1,9 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-item/paper-item";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-card";
import "../../resources/ha-style";
@ -31,16 +31,11 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
position: absolute;
top: -4px;
}
paper-card {
display: block;
max-width: 600px;
margin: 16px auto;
}
mwc-button {
margin-right: -0.57em;
}
</style>
<paper-card heading="[[localize('ui.panel.profile.mfa.header')]]">
<ha-card header="[[localize('ui.panel.profile.mfa.header')]]">
<template is="dom-repeat" items="[[mfaModules]]" as="module">
<paper-item>
<paper-item-body two-line="">
@ -59,7 +54,7 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
</template>
</paper-item>
</template>
</paper-card>
</ha-card>
`;
}

View File

@ -1,6 +1,5 @@
import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-item/paper-item";
import "@material/mwc-button";
@ -8,6 +7,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-card";
import "../../components/ha-menu-button";
import "../../resources/ha-style";
@ -58,7 +58,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
</app-header>
<div class="content">
<paper-card heading="[[hass.user.name]]">
<ha-card header="[[hass.user.name]]">
<div class="card-content">
[[localize('ui.panel.profile.current_user', 'fullName',
hass.user.name)]]
@ -87,7 +87,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
>[[localize('ui.panel.profile.logout')]]</mwc-button
>
</div>
</paper-card>
</ha-card>
<template is="dom-if" if="[[_canChangePassword(hass.user)]]">
<ha-change-password-card hass="[[hass]]"></ha-change-password-card>

View File

@ -1,4 +1,3 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { html } from "@polymer/polymer/lib/utils/html-tag";

View File

@ -1,4 +1,3 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { html } from "@polymer/polymer/lib/utils/html-tag";

View File

@ -1,6 +1,5 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/iron-label/iron-label";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";

View File

@ -1,6 +1,8 @@
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-tooltip/paper-tooltip";
import "../../components/ha-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { EventsMixin } from "../../mixins/events-mixin";
@ -17,9 +19,6 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() {
return html`
<style>
paper-card {
display: block;
}
paper-icon-button {
color: var(--primary-text-color);
}
@ -27,9 +26,7 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
color: var(--disabled-text-color);
}
</style>
<paper-card
heading="[[localize('ui.panel.profile.refresh_tokens.header')]]"
>
<ha-card header="[[localize('ui.panel.profile.refresh_tokens.header')]]">
<div class="card-content">
[[localize('ui.panel.profile.refresh_tokens.description')]]
</div>
@ -52,7 +49,7 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
</div>
</ha-settings-row>
</template>
</paper-card>
</ha-card>
`;
}

View File

@ -1,7 +1,6 @@
import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-input/paper-input";
@ -15,6 +14,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-menu-button";
import "../../components/ha-start-voice-button";
import "../../components/ha-card";
import LocalizeMixin from "../../mixins/localize-mixin";
/*
@ -38,9 +38,6 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
max-width: 600px;
margin: 0 auto;
}
paper-card {
display: block;
}
paper-icon-item {
border-top: 1px solid var(--divider-color);
}
@ -95,7 +92,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
</app-header>
<div class="content">
<paper-card>
<ha-card>
<paper-icon-item on-focus="_focusRowInput">
<paper-icon-button
slot="item-icon"
@ -130,7 +127,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
</paper-item-body>
</paper-icon-item>
</template>
</paper-card>
</ha-card>
<div class="tip" hidden$="[[!canListen]]">
[[localize('ui.panel.shopping-list.microphone_tip')]]
</div>