Skip to content

Commit fb44a46

Browse files
grv-saini-20grv-saini-20
committed
fix: modal view
1 parent b83ef6d commit fb44a46

File tree

7 files changed

+116
-107
lines changed

7 files changed

+116
-107
lines changed

‎platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
1-
import type { ComponentProps } from "svelte";
2-
import SettingsTile from "./SettingsTile.svelte";
1+
import type { ComponentProps } from 'svelte';
2+
import SettingsTile from './SettingsTile.svelte';
33

44
export default {
5-
title: "UI/SettingsTile",
6-
component: SettingsTile,
7-
tags: ["autodocs"],
8-
render: (args: {
9-
Component: SettingsTile;
10-
props: ComponentProps<typeof SettingsTile>;
11-
}) => ({
12-
Component: SettingsTile,
13-
props: args,
14-
}),
5+
title: 'UI/SettingsTile',
6+
component: SettingsTile,
7+
tags: ['autodocs'],
8+
render: (args: { Component: SettingsTile; props: ComponentProps<typeof SettingsTile> }) => ({
9+
Component: SettingsTile,
10+
props: args
11+
})
1512
};
1613

1714
export const Primary = {
18-
args: {
19-
title: "Who can see your posts?",
20-
currentStatus: "Only followers",
21-
onclick: () => alert("clicked"),
22-
},
15+
args: {
16+
title: 'Who can see your posts?',
17+
currentStatus: 'Only followers',
18+
onclick: () => alert('clicked')
19+
}
2320
};

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
export { default as Profile } from "./Profile/Profile.svelte";
2-
export { default as Header } from "./Header/Header.svelte";
3-
export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
4-
export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte";
5-
export { default as MessageInput } from "./MessageInput/MessageInput.svelte";
6-
export { default as InputFile } from "./InputFile/InputFile.svelte";
7-
export { default as Drawer } from "./Drawer/Drawer.svelte";
8-
export { default as Message } from "./Message/Message.svelte";
9-
export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte";
10-
export { default as Modal } from "./Modal/Modal.svelte";
11-
export { default as SideBar } from "./SideBar/SideBar.svelte";
12-
export { default as RightAside } from "./RightAside/RightAside.svelte";
13-
export { default as SettingsToggleButton } from "./SettingsToggleButton/SettingsToggleButton.svelte";
14-
export { default as Post } from "./Post/Post.svelte";
15-
export { default as ChatMessage } from "./ChatMessage/ChatMessage.svelte";
16-
export { default as Comment } from "./Comment/Comment.svelte";
17-
export { default as SettingsDeleteButton } from "./SettingsDeleteButton/SettingsDeleteButton.svelte";
18-
export { default as SettingsTile } from "./SettingsTile/SettingsTile.svelte";
19-
export { default as UserRequest } from "./UserRequest/UserRequest.svelte";
20-
export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";
1+
export { default as Profile } from './Profile/Profile.svelte';
2+
export { default as Header } from './Header/Header.svelte';
3+
export { default as BottomNav } from './BottomNav/BottomNav.svelte';
4+
export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
5+
export { default as MessageInput } from './MessageInput/MessageInput.svelte';
6+
export { default as InputFile } from './InputFile/InputFile.svelte';
7+
export { default as Drawer } from './Drawer/Drawer.svelte';
8+
export { default as Message } from './Message/Message.svelte';
9+
export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
10+
export { default as Modal } from './Modal/Modal.svelte';
11+
export { default as SideBar } from './SideBar/SideBar.svelte';
12+
export { default as RightAside } from './RightAside/RightAside.svelte';
13+
export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
14+
export { default as Post } from './Post/Post.svelte';
15+
export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
16+
export { default as Comment } from './Comment/Comment.svelte';
17+
export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
18+
export { default as SettingsTile } from './SettingsTile/SettingsTile.svelte';
19+
export { default as UserRequest } from './UserRequest/UserRequest.svelte';
20+
export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';

‎platforms/metagram/src/lib/ui/Input/Input.stories.ts‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,62 @@
1-
import { Input } from "..";
1+
import { Input } from '..';
22

33
export default {
4-
title: "UI/Input",
5-
component: Input,
6-
tags: ["autodocs"],
7-
render: (args: { type: string; placeholder: string }) => ({
8-
Component: Input,
9-
props: args,
10-
}),
4+
title: 'UI/Input',
5+
component: Input,
6+
tags: ['autodocs'],
7+
render: (args: { type: string; placeholder: string }) => ({
8+
Component: Input,
9+
props: args
10+
})
1111
};
1212

1313
export const Text = {
14-
args: {
15-
type: "text",
16-
placeholder: "Joe Biden",
17-
},
14+
args: {
15+
type: 'text',
16+
placeholder: 'Joe Biden'
17+
}
1818
};
1919

2020
export const Tel = {
21-
args: {
22-
type: "tel",
23-
placeholder: "987654321",
24-
},
21+
args: {
22+
type: 'tel',
23+
placeholder: '987654321'
24+
}
2525
};
2626

2727
export const NumberInput = {
28-
args: {
29-
type: "number",
30-
placeholder: "Enter something",
31-
},
28+
args: {
29+
type: 'number',
30+
placeholder: 'Enter something'
31+
}
3232
};
3333

3434
export const Email = {
35-
args: {
36-
type: "email",
37-
placeholder: "[email protected]",
38-
},
35+
args: {
36+
type: 'email',
37+
placeholder: '[email protected]'
38+
}
3939
};
4040

