MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

passing in a name now shows initials in Avatar component

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-05 11:00:04 +02:00
parent 40f2bed090
commit 8861adc3f1
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/bbui/src/Avatar/Avatar.svelte
View File

@ -12,7 +12,12 @@
export let size = "M" export let size = "M"
export let url = "" export let url = ""
export let disabled = false export let disabled = false
export let initials = "KA" export let name = "John Doe"
function getInitials(name) {
let parts = name.split(" ")
return parts.map((name) => name[0]).join("")
}
</script> </script>
{#if url} {#if url}
@ -25,11 +30,12 @@
/> />
{:else} {:else}
<div <div
class:is-disabled={disabled}
style="width: var({sizes.get(size)}); height: var({sizes.get( style="width: var({sizes.get(size)}); height: var({sizes.get(
size size
)}); font-size: calc(var({sizes.get(size)}) / 2)" )}); font-size: calc(var({sizes.get(size)}) / 2)"
> >
{initials} {getInitials(name)}
</div> </div>
{/if} {/if}
@ -38,7 +44,7 @@
color: white; color: white;
display: grid; display: grid;
place-items: center; place-items: center;
font-weight: bold; font-weight: 500;
background: rgb(63, 94, 251); background: rgb(63, 94, 251);
background: linear-gradient( background: linear-gradient(
155deg, 155deg,
@ -47,5 +53,6 @@
); );
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
user-select: none;
} }
</style> </style>