mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-19 11:43:35 +00:00
Clean up QR Codes
This commit is contained in:
parent
5c5152ae85
commit
2fba7a8c77
@ -6,6 +6,7 @@
|
|||||||
- [ ] Show more link on long notes (rather than just an ellipsis)
|
- [ ] Show more link on long notes (rather than just an ellipsis)
|
||||||
- [ ] Show popover on delayed hover rather than click (on mobile, keep it click)
|
- [ ] Show popover on delayed hover rather than click (on mobile, keep it click)
|
||||||
- [ ] QR code component that sizes input to qr code width to make it tidy
|
- [ ] QR code component that sizes input to qr code width to make it tidy
|
||||||
|
- [ ] Auto-follow hodlbod and fiatjaf, auto join relay when creating new account
|
||||||
|
|
||||||
# Image uploads
|
# Image uploads
|
||||||
|
|
||||||
|
@ -24,45 +24,45 @@
|
|||||||
import {loadAppData} from "src/app"
|
import {loadAppData} from "src/app"
|
||||||
import alerts from "src/app/alerts"
|
import alerts from "src/app/alerts"
|
||||||
import {modal, routes, menuIsOpen, logUsage} from "src/app/ui"
|
import {modal, routes, menuIsOpen, logUsage} from "src/app/ui"
|
||||||
import AddRelay from "src/views/relays/AddRelay.svelte"
|
import Anchor from "src/partials/Anchor.svelte"
|
||||||
import Alerts from "src/views/alerts/Alerts.svelte"
|
import Content from "src/partials/Content.svelte"
|
||||||
import Anchor from 'src/partials/Anchor.svelte'
|
import EnsureData from "src/partials/EnsureData.svelte"
|
||||||
import Bech32Entity from "src/views/Bech32Entity.svelte"
|
import Modal from "src/partials/Modal.svelte"
|
||||||
import ChatDetail from "src/views/chat/ChatDetail.svelte"
|
import Spinner from "src/partials/Spinner.svelte"
|
||||||
|
import Alerts from "src/routes/Alerts.svelte"
|
||||||
|
import Bech32Entity from "src/routes/Bech32Entity.svelte"
|
||||||
|
import ChatDetail from "src/routes/ChatDetail.svelte"
|
||||||
|
import ChatList from "src/routes/ChatList.svelte"
|
||||||
|
import Debug from "src/routes/Debug.svelte"
|
||||||
|
import Feeds from "src/routes/Feeds.svelte"
|
||||||
|
import Keys from "src/routes/Keys.svelte"
|
||||||
|
import Login from "src/routes/Login.svelte"
|
||||||
|
import Logout from "src/routes/Logout.svelte"
|
||||||
|
import MessagesDetail from "src/routes/MessagesDetail.svelte"
|
||||||
|
import MessagesList from "src/routes/MessagesList.svelte"
|
||||||
|
import NotFound from "src/routes/NotFound.svelte"
|
||||||
|
import PersonDetail from "src/routes/PersonDetail.svelte"
|
||||||
|
import Search from "src/routes/Search.svelte"
|
||||||
|
import RelayDetail from "src/routes/RelayDetail.svelte"
|
||||||
|
import RelayList from "src/routes/RelayList.svelte"
|
||||||
|
import Profile from "src/views/Profile.svelte"
|
||||||
|
import Settings from "src/views/Settings.svelte"
|
||||||
|
import SideNav from "src/views/SideNav.svelte"
|
||||||
|
import Toast from "src/views/Toast.svelte"
|
||||||
|
import TopNav from "src/views/TopNav.svelte"
|
||||||
import ChatEdit from "src/views/chat/ChatEdit.svelte"
|
import ChatEdit from "src/views/chat/ChatEdit.svelte"
|
||||||
import ChatList from "src/views/chat/ChatList.svelte"
|
|
||||||
import ConnectUser from "src/views/login/ConnectUser.svelte"
|
import ConnectUser from "src/views/login/ConnectUser.svelte"
|
||||||
import Content from 'src/partials/Content.svelte'
|
import PrivKeyLogin from "src/views/login/PrivKeyLogin.svelte"
|
||||||
import Debug from "src/views/Debug.svelte"
|
import PubKeyLogin from "src/views/login/PubKeyLogin.svelte"
|
||||||
import EnsureData from 'src/partials/EnsureData.svelte'
|
import SignUp from "src/views/login/SignUp.svelte"
|
||||||
import Keys from "src/views/Keys.svelte"
|
|
||||||
import Login from "src/views/login/Login.svelte"
|
|
||||||
import Logout from "src/views/login/Logout.svelte"
|
|
||||||
import MessagesDetail from "src/views/messages/MessagesDetail.svelte"
|
|
||||||
import MessagesList from "src/views/messages/MessagesList.svelte"
|
|
||||||
import Modal from 'src/partials/Modal.svelte'
|
|
||||||
import NotFound from "src/views/NotFound.svelte"
|
|
||||||
import NoteCreate from "src/views/notes/NoteCreate.svelte"
|
import NoteCreate from "src/views/notes/NoteCreate.svelte"
|
||||||
import NoteDetail from "src/views/notes/NoteDetail.svelte"
|
import NoteDetail from "src/views/notes/NoteDetail.svelte"
|
||||||
import NotesList from "src/views/notes/NotesList.svelte"
|
|
||||||
import PersonDetail from "src/views/person/PersonDetail.svelte"
|
|
||||||
import PersonList from "src/views/person/PersonList.svelte"
|
import PersonList from "src/views/person/PersonList.svelte"
|
||||||
import PersonSettings from "src/views/person/PersonSettings.svelte"
|
|
||||||
import PersonProfileInfo from "src/views/person/PersonProfileInfo.svelte"
|
import PersonProfileInfo from "src/views/person/PersonProfileInfo.svelte"
|
||||||
|
import PersonSettings from "src/views/person/PersonSettings.svelte"
|
||||||
import PersonShare from "src/views/person/PersonShare.svelte"
|
import PersonShare from "src/views/person/PersonShare.svelte"
|
||||||
import PrivKeyLogin from "src/views/login/PrivKeyLogin.svelte"
|
import AddRelay from "src/views/relays/AddRelay.svelte"
|
||||||
import Profile from "src/views/Profile.svelte"
|
|
||||||
import PubKeyLogin from "src/views/login/PubKeyLogin.svelte"
|
|
||||||
import RelayCard from "src/views/relays/RelayCard.svelte"
|
import RelayCard from "src/views/relays/RelayCard.svelte"
|
||||||
import RelayDetail from "src/views/relays/RelayDetail.svelte"
|
|
||||||
import RelayList from "src/views/relays/RelayList.svelte"
|
|
||||||
import Search from "src/views/search/Search.svelte"
|
|
||||||
import Settings from "src/views/Settings.svelte"
|
|
||||||
import SideNav from 'src/views/SideNav.svelte'
|
|
||||||
import SignUp from "src/views/login/SignUp.svelte"
|
|
||||||
import Spinner from 'src/partials/Spinner.svelte'
|
|
||||||
import Toast from 'src/views/Toast.svelte'
|
|
||||||
import TopNav from 'src/views/TopNav.svelte'
|
|
||||||
|
|
||||||
Object.assign(window, {cmd, database, user, keys, network, pool, sync})
|
Object.assign(window, {cmd, database, user, keys, network, pool, sync})
|
||||||
|
|
||||||
@ -184,7 +184,7 @@
|
|||||||
</Route>
|
</Route>
|
||||||
<Route path="/notes/:activeTab" let:params>
|
<Route path="/notes/:activeTab" let:params>
|
||||||
<EnsureData>
|
<EnsureData>
|
||||||
<NotesList activeTab={params.activeTab} />
|
<Feeds activeTab={params.activeTab} />
|
||||||
</EnsureData>
|
</EnsureData>
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/people/:npub/:activeTab" let:params>
|
<Route path="/people/:npub/:activeTab" let:params>
|
||||||
|
27
src/partials/QRCode.svelte
Normal file
27
src/partials/QRCode.svelte
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import QRCode from 'qrcode'
|
||||||
|
import {onMount} from 'svelte'
|
||||||
|
import Input from 'src/partials/Input.svelte'
|
||||||
|
import {copyToClipboard} from "src/util/html"
|
||||||
|
import {toast} from 'src/app/ui'
|
||||||
|
|
||||||
|
export let code
|
||||||
|
|
||||||
|
let canvas
|
||||||
|
|
||||||
|
const copy = () => {
|
||||||
|
copyToClipboard(code)
|
||||||
|
toast.show("info", "The QR Code has been copied to your clipboard.")
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
QRCode.toCanvas(canvas, code)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="rounded bg-black border border-solid border-medium p-4 flex flex-col gap-4 max-w-sm m-auto">
|
||||||
|
<canvas class="m-auto rounded" bind:this={canvas} />
|
||||||
|
<Input value={code}>
|
||||||
|
<button slot="after" class="fa fa-copy" on:click={copy} />
|
||||||
|
</Input>
|
||||||
|
</div>
|
@ -5,7 +5,7 @@
|
|||||||
import {warn} from 'src/util/logger'
|
import {warn} from 'src/util/logger'
|
||||||
import Content from 'src/partials/Content.svelte'
|
import Content from 'src/partials/Content.svelte'
|
||||||
import NoteDetail from 'src/views/notes/NoteDetail.svelte'
|
import NoteDetail from 'src/views/notes/NoteDetail.svelte'
|
||||||
import Person from 'src/views/person/PersonDetail.svelte'
|
import Person from 'src/routes/PersonDetail.svelte'
|
||||||
import {sampleRelays} from 'src/agent/relays'
|
import {sampleRelays} from 'src/agent/relays'
|
||||||
|
|
||||||
export let entity
|
export let entity
|
@ -1,6 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import cx from 'classnames'
|
import cx from 'classnames'
|
||||||
import QRCode from 'qrcode'
|
|
||||||
import {nip19} from 'nostr-tools'
|
import {nip19} from 'nostr-tools'
|
||||||
import {find, sum, last, whereEq, without, uniq, pluck, reject, propEq} from 'ramda'
|
import {find, sum, last, whereEq, without, uniq, pluck, reject, propEq} from 'ramda'
|
||||||
import {onMount} from 'svelte'
|
import {onMount} from 'svelte'
|
||||||
@ -10,9 +9,10 @@
|
|||||||
import {quantify} from 'hurdak/lib/hurdak'
|
import {quantify} from 'hurdak/lib/hurdak'
|
||||||
import {Tags, findRootId, findReplyId, displayPerson, isLike} from 'src/util/nostr'
|
import {Tags, findRootId, findReplyId, displayPerson, isLike} from 'src/util/nostr'
|
||||||
import {formatTimestamp, now, tryJson, stringToColor, formatSats, fetchJson} from 'src/util/misc'
|
import {formatTimestamp, now, tryJson, stringToColor, formatSats, fetchJson} from 'src/util/misc'
|
||||||
import {extractUrls, copyToClipboard} from "src/util/html"
|
import {extractUrls} from "src/util/html"
|
||||||
import {invoiceAmount} from 'src/util/lightning'
|
import {invoiceAmount} from 'src/util/lightning'
|
||||||
import ImageCircle from 'src/partials/ImageCircle.svelte'
|
import ImageCircle from 'src/partials/ImageCircle.svelte'
|
||||||
|
import QRCode from 'src/partials/QRCode.svelte'
|
||||||
import ImageInput from 'src/partials/ImageInput.svelte'
|
import ImageInput from 'src/partials/ImageInput.svelte'
|
||||||
import Input from 'src/partials/Input.svelte'
|
import Input from 'src/partials/Input.svelte'
|
||||||
import Textarea from 'src/partials/Textarea.svelte'
|
import Textarea from 'src/partials/Textarea.svelte'
|
||||||
@ -61,7 +61,7 @@
|
|||||||
const interactive = !anchorId || !showEntire
|
const interactive = !anchorId || !showEntire
|
||||||
const person = database.watch('people', () => database.getPersonWithFallback(note.pubkey))
|
const person = database.watch('people', () => database.getPersonWithFallback(note.pubkey))
|
||||||
|
|
||||||
let likes, flags, zaps, like, flag, border, childrenContainer, noteContainer, canZap, zapCanvas
|
let likes, flags, zaps, like, flag, border, childrenContainer, noteContainer, canZap
|
||||||
|
|
||||||
const interpolate = (a, b) => t => a + Math.round((b - a) * t)
|
const interpolate = (a, b) => t => a + Math.round((b - a) * t)
|
||||||
const likesCount = tweened(0, {interpolate})
|
const likesCount = tweened(0, {interpolate})
|
||||||
@ -121,7 +121,6 @@
|
|||||||
$: $repliesCount = note.replies.length
|
$: $repliesCount = note.replies.length
|
||||||
$: visibleNotes = note.replies.filter(r => showContext ? true : !r.isContext)
|
$: visibleNotes = note.replies.filter(r => showContext ? true : !r.isContext)
|
||||||
$: canZap = $person?.zapper && user.canZap()
|
$: canZap = $person?.zapper && user.canZap()
|
||||||
$: zapCanvas && zap && QRCode.toCanvas(zapCanvas, zap.invoice)
|
|
||||||
|
|
||||||
const onClick = e => {
|
const onClick = e => {
|
||||||
const target = e.target as HTMLElement
|
const target = e.target as HTMLElement
|
||||||
@ -279,10 +278,6 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const copyZapInvoice = () => {
|
|
||||||
copyToClipboard(zap.invoice)
|
|
||||||
}
|
|
||||||
|
|
||||||
const cleanupZap = () => {
|
const cleanupZap = () => {
|
||||||
if (zap) {
|
if (zap) {
|
||||||
zap.sub?.then(s => s.unsub())
|
zap.sub?.then(s => s.unsub())
|
||||||
@ -515,10 +510,7 @@
|
|||||||
<p>to {displayPerson($person)}</p>
|
<p>to {displayPerson($person)}</p>
|
||||||
</div>
|
</div>
|
||||||
{#if zap.invoice}
|
{#if zap.invoice}
|
||||||
<canvas class="m-auto" bind:this={zapCanvas} />
|
<QRCode code={zap.invoice} />
|
||||||
<Input value={zap.invoice}>
|
|
||||||
<button slot="after" class="fa fa-copy" on:click={copyZapInvoice} />
|
|
||||||
</Input>
|
|
||||||
<div class="text-center text-light">
|
<div class="text-center text-light">
|
||||||
Copy or scan using a lightning wallet to pay your zap.
|
Copy or scan using a lightning wallet to pay your zap.
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,35 +1,19 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import QRCode from 'qrcode'
|
|
||||||
import {prop} from 'ramda'
|
import {prop} from 'ramda'
|
||||||
import {nip19} from 'nostr-tools'
|
import {nip19} from 'nostr-tools'
|
||||||
import {copyToClipboard} from "src/util/html"
|
|
||||||
import {onMount} from 'svelte'
|
|
||||||
import Content from 'src/partials/Content.svelte'
|
import Content from 'src/partials/Content.svelte'
|
||||||
import Input from 'src/partials/Input.svelte'
|
import QRCode from 'src/partials/QRCode.svelte'
|
||||||
import {getPubkeyWriteRelays} from 'src/agent/relays'
|
import {getPubkeyWriteRelays} from 'src/agent/relays'
|
||||||
import {toast} from 'src/app/ui'
|
|
||||||
|
|
||||||
export let person
|
export let person
|
||||||
|
|
||||||
const {pubkey} = person
|
const {pubkey} = person
|
||||||
const relays = [prop('url', getPubkeyWriteRelays(pubkey))]
|
const relays = [prop('url', getPubkeyWriteRelays(pubkey))]
|
||||||
const nprofile = nip19.nprofileEncode({pubkey, relays})
|
const nprofile = nip19.nprofileEncode({pubkey, relays})
|
||||||
|
|
||||||
let canvas
|
|
||||||
|
|
||||||
const copyKey = () => {
|
|
||||||
copyToClipboard(nprofile)
|
|
||||||
toast.show("info", "Profile has been copied to the clipboard!")
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => QRCode.toCanvas(canvas, nprofile))
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Content size="lg">
|
<Content size="lg">
|
||||||
<canvas class="m-auto" bind:this={canvas} />
|
<QRCode code={nprofile} />
|
||||||
<Input value={nprofile}>
|
|
||||||
<button slot="after" class="fa fa-copy" on:click={copyKey} />
|
|
||||||
</Input>
|
|
||||||
<div class="text-center text-light">
|
<div class="text-center text-light">
|
||||||
Copy or scan from a nostr app to share this profile.
|
Copy or scan from a nostr app to share this profile.
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user