superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/dist/playgrounds/react-playgrounds/CoreLayout.tsx

@@ -5,6 +5,7 @@ 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 { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
+import { clone } from 'lodash';
 
 interface IProps {
     children?: React.ReactNode;
@@ -19,6 +20,7 @@ interface IState {
     theme: 'dark' | 'light' | string;
     mainMenuOpen: boolean;
     notificationsOpen: boolean;
+    botNavArray: any;
 }
 
 export class CoreLayout extends React.Component<IProps, IState> {
@@ -28,9 +30,16 @@ export class CoreLayout extends React.Component<IProps, IState> {
             theme: 'light',
             mainMenuOpen: false,
             notificationsOpen: false,
+            botNavArray: [
+                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e) => this.handleDelete(e) },
+                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+                            { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+            ]
         }
         this.handleMainMenu = this.handleMainMenu.bind(this);
         this.handleNotifications = this.handleNotifications.bind(this);
+        this.handleDelete = this.handleDelete.bind(this);
     }
 
     handleMainMenu() {
@@ -38,56 +47,65 @@ export class CoreLayout extends React.Component<IProps, IState> {
             mainMenuOpen: !state.mainMenuOpen,
         }));
     }
+
     handleNotifications() {
         this.setState((state) => ({
             notificationsOpen: !state.notificationsOpen,
         }));
     }
+    
+    handleDelete(indexNumber: number) {
+        const newItems = clone(this.state.botNavArray);
+        newItems.splice(indexNumber, 1);
 
+        this.setState({
+            botNavArray: newItems,
+        });  
+    }
 
     render() {
         return (
             <Layout.CoreLayout
-                heading='Core Layout'
-                menuOpen={this.state.mainMenuOpen}
-                onClick={this.handleMainMenu}
-                active={this.state.mainMenuOpen}
-                ariaControls='main-menu'
-                menuId='main-menu'
-                slideInMenu={(
-                    <Layout.MainMenu
-                        headerTitle='Main Menu'
-                        poweredBy='Powered by Superdesk technology'
-                        header={(null)}
-                        footerContent={true}
-                        footer={(
-                            <p>Menu footer testing</p>
-                        )}
-                    >
-                        <LeftMenu 
-                            style='blanc'
-                            reverseItemBorder={true}
-                            size='large'
-                            ariaLabel={'Left navigation'}   
-                            activeItemId='1'
-                            groups={[
-                                { label: 'MAIN SECTIONS', items: [
-                                    { id: '1', label: 'Section 1', ref:'section1'},
-                                    { id: '2', label: 'Section 2', ref: 'section2' },
-                                    { id: '3', label: 'Section 3', ref: 'section3' },
-                                
-                                ]},
-                                { label:'OTHER SECTIONS', items: [
-                                    { id: '4', label: 'Section 4', ref: 'section4' },
-                                    { id: '5', label: 'Section 5', ref: 'section5' },
-                                ]},
-                                { label:'OTHER SECTIONS', items: [
-                                    { id: '6', label: 'Section 6', ref: 'section6' },
-                                    { id: '7', label: 'Section 7', ref: 'section7' },
-                                ]}
-                            ]}
-                        onSelect={() => false} />
-                    </Layout.MainMenu>
+            heading='Core Layout'
+            menuOpen={this.state.mainMenuOpen}
+            onClick={this.handleMainMenu}
+            active={this.state.mainMenuOpen}
+            ariaControls='main-menu'
+            menuId='main-menu'
+            editorFullWidth={false}
+            slideInMenu={(
+                <Layout.MainMenu
+                headerTitle='Main Menu'
+                poweredBy='Powered by Superdesk technology'
+                header={(null)}
+                footerContent={true}
+                footer={(
+                    <p>Menu footer testing</p>
+                )}>
+                    <LeftMenu 
+                    style='blanc'
+                    reverseItemBorder={true}
+                    size='large'
+                    ariaLabel={'Left navigation'}   
+                    activeItemId='1'
+                    groups={[
+                        { label: 'MAIN SECTIONS', items: [
+                            { id: '1', label: 'Section 1', ref:'section1'},
+                            { id: '2', label: 'Section 2', ref: 'section2' },
+                            { id: '3', label: 'Section 3', ref: 'section3' },
+                        
+                        ]},
+                        { label:'OTHER SECTIONS', items: [
+                            { id: '4', label: 'Section 4', ref: 'section4' },
+                            { id: '5', label: 'Section 5', ref: 'section5' },
+                        ]},
+                        { label:'OTHER SECTIONS', items: [
+                            { id: '6', label: 'Section 6', ref: 'section6' },
+                            { id: '7', label: 'Section 7', ref: 'section7' },
+                        ]}
+                    ]}
+                    onSelect={() => false} />
+                </Layout.MainMenu>
                 )}
                 topMenu={(
                     <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
@@ -96,22 +114,16 @@ export class CoreLayout extends React.Component<IProps, IState> {
                     <>
                     <Layout.BottomBarAction onClick={()=> false} />
                     <BottomNav
-                        items={[
-                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => console.log('test1') },
-                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => console.log('test2')},
-                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false},
-                            { title: 'Donec sed odio dui.', onClick: () => false},
-                    ]} />
+                        items={this.state.botNavArray} />
                     </>
                 )}
                 overlay={(
                     <Layout.NotificationPanel
-                        header={(null)}
-                        headerTitle='Notifications'
-                        open={this.state.notificationsOpen}
-                        onClick={this.handleNotifications}
-                        theme='dark'
-                    >
+                    header={(null)}
+                    headerTitle='Notifications'
+                    open={this.state.notificationsOpen}
+                    onClick={this.handleNotifications}
+                    theme='dark'>
                         <BoxedList>
                             <BoxedListItem unread={true}>
                                 <Time datetime='29.06.2022'>29.06.2022</Time>
@@ -137,8 +149,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
                         </BoxedList>
 
                     </Layout.NotificationPanel>
-                )}
-            >
+                )}>
             </Layout.CoreLayout>
         );
     }

