From a2f6a33a3e5806ba366121357cb5357cbced5b44 Mon Sep 17 00:00:00 2001 From: Attila Gazso <230163+agazso@users.noreply.github.com> Date: Wed, 20 Sep 2023 12:18:00 +0200 Subject: [PATCH] feat: group avatars use shapes style --- src/lib/adapters/index.ts | 1 + src/lib/adapters/waku/index.ts | 4 +- src/lib/components/avatar.svelte | 6 +- src/routes/+page.svelte | 2 +- src/routes/group/chat/[id]/+page.svelte | 4 +- src/routes/group/chat/[id]/edit/+page.svelte | 2 +- src/routes/group/new/+page.svelte | 58 ++------------------ 7 files changed, 17 insertions(+), 60 deletions(-) diff --git a/src/lib/adapters/index.ts b/src/lib/adapters/index.ts index c12b2c12..fe6ee516 100644 --- a/src/lib/adapters/index.ts +++ b/src/lib/adapters/index.ts @@ -13,6 +13,7 @@ export interface Adapter { startChat(address: string, peerAddress: string): Promise startGroupChat( wallet: BaseWallet, + chatId: string, memberAddresses: string[], name: string, avatar?: string, diff --git a/src/lib/adapters/waku/index.ts b/src/lib/adapters/waku/index.ts index 5cdd192a..06030fe0 100644 --- a/src/lib/adapters/waku/index.ts +++ b/src/lib/adapters/waku/index.ts @@ -33,7 +33,6 @@ import { makeWakuObjectAdapter } from '$lib/objects/adapter' import { fetchBalances } from '$lib/adapters/balance' import { makeWakustore } from './wakustore' import type { StorageChat, StorageChatEntry, StorageObjectEntry, StorageProfile } from './types' -import { genRandomHex } from '$lib/utils' import { walletStore } from '$lib/stores/wallet' import { SafeWaku } from './safe-waku' @@ -280,6 +279,7 @@ export default class WakuAdapter implements Adapter { async startGroupChat( wallet: BaseWallet, + chatId: string, memberAddresses: string[], name: string, avatar?: string, @@ -288,8 +288,6 @@ export default class WakuAdapter implements Adapter { throw 'invalid chat' } - const chatId = genRandomHex(64) - const userAddresses = [...memberAddresses, wallet.address] const storageChat = { users: userAddresses, diff --git a/src/lib/components/avatar.svelte b/src/lib/components/avatar.svelte index 0a271eee..e331f6dc 100644 --- a/src/lib/components/avatar.svelte +++ b/src/lib/components/avatar.svelte @@ -5,10 +5,13 @@ export let picture: string | undefined export let size = 48 export let onClick: (() => unknown) | undefined = undefined + export let group = false function isCID(s: string) { return s.length === 46 && s.startsWith('Qm') } + + console.debug('avatar', { picture, group })
{:else if picture} - + {@const style = group ? 'shapes' : 'bottts-neutral'} + {/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8e0c4229..1a6c4b0e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -159,7 +159,7 @@
{#if isGroupChatId(chat.chatId)} - + {:else} {/if} diff --git a/src/routes/group/chat/[id]/+page.svelte b/src/routes/group/chat/[id]/+page.svelte index 55a2c7e2..6775761e 100644 --- a/src/routes/group/chat/[id]/+page.svelte +++ b/src/routes/group/chat/[id]/+page.svelte @@ -140,7 +140,7 @@ - + {chat?.name} @@ -159,7 +159,7 @@ {#if !chat.joined} - +

Join "{chat?.name}"?

diff --git a/src/routes/group/chat/[id]/edit/+page.svelte b/src/routes/group/chat/[id]/edit/+page.svelte index 31d48dd8..64d808ff 100644 --- a/src/routes/group/chat/[id]/edit/+page.svelte +++ b/src/routes/group/chat/[id]/edit/+page.svelte @@ -140,7 +140,7 @@ - + Change picture diff --git a/src/routes/group/new/+page.svelte b/src/routes/group/new/+page.svelte index 7c782ce5..1e65e0a3 100644 --- a/src/routes/group/new/+page.svelte +++ b/src/routes/group/new/+page.svelte @@ -3,7 +3,6 @@ import AddComment from '$lib/components/icons/add-comment.svelte' import ChevronLeft from '$lib/components/icons/chevron-left.svelte' - import UserIcon from '$lib/components/icons/user.svelte' import Button from '$lib/components/button.svelte' import Header from '$lib/components/header.svelte' @@ -23,7 +22,8 @@ import type { HDNodeWallet } from 'ethers/lib.commonjs' import Layout from '$lib/components/layout.svelte' import Checkbox from '$lib/components/checkbox.svelte' - import { getPicture, uploadPicture } from '$lib/adapters/ipfs' + import { uploadPicture } from '$lib/adapters/ipfs' + import { genRandomHex } from '$lib/utils' let groupMembers: string[] = [] let screen: 'create' | 'details' = 'create' @@ -32,6 +32,8 @@ let pictureFiles: FileList | undefined = undefined let buttonDisabled = false + const chatId = genRandomHex(64) + async function resizePersonaPicture(p?: File) { try { picture = p ? await uploadPicture(await clipAndResize(p, 200, 200)) : picture @@ -44,7 +46,7 @@ async function createGroup(wallet: HDNodeWallet) { buttonDisabled = true - const chatId = await adapters.startGroupChat(wallet, groupMembers, name, picture) + await adapters.startGroupChat(wallet, chatId, groupMembers, name, picture) await adapters.sendInvite(wallet, chatId, groupMembers) buttonDisabled = false @@ -150,19 +152,7 @@ -
- {#if picture} -
- profile -
- {:else} -
-
- -
-
- {/if} -
+ Change picture @@ -255,40 +245,4 @@ gap: var(--spacing-6); align-items: center; } - - .avatar { - margin: var(--spacing-12) auto 0; - border-radius: 100px; - } - .no-img, - .img { - aspect-ratio: 1; - height: 140px; - border-radius: 100px; - display: flex; - justify-content: center; - align-items: center; - background-color: var(--color-step-10, var(--color-dark-step-50)); - margin-inline: auto; - position: relative; - - :global(img) { - aspect-ratio: 1; - object-fit: cover; - border-radius: 100px; - } - } - - .profile-default { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - - :global(svg) { - fill: var(--color-step-50, var(--color-dark-step-10)); - } - }