superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx

@@ -69,7 +69,7 @@ export class FirstPlayground extends React.Component<IProps, IState> {
 
                 <div className='sd-content-wrapper__main-content-area sd-main-content-grid comfort'>
                     <Components.HeaderPanel >
-                        <SubNav theme={this.state.theme}>
+                        <SubNav>
                             <ButtonGroup align='inline'>
                                 <Dropdown
                                     items={[
@@ -85,11 +85,11 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                                     <NavButton onClick={() => false} />
                                 </Dropdown>
                             </ButtonGroup>
-                            <ButtonGroup align='right'>
+                            <ButtonGroup align='end'>
                                 <NavButton icon='dots-vertical' onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav theme={this.state.theme}>
+                        <SubNav>
                             <ButtonGroup >
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
@@ -100,7 +100,7 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                                     { value: 'itemtype03', label: 'Videos only' },
                                     { value: 'itemtype04', label: 'Documents only' }]} />
                             </CheckButtonGroup>
-                            <ButtonGroup align='right'>
+                            <ButtonGroup align='end'>
                                 <NavButton icon='adjust' onClick={this.handleTheme} />
                                 <NavButton icon='th-list' onClick={() => false} />
                             </ButtonGroup>

package/examples/pages/playgrounds/react-playgrounds/Index.tsx

@@ -1,3 +1,11 @@
 export { FirstPlayground } from './FirstPlayground';
 export { SamsPlayground } from './SamsPlayground';
-export { TestGround } from './TestGround';
+export { TestGround } from './TestGround';
+export { UiPlayground } from './UiPlayground';
+export { PageLayoutTest } from './PageLayoutTest';
+export { EditorTest } from './EditorTest';
+export { Multiedit } from './Multiedit';
+export { RundownEditor } from './RundownEditor';
+export { PersonalProfile } from './PersonalProfile';
+export { Rundowns } from './Rundowns';
+export { CoreLayout } from './CoreLayout';

package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx

@@ -0,0 +1,321 @@
+import * as React from 'react';
+import * as Components from './components/Index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, Modal } from '../../../../app-typescript/index';
+import * as Layout from '../../../../app-typescript/components/Layouts';
+import * as Form from '../../../../app-typescript/components/Form';
+import * as Nav from '../../../../app-typescript/components/Navigation';
+import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
+import { Spacer } from '../../../../app-typescript/components/Spacer';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+interface IState {
+    theme: 'dark' | 'light' | string;
+    itemType: string;
+    dropDownState: string;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1: boolean;
+    value2: boolean;
+    value3: boolean;
+    leftPanelOpen: boolean;
+    rightPanelOpen: boolean;
+    rightPanelPinned: boolean;
+    sideOverlayOpen: boolean;
+    sideBarOpen: boolean;
+    arr: any;
+}
+
+export class Multiedit extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light',
+            itemType: 'itemtype01',
+            dropDownState: '',
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: false,
+            value2: false,
+            value3: false,
+            leftPanelOpen: false,
+            rightPanelOpen: false,
+            rightPanelPinned: false,
+            sideOverlayOpen: false,
+            sideBarOpen: false,
+            arr: [<Editor />, <Editor />]
+            
+        }
+        this.handleTheme = this.handleTheme.bind(this);
+    }
+
+    handleTheme(newTheme: string) {
+        this.setState({
+            theme: newTheme
+        })
+    }
+
+    changeStatus(item: any, status: string) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        } else {
+            item.status.push(status);
+        }
+    }
+
+    render() {
+        return (    
+            <Modal
+            className='p-dialog-flex'
+            onHide={() => false}
+            maximized={true} contentPadding={"none"}
+            headerTemplate="Multiedit"
+            visible={true} >
+                <Spacer children={this.state.arr} gap={'0'}></Spacer>
+                <div style={{
+                    padding: '0 20px',
+                    display: 'flex',
+                    alignItems: 'center'
+                }}>
+                    <Dropdown
+                    append
+                    items={[
+                            { label: 'Action 1', onSelect: () => this.setState({arr: [...this.state.arr, <Editor />]}) },
+                    ]}>
+                        <Button type="primary" icon="plus-large" text="Add article" style="filled" size="large" shape="round" iconOnly={true} onClick={()=> false} />
+                    </Dropdown>
+                </div>
+            </Modal> 
+        );
+    }
+}
+
+interface IEditor {
+    sideBarOpen?: boolean;
+}
+
+export class Editor extends React.Component<IEditor, IEditor> {
+    constructor(props: IEditor) {
+        super(props);
+        this.state = {
+            sideBarOpen: false,
+            
+        }
+    }
+
+    render() {
+    return <div style={{borderRight: '4px solid grey'}}>
+        <Layout.AuthoringFrame
+        header={(
+            <SubNav zIndex={2}>
+                <ButtonGroup align='end'>
+                    <ButtonGroup subgroup={true} spaces="no-space">
+                        <Tooltip text='More actions' flow='left'>
+                            <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                        </Tooltip>
+                        <Tooltip text='Send to / Publish' flow='left'>
+                            <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                        </Tooltip>
+                        <Tooltip text='Send to / Publish' flow='left'>
+                            <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
+                        </Tooltip>
+                    </ButtonGroup>
+                </ButtonGroup>
+            </SubNav>
+        )}
+        main={(
+            <Layout.AuthoringMain
+            headerPadding='medium'
+            toolBar={(
+                <React.Fragment>
+                    <div className="sd-editor-toolbar__content">
+                        <dl>
+                            <dt>Created</dt>
+                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                            <dt>by</dt>
+                            <dt>Nareg Asmarian</dt>
+                        </dl>
+                        <dl>
+                            <dt>Modified</dt>
+                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                        </dl>
+                    </div>
+                    <ButtonGroup align='end'>
+                        <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
+                        <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
+                        <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
+                    </ButtonGroup>
+                </React.Fragment>
+            )}
+            authoringHeader ={(
+                <React.Fragment>
+                    <Form.FormGroup inlineLabel={true}>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Slugline'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={false}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} />
+                        </Form.FormItem>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Slugline'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={false}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} /> 
+                        </Form.FormItem>
+                    </Form.FormGroup>
+                    <Form.FormGroup inlineLabel={true}>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Genre'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={false}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} /> 
+                        </Form.FormItem>
+                    </Form.FormGroup>
+                    <Form.FormGroup marginBottom='0' inlineLabel={true}>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Subject'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={true}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} /> 
+                        </Form.FormItem>
+                        <Form.FormItem autoWidth={true}>
+                            <Form.FormText>Just testing:</Form.FormText>
+                        </Form.FormItem>
+                        <Form.FormItem>
+                            <Select
+                                label='Categories'
+                                labelHidden={true}
+                                value='This is some value'
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={true}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                            </Select>
+                        </Form.FormItem>
+                        <Form.FormItem autoWidth={true}>
+                            <ButtonGroup>
+                                <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
+                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                <Button text="Submit" onClick={()=> false} type="primary" />
+                            </ButtonGroup>
+                        </Form.FormItem>
+                    </Form.FormGroup>
+                </React.Fragment>
+            )}>
+            </Layout.AuthoringMain>
+        )}
+        sidePanel={(
+            <Layout.Panel side='right' background='grey' open={false} size='x-small'>
+                <Layout.PanelHeader title='Pinned content' onClose={() => false}>
+                </Layout.PanelHeader>
+                <Layout.PanelContent>
+                    <Layout.PanelContentBlock>
+                        <BoxedList density='comfortable'>
+                            <BoxedListItem 
+                                type="success"
+                                clickable={true}
+                                media={(
+                                    <Icon name='slideshow'  />
+                                )}
+                                actions={(
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                )}
+                            >
+                                <BoxedListContentRow>
+                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+                                </BoxedListContentRow>
+                                <BoxedListContentRow>
+                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem 
+                                type="warning"
+                                media={(
+                                    <AvatarWrapper
+                                        size="medium"
+                                        >
+                                        <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
+                                    </AvatarWrapper>
+                                )}
+                                footer={(
+                                    <ButtonGroup align="end">
+                                        <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
+                                        <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
+                                    </ButtonGroup>
+                                )}
+                                actions={(
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                )}
+                            >
+                                <BoxedListContentRow>
+                                    Maecenas sed diam eget risus varius blandit sit amet magna.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem 
+                                selected={true}
+                                actions={(
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                )}
+                            >
+                                <BoxedListContentRow>
+                                    Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                        </BoxedList>
+                    </Layout.PanelContentBlock>
+                </Layout.PanelContent>
+            </Layout.Panel>
+        )}
+        
+        sideBarClosed={this.state.sideBarOpen}
+        sideBar={(
+            <Nav.SideBarTabs
+            items={[
+                { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => false },
+                { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => false },
+                { icon: 'history', size: 'big', tooltip: 'History', onClick: () => false },
+                { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => false },
+                { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => false },
+                { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => false },
+                { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => false }]} />
+        )}
+    />
+    </div>
+    }
+}

