Uh oh!
There was an error while loading. Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork 8
feat/upload-post#190
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closed
+318
−136
Closed
feat/upload-post #190
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
c9d5192
feat/upload-post
grv-saini-20 b5c2d9c
fix: conflicts
grv-saini-20 ca12273
fix: destroy pane on cancel
grv-saini-20 0be364c
fix: radio input
grv-saini-20 b83ef6d
fix: cursor grab
grv-saini-20 fb44a46
fix: modal view
grv-saini-20 5863565
fix: modal view
grv-saini-20 facdbd4
fix: layout enhancement
grv-saini-20 6cab184
fix: layout scroll
grv-saini-20 fca0cf5
fix: layout scroll
grv-saini-20 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Diff view
Diff view
There are no files selected for viewing
106 changes: 106 additions & 0 deletions
106 platforms/metagram/src/lib/fragments/AddPostModal/AddPostModal.svelte
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| <script lang="ts"> | ||
| import { Button, InputRadio, Label, Textarea } from '$lib/ui'; | ||
| import type { CupertinoPane } from 'cupertino-pane'; | ||
| import { InputFile, Modal } from '..'; | ||
| let { | ||
| files = $bindable(), | ||
| caption = $bindable(), | ||
| postVisibility = $bindable(), | ||
| paneModal = $bindable() | ||
| }: { | ||
| files: FileList | undefined; | ||
| caption: string; | ||
| postVisibility: string; | ||
| paneModal: CupertinoPane | undefined; | ||
| } = $props(); | ||
| let isAddCaption = $state(false); | ||
| let imagePreviews: string[] = $state([]); | ||
| let postVisibilityOptions = ['Only followers', 'Close friends', 'Anyone']; | ||
| $effect(() => { | ||
| if (files) { | ||
| const readers = Array.from(files).map((file) => { | ||
| return new Promise<string>((resolve) => { | ||
| const reader = new FileReader(); | ||
| reader.onload = (e) => resolve(e.target?.result as string); | ||
| reader.readAsDataURL(file); | ||
| }); | ||
| }); | ||
| Promise.all(readers).then((previews) => { | ||
| imagePreviews = previews; | ||
| }); | ||
| } else { | ||
| imagePreviews = []; | ||
| } | ||
| }); | ||
| </script> | ||
| <Modal | ||
| bind:paneModal | ||
| initialBreak="middle" | ||
| handleDismiss={() => { | ||
| (files = undefined), (isAddCaption = false); | ||
| }} | ||
| > | ||
| <h1 class="mb-6 font-semibold text-black">Upload a Photo</h1> | ||
| {#if !isAddCaption} | ||
| {#if !files} | ||
| <InputFile class="mb-4 h-[40vh]" bind:files accept="images/*" multiple={true} /> | ||
This conversation was marked as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||
| {:else} | ||
| <div class="mb-4 grid grid-cols-3 gap-2"> | ||
| {#each imagePreviews as src} | ||
| <div class="aspect-[4/5] overflow-hidden rounded-lg border"> | ||
| <!-- svelte-ignore a11y_img_redundant_alt --> | ||
| <img {src} alt="Selected image" class="h-full w-full object-cover" /> | ||
| </div> | ||
| {/each} | ||
| </div> | ||
| {/if} | ||
| {:else if isAddCaption} | ||
| <Label>Add a Caption</Label> | ||
| <Textarea class="mb-4" bind:value={caption} placeholder="enter caption" /> | ||
| <div class="mb-4 flex items-center gap-2"> | ||
| {#each imagePreviews as src} | ||
| <div class="h-[100px] w-[80px] overflow-hidden rounded-lg border"> | ||
| <!-- svelte-ignore a11y_img_redundant_alt --> | ||
| <img {src} alt="Selected image" class="h-[100px] w-[80px] object-cover" /> | ||
| </div> | ||
| {/each} | ||
| </div> | ||
| <h3 class="text-black-800 mt-20 mb-2">Who can see the post?</h3> | ||
This conversation was marked as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||
| {#each postVisibilityOptions as option, i} | ||
| <div class="mb-2 flex w-[50%] items-center justify-between"> | ||
| <Label for={option + i}>{option}</Label> | ||
| <InputRadio | ||
| name="post-visibility" | ||
| id={option + i} | ||
| value={option} | ||
| bind:selected={postVisibility} | ||
| /> | ||
| </div> | ||
| {/each} | ||
| {/if} | ||
| {#if files} | ||
| <div class="grid grid-cols-2 gap-2"> | ||
| <Button | ||
| variant="secondary" | ||
| size="sm" | ||
| callback={async () => { | ||
| files = undefined; | ||
| isAddCaption = false; | ||
| paneModal?.destroy({ animate: true }); | ||
| }}>Cancel</Button | ||
| > | ||
| <Button | ||
| variant="secondary" | ||
| size="sm" | ||
| callback={async () => { | ||
| isAddCaption = true; | ||
| }}>Next</Button | ||
| > | ||
| </div> | ||
| {/if} | ||
| </Modal> | ||
33 changes: 23 additions & 10 deletions
33 platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -7,21 +7,22 @@ | ||
| interface IDrawerProps extends HTMLAttributes<HTMLDivElement> { | ||
| modalEl?: HTMLDivElement; | ||
| paneModal?: CupertinoPane; | ||
| initialBreak?: 'bottom' | 'top' | 'middle'; | ||
| handleDismiss?: () => void; | ||
| children?: Snippet; | ||
| } | ||
| let { | ||
| modalEl = $bindable(), | ||
| paneModal = $bindable(), | ||
| children = undefined, | ||
| initialBreak, | ||
| handleDismiss, | ||
| ...restProps | ||
| }: IDrawerProps = $props(); | ||
| function present() { | ||
| if (paneModal) paneModal.present({ animate: true }); | ||
| } | ||
| function dismiss() { | ||
| handleDismiss && handleDismiss(); | ||
| if (paneModal) paneModal.destroy({ animate: true }); | ||
| } | ||
| @@ -30,25 +31,25 @@ | ||
| paneModal = new CupertinoPane(modalEl, { | ||
| modal: true, | ||
| backdrop: true, | ||
| backdropBlur: true, | ||
| backdropOpacity: 0.4, | ||
| animationType: 'ease', | ||
| animationDuration: 300, | ||
| fitHeight: true, | ||
| showDraggable: true, | ||
| bottomClose: false, | ||
| showDraggable: false, | ||
| buttonDestroy: false, | ||
| initialBreak: initialBreak, | ||
| breaks: { | ||
| bottom: { enabled: true, height: 250 } | ||
| top: { enabled: true, height: 600 }, | ||
| middle: { enabled: true, height: 400 }, | ||
| bottom: { enabled: true, height: 200 } | ||
| }, | ||
| initialBreak: 'bottom', | ||
| cssClass: 'modal', | ||
| events: { | ||
| onBackdropTap: () => dismiss() | ||
| } | ||
| }); | ||
| present(); | ||
| return () => { | ||
| if (paneModal) paneModal.destroy({ animate: false }); | ||
| }; | ||
| }); | ||
| </script> | ||
| @@ -60,17 +61,18 @@ | ||
| <style> | ||
| :global(.modal .pane) { | ||
| width: 95% !important; | ||
| max-height: 300px !important; | ||
| width: 100% !important; | ||
| max-height: 600px !important; | ||
| min-height: 100px !important; | ||
| height: auto !important; | ||
| position: fixed !important; | ||
| bottom: 30px !important; | ||
| left: 50% !important; | ||
| left: 40% !important; | ||
This conversation was marked as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||
| transform: translateX(-50%) !important; | ||
| border-radius: 32px !important; | ||
| padding: 20px !important; | ||
| background-color: var(--color-white) !important; | ||
| cursor: default !important; | ||
| overflow: scroll !important; | ||
| scrollbar-width: none !important; | ||
| -ms-overflow-style: none !important; | ||
31 changes: 14 additions & 17 deletions
31 platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,20 @@ | ||
| import type { ComponentProps } from "svelte"; | ||
| import SettingsTile from "./SettingsTile.svelte"; | ||
| import type { ComponentProps } from 'svelte'; | ||
| import SettingsTile from './SettingsTile.svelte'; | ||
| export default { | ||
| title: "UI/SettingsTile", | ||
| component: SettingsTile, | ||
| tags: ["autodocs"], | ||
| render: (args: { | ||
| Component: SettingsTile; | ||
| props: ComponentProps<typeof SettingsTile>; | ||
| }) => ({ | ||
| Component: SettingsTile, | ||
| props: args, | ||
| }), | ||
| title: 'UI/SettingsTile', | ||
| component: SettingsTile, | ||
| tags: ['autodocs'], | ||
| render: (args: { Component: SettingsTile; props: ComponentProps<typeof SettingsTile> }) => ({ | ||
| Component: SettingsTile, | ||
| props: args | ||
| }) | ||
| }; | ||
| export const Primary = { | ||
| args: { | ||
| title: "Who can see your posts?", | ||
| currentStatus: "Only followers", | ||
| onclick: () => alert("clicked"), | ||
| }, | ||
| args: { | ||
| title: 'Who can see your posts?', | ||
| currentStatus: 'Only followers', | ||
| onclick: () => alert('clicked') | ||
| } | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,21 @@ | ||
| export { default as Profile } from "./Profile/Profile.svelte"; | ||
| export { default as Header } from "./Header/Header.svelte"; | ||
| export { default as BottomNav } from "./BottomNav/BottomNav.svelte"; | ||
| export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte"; | ||
| export { default as MessageInput } from "./MessageInput/MessageInput.svelte"; | ||
| export { default as InputFile } from "./InputFile/InputFile.svelte"; | ||
| export { default as Drawer } from "./Drawer/Drawer.svelte"; | ||
| export { default as Message } from "./Message/Message.svelte"; | ||
| export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"; | ||
| export { default as Modal } from "./Modal/Modal.svelte"; | ||
| export { default as SideBar } from "./SideBar/SideBar.svelte"; | ||
| export { default as RightAside } from "./RightAside/RightAside.svelte"; | ||
| export { default as SettingsToggleButton } from "./SettingsToggleButton/SettingsToggleButton.svelte"; | ||
| export { default as Post } from "./Post/Post.svelte"; | ||
| export { default as ChatMessage } from "./ChatMessage/ChatMessage.svelte"; | ||
| export { default as Comment } from "./Comment/Comment.svelte"; | ||
| export { default as SettingsDeleteButton } from "./SettingsDeleteButton/SettingsDeleteButton.svelte"; | ||
| export { default as SettingsTile } from "./SettingsTile/SettingsTile.svelte"; | ||
| export { default as UserRequest } from "./UserRequest/UserRequest.svelte"; | ||
| export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte"; | ||
| export { default as Profile } from './Profile/Profile.svelte'; | ||
| export { default as Header } from './Header/Header.svelte'; | ||
| export { default as BottomNav } from './BottomNav/BottomNav.svelte'; | ||
| export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte'; | ||
| export { default as MessageInput } from './MessageInput/MessageInput.svelte'; | ||
| export { default as InputFile } from './InputFile/InputFile.svelte'; | ||
| export { default as Drawer } from './Drawer/Drawer.svelte'; | ||
| export { default as Message } from './Message/Message.svelte'; | ||
| export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte'; | ||
| export { default as Modal } from './Modal/Modal.svelte'; | ||
| export { default as SideBar } from './SideBar/SideBar.svelte'; | ||
| export { default as RightAside } from './RightAside/RightAside.svelte'; | ||
| export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte'; | ||
| export { default as Post } from './Post/Post.svelte'; | ||
| export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte'; | ||
| export { default as Comment } from './Comment/Comment.svelte'; | ||
| export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte'; | ||
| export { default as SettingsTile } from './SettingsTile/SettingsTile.svelte'; | ||
| export { default as UserRequest } from './UserRequest/UserRequest.svelte'; | ||
| export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte'; | ||
| export { default as AddPostModal } from './AddPostModal/AddPostModal.svelte'; |
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.