superdesk-ui-framework 3.0.21 → 3.0.24

package/app/styles/_avatar.scss

@@ -1,5 +1,5 @@
 .sd-avatar {
-    display: inline-block;
+    display: block;
     position: relative; // required for absolutely positioned indicators
 
     &.sd-avatar--indicator-status--offline {
@@ -339,3 +339,14 @@
         gap: $sd-base-increment * 1.5;
     }
 }
+
+.avatar-popup {
+    background-color: var(--color-dropdown-menu-Bg);
+    border-radius: 5px;
+    padding: 1.5rem;
+    box-shadow: var(--sd-shadow__dropdown);
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    overflow: auto;
+}

package/app/styles/_icon-font.scss

@@ -324,7 +324,10 @@ $sd-icon-font: (
         &.color--white {
             color: hsla(214, 13%, 90, 1) !important;
         }
-
+        
+        &.scale--1\.5x {
+            --icon-base-size: 24px
+        }
         &.scale--2x {
             --icon-base-size: 32px
         }

package/app-typescript/components/Icon.tsx

@@ -5,7 +5,7 @@ interface IProps {
     size?: 'small' | 'big'; // defaults to 'small'
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light' | 'white';
     className?: string;
-    scale?: '2x' | '3x' | '4x';
+    scale?: '1.5x' | '2x' | '3x' | '4x';
     ariaHidden?: boolean;
     color?: string;
 }

package/app-typescript/components/ShowPopup.tsx

@@ -123,7 +123,7 @@ class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
                 ref={(el) => {
                     this.wrapperEl = el;
                 }}
-                style={{zIndex: this.props.zIndex ?? 1, position: 'absolute', left: '-100vw'}}
+                style={{zIndex: this.props.zIndex ?? 1, position: 'absolute', left: '-100vw', display: 'flex'}}
             >
                 {this.props.children}
             </div>

package/app-typescript/components/avatar/avatar-group.tsx

@@ -4,6 +4,8 @@ import {Avatar, IPropsAvatar} from './avatar';
 import {AvatarWrapper} from './avatar-wrapper';
 import {AvatarContentNumber} from './avatar-number';
 import {AvatarPlaceholder, IPropsAvatarPlaceholder} from './avatar-placeholder';
+import { Spacer } from '../Spacer';
+import {WithPopover} from '../WithPopover';
 
 export type IAvatarInGroup = Omit<IPropsAvatar, 'size'>;
 export type IAvatarPlaceholderInGroup = Omit<IPropsAvatarPlaceholder, 'size'>;
@@ -21,6 +23,13 @@ export interface IPropsAvatarGroup {
      * if exceeded, "+1"/"+2"/"+n" button will be shown
      */
     max?: number | 'show-all';
+
+    zIndex?: number;
+
+    // unless a custom onClick handler is passed
+    // a popover would get shown when maximum number
+    // of avatars is exceeded.
+    onClick?(): void;
 }
 
 function isAvatar(item: IAvatarInGroup | IAvatarPlaceholderInGroup): item is IAvatarInGroup {
@@ -46,41 +55,117 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
         })();
         const itemsOverLimit = items.length - max;
 
