superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.13

package/app/styles/_modals.scss

@@ -2,9 +2,9 @@
 // ------
 
 // Recalculate z-index where appropriate
-$zindexDropdown: 1000;
-$zindexPopover: 1010;
-$zindexTooltip: 1040;
+$zindexDropdown: 2000;
+$zindexPopover: 2010;
+$zindexTooltip: 2040;
 $zindexModalBackdrop: 1045;
 $zindexModal: 1050;
 $nav-height: 48px;

package/app/styles/_table-list.scss

@@ -14,11 +14,15 @@
     }
 }
 
+.table-list--read-only {
+    pointer-events: none;
+    cursor: default;
+}
+
 $table-list-palette: $sd-basic-palette;
 
 .table-list__item {
     display: grid;
-    z-index: 1;
     align-items: center;
     grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
     position: relative;
@@ -30,16 +34,6 @@ $table-list-palette: $sd-basic-palette;
     border: 1px solid var(--sd-colour-line--light);
     transition: all 0.2s ease-in-out;
     inset-inline-start: 0;
-    &::before {
-        content: "";
-        width: 6px;
-        position: absolute;
-        inset-block: 3px;
-        inset-inline-start: 3px;
-        background-color: var(--sd-colour-panel-bg--100);
-        z-index: 1;
-        border-radius: 2px;
-    }
 
     &--margin {
         margin-bottom: $sd-base-increment;
@@ -117,6 +111,39 @@ $table-list-palette: $sd-basic-palette;
     }
 }
 
+.table-list__add-item {
+    display: grid;
+    align-items: center;
+    //grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
+    position: relative;
+    flex-direction: row;
+    padding: 8px;
+    min-height: 4.2rem;
+    border-radius: var(--b-radius--medium);
+    background-color: transparent;
+    border: 1px dashed var(--sd-colour-line--medium);
+    transition: all 0.2s ease-in-out;
+    inset-inline-start: 0;
+
+    &--container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.table-list__item-border {
+    width: 6px;
+    background-color: var(--sd-colour-panel-bg--100);
+    z-index: 2;
+    position: absolute;
+    inset-block: 3px;
+    inset-inline-start: 3px;
+    border-radius: 2px;
+}
+
+
+
 .table-list__item-content {
     grid-column: contentCol;
     grid-row: mainRow;
@@ -224,6 +251,7 @@ $table-list-palette: $sd-basic-palette;
         transition: all ease 0.3s;
     }
 }
+
 .table-list__add-bar {
     height: 12px;
     display: flex;
@@ -237,8 +265,69 @@ $table-list-palette: $sd-basic-palette;
     background-color: var(--sd-colour-panel-bg--000);
     transform: scale(0.5);
 }
+
 .side-panel__content-block {
     .table-list__item-content {
         grid-template-columns: [columnLeft] 140px [columncenter] 1fr [columnRight] auto;
     }
 }
