|
8 | 8 | import AccountCenter from './account-center/Index.svelte' |
9 | 9 | import Notify from './notify/Index.svelte' |
10 | 10 | import { configuration } from '../configuration' |
| 11 | + import type { Observable } from 'rxjs' |
| 12 | + import type { Notification } from '../types' |
11 | 13 |
|
12 | 14 | const { device } = configuration |
13 | 15 | const accountCenter$ = state |
|
17 | 19 | const notify$ = state |
18 | 20 | .select('notify') |
19 | 21 | .pipe(startWith(state.get().notify), shareReplay(1)) |
| 22 | +
|
| 23 | + const notifications$: Observable<Notification[]> = state |
| 24 | + .select('notifications') |
| 25 | + .pipe(startWith(state.get().notifications)) |
| 26 | +
|
20 | 27 | const positioningDefaults = { |
21 | 28 | topLeft: 'top: 0; left: 0;', |
22 | 29 | topRight: 'top: 0; right: 0;', |
23 | 30 | bottomRight: 'bottom: 0; right: 0;', |
24 | 31 | bottomLeft: 'bottom: 0; left: 0;' |
25 | 32 | } |
| 33 | +
|
| 34 | + $: sharedContainer = |
| 35 | + $accountCenter$.enabled && |
| 36 | + $notify$.enabled && |
| 37 | + $notify$.position === $accountCenter$.position |
| 38 | +
|
| 39 | + $: samePositionOrMobile = |
| 40 | + device.type === 'mobile' || $accountCenter$.position === $notify$.position |
| 41 | +
|
| 42 | + $: sharedMobileContainerCheck = |
| 43 | + device.type === 'mobile' && |
| 44 | + (($notify$.position.includes('bottom') && |
| 45 | + $accountCenter$.position.includes('bottom')) || |
| 46 | + ($notify$.position.includes('top') && |
| 47 | + $accountCenter$.position.includes('top'))) |
| 48 | +
|
| 49 | + $: separateMobileContainerCheck = |
| 50 | + device.type === 'mobile' && |
| 51 | + (($notify$.position.includes('top') && |
| 52 | + $accountCenter$.position.includes('bottom')) || |
| 53 | + ($notify$.position.includes('bottom') && |
| 54 | + $accountCenter$.position.includes('top'))) |
| 55 | +
|
| 56 | + $: displayNotifySeparate = |
| 57 | + $notify$.enabled && |
| 58 | + (!$accountCenter$.enabled || |
| 59 | + ($notify$.position !== $accountCenter$.position && |
| 60 | + device.type !== 'mobile') || |
| 61 | + separateMobileContainerCheck) && |
| 62 | + $wallets$.length |
| 63 | +
|
| 64 | + $: displayAccountCenterSeparate = |
| 65 | + $accountCenter$.enabled && |
| 66 | + (!$notify$.enabled || |
| 67 | + ($notify$.position !== $accountCenter$.position && |
| 68 | + device.type !== 'mobile') || |
| 69 | + separateMobileContainerCheck) && |
| 70 | + $wallets$.length |
| 71 | +
|
| 72 | + $: displayAccountCenterNotifySameContainer = |
| 73 | + $notify$.enabled && |
| 74 | + $accountCenter$.enabled && |
| 75 | + $wallets$.length && |
| 76 | + (sharedContainer || sharedMobileContainerCheck) |
26 | 77 | </script> |
27 | 78 |
|
28 | 79 | <style> |
|
280 | 331 | <SwitchChain /> |
281 | 332 | {/if} |
282 | 333 |
|
283 | | -{#if $notify$.enabled && $accountCenter$.enabled && $wallets$.length} |
| 334 | +{#if displayAccountCenterNotifySameContainer} |
284 | 335 | <div |
285 | 336 | class="container flex flex-column fixed z-indexed" |
286 | 337 | style="{positioningDefaults[$accountCenter$.position]}; {device.type === |
|
290 | 341 | ? 'padding-top:0;' |
291 | 342 | : ''} " |
292 | 343 | > |
293 | | - {#if $notify$.position.includes('bottom') && $accountCenter$.position.includes('bottom') && (device.type === 'mobile' || $accountCenter$.position === $notify$.position)} |
294 | | - <Notify position={$notify$.position} sharedContainer={true} /> |
| 344 | + {#if $notify$.position.includes('bottom') && $accountCenter$.position.includes('bottom') && samePositionOrMobile} |
| 345 | + <Notify |
| 346 | + notifications={$notifications$} |
| 347 | + position={$notify$.position} |
| 348 | + {sharedContainer} |
| 349 | + /> |
295 | 350 | {/if} |
296 | 351 | <div |
297 | 352 | style={!$accountCenter$.expanded && |
|
306 | 361 | > |
307 | 362 | <AccountCenter settings={$accountCenter$} /> |
308 | 363 | </div> |
309 | | - {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && (device.type === 'mobile' || $accountCenter$.position === $notify$.position)} |
310 | | - <Notify position={$notify$.position} sharedContainer={true} /> |
| 364 | + {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && samePositionOrMobile} |
| 365 | + <Notify |
| 366 | + notifications={$notifications$} |
| 367 | + position={$notify$.position} |
| 368 | + {sharedContainer} |
| 369 | + /> |
311 | 370 | {/if} |
312 | 371 | </div> |
313 | 372 | {/if} |
314 | | -{#if $accountCenter$.enabled && (!$notify$.enabled || ($notify$.position !== $accountCenter$.position && device.type !== 'mobile')) && $wallets$.length} |
| 373 | +{#if displayAccountCenterSeparate} |
315 | 374 | <div |
316 | 375 | class="container flex flex-column fixed z-indexed" |
317 | 376 | style="{positioningDefaults[$accountCenter$.position]}; {device.type === |
|
338 | 397 | </div> |
339 | 398 | </div> |
340 | 399 | {/if} |
341 | | -{#if $notify$.enabled && (!$accountCenter$.enabled || ($notify$.position !== $accountCenter$.position && device.type !== 'mobile') || ($notify$.position.includes('top') && $accountCenter$.position.includes('bottom')) || ($notify$.position.includes('bottom') && $accountCenter$.position.includes('top'))) && $wallets$.length} |
| 400 | +{#if displayNotifySeparate} |
342 | 401 | <div |
343 | 402 | class="container flex flex-column fixed z-indexed" |
344 | 403 | style="{positioningDefaults[$notify$.position]}; {device.type === |
|
348 | 407 | ? 'padding-top:0;' |
349 | 408 | : ''} " |
350 | 409 | > |
351 | | - <Notify position={$notify$.position} sharedContainer={false} /> |
| 410 | + <Notify |
| 411 | + notifications={$notifications$} |
| 412 | + position={$notify$.position} |
| 413 | + {sharedContainer} |
| 414 | + /> |
352 | 415 | </div> |
353 | 416 | {/if} |
0 commit comments