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.
Files changed (107) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/fonts/sd_icons.eot +0 -0
  3. package/app/fonts/sd_icons.svg +1 -0
  4. package/app/fonts/sd_icons.ttf +0 -0
  5. package/app/fonts/sd_icons.woff +0 -0
  6. package/app/styles/_icon-font.scss +1 -0
  7. package/app/styles/_master-desk.scss +2 -2
  8. package/app/styles/_modals.scss +1 -0
  9. package/app/styles/app.scss +1 -0
  10. package/app/styles/components/_sd-pagination.scss +41 -0
  11. package/app/styles/grids/_grid-layout.scss +4 -14
  12. package/app/styles/menus/_sd-sidebar-menu.scss +1 -1
  13. package/app/styles/primereact/_pr-datepicker.scss +12 -0
  14. package/app/styles/primereact/_pr-dialog.scss +4 -0
  15. package/app/styles/variables/_colors.scss +37 -37
  16. package/app/template/search-handler.html +2 -2
  17. package/app-typescript/components/DatePicker.tsx +8 -9
  18. package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
  19. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -1
  20. package/app-typescript/components/Lists/ContentList.tsx +3 -2
  21. package/app-typescript/components/Lists/TableList.tsx +17 -8
  22. package/app-typescript/components/Modal.tsx +6 -2
  23. package/app-typescript/components/Navigation/SideBarMenu.tsx +30 -4
  24. package/app-typescript/dist/components/Alert.d.ts +16 -0
  25. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  26. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  27. package/app-typescript/dist/components/Badge.d.ts +13 -0
  28. package/app-typescript/dist/components/Button.d.ts +23 -0
  29. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  30. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  31. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  32. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  33. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  34. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  35. package/app-typescript/dist/components/Divider.d.ts +9 -0
  36. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  37. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  38. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  39. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  40. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  41. package/app-typescript/dist/components/Genie.d.ts +13 -0
  42. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  43. package/app-typescript/dist/components/GridList.d.ts +14 -0
  44. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  45. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  46. package/app-typescript/dist/components/Icon.d.ts +12 -0
  47. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  48. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  49. package/app-typescript/dist/components/Input.d.ts +24 -0
  50. package/app-typescript/dist/components/Label.d.ts +15 -0
  51. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  52. package/app-typescript/dist/components/Loader.d.ts +8 -0
  53. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  54. package/app-typescript/dist/components/Popover.d.ts +13 -0
  55. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  56. package/app-typescript/dist/components/Radio.d.ts +19 -0
  57. package/app-typescript/dist/components/RadioButton.d.ts +20 -0
  58. package/app-typescript/dist/components/Select.d.ts +29 -0
  59. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  60. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  61. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  62. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  63. package/app-typescript/dist/components/Switch.d.ts +12 -0
  64. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  65. package/app-typescript/dist/components/TabList.d.ts +22 -0
  66. package/app-typescript/dist/components/Tag.d.ts +9 -0
  67. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  68. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  69. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  70. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  71. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  72. package/app-typescript/dist/index.d.ts +56 -0
  73. package/dist/examples.bundle.css +39 -0
  74. package/dist/examples.bundle.js +1905 -1471
  75. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +505 -3
  76. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +12 -9
  77. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +6 -6
  78. package/dist/playgrounds/react-playgrounds/TestGround.tsx +29 -1
  79. package/dist/react/DatePicker.tsx +50 -2
  80. package/dist/react/Modal.tsx +154 -22
  81. package/dist/sd_icons.eot +0 -0
  82. package/dist/sd_icons.svg +1 -0
  83. package/dist/sd_icons.ttf +0 -0
  84. package/dist/sd_icons.woff +0 -0
  85. package/dist/superdesk-ui.bundle.css +175 -21
  86. package/dist/superdesk-ui.bundle.js +1059 -1033
  87. package/dist/vendor.bundle.js +7 -7
  88. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +505 -3
  89. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +12 -9
  90. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +6 -6
  91. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +29 -1
  92. package/examples/pages/react/DatePicker.tsx +50 -2
  93. package/examples/pages/react/Modal.tsx +154 -22
  94. package/package.json +1 -1
  95. package/react/components/DatePicker.d.ts +2 -2
  96. package/react/components/DatePicker.js +3 -3
  97. package/react/components/Layouts/CoreLayout.d.ts +1 -0
  98. package/react/components/Layouts/CoreLayout.js +1 -1
  99. package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
  100. package/react/components/Layouts/CoreLayoutMain.js +1 -1
  101. package/react/components/Lists/ContentList.js +3 -2
  102. package/react/components/Lists/TableList.js +12 -4
  103. package/react/components/Modal.d.ts +2 -0
  104. package/react/components/Modal.js +3 -3
  105. package/react/components/Navigation/SideBarMenu.d.ts +6 -0
  106. package/react/components/Navigation/SideBarMenu.js +19 -2
  107. package/yarn-error.log +111 -0
@@ -17296,7 +17296,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
17296
17296
  }
17297
17297
  }.call(this));
17298
17298
 
17299
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(50)(module)))
17299
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(51)(module)))
17300
17300
 
17301
17301
  /***/ }),
17302
17302
 
@@ -17328,7 +17328,7 @@ module.exports = g;
17328
17328
 
17329
17329
  /***/ }),
17330
17330
 
17331
- /***/ 41:
17331
+ /***/ 42:
17332
17332
  /***/ (function(module, exports, __webpack_require__) {
17333
17333
 
17334
17334
  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28217,7 +28217,7 @@ return jQuery;
28217
28217
 
28218
28218
  /***/ }),
28219
28219
 
28220
- /***/ 50:
28220
+ /***/ 51:
28221
28221
  /***/ (function(module, exports) {
28222
28222
 
28223
28223
  module.exports = function(module) {
@@ -28254,7 +28254,7 @@ module.exports = function(module) {
28254
28254
 
28255
28255
  __webpack_require__(33);
28256
28256
 
28257
- __webpack_require__(41);
28257
+ __webpack_require__(42);
28258
28258
 
28259
28259
  __webpack_require__(537);
28260
28260
 
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
28292
28292
  if ( true ) {
28293
28293
 
28294
28294
  // AMD. Register as an anonymous module.
28295
- !(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(538) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
28295
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42), __webpack_require__(538) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
28296
28296
  __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
28297
28297
  (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
28298
28298
  __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29039,7 +29039,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
29039
29039
  if ( true ) {
29040
29040
 
29041
29041
  // AMD. Register as an anonymous module.
29042
- !(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
29042
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
29043
29043
  __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
29044
29044
  (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
29045
29045
  __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -65672,7 +65672,7 @@ $provide.value("$locale", {
65672
65672
  })(window);
65673
65673
 
65674
65674
  !window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend(window.angular.element('<style>').text('@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}'));
65675
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(41)))
65675
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(42)))
65676
65676
 
65677
65677
  /***/ }),
65678
65678
 
@@ -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={false}
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
  }