mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 10:16:46 +00:00
Always show QR code, and with white bg (#11434)
This commit is contained in:
parent
e8ba349447
commit
eddb392ad0
@ -168,6 +168,7 @@
|
|||||||
"@types/leaflet-draw": "^1",
|
"@types/leaflet-draw": "^1",
|
||||||
"@types/marked": "^2",
|
"@types/marked": "^2",
|
||||||
"@types/mocha": "^8",
|
"@types/mocha": "^8",
|
||||||
|
"@types/qrcode": "^1.4.2",
|
||||||
"@types/sortablejs": "^1",
|
"@types/sortablejs": "^1",
|
||||||
"@types/webspeechapi": "^0.0.29",
|
"@types/webspeechapi": "^0.0.29",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.32.0",
|
"@typescript-eslint/eslint-plugin": "^4.32.0",
|
||||||
|
@ -1,6 +1,13 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
import {
|
||||||
|
css,
|
||||||
|
CSSResultGroup,
|
||||||
|
html,
|
||||||
|
LitElement,
|
||||||
|
PropertyValues,
|
||||||
|
TemplateResult,
|
||||||
|
} from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { fireEvent } from "../../../common/dom/fire_event";
|
import { fireEvent } from "../../../common/dom/fire_event";
|
||||||
import { createCloseHeading } from "../../../components/ha-dialog";
|
import { createCloseHeading } from "../../../components/ha-dialog";
|
||||||
@ -121,16 +128,9 @@ class DialogTagDetail
|
|||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
${this._qrCode
|
||||||
<div id="qr">
|
? html` <div id="qr">${this._qrCode}</div> `
|
||||||
${this._qrCode
|
: ""}
|
||||||
? this._qrCode
|
|
||||||
: html`
|
|
||||||
<mwc-button @click=${this._generateQR}
|
|
||||||
>Generate QR code
|
|
||||||
</mwc-button>
|
|
||||||
`}
|
|
||||||
</div>
|
|
||||||
`
|
`
|
||||||
: ``}
|
: ``}
|
||||||
</div>
|
</div>
|
||||||
@ -170,6 +170,11 @@ class DialogTagDetail
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected override firstUpdated(changedProps: PropertyValues): void {
|
||||||
|
super.firstUpdated(changedProps);
|
||||||
|
this._generateQR();
|
||||||
|
}
|
||||||
|
|
||||||
private _valueChanged(ev: CustomEvent) {
|
private _valueChanged(ev: CustomEvent) {
|
||||||
const configValue = (ev.target as any).configValue;
|
const configValue = (ev.target as any).configValue;
|
||||||
|
|
||||||
@ -225,6 +230,9 @@ class DialogTagDetail
|
|||||||
{
|
{
|
||||||
width: 180,
|
width: 180,
|
||||||
errorCorrectionLevel: "Q",
|
errorCorrectionLevel: "Q",
|
||||||
|
color: {
|
||||||
|
light: "#fff",
|
||||||
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
const context = canvas.getContext("2d");
|
const context = canvas.getContext("2d");
|
||||||
|
@ -65,7 +65,7 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
|
|||||||
|
|
||||||
private async _generateQR() {
|
private async _generateQR() {
|
||||||
const qrcode = await import("qrcode");
|
const qrcode = await import("qrcode");
|
||||||
const canvas = await qrcode.toCanvas(this._params?.token, {
|
const canvas = await qrcode.toCanvas(this._params!.token, {
|
||||||
width: 180,
|
width: 180,
|
||||||
errorCorrectionLevel: "Q",
|
errorCorrectionLevel: "Q",
|
||||||
});
|
});
|
||||||
|
10
yarn.lock
10
yarn.lock
@ -4016,6 +4016,15 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"@types/qrcode@npm:^1.4.2":
|
||||||
|
version: 1.4.2
|
||||||
|
resolution: "@types/qrcode@npm:1.4.2"
|
||||||
|
dependencies:
|
||||||
|
"@types/node": "*"
|
||||||
|
checksum: 7ac58687aacc688b83dde43dc349dc42106c6c382b62eb1256e35c6cb7de45e79ef8e917e05b02a81272cd0c1ff21147307244fd57401ba19314851f30636283
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"@types/qs@npm:*":
|
"@types/qs@npm:*":
|
||||||
version: 6.9.5
|
version: 6.9.5
|
||||||
resolution: "@types/qs@npm:6.9.5"
|
resolution: "@types/qs@npm:6.9.5"
|
||||||
@ -9121,6 +9130,7 @@ fsevents@^1.2.7:
|
|||||||
"@types/leaflet-draw": ^1
|
"@types/leaflet-draw": ^1
|
||||||
"@types/marked": ^2
|
"@types/marked": ^2
|
||||||
"@types/mocha": ^8
|
"@types/mocha": ^8
|
||||||
|
"@types/qrcode": ^1.4.2
|
||||||
"@types/sortablejs": ^1
|
"@types/sortablejs": ^1
|
||||||
"@types/webspeechapi": ^0.0.29
|
"@types/webspeechapi": ^0.0.29
|
||||||
"@typescript-eslint/eslint-plugin": ^4.32.0
|
"@typescript-eslint/eslint-plugin": ^4.32.0
|
||||||
|
Loading…
x
Reference in New Issue
Block a user