Browse Source

UI tweaks to QR scanner

- Removed QR code border
- Changed QR code size to eliminate whitespace baked into image
- Removed scanning frame
- Removed camera selector button
- Restyled camera stop buttons in both web and Capacitor for consistency
- Added iOS safe area to Capacitor camera overlay
pull/133/head
Jose Olarte III 4 weeks ago
parent
commit
ba1453104f
  1. 44
      src/views/ContactQRScanShowView.vue
  2. 8
      src/views/ContactQRScanView.vue

44
src/views/ContactQRScanShowView.vue

@ -42,7 +42,7 @@
<div
v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)"
class="block w-[90vw] max-w-[40vh] mx-auto my-4 border border-slate-500"
class="block w-[90vw] max-w-[40vh] mx-auto my-4"
@click="onCopyUrlToClipboard()"
>
<!--
@ -51,8 +51,8 @@
-->
<QRCodeVue3
:value="qrValue"
:width="640"
:height="640"
:width="606"
:height="606"
:corners-square-options="{ type: 'square' }"
:dots-options="{ type: 'square', color: '#000' }"
/>
@ -141,34 +141,16 @@
@camera-off="onCameraOff"
/>
<!-- Scanning Frame -->
<div
class="absolute inset-0 border-2"
:class="{
'border-blue-500': !error && !isScanning,
'border-green-500 animate-pulse': isScanning,
'border-red-500': error,
}"
style="opacity: 0.5; pointer-events: none"
></div>
<!-- Camera Switch Button -->
<button
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 class="absolute bottom-4 inset-x-0 flex justify-center items-center">
<!-- Camera Stop Button -->
<button
class="text-center text-slate-600 leading-none bg-white p-2 rounded-full drop-shadow-lg"
title="Stop camera"
@click="stopScanning"
>
<font-awesome icon="xmark" class="size-6" />
</button>
</div>
</div>
<div
v-else

8
src/views/ContactQRScanView.vue

@ -1,7 +1,7 @@
<template>
<!-- CONTENT -->
<section id="Content" class="relativew-[100vw] h-[100vh]">
<div class="absolute inset-x-0 bottom-0 bg-black/50 p-6">
<div class="absolute inset-x-0 bottom-0 bg-black/50 p-6 pb-[calc(env(safe-area-inset-bottom)+1.5rem)]">
<p class="text-center text-white mb-3">
Point your camera at a TimeSafari contact QR code to scan it
automatically.
@ -9,12 +9,12 @@
<p v-if="error" class="text-center text-rose-300 mb-3">{{ error }}</p>
<div class="text-center">
<div class="flex justify-center items-center">
<button
class="text-center text-white leading-none bg-slate-400 p-2 rounded-full"
class="text-center text-slate-600 leading-none bg-white p-2 rounded-full drop-shadow-lg"
@click="handleBack"
>
<font-awesome icon="xmark" class="w-[1em]"></font-awesome>
<font-awesome icon="xmark" class="size-6"></font-awesome>
</button>
</div>
</div>

Loading…
Cancel
Save