|
7 | 7 | import Settings from '$lib/icons/Settings.svelte'; |
8 | 8 | import { clickOutside } from '$lib/utils'; |
9 | 9 | import { Pen01FreeIcons } from '@hugeicons/core-free-icons'; |
10 | | - import {HugeiconsIcon} from "@hugeicons/svelte" |
| 10 | + import { HugeiconsIcon } from '@hugeicons/svelte'; |
11 | 11 |
|
12 | 12 | let messagesContainer: HTMLDivElement; |
13 | 13 | let messageValue = $state(''); |
|
20 | 20 | avatar: 'https://i.pravatar.cc/150?img=15', |
21 | 21 | description: 'Discuss all design-related tasks and updates here.', |
22 | 22 | members: [ |
23 | | - { id: 'user-1', name: 'Alice', avatar: 'https://i.pravatar.cc/150?img=1', role: 'owner' }, |
| 23 | + { |
| 24 | + id: 'user-1', |
| 25 | + name: 'Alice', |
| 26 | + avatar: 'https://i.pravatar.cc/150?img=1', |
| 27 | + role: 'owner' |
| 28 | + }, |
24 | 29 | { id: 'user-2', name: 'Bob', avatar: 'https://i.pravatar.cc/150?img=2', role: 'admin' }, |
25 | | - { id: 'user-3', name: 'Charlie', avatar: 'https://i.pravatar.cc/150?img=3', role: 'member' } |
| 30 | + { |
| 31 | + id: 'user-3', |
| 32 | + name: 'Charlie', |
| 33 | + avatar: 'https://i.pravatar.cc/150?img=3', |
| 34 | + role: 'member' |
| 35 | + } |
26 | 36 | ] |
27 | 37 | }); |
28 | 38 |
|
|
75 | 85 | let groupImageDataUrl = $state(group.avatar); |
76 | 86 | let groupImageFiles = $state<FileList | undefined>(); |
77 | 87 |
|
78 | | - $effect(()=> { |
| 88 | + $effect(() => { |
79 | 89 | if (groupImageFiles?.[0]) { |
80 | 90 | const file = groupImageFiles[0]; |
81 | 91 | const reader = new FileReader(); |
|
86 | 96 | }; |
87 | 97 | reader.readAsDataURL(file); |
88 | 98 | } |
89 | | - }) |
90 | | - |
| 99 | + }); |
| 100 | +
|
91 | 101 | function saveGroupInfo() { |
92 | 102 | group.name = groupName; |
93 | 103 | group.description = groupDescription; |
|
99 | 109 | const canEdit = currentUser?.role === 'admin' || currentUser?.role === 'owner'; |
100 | 110 | </script> |
101 | 111 |
|
102 | | -<section class="flex flex-col md:flex-row items-center justify-between gap-4 px-2 md:px-4 py-3 border-b border-gray-200"> |
| 112 | +<section |
| 113 | + class="flex flex-col items-center justify-between gap-4 border-b border-gray-200 px-2 py-3 md:flex-row md:px-4" |
| 114 | +> |
103 | 115 | <div class="flex items-center gap-4"> |
104 | 116 | <Avatar src={group.avatar} /> |
105 | 117 | <div> |
|
120 | 132 | </Button> |
121 | 133 | <button |
122 | 134 | onclick={() => (openEditDialog = true)} |
123 | | - class="border border-brand-burnt-orange-900 rounded-full p-2" |
| 135 | + class="border-brand-burnt-orange-900 rounded-full border p-2" |
124 | 136 | > |
125 | 137 | <Settings size="24px" color="var(--color-brand-burnt-orange)" /> |
126 | 138 | </button> |
127 | 139 | </div> |
128 | 140 | </section> |
129 | 141 |
|
130 | 142 | <section class="chat relative px-0"> |
131 | | - <div class="h-[calc(100vh-300px)] mt-4 overflow-auto" bind:this={messagesContainer}> |
| 143 | + <div class="mt-4 h-[calc(100vh-300px)] overflow-auto" bind:this={messagesContainer}> |
132 | 144 | {#each messages as msg (msg.id)} |
133 | 145 | <ChatMessage |
134 | 146 | isOwn={msg.isOwn} |
|
152 | 164 | open={openEditDialog} |
153 | 165 | use:clickOutside={() => (openEditDialog = false)} |
154 | 166 | onclose={() => (openEditDialog = false)} |
155 | | - class="w-[90vw] md:max-w-[30vw] z-50 absolute start-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-4 border border-gray-400 rounded-3xl bg-white shadow-xl" |
| 167 | + class="absolute start-[50%] top-[50%] z-50 w-[90vw] translate-x-[-50%] translate-y-[-50%] rounded-3xl border border-gray-400 bg-white p-4 shadow-xl md:max-w-[30vw]" |
156 | 168 | > |
157 | 169 | <div class="flex flex-col gap-6"> |
158 | | - <div class="relative w-[96px] h-[96px] self-center"> |
| 170 | + <div class="relative h-[96px] w-[96px] self-center"> |
159 | 171 | <img |
160 | 172 | src={groupImageDataUrl || '/images/avatar-placeholder.png'} |
161 | 173 | alt="Group Avatar" |
162 | | - class="w-full h-full object-cover rounded-full border border-gray-300" |
| 174 | + class="h-full w-full rounded-full border border-gray-300 object-cover" |
163 | 175 | /> |
164 | 176 | {#if canEdit} |
165 | 177 | <input |
|
174 | 186 | } |
175 | 187 | }} |
176 | 188 | /> |
177 | | - <label for="group-avatar-input" class="absolute bottom-0 right-0 bg-brand-burnt-orange border border-brand-burnt-orange rounded-full p-1 shadow cursor-pointer"> |
178 | | - <HugeiconsIcon icon={Pen01FreeIcons} color="white"/> |
| 189 | + <label |
| 190 | + for="group-avatar-input" |
| 191 | + class="bg-brand-burnt-orange border-brand-burnt-orange absolute right-0 bottom-0 cursor-pointer rounded-full border p-1 shadow" |
| 192 | + > |
| 193 | + <HugeiconsIcon icon={Pen01FreeIcons} color="white" /> |
179 | 194 | </label> |
180 | 195 | {/if} |
181 | 196 | </div> |
|
193 | 208 | <Label>Description</Label> |
194 | 209 | {#if canEdit} |
195 | 210 | <!-- svelte-ignore element_invalid_self_closing_tag --> |
196 | | - <textarea rows="2" |
197 | | - maxlength="260" placeholder="Edit group description" class="w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent" bind:value={groupDescription} /> |
| 211 | + <textarea |
| 212 | + rows="2" |
| 213 | + maxlength="260" |
| 214 | + placeholder="Edit group description" |
| 215 | + class="bg-grey text-black-800 font-geist placeholder:text-black-600 invalid:border-red invalid:text-red focus:invalid:text-black-800 w-full rounded-4xl border border-transparent px-6 py-3.5 text-[15px] font-normal outline-0 focus:invalid:border-transparent" |
| 216 | + bind:value={groupDescription} |
| 217 | + /> |
198 | 218 | {:else} |
199 | 219 | <p class="text-gray-700">{group.description}</p> |
200 | 220 | {/if} |
|
203 | 223 | <hr class="text-grey" /> |
204 | 224 |
|
205 | 225 | <div class="flex items-center gap-2"> |
206 | | - <Button size="sm" variant="primary" callback={() => {(openEditDialog = false)}}>Cancel</Button> |
| 226 | + <Button |
| 227 | + size="sm" |
| 228 | + variant="primary" |
| 229 | + callback={() => { |
| 230 | + openEditDialog = false; |
| 231 | + }}>Cancel</Button |
| 232 | + > |
207 | 233 | {#if canEdit} |
208 | 234 | <Button size="sm" variant="secondary" callback={saveGroupInfo}>Save Changes</Button> |
209 | 235 | {/if} |
210 | 236 | </div> |
211 | 237 | </div> |
212 | 238 | </dialog> |
213 | | - |
|
0 commit comments