superdesk-ui-framework 3.0.18 → 3.0.20

package/app/styles/_avatar.scss

@@ -2,25 +2,30 @@
     display: inline-block;
     position: relative; // required for absolutely positioned indicators
 
-    &--indicator-status--offline {
-        display: block;
-        background-color: var(--sd-item__main-Bg);
-        height: 8px;
-        width: 8px;
-        border-radius: $border-radius__base--full;
-        position: absolute;
-        inset-block-end: -1px;
-        inset-inline-start: auto;
-        inset-inline-end: -4px;
-        box-shadow: 0px 0 0 2px var(--sd-item__main-Bg);
-        border: 1px solid #a2c59e;
-        box-sizing: border-box;
+    &.sd-avatar--indicator-status--offline {
+        .sd-avatar-content {
+            outline: 2px solid var(--sd-colour-avatar-outline--offline);
+            outline-offset: 2px;
+        }
+        &.sd-avatar--x-small,
+        &.sd-avatar--small {
+            .sd-avatar-content {
+                outline: 1px solid var(--sd-colour-avatar-outline--offline);
+            }
+        }
     }
 
-    &--indicator-status--online {
-        @extend .sd-avatar--indicator-status--offline;
-        background-color: #67b461;
-        border: 1px solid #67b461;
+    &.sd-avatar--indicator-status--online {
+        .sd-avatar-content {
+            outline: 2px solid var(--sd-colour-avatar-outline--online);
+            outline-offset: 2px;
+        }
+        &.sd-avatar--x-small,
+        &.sd-avatar--small {
+            .sd-avatar-content {
+                outline: 1px solid var(--sd-colour-avatar-outline--online);
+            }
+        }
     }
 
     &--indicator-admin {
@@ -46,6 +51,17 @@
         }
     }
 
+    &--x-small {
+        height: 20px;
+        width: 20px;
+        font-size: 1rem;
+
+        .sd-avatar--indicator-admin {
+            inset-block-start: -4px;
+            left: -6px;
+        }
+    }
+
     &--small {
         height: 24px;
         width: 24px;
@@ -60,7 +76,7 @@
     &--medium {
         height: 30px;
         width: 30px;
-        font-size: 1rem;
+        font-size: 1.4rem;
     }
 
     &--large {
@@ -147,25 +163,135 @@
         text-transform: uppercase;
         letter-spacing: -0.03em;
         overflow: hidden;
-    
+
         > img {
             width: 100%;
         }
 
         &--text {
-            background-color: #005b7f;
+            background-color: var(--sd-colour-avatar-bg);
         }
-    
-        &--empty {
-            background-color: #005b7f;
-            background-image: url('~../../images/avatar_64.png');
+
+        &--dummy-img {
+            background-color: var(--sd-colour-avatar-bg);
+            background-image: url('~../../images/avatar_dummy.svg');
             background-repeat: no-repeat;
             background-size: cover;
-            box-shadow: inset 0 0 0 1px #005b7f;
+            border: 1px solid var(--sd-colour-avatar-border);
+            //box-shadow: inset 0 0 0 1px #005b7f;
+        }
+        &.sd-avatar-content--add-item {
+            background-color: var(--sd-colour-avatar-bg--light);
+            border: 1px dashed var(--sd-colour-avatar-border--light);
+            background-image: linear-gradient(var(--sd-colour-avatar-add) 0 0), linear-gradient(var(--sd-colour-avatar-add) 0 0);
+            background-position:center;
+            background-size: 50% 2px,2px 50%; /*thickness = 2px, length = 50% (25px)*/
+            background-repeat:no-repeat;
+            outline: 1px solid transparent;
+            outline-offset: 0px;
+            transition: all 0.2s ease;
+        }
+
+        &.sd-avatar-content--add-item--clickable {
+            &:hover {
+                background-image: linear-gradient(var(--sd-colour-avatar-add--hover) 0 0), linear-gradient(var(--sd-colour-avatar-add--hover) 0 0);
+                cursor: pointer;
+                outline: 1px solid var(--sd-colour-interactive);
+                outline-offset: 2px;
+            }
+            &:active {
+                background-image: linear-gradient(var(--sd-colour-avatar-add) 0 0), linear-gradient(var(--sd-colour-avatar-add) 0 0);
+                cursor: pointer;
+                outline: 2px solid var(--sd-colour-interactive);
+            }
+        }
+
+        &.sd-avatar-content--number {
+            background-color: var(--sd-colour-avatar-bg--light);
+            color: var(--color-text-light);
+            outline: 1px solid transparent;
+            outline-offset: 0px;
+            transition: all 0.2s ease;
+            &:hover {
+                cursor: pointer;
+                outline: 1px solid var(--sd-colour-interactive);
+                outline-offset: 2px;
+            }
+            &:active {
+                cursor: pointer;
+                outline: 2px solid var(--sd-colour-interactive);
+            }
+        }
+    }
+
+    &.sd-avatar--empty-light {
+        .sd-avatar-content--dummy-img {
+            background-color: var(--sd-colour-avatar-bg--light);
+            border: 1px dashed var(--sd-colour-avatar-border--light);
+        }
+    }
+
+    .sd-avatar__icon {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1;
+        inset-block-end: -4px;
+        inset-inline-end: -4px;
+        [class^="icon-"], [class*=" icon-"] {
+            text-shadow: -1px 1px 0 var(--sd-item__main-Bg), 1px 1px 0 var(--sd-item__main-Bg), 1px -1px 0 var(--sd-item__main-Bg), -1px -1px 0 var(--sd-item__main-Bg);
+        }
+
+    }
+    &.sd-avatar--x-small {
+        .sd-avatar__icon {
+            inset-block-end: -4px;
+            inset-inline-end: -10px;
+        }
+    }
+    &.sd-avatar--small {
+        .sd-avatar__icon {
+            inset-block-end: -4px;
+            inset-inline-end: -8px;
+        }
+    }
+    &.sd-avatar--medium {
+        .sd-avatar__icon {
+            inset-block-end: -3px;
+            inset-inline-end: -6px;
+        }
+    }
+    &.sd-avatar--large {
+        .sd-avatar__icon {
+            inset-block-end: -1px;
+            inset-inline-end: -4px;
+        }
+    }
+    &.sd-avatar--x-large {
+        .sd-avatar__icon {
+            inset-block-end: -2px;
+            inset-inline-end: -4px;
+            [class^="icon-"], [class*=" icon-"] {
+                --icon-base-size: 32px;
+                text-shadow: -2px 2px 0 var(--sd-item__main-Bg), 2px 2px 0 var(--sd-item__main-Bg), 2px -2px 0 var(--sd-item__main-Bg), -2px -2px 0 var(--sd-item__main-Bg);
+            }
+        }
+    }
+    &.sd-avatar--xx-large {
+        .sd-avatar__icon {
+            inset-block-end: -1px;
+            inset-inline-end: -2px;
+            [class^="icon-"], [class*=" icon-"] {
+                --icon-base-size: 32px;
+                text-shadow: -2px 2px 0 var(--sd-item__main-Bg), 2px 2px 0 var(--sd-item__main-Bg), 2px -2px 0 var(--sd-item__main-Bg), -2px -2px 0 var(--sd-item__main-Bg);
+            }
         }
     }
 }
 
+
+
 .sd-avatar-group {
     display: flex;
     &.sd-avatar-group--stacked {
@@ -180,8 +306,32 @@
             &--large {
                 margin: 0 -1.2rem 0 0;
             }
+            &:hover {
+                z-index: 100;
+            }
         }
         margin-inline-end: 8px;
+        &.sd-avatar-group--stacked--gap-small {
+            gap: $sd-base-increment * 0.5;
+            > .sd-avatar {
+                margin: 0;
+            }
+            margin-inline-end: 0;
+        }
+        &.sd-avatar-group--stacked--gap-medium {
+            gap: $sd-base-increment * 1;
+            > .sd-avatar {
+                margin: 0;
+            }
+            margin-inline-end: 0;
+        }
+        &.sd-avatar-group--stacked--gap-large {
+            gap: $sd-base-increment * 1.5;
+            > .sd-avatar {
+                margin: 0;
+            }
+            margin-inline-end: 0;
+        }
     }
     &.sd-avatar-group--grid {
         flex-wrap: wrap;

package/app/styles/design-tokens/_new-colors.scss

@@ -350,6 +350,25 @@
 
     --sd-colour__tag-label-Bg--inverse: var(--sd-colour-bg--08);
     --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 98%, 1);
+
+    --sd-colour-avatar-bg: hsl(197, 100%, 25%);
+    --sd-colour-avatar-border: var(--sd-colour-avatar-bg);
+
+    --sd-colour-avatar-bg--light: hsla(214, 13%, 90%, 1);
+    --sd-colour-avatar-border--light: hsla(214, 13%, 65%, 1);
+    --sd-colour-avatar-border--light-hover: hsla(214, 13%, 45%, 1);
+    --sd-colour-avatar-dummy: hsla(214, 13%, 75%, 0.60);
+    --sd-colour-avatar-add: hsla(214, 13%, 55%, 1);
+    --sd-colour-avatar-add--hover: hsla(214, 13%, 45%, 1);
+
+    --sd-colour-avatar-outline--offline: hsla(214, 13%, 85%, 1);
+    --sd-colour-avatar-outline--online: var(--sd-colour-success);
+
+    --sd-colour-state--default: var(--color-text-lighter);
+    --sd-colour-state--in-progress: var(--sd-colour-highlight);
+    --sd-colour-state--done: var(--sd-colour-success);
+
+
 }
 
 
@@ -495,6 +514,20 @@
 
     --sd-colour__tag-label-Bg--inverse: hsla(214, 13%, 55%, 0.95);
     --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 10%, 1);
