mat menu support and docs

Alfresco · Jul 8, 2024 · 36b858f · 36b858f
1 parent 78638fb
commit 36b858f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html
@@ -23,8 +23,13 @@
                     src="https://avatars.githubusercontent.com/u/503991?v=4&size=64"
                     initials="DV"
                     tooltip="Denys Vuika"
-                    >
+                    cursor="pointer"
+                    [matMenuTriggerFor]="userMenu">
                 </adf-avatar>
+                <mat-menu #userMenu="matMenu">
+                    <button mat-menu-item>Item 1</button>
+                    <button mat-menu-item>Item 2</button>
+                </mat-menu>
             </adf-layout-header>
         </ng-template>
     </adf-sidenav-layout-header>

diff --git a/lib/core/src/lib/avatar/avatar.component.md b/lib/core/src/lib/avatar/avatar.component.md
@@ -6,6 +6,8 @@ The Avatar component is a simple component that can be used to display user avat
 
 ## Usage
 
+Displaying an avatar with an image and initials fallback:
+
 ```html
 <adf-avatar
     size="32px"
@@ -16,6 +18,24 @@ The Avatar component is a simple component that can be used to display user avat
 </adf-avatar>
 ```
 
+Integrating with context menu:
+
+```html
+<adf-avatar
+    size="32px"
+    src="https://avatars.githubusercontent.com/u/503991?v=4&size=64"
+    initials="DV"
+    tooltip="Denys Vuika"
+    cursor="pointer"
+    [matMenuTriggerFor]="userMenu">
+</adf-avatar>
+
+<mat-menu #userMenu="matMenu">
+    <button mat-menu-item>Item 1</button>
+    <button mat-menu-item>Item 2</button>
+</mat-menu>
+```
+
 ## API
 
 Import the following standalone components:
@@ -32,6 +52,7 @@ import { AvatarComponent } from '@alfresco/adf-core';
 | `src`      | string |         | The URL of the image to display.                       |
 | `initials` | string |         | The initials to display if the image is not available. |
 | `tooltip`  | string |         | The tooltip to display when hovering over the avatar.  |
+| `cursor`   | string | `auto`  | The cursor style.                                      |
 
 ## Theming
 
@@ -52,3 +73,5 @@ The following CSS classes are available for theming:
 | `--adf-avatar-color`            | `#333`    | The text color of the initials.     |
 | `--adf-avatar-font-size`        | `16px`    | The font size of the initials.      |
 | `--adf-avatar-font-weight`      | `400`     | The font weight of the initials.    |
+| `--adf-avatar-cursor`           | `auto`    | The cursor style.                   |
+```
diff --git a/lib/core/src/lib/avatar/avatar.component.scss b/lib/core/src/lib/avatar/avatar.component.scss
@@ -3,7 +3,7 @@
 }
 
 .adf-avatar__image {
-    cursor: default;
+    cursor: var(--adf-avatar-cursor, auto);
     display: inline-block;
     overflow: hidden;
     line-height: 1;

diff --git a/lib/core/src/lib/avatar/avatar.component.ts b/lib/core/src/lib/avatar/avatar.component.ts
@@ -39,4 +39,8 @@ export class AvatarComponent {
     @HostBinding('style.--adf-avatar-size')
     @Input()
     size = getComputedStyle(document.documentElement).getPropertyValue('--adf-avatar-size');
+
+    @HostBinding('style.--adf-avatar-cursor')
+    @Input()
+    cursor = getComputedStyle(document.documentElement).getPropertyValue('--adf-avatar-cursor');
 }