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

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,6 +45,7 @@ export const Dropdown = ({
     children,
     append,
     align,
+    onChange,
 }: IMenu) => {
     const [open, setOpen] = React.useState(false);
     const [change, setChange] = React.useState(false);
@@ -262,7 +268,8 @@ export const Dropdown = ({
                     label={item['label']}
                     icon={item['icon']}
                     active={item['active']}
-                    onSelect={item['onSelect']} />);
+                    onSelect={item['onSelect']}
+                    onChange={onChange} />);
         }
     }
 
@@ -341,14 +348,20 @@ 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>

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}

package/app-typescript/components/SearchBar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import {Icon} from './Icon';
 
 interface IProps {
-    value?: string | number;
+    value?: string;
     type?: 'expanded' | 'collapsed' | 'boxed';
     placeholder: string;
     focused?: boolean;
@@ -79,9 +79,17 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
                 onChange={(event) => this.setState({inputValue: event.target.value})}
                 onFocus={() => this.setState({focused: true})} />
                 {this.state.inputValue &&
-                <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
+                <button className="sd-searchbar__cancel" onClick={() => {
+                    this.setState({inputValue: ''});
+                    setTimeout(() => {
+                        if (this.props.onSubmit) {
+                            this.props.onSubmit(this.state.inputValue);
+                        }
+                    });
+                }}>
                     <Icon name='remove-sign' />
                 </button>}
+                {this.state.inputValue &&
                 <button
                 id="sd-searchbar__search-btn"
                 className={`sd-searchbar__search-btn ${this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''}`}
@@ -91,7 +99,7 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
                     }
                 }}>
                     <Icon name='chevron-right-thin' />
-                </button>
+                </button>}
             </div>
         );
     }

package/app-typescript/components/TimePicker.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-// import classNames from 'classnames';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
 
@@ -19,18 +18,8 @@ interface IProps {
     error?: string;
 }
 
-interface IState {
-    invalid: boolean;
-}
-
-export class TimePicker extends React.PureComponent<IProps, IState> {
+export class TimePicker extends React.PureComponent<IProps> {
     private htmlId = nextId();
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            invalid: this.props.invalid ? this.props.invalid : false,
-        };
-    }
 
     render() {
         return (
@@ -39,7 +28,7 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
             error={this.props.error}
             required={this.props.required}
             disabled={this.props.disabled}
-            invalid={this.state.invalid}
+            invalid={this.props.invalid}
             info={this.props.info}
             inlineLabel={this.props.inlineLabel}
             labelHidden={this.props.labelHidden}