4141
export const Invalid = {
42-
args: {
43-
type: "email",
44-
placeholder: "Invalid email",
45-
value: "not-an-email",
46-
},
42+
args: {
43+
type: 'email',
44+
placeholder: 'Invalid email',
45+
value: 'not-an-email'
46+
}
4747
};
4848

4949
export const Password = {
50-
args: {
51-
type: "password",
52-
placeholder: "Please enter password",
53-
},
50+
args: {
51+
type: 'password',
52+
placeholder: 'Please enter password'
53+
}
5454
};
5555

5656
export const Radio = {
57-
args: {
58-
type: "radio",
59-
value: "option1",
60-
name: "option-1",
61-
},
57+
args: {
58+
type: 'radio',
59+
value: 'option1',
60+
name: 'option-1'
61+
}
6262
};

‎platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { InputRadio } from "..";
1+
import { InputRadio } from '..';
22

33
export default {
4-
title: "UI/InputRadio",
5-
component: InputRadio,
6-
tags: ["autodocs"],
7-
render: (args: { type: string; placeholder: string }) => ({
8-
Component: InputRadio,
9-
props: args,
10-
}),
4+
title: 'UI/InputRadio',
5+
component: InputRadio,
6+
tags: ['autodocs'],
7+
render: (args: { type: string; placeholder: string }) => ({
8+
Component: InputRadio,
9+
props: args
10+
})
1111
};
1212

1313
export const Radio = {
14-
args: {
15-
type: "radio",
16-
value: "option1",
17-
name: "option-1",
18-
},
14+
args: {
15+
type: 'radio',
16+
value: 'option1',
17+
name: 'option-1'
18+
}
1919
};

‎platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
}}
5151
>
5252
{#if selected === value}
53-
<span class="bg-brand-burnt-orange bottom-0.75 left-0.25 absolute h-2.5 w-2.5 rounded-full"
53+
<span class="bg-brand-burnt-orange absolute bottom-0.75 left-0.25 h-2.5 w-2.5 rounded-full"
5454
></span>
5555
{/if}
5656
</span>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
export { default as Button } from "./Button/Button.svelte";
2-
export { default as Avatar } from "./Avatar/Avatar.svelte";
3-
export { default as Input } from "./Input/Input.svelte";
4-
export { default as Select } from "./Select/Select.svelte";
5-
export { default as Label } from "./Label/Label.svelte";
6-
export { default as Toggle } from "./Toggle/Toggle.svelte";
7-
export { default as Helper } from "./Helper/Helper.svelte";
8-
export { default as InputRadio } from "./InputRadio/InputRadio.svelte";
9-
export { default as Textarea } from "./Textarea/Textarea.svelte";
1+
export { default as Button } from './Button/Button.svelte';
2+
export { default as Avatar } from './Avatar/Avatar.svelte';
3+
export { default as Input } from './Input/Input.svelte';
4+
export { default as Select } from './Select/Select.svelte';
5+
export { default as Label } from './Label/Label.svelte';
6+
export { default as Toggle } from './Toggle/Toggle.svelte';
7+
export { default as Helper } from './Helper/Helper.svelte';
8+
export { default as InputRadio } from './InputRadio/InputRadio.svelte';
9+
export { default as Textarea } from './Textarea/Textarea.svelte';

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

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
let idFromParams = $state();
2828
let postVisibility = $state('');
2929
30-
let postVisibilityOptions = ["only followers", "close-friends", "anyone"]
30+
let postVisibilityOptions = ['only followers', 'close-friends', 'anyone'];
3131
3232
const handleSend = async () => {
3333
const newComment = {
@@ -189,7 +189,13 @@
189189
{/if}
190190
</main>
191191

192-
<Modal bind:paneModal initialBreak="middle" handleDismiss={() => (files = undefined)}>
192+
<Modal
193+
bind:paneModal
194+
initialBreak="middle"
195+
handleDismiss={() => {
196+
(files = undefined), (isAddCaption = false);
197+
}}
198+
>
193199
<h1 class="mb-6 font-semibold text-black">Upload a Photo</h1>
194200
{#if !isAddCaption}
195201
{#if !files}
@@ -204,7 +210,7 @@
204210
{/each}
205211
</div>
206212
{/if}
207-
{:else}
213+
{:else if isAddCaption}
208214
<Label>Add a Caption</Label>
209215
<Textarea class="mb-4" bind:value={caption} placeholder="enter caption" />
210216
<div class="mb-4 flex items-center gap-2">
@@ -216,11 +222,16 @@
216222
{/each}
217223
</div>
218224
<h3 class="text-black-800 mt-20 mb-2">Who can see the post?</h3>
219-
{#each postVisibilityOptions as option,i}
220-
<div class="flex items-center justify-between w-[50%] mb-2">
221-
<Label for={option + i}>{option}</Label>
222-
<InputRadio name="post-visibility" id={option + i} value={option} bind:selected={postVisibility}/>
223-
</div>
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>
224235
{/each}
225236
{/if}
226237
{#if files}
@@ -230,7 +241,8 @@
230241
size="sm"
231242
callback={async () => {
232243
files = undefined;
233-
paneModal?.destroy({animate: true})
244+
isAddCaption = false;
245+
paneModal?.destroy({ animate: true });
234246
}}>Cancel</Button
235247
>
236248
<Button

0 commit comments

Comments
 (0)