+        const PlusButtonWrapper: React.ComponentType<{onToggle(event: HTMLElement): void}> = ({children, onToggle}) => {
+            if (this.props.onClick == null) {
+                return (
+                    <button
+                        style={{padding: 0}}
+                        onClick={(event) => {
+                            if (this.props.onClick == null) {
+                                onToggle(event.target as HTMLElement);
+                            }
+                        }}
+                    >
+                       {children}
+                    </button>
+                );
+            } else {
+                return <>{children}</>;
+            }
+        };
+
+        const someHaveDisplayName = this.props.items.some((item) => isAvatar(item) && item.displayName.length > 0);
+
         return (
-            <div
-                className={classNames(
-                    'sd-avatar-group',
-                    'sd-avatar-group--stacked',
-                    `sd-avatar-group--stacked--gap-${gap}`,
-                )}
-                role='group'
-            >
-                {
-                    items.slice(0, max).map((item, index) => {
-                        if (isAvatar(item)) {
+            <WithPopover
+                zIndex={this.props.zIndex ?? 101}
+                placement='bottom-end'
+                component={() => (
+                    <div className="avatar-popup">
+                        {this.props.items.map((item, index) => {
                             return (
-                                <Avatar {...item} key={index} size={size} />
-                            );
-                        } else {
-                            return (
-                                <AvatarPlaceholder
-                                    {...item}
-                                    key={index}
-                                    size={this.props.size}
-                                />
+                                someHaveDisplayName
+                                    ? <Spacer h alignItems='center' gap='16' noGrow key={index}>
+                                        {
+                                            isAvatar(item)
+                                                && item.displayName
+                                        }
+
+                                        {
+                                            isAvatar(item)
+                                                ? (
+                                                    <Avatar
+                                                        size='small'
+                                                        imageUrl={item.imageUrl}
+                                                        initials={item.initials}
+                                                        displayName={item.displayName}
+                                                        icon={item.icon}
+                                                    />
+                                                )
+                                                : (
+                                                    <AvatarPlaceholder
+                                                        kind='plus-button'
+                                                        size='small'
+                                                        icon={item.icon}
+                                                        onClick={item.onClick}
+                                                    />
+                                                )
+                                        }
+                                    </Spacer>
+                                    : <div>
+                                        <AvatarPlaceholder
+                                            kind='plus-button'
+                                            size='small'
+                                            icon={item.icon}
+                                            onClick={isAvatar(item) ? undefined : item.onClick}
+                                            key={index}
+                                        />
+                                    </div>
                             );
+                        })}
+                    </div>
+                )}
+            >
+                {(onToggle) => (
+                    <div
+                        className={classNames(
+                            'sd-avatar-group',
+                            'sd-avatar-group--stacked',
+                            `sd-avatar-group--stacked--gap-${gap}`,
+                        )}
+                        role='group'
+                        onClick={this.props.onClick}
+                    >
+                        {
+                            items.slice(0, max).map((item, index) => {
+                                if (isAvatar(item)) {
+                                    return (
+                                        <Avatar {...item} key={index} size={size} />
+                                    );
+                                } else {
+                                    return (
+                                        <AvatarPlaceholder
+                                            {...item}
+                                            key={index}
+                                            size={this.props.size}
+                                        />
+                                    );
+                                }
+                            })
                         }
-                    })
-                }
 
-                {
-                    itemsOverLimit > 0 && (
-                        <AvatarWrapper size={size} isEmpty={false}>
-                            <AvatarContentNumber number={`${itemsOverLimit}`} />
-                        </AvatarWrapper>
-                    )
-                }
-            </div>
+                        {
+                            itemsOverLimit > 0 && (
+                                <PlusButtonWrapper onToggle={onToggle}>
+                                    <AvatarWrapper size={size} isEmpty={false}>
+                                        <AvatarContentNumber number={`${itemsOverLimit}`} />
+                                    </AvatarWrapper>
+                                </PlusButtonWrapper>
+                            )
+                        }
+                    </div>
+                )}
+            </WithPopover>
         );
     }
 }

package/app-typescript/components/avatar/avatar.tsx

@@ -5,7 +5,7 @@ import {AvatarContentText} from './avatar-text';
 
 export interface IPropsAvatar {
     imageUrl: string | null; // nullable, but mandatory to communicate importance
-    tooltip: string | null; // nullable, but mandatory to communicate importance
+    displayName: string;
 
     /** 3 letters max */
     initials: string | null; // nullable, but mandatory to communicate importance
@@ -22,7 +22,7 @@ export interface IPropsAvatar {
 
 export class Avatar extends React.PureComponent<IPropsAvatar> {
     render() {
-        const {imageUrl, initials, size, statusIndicator, administratorIndicator, icon, tooltip} = this.props;
+        const {imageUrl, initials, size, statusIndicator, administratorIndicator, icon, displayName} = this.props;
 
         return (
             <AvatarWrapper
@@ -35,10 +35,10 @@ export class Avatar extends React.PureComponent<IPropsAvatar> {
                 {
                     imageUrl != null || initials == null
                         ? (
-                            <AvatarContentImage imageUrl={imageUrl} tooltipText={tooltip ?? undefined} />
+                            <AvatarContentImage imageUrl={imageUrl} tooltipText={displayName} />
                         )
                         : (
-                            <AvatarContentText text={initials} tooltipText={tooltip ?? undefined} />
+                            <AvatarContentText text={initials} tooltipText={displayName} />
                         )
                 }