+
+.table-list--gap-s {
+    gap: $sd-base-increment;
+}
+
+.table-list__item--draggable {
+    &.table-list__item--drag-handles-always {
+        border-left-width: 16px;
+        border-left-color: var(--sd-colour-line--medium);
+        &::after {
+            content: "";
+            width: 20px;
+            position: absolute;
+            inset-block: -1px;
+            inset-inline-start: -18px;
+            background-image: url(../img/dots.svg);
+            background-repeat: no-repeat;
+            background-position: center center;
+            z-index: 2;
+            border-radius: var(--b-radius--small);
+            opacity: 0.85;
+        }
+        &:hover {
+            border-left-color: var(--sd-colour-line--strong);
+            &::after {
+                cursor: grab;
+            }
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+    &.table-list__item--drag-handles-none {
+        border-left-width: 1px;
+        &::after {
+            content: "";
+            width: 0;
+            opacity: 0;
+        }
+        &:hover {
+            border-left-color: var(--sd-colour-line--strong);
+            &::after {
+                cursor: grab;
+            }
+        }
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+}

package/app/styles/grids/_grid-layout.scss

@@ -741,6 +741,9 @@ $planningEditor-width: 53rem;
     .sd-main-content-grid {
         grid-column: contentArea;
     }
+    &--editor-full {
+        grid-template-columns: [sideTabsLeft] auto [contentArea] auto [contentSplitter] auto [authoringArea] 1fr;
+    }
 }
 .sd-content-wrapper__left-tabs { 
     grid-column: sideTabsLeft;

package/app-typescript/components/Dropdown.tsx

@@ -10,6 +10,10 @@ export interface IMenuItem {
     onSelect(): void;
 }
 
+interface IMenuItemRes extends IMenuItem {
+    onChange?(event?: any): void;
+}
+
 export interface ISubmenu {
     type: 'submenu';
     label: string;
@@ -31,6 +35,7 @@ interface IMenu {
     footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     append?: boolean;
     children: React.ReactNode;
+    onChange?(event?: any): void;
 }
 
 export const Dropdown = ({
@@ -40,15 +45,14 @@ export const Dropdown = ({
     children,
     append,
     align,
+    onChange,
 }: IMenu) => {
     const [open, setOpen] = React.useState(false);
     const [change, setChange] = React.useState(false);
     const [menuID] = useId();
     const DROPDOWN_ID = "react-placeholder";
     const ref = React.useRef(null);
-    const refSubMenu = React.useRef(null);
     const buttonRef = React.useRef(null);
-    const refButtonSubMenu = React.useRef(null);
     const headerElements = header?.map((el, index) => {
         return each(el, index);
     });
@@ -60,6 +64,7 @@ export const Dropdown = ({
     const footerElements = footer?.map((el, index) => {
         return each(el, index);
     });
+
     React.useEffect(() => {
         const existingElement = document.getElementById(DROPDOWN_ID);
         if (!existingElement) {
@@ -82,7 +87,6 @@ export const Dropdown = ({
             addInPlaceholder();
         }
         setChange(true);
-
     }, [open]);
 
     // structure for append menu
@@ -212,33 +216,11 @@ export const Dropdown = ({
                 submenuItems.push(each(el, key));
             });
             return (
-                <li key={index}>
-                    <div className='dropdown' >
-                        <button
-                            ref={refButtonSubMenu}
-                            className='dropdown__toggle dropdown-toggle'
-                            aria-haspopup="menu"
-                            tabIndex={0}
-                            onMouseOver={() => {
-                                let subMenuRef = refSubMenu.current;
-                                let subToggleRef = refButtonSubMenu.current;
-                                if (subMenuRef && subToggleRef) {
-                                    createPopper(subToggleRef, subMenuRef, {
-                                        placement: 'right-start',
-                                    });
-                                }
-                            }}
-                            onClick={item['onSelect']}>
-                            {item['icon'] ? <i className={'icon-' + item['icon']}></i> : null}
-                            {item['label']}
-                        </button>
-                        <ul ref={refSubMenu}
-                            role='menu'
-                            className='dropdown__menu'>
-                            {submenuItems}
-                        </ul>
-                    </div>
-                </li>
+                <DropdownItemWithSubmenu
+                    key={index}
+                    item={item}
+                    subMenuItems={submenuItems}
+                />
             );
         } else if (item['type'] === 'group') {
             let groupItems: any = [];
@@ -262,7 +244,8 @@ export const Dropdown = ({
                     label={item['label']}
                     icon={item['icon']}
                     active={item['active']}
-                    onSelect={item['onSelect']} />);
+                    onSelect={item['onSelect']}
+                    onChange={onChange} />);
         }
     }
 
@@ -341,18 +324,76 @@ export const Dropdown = ({
 };
 
 const DropdownItem = ({
-    label,
-    icon,
-    active,
-    onSelect,
-}: IMenuItem) => {
+label,
+icon,
+active,
+onSelect,
+onChange,
+}: IMenuItemRes) => {
     return (
         <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
-            <button tabIndex={0} role='menuitem' onClick={onSelect}>
+            <button tabIndex={0} role='menuitem' onClick={() => {
+                onSelect();
+                if (onChange) {
+                    onChange();
+                }
+            }}>
                 <i className={icon ? ('icon-' + icon) : ''}></i>
                 {label}
             </button>
         </li>
     );
+};
+
+const DropdownItemWithSubmenu = ({
+    index,
+    item,
+    subMenuItems,
+}: IMenuItem | any) => {
+    const [open, setOpen] = React.useState<undefined | boolean>(undefined);
+
+    const refButtonSubMenu = React.useRef(null);
+    const refSubMenu = React.useRef(null);
+
+    React.useEffect(() => {
+        let subMenuRef: any = refSubMenu.current;
+        let subToggleRef = refButtonSubMenu.current;
+
+        if (open === true) {
+            document.body.appendChild(subMenuRef);
+            subMenuRef.style.display = 'block';
+
+        } else if (open === false) {
+            document.body.removeChild(subMenuRef);
+            subMenuRef.style.display = 'none';
+        }
+
+        if (subMenuRef && subToggleRef) {
+            createPopper(subToggleRef, subMenuRef, {
+                placement: 'right-start',
+            });
+        }
+    }, [open]);
 
+    return (
+        <li key={index} ref={refButtonSubMenu}>
+            <div className='dropdown' onMouseLeave={() => setOpen(false) }>
+                <button
+                    className='dropdown__toggle dropdown-toggle'
+                    aria-haspopup="menu"
+                    tabIndex={0}
+                    onMouseOver={() => setOpen(true) }
+                    onClick={item['onSelect']}>
+                    {item['icon'] ? <i className={'icon-' + item['icon']}></i> : null}
+                    {item['label']}
+                </button>
+                <ul role='menu'
+                    ref={refSubMenu}
+                    style={{display: 'none'}}
+                    className='dropdown__menu'>
+                    {subMenuItems}
+                </ul>
+            </div>
+        </li>
+    );
 };

package/app-typescript/components/DurationInput.tsx

@@ -371,5 +371,11 @@ export function getDurationString(seconds: number) {
     let minute = zeroPad(Math.floor((seconds % 3600) / 60));
     let second = zeroPad(Math.floor(seconds % 60));
 
-    return `${hour}h ${minute}m ${second}s`;
+    if (Number(hour) === 0 && Number(minute) > 0) {
+        return `${minute}m ${second}s`;
+    } else if (Number(hour) === 0 && Number(minute) === 0) {
+        return `${second}s`;
+    } else {
+        return `${hour}h ${minute}m ${second}s`;
+    }
 }

package/app-typescript/components/Layouts/CoreLayout.tsx

@@ -22,6 +22,7 @@ interface IProps {
     menuId?: string;
     ariaControls?: string;
     buttonAnimation?: 'spin' | 'squeeze' | 'none';
+    editorFullWidth?: boolean;
 }
 
 export class CoreLayout extends React.PureComponent<IProps> {
@@ -43,7 +44,7 @@ export class CoreLayout extends React.PureComponent<IProps> {
                         {this.props.topMenu}
                     </CoreLayoutTopMenu>
                 )}
-                <CoreLayoutMain>
+                <CoreLayoutMain editorFullWidth={this.props.editorFullWidth}>
                         {this.props.children}
                 </CoreLayoutMain>
                 {this.props.footer && (

package/app-typescript/components/Layouts/CoreLayoutMain.tsx

@@ -1,14 +1,20 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IProps {
     children?: React.ReactNode;
     id?: string;
+    editorFullWidth?: boolean;
 }
 
 export class CoreLayoutMain extends React.PureComponent<IProps> {
     render() {
+        const classes = classNames('sd-content sd-content-wrapper', {
+            'sd-content-wrapper--editor-full': this.props.editorFullWidth,
+        },
+    );
         return (
-            <section id={this.props.id} className='sd-content sd-content-wrapper'>
+            <section id={this.props.id} className={classes}>
                 {this.props.children}
             </section>
         );

package/app-typescript/components/Lists/TableList.tsx

@@ -6,13 +6,15 @@ import { Button } from '../Button';
 import { Dropdown, IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
 
 export interface IProps {
-    children?: React.ReactNode;
     array: Array<IPropsArrayItem>;
     addItem?: boolean;
     dragAndDrop?: boolean;
     itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     className?: string;
+    readOnly?: boolean;
+    showDragHandle?: 'always' | 'onHover' | 'none'; // always default
     onDrag?(start: number, end: number): void;
+    onAddItem?(index: number, item?: IPropsArrayItem ): void;
 }
 
 export interface IPropsArrayItem {
@@ -21,6 +23,12 @@ export interface IPropsArrayItem {
     end?: React.ReactNode;
     action?: React.ReactNode;
     onClick?(): void;
+    onDoubleClick?(): void;
+    hexColor?: string;
+}
+
+interface IState {
+    items: Array<IPropsArrayItem>;
 }
 
 const reorder = (list: Array<IPropsArrayItem>, startIndex: number, endIndex: number) => {
@@ -31,25 +39,30 @@ const reorder = (list: Array<IPropsArrayItem>, startIndex: number, endIndex: num
     return result;
 };
 
-class TableList extends React.PureComponent<IProps, { items: Array<IPropsArrayItem>}> {
-    constructor(props: Readonly<IProps>) {
+class TableList extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
         this.state = {
             items: [],
         };
 
         this.onDragEnd = this.onDragEnd.bind(this);
+        this.dropDown = this.dropDown.bind(this);
     }
 
     componentDidMount(): void {
-        this.setState({ items: this.props.array });
+        if (this.props.array) {
+            this.setState({ items: this.props.array });
+        }
     }
 
-    componentDidUpdate(prevProps: Readonly<IProps>): void {
-        if (prevProps.array !== this.props.array) {
-            this.setState({
-                items: this.props.array,
-            });
+    componentDidUpdate(prevProps: IProps): void {
+        if (this.props.array) {
+            if (prevProps.array !== this.props.array) {
+                this.setState({
+                    items: this.props.array,
+                });
+            }
         }
     }
 
@@ -63,23 +76,41 @@ class TableList extends React.PureComponent<IProps, { items: Array<IPropsArrayIt
             result.destination.index,
         );
         this.setState({
-            items,
+            items: items,
         });
 
         return this.props.onDrag ?
             this.props.onDrag(result.source.index, result.destination.index) : null;
     }
 
+    dropDown() {
+        return (
+            <Dropdown
+                items={this.props.itemsDropdown ? this.props.itemsDropdown : []}>
+                <Button
+                    type="primary"
+                    icon="plus-large"
+                    text="Add item"
+                    size="small"
+                    shape="round"
+                    iconOnly={true}
+                    onClick={() => false}
+                />
+            </Dropdown>
+        );
+    }
+
     render() {
-        let classes = classNames({
+        let classes = classNames('', {
             'table-list': !this.props.addItem,
+            'table-list--read-only': this.props.readOnly,
             [`${this.props.className}`]: this.props.className,
         });
 
         return (
-            this.props.array ?
-                this.props.dragAndDrop ?
-                    <DragDropContext onDragEnd={this.onDragEnd}>
+            this.state.items.length > 0
+                ? this.props.dragAndDrop
+                    ? <DragDropContext onDragEnd={this.onDragEnd}>
                         <Droppable droppableId="droppable">
                             {(provided, _snapshot) => (
                                 <ul
@@ -100,13 +131,30 @@ class TableList extends React.PureComponent<IProps, { items: Array<IPropsArrayIt
                                                         end={item.end}
                                                         action={item.action}
                                                         onClick={item.onClick ? item.onClick : undefined}
+                                                        onDoubleClick={item.onDoubleClick
+                                                            ? item.onDoubleClick
+                                                            : undefined}
                                                         addItem={this.props.addItem}
-                                                        itemsDropdown={this.props.itemsDropdown} />
+                                                        itemsDropdown={this.props.itemsDropdown}
+                                                        hexColor={item.hexColor}
+                                                        onAddItem={() => this.props.onAddItem
+                                                            && this.props.onAddItem(index, item)}
+                                                        showDragHandle={this.props.showDragHandle}
+                                                    />
                                                 </div>
                                             )}
                                         </Draggable>
                                     ))}
                                     {provided.placeholder}
+                                    {(this.props.addItem && !this.props.readOnly) &&
+                                        <li className={`table-list__add-item table-list__item--margin`}>
+                                            <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                                <div className='table-list__add-item--container sd-margin-x--auto'>
+                                                    {this.dropDown()}
+                                                </div>
+                                            </Tooltip>
+                                        </li>
+                                    }
                                 </ul>
                             )}
                         </Droppable>
@@ -120,14 +168,36 @@ class TableList extends React.PureComponent<IProps, { items: Array<IPropsArrayIt
                                 end={item.end}
                                 action={item.action}
                                 onClick={item.onClick ? item.onClick : undefined}
+                                onDoubleClick={item.onDoubleClick
+                                    ? item.onDoubleClick
+                                    : undefined}
                                 addItem={this.props.addItem}
-                                itemsDropdown={this.props.itemsDropdown} />
+                                itemsDropdown={this.props.itemsDropdown}
+                                hexColor={item.hexColor}
+                                onAddItem={() => this.props.onAddItem
+                                    && this.props.onAddItem(index, item)}
+                            />
                         ))}
+                        {(this.props.addItem && !this.props.readOnly) &&
+                            <li className={`table-list__add-item table-list__item--margin`}>
+                                <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                    <div className='table-list__add-item--container sd-margin-x--auto'>
+                                        {this.dropDown()}
+                                    </div>
+                                </Tooltip>
+                            </li>
+                        }
                     </ul>
-                : this.props.children &&
-                <ul className={classes}>
-                    {this.props.children}
+                : (this.props.addItem && !this.props.readOnly) ? <ul className={classes}>
+                    <li className={`table-list__add-item table-list__item--margin`}>
+                        <Tooltip text='Add item' flow='top' appendToBody={true}>
+                            <div className='table-list__add-item--container sd-margin-x--auto'>
+                                {this.dropDown()}
+                            </div>
+                        </Tooltip>
+                    </li>
                 </ul>
+                : null
         );
     }
 }
@@ -141,16 +211,56 @@ export interface IPropsItem {
     itemsDropdown?: any;
     dragAndDrop?: boolean;
     onClick?(): void;
+    onDoubleClick?(): void;
+    onSelect?(): void;
+    onAddItem?(e: number): void;
+    hexColor?: string;
+    showDragHandle?: 'always' | 'onHover' | 'none';
 }
 
 class TableListItem extends React.PureComponent<IPropsItem> {
+    private timer: any;
+    private delay = 200;
+    private prevent = false;
+
+    onSingleClick = () => {
+        this.timer = setTimeout(() => {
+            if (!this.prevent) {
+                if (this.props.onClick) {
+                    this.props.onClick();
+                }
+            }
+        }, this.delay);
+    }
+
+    onDoubleClick = () => {
+        clearTimeout(this.timer);
+        this.prevent = true;
+        if (this.props.onDoubleClick) {
+            this.props.onDoubleClick();
+        }
+        setTimeout(() => {
+            this.prevent = false;
+        }, this.delay);
+    }
+
     render() {
+
+        let classes = classNames('table-list__item', {
+            'table-list__item--clickable': this.props.onClick,
+            'table-list__item--draggable': this.props.dragAndDrop,
+            'table-list__item--drag-handles-always': !this.props.showDragHandle,
+            'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
+        });
+
         return (
             this.props.addItem ?
                 <li className='table-list__item-container'>
                     <div
-                        onClick={this.props.onClick}
-                        className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'}`}>
+                        onClick={() => this.onSingleClick()}
+                        onDoubleClick={() => this.onDoubleClick()}
+                        className={classes}>
+                        <div className='table-list__item-border' style={{backgroundColor: this.props.hexColor}}></div>
                         <div className='table-list__item-content'>
                             <div className='table-list__item-content-block'>
                                 {this.props.start && this.props.start}
@@ -170,7 +280,8 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                         <Tooltip text='Add item' flow='top' appendToBody={true}>
                             <div className='table-list__add-bar'>
                                 <Dropdown
-                                    items={this.props.itemsDropdown}>
+                                    onChange={this.props.onAddItem}
+                                    items={this.props.itemsDropdown ? this.props.itemsDropdown : []}>
                                     <Button
                                         type="primary"
                                         icon="plus-large"
@@ -178,7 +289,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                                         size="small"
                                         shape="round"
                                         iconOnly={true}
-                                        onClick={() => false}
+                                        onClick={() => false }
                                     />
                                 </Dropdown>
                             </div>
@@ -186,8 +297,10 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                     </div>
                 </li>
                 : <li
-                    className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'} table-list__item--margin`}
-                    onClick={this.props.onClick}>
+                    className={`${classes} table-list__item--margin`}
+                    onClick={() => this.onSingleClick()}
+                    onDoubleClick={() => this.onDoubleClick()}>
+                    <div className='table-list__item-border' style={{backgroundColor: this.props.hexColor}}></div>
                     <div className='table-list__item-content'>
                         <div className='table-list__item-content-block'>
                             {this.props.start && this.props.start}