superdesk-ui-framework 3.0.1-beta.25 → 3.0.1-beta.26

package/app/styles/_sd-tag-input.scss

@@ -276,6 +276,7 @@ tags-input,
             }
         }
         .suggestion-item {
+            position: relative;
             padding: 0.5rem 1rem;
             cursor: pointer;
             white-space: nowrap;
@@ -312,6 +313,20 @@ tags-input,
             justify-content: space-between;
             align-items: center;
         }
+        .suggestion-item--bgcolor {
+            min-height: 1.5em;
+            min-width: 1.5em;
+            padding: 4px 0;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 99px;
+            white-space: nowrap;
+
+            &[style] {
+                padding-inline: 8px;
+            }
+        }
         .suggestion-item--disabled {
             opacity: 0.5;
         }
@@ -493,6 +508,11 @@ tags-input,
     }
 }
 
+.tags-input--single-select {
+    display: grid !important;
+    align-items: center !important;
+}
+
 .tags-input--multi-select,
 .tags-input--single-select {
     position: relative;
@@ -546,7 +566,7 @@ tags-input,
     .tags-input__remove-button {
         display: flex;
         align-items: center;
-        align-self: flex-end;
+        align-self: center;
         margin-inline-start: auto;
         z-index: 2;
         cursor: pointer;
@@ -561,3 +581,18 @@ tags-input,
         font-weight: 300;
     }
 }
+
+.item-border {
+    width: 5px;
+    z-index: 2;
+    position: absolute;
+    inset-block: 7px;
+    inset-inline-start: 3px;
+    border-radius: 2px;
+
+    &-selected {
+        inset-block: 5px;   
+    }
+}
+
+

package/app/styles/_table-list.scss

@@ -6,6 +6,7 @@
     flex-direction: column;
     align-self: stretch;
     overflow: hidden !important;
+    padding: 1px;
     //gap: $sd-base-increment * 1.5;
     &--comfortable {
         gap: $sd-base-increment * 2;

package/app/styles/primereact/_pr-dialog.scss

@@ -43,6 +43,10 @@
     overflow-y: auto;
 }
 
+.p-dialog-flex {
+    display: flex;
+}
+
 .p-dialog-header {
     display: flex;
     align-items: center;

package/app-typescript/components/Label.tsx

@@ -78,11 +78,15 @@ export class Label extends React.PureComponent<IProps> {
     }
 }
 
