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 index 189261cb607..31c840191d1 100644 --- 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"> + + + + diff --git a/lib/core/src/lib/avatar/avatar.component.md b/lib/core/src/lib/avatar/avatar.component.md index 697541df5c3..bd2aea54af4 100644 --- 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 ``` +Integrating with context menu: + +```html + + + + + + + +``` + ## 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 index fd683f11668..67e69728c52 100644 --- 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 index 8d572753095..9a868c769ae 100644 --- 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'); }