superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.20

package/dist/playgrounds/accessible-theme-test.html

@@ -807,7 +807,7 @@
 
         </div>
     </section>
-    <footer class="bottom-bar">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/layout-test-2.html

@@ -789,7 +789,7 @@
 
         </div>
     </section>
-    <footer class="bottom-bar">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/list-item-test.html

@@ -627,7 +627,7 @@
                 <!-- END Editor content -->
             </div>
         </section>
-        <footer class="bottom-bar ">
+        <footer class="sd-bottom-bar">
             This is the optional footer.
         </footer>
     </div>

package/dist/playgrounds/master-desk.html

@@ -1566,7 +1566,7 @@
 
         </div>
     </section>
-    <footer class="bottom-bar">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/media-carousel.html

@@ -1032,7 +1032,7 @@
             <!-- END Editor content -->
         </div>
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar ">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/photo-desk.html

@@ -911,7 +911,7 @@
             <!-- END Editor content -->
         </div>
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 

package/dist/playgrounds/planning.html

@@ -887,7 +887,7 @@
             <!-- END Editor content -->
         </div>
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 

package/dist/playgrounds/publish.html

@@ -538,7 +538,7 @@
             <!-- END Editor content -->
         </div>
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/publisher-content-analytics.html

@@ -370,7 +370,7 @@
 
 
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/publisher-content-list-automatic.html

@@ -290,7 +290,7 @@
 
 
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/publisher-content-list-manual.html

@@ -605,7 +605,7 @@
 
 
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/publisher-content-lists.html

@@ -249,7 +249,7 @@
 
 
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/publisher-dashboard.html

@@ -317,7 +317,7 @@
 
 
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

package/dist/playgrounds/publisher-output-control.html

@@ -3653,7 +3653,7 @@
 
 
     </section>
-    <footer class="bottom-bar ">
+    <footer class="sd-bottom-bar">
         This is the optional footer.
     </footer>
 </div>

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

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import * as Components from './components/Index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, LeftMenu, BoxedList, BoxedListItem, BoxedListContentRow, Heading, Text, Time } 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 { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
+import { clone } from 'lodash';
+
+interface IProps {
+    children?: React.ReactNode;
+    heading?: string;
+    active?: boolean;
+    onClick(): void;
+    ariaControls?: string;
+    menuId?: string;
+}
+
+interface IState {
+    theme: 'dark' | 'light' | string;
+    mainMenuOpen: boolean;
+    notificationsOpen: boolean;
+    botNavArray: any;
+}
+
+export class CoreLayout extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            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() {
+        this.setState((state) => ({
+            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'
+            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} />
+                )}
+                footer={(
+                    <>
+                    <Layout.BottomBarAction onClick={()=> false} />
+                    <BottomNav
+                        items={this.state.botNavArray} />
+                    </>
+                )}
+                overlay={(
+                    <Layout.NotificationPanel
+                    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>
+                                <BoxedListContentRow>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et
+                                    magnis dis parturient montes, nascetur ridiculus mus.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem>
+                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <BoxedListContentRow>
+                                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula
+                                    porta felis euismod semper.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem>
+                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <BoxedListContentRow>
+                                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer
+                                    posuere erat a ante venenatis dapibus posuere velit aliquet.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                        </BoxedList>
+
+                    </Layout.NotificationPanel>
+                )}>
+            </Layout.CoreLayout>
+        );
+    }
+}

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

@@ -7,3 +7,4 @@ export { EditorTest } from './EditorTest';
 export { RundownEditor } from './RundownEditor';
 export { PersonalProfile } from './PersonalProfile';
 export { Rundowns } from './Rundowns';
+export { CoreLayout } from './CoreLayout';

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'>

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

@@ -1,14 +1,9 @@
 import * as React from 'react';
-import * as Components from './components/Index';
 import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioGroup, RadioButtonGroup, Input, Select, Option, Label, IconLabel, Icon, IconButton, Checkbox, GridList, Badge, Tooltip, CreateButton, Modal, EmptyState, Container, BoxedList, BoxedListItem, BoxedListContentRow, Text, Heading, FormLabel, SlidingToolbar, Switch, SwitchGroup, SearchBar } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import {RundownEditor} from './RundownEditor';
 import * as Nav from '../../../../app-typescript/components/Navigation';
