WEBDIENSTE/huly-platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2026-10-01 14:05:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update Avatar (#301)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
2021-11-10 21:10:11 +01:00
committed by GitHub
parent f4cb89b251
commit 07629bc91e
7 changed files with 82 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/presentation/src/components/Avatar.svelte
+51 -14
View File
@@ -21,41 +21,78 @@
export let avatar: string | undefined = undefined
export let size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
const url = avatar ? getFileUrl(avatar) : undefined
$: url = avatar ? getFileUrl(avatar) : undefined
</script>
<div class="{size} container">
<div class="{size} flex-center container" class:no-img={!url}>
{#if url}
<img class={size} src={url} alt={''}/>
{#if size === 'large' || size === 'x-large'}
<img class="{size} blur" src={url} alt={''}/>
{/if}
<img class="{size} mask" src={url} alt={''}/>
{:else}
<Avatar {size}/>
{/if}
</div>
<style lang="scss">
@import '../../../../packages/theme/styles/mixins.scss';
.container {
flex-shrink: 0;
position: relative;
overflow: hidden;
border-radius: 50%;
pointer-events: none;
img { object-fit: cover; }
&.no-img {
border: 2px solid var(--theme-avatar-border);
&::after {
content: '';
@include bg-layer(var(--theme-avatar-hover), .5);
}
&::before {
content: '';
@include bg-layer(var(--theme-avatar-bg), .1);
}
}
}
.x-small {
width: 1.5rem;
width: 1.5rem; // 24
height: 1.5rem;
.mask, &.no-img { border-style: none; }
}
.small {
width: 2rem;
width: 2rem; // 32
height: 2rem;
.mask, &.no-img { border-style: none; }
}
.medium {
width: 2.25rem;
width: 2.25rem; // 36
height: 2.25rem;
.mask, &.no-img { border-style: none; }
}
.large {
width: 5rem;
height: 5rem;
width: 4.5rem; // 72
height: 4.5rem;
}
.x-large {
width: 10rem;
height: 10rem;
width: 7.5rem; // 120
height: 7.5rem;
}
.container {
overflow: hidden;
border: 50%;
pointer-events: none;
.blur {
position: absolute;
filter: blur(32px);
}
.mask {
position: absolute;
border: 2px solid var(--theme-avatar-border);
border-radius: 50%;
}
// .shadow { filter: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8)); }
</style>
packages/presentation/src/components/icons/Avatar.svelte
+21 -3
View File
@@ -20,7 +20,7 @@
const fill: string = 'var(--theme-caption-color)'
</script>
<svg class="svg-avatar svg-{size}" {fill} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<svg class="svg-avatar {size}" {fill} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle class="op" cx="20" cy="13.6" r="6.4"/>
<path d="M33.1,33.3c-0.8-2.2-2.5-4.2-4.9-5.5c-2.3-1.3-5.2-2.1-8.2-2.1s-5.8,0.7-8.2,2.1c-2.4,1.4-4.1,3.3-4.9,5.5 c-0.1,0.4,0.1,0.8,0.5,1c0.4,0.1,0.8-0.1,1-0.5c0.7-1.9,2.2-3.5,4.2-4.7c2.1-1.2,4.7-1.9,7.4-1.9c2.7,0,5.3,0.7,7.4,1.9 c2.1,1.2,3.6,2.9,4.2,4.7c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.2,0,0.3,0C33,34.1,33.2,33.7,33.1,33.3z"/>
<path d="M20,20.8c3.9,0,7.1-3.2,7.1-7.1S23.9,6.5,20,6.5c-3.9,0-7.1,3.2-7.1,7.1S16.1,20.8,20,20.8z M20,8 c3.1,0,5.6,2.5,5.6,5.6s-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6S16.9,8,20,8z"/>
@@ -28,9 +28,27 @@
<style lang="scss">
.svg-avatar {
width: 1.25rem;
height: 1.25rem;
fill: var(--theme-caption-color);
.op { opacity: .05; }
}
.x-small {
width: 1rem;
height: 1rem;
}
.small {
width: 1.25rem;
height: 1.25rem;
}
.medium {
width: 1.5rem;
height: 1.5rem;
}
.large {
width: 1.75rem;
height: 1.75rem;
}
.x-large {
width: 3rem;
height: 3rem;
}
</style>