trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 21 Releases 5 Wiki Activity

Improvements to contact QR scanner UI

Browse Source 
Plus some narrow-screen fixes to NotificationGroup
This commit is contained in:
Jose Olarte III
2025-05-07 21:23:12 +08:00
parent 151bbc5467
commit 40f9fcea75
2 changed files with 51 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -4,7 +4,7 @@
<!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
<NotificationGroup group="alert">
<div
class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end"
class="fixed top-4 right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
>
<Notification
v-slot="{ notifications, close }"

71
src/views/ContactQRScanShowView.vue
View File

@@ -1,18 +1,25 @@
<template>
<QuickNav selected="Profile" />
<!-- CONTENT -->
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
<div class="mb-2">
<h1 class="text-2xl text-center font-semibold relative px-7">
<!-- Back -->
<a
class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1"
@click="$router.back()"
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@click="handleBack"
>
<font-awesome icon="chevron-left" class="fa-fw" />
</a>
Your Contact Info
<!-- Quick Help -->
<a
class="text-2xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
@click="toastQRCodeHelp()"
>
<font-awesome icon="circle-question" class="fa-fw" />
</a>
Share Contact Info
</h1>
</div>
@@ -35,7 +42,7 @@
<div
v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)"
class="block w-[67vw] max-w-[33vh] mx-auto my-2"
class="block w-[90vw] max-w-[40vh] mx-auto my-4 border border-slate-500"
@click="onCopyUrlToClipboard()"
>
<!--
@@ -49,11 +56,8 @@
:corners-square-options="{ type: 'square' }"
:dots-options="{ type: 'square', color: '#000' }"
/>
<div class="text-center text-sm text-gray-500">
Click the QR code to copy your contact info to your clipboard.
</div>
</div>
<div v-else-if="activeDid" class="text-center">
<div v-else-if="activeDid" class="text-center my-4">
<!-- Not an ETHR DID so force them to paste it. (Passkey Peer DIDs are too big.) -->
<span class="text-blue-500" @click="onCopyDidToClipboard()">
Click here to copy your DID to your clipboard.
@@ -62,7 +66,7 @@
Then give it to them so they can paste it in their list of People.
</span>
</div>
<div v-else class="text-center">
<div v-else class="text-center my-4">
You have no identitifiers yet, so
<router-link
:to="{ name: 'start' }"
@@ -74,13 +78,10 @@
If you don't that first, these contacts won't see your activity.
</div>
<div class="text-center">
<h2 class="text-2xl text-center font-semibold mt-6 mb-2">
Scan Contact Info
</h2>
<div class="text-center my-6">
<div
v-if="isScanning"
class="relative aspect-square rounded-xl overflow-hidden bg-slate-800 w-[67vw] max-w-[33vh] mx-auto"
class="relative aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto"
>
<!-- Status Message -->
<div
@@ -153,27 +154,38 @@
<!-- Camera Switch Button -->
<button
class="absolute bottom-4 right-4 bg-white rounded-full p-2 leading-none shadow-lg"
class="absolute bottom-4 left-4 bg-white rounded-full p-2 leading-none shadow-lg"
title="Switch camera"
@click="toggleCamera"
>
<font-awesome icon="camera-rotate" class="size-6 text-gray-600" />
</button>
<!-- Camera Stop Button -->
<button
class="absolute bottom-4 right-4 bg-white rounded-full p-2 leading-none shadow-lg"
title="Stop camera"
@click="stopScanning"
>
<font-awesome icon="xmark" class="size-6 text-gray-600" />
</button>
</div>
<div v-else class="mt-4">
<div
v-else
class="flex items-center justify-center aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto">
<button
v-if="isNativePlatform"
class="bg-blue-500 text-white px-4 py-2 rounded-md"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white text-lg px-3 py-2 rounded-lg"
@click="$router.push({ name: 'contact-qr-scan' })"
>
Start Scanning
Scan QR Code
</button>
<button
v-else
class="bg-blue-500 text-white px-4 py-2 rounded-md"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white text-lg px-3 py-2 rounded-lg"
@click="startScanning"
>
Start Scanning
Scan QR Code
</button>
</div>
</div>
@@ -187,6 +199,7 @@ import { Component, Vue } from "vue-facing-decorator";
import { useClipboard } from "@vueuse/core";
import { Capacitor } from "@capacitor/core";
import { QrcodeStream } from "vue-qrcode-reader";
import type { RouteLocationNormalized, NavigationGuardNext } from "vue-router";
import QuickNav from "../components/QuickNav.vue";
import UserNameDialog from "../components/UserNameDialog.vue";
@@ -292,6 +305,11 @@ export default class ContactQRScanShow extends Vue {
}
}
async handleBack(): Promise<void> {
await this.cleanupScanner();
this.$router.back();
}
async startScanning() {
if (this.isCleaningUp) {
logger.debug("Cannot start scanning during cleanup");
@@ -649,6 +667,17 @@ export default class ContactQRScanShow extends Vue {
});
}
toastQRCodeHelp() {
this.$notify(
{
group: "alert",
type: "info",
text: "Click the QR code to copy your contact info to your clipboard.",
},
5000,
);
}
onCopyDidToClipboard() {
//this.onScanDetect([{ rawValue: this.qrValue }]); // good for testing
useClipboard()