superdesk-ui-framework 3.0.1-beta.9 → 3.0.1

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,15 +1,15 @@
 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 {
     children?: React.ReactNode;
+    rightPanel?: boolean;
+    openPanel(): any;
+    closePanel(): void;
 }
 
 interface IState {
@@ -44,7 +44,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
             value2: false,
             value3: false,
             leftPanelOpen: false,
-            rightPanelOpen: false,
+            rightPanelOpen: this.props.rightPanel ? this.props.rightPanel : false,
             rightPanelPinned: false,
             sideOverlayOpen: false,
             inputValue: 'string',
@@ -60,7 +60,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
                 {
                     start: <>
@@ -73,7 +73,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                         <IconLabel style='translucent' innerLabel='Duration:' text='00:11' type='warning' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
                 {
                     start: <>
@@ -86,7 +86,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
                 {
                     start: <>
@@ -99,7 +99,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <IconLabel style='translucent' innerLabel='Duration:' text='00:15' type='alert' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
                 {
                     start: <>
@@ -112,10 +112,9 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
                         </>,
                     action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                    onClick: () => { this.props.openPanel() }
                 },
             ]
-            
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -319,40 +318,39 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                 <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
                                 <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
                             </ButtonGroup>
-
                             <TableList
                                 className='sd-margin-y--4'
                                 dragAndDrop
                                 addItem
                                 array={this.state.array}
-                                itemsDropdown={[
+                                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}
-                            />   
+                            />
 
                     </Layout.AuthoringMain>
                 </Layout.MainPanel>
 
-                <Layout.RightPanel open={this.state.rightPanelOpen}>
-                    <Layout.Panel size='full' side='right'>
+                <Layout.RightPanel open={this.props.rightPanel}>
+                    <Layout.Panel size='x-large' side='right'>
                         <Layout.PanelContent>
                             <Layout.AuthoringFrame
                                 main={
                                 <Layout.AuthoringMain
                                     headerPadding='medium'
                                     toolbarCustom={true}
+                                    headerCollapsed={true}
                                     toolBar={(
                                         <React.Fragment>
                                             <SubNav className='sd-shadow--z0'>
                                                 <SlidingToolbar>
                                                     <ButtonGroup align='start'>
-                                                        <IconButton ariaValue="Close" icon="close-small" onClick={() => this.setState({rightPanelOpen: !this.state.rightPanelOpen})} />
+                                                        <IconButton ariaValue="Close" icon="close-small" onClick={() => this.props.closePanel()} />
                                                     </ButtonGroup>
                                                     <ButtonGroup align='end'>
-                                                        <Button text="Save Changes" style='hollow' onClick={() => this.setState({rightPanelOpen: !this.state.rightPanelOpen})} type="primary" />
+                                                        <Button text="Save Changes" style='hollow' onClick={() => this.props.closePanel()} type="primary" />
                                                     </ButtonGroup>
                                                 </SlidingToolbar>
                                             </SubNav>

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';
 
@@ -164,13 +159,13 @@ export class Rundowns extends React.Component<IProps, IState> {
                 <Nav.SideBarMenu
                     items={[
                         { icon: 'dashboard', size: 'big' },
-                        { icon: 'view', size: 'big' },
+                        { icon: 'view', size: 'big', editor: this.state.openEditor },
                         { icon: 'marked-star', size: 'big' },
                         { icon: 'spike', size: 'big' },
                         { icon: 'personal', size: 'big' },
                         { icon: 'global-search', size: 'big' },
                         { icon: 'picture', size: 'big' },
-                        { icon: 'rundown', size: 'big', active: true }]} />
+                        { icon: 'rundown', size: 'big', }]} />
 
                 <Layout.LayoutContainer>
                     <Layout.HeaderPanel>
@@ -487,7 +482,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 +495,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 +519,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>
@@ -542,17 +536,21 @@ export class Rundowns extends React.Component<IProps, IState> {
                     <Layout.OverlayPanel />
                     {/* OVERLAY PANEL (Send To) */}
                 </Layout.LayoutContainer>
+
                 <Layout.ContentSplitter visible={this.state.openEditor} />
+
                 {/* RUNDOWN EDITOR */}
                 <Layout.AuthoringContainer open={this.state.openEditor}>
                     <RundownEditor />
                 </Layout.AuthoringContainer>
                 {/* END RUNDOWN EDITOR */}
+                
             </Layout.Layout >
 
             {/* 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 +630,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                                             </Container>
                                         </BoxedListItem>
                                     </BoxedList> */}
-
-
                             </Layout.PanelContent>
                         </Layout.Panel>
                     </Layout.LeftPanel>
@@ -652,6 +648,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 +680,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 +690,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 +730,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         </ButtonGroup>
                                     </Container>
                                     <BoxedList>
-                                    <BoxedListItem
+                                        <BoxedListItem
                                             alignVertical='center'
                                             clickable={true}
                                             density='compact'
@@ -804,7 +801,9 @@ export class Rundowns extends React.Component<IProps, IState> {
 
             {/* Manage Shows Modal */}
             <Modal headerTemplate="Manage Shows"
+            maximizable
                 visible={this.state.modalManageShow}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalManageShow: false})}}>