superdesk-ui-framework 3.0.0-rc12 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.vscode/settings.json +5 -0
- package/app/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +1 -0
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/styles/_icon-font.scss +1 -0
- package/app/styles/_master-desk.scss +2 -2
- package/app/styles/_modals.scss +1 -0
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_sd-pagination.scss +41 -0
- package/app/styles/grids/_grid-layout.scss +4 -14
- package/app/styles/menus/_sd-sidebar-menu.scss +1 -1
- package/app/styles/primereact/_pr-datepicker.scss +12 -0
- package/app/styles/primereact/_pr-dialog.scss +4 -0
- package/app/styles/variables/_colors.scss +37 -37
- package/app/template/search-handler.html +2 -2
- package/app-typescript/components/DatePicker.tsx +8 -9
- package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -1
- package/app-typescript/components/Lists/ContentList.tsx +3 -2
- package/app-typescript/components/Lists/TableList.tsx +17 -8
- package/app-typescript/components/Modal.tsx +6 -2
- package/app-typescript/components/Navigation/SideBarMenu.tsx +30 -4
- package/app-typescript/dist/components/Alert.d.ts +16 -0
- package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
- package/app-typescript/dist/components/Avatar.d.ts +33 -0
- package/app-typescript/dist/components/Badge.d.ts +13 -0
- package/app-typescript/dist/components/Button.d.ts +23 -0
- package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
- package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
- package/app-typescript/dist/components/Checkbox.d.ts +19 -0
- package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
- package/app-typescript/dist/components/DatePicker.d.ts +37 -0
- package/app-typescript/dist/components/Divider.d.ts +9 -0
- package/app-typescript/dist/components/DonutChart.d.ts +12 -0
- package/app-typescript/dist/components/Dropdown.d.ts +28 -0
- package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
- package/app-typescript/dist/components/EmptyState.d.ts +11 -0
- package/app-typescript/dist/components/FormLabel.d.ts +9 -0
- package/app-typescript/dist/components/Genie.d.ts +13 -0
- package/app-typescript/dist/components/GridItem.d.ts +69 -0
- package/app-typescript/dist/components/GridList.d.ts +14 -0
- package/app-typescript/dist/components/HeadingText.d.ts +10 -0
- package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
- package/app-typescript/dist/components/Icon.d.ts +12 -0
- package/app-typescript/dist/components/IconButton.d.ts +12 -0
- package/app-typescript/dist/components/IconLabel.d.ts +11 -0
- package/app-typescript/dist/components/Input.d.ts +24 -0
- package/app-typescript/dist/components/Label.d.ts +15 -0
- package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
- package/app-typescript/dist/components/Loader.d.ts +8 -0
- package/app-typescript/dist/components/NavButton.d.ts +15 -0
- package/app-typescript/dist/components/Popover.d.ts +13 -0
- package/app-typescript/dist/components/PropsList.d.ts +15 -0
- package/app-typescript/dist/components/Radio.d.ts +19 -0
- package/app-typescript/dist/components/RadioButton.d.ts +20 -0
- package/app-typescript/dist/components/Select.d.ts +29 -0
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
- package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
- package/app-typescript/dist/components/StrechBar.d.ts +4 -0
- package/app-typescript/dist/components/SubNav.d.ts +10 -0
- package/app-typescript/dist/components/Switch.d.ts +12 -0
- package/app-typescript/dist/components/TabCustom.d.ts +25 -0
- package/app-typescript/dist/components/TabList.d.ts +22 -0
- package/app-typescript/dist/components/Tag.d.ts +9 -0
- package/app-typescript/dist/components/TagInput.d.ts +7 -0
- package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
- package/app-typescript/dist/components/TimePicker.d.ts +11 -0
- package/app-typescript/dist/components/Tooltip.d.ts +11 -0
- package/app-typescript/dist/components/_Positioner.d.ts +27 -0
- package/app-typescript/dist/index.d.ts +56 -0
- package/dist/examples.bundle.css +39 -0
- package/dist/examples.bundle.js +1905 -1471
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +505 -3
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +12 -9
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +6 -6
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +29 -1
- package/dist/react/DatePicker.tsx +50 -2
- package/dist/react/Modal.tsx +154 -22
- package/dist/sd_icons.eot +0 -0
- package/dist/sd_icons.svg +1 -0
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +175 -21
- package/dist/superdesk-ui.bundle.js +1059 -1033
- package/dist/vendor.bundle.js +7 -7
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +505 -3
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +12 -9
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +6 -6
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +29 -1
- package/examples/pages/react/DatePicker.tsx +50 -2
- package/examples/pages/react/Modal.tsx +154 -22
- package/package.json +1 -1
- package/react/components/DatePicker.d.ts +2 -2
- package/react/components/DatePicker.js +3 -3
- package/react/components/Layouts/CoreLayout.d.ts +1 -0
- package/react/components/Layouts/CoreLayout.js +1 -1
- package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
- package/react/components/Layouts/CoreLayoutMain.js +1 -1
- package/react/components/Lists/ContentList.js +3 -2
- package/react/components/Lists/TableList.js +12 -4
- package/react/components/Modal.d.ts +2 -0
- package/react/components/Modal.js +3 -3
- package/react/components/Navigation/SideBarMenu.d.ts +6 -0
- package/react/components/Navigation/SideBarMenu.js +19 -2
- package/yarn-error.log +111 -0
@@ -1,11 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Components from './components/Index';
|
3
|
-
import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, LeftMenu, BoxedList, BoxedListItem, BoxedListContentRow, Heading, Text, Time } from '../../../../app-typescript/index';
|
3
|
+
import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, LeftMenu, BoxedList, BoxedListItem, BoxedListContentRow, Heading, Text, Time, Label, CreateButton, IconLabel, RadioButtonGroup, Select, Option } from '../../../../app-typescript/index';
|
4
4
|
import * as Layout from '../../../../app-typescript/components/Layouts';
|
5
5
|
import * as Form from '../../../../app-typescript/components/Form';
|
6
6
|
import * as Nav from '../../../../app-typescript/components/Navigation';
|
7
7
|
import { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
|
8
8
|
import { clone } from 'lodash';
|
9
|
+
import { RundownEditor } from './RundownEditor';
|
10
|
+
import { ContentList } from '../../../../app-typescript/components/Lists/ContentList';
|
11
|
+
import { TableList } from '../../../../app-typescript/components/Lists/TableList';
|
12
|
+
import { SearchBar } from './components/Index';
|
9
13
|
|
10
14
|
interface IProps {
|
11
15
|
children?: React.ReactNode;
|
@@ -21,6 +25,29 @@ interface IState {
|
|
21
25
|
mainMenuOpen: boolean;
|
22
26
|
notificationsOpen: boolean;
|
23
27
|
botNavArray: any;
|
28
|
+
itemType: string;
|
29
|
+
dropDownState: string;
|
30
|
+
openPreview: boolean;
|
31
|
+
openFilter: boolean;
|
32
|
+
itemSelected1: boolean;
|
33
|
+
itemSelected2: boolean;
|
34
|
+
itemSelected3: boolean;
|
35
|
+
value1: boolean;
|
36
|
+
modalBasic: boolean;
|
37
|
+
modalSmall: boolean;
|
38
|
+
modalMedium: boolean;
|
39
|
+
modalNewTemplate: boolean;
|
40
|
+
modalNewShow: boolean;
|
41
|
+
modalNewShowSuccess: boolean;
|
42
|
+
modalManageTemplate: boolean;
|
43
|
+
modalManageShow: boolean;
|
44
|
+
openEditor: boolean;
|
45
|
+
openShowEditor: boolean;
|
46
|
+
array: any;
|
47
|
+
fullEditor: boolean;
|
48
|
+
openPanel: boolean;
|
49
|
+
rightPanel: boolean;
|
50
|
+
previousState: boolean;
|
24
51
|
}
|
25
52
|
|
26
53
|
export class CoreLayout extends React.Component<IProps, IState> {
|
@@ -35,11 +62,80 @@ export class CoreLayout extends React.Component<IProps, IState> {
|
|
35
62
|
{ title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
|
36
63
|
{ icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
|
37
64
|
{ title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
|
65
|
+
],
|
66
|
+
itemType: 'itemtype01',
|
67
|
+
dropDownState: '',
|
68
|
+
openPreview: false,
|
69
|
+
openFilter: false,
|
70
|
+
itemSelected1: false,
|
71
|
+
itemSelected2: false,
|
72
|
+
itemSelected3: false,
|
73
|
+
value1: true,
|
74
|
+
modalBasic: false,
|
75
|
+
modalSmall: false,
|
76
|
+
modalMedium: false,
|
77
|
+
modalNewTemplate: false,
|
78
|
+
modalNewShow: false,
|
79
|
+
modalNewShowSuccess: false,
|
80
|
+
modalManageTemplate: false,
|
81
|
+
modalManageShow: false,
|
82
|
+
openEditor: false,
|
83
|
+
openShowEditor: false,
|
84
|
+
fullEditor: false,
|
85
|
+
openPanel: false,
|
86
|
+
rightPanel: false,
|
87
|
+
previousState: false,
|
88
|
+
array: [
|
89
|
+
{
|
90
|
+
start: <>
|
91
|
+
<Label style='translucent' text='aacc' />
|
92
|
+
<Label style='translucent' type='primary' text='prlg' />
|
93
|
+
</>,
|
94
|
+
center: <span>Duis mollis est non commodo</span>,
|
95
|
+
onClick: () => false,
|
96
|
+
},
|
97
|
+
{
|
98
|
+
start: <>
|
99
|
+
<Label style='translucent' type='warning' text='pokr' />
|
100
|
+
<Label style='translucent' text='slika' />
|
101
|
+
</>,
|
102
|
+
center: <span>Nullam id dolor id nibh ultricies</span>,
|
103
|
+
onClick: () => false,
|
104
|
+
},
|
105
|
+
{
|
106
|
+
start: <>
|
107
|
+
<Label style='translucent' text='aacc' />
|
108
|
+
<Label style='translucent' type='primary' text='prlg' />
|
109
|
+
</>,
|
110
|
+
center: <span>Duis mollis est non commodo</span>,
|
111
|
+
onClick: () => false,
|
112
|
+
},
|
113
|
+
{
|
114
|
+
start: <>
|
115
|
+
<Label style='translucent' type='warning' text='pokr' />
|
116
|
+
<Label style='translucent' text='slika' />
|
117
|
+
</>,
|
118
|
+
center: <span>Cras mattis consectetur purus</span>,
|
119
|
+
onClick: () => false,
|
120
|
+
},
|
121
|
+
{
|
122
|
+
start: <>
|
123
|
+
<Label style='translucent' text='aacc' />
|
124
|
+
<Label style='translucent' type='primary' text='prlg' />
|
125
|
+
</>,
|
126
|
+
center: <span>Duis mollis est non commodo</span>,
|
127
|
+
onClick: () => false,
|
128
|
+
},
|
38
129
|
]
|
39
130
|
}
|
131
|
+
|
40
132
|
this.handleMainMenu = this.handleMainMenu.bind(this);
|
41
133
|
this.handleNotifications = this.handleNotifications.bind(this);
|
42
134
|
this.handleDelete = this.handleDelete.bind(this);
|
135
|
+
this.handleFilter = this.handleFilter.bind(this);
|
136
|
+
this.handlePreview = this.handlePreview.bind(this);
|
137
|
+
this.handleTheme = this.handleTheme.bind(this);
|
138
|
+
this.handleShow = this.handleShow.bind(this);
|
43
139
|
}
|
44
140
|
|
45
141
|
handleMainMenu() {
|
@@ -63,6 +159,38 @@ export class CoreLayout extends React.Component<IProps, IState> {
|
|
63
159
|
});
|
64
160
|
}
|
65
161
|
|
162
|
+
handleFilter() {
|
163
|
+
this.setState((state) => ({
|
164
|
+
openFilter: !state.openFilter,
|
165
|
+
}));
|
166
|
+
}
|
167
|
+
|
168
|
+
handlePreview() {
|
169
|
+
this.setState((state) => ({
|
170
|
+
openPreview: !state.openPreview,
|
171
|
+
}));
|
172
|
+
}
|
173
|
+
|
174
|
+
handleShow() {
|
175
|
+
this.setState((state) => ({
|
176
|
+
openShowEditor: !state.openShowEditor,
|
177
|
+
}));
|
178
|
+
}
|
179
|
+
|
180
|
+
handleTheme(newTheme: string) {
|
181
|
+
this.setState({
|
182
|
+
theme: newTheme
|
183
|
+
})
|
184
|
+
}
|
185
|
+
|
186
|
+
changeStatus(item: any, status: string) {
|
187
|
+
if (item.status.includes(status)) {
|
188
|
+
item.status.splice(item.status.indexOf(status), 1);
|
189
|
+
} else {
|
190
|
+
item.status.push(status);
|
191
|
+
}
|
192
|
+
}
|
193
|
+
|
66
194
|
render() {
|
67
195
|
return (
|
68
196
|
<Layout.CoreLayout
|
@@ -72,7 +200,8 @@ export class CoreLayout extends React.Component<IProps, IState> {
|
|
72
200
|
active={this.state.mainMenuOpen}
|
73
201
|
ariaControls='main-menu'
|
74
202
|
menuId='main-menu'
|
75
|
-
editorFullWidth={
|
203
|
+
editorFullWidth={this.state.fullEditor}
|
204
|
+
openPanel={this.state.rightPanel}
|
76
205
|
slideInMenu={(
|
77
206
|
<Layout.MainMenu
|
78
207
|
headerTitle='Main Menu'
|
@@ -147,9 +276,382 @@ export class CoreLayout extends React.Component<IProps, IState> {
|
|
147
276
|
</BoxedListContentRow>
|
148
277
|
</BoxedListItem>
|
149
278
|
</BoxedList>
|
150
|
-
|
151
279
|
</Layout.NotificationPanel>
|
152
280
|
)}>
|
281
|
+
|
282
|
+
<Nav.SideBarMenu
|
283
|
+
items={[
|
284
|
+
{ icon: 'dashboard', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, },
|
285
|
+
{ icon: 'view', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor})},
|
286
|
+
{ icon: 'marked-star', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
|
287
|
+
{ icon: 'spike', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
|
288
|
+
{ icon: 'personal', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
|
289
|
+
{ icon: 'global-search', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
|
290
|
+
{ icon: 'picture', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
|
291
|
+
{ icon: 'rundown', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor})
|
292
|
+
}]} />
|
293
|
+
|
294
|
+
{!this.state.fullEditor && !this.state.rightPanel
|
295
|
+
&& <Layout.LayoutContainer>
|
296
|
+
<Layout.HeaderPanel>
|
297
|
+
<SubNav zIndex={2}>
|
298
|
+
<SearchBar placeholder='Search media'></SearchBar>
|
299
|
+
<ButtonGroup align='end' spaces='no-space'>
|
300
|
+
<Dropdown
|
301
|
+
items={[
|
302
|
+
{
|
303
|
+
type: 'group', label: 'Settings', items: [
|
304
|
+
'divider',
|
305
|
+
{ icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
|
306
|
+
{ icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
|
307
|
+
]
|
308
|
+
}]}>
|
309
|
+
<NavButton icon='settings' onClick={() => false} />
|
310
|
+
</Dropdown>
|
311
|
+
<Dropdown
|
312
|
+
header={[
|
313
|
+
{
|
314
|
+
type: 'group', label: 'Create', items: []
|
315
|
+
},
|
316
|
+
{
|
317
|
+
type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
|
318
|
+
{ icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
|
319
|
+
]
|
320
|
+
},
|
321
|
+
]}
|
322
|
+
items={[
|
323
|
+
{
|
324
|
+
type: 'group', label: 'Recent Templates', items: [
|
325
|
+
{ icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
|
326
|
+
{ icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
|
327
|
+
{ icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
|
328
|
+
{ icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
|
329
|
+
]
|
330
|
+
}]}
|
331
|
+
footer={[
|
332
|
+
{
|
333
|
+
type: 'group', items: [
|
334
|
+
{ icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
|
335
|
+
{ icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
|
336
|
+
]
|
337
|
+
},
|
338
|
+
]}>
|
339
|
+
|
340
|
+
<CreateButton ariaValue='Create' onClick={() => false} />
|
341
|
+
</Dropdown>
|
342
|
+
</ButtonGroup>
|
343
|
+
</SubNav>
|
344
|
+
<SubNav zIndex={1}>
|
345
|
+
<ButtonGroup align='start'>
|
346
|
+
<NavButton icon='filter-large' onClick={this.handleFilter} />
|
347
|
+
</ButtonGroup>
|
348
|
+
<ButtonGroup align='end'>
|
349
|
+
<ButtonGroup align='sub' padded={true} >
|
350
|
+
<Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
|
351
|
+
<Button text='Today' style='hollow' onClick={() => false} />
|
352
|
+
<Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
|
353
|
+
</ButtonGroup>
|
354
|
+
<RadioButtonGroup options={[
|
355
|
+
{value:'test10', label:'D'},
|
356
|
+
{value:'test11', label:'W'},
|
357
|
+
{value:'test12', label:'M'},
|
358
|
+
]} group={{padded:false}} value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} />
|
359
|
+
<ButtonGroup align='sub' spaces='no-space'>
|
360
|
+
<Dropdown
|
361
|
+
items={[
|
362
|
+
{
|
363
|
+
type: 'group', label: 'Chose a theme', items: [
|
364
|
+
'divider',
|
365
|
+
{ label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
|
366
|
+
{ label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
|
367
|
+
{ label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
|
368
|
+
]
|
369
|
+
},
|
370
|
+
]}>
|
371
|
+
<NavButton type='default' icon='adjust' onClick={()=> false} />
|
372
|
+
</Dropdown>
|
373
|
+
<Dropdown
|
374
|
+
items={[
|
375
|
+
{
|
376
|
+
type: 'group', label: 'Actions', items: [
|
377
|
+
'divider',
|
378
|
+
{ label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
|
379
|
+
{ label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
|
380
|
+
{ label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
|
381
|
+
]
|
382
|
+
}]}>
|
383
|
+
<NavButton icon='dots-vertical' onClick={() => false} />
|
384
|
+
</Dropdown>
|
385
|
+
</ButtonGroup>
|
386
|
+
</ButtonGroup>
|
387
|
+
</SubNav>
|
388
|
+
</Layout.HeaderPanel>
|
389
|
+
{/* TOOLBAR HEADER */}
|
390
|
+
|
391
|
+
<Layout.LeftPanel open={this.state.openFilter}>
|
392
|
+
<Layout.Panel side='left' background='grey'>
|
393
|
+
<Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
|
394
|
+
<Layout.PanelContent>
|
395
|
+
<Layout.PanelContentBlock>
|
396
|
+
<Form.FormGroup>
|
397
|
+
<Form.FormItem>
|
398
|
+
<Select
|
399
|
+
label='Shows'
|
400
|
+
labelHidden={true}
|
401
|
+
value='This is some value'
|
402
|
+
error='This is error message'
|
403
|
+
info='This is some hint message'
|
404
|
+
required={true}
|
405
|
+
disabled={false}
|
406
|
+
invalid={false}
|
407
|
+
onChange={(value) => {}}>
|
408
|
+
<Option>Marker</Option>
|
409
|
+
<Option>Tabu</Option>
|
410
|
+
</Select>
|
411
|
+
</Form.FormItem>
|
412
|
+
</Form.FormGroup>
|
413
|
+
<div className="form__group">
|
414
|
+
<div className="form__item">
|
415
|
+
<Input label='Title'
|
416
|
+
error='This is error message'
|
417
|
+
type='text'
|
418
|
+
value='Title'
|
419
|
+
inlineLabel={false}
|
420
|
+
disabled={false}
|
421
|
+
invalid={false}
|
422
|
+
onChange={(value) => { }} />
|
423
|
+
</div>
|
424
|
+
</div>
|
425
|
+
<div className="form__group">
|
426
|
+
<div className="form__item">
|
427
|
+
<Select label='Source'
|
428
|
+
value='Select ingest source...'
|
429
|
+
error='This is error message'
|
430
|
+
inlineLabel={false}
|
431
|
+
disabled={false}
|
432
|
+
invalid={false}
|
433
|
+
onChange={(value) => { }}>
|
434
|
+
<Option value="option-1">Select ingest source...</Option>
|
435
|
+
<Option value="option-2">Associated Press</Option>
|
436
|
+
<Option value="option-3">Reuters</Option>
|
437
|
+
</Select>
|
438
|
+
</div>
|
439
|
+
</div>
|
440
|
+
|
441
|
+
<div className="form__group">
|
442
|
+
<div className="form__item">
|
443
|
+
<Input label='Keyword'
|
444
|
+
error='This is error message'
|
445
|
+
type='text'
|
446
|
+
value='Keyword'
|
447
|
+
inlineLabel={false}
|
448
|
+
disabled={false}
|
449
|
+
invalid={false}
|
450
|
+
onChange={(value) => { }} />
|
451
|
+
</div>
|
452
|
+
</div>
|
453
|
+
|
454
|
+
<div className="form__group">
|
455
|
+
<div className="form__item">
|
456
|
+
<Select label='Usage right'
|
457
|
+
value='--- Not selected ---'
|
458
|
+
error='This is error message'
|
459
|
+
info='Dolor in hendrerit.'
|
460
|
+
inlineLabel={false}
|
461
|
+
disabled={false}
|
462
|
+
invalid={false}
|
463
|
+
onChange={(value) => { }}>
|
464
|
+
<Option value="">--- Not selected ---</Option>
|
465
|
+
<Option value="single">Single usage</Option>
|
466
|
+
<Option value="time">Time restricted</Option>
|
467
|
+
<Option value="bananas">Indefinite usage</Option>
|
468
|
+
<Option value="indefinite">Pears</Option>
|
469
|
+
</Select>
|
470
|
+
</div>
|
471
|
+
</div>
|
472
|
+
</Layout.PanelContentBlock>
|
473
|
+
</Layout.PanelContent>
|
474
|
+
<Layout.PanelFooter>
|
475
|
+
<Button text='Clear' style='hollow' onClick={() => false} />
|
476
|
+
<Button text='Submit' type='primary' onClick={() => false} />
|
477
|
+
</Layout.PanelFooter>
|
478
|
+
</Layout.Panel>
|
479
|
+
</Layout.LeftPanel>
|
480
|
+
{/* FILTER PANEL*/}
|
481
|
+
<Layout.MainPanel>
|
482
|
+
<ContentList
|
483
|
+
items={[
|
484
|
+
{
|
485
|
+
itemColum: [
|
486
|
+
{
|
487
|
+
itemRow: [{content:<>
|
488
|
+
<i className="icon-rundown"></i>
|
489
|
+
</>}],
|
490
|
+
border: true
|
491
|
+
},
|
492
|
+
{
|
493
|
+
itemRow: [
|
494
|
+
{
|
495
|
+
content:
|
496
|
+
<>
|
497
|
+
<span className="sd-list-item__slugline">19:00 – 19:45</span>
|
498
|
+
<IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
|
499
|
+
<IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
|
500
|
+
<time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
|
501
|
+
</>
|
502
|
+
},
|
503
|
+
{
|
504
|
+
content:
|
505
|
+
<>
|
506
|
+
<Label text='Marker' color='blue--800'/>
|
507
|
+
<span className='sd-list-item__compound-text'>
|
508
|
+
<span className='sd-list-item__text-label'>Template:</span>
|
509
|
+
<span>Marker Daily</span>
|
510
|
+
</span>
|
511
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
|
512
|
+
<Label style='translucent' text='In Progress' type='warning' />
|
513
|
+
</>
|
514
|
+
},
|
515
|
+
],
|
516
|
+
fullwidth: true,
|
517
|
+
}
|
518
|
+
],
|
519
|
+
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
520
|
+
locked: true,
|
521
|
+
onClick: () => this.setState({openEditor: !this.state.openEditor}),
|
522
|
+
},
|
523
|
+
{
|
524
|
+
itemColum: [
|
525
|
+
{
|
526
|
+
itemRow: [{content:<>
|
527
|
+
<i className="icon-rundown"></i>
|
528
|
+
</>}],
|
529
|
+
border: true
|
530
|
+
},
|
531
|
+
{
|
532
|
+
itemRow: [
|
533
|
+
{
|
534
|
+
content:
|
535
|
+
<>
|
536
|
+
<span className="sd-list-item__slugline">19:00 – 19:45</span>
|
537
|
+
<IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
|
538
|
+
<IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
|
539
|
+
<time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
|
540
|
+
</>
|
541
|
+
},
|
542
|
+
{
|
543
|
+
content:
|
544
|
+
<>
|
545
|
+
<Label text='Tabu' color='blue--800'/>
|
546
|
+
<span className='sd-list-item__compound-text'>
|
547
|
+
<span className='sd-list-item__text-label'>Template:</span>
|
548
|
+
<span>Tabu Daily</span>
|
549
|
+
</span>
|
550
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
|
551
|
+
<Label style='translucent' text='Draft' />
|
552
|
+
</>
|
553
|
+
},
|
554
|
+
],
|
555
|
+
fullwidth: true,
|
556
|
+
}
|
557
|
+
],
|
558
|
+
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
559
|
+
onClick: () => this.setState({openPreview: !this.state.openPreview}),
|
560
|
+
},
|
561
|
+
]} />
|
562
|
+
|
563
|
+
</Layout.MainPanel>
|
564
|
+
{/* MAIN CONTENT (Monitoring) */}
|
565
|
+
<Layout.RightPanel open={this.state.openPreview}>
|
566
|
+
<Layout.Panel side='right'>
|
567
|
+
<Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})} />
|
568
|
+
<Layout.PanelContent>
|
569
|
+
<Layout.PanelContentBlock flex={true}>
|
570
|
+
<Layout.Container direction='column' gap='x-small'>
|
571
|
+
<Layout.Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Layout.Container>
|
572
|
+
<Layout.Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Layout.Container>
|
573
|
+
</Layout.Container>
|
574
|
+
<Layout.Container className='sd-margin-s--auto sd-flex--items-center'>
|
575
|
+
{/* <Dropdown
|
576
|
+
align = 'right'
|
577
|
+
append = {true}
|
578
|
+
items={[
|
579
|
+
{
|
580
|
+
type: 'group', label: 'Actions', items: [
|
581
|
+
'divider',
|
582
|
+
{ label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
|
583
|
+
{ label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
|
584
|
+
{ label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
|
585
|
+
]
|
586
|
+
}]}>
|
587
|
+
<IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
|
588
|
+
</Dropdown> */}
|
589
|
+
</Layout.Container>
|
590
|
+
</Layout.PanelContentBlock>
|
591
|
+
|
592
|
+
<Layout.PanelContentBlock>
|
593
|
+
<Layout.Container direction='row' gap='large' className='sd-margin-b--3'>
|
594
|
+
<Label size='large' text='Tabu' color='blue--800'/>
|
595
|
+
<Layout.Container direction='row' gap='small'>
|
596
|
+
<Text color='light' size='small' style='italic' >Template:</Text>
|
597
|
+
<Text size='small' style='italic' weight='medium'>Tabu daily</Text>
|
598
|
+
</Layout.Container>
|
599
|
+
</Layout.Container>
|
600
|
+
|
601
|
+
<Layout.Container direction='column' className='sd-margin-y--2'>
|
602
|
+
{/* <FormLabel text='Title' /> */}
|
603
|
+
<Heading type='h2'>Tabu // 01.06.2022</Heading>
|
604
|
+
</Layout.Container>
|
605
|
+
<ButtonGroup>
|
606
|
+
<IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
|
607
|
+
<IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
|
608
|
+
<Text color='light' size='small' className='sd-margin--0'>OF</Text>
|
609
|
+
<IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
|
610
|
+
</ButtonGroup>
|
611
|
+
<TableList
|
612
|
+
className='sd-margin-y--4'
|
613
|
+
array={this.state.array}
|
614
|
+
itemsDropdown={() => [
|
615
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
|
616
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
|
617
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
|
618
|
+
]}
|
619
|
+
/>
|
620
|
+
</Layout.PanelContentBlock>
|
621
|
+
</Layout.PanelContent>
|
622
|
+
</Layout.Panel>
|
623
|
+
</Layout.RightPanel>
|
624
|
+
{/* PREVIEW PANEL*/}
|
625
|
+
|
626
|
+
<Layout.OverlayPanel />
|
627
|
+
{/* OVERLAY PANEL (Send To) */}
|
628
|
+
</Layout.LayoutContainer>}
|
629
|
+
|
630
|
+
<Layout.ContentSplitter visible={this.state.openEditor} />
|
631
|
+
|
632
|
+
{/* RUNDOWN EDITOR */}
|
633
|
+
<Layout.AuthoringContainer open={this.state.openEditor}>
|
634
|
+
<RundownEditor rightPanel={this.state.rightPanel}
|
635
|
+
openPanel={() => {
|
636
|
+
if (this.state.fullEditor) {
|
637
|
+
this.setState({previousState: true})
|
638
|
+
} else {
|
639
|
+
this.setState({previousState: false})
|
640
|
+
}
|
641
|
+
|
642
|
+
this.setState({rightPanel: true})
|
643
|
+
}}
|
644
|
+
closePanel={() => {
|
645
|
+
if (!this.state.previousState) {
|
646
|
+
this.setState({rightPanel: false, fullEditor: false})
|
647
|
+
} else {
|
648
|
+
this.setState({rightPanel: false})
|
649
|
+
}
|
650
|
+
}}
|
651
|
+
/>
|
652
|
+
</Layout.AuthoringContainer>
|
653
|
+
{/* END RUNDOWN EDITOR */}
|
654
|
+
|
153
655
|
</Layout.CoreLayout>
|
154
656
|
);
|
155
657
|
}
|
@@ -7,6 +7,9 @@ import { TableList } from '../../../../app-typescript/components/Lists/TableList
|
|
7
7
|
|
8
8
|
interface IProps {
|
9
9
|
children?: React.ReactNode;
|
10
|
+
rightPanel?: boolean;
|
11
|
+
openPanel(): any;
|
12
|
+
closePanel(): void;
|
10
13
|
}
|
11
14
|
|
12
15
|
interface IState {
|
@@ -41,7 +44,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
41
44
|
value2: false,
|
42
45
|
value3: false,
|
43
46
|
leftPanelOpen: false,
|
44
|
-
rightPanelOpen: false,
|
47
|
+
rightPanelOpen: this.props.rightPanel ? this.props.rightPanel : false,
|
45
48
|
rightPanelPinned: false,
|
46
49
|
sideOverlayOpen: false,
|
47
50
|
inputValue: 'string',
|
@@ -57,7 +60,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
57
60
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
|
58
61
|
</>,
|
59
62
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
60
|
-
onClick: () => { this.
|
63
|
+
onClick: () => { this.props.openPanel() }
|
61
64
|
},
|
62
65
|
{
|
63
66
|
start: <>
|
@@ -70,7 +73,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
70
73
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:11' type='warning' />
|
71
74
|
</>,
|
72
75
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
73
|
-
onClick: () => { this.
|
76
|
+
onClick: () => { this.props.openPanel() }
|
74
77
|
},
|
75
78
|
{
|
76
79
|
start: <>
|
@@ -83,7 +86,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
83
86
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
|
84
87
|
</>,
|
85
88
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
86
|
-
onClick: () => { this.
|
89
|
+
onClick: () => { this.props.openPanel() }
|
87
90
|
},
|
88
91
|
{
|
89
92
|
start: <>
|
@@ -96,7 +99,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
96
99
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:15' type='alert' />
|
97
100
|
</>,
|
98
101
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
99
|
-
onClick: () => { this.
|
102
|
+
onClick: () => { this.props.openPanel() }
|
100
103
|
},
|
101
104
|
{
|
102
105
|
start: <>
|
@@ -109,7 +112,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
109
112
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
|
110
113
|
</>,
|
111
114
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
112
|
-
onClick: () => { this.
|
115
|
+
onClick: () => { this.props.openPanel() }
|
113
116
|
},
|
114
117
|
]
|
115
118
|
}
|
@@ -330,7 +333,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
330
333
|
</Layout.AuthoringMain>
|
331
334
|
</Layout.MainPanel>
|
332
335
|
|
333
|
-
<Layout.RightPanel open={this.
|
336
|
+
<Layout.RightPanel open={this.props.rightPanel}>
|
334
337
|
<Layout.Panel size='x-large' side='right'>
|
335
338
|
<Layout.PanelContent>
|
336
339
|
<Layout.AuthoringFrame
|
@@ -344,10 +347,10 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
344
347
|
<SubNav className='sd-shadow--z0'>
|
345
348
|
<SlidingToolbar>
|
346
349
|
<ButtonGroup align='start'>
|
347
|
-
<IconButton ariaValue="Close" icon="close-small" onClick={() => this.
|
350
|
+
<IconButton ariaValue="Close" icon="close-small" onClick={() => this.props.closePanel()} />
|
348
351
|
</ButtonGroup>
|
349
352
|
<ButtonGroup align='end'>
|
350
|
-
<Button text="Save Changes" style='hollow' onClick={() => this.
|
353
|
+
<Button text="Save Changes" style='hollow' onClick={() => this.props.closePanel()} type="primary" />
|
351
354
|
</ButtonGroup>
|
352
355
|
</SlidingToolbar>
|
353
356
|
</SubNav>
|