trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 12 Releases 5 Wiki Activity
Browse Source

Improvements to contact QR scanner UI 

Plus some narrow-screen fixes to NotificationGroup
pull/133/head
Jose Olarte III 2 months ago
parent
74b9caa94f
commit
f874973bfa
2 changed files with 51 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/App.vue
  2. 71
      src/views/ContactQRScanShowView.vue

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()

Write Preview
Loading…
Cancel
Save