Merge pull request #249 from JackDiSalvatore/frontend/take-photo-fix

Frontend/take photo fix
UnityFoundation-io · Apr 25, 2024 · cb195a2 · cb195a2
2 parents aec684b + 4e7a870
commit cb195a2
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 23 deletions.
diff --git a/frontend/src/lib/components/CreateServiceRequest/UploadFile.svelte b/frontend/src/lib/components/CreateServiceRequest/UploadFile.svelte
@@ -10,6 +10,8 @@
 	import type { DropResult } from 'stwui/types';
 	import { page } from '$app/stores';
 	import type { CreateServiceRequestUIParams } from './shared';
+	import Camera from '../Svg/outline/Camera.svelte';
+	import Upload from '../Svg/outline/Upload.svelte';
 
 	let input: HTMLInputElement;
 	let reuploadInput: HTMLInputElement;
@@ -25,10 +27,18 @@
 		return s.slice(s.indexOf('/') + 1);
 	});
 
-	async function onChange() {
+	async function handleDesktopImageInput() {
 		if (input.files && input.files.length < 2) dispatchFile(input.files[0]);
 	}
 
+	async function handleMobileImageInput(e: Event) {
+		const input = e.target as HTMLInputElement;
+
+		if (input.files) {
+			dispatchFile(input.files?.[0]);
+		}
+	}
+
 	async function reuploadImage() {
 		if (reuploadInput.files && reuploadInput.files.length < 2) dispatchFile(reuploadInput.files[0]);
 	}
@@ -76,37 +86,44 @@
 						accept="image/*"
 						hidden
 						bind:this={input}
-						on:change={onChange}
+						on:change={handleDesktopImageInput}
 					/>
-					<label for="camera-roll-btn-desktop">{messages['photo']['change_image']}</label>
+					<label for="camera-roll-btn-desktop">
+						<div class="flex items-center justify-center">
+							<Camera />
+							<span class="ml-2">{messages['photo']['change_image']}</span>
+						</div>
+					</label>
 
 					<Button
 						type="ghost"
 						on:click={() => {
-							dispatch('stepChange');
+							dispatch('stepChange', { file: undefined });
 						}}
 					>
-						{messages['photo']['use_current_image']}
+						{messages['photo']['no_upload']}
 					</Button>
 
 					<Button
 						type="ghost"
 						on:click={() => {
-							dispatch('stepChange', { file: undefined });
+							dispatch('stepChange');
 						}}
 					>
-						{messages['photo']['no_upload']}
+						{messages['photo']['use_current_image']}
 					</Button>
 				</div>
 			{:else}
 				<div class="items-center justify-center">
 					<div class="mb-4">
 						<FilePicker onDrop={desktopDropFiles} {allowedExtensions}>
 							<FilePicker.Icon slot="icon" data={uploadIcon} />
-							<FilePicker.Title slot="title">{messages['photo']['upload']}</FilePicker.Title>
-							<FilePicker.Description slot="description"
-								>Drag & Drop your file</FilePicker.Description
-							>
+							<FilePicker.Title slot="title">
+								{messages['photo']['upload']}
+							</FilePicker.Title>
+							<FilePicker.Description slot="description">
+								Drag & Drop your file
+							</FilePicker.Description>
 						</FilePicker>
 					</div>
 
@@ -139,37 +156,59 @@
 					<img class="rounded-lg" src={imageData} alt="preview" />
 				</div>
 
-				<div class="grid w-full grid-rows-3 gap-2">
+				<div class="grid w-full grid-rows-4 gap-2">
 					<input
 						class="w-full"
 						type="file"
 						name="photo"
-						id="camera-roll-btn-reupload"
+						id="re-take-photo-button"
 						accept="image/*"
+						capture="environment"
 						hidden
 						bind:this={reuploadInput}
 						on:change={reuploadImage}
 					/>
-					<label for="camera-roll-btn-reupload">{messages['photo']['change_image']}</label>
+					<label for="re-take-photo-button">
+						<div class="flex items-center justify-center">
+							<Camera />
+							<span class="ml-2">{messages['photo']['change_image']}</span>
+						</div>
+					</label>
+
+					<input
+						class="w-full"
+						type="file"
+						name="photo"
+						id="re-upload-image-button"
+						accept="image/*"
+						hidden
+						on:change={handleMobileImageInput}
+					/>
+					<label for="re-upload-image-button">
+						<div class="flex items-center justify-center">
+							<Upload />
+							<span class="ml-2">{messages['photo']['upload']}</span>
+						</div>
+					</label>
 
 					<Button
 						class="w-full"
 						type="ghost"
 						on:click={() => {
-							dispatch('stepChange');
+							dispatch('stepChange', { file: undefined });
 						}}
 					>
-						{messages['photo']['use_current_image']}
+						{messages['photo']['no_upload']}
 					</Button>
 
 					<Button
 						class="w-full"
 						type="ghost"
 						on:click={() => {
-							dispatch('stepChange', { file: undefined });
+							dispatch('stepChange');
 						}}
 					>
-						{messages['photo']['no_upload']}
+						{messages['photo']['use_current_image']}
 					</Button>
 				</div>
 			{:else}
@@ -179,11 +218,33 @@
 						name="photo"
 						id="camera-roll-btn"
 						accept="image/*"
+						capture="environment"
+						hidden
+						bind:this={input}
+						on:change={handleMobileImageInput}
+					/>
+					<label class="w-full" for="camera-roll-btn">
+						<div class="flex items-center justify-center">
+							<Camera />
+							<span class="ml-2">{messages['photo']['take_photo']}</span>
+						</div>
+					</label>
+
+					<input
+						type="file"
+						name="photo"
+						id="upload-image-btn"
+						accept="image/*"
 						hidden
 						bind:this={input}
-						on:change={onChange}
+						on:change={handleMobileImageInput}
 					/>
-					<label class="w-full" for="camera-roll-btn">{messages['photo']['upload']}</label>
+					<label class="w-full" for="upload-image-btn">
+						<div class="flex items-center justify-center">
+							<Upload />
+							<span class="ml-2">{messages['photo']['upload']}</span>
+						</div>
+					</label>
 
 					<Button
 						class="w-full"

diff --git a/frontend/src/lib/components/Svg/outline/Camera.svelte b/frontend/src/lib/components/Svg/outline/Camera.svelte
@@ -0,0 +1,31 @@
+<script context="module" lang="ts">
+	export const camera = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" 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>`;
+</script>
+
+<script lang="ts">
+	import type { TwSizes } from 'stwui/types';
+	export let size: TwSizes = '6';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-{size} h-{size}"
+>
+	<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>
diff --git a/frontend/src/lib/components/Svg/outline/Upload.svelte b/frontend/src/lib/components/Svg/outline/Upload.svelte
@@ -0,0 +1,23 @@
+<script context="module" lang="ts">
+	export const upload = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<path d="M11 20H6.5Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13V12.85L14.6 14.4L16 13L12 9L8 13L9.4 14.4L11 12.85Z"></path>
+</svg>`;
+</script>
+
+<script lang="ts">
+	import type { TwSizes } from 'stwui/types';
+	export let size: TwSizes = '6';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-{size} h-{size}"
+>
+	<path
+		d="M11 20H6.5Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13V12.85L14.6 14.4L16 13L12 9L8 13L9.4 14.4L11 12.85Z"
+	></path>
+</svg>
diff --git a/frontend/src/media/messages.json b/frontend/src/media/messages.json
@@ -81,12 +81,12 @@
 		"button_submit": "Submit"
 	},
 	"photo": {
-		"upload": "Add An Image",
+		"upload": "Upload An Image",
 		"camera_roll": "Camera Roll",
 		"take_photo": "Take Photo",
 		"no_upload": "Continue Without Image",
-		"use_current_image": "Continue With Current Image",
-		"change_image": "Change Image",
+		"use_current_image": "Continue With Original Image",
+		"change_image": "Re-Take Photo",
 		"back": "Back",
 		"submit": "Submit"
 	},