package/dist/playgrounds/react-playgrounds/Index.tsx

@@ -4,6 +4,7 @@ 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';

package/dist/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/dist/playgrounds/react-playgrounds/RundownEditor.tsx

@@ -1,11 +1,8 @@
 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, RadioButtonGroup, Container, Label, IconLabel } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } 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 { SimpleList, SimpleListItem } from '../../../../app-typescript/components/Lists';
 import { TableList } from '../../../../app-typescript/components/Lists/TableList';
 
 interface IProps {
@@ -27,6 +24,7 @@ interface IState {
     rightPanelPinned: boolean;
     sideOverlayOpen: boolean;
     array: any;
+    inputValue: string;
 }
 
 export class RundownEditor extends React.Component<IProps, IState> {
@@ -46,6 +44,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
             rightPanelOpen: false,
             rightPanelPinned: false,
             sideOverlayOpen: false,
+            inputValue: 'string',
             array: [
                 {
                     start: <>
@@ -113,7 +112,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
                     onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
                 },
             ]
-            
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -137,7 +135,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                 <Layout.HeaderPanel>       
                     <SubNav>
                         <ButtonGroup align='end'>
-                            <Button text="Cancel"  onClick={()=> false} type="default" />
+                            <Button text="Cancel" onClick={()=> false} type="default" />
                             <Button text="Save Rundown" onClick={()=> false} type="primary" />
                             <Divider size="mini" />
                             <ButtonGroup subgroup={true} spaces="no-space">
@@ -299,31 +297,35 @@ export class RundownEditor extends React.Component<IProps, IState> {
                         )}
                         >
                             <Container direction='column' className='sd-margin-y--2'>
-                                <input
-                                    onChange={()=> false}
+                                <Input 
+                                    label='Rundown title'
+                                    value={'Marker // 01.06.2022'}
+                                    boxedStyle={true}
+                                    boxedLable={true}
+                                    size='x-large'
+                                    placeholder='Rundown title'
+                                    labelHidden={true}
                                     type='text'
-                                    value='Marker // 01.06.2022'
-                                    className='sd-editor__input--title' />
+                                    tabindex={0}
+                                    onChange={(value) => this.setState({inputValue: value})} />
                             </Container>
                             <ButtonGroup>
                                 <IconLabel style='translucent' innerLabel='Airtime:' text='19:00 - 19:45' size='large' type='primary' icon='time' />
                                 <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='large' type='warning' />
                                 <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
-                                <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='large' />
+                                <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
                             </ButtonGroup>
-
                             <TableList
-                            className='sd-margin-y--4'
-                            dragAndDrop
-                            addItem
-                            array={this.state.array}
-                            itemsDropdown={[
-                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                            ]}
-                            onClick={() => false}
-                            />   
+                                className='sd-margin-y--4'
+                                dragAndDrop
+                                addItem
+                                array={this.state.array}
+                                itemsDropdown={() => [
+                                    { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                    { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                    { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                ]}
+                            />
 
                     </Layout.AuthoringMain>
                 </Layout.MainPanel>
@@ -336,6 +338,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                 <Layout.AuthoringMain
                                     headerPadding='medium'
                                     toolbarCustom={true}
+                                    headerCollapsed={true}
                                     toolBar={(
                                         <React.Fragment>
                                             <SubNav className='sd-shadow--z0'>