mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-11 03:16:34 +00:00
Convert ha-store-auth-card
to Lit/TS/ha-card (#9300)
This commit is contained in:
parent
2aa8f5b352
commit
51a693badf
@ -71,7 +71,6 @@
|
||||
"@polymer/iron-label": "^3.0.1",
|
||||
"@polymer/iron-overlay-behavior": "^3.0.2",
|
||||
"@polymer/iron-resizable-behavior": "^3.0.1",
|
||||
"@polymer/paper-card": "^3.0.1",
|
||||
"@polymer/paper-checkbox": "^3.1.0",
|
||||
"@polymer/paper-dialog": "^3.0.1",
|
||||
"@polymer/paper-dialog-behavior": "^3.0.1",
|
||||
|
@ -1,74 +0,0 @@
|
||||
import "@polymer/paper-card/paper-card";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { enableWrite } from "../common/auth/token_storage";
|
||||
import LocalizeMixin from "../mixins/localize-mixin";
|
||||
import "../styles/polymer-ha-style";
|
||||
|
||||
class HaStoreAuth extends LocalizeMixin(PolymerElement) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="ha-style">
|
||||
paper-card {
|
||||
position: fixed;
|
||||
padding: 8px 0;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
text-align: right;
|
||||
border-top: 0;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
:host(.small) paper-card {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
<paper-card elevation="4">
|
||||
<div class="card-content">[[localize('ui.auth_store.ask')]]</div>
|
||||
<div class="card-actions">
|
||||
<mwc-button on-click="_done"
|
||||
>[[localize('ui.auth_store.decline')]]</mwc-button
|
||||
>
|
||||
<mwc-button raised on-click="_save"
|
||||
>[[localize('ui.auth_store.confirm')]]</mwc-button
|
||||
>
|
||||
</div>
|
||||
</paper-card>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
};
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
this.classList.toggle("small", window.innerWidth < 600);
|
||||
}
|
||||
|
||||
_save() {
|
||||
enableWrite();
|
||||
this._done();
|
||||
}
|
||||
|
||||
_done() {
|
||||
const card = this.shadowRoot.querySelector("paper-card");
|
||||
card.style.transition = "bottom .25s";
|
||||
card.style.bottom = `-${card.offsetHeight + 8}px`;
|
||||
setTimeout(() => this.parentNode.removeChild(this), 300);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-store-auth-card", HaStoreAuth);
|
75
src/dialogs/ha-store-auth-card.ts
Normal file
75
src/dialogs/ha-store-auth-card.ts
Normal file
@ -0,0 +1,75 @@
|
||||
import { LitElement, TemplateResult, html, css } from "lit";
|
||||
import { property } from "lit/decorators";
|
||||
import { enableWrite } from "../common/auth/token_storage";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "../components/ha-card";
|
||||
import type { HaCard } from "../components/ha-card";
|
||||
import "@material/mwc-button/mwc-button";
|
||||
|
||||
class HaStoreAuth extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-card>
|
||||
<div class="card-content">
|
||||
${this.hass.localize("ui.auth_store.ask")}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<mwc-button @click=${this._dismiss}>
|
||||
${this.hass.localize("ui.auth_store.decline")}
|
||||
</mwc-button>
|
||||
<mwc-button raised @click=${this._save}>
|
||||
${this.hass.localize("ui.auth_store.confirm")}
|
||||
</mwc-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.classList.toggle("small", window.innerWidth < 600);
|
||||
}
|
||||
|
||||
private _save(): void {
|
||||
enableWrite();
|
||||
this._dismiss();
|
||||
}
|
||||
|
||||
private _dismiss(): void {
|
||||
const card = this.shadowRoot!.querySelector("ha-card") as HaCard;
|
||||
card.style.bottom = `-${card.offsetHeight + 8}px`;
|
||||
setTimeout(() => this.parentNode!.removeChild(this), 300);
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-card {
|
||||
position: fixed;
|
||||
padding: 8px 0;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
transition: bottom 0.25s;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
text-align: right;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
:host(.small) ha-card {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-store-auth-card", HaStoreAuth);
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-store-auth-card": HaStoreAuth;
|
||||
}
|
||||
}
|
@ -32,8 +32,8 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
|
||||
.then(() => import("../dialogs/ha-store-auth-card"))
|
||||
.then(() => {
|
||||
const el = document.createElement("ha-store-auth-card");
|
||||
this.shadowRoot!.appendChild(el);
|
||||
this.provideHass(el);
|
||||
this.shadowRoot!.appendChild(el);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
12
yarn.lock
12
yarn.lock
@ -2104,7 +2104,7 @@
|
||||
"@polymer/iron-meta" "^3.0.0-pre.26"
|
||||
"@polymer/polymer" "^3.0.0"
|
||||
|
||||
"@polymer/iron-image@^3.0.0-pre.26", "@polymer/iron-image@^3.0.1":
|
||||
"@polymer/iron-image@^3.0.1":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@polymer/iron-image/-/iron-image-3.0.2.tgz#425ee6269634e024dbea726a91a61724ae4402b6"
|
||||
integrity sha512-VyYtnewGozDb5sUeoLR1OvKzlt5WAL6b8Od7fPpio5oYL+9t061/nTV8+ZMrpMgF2WgB0zqM/3K53o3pbK5v8Q==
|
||||
@ -2226,16 +2226,6 @@
|
||||
"@polymer/paper-ripple" "^3.0.0-pre.26"
|
||||
"@polymer/polymer" "^3.0.0"
|
||||
|
||||
"@polymer/paper-card@^3.0.1":
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@polymer/paper-card/-/paper-card-3.0.1.tgz#fb5960b3e55fab56d20b7c1c3dee08f0d052ff2a"
|
||||
integrity sha512-ZYzfA4kzP9niRO22wSOBL2RS+URZNUP5XmUCwN91fYPIGO0Qbimh7d1O2HpJD4cRCZhvGYn2CJMDMVmDm35vIg==
|
||||
dependencies:
|
||||
"@polymer/iron-flex-layout" "^3.0.0-pre.26"
|
||||
"@polymer/iron-image" "^3.0.0-pre.26"
|
||||
"@polymer/paper-styles" "^3.0.0-pre.26"
|
||||
"@polymer/polymer" "^3.0.0"
|
||||
|
||||
"@polymer/paper-checkbox@^3.1.0":
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@polymer/paper-checkbox/-/paper-checkbox-3.1.0.tgz#66b903ae5814db237d027deb4a3f3430f48d905b"
|
||||
|
Loading…
x
Reference in New Issue
Block a user