Updated Avatar reaction (hcengineering#5852)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
naif0s · Jun 19, 2024 · ca28ef7 · ca28ef7
1 parent b6d5d67
commit ca28ef7
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 43 deletions.
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
@@ -130,15 +130,6 @@
   &.circle img.ava-image { border-radius: 50%; }
   &.roundedRect,
   &.roundedRect img.ava-image { border-radius: 20%; }
-  &.standby {
-    opacity: .5;
-    transition: opacity .5s ease-in-out;
-    pointer-events: all;
-
-    &:hover,
-    &.standbyOn { opacity: 1; }
-    &:hover { transition-duration: .1s; }
-  }
 
   &.no-img {
     color: var(--primary-button-color);
@@ -152,14 +143,18 @@
     border: 1px solid var(--theme-bg-color);
     outline: 2px solid var(--border-color);
 
+    & > img { border: 1px solid var(--theme-bg-color); }
     &.hulyAvatarSize-xx-small,
     &.hulyAvatarSize-inline,
     &.hulyAvatarSize-tiny,
     &.hulyAvatarSize-card,
     &.hulyAvatarSize-x-small { outline-width: 1px; }
     &.hulyAvatarSize-large,
     &.hulyAvatarSize-x-large,
-    &.hulyAvatarSize-2x-large { border-width: 2px; }
+    &.hulyAvatarSize-2x-large {
+      border-width: 2px;
+      & > img { border-width: 2px; }
+    }
   }
   img { object-fit: cover; }
   .icon,

diff --git a/plugins/contact-resources/package.json b/plugins/contact-resources/package.json
@@ -55,6 +55,7 @@
     "@hcengineering/login": "^0.6.12",
     "@hcengineering/templates": "^0.6.11",
     "@hcengineering/image-cropper": "^0.6.0",
-    "@hcengineering/text-editor": "^0.6.0"
+    "@hcengineering/text-editor": "^0.6.0",
+    "@hcengineering/theme": "^0.6.5"
   }
 }
diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
@@ -55,7 +55,6 @@
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let variant: 'circle' | 'roundedRect' | 'none' = 'roundedRect'
   export let borderColor: number | undefined = undefined
-  export let standby: boolean = false
   export let showStatus: boolean = true
   export let account: Ref<Account> | undefined = undefined
 
@@ -141,17 +140,10 @@
       {variant}
       {color}
       {bColor}
-      {standby}
       bind:element
       withStatus
     />
-    {#if showStatus && account}
-      <div
-        class="hulyAvatar-statusMarker {size}"
-        class:online={userStatus?.online}
-        class:offline={!userStatus?.online}
-      />
-    {/if}
+    <div class="hulyAvatar-statusMarker {size}" class:online={userStatus?.online} class:offline={!userStatus?.online} />
   </div>
 {:else}
   <AvatarInstance
@@ -164,7 +156,6 @@
     {variant}
     {color}
     {bColor}
-    {standby}
     bind:element
   />
 {/if}
diff --git a/plugins/contact-resources/src/components/AvatarInstance.svelte b/plugins/contact-resources/src/components/AvatarInstance.svelte
@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { Asset } from '@hcengineering/platform'
+  import { themeStore } from '@hcengineering/theme'
   import { AnySvelteComponent, ColorDefinition, Icon, IconSize, resizeObserver } from '@hcengineering/ui'
   import AvatarIcon from './icons/Avatar.svelte'
 
@@ -25,28 +26,22 @@
   export let variant: 'circle' | 'roundedRect' | 'none' = 'roundedRect'
   export let color: ColorDefinition | undefined = undefined
   export let bColor: string | undefined = undefined
-  export let standby: boolean = false
   export let withStatus: boolean = false
   export let element: HTMLElement
 
   export function pulse (): void {
-    if (element) element.animate(pulsating, { duration: 150, easing: 'ease-out' })
-    if (standby) {
-      standbyMode = false
-      if (timer) clearTimeout(timer)
-      timer = setTimeout(() => {
-        standbyMode = true
-      }, 2000)
-    }
+    if (element === undefined) return
+    const color: string = $themeStore.dark ? '255, 255, 255' : '50, 50, 50'
+    element.animate(
+      [
+        { boxShadow: `0 0 0 .125rem rgba(${color}, .35), 0 0 0 .25rem rgba(${color}, .15)` },
+        { boxShadow: `0 0 0 .125rem rgba(${color}, 0), 0 0 0 .25rem rgba(${color}, 0)` }
+      ],
+      { duration: 250, easing: 'ease-out' }
+    )
   }
 
-  let standbyMode: boolean = standby
-  let timer: any | undefined = undefined
   let fontSize: number = 16
-  const pulsating: Keyframe[] = [
-    { boxShadow: '0 0 .125rem 0 var(--theme-bg-color), 0 0 0 .125rem var(--border-color)' },
-    { boxShadow: '0 0 .375rem .375rem var(--theme-bg-color), 0 0 0 .25rem var(--border-color)' }
-  ]
 </script>
 
 {#if size === 'full' && !url && displayName && displayName !== ''}
@@ -56,8 +51,6 @@
     class:no-img={!url && color}
     class:bordered={!url && color === undefined}
     class:border={bColor !== undefined}
-    class:standby
-    class:standbyOn={standby && !standbyMode}
     class:withStatus
     style:--border-color={bColor ?? 'var(--primary-button-default)'}
     style:background-color={color && !url ? color.icon : 'var(--theme-button-default)'}
@@ -79,8 +72,6 @@
     class:no-img={!url && color}
     class:bordered={!url && color === undefined}
     class:border={bColor !== undefined}
-    class:standby
-    class:standbyOn={standby && !standbyMode}
     class:withStatus
     style:--border-color={bColor ?? 'var(--primary-button-default)'}
     style:background-color={color && !url ? color.icon : 'var(--theme-button-default)'}

diff --git a/plugins/contact-resources/src/components/AvatarRef.svelte b/plugins/contact-resources/src/components/AvatarRef.svelte
@@ -29,7 +29,6 @@
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let variant: 'circle' | 'roundedRect' | 'none' = 'roundedRect'
   export let borderColor: number | undefined = undefined
-  export let standby: boolean = false
   export let showStatus: boolean = true
   export let account: Ref<Account> | undefined = undefined
 
@@ -48,4 +47,4 @@
   }
 </script>
 
-<Avatar person={_contact} {name} {size} {icon} {variant} {borderColor} {standby} {showStatus} {account} />
+<Avatar person={_contact} {name} {size} {icon} {variant} {borderColor} {showStatus} {account} />
diff --git a/plugins/contact-resources/src/components/CollaborationUserAvatar.svelte b/plugins/contact-resources/src/components/CollaborationUserAvatar.svelte
@@ -39,5 +39,5 @@
 </script>
 
 {#if person}
-  <Avatar bind:this={avatar} {size} {person} name={person.name} borderColor={user.color} standby />
+  <Avatar bind:this={avatar} {size} {person} name={person.name} borderColor={user.color} />
 {/if}