-import * as GridElements from '../../../../app-typescript/components/GridItem';
-
-
-import dummy_items from '../dummy-data/items';
 import { ContentList } from '../../../../app-typescript/components/Lists/ContentList';
 import { TableList } from '../../../../app-typescript/components/Lists/TableList';
 
@@ -137,6 +132,10 @@ export class Rundowns extends React.Component<IProps, IState> {
         })
     }
 
+    componentDidUpdate() {
+        console.log(this.state);
+    }
+
     changeStatus(item: any, status: string) {
         if (item.status.includes(status)) {
             item.status.splice(item.status.indexOf(status), 1);
@@ -487,7 +486,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
                                     </Container>
                                     <Container className='sd-margin-s--auto sd-flex--items-center'>
-                                        <Dropdown
+                                        {/* <Dropdown
                                             align = 'right'
                                             append = {true}
                                             items={[
@@ -500,7 +499,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                                     ]
                                                 }]}>
                                             <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
-                                        </Dropdown>
+                                        </Dropdown> */}
                                     </Container>
                                 </Layout.PanelContentBlock>
 
@@ -524,15 +523,14 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
                                     </ButtonGroup>
                                     <TableList
-                                className='sd-margin-y--4'
-                                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'
+                                        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.PanelContentBlock>
                             </Layout.PanelContent>
                         </Layout.Panel>
@@ -553,6 +551,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* Manage Templates Modal */}
             <Modal headerTemplate="Manage Templates"
                 visible={this.state.modalManageTemplate}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}>
@@ -632,8 +631,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                                             </Container>
                                         </BoxedListItem>
                                     </BoxedList> */}
-
-
                             </Layout.PanelContent>
                         </Layout.Panel>
                     </Layout.LeftPanel>
@@ -652,6 +649,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* New Show Modal */}
             <Modal headerTemplate="Create new Show"
                 visible={this.state.modalNewShow}
+                zIndex={1000}
                 footerTemplate={newShowFooter}
                 contentBg='medium'
                 size='medium' onHide={() => {this.setState({modalNewShow: false})}}>
@@ -683,6 +681,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* New Show Modal Success */}
             <Modal headerTemplate="Create new Show"
                 visible={this.state.modalNewShowSuccess}
+                zIndex={1000}
                 footerTemplate={newShowFooter2}
                 contentBg='medium'
                 size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}>
@@ -692,14 +691,13 @@ export class Rundowns extends React.Component<IProps, IState> {
                         The show <strong>Marker</strong> has been successfully created.<br />
                         Do you want to cretate a template for this show right away?
                     </Text>
-
-
                 </Container>
             </Modal>
 
             {/* New Template Modal */}
             <Modal headerTemplate="Create new Template"
                 visible={this.state.modalNewTemplate}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}>
@@ -733,7 +731,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         </ButtonGroup>
                                     </Container>
                                     <BoxedList>
-                                    <BoxedListItem
+                                        <BoxedListItem
                                             alignVertical='center'
                                             clickable={true}
                                             density='compact'
@@ -805,6 +803,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* Manage Shows Modal */}
             <Modal headerTemplate="Manage Shows"
                 visible={this.state.modalManageShow}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalManageShow: false})}}>

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

@@ -141,7 +141,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                 <Components.PanelContentBlock>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='Title'
+                                            <Input
+                                                label='Title'
+                                                type='text'
+                                                value=''
                                                 error='This is error message'
                                                 inlineLabel={false}
                                                 disabled={false}
@@ -167,7 +170,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
 
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='Keyword'
+                                            <Input 
+                                                label='Keyword'
+                                                type='text'
+                                                value=''
                                                 error='This is error message'
                                                 inlineLabel={false}
                                                 disabled={false}
@@ -232,8 +238,11 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                             <Badge text={item.urgency} color={item.urgencyColor} />
                                             <Badge text={item.priority} shape='square' color={item.priorityColor} />
                                         </GridElements.GridItemFooterBlock>
+                                        <GridElements.GridItemFooterBlock align='right'>
+                                            <Label type='success' style='translucent' text='In progress' />
+                                        </GridElements.GridItemFooterBlock>
                                         <GridElements.GridItemFooterActions>
-                                            <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            <IconButton size='small' icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>