silberengel
/
gitcitadel-online
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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.
master
DanConwayDev 2 years ago
parent
8ae123fd0b
commit
6f010c29ec
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
5 changed files with 136 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      __snapshots__/users-header--inline-loading.png
  2. BIN
      __snapshots__/users-header--inline.png
  3. 139
      __snapshots__/users-header.test.js.snap
  4. 20
      src/lib/components/users/UserHeader.stories.svelte
  5. 40
      src/lib/components/users/UserHeader.svelte

BIN
__snapshots__/users-header--inline-loading.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
__snapshots__/users-header--inline.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

139
__snapshots__/users-header.test.js.snap
Unescape View File

@ -1,86 +1,131 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Users/Header default smoke-test 1`] = ` exports[`Users/Header default smoke-test 1`] = `
<div class="flex my-2"> <div>
<div class="avatar flex-none"> <div class="flex items-center my-2">
<div class="w-8 h-8 rounded"> <div class="avatar flex-none">
<img class="my-0" <div class="rounded h-8 w-8">
src="../test-profile-image.jpg" <img class="my-0"
alt="DanConwayDev" src="../test-profile-image.jpg"
> alt="DanConwayDev"
>
</div>
</div>
<div class="m-auto flex-auto pl-3">
DanConwayDev
</div> </div>
</div>
<div class="flex-auto pl-3 m-auto">
DanConwayDev
</div> </div>
</div> </div>
`; `;
exports[`Users/Header displayName without name smoke-test 1`] = ` exports[`Users/Header displayName without name smoke-test 1`] = `
<div class="flex my-2"> <div>
<div class="avatar flex-none"> <div class="flex items-center my-2">
<div class="w-8 h-8 rounded"> <div class="avatar flex-none">
<img class="my-0" <div class="rounded h-8 w-8">
src="../test-profile-image.jpg" <img class="my-0"
alt="DanConwayDev" src="../test-profile-image.jpg"
> alt="DanConwayDev"
>
</div>
</div>
<div class="m-auto flex-auto pl-3">
DanConwayDev
</div> </div>
</div> </div>
<div class="flex-auto pl-3 m-auto"> </div>
DanConwayDev `;
exports[`Users/Header inline loading smoke-test 1`] = `
<div class="inline-block">
<div class="flex items-center">
<div class="avatar flex-none">
<div class="rounded h-5 w-5 skeleton">
</div>
</div>
<div class="m-auto flex-auto pl-1">
<div class="skeleton h-4 w-24">
</div>
</div>
</div> </div>
</div> </div>
`; `;
exports[`Users/Header loading smoke-test 1`] = ` exports[`Users/Header inline smoke-test 1`] = `
<div class="flex my-2"> <div class="inline-block">
<div class="avatar flex-none"> <div class="flex items-center">
<div class="w-8 h-8 rounded skeleton"> <div class="avatar flex-none">
<div class="rounded h-5 w-5">
<img class="my-0"
src="../test-profile-image.jpg"
alt="DanConwayDev"
>
</div>
</div>
<div class="m-auto flex-auto pl-1">
DanConwayDev
</div> </div>
</div> </div>
<div class="flex-auto pl-3 m-auto"> </div>
<div class="w-24 h-4 skeleton"> `;
exports[`Users/Header loading smoke-test 1`] = `
<div>
<div class="flex items-center my-2">
<div class="avatar flex-none">
<div class="rounded h-8 w-8 skeleton">
</div>
</div>
<div class="m-auto flex-auto pl-3">
<div class="skeleton h-4 w-24">
</div>
</div> </div>
</div> </div>
</div> </div>
`; `;
exports[`Users/Header name and displayName shows name smoke-test 1`] = ` exports[`Users/Header name and displayName shows name smoke-test 1`] = `
<div class="flex my-2"> <div>
<div class="avatar flex-none"> <div class="flex items-center my-2">
<div class="w-8 h-8 rounded"> <div class="avatar flex-none">
<img class="my-0" <div class="rounded h-8 w-8">
src="../test-profile-image.jpg" <img class="my-0"
alt="Dan" src="../test-profile-image.jpg"
> alt="Dan"
>
</div>
</div>
<div class="m-auto flex-auto pl-3">
Dan
</div> </div>
</div>
<div class="flex-auto pl-3 m-auto">
Dan
</div> </div>
</div> </div>
`; `;
exports[`Users/Header no image smoke-test 1`] = ` exports[`Users/Header no image smoke-test 1`] = `
<div class="flex my-2"> <div>
<div class="avatar flex-none"> <div class="flex items-center my-2">
<div class="w-8 h-8 rounded bg-neutral"> <div class="avatar flex-none">
<div class="rounded h-8 w-8 bg-neutral">
</div>
</div>
<div class="m-auto flex-auto pl-3">
DanConwayDev
</div> </div>
</div>
<div class="flex-auto pl-3 m-auto">
DanConwayDev
</div> </div>
</div> </div>
`; `;
exports[`Users/Header not found smoke-test 1`] = ` exports[`Users/Header not found smoke-test 1`] = `
<div class="flex my-2"> <div>
<div class="avatar flex-none"> <div class="flex items-center my-2">
<div class="w-8 h-8 rounded bg-neutral"> <div class="avatar flex-none">
<div class="rounded h-8 w-8 bg-neutral">
</div>
</div>
<div class="m-auto flex-auto pl-3">
npub18669...
</div> </div>
</div>
<div class="flex-auto pl-3 m-auto">
npub18669...
</div> </div>
</div> </div>
`; `;

20
src/lib/components/users/UserHeader.stories.svelte
Unescape View File

@ -46,3 +46,23 @@
name="name and displayName shows name" name="name and displayName shows name"
args={{ user: { ...vectors.display_name_and_name } }} args={{ user: { ...vectors.display_name_and_name } }}
/> />
<Story
name="inline"
args={{
user: {
...vectors.default,
},
inline: true,
}}
/>
<Story
name="inline loading"
args={{
user: {
...vectors.loading,
},
inline: true,
}}
/>

40
src/lib/components/users/UserHeader.svelte
Unescape View File

@ -7,27 +7,35 @@
loading: true, loading: true,
} }
export let inline = false
$: ({ profile, loading } = user) $: ({ profile, loading } = user)
$: display_name = getName(user) $: display_name = getName(user)
</script> </script>
<div class="my-2 flex"> <div class:inline-block={inline}>
<div class="avatar flex-none"> <div class:my-2={!inline} class="flex items-center">
<div <div class="avatar flex-none">
class="h-8 w-8 rounded" <div
class:skeleton={!profile && loading} class:h-8={!inline}
class:bg-neutral={!loading && (!profile || !profile.image)} class:w-8={!inline}
> class:h-5={inline}
{#if profile && profile?.image} class:w-5={inline}
<img class="my-0" src={profile?.image} alt={display_name} /> class="rounded"
class:skeleton={!profile && loading}
class:bg-neutral={!loading && (!profile || !profile.image)}
>
{#if profile && profile?.image}
<img class="my-0" src={profile?.image} alt={display_name} />
{/if}
</div>
</div>
<div class:pl-3={!inline} class:pl-1={inline} class="m-auto flex-auto pl-3">
{#if loading}
<div class="skeleton h-4 w-24"></div>
{:else}
{display_name}
{/if} {/if}
</div> </div>
</div> </div>
<div class="m-auto flex-auto pl-3">
{#if loading}
<div class="skeleton h-4 w-24"></div>
{:else}
{display_name}
{/if}
</div>
</div> </div>

Write Preview
Loading…
Cancel
Save