Fixed the mouse pointer over the Avatar (#9000)

packages/theme/styles/_layouts.scss

@@ -320,7 +320,8 @@ input.search {
 .flex-presenter, .inline-presenter {
   flex-wrap: nowrap;
   min-width: 0;
-  cursor: pointer;
+
+  &:not(.no-pointer) { cursor: pointer; }
 
   .icon {
     color: var(--theme-dark-color);

packages/theme/styles/components.scss

@@ -128,18 +128,7 @@
   flex-shrink: 0;
   aspect-ratio: 1;
   background-color: var(--theme-button-default);
-  pointer-events: none;
+  // pointer-events: none;
-
-  &.clickable {
-    cursor: pointer;
-    pointer-events: auto;
-
-    & > * {
-      pointer-events: none;
-      user-select: none;
-      -webkit-user-drag: none;
-    }
-  }
 
   &.withStatus {
     mask-repeat: no-repeat;
@@ -211,6 +200,12 @@
       transform: translate(-50%, -50%);
     }
   }
+
+  & > * {
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
 }
 
 /* Avatar sizes */

plugins/contact-resources/src/components/Avatar.svelte

@@ -123,7 +123,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="flex-presenter" use:tooltip={getPreviewPopup(person, showPreview)} on:click>
+<div class="flex-presenter" class:no-pointer={!clickable} use:tooltip={getPreviewPopup(person, showPreview)} on:click>
   {#if showStatus && person}
     <div class="relative">
       <AvatarInstance
@@ -140,7 +140,6 @@
         {adaptiveName}
         {disabled}
         {style}
-        {clickable}
         withStatus
       />
       <div
@@ -164,13 +163,6 @@
       {adaptiveName}
       {disabled}
       {style}
-      {clickable}
     />
   {/if}
 </div>
-
-<style>
-  .flex-presenter {
-    cursor: pointer;
-  }
-</style>

plugins/contact-resources/src/components/AvatarInstance.svelte

@@ -34,7 +34,6 @@
   export let adaptiveName: boolean = false
   export let disabled: boolean = false
   export let style: 'modern' | undefined = undefined
-  export let clickable: boolean = false
 
   function handleClick (): void {
     dispatch('click')
@@ -73,7 +72,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     bind:this={element}
-    class="hulyAvatar-container hulyAvatarSize-{size} {variant} {style} {clickable ? 'clickable' : ''}"
+    class="hulyAvatar-container hulyAvatarSize-{size} {variant} {style}"
     class:no-img={!hasImg && color}
     class:bordered={!hasImg && color === undefined}
     class:border={bColor !== undefined}
@@ -97,7 +96,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     bind:this={element}
-    class="hulyAvatar-container hulyAvatarSize-{size} {variant} {style} {clickable ? 'clickable' : ''}"
+    class="hulyAvatar-container hulyAvatarSize-{size} {variant} {style}"
     class:no-img={!hasImg && color}
     class:bordered={!hasImg && color === undefined}
     class:border={bColor !== undefined}
@@ -131,17 +130,3 @@
     {/if}
   </div>
 {/if}
-
-<style>
-  .clickable {
-    cursor: pointer;
-  }
-  .clickable > * {
-    pointer-events: none;
-  }
-  .clickable img {
-    pointer-events: none;
-    user-select: none;
-    -webkit-user-drag: none;
-  }
-</style>