+
+    --sd-colour-avatar-bg: hsl(197, 100%, 25%);
+    --sd-colour-avatar-border: hsl(197, 100%, 25%);
+
+    --sd-colour-avatar-bg--light: hsla(214, 13%, 20%, 1);
+    --sd-colour-avatar-border--light: hsla(214, 13%, 45%, 1);
+    --sd-colour-avatar-border--light-hover: hsla(214, 13%, 65%, 1);
+    --sd-colour-avatar-dummy: hsla(214, 13%, 98%, 0.25);
+    --sd-colour-avatar-add: hsla(214, 13%, 65%, 1);
+    --sd-colour-avatar-add--hover: hsla(214, 13%, 90%, 1);
+
+    --sd-colour-state--default: var(--color-text-lighter);
+    --sd-colour-state--in-progress: var(--sd-colour-highlight);
+    --sd-colour-state--done: var(--sd-colour-success);
 }
 
 
@@ -629,6 +662,7 @@
     --color-navbutton-bg-dark-hover:      hsla(214, 13%, 60%, 1);
 
     --color-navbutton-shadow-active:      hsla(214, 13%, 5%, 0.12);
+
   }
   
   // CSS variables for dark theme
@@ -711,8 +745,7 @@
     [class*=" big-icon--"] {
       color:                              var(--color-text);
     }