-export function getTextColor(backgroundColor: string): 'black' | 'white' {
-    const r = parseInt(backgroundColor.substr(1, 2), 16);
-    const g = parseInt(backgroundColor.substr(3, 2), 16);
-    const b = parseInt(backgroundColor.substr(5, 2), 16);
-    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+export function getTextColor(backgroundColor: string): 'black' | 'white' | undefined {
+    if (backgroundColor) {
+        const r = parseInt(backgroundColor.substr(1, 2), 16);
+        const g = parseInt(backgroundColor.substr(3, 2), 16);
+        const b = parseInt(backgroundColor.substr(5, 2), 16);
+        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
 
-    return (yiq >= 128) ? 'black' : 'white';
+        return (yiq >= 128) ? 'black' : 'white';
+    } else {
+        return;
+    }
 }

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

@@ -16,6 +16,7 @@ interface IProps {
     header?: React.ReactNode;
     main?: React.ReactNode;
     sideBar?: React.ReactNode;
+    sideBarClosed?: boolean;
     sidePanel?: React.ReactNode;
     sideOverlay?: React.ReactNode;
     sideOverlayOpen?: boolean;
@@ -56,7 +57,7 @@ export class AuthoringFrame extends React.PureComponent<IProps> {
                     </AuthoringFrameSidePanelOverlay>
                 )}
                 {this.props.sideBar && (
-                    <AuthoringFrameRightBar>
+                    <AuthoringFrameRightBar closed={this.props.sideBarClosed}>
                         {this.props.sideBar}
                     </AuthoringFrameRightBar>
                 )}

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

@@ -2,12 +2,31 @@ import * as React from 'react';
 
 interface IProps {
     children?: React.ReactNode;
+    closed?: boolean;
 }
 
-export class AuthoringFrameRightBar extends React.PureComponent<IProps> {
+interface IState {
+    children?: React.ReactNode;
+    closed?: boolean;
+}
+
+export class AuthoringFrameRightBar extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            closed: this.props.closed ? this.props.closed : false,
+        };
+    }
+    componentDidUpdate(prevProps: Readonly<IProps>): void {
+        if (prevProps.closed !== this.props.closed) {
+            this.setState({
+                closed: this.props.closed,
+            });
+        }
+    }
     render() {
         return (
-            <div className="sd-editor-grid__sidetabs-bar">
+            !this.state.closed && <div className="sd-editor-grid__sidetabs-bar">
                 {this.props.children}
             </div>
         );

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

@@ -4,6 +4,7 @@ import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautif
 import { Tooltip } from '../Tooltip';
 import { Button } from '../Button';
 import { Dropdown, IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
+import ReactDOM from 'react-dom';
 
 export interface IProps {
     array: Array<IPropsArrayItem>;
@@ -12,6 +13,7 @@ export interface IProps {
     className?: string;
     readOnly?: boolean;
     showDragHandle?: 'always' | 'onHover' | 'none'; // always default
+    append?: boolean;
     onDrag?(start: number, end: number): void;
     onAddItem?(index: number, item?: IPropsArrayItem ): void;
     itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
@@ -122,8 +124,23 @@ class TableList extends React.PureComponent<IProps, IState> {
                                     {...provided.droppableProps} >
                                     {this.state.items.map((item: IPropsArrayItem, index: number) => (
                                         <Draggable key={index} draggableId={`${index}`} index={index}>
-                                            {(provided2, _snapshot2) => (
-                                                <div
+                                            {(provided2, snapshot) => (
+                                                this.props.append
+                                                ? <PortalItem
+                                                    provided={provided2}
+                                                    snapshot={snapshot}
+                                                    item={item}
+                                                    index={index}
+                                                    dragAndDrop={this.props.dragAndDrop}
+                                                    showDragHandle={this.props.showDragHandle}
+                                                    addItem={this.props.addItem}
+                                                    onAddItem={() => this.props.onAddItem
+                                                        && this.props.onAddItem(index, item)}
+                                                    itemsDropdown={() => this.props.itemsDropdown
+                                                        ? this.props.itemsDropdown(index)
+                                                        : []}
+                                                />
+                                                : <div
                                                     ref={provided2.innerRef}
                                                     {...provided2.draggableProps}
                                                     {...provided2.dragHandleProps} >
@@ -335,6 +352,49 @@ class TableListItem extends React.PureComponent<IPropsItem> {
     }
 }
 
+class PortalItem extends React.PureComponent {
+    props: any;
+    render() {
+        const provided = this.props.provided;
+        const snapshot = this.props.snapshot;
+
+        const usePortal: boolean = snapshot.isDragging;
+
+        const child = (
+            <div
+                ref={provided.innerRef}
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}>
+                <TableListItem
+                    dragAndDrop={this.props.dragAndDrop}
+                    start={this.props.item.start}
+                    center={this.props.item.center}
+                    end={this.props.item.end}
+                    action={this.props.item.action}
+                    onClick={this.props.item.onClick ? this.props.item.onClick : undefined}
+                    onDoubleClick={this.props.item.onDoubleClick
+                        ? this.props.item.onDoubleClick
+                        : undefined}
+                    addItem={this.props.addItem}
+                    itemsDropdown={this.props.itemsDropdown}
+                    hexColor={this.props.item.hexColor}
+                    locked={this.props.item.locked}
+                    positionLocked={this.props.item.positionLocked}
+                    onAddItem={() => this.props.onAddItem}
+                    showDragHandle={this.props.showDragHandle}
+                />
+            </div>
+        );
+
+        if (!usePortal) {
+            return child;
+        }
+
+        // if dragging - put the item in a portal
+        return ReactDOM.createPortal(child, document.body);
+    }
+}
+
 export {
     TableList, TableListItem
 };

package/app-typescript/components/Menu.tsx

@@ -131,7 +131,7 @@ export class Menu extends React.Component<IProps, {}> {
 
     render() {
         return (
-            <div>
+            <React.Fragment>
                 {
                     this.props.children(this.toggle)
                 }
@@ -167,7 +167,7 @@ export class Menu extends React.Component<IProps, {}> {
                         baseZIndex={this.props.zIndex ?? superdeskTopBarZIndex}
                     />
                 </div>
-            </div>
+            </React.Fragment>
         );
     }
 }

package/app-typescript/components/Spacer.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 export interface IPropsSpacer {
     h?: boolean; // horizontal
     v?: boolean; // vertical
-    gap: '4' | '8' | '16' | '32' | '64';
+    gap: '0' | '4' | '8' | '16' | '32' | '64';
     justifyContent?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
     alignItems?: 'start' | 'end' | 'center' | 'stretch';
     noGrow?: boolean;

package/app-typescript/components/TreeSelect.tsx

@@ -6,6 +6,7 @@ import _debounce from 'lodash/debounce';
 import { InputWrapper } from "./Form";
 import { createPopper } from '@popperjs/core';
 import {isEqual} from 'lodash';
+import {getTextColor} from './Label';
 
 interface IState<T> {
     value: Array<T>;
@@ -44,8 +45,10 @@ interface IPropsBase<T> {
     disabled?: boolean;
     getLabel(item: T): string;
     getId(item: T): string;
+    getBackgroundColor?(item: T): string;
+    getBorderColor?(item: T): string;
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
-    valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T, Wrapper: any): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
 }
 
@@ -102,7 +105,6 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.toggleMenu = this.toggleMenu.bind(this);
         this.dropdownRef = React.createRef();
         this.openDropdownRef = React.createRef();
-
     }
 
     componentDidMount = () => {
@@ -339,17 +341,24 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                         event.stopPropagation();
                         this.handleTree(event, option);
                     }}>
-                        {this.props.optionTemplate
+                        {this.props.getBorderColor
+                        && <div className="item-border"
+                        style={{backgroundColor: this.props.getBorderColor(option.value)}}></div>}
+                        <span
+                        style={this.props.getBackgroundColor
+                            ? {backgroundColor: this.props.getBackgroundColor(option.value),
+                            color: getTextColor(this.props.getBackgroundColor(option.value))}
+                            : undefined}
+                        className={'suggestion-item--bgcolor'
+                        + (selectedItem ? ' suggestion-item--disabled' : '')}
+                        >
+                            {this.props.optionTemplate
                             ? this.props.optionTemplate(option.value)
-                            : <span
-                            className={selectedItem
-                            ? 'suggestion-item--disabled' : undefined}
-                            >
-                                {this.props.getLabel(option.value)}
-                            </span>}
-                            {option.children && <span className="suggestion-item__icon">
-                                <Icon name="chevron-right-thin"></Icon>
-                            </span>}
+                            : this.props.getLabel(option.value)}
+                        </span>
+                        {option.children && <span className="suggestion-item__icon">
+                            <Icon name="chevron-right-thin"></Icon>
+                        </span>}
                     </li>;
                 });
             }
@@ -451,27 +460,46 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                             </button>}
                             <ul className="tags-input__tag-list">
                                 {this.state.value.map((item, i: number) => {
-                                    return <React.Fragment key={i}>
+                                    const Wrapper: React.ComponentType<{backgroundColor?: string}>
+                                    = ({backgroundColor, children}) => (
                                         <li
                                         className={"tags-input__tag-item tags-input__tag-item--multi-select"
                                         + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}
-                                        onClick={() => this.props.readOnly || this.removeClick(i)}>
-                                            <span className="tags-input__helper-box">
-                                                {this.props.valueTemplate
-                                                ? this.props.valueTemplate(item)
-                                                : <span>{this.props.getLabel(item)}</span>}
-                                                {this.props.readOnly
-                                                || <span className="tags-input__remove-button">
+                                        onClick={() => !this.props.readOnly && this.removeClick(i)}
+                                        style={this.props.valueTemplate
+                                        ? {backgroundColor}
+                                        : this.props.getBackgroundColor
+                                        && {backgroundColor: this.props.getBackgroundColor(item)}}>
+                                            <span
+                                            style={{color: backgroundColor
+                                            ? getTextColor(backgroundColor)
+                                            : this.props.getBackgroundColor
+                                            &&  getTextColor(this.props.getBackgroundColor(item))}}
+                                            className="tags-input__helper-box">
+                                                {children}
+                                                {!this.props.readOnly && <span className="tags-input__remove-button">
                                                     <Icon name="close-small"></Icon>
                                                 </span>}
                                             </span>
                                         </li>
-                                    </React.Fragment>;
+                                    );
+
+                                    return (
+                                        <React.Fragment key={i}>
+                                            {this.props.valueTemplate
+                                            ? this.props.valueTemplate(item, Wrapper)
+                                            : <Wrapper>
+                                                <span>{this.props.getLabel(item)}</span>
+                                            </Wrapper>
+                                            }
+                                        </React.Fragment>
+                                    );
                                 })}
                             </ul>
                             {this.state.value.length > 0
                                 ? this.props.readOnly
                                 || <button className="tags-input__remove-value"
+                                style={{position: 'relative', bottom: '2px'}}
                                 onClick={() => this.setState({value: []})}>
                                     <Icon name='remove-sign'></Icon>
                                 </button> : null}
@@ -490,21 +518,40 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 </span>
                             </span>}
                             {this.state.value.map((item, i: number) => {
-                                return <React.Fragment key={i}>
+                                const Wrapper: React.ComponentType<{backgroundColor?: string, borderColor?: string}>
+                                = ({backgroundColor, borderColor, children}) => (
                                     <span
                                     className={ 'tags-input__single-item'
                                     + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}
                                     onClick={() => this.props.readOnly || this.removeClick(i)}>
-                                        <span className="tags-input__helper-box">
-                                            {this.props.valueTemplate
-                                            ? this.props.valueTemplate(item)
-                                            : <span>{this.props.getLabel(item)}</span>}
+                                        {this.props.getBorderColor
+                                        && <div className="item-border item-border-selected"
+                                        style={borderColor
+                                        ? {backgroundColor: borderColor}
+                                        : {backgroundColor: this.props.getBorderColor(item)}}></div>}
+                                        <span
+                                        style={{color: backgroundColor && getTextColor(backgroundColor)}}
+                                        className="tags-input__helper-box">
+                                            <span
+                                            className={backgroundColor && `tags-input__tag-item`}
+                                            style={{backgroundColor, margin: 0}}>
+                                                {children}
+                                            </span>
                                             {this.props.readOnly
                                             || <span className="tags-input__remove-button">
                                                 <Icon name='remove-sign'></Icon>
                                             </span>}
                                         </span>
                                     </span>
+                                );
+
+                                return <React.Fragment key={i}>
+                                    {this.props.valueTemplate
+                                    ? this.props.valueTemplate(item, Wrapper)
+                                    : <Wrapper>
+                                        <span>{this.props.getLabel(item)}</span>
+                                    </Wrapper>
+                                    }
                                 </React.Fragment>;
                             })}
                        </div>
@@ -583,14 +630,19 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                             event.stopPropagation();
                                             this.handleTree(event, option);
                                         }}>
-                                            {this.props.optionTemplate
-                                            ? this.props.optionTemplate(option.value)
-                                            : <span
-                                            className={selectedItem
-                                            ? 'suggestion-item--disabled' : undefined}
+                                            {(this.props.getBorderColor && !this.props.allowMultiple) && <div className="item-border" style={{backgroundColor: this.props.getBorderColor(option.value)}}></div>}
+                                            <span
+                                            style={(this.props.getBackgroundColor && option.value)
+                                                ? {backgroundColor: this.props.getBackgroundColor(option.value),
+                                                color: getTextColor(this.props.getBackgroundColor(option.value))}
+                                                : undefined}
+                                            className={'suggestion-item--bgcolor'
+                                            + (selectedItem ? ' suggestion-item--disabled' : '')}
                                             >
-                                                {this.props.getLabel(option.value)}
-                                            </span>}
+                                                {this.props.optionTemplate
+                                                ? this.props.optionTemplate(option.value)
+                                                : this.props.getLabel(option.value)}
+                                            </span>
                                             {option.children && <span className="suggestion-item__icon">
                                                 <Icon name="chevron-right-thin"></Icon>
                                             </span>}