Skip to content

Commit facdbd4

Browse files
grv-saini-20grv-saini-20
committed
fix: layout enhancement
1 parent 5863565 commit facdbd4

3 files changed

Lines changed: 110 additions & 92 deletions

File tree

‎platforms/metagram/src/lib/fragments/AddPostModal/AddPostModal.svelte‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<script lang="ts">
2+
import { Button, InputRadio, Label, Textarea } from '$lib/ui';
3+
import type { CupertinoPane } from 'cupertino-pane';
4+
import { InputFile, Modal } from '..';
5+
6+
let {
7+
files = $bindable(),
8+
caption = $bindable(),
9+
postVisibility = $bindable(),
10+
paneModal = $bindable()
11+
}: {
12+
files: FileList | undefined;
13+
caption: string;
14+
postVisibility: string;
15+
paneModal: CupertinoPane | undefined;
16+
} = $props();
17+
18+
let isAddCaption = $state(false);
19+
let imagePreviews: string[] = $state([]);
20+
let postVisibilityOptions = ['Only followers', 'Close friends', 'Anyone'];
21+
22+
$effect(() => {
23+
if (files) {
24+
const readers = Array.from(files).map((file) => {
25+
return new Promise<string>((resolve) => {
26+
const reader = new FileReader();
27+
reader.onload = (e) => resolve(e.target?.result as string);
28+
reader.readAsDataURL(file);
29+
});
30+
});
31+
32+
Promise.all(readers).then((previews) => {
33+
imagePreviews = previews;
34+
});
35+
} else {
36+
imagePreviews = [];
37+
}
38+
});
39+
</script>
40+
41+
<Modal
42+
bind:paneModal
43+
initialBreak="middle"
44+
handleDismiss={() => {
45+
(files = undefined), (isAddCaption = false);
46+
}}
47+
>
48+
<h1 class="mb-6 font-semibold text-black">Upload a Photo</h1>
49+
{#if !isAddCaption}
50+
{#if !files}
51+
<InputFile class="mb-4 h-[40vh]" bind:files accept="images/*" multiple={true} />
52+
{:else}
53+
<div class="mb-4 grid grid-cols-3 gap-2">
54+
{#each imagePreviews as src}
55+
<div class="aspect-[4/5] overflow-hidden rounded-lg border">
56+
<!-- svelte-ignore a11y_img_redundant_alt -->
57+
<img {src} alt="Selected image" class="h-full w-full object-cover" />
58+
</div>
59+
{/each}
60+
</div>
61+
{/if}
62+
{:else if isAddCaption}
63+
<Label>Add a Caption</Label>
64+
<Textarea class="mb-4" bind:value={caption} placeholder="enter caption" />
65+
<div class="mb-4 flex items-center gap-2">
66+
{#each imagePreviews as src}
67+
<div class="h-[100px] w-[80px] overflow-hidden rounded-lg border">
68+
<!-- svelte-ignore a11y_img_redundant_alt -->
69+
<img {src} alt="Selected image" class="h-[100px] w-[80px] object-cover" />
70+
</div>
71+
{/each}
72+
</div>
73+
<h3 class="text-black-800 mt-20 mb-2">Who can see the post?</h3>
74+
{#each postVisibilityOptions as option, i}
75+
<div class="mb-2 flex w-[50%] items-center justify-between">
76+
<Label for={option + i}>{option}</Label>
77+
<InputRadio
78+
name="post-visibility"
79+
id={option + i}
80+
value={option}
81+
bind:selected={postVisibility}
82+
/>
83+
</div>
84+
{/each}
85+
{/if}
86+
{#if files}
87+
<div class="grid grid-cols-2 gap-2">
88+
<Button
89+
variant="secondary"
90+
size="sm"
91+
callback={async () => {
92+
files = undefined;
93+
isAddCaption = false;
94+
paneModal?.destroy({ animate: true });
95+
}}>Cancel</Button
96+
>
97+
<Button
98+
variant="secondary"
99+
size="sm"
100+
callback={async () => {
101+
isAddCaption = true;
102+
}}>Next</Button
103+
>
104+
</div>
105+
{/if}
106+
</Modal>

‎platforms/metagram/src/lib/fragments/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@ export { default as SettingsDeleteButton } from './SettingsDeleteButton/Settings
1818
export { default as SettingsTile } from './SettingsTile/SettingsTile.svelte';
1919
export { default as UserRequest } from './UserRequest/UserRequest.svelte';
2020
export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
21+
export { default as AddPostModal } from './AddPostModal/AddPostModal.svelte';

‎platforms/metagram/src/routes/(protected)/+layout.svelte‎

Lines changed: 3 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<script lang="ts">
22
import { page } from '$app/state';
33
import { comments } from '$lib/dummyData';
4-
import { BottomNav, Header, Comment, MessageInput, SideBar, Modal } from '$lib/fragments';
5-
import InputFile from '$lib/fragments/InputFile/InputFile.svelte';
4+
import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
5+
import AddPostModal from '$lib/fragments/AddPostModal/AddPostModal.svelte';
66
import UserRequest from '$lib/fragments/UserRequest/UserRequest.svelte';
77
import { showComments } from '$lib/store/store.svelte';
88
import type { CommentType } from '$lib/types';
9-
import { Button, Label, Textarea } from '$lib/ui';
10-
import InputRadio from '$lib/ui/InputRadio/InputRadio.svelte';
119
import { ArrowLeft02Icon } from '@hugeicons/core-free-icons';
1210
import { HugeiconsIcon } from '@hugeicons/svelte';
1311
import type { CupertinoPane } from 'cupertino-pane';
@@ -21,14 +19,10 @@
2119
let activeReplyToId: string | null = $state(null);
2220
let paneModal: CupertinoPane | undefined = $state();
2321
let files: FileList | undefined = $state();
24-
let imagePreviews: string[] = $state([]);
25-
let isAddCaption: boolean = $state(false);
2622
let caption: string = $state('');
2723
let idFromParams = $state();
2824
let postVisibility = $state('');
2925
30-
let postVisibilityOptions = ['Only followers', 'Close friends', 'Anyone'];
31-
3226
const handleSend = async () => {
3327
const newComment = {
3428
userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
@@ -82,24 +76,6 @@
8276
heading = 'Profile';
8377
}
8478
});
85-
86-
$effect(() => {
87-
if (files) {
88-
const readers = Array.from(files).map((file) => {
89-
return new Promise<string>((resolve) => {
90-
const reader = new FileReader();
91-
reader.onload = (e) => resolve(e.target?.result as string);
92-
reader.readAsDataURL(file);
93-
});
94-
});
95-
96-
Promise.all(readers).then((previews) => {
97-
imagePreviews = previews;
98-
});
99-
} else {
100-
imagePreviews = [];
101-
}
102-
});
10379
</script>
10480

10581
<main
@@ -189,69 +165,4 @@
189165
{/if}
190166
</main>
191167

192-
<Modal
193-
bind:paneModal
194-
initialBreak="middle"
195-
handleDismiss={() => {
196-
(files = undefined), (isAddCaption = false);
197-
}}
198-
>
199-
<h1 class="mb-6 font-semibold text-black">Upload a Photo</h1>
200-
{#if !isAddCaption}
201-
{#if !files}
202-
<InputFile class="mb-4 h-[40vh]" bind:files accept="images/*" multiple={true} />
203-
{:else}
204-
<div class="mb-4 grid grid-cols-3 gap-2">
205-
{#each imagePreviews as src}
206-
<div class="aspect-[4/5] overflow-hidden rounded-lg border">
207-
<!-- svelte-ignore a11y_img_redundant_alt -->
208-
<img {src} alt="Selected image" class="h-full w-full object-cover" />
209-
</div>
210-
{/each}
211-
</div>
212-
{/if}
213-
{:else if isAddCaption}
214-
<Label>Add a Caption</Label>
215-
<Textarea class="mb-4" bind:value={caption} placeholder="enter caption" />
216-
<div class="mb-4 flex items-center gap-2">
217-
{#each imagePreviews as src}
218-
<div class="h-[100px] w-[80px] overflow-hidden rounded-lg border">
219-
<!-- svelte-ignore a11y_img_redundant_alt -->
220-
<img {src} alt="Selected image" class="h-[100px] w-[80px] object-cover" />
221-
</div>
222-
{/each}
223-
</div>
224-
<h3 class="text-black-800 mt-20 mb-2">Who can see the post?</h3>
225-
{#each postVisibilityOptions as option, i}
226-
<div class="mb-2 flex w-[50%] items-center justify-between">
227-
<Label for={option + i}>{option}</Label>
228-
<InputRadio
229-
name="post-visibility"
230-
id={option + i}
231-
value={option}
232-
bind:selected={postVisibility}
233-
/>
234-
</div>
235-
{/each}
236-
{/if}
237-
{#if files}
238-
<div class="grid grid-cols-2 gap-2">
239-
<Button
240-
variant="secondary"
241-
size="sm"
242-
callback={async () => {
243-
files = undefined;
244-
isAddCaption = false;
245-
paneModal?.destroy({ animate: true });
246-
}}>Cancel</Button
247-
>
248-
<Button
249-
variant="secondary"
250-
size="sm"
251-
callback={async () => {
252-
isAddCaption = true;
253-
}}>Next</Button
254-
>
255-
</div>
256-
{/if}
257-
</Modal>
168+
<AddPostModal bind:files bind:postVisibility bind:caption bind:paneModal />

0 commit comments

Comments
 (0)