Move UUID to QR code sharing and style up
This commit is contained in:
parent
d892f6bc00
commit
1d10c9d9f7
3 changed files with 18 additions and 17 deletions
|
@ -33,17 +33,7 @@ class BudgetDisplayComponent extends LitElement {
|
|||
|
||||
h3 {
|
||||
font-size: 150%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 80%;
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4:before {
|
||||
content: "ID: ";
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
|
@ -60,7 +50,7 @@ class BudgetDisplayComponent extends LitElement {
|
|||
column-gap: 10px;
|
||||
grid-template: 'now curr' 'of init' / auto 66%;
|
||||
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.money-left {
|
||||
|
@ -171,7 +161,6 @@ class BudgetDisplayComponent extends LitElement {
|
|||
|
||||
return html`
|
||||
<h3>${this.budget.name != '' ? this.budget.name : 'Unnamed budget'}</h3>
|
||||
<h4>${this.budget.uuid}</h4>
|
||||
|
||||
<div
|
||||
class="amounts"
|
||||
|
@ -204,7 +193,7 @@ class BudgetDisplayComponent extends LitElement {
|
|||
<fa-icon name="edit" alt="Rename"></fa-icon>
|
||||
</fa-button>
|
||||
<fa-button @click=${this.toggleShare}>
|
||||
<fa-icon name="qrcode" alt="Share with QR code"></fa-icon>
|
||||
<fa-icon name="share-alt" alt="Share"></fa-icon>
|
||||
</fa-button>
|
||||
<fa-button @click=${this.onRemove}>
|
||||
<fa-icon name="trash" alt="Remove"></fa-icon>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { LitElement, html } from 'lit-element'
|
||||
import { LitElement, html, css } from 'lit-element'
|
||||
import * as QRCode from 'qrcode'
|
||||
|
||||
class BudgetQRComponent extends LitElement {
|
||||
|
@ -12,6 +12,16 @@ class BudgetQRComponent extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
p {
|
||||
font-size: 80%;
|
||||
font-weight: 200;
|
||||
margin: 10px 0;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
|
@ -28,10 +38,11 @@ class BudgetQRComponent extends LitElement {
|
|||
|
||||
render() {
|
||||
if (this.error) {
|
||||
return html`<p>There was an error rendering the QR code.</p>`
|
||||
return html`<p role="alert">There was an error rendering the QR code.</p>`
|
||||
}
|
||||
|
||||
return html`
|
||||
<p role="alert" aria-label="Share this secret with another user:">${this.uuid}</p>
|
||||
<canvas id="${this.uuid}-qr-canvas"></canvas>
|
||||
`
|
||||
}
|
||||
|
|
|
@ -43,7 +43,8 @@ const ICONS = [
|
|||
['trash', '\\f1f8'],
|
||||
['plus', '\\f067'],
|
||||
['arrow-left', '\\f060'],
|
||||
['user-friends', '\\f500']
|
||||
['user-friends', '\\f500'],
|
||||
['share-alt', '\\f1e0']
|
||||
]
|
||||
|
||||
function icon2css(name: string, code: string) {
|
||||
|
|
Reference in a new issue