From 6f010c29ec629dc29401e248aef6004e70847cb4 Mon Sep 17 00:00:00 2001 From: DanConwayDev Date: Mon, 5 Feb 2024 10:18:00 +0000 Subject: [PATCH] feat(UserHeader): add inline flag this option reduces the size of the avatar so that it doesn't effect the line height. note this only works at the text size / line-height where the component is currently used. --- .../users-header--inline-loading.png | Bin 0 -> 5811 bytes __snapshots__/users-header--inline.png | Bin 0 -> 9841 bytes __snapshots__/users-header.test.js.snap | 139 ++++++++++++------ .../users/UserHeader.stories.svelte | 20 +++ src/lib/components/users/UserHeader.svelte | 40 +++-- 5 files changed, 136 insertions(+), 63 deletions(-) create mode 100644 __snapshots__/users-header--inline-loading.png create mode 100644 __snapshots__/users-header--inline.png diff --git a/__snapshots__/users-header--inline-loading.png b/__snapshots__/users-header--inline-loading.png new file mode 100644 index 0000000000000000000000000000000000000000..d14b75e808ba568f6e323856439e9ecf01e241f6 GIT binary patch literal 5811 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 literal 0 HcmV?d00001 diff --git a/__snapshots__/users-header.test.js.snap b/__snapshots__/users-header.test.js.snap index 76007a6..830cdec 100644 --- a/__snapshots__/users-header.test.js.snap +++ b/__snapshots__/users-header.test.js.snap @@ -1,86 +1,131 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Users/Header default smoke-test 1`] = ` -
-
-
- DanConwayDev +
+
+
+
+ DanConwayDev +
+
+
+ DanConwayDev
-
-
- DanConwayDev
`; exports[`Users/Header displayName without name smoke-test 1`] = ` -
-
-
- DanConwayDev +
+
+
+
+ DanConwayDev +
+
+
+ DanConwayDev
-
- DanConwayDev +
+`; + +exports[`Users/Header inline loading smoke-test 1`] = ` +
+
+
+
+
+
+
+
+
+
`; -exports[`Users/Header loading smoke-test 1`] = ` -
-
-
+exports[`Users/Header inline smoke-test 1`] = ` +
+
+
+
+ DanConwayDev +
+
+
+ DanConwayDev
-
-
+
+`; + +exports[`Users/Header loading smoke-test 1`] = ` +
+
+
+
+
+
+
+
+
`; exports[`Users/Header name and displayName shows name smoke-test 1`] = ` -
-
-
- Dan +
+
+
+
+ Dan +
+
+
+ Dan
-
-
- Dan
`; exports[`Users/Header no image smoke-test 1`] = ` -
-
-
+
+
+
+
+
+
+
+ DanConwayDev
-
-
- DanConwayDev
`; exports[`Users/Header not found smoke-test 1`] = ` -
-
-
+
+
+
+
+
+
+
+ npub18669...
-
-
- npub18669...
`; diff --git a/src/lib/components/users/UserHeader.stories.svelte b/src/lib/components/users/UserHeader.stories.svelte index e62c277..fc2e3d3 100644 --- a/src/lib/components/users/UserHeader.stories.svelte +++ b/src/lib/components/users/UserHeader.stories.svelte @@ -46,3 +46,23 @@ name="name and displayName shows name" args={{ user: { ...vectors.display_name_and_name } }} /> + + + + diff --git a/src/lib/components/users/UserHeader.svelte b/src/lib/components/users/UserHeader.svelte index 502466c..2f4a0e6 100644 --- a/src/lib/components/users/UserHeader.svelte +++ b/src/lib/components/users/UserHeader.svelte @@ -7,27 +7,35 @@ loading: true, } + export let inline = false + $: ({ profile, loading } = user) $: display_name = getName(user) -
-
-
- {#if profile && profile?.image} - {display_name} +
+
+
+
+ {#if profile && profile?.image} + {display_name} + {/if} +
+
+
+ {#if loading} +
+ {:else} + {display_name} {/if}
-
- {#if loading} -
- {:else} - {display_name} - {/if} -