package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import * as Components from './components/Index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge, Divider } from '../../../../app-typescript/index';
+import * as GridElements from '../../../../app-typescript/components/GridItem';
+import * as Layout from '../../../../app-typescript/components/Layouts';
+import dummy_items from '../dummy-data/items';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+interface IState {
+    theme: 'dark' | 'light' | string;
+    itemType: string;
+    dropDownState: string;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1: boolean;
+    leftPanelOpen: boolean;
+    rightPanelOpen: boolean;
+}
+
+export class PageLayoutTest extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light',
+            itemType: 'itemtype01',
+            dropDownState: '',
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: false,
+            leftPanelOpen: false,
+            rightPanelOpen: false,
+        }
+        this.handleTheme = this.handleTheme.bind(this);
+    }
+
+    handleTheme(newTheme: string) {
+        this.setState({
+            theme: newTheme
+        })
+    }
+
+    changeStatus(item: any, status: string) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        } else {
+            item.status.push(status);
+        }
+    }
+
+    render() {
+        return (
+            <Layout.PageLayout
+            header={(
+<SubNav zIndex={2}>
+                <ButtonGroup align="start" padded={true}>
+                    <Button
+                        text="Open left panel"
+                        style="hollow"
+                        onClick={() => this.setState({'leftPanelOpen': !this.state.leftPanelOpen})}
+                    />
+                </ButtonGroup>
+                <ButtonGroup align='end'>
+                    <Button
+                            text="Open right panel"
+                            style="hollow"
+                            onClick={() => this.setState({'rightPanelOpen': !this.state.rightPanelOpen})}
+                        />
+                    <Divider size="mini" />
+                    <ButtonGroup subgroup={true} spaces="no-space">
+                        <Dropdown
+                            items={[
+                                {
+                                    type: 'group', label: 'Chose a theme', items: [
+                                        'divider',
+                                        { label: 'Light', onSelect: () => this.handleTheme('light-ui')},
+                                        { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
+                                    ]
+                                },
+                            ]}>
+                            <NavButton type='default' icon='adjust' onClick={()=> false} />
+                        </Dropdown>
+                    </ButtonGroup>
+                </ButtonGroup>
+            </SubNav>
+            )}
+            leftPanelOpen={this.state.leftPanelOpen}
+            leftPanel={(
+                <Layout.Panel side='left' background='light' open={this.state.leftPanelOpen} size='x-large'>
+                    <Layout.PanelHeader  title='This is the title for the Panel' onClose={() => this.setState({'leftPanelOpen': false})}>
+                    </Layout.PanelHeader>
+                    <Layout.PanelContent>
+                        <Layout.PanelContentBlock>
+                            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
+                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
+                                risus, porta ac consectetur ac, vestibulum at eros.</p>
+                        </Layout.PanelContentBlock>
+                    </Layout.PanelContent>
+                </Layout.Panel>
+            )}
+            rightPanelOpen={this.state.rightPanelOpen}
+            rightPanel={(
+                <Layout.Panel side='right' background='grey' open={this.state.rightPanelOpen} size='small'>
+                    <Layout.PanelHeader color='blueGreyDarker' title='Right Panel Title' onClose={() => this.setState({'rightPanelOpen': false})}>
+                    </Layout.PanelHeader>
+                    <Layout.PanelContent>
+                        <Layout.PanelContentBlock>
+                            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.
+                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+                                vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Morbi leo
+                                risus, porta ac consectetur ac, vestibulum at eros.</p>
+                        </Layout.PanelContentBlock>
+                    </Layout.PanelContent>
+                </Layout.Panel>
+            )}
+            main={(
+                <GridList size="small" gap="medium" margin="3">
+                    {dummy_items.map((item, index) =>
+                        <GridElements.GridItem locked={item.locked} status={item.status} itemtype={item.type} key={index}>
+                            <GridElements.GridItemCheckWrapper>
+                                <Checkbox checked={item.selected} label={{text:''}} onChange={(value) => {
+                                    item.selected = value;
+                                    this.changeStatus(item, 'selected');
+                                }} />
+                            </GridElements.GridItemCheckWrapper>
+                            <GridElements.GridItemTopActions>
+                                <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
+                            </GridElements.GridItemTopActions>
+                            <GridElements.GridItemMedia>
+                                { item.image ? <img src={item.image} alt={item.imageAlt}/> : null }
+                            </GridElements.GridItemMedia>
+                            <GridElements.GridItemContent>
+                                <GridElements.GridItemTime time={item.date} />
+                                <GridElements.GridItemTitle>{item.title}</GridElements.GridItemTitle>
+                                <GridElements.GridItemText>{item.description}</GridElements.GridItemText>
+                            </GridElements.GridItemContent>
+                            <GridElements.GridItemFooter>
+                                <GridElements.GridItemFooterBlock align='left'>
+                                    <Icon name={item.type} className='sd-grid-item__type-icn' />
+                                    <Badge text={item.urgency} color={item.urgencyColor} />
+                                    <Badge text={item.priority} shape='square' color={item.priorityColor} />
+                                </GridElements.GridItemFooterBlock>
+                                <GridElements.GridItemFooterActions>
+                                    <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                </GridElements.GridItemFooterActions>
+                            </GridElements.GridItemFooter>
+                        </GridElements.GridItem>
+                    )}
+                </GridList>
+            )}
+        />
+        );
+    }
+}