matt
/
opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Camera Upload UI fixes (#487) 

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala 2024-07-17 16:44:30 +05:30 committed by GitHub
parent 01312f01e9
commit 3a658ab7e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
client/components/forms/components/CameraUpload.vue
View File

@ -32,20 +32,10 @@
class="text-white cursor-pointer"
@click="cancelCamera"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
<Icon
name="heroicons:x-mark"
class="w-8 h-8"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
</svg>
/>
</span>
</div>
</div>
@ -54,25 +44,10 @@
class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
@click="openCameraUpload"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
<Icon
name="heroicons:camera"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
/>
</svg>
/>
<p class="text-center font-bold">
Allow Camera Permission
</p>
@ -80,13 +55,12 @@
You need to allow camera permission before you can take pictures. Go to
browser settings to enable camera permission on this page.
</p>
<button
class="text-xs p-1 px-2 bg-blue-600 rounded"
type="button"
<UButton
color="white"
@click.stop="cancelCamera"
>
Got it!
</button>
</UButton>
</div>
<div
@ -102,34 +76,22 @@
class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
@click="openCameraUpload"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
<Icon
name="heroicons:video-camera-slash"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M12 18.75H4.5a2.25 2.25 0 0 1-2.25-2.25V9m12.841 9.091L16.5 19.5m-1.409-1.409c.407-.407.659-.97.659-1.591v-9a2.25 2.25 0 0 0-2.25-2.25h-9c-.621 0-1.184.252-1.591.659m12.182 12.182L2.909 5.909M1.5 4.5l1.409 1.409"
/>
</svg>
/>
<p class="text-center font-bold">
Camera Device Error
</p>
<p class="text-xs">
An unknown error occurred when trying to start Webcam device.
</p>
<button
class="text-xs p-1 px-2 bg-blue-600 rounded"
type="button"
<UButton
color="white"
@click.stop="cancelCamera"
>
Go back
</button>
</UButton>
</div>
</div>
</template>