-  
-  }
+}
 
 /// ======= END from _colors.scss ======== ///////////
 /// ====================================== ///////////

package/app-typescript/components/Icon.tsx

@@ -7,6 +7,7 @@ interface IProps {
     className?: string;
     scale?: '2x' | '3x' | '4x';
     ariaHidden?: boolean;
+    color?: string;
 }
 
 export class Icon extends React.PureComponent<IProps> {
@@ -19,7 +20,12 @@ export class Icon extends React.PureComponent<IProps> {
             [`scale--${this.props.scale}`]: this.props.scale,
         });
         return (
-            <i className={classes} aria-label={this.props.name} aria-hidden={this.props.ariaHidden}></i>
+            <i
+                className={classes}
+                aria-label={this.props.name}
+                aria-hidden={this.props.ariaHidden}
+                style={{color: this.props.color}}
+            />
         );
     }
 }

package/app-typescript/components/ShowPopup.tsx

@@ -0,0 +1,173 @@
+
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import {createPopper, Instance as PopperInstance, Placement, Modifier} from '@popperjs/core';
+import {throttle} from 'lodash';
+import maxSize from 'popper-max-size-modifier';
+
+interface IPropsPopupPositioner {
+    referenceElement: HTMLElement;
+    placement: Placement;
+    zIndex?: number;
+    onClose(): void;
+    closeOnHoverEnd?: boolean;
+}
+
+class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
+    private wrapperEl: HTMLDivElement | null;
+    private popper: PopperInstance | null;
+
+    constructor(props: IPropsPopupPositioner) {
+        super(props);
+
+        this.closeOnClick = this.closeOnClick.bind(this);
+        this.closeOnScroll = throttle(this.closeOnScroll.bind(this), 200);
+        this.closeOnMouseLeave = this.closeOnMouseLeave.bind(this);
+        this.wrapperEl = null;
+        this.popper = null;
+    }
+
+    closeOnClick(event: MouseEvent) {
+        if (this.wrapperEl == null) {
+            return;
+        }
+
+        if (
+            this.props.referenceElement.contains(event.target as Node) !== true
+            && this.wrapperEl.contains(event.target as Node) !== true
+        ) {
+            this.props.onClose();
+        }
+    }
+
+    closeOnScroll(event: Event) {
+        if (this.wrapperEl == null) {
+            return;
+        }
+
+        if (this.wrapperEl.contains(event.target as Node) !== true) {
+            this.props.onClose();
+        }
+    }
+
+    closeOnMouseLeave(event: MouseEvent) {
+        if (this.wrapperEl == null) {
+            return;
+        }
+
+        if (this.wrapperEl.contains(event.target as Node) !== true) {
+            this.props.onClose();
+        }
+    }
+
+    componentDidMount() {
+        window.addEventListener('click', this.closeOnClick, {capture: true});
+        window.addEventListener('scroll', this.closeOnScroll, true);
+
+        if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
+            this.props.referenceElement.addEventListener('mouseleave', this.closeOnMouseLeave);
+            this.wrapperEl.addEventListener('mouseleave', this.closeOnMouseLeave);
+        }
+
+        const applyMaxSize: Modifier<any, any> = {
+            name: 'applyMaxSize',
+            enabled: true,
+            phase: 'beforeWrite',
+            requires: ['maxSize'],
+            fn: ({state}) => {
+                const {height} = state.modifiersData.maxSize;
+
+                // subtracting 10 in order to make a gap between the edge of the viewport
+                state.styles.popper.maxHeight = `${height - 10}px`;
+            },
+        };
+
+        if (this.wrapperEl != null) {
+            /**
+             * Wait until referenceElement renders so createPopper
+             * can take its dimensions into account.
+             */
+            setTimeout(() => {
+                if (this.wrapperEl != null) {
+                    this.popper = createPopper(
+                        this.props.referenceElement,
+                        this.wrapperEl,
+                        {
+                            placement: this.props.placement,
+                            modifiers: [
+                                maxSize,
+                                applyMaxSize,
+                            ],
+                        },
+                    );
+                }
+            }, 50);
+        }
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('click', this.closeOnClick);
+        window.removeEventListener('scroll', this.closeOnScroll, true);
+
+        if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
+            this.props.referenceElement.removeEventListener('mouseleave', this.closeOnMouseLeave);
+            this.wrapperEl.removeEventListener('mouseleave', this.closeOnMouseLeave);
+        }
+
+        this.popper?.destroy?.();
+    }
+
+    render() {
+        return (
+            <div
+                ref={(el) => {
+                    this.wrapperEl = el;
+                }}
+                style={{zIndex: this.props.zIndex ?? 1, position: 'absolute', left: '-100vw'}}
+            >
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+/**
+ * The popup will remove itself if click/scroll events are detected outside the popup.
+ */
+export function showPopup(
+    referenceElement: HTMLElement,
+    placement: Placement,
+    Component: React.ComponentType<{closePopup(): void}>,
+    zIndex?: number,
+    closeOnHoverEnd?: boolean,
+    onClose?: () => void,
+): {close: () => void} {
+    const el = document.createElement('div');
+
+    document.body.appendChild(el);
+
+    const closeFn = () => {
+        ReactDOM.unmountComponentAtNode(el);
+        el.remove();
+        onClose?.();
+    };
+
+    ReactDOM.render(
+        (
+            <PopupPositioner
+                referenceElement={referenceElement}
+                placement={placement}
+                onClose={closeFn}
+                zIndex={zIndex}
+                closeOnHoverEnd={closeOnHoverEnd || false}
+            >
+                <Component
+                    closePopup={closeFn}
+                />
+            </PopupPositioner>
+        ),
+        el,
+    );
+
+    return {close: closeFn};
+}

package/app-typescript/components/Spacer.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classNames from 'classnames';
 
 export interface IPropsSpacer {
     h?: boolean; // horizontal
@@ -21,13 +20,6 @@ export interface IPropsSpacer {
 }
 
 export class Spacer extends React.PureComponent<IPropsSpacer> {
-    constructor(props: IPropsSpacer) {
-        super(props);
-        this.state = {
-            items: [],
-        };
-
-    }
     render() {
         const {h, v, gap, justifyContent, alignItems, noGrow, noWrap} = this.props;
 

package/app-typescript/components/WithPopover.tsx

@@ -0,0 +1,46 @@
+
+import * as React from 'react';
+import {Placement} from '@popperjs/core';
+import {showPopup} from './ShowPopup';
+
+export interface IPropsWithPopover {
+    children(toggle: (referenceElement: HTMLElement) => void): React.ReactNode;
+    placement: Placement;
+    component: React.ComponentType<{closePopup(): void}>;
+    zIndex?: number;
+    closeOnHoverEnd?: boolean;
+    onClose?: () => void;
+}
+
+export class WithPopover extends React.PureComponent<IPropsWithPopover> {
+    private closePopup?: () => void;
+
+    constructor(props: IPropsWithPopover) {
+        super(props);
+
+        this.togglePopup = this.togglePopup.bind(this);
+    }
+
+    togglePopup(referenceElement: HTMLElement) {
+        if (this.closePopup != null) {
+            this.closePopup();
+            this.closePopup = undefined;
+        } else {
+            this.closePopup = showPopup(
+                referenceElement,
+                this.props.placement,
+                this.props.component,
+                this.props.zIndex,
+                this.props.closeOnHoverEnd,
+                () => {
+                    this.closePopup = undefined;
+                    this.props.onClose?.();
+                },
+            ).close;
+        }
+    }
+
+    render(): React.ReactNode {
+        return this.props.children(this.togglePopup);
+    }
+}

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {IPropsBase} from './interfaces';
+
+interface IProps extends IPropsBase {
+    onClick?(): void;
+}
+
+export class AvatarContentAdd extends React.PureComponent<IProps> {
+    render() {
+        if (this.props.onClick == null) {
+            return (
+                <span
+                    className="sd-avatar-content sd-avatar-content--add-item"
+                    title={this.props.tooltipText}
+                />
+            );
+        } else {
+            return (
+                <button
+                    className="sd-avatar-content sd-avatar-content--add-item sd-avatar-content--add-item--clickable"
+                    title={this.props.tooltipText}
+                    onClick={() => this.props.onClick?.()}
+                />
+            );
+        }
+    }
+}

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

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import {Avatar, IPropsAvatar} from './avatar';
+import {AvatarWrapper} from './avatar-wrapper';
+import {AvatarContentNumber} from './avatar-number';
+import {AvatarPlaceholder, IPropsAvatarPlaceholder} from './avatar-placeholder';
+
+export type IAvatarInGroup = Omit<IPropsAvatar, 'size'>;
+export type IAvatarPlaceholderInGroup = Omit<IPropsAvatarPlaceholder, 'size'>;
+
+export type IAvatarGroupItem = IAvatarInGroup | IAvatarPlaceholderInGroup;
+
+type IGap = 'none' | 'small'| 'medium'| 'large';
+
+export interface IPropsAvatarGroup {
+    size: IPropsAvatar['size'];
+    items: Array<IAvatarGroupItem>;
+
+    /**
+     * maximum number of avatars to shown inline; defaults to 4
+     * if exceeded, "+1"/"+2"/"+n" button will be shown
+     */
+    max?: number | 'show-all';
+}
+
+function isAvatar(item: IAvatarInGroup | IAvatarPlaceholderInGroup): item is IAvatarInGroup {
+    return (item as any)['kind'] == null;
+}
+
+export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
+    render() {
+        const {size, items} = this.props;
+        const someIconsHaveExtraElements = items.filter(isAvatar).some(
+            ({icon, administratorIndicator}) => icon != null || administratorIndicator != null,
+        );
+        const gap: IGap = someIconsHaveExtraElements ? 'medium' : 'none';
+
+        const max: number = (() => {
+            if (this.props.max === 'show-all') {
+                return this.props.items.length;
+            } else if (this.props.max == null) {
+                return 4;
+            } else {
+                return this.props.max;
+            }
+        })();
+        const itemsOverLimit = items.length - max;
+
+        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)) {
+                            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>
+        );
+    }
+}