jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

ha-card migration Step #1 Configuration (#3161)

Browse Source 
* Improvements to ha-card. Better paper-card compatibility

* Remove named slots

* Tweak distance between header and contents

* Further css tweaking

* Convert config dashboard to ha-card

* Convert cloud configuration to ha-card.

* Convert integrations configuration to ha-card.

* Convert user configuration to ha-card.

* Convert core configuration to ha-card

* Convert person, entity and area config to ha-card

* Convert automation and script editor to ha-card

* Convert customization editor to ha-card
This commit is contained in:
Thomas Lovén 2019-05-07 18:26:56 +02:00 committed by Paulus Schoutsen
parent 1223766523
commit 0e044acaa9
33 changed files with 246 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/panels/config/area_registry/ha-config-area-registry.ts
View File

@ -8,7 +8,6 @@ import {
} from "lit-element";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-fab/paper-fab";
import { HomeAssistant } from "../../../types";
@ -19,6 +18,7 @@ import {
deleteAreaRegistryEntry,
createAreaRegistryEntry,
} from "../../../data/area_registry";
import "../../../components/ha-card";
import "../../../layouts/hass-subpage";
import "../../../layouts/hass-loading-screen";
import compare from "../../../common/string/compare";
@ -72,7 +72,7 @@ class HaConfigAreaRegistry extends LitElement {
)}
</a>
</span>
<paper-card>
<ha-card>
${this._items.map((entry) => {
return html`
<paper-item @click=${this._openEditEntry} .entry=${entry}>
@ -96,7 +96,7 @@ class HaConfigAreaRegistry extends LitElement {
</div>
`
: html``}
</paper-card>
</ha-card>
</ha-config-section>
</hass-subpage>
@ -178,10 +178,10 @@ All devices in this area will become unassigned.`)
a {
color: var(--primary-color);
}
paper-card {
display: block;
ha-card {
max-width: 600px;
margin: 16px auto;
overflow: hidden;
}
.empty {
text-align: center;

10
src/panels/config/automation/ha-automation-editor.ts
View File

@ -226,6 +226,9 @@ class HaAutomationEditor extends LitElement {
return [
haStyle,
css`
ha-card {
overflow: hidden;
}
.errors {
padding: 20px;
font-weight: bold;
@ -234,15 +237,12 @@ class HaAutomationEditor extends LitElement {
.content {
padding-bottom: 20px;
}
paper-card {
display: block;
}
.triggers,
.script {
margin-top: -16px;
}
.triggers paper-card,
.script paper-card {
.triggers ha-card,
.script ha-card {
margin-top: 16px;
}
.add-card mwc-button {

10
src/panels/config/automation/ha-automation-picker.js
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-fab/paper-fab";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item-body";
@ -8,6 +7,7 @@ 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 "../../../components/ha-paper-icon-button-arrow-prev";
import "../../../layouts/ha-app-layout";
@ -32,6 +32,10 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
display: block;
}
ha-card {
overflow: hidden;
}
paper-item {
cursor: pointer;
}
@ -91,7 +95,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
</p>
</div>
<paper-card
<ha-card
heading="[[localize('ui.panel.config.automation.picker.pick_automation')]]"
>
<template is="dom-if" if="[[!automations.length]]">
@ -110,7 +114,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
<ha-icon-next></ha-icon-next>
</paper-item>
</template>
</paper-card>
</ha-card>
</ha-config-section>
<paper-fab

12
src/panels/config/cloud/cloud-alexa-pref.ts
View File

@ -7,11 +7,12 @@ import {
css,
} from "lit-element";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-toggle-button/paper-toggle-button";
// tslint:disable-next-line
import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../components/ha-card";
import { fireEvent } from "../../../common/dom/fire_event";
import { HomeAssistant } from "../../../types";
import "./cloud-exposed-entities";
@ -36,7 +37,7 @@ export class CloudAlexaPref extends LitElement {
const enabled = this.cloudStatus!.prefs.alexa_enabled;
return html`
<paper-card heading="Alexa">
<ha-card header="Alexa">
<paper-toggle-button
.checked="${enabled}"
@change="${this._toggleChanged}"
@ -73,7 +74,7 @@ export class CloudAlexaPref extends LitElement {
`
: ""}
</div>
</paper-card>
</ha-card>
`;
}
@ -92,10 +93,11 @@ export class CloudAlexaPref extends LitElement {
a {
color: var(--primary-color);
}
paper-card > paper-toggle-button {
ha-card > paper-toggle-button {
margin: -4px 0;
position: absolute;
right: 8px;
top: 16px;
top: 32px;
}
`;
}

12
src/panels/config/cloud/cloud-google-pref.ts
View File

@ -7,12 +7,13 @@ import {
css,
} from "lit-element";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-toggle-button/paper-toggle-button";
// tslint:disable-next-line
import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../components/buttons/ha-call-api-button";
import "../../../components/ha-card";
import { fireEvent } from "../../../common/dom/fire_event";
import { HomeAssistant } from "../../../types";
import "./cloud-exposed-entities";
@ -41,7 +42,7 @@ export class CloudGooglePref extends LitElement {
} = this.cloudStatus.prefs;
return html`
<paper-card heading="Google Assistant">
<ha-card header="Google Assistant">
<paper-toggle-button
id="google_enabled"
.checked="${google_enabled}"
@ -105,7 +106,7 @@ export class CloudGooglePref extends LitElement {
>Sync devices</ha-call-api-button
>
</div>
</paper-card>
</ha-card>
`;
}
@ -137,10 +138,11 @@ export class CloudGooglePref extends LitElement {
a {
color: var(--primary-color);
}
paper-card > paper-toggle-button {
ha-card > paper-toggle-button {
margin: -4px 0;
position: absolute;
right: 8px;
top: 16px;
top: 32px;
}
ha-call-api-button {
color: var(--primary-color);

19
src/panels/config/cloud/cloud-remote-pref.ts
View File

@ -8,12 +8,13 @@ import {
css,
} from "lit-element";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "@polymer/paper-item/paper-item-body";
// tslint:disable-next-line
import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../components/ha-card";
import { fireEvent } from "../../../common/dom/fire_event";
import { HomeAssistant } from "../../../types";
import {
@ -48,16 +49,16 @@ export class CloudRemotePref extends LitElement {
if (!remote_certificate) {
return html`
<paper-card heading="Remote Control">
<ha-card header="Remote Control">
<div class="preparing">
Remote access is being prepared. We will notify you when it's ready.
</div>
</paper-card>
</ha-card>
`;
}
return html`
<paper-card heading="Remote Control">
<ha-card header="Remote Control">
<paper-toggle-button
.checked="${remote_connected}"
@change="${this._toggleChanged}"
@ -83,7 +84,7 @@ export class CloudRemotePref extends LitElement {
`
: ""}
</div>
</paper-card>
</ha-card>
`;
}
@ -111,19 +112,17 @@ export class CloudRemotePref extends LitElement {
static get styles(): CSSResult {
return css`
paper-card {
display: block;
}
.preparing {
padding: 0 16px 16px;
}
a {
color: var(--primary-color);
}
paper-card > paper-toggle-button {
ha-card > paper-toggle-button {
margin: -4px 0;
position: absolute;
right: 8px;
top: 16px;
top: 32px;
}
.card-actions {
display: flex;

17
src/panels/config/cloud/cloud-webhooks.ts
View File

@ -51,20 +51,18 @@ export class CloudWebhooks extends LitElement {
return html`
${this.renderStyle()}
<ha-card header="Webhooks">
<div class="body">
<div class="card-content">
Anything that is configured to be triggered by a webhook can be given
a publicly accessible URL to allow you to send data back to Home
Assistant from anywhere, without exposing your instance to the
internet.
</div>
${this._renderBody()}
internet. ${this._renderBody()}
<div class="footer">
<a href="https://www.nabucasa.com/config/webhooks" target="_blank">
Learn more about creating webhook-powered automations.
</a>
</div>
</div>
</ha-card>
`;
}
@ -194,15 +192,12 @@ export class CloudWebhooks extends LitElement {
private renderStyle() {
return html`
<style>
.body {
padding: 0 16px 8px;
}
.body-text {
padding: 0 16px;
padding: 8px 0;
}
.webhook {
display: flex;
padding: 4px 16px;
padding: 4px 0;
}
.progress {
margin-right: 16px;
@ -211,7 +206,7 @@ export class CloudWebhooks extends LitElement {
justify-content: center;
}
.footer {
padding: 16px;
padding-top: 16px;
}
.body-text a,
.footer a {

9
src/panels/config/cloud/ha-config-cloud-account.js
View File

@ -1,10 +1,10 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-toggle-button/paper-toggle-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-card";
import "../../../components/buttons/ha-call-api-button";
import "../../../layouts/hass-subpage";
import "../../../resources/ha-style";
@ -41,9 +41,6 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
padding-bottom: 24px;
direction: ltr;
}
paper-card {
display: block;
}
.account-row {
display: flex;
padding: 0 16px;
@ -82,7 +79,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
</p>
</div>
<paper-card heading="Nabu Casa Account">
<ha-card header="Nabu Casa Account">
<div class="account-row">
<paper-item-body two-line="">
[[cloudStatus.email]]
@ -105,7 +102,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
>Sign out</mwc-button
>
</div>
</paper-card>
</ha-card>
</ha-config-section>
<ha-config-section is-wide="[[isWide]]">

10
src/panels/config/cloud/ha-config-cloud-forgot-password.js
View File

@ -1,8 +1,8 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-card";
import "../../../components/buttons/ha-progress-button";
import "../../../layouts/hass-subpage";
import "../../../resources/ha-style";
@ -20,8 +20,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
direction: ltr;
}
paper-card {
display: block;
ha-card {
max-width: 600px;
margin: 0 auto;
margin-top: 24px;
@ -47,9 +46,8 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
</style>
<hass-subpage header="Forgot Password">
<div class="content">
<paper-card>
<ha-card header="Forgot your password">
<div class="card-content">
<h1>Forgot your password?</h1>
<p>
Enter your email address and we will send you a link to reset
your password.
@ -72,7 +70,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
>Send reset email</ha-progress-button
>
</div>
</paper-card>
</ha-card>
</div>
</hass-subpage>
`;

25
src/panels/config/cloud/ha-config-cloud-login.js
View File

@ -1,5 +1,4 @@
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-body";
@ -8,6 +7,7 @@ import "@polymer/paper-ripple/paper-ripple";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-card";
import "../../../components/buttons/ha-progress-button";
import "../../../layouts/hass-subpage";
import "../../../resources/ha-style";
@ -34,14 +34,14 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
[slot="introduction"] a {
color: var(--primary-color);
}
paper-card {
display: block;
}
paper-item {
cursor: pointer;
}
paper-card:last-child {
margin-top: 24px;
ha-card {
overflow: hidden;
}
ha-card .card-header {
margin-bottom: -8px;
}
h1 {
@apply --paper-font-headline;
@ -97,7 +97,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
</p>
</div>
<paper-card hidden$="[[!flashMessage]]">
<ha-card hidden$="[[!flashMessage]]">
<div class="card-content flash-msg">
[[flashMessage]]
<paper-icon-button icon="hass:close" on-click="_dismissFlash"
@ -105,11 +105,10 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
>
<paper-ripple id="flashRipple" noink=""></paper-ripple>
</div>
</paper-card>
</ha-card>
<paper-card>
<ha-card header="Sign in">
<div class="card-content">
<h1>Sign In</h1>
<div class="error" hidden$="[[!_error]]">[[_error]]</div>
<paper-input
label="Email"
@ -142,9 +141,9 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
forgot password?
</button>
</div>
</paper-card>
</ha-card>
<paper-card>
<ha-card>
<paper-item on-click="_handleRegister">
<paper-item-body two-line="">
Start your free 1 month trial
@ -152,7 +151,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</paper-card>
</ha-card>
</ha-config-section>
</div>
</hass-subpage>

13
src/panels/config/cloud/ha-config-cloud-register.js
View File

@ -1,8 +1,8 @@
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-card";
import "../../../components/buttons/ha-progress-button";
import "../../../layouts/hass-subpage";
import "../../../resources/ha-style";
@ -29,15 +29,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
a {
color: var(--primary-color);
}
paper-card {
display: block;
}
paper-item {
cursor: pointer;
}
paper-card:last-child {
margin-top: 24px;
}
h1 {
@apply --paper-font-headline;
margin: 0;
@ -84,10 +78,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
</p>
</div>
<paper-card>
<ha-card header="Create Account">
<div class="card-content">
<div class="header">
<h1>Create Account</h1>
<div class="error" hidden$="[[!_error]]">[[_error]]</div>
</div>
<paper-input autofocus="" id="email" label="Email address" type="email" value="{{email}}" on-keydown="_keyDown" error-message="Invalid email"></paper-input>
@ -97,7 +90,7 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
<ha-progress-button on-click="_handleRegister" progress="[[_requestInProgress]]">Start trial</ha-progress-button>
<button class="link" hidden="[[_requestInProgress]]" on-click="_handleResendVerifyEmail">Resend confirmation email</button>
</div>
</paper-card>
</ha-card>
</ha-config-section>
</div>
</hass-subpage>

20
src/panels/config/core/ha-config-section-core.js
View File

@ -1,9 +1,9 @@
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-card";
import "../../../components/buttons/ha-call-service-button";
import "../../../resources/ha-style";
@ -57,8 +57,8 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
>[[localize('ui.panel.config.core.section.core.introduction')]]</span
>
<paper-card
heading="[[localize('ui.panel.config.core.section.core.validation.heading')]]"
<ha-card
header="[[localize('ui.panel.config.core.section.core.validation.heading')]]"
>
<div class="card-content">
[[localize('ui.panel.config.core.section.core.validation.introduction')]]
@ -91,10 +91,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
<div id="configLog" class="validate-log">[[validateLog]]</div>
</template>
</div>
</paper-card>
</ha-card>
<paper-card
heading="[[localize('ui.panel.config.core.section.core.reloading.heading')]]"
<ha-card
header="[[localize('ui.panel.config.core.section.core.reloading.heading')]]"
>
<div class="card-content">
[[localize('ui.panel.config.core.section.core.reloading.introduction')]]
@ -128,10 +128,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
>[[localize('ui.panel.config.core.section.core.reloading.script')]]
</ha-call-service-button>
</div>
</paper-card>
</ha-card>
<paper-card
heading="[[localize('ui.panel.config.core.section.core.server_management.heading')]]"
<ha-card
header="[[localize('ui.panel.config.core.section.core.server_management.heading')]]"
>
<div class="card-content">
[[localize('ui.panel.config.core.section.core.server_management.introduction')]]
@ -152,7 +152,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
>[[localize('ui.panel.config.core.section.core.server_management.stop')]]
</ha-call-service-button>
</div>
</paper-card>
</ha-card>
</ha-config-section>
`;
}

16
src/panels/config/dashboard/ha-config-dashboard.js
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 "@polymer/iron-icon/iron-icon";
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 "../../../components/ha-menu-button";
import "../../../components/ha-icon-next";
@ -25,12 +25,12 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
static get template() {
return html`
<style include="iron-flex ha-style">
ha-card {
overflow: hidden;
}
.content {
padding-bottom: 32px;
}
paper-card {
display: block;
}
a {
text-decoration: none;
color: var(--primary-text-color);
@ -51,7 +51,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
<span slot="introduction">[[localize('ui.panel.config.introduction')]]</span>
<template is="dom-if" if="[[computeIsLoaded(hass, 'cloud')]]">
<paper-card>
<ha-card>
<a href='/config/cloud' tabindex="-1">
<paper-item>
<paper-item-body two-line="">
@ -69,11 +69,11 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</paper-card>
</ha-card>
</a>
</template>
<paper-card>
<ha-card>
<a href='/config/integrations/dashboard' tabindex="-1">
<paper-item>
<paper-item-body two-line>
@ -97,7 +97,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
</paper-card>
</ha-card>
<ha-config-navigation hass="[[hass]]"></ha-config-navigation>
</ha-config-section>

10
src/panels/config/dashboard/ha-config-navigation.js
View File

@ -1,5 +1,4 @@
import "@polymer/iron-icon/iron-icon";
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";
@ -10,6 +9,7 @@ import LocalizeMixin from "../../../mixins/localize-mixin";
import isComponentLoaded from "../../../common/config/is_component_loaded";
import "../../../components/ha-card";
import "../../../components/ha-icon-next";
const CORE_PAGES = ["core", "customize", "entity_registry", "area_registry"];
@ -21,14 +21,14 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
static get template() {
return html`
<style include="iron-flex">
paper-card {
display: block;
ha-card {
overflow: hidden;
}
paper-item {
cursor: pointer;
}
</style>
<paper-card>
<ha-card>
<template is="dom-repeat" items="[[pages]]">
<template is="dom-if" if="[[_computeLoaded(hass, item)]]">
<paper-item on-click="_navigate">
@ -40,7 +40,7 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
</paper-item>
</template>
</template>
</paper-card>
</ha-card>
`;
}

10
src/panels/config/entity_registry/ha-config-entity-registry.ts
View File

@ -8,7 +8,6 @@ import {
} from "lit-element";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-card/paper-card";
import { HomeAssistant } from "../../../types";
import {
@ -20,6 +19,7 @@ import {
} from "../../../data/entity_registry";
import "../../../layouts/hass-subpage";
import "../../../layouts/hass-loading-screen";
import "../../../components/ha-card";
import "../../../components/ha-icon";
import compare from "../../../common/string/compare";
import domainIcon from "../../../common/entity/domain_icon";
@ -77,7 +77,7 @@ class HaConfigEntityRegistry extends LitElement {
)}
</a>
</span>
<paper-card>
<ha-card>
${this._items.map((entry) => {
const state = this.hass!.states[entry.entity_id];
return html`
@ -103,7 +103,7 @@ class HaConfigEntityRegistry extends LitElement {
</paper-icon-item>
`;
})}
</paper-card>
</ha-card>
</ha-config-section>
</hass-subpage>
`;
@ -162,9 +162,9 @@ Deleting an entry will not remove the entity from Home Assistant. To do this, yo
a {
color: var(--primary-color);
}
paper-card {
display: block;
ha-card {
direction: ltr;
overflow: hidden;
}
paper-icon-item {
cursor: pointer;

9
src/panels/config/ha-entity-config.js
View File

@ -1,11 +1,11 @@
import "@material/mwc-button";
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";
import "@polymer/paper-spinner/paper-spinner";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../components/ha-card";
import computeStateName from "../../common/entity/compute_state_name";
@ -13,8 +13,7 @@ class HaEntityConfig extends PolymerElement {
static get template() {
return html`
<style include="iron-flex ha-style">
paper-card {
display: block;
ha-card {
direction: ltr;
}
@ -38,7 +37,7 @@ class HaEntityConfig extends PolymerElement {
@apply --layout-justified;
}
</style>
<paper-card>
<ha-card>
<div class="card-content">
<div class="device-picker">
<paper-dropdown-menu
@ -89,7 +88,7 @@ class HaEntityConfig extends PolymerElement {
>
</template>
</div>
</paper-card>
</ha-card>
`;
}

8
src/panels/config/integrations/ha-ce-entities-card.js
View File

@ -1,9 +1,9 @@
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
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 "../../../layouts/hass-subpage";
import EventsMixin from "../../../mixins/events-mixin";
@ -19,7 +19,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
static get template() {
return html`
<style>
paper-card {
ha-card {
flex: 1 0 100%;
padding-bottom: 8px;
}
@ -29,7 +29,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
padding-bottom: 4px;
}
</style>
<paper-card heading="[[heading]]">
<ha-card header="[[heading]]">
<template is="dom-repeat" items="[[entities]]" as="entity">
<paper-icon-item on-click="_openMoreInfo">
<state-badge
@ -42,7 +42,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
</paper-item-body>
</paper-icon-item>
</template>
</paper-card>
</ha-card>
`;
}

16
src/panels/config/integrations/ha-config-entries-dashboard.js
View File

@ -2,13 +2,13 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-tooltip/paper-tooltip";
import "@material/mwc-button";
import "@polymer/paper-fab/paper-fab";
import "@polymer/paper-card/paper-card";
import "@polymer/iron-icon/iron-icon";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-card";
import "../../../components/entity/ha-state-icon";
import "../../../layouts/hass-subpage";
import "../../../resources/ha-style";
@ -34,13 +34,13 @@ class HaConfigManagerDashboard extends LocalizeMixin(
static get template() {
return html`
<style include="iron-flex ha-style">
ha-card {
overflow: hidden;
}
mwc-button {
top: 3px;
margin-right: -0.57em;
}
paper-card:last-child {
margin-top: 12px;
}
.config-entry-row {
display: flex;
padding: 0 16px;
@ -84,7 +84,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
<span slot="header"
>[[localize('ui.panel.config.integrations.discovered')]]</span
>
<paper-card>
<ha-card>
<template is="dom-repeat" items="[[progress]]">
<div class="config-entry-row">
<paper-item-body>
@ -95,7 +95,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
>
</div>
</template>
</paper-card>
</ha-card>
</ha-config-section>
</template>
@ -103,7 +103,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
<span slot="header"
>[[localize('ui.panel.config.integrations.configured')]]</span
>
<paper-card>
<ha-card>
<template is="dom-if" if="[[!entries.length]]">
<div class="config-entry-row">
<paper-item-body two-line>
@ -140,7 +140,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
</paper-item>
</a>
</template>
</paper-card>
</ha-card>
</ha-config-section>
<paper-fab

1
src/panels/config/integrations/ha-config-entry-page.js
View File

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

8
src/panels/config/integrations/ha-device-card.js
View File

@ -1,12 +1,12 @@
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
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";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-card";
import "../../../layouts/hass-subpage";
import EventsMixin from "../../../mixins/events-mixin";
@ -33,7 +33,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
max-height: 225px;
overflow: auto;
}
paper-card {
ha-card {
flex: 1 0 100%;
padding-bottom: 10px;
min-width: 0;
@ -61,7 +61,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
color: var(--secondary-text-color);
}
</style>
<paper-card heading="[[device.name]]">
<ha-card header="[[device.name]]">
<div class="card-content">
<!--
<h1>[[configEntry.title]] ([[_computeIntegrationTitle(localize, configEntry.domain)]])</h1>
@ -125,7 +125,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
</paper-icon-item>
</template>
</div>
</paper-card>
</ha-card>
`;
}

6
src/panels/config/js/automation.js
View File

@ -1,8 +1,8 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import "../ha-config-section";
import "../../../components/ha-card";
import Trigger from "./trigger/index";
import Condition from "./condition/index";
@ -50,7 +50,7 @@ export default class Automation extends Component {
<span slot="introduction">
{localize("ui.panel.config.automation.editor.introduction")}
</span>
<paper-card>
<ha-card>
<div class="card-content">
<paper-input
label={localize("ui.panel.config.automation.editor.alias")}
@ -59,7 +59,7 @@ export default class Automation extends Component {
onvalue-changed={this.onChange}
/>
</div>
</paper-card>
</ha-card>
</ha-config-section>
<ha-config-section is-wide={isWide}>

8
src/panels/config/js/condition/condition_row.js
View File

@ -1,9 +1,9 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-menu-button/paper-menu-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-item/paper-item";
import "../../../../components/ha-card";
import ConditionEdit from "./condition_edit";
@ -29,7 +29,8 @@ export default class ConditionRow extends Component {
render(props) {
return (
<paper-card>
<ha-card>
<div class="card-content">
<div class="card-menu">
<paper-menu-button
no-animations
@ -55,10 +56,9 @@ export default class ConditionRow extends Component {
</paper-listbox>
</paper-menu-button>
</div>
<div class="card-content">
<ConditionEdit {...props} />
</div>
</paper-card>
</ha-card>
);
}
}

6
src/panels/config/js/condition/index.js
View File

@ -1,6 +1,6 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@material/mwc-button";
import "../../../../components/ha-card";
import ConditionRow from "./condition_row";
@ -44,13 +44,13 @@ export default class Condition extends Component {
localize={localize}
/>
))}
<paper-card>
<ha-card>
<div class="card-actions add-card">
<mwc-button onTap={this.addCondition}>
{localize("ui.panel.config.automation.editor.conditions.add")}
</mwc-button>
</div>
</paper-card>
</ha-card>
</div>
);
}

6
src/panels/config/js/script.js
View File

@ -1,8 +1,8 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import "../ha-config-section";
import "../../../components/ha-card";
import Script from "./script/index";
@ -36,7 +36,7 @@ export default class ScriptEditor extends Component {
<span slot="introduction">
Use scripts to execute a sequence of actions.
</span>
<paper-card>
<ha-card>
<div class="card-content">
<paper-input
label="Name"
@ -45,7 +45,7 @@ export default class ScriptEditor extends Component {
onvalue-changed={this.onChange}
/>
</div>
</paper-card>
</ha-card>
</ha-config-section>
<ha-config-section is-wide={isWide}>

8
src/panels/config/js/script/action_row.js
View File

@ -1,9 +1,9 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-menu-button/paper-menu-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "../../../../components/ha-card";
import ActionEdit from "./action_edit";
@ -29,7 +29,8 @@ export default class Action extends Component {
render(props) {
return (
<paper-card>
<ha-card>
<div class="card-content">
<div class="card-menu">
<paper-menu-button
no-animations
@ -55,10 +56,9 @@ export default class Action extends Component {
</paper-listbox>
</paper-menu-button>
</div>
<div class="card-content">
<ActionEdit {...props} />
</div>
</paper-card>
</ha-card>
);
}
}

6
src/panels/config/js/script/index.js
View File

@ -1,6 +1,6 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@material/mwc-button";
import "../../../../components/ha-card";
import ActionRow from "./action_row";
@ -44,13 +44,13 @@ export default class Script extends Component {
localize={localize}
/>
))}
<paper-card>
<ha-card>
<div class="card-actions add-card">
<mwc-button onTap={this.addAction}>
{localize("ui.panel.config.automation.editor.actions.add")}
</mwc-button>
</div>
</paper-card>
</ha-card>
</div>
);
}

6
src/panels/config/js/trigger/index.js
View File

@ -1,6 +1,6 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@material/mwc-button";
import "../../../../components/ha-card";
import TriggerRow from "./trigger_row";
import StateTrigger from "./state";
@ -45,13 +45,13 @@ export default class Trigger extends Component {
localize={localize}
/>
))}
<paper-card>
<ha-card>
<div class="card-actions add-card">
<mwc-button onTap={this.addTrigger}>
{localize("ui.panel.config.automation.editor.triggers.add")}
</mwc-button>
</div>
</paper-card>
</ha-card>
</div>
);
}

8
src/panels/config/js/trigger/trigger_row.js
View File

@ -1,9 +1,9 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-menu-button/paper-menu-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "../../../../components/ha-card";
import TriggerEdit from "./trigger_edit";
@ -29,7 +29,8 @@ export default class TriggerRow extends Component {
render(props) {
return (
<paper-card>
<ha-card>
<div class="card-content">
<div class="card-menu">
<paper-menu-button
no-animations
@ -55,10 +56,9 @@ export default class TriggerRow extends Component {
</paper-listbox>
</paper-menu-button>
</div>
<div class="card-content">
<TriggerEdit {...props} />
</div>
</paper-card>
</ha-card>
);
}
}

16
src/panels/config/person/ha-config-person.ts
View File

@ -8,7 +8,6 @@ import {
} from "lit-element";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-fab/paper-fab";
import { HomeAssistant } from "../../../types";
@ -19,6 +18,7 @@ import {
deletePerson,
createPerson,
} from "../../../data/person";
import "../../../components/ha-card";
import "../../../layouts/hass-subpage";
import "../../../layouts/hass-loading-screen";
import compare from "../../../common/string/compare";
@ -70,7 +70,7 @@ class HaConfigPerson extends LitElement {
`
: ""}
</span>
<paper-card class="storage">
<ha-card class="storage">
${this._storageItems.map((entry) => {
return html`
<paper-item @click=${this._openEditEntry} .entry=${entry}>
@ -90,10 +90,10 @@ class HaConfigPerson extends LitElement {
</div>
`
: html``}
</paper-card>
</ha-card>
${this._configItems.length > 0
? html`
<paper-card heading="Configuration.yaml persons">
<ha-card header="Configuration.yaml persons">
${this._configItems.map((entry) => {
return html`
<paper-item>
@ -103,7 +103,7 @@ class HaConfigPerson extends LitElement {
</paper-item>
`;
})}
</paper-card>
</ha-card>
`
: ""}
</ha-config-section>
@ -205,10 +205,10 @@ All devices belonging to this person will become unassigned.`)
a {
color: var(--primary-color);
}
paper-card {
display: block;
ha-card {
max-width: 600px;
margin: 16px auto;
overflow: hidden;
}
.empty {
text-align: center;
@ -218,7 +218,7 @@ All devices belonging to this person will become unassigned.`)
padding-top: 4px;
padding-bottom: 4px;
}
paper-card.storage paper-item {
ha-card.storage paper-item {
cursor: pointer;
}
paper-fab {

7
src/panels/config/script/ha-script-editor.js
View File

@ -39,15 +39,12 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
.content {
padding-bottom: 20px;
}
paper-card {
display: block;
}
.triggers,
.script {
margin-top: -16px;
}
.triggers paper-card,
.script paper-card {
.triggers ha-card,
.script ha-card {
margin-top: 16px;
}
.add-card mwc-button {

10
src/panels/config/script/ha-script-picker.js
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-fab/paper-fab";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item-body";
@ -11,6 +10,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../layouts/ha-app-layout";
import "../../../components/ha-card";
import "../../../components/ha-icon-next";
import "../../../components/ha-paper-icon-button-arrow-prev";
@ -32,6 +32,10 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
display: block;
}
ha-card {
overflow: hidden;
}
paper-item {
cursor: pointer;
}
@ -88,7 +92,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
to make sure that you have configured Home Assistant correctly.
</div>
<paper-card heading="Pick script to edit">
<ha-card header="Pick script to edit">
<template is="dom-if" if="[[!scripts.length]]">
<div class="card-content">
<p>We couldn't find any editable scripts.</p>
@ -103,7 +107,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
<ha-icon-next></ha-icon-next>
</paper-item>
</template>
</paper-card>
</ha-card>
</ha-config-section>
<paper-fab

10
src/panels/config/users/ha-config-user-picker.js
View File

@ -1,12 +1,12 @@
import "@polymer/paper-fab/paper-fab";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item-body";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../layouts/hass-subpage";
import "../../../components/ha-icon-next";
import "../../../components/ha-card";
import LocalizeMixin from "../../../mixins/localize-mixin";
import NavigateMixin from "../../../mixins/navigate-mixin";
@ -47,10 +47,10 @@ class HaUserPicker extends EventsMixin(
left: 24px;
}
paper-card {
display: block;
ha-card {
max-width: 600px;
margin: 16px auto;
overflow: hidden;
}
a {
text-decoration: none;
@ -59,7 +59,7 @@ class HaUserPicker extends EventsMixin(
</style>
<hass-subpage header="[[localize('ui.panel.config.users.picker.title')]]">
<paper-card>
<ha-card>
<template is="dom-repeat" items="[[users]]" as="user">
<a href="[[_computeUrl(user)]]">
<paper-item>
@ -76,7 +76,7 @@ class HaUserPicker extends EventsMixin(
</paper-item>
</a>
</template>
</paper-card>
</ha-card>
<paper-fab
is-wide$="[[isWide]]"

18
src/panels/config/users/ha-user-editor.ts
View File

@ -176,23 +176,15 @@ class HaUserEditor extends LitElement {
return [
haStyle,
css`
.card-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
ha-card {
display: block;
max-width: 600px;
margin: 0 auto 16px;
}
ha-card:first-child {
margin-top: 16px;
}
ha-card:last-child {
margin-bottom: 16px;
}
.card-content {
padding: 0 16px 16px;
}
.card-actions {
padding: 0 8px;
}
hass-subpage ha-card:first-of-type {
direction: ltr;
}