superdesk-ui-framework 3.0.66 → 3.0.68

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 (78) hide show
  1. package/app/styles/components/_list-item.scss +22 -11
  2. package/app-typescript/components/Autocomplete.tsx +9 -3
  3. package/app-typescript/components/Badge.tsx +16 -2
  4. package/app-typescript/components/Dropdown.tsx +3 -1
  5. package/app-typescript/components/DropdownFirst.tsx +14 -2
  6. package/app-typescript/components/DurationInput.tsx +19 -4
  7. package/app-typescript/components/EmptyState.tsx +11 -2
  8. package/app-typescript/components/Layouts/Panel.tsx +12 -1
  9. package/app-typescript/components/Lists/ContentList.tsx +5 -1
  10. package/app-typescript/components/Modal.tsx +10 -1
  11. package/app-typescript/components/Navigation/BottomNav.tsx +9 -2
  12. package/app-typescript/components/Navigation/QuickNavBar.tsx +10 -2
  13. package/app-typescript/components/Navigation/SideBarMenu.tsx +9 -4
  14. package/app-typescript/components/SidebarMenu.tsx +8 -1
  15. package/app-typescript/components/TabList.tsx +5 -1
  16. package/app-typescript/components/TagInput.tsx +4 -1
  17. package/app-typescript/components/ThemeSelector.tsx +13 -2
  18. package/app-typescript/components/TreeMenu.tsx +127 -122
  19. package/app-typescript/components/TreeSelect/TreeSelect.tsx +157 -141
  20. package/app-typescript/components/WithPortal.tsx +49 -0
  21. package/app-typescript/components/avatar/avatar-image.tsx +2 -0
  22. package/app-typescript/components/avatar/avatar.tsx +2 -1
  23. package/dist/examples.bundle.js +1446 -1318
  24. package/dist/playgrounds/planning.html +121 -43
  25. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
  26. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
  27. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
  28. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
  29. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
  30. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
  31. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
  32. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
  33. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
  34. package/dist/playgrounds/react-playgrounds/TestGround.tsx +99 -128
  35. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
  36. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
  37. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
  38. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
  39. package/dist/playgrounds/react-playgrounds/tsconfig.json +4 -0
  40. package/dist/superdesk-ui.bundle.css +24 -14
  41. package/dist/superdesk-ui.bundle.js +830 -727
  42. package/dist/vendor.bundle.js +14 -14
  43. package/examples/pages/playgrounds/planning.html +121 -43
  44. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
  45. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
  46. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
  47. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
  48. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
  49. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
  50. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
  51. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
  52. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
  53. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +99 -128
  54. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
  55. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
  56. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
  57. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
  58. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +4 -0
  59. package/package.json +3 -2
  60. package/react/components/Autocomplete.js +2 -2
  61. package/react/components/Badge.js +1 -1
  62. package/react/components/Dropdown.js +3 -1
  63. package/react/components/DropdownFirst.js +6 -2
  64. package/react/components/DurationInput.js +5 -1
  65. package/react/components/EmptyState.js +2 -1
  66. package/react/components/Lists/ContentList.js +1 -1
  67. package/react/components/Navigation/BottomNav.js +4 -1
  68. package/react/components/Navigation/QuickNavBar.js +2 -1
  69. package/react/components/Navigation/SideBarMenu.js +3 -1
  70. package/react/components/TabList.js +2 -1
  71. package/react/components/TagInput.js +1 -1
  72. package/react/components/TreeSelect/TreeSelect.d.ts +3 -2
  73. package/react/components/TreeSelect/TreeSelect.js +81 -73
  74. package/react/components/WithPortal.d.ts +14 -0
  75. package/react/components/WithPortal.js +69 -0
  76. package/react/components/avatar/avatar.js +2 -1
  77. /package/dist/playgrounds/dummy-data/{items.js → items.ts} +0 -0
  78. /package/examples/pages/playgrounds/dummy-data/{items.js → items.ts} +0 -0
package/dist/playgrounds/react-playgrounds/Rundowns.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- 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';
2
+ import { ButtonGroup, Button, NavButton, SubNav, Dropdown, RadioButtonGroup, Input, Select, Option, Label, IconLabel, Icon, IconButton, Tooltip, CreateButton, Modal, EmptyState, Container, BoxedList, BoxedListItem, Text, Heading, Switch, SwitchGroup, SearchBar } from '../../../../app-typescript/index';
3
3
  import * as Layout from '../../../../app-typescript/components/Layouts';
4
4
  import * as Form from '../../../../app-typescript/components/Form';
5
5
  import {RundownEditor} from './RundownEditor';
@@ -21,7 +21,6 @@ interface IState {
21
21
  itemSelected2: boolean;
22
22
  itemSelected3: boolean;
23
23
  value1: boolean;
24
-
25
24
  modalBasic: boolean;
26
25
  modalSmall: boolean;
27
26
  modalMedium: boolean;
@@ -33,6 +32,9 @@ interface IState {
33
32
  openEditor: boolean;
34
33
  openShowEditor: boolean;
35
34
  array: any;
35
+ rightPanel: boolean;
36
+ fullEditor: boolean;
37
+ previousState: boolean;
36
38
  }
37
39
 
38
40
  export class Rundowns extends React.Component<IProps, IState> {
@@ -58,6 +60,9 @@ export class Rundowns extends React.Component<IProps, IState> {
58
60
  modalManageShow: false,
59
61
  openEditor: false,
60
62
  openShowEditor: false,
63
+ rightPanel: false,
64
+ fullEditor: false,
65
+ previousState: false,
61
66
  array: [
62
67
  {
63
68
  start: <>
@@ -155,432 +160,468 @@ export class Rundowns extends React.Component<IProps, IState> {
155
160
  );
156
161
  return (
157
162
  <>
158
- <Layout.Layout header='Rundowns' theme={this.state.theme}>
159
- <Nav.SideBarMenu
160
- items={[
161
- { icon: 'dashboard', size: 'big' },
162
- { icon: 'view', size: 'big', editor: this.state.openEditor },
163
- { icon: 'marked-star', size: 'big' },
164
- { icon: 'spike', size: 'big' },
165
- { icon: 'personal', size: 'big' },
166
- { icon: 'global-search', size: 'big' },
167
- { icon: 'picture', size: 'big' },
168
- { icon: 'rundown', size: 'big', }]} />
169
-
170
- <Layout.LayoutContainer>
171
- <Layout.HeaderPanel>
172
- <SubNav zIndex={2}>
173
- <SearchBar placeholder='Search media'></SearchBar>
174
- <ButtonGroup align='end' spaces='no-space'>
175
- <Dropdown
176
- items={[
177
- {
178
- type: 'group', label: 'Settings', items: [
179
- 'divider',
180
- { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
181
- { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
182
- ]
183
- }]}>
184
- <NavButton icon='settings' onClick={() => false} />
185
- </Dropdown>
186
- <Dropdown
187
- header={[
188
- {
189
- type: 'group', label: 'Create', items: []
190
- },
191
- {
192
- type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
193
- { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
194
- ]
195
- },
196
- ]}
197
- items={[
198
- {
199
- type: 'group', label: 'Recent Templates', items: [
200
- { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
201
- { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
202
- { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
203
- { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
204
- ]
205
- }]}
206
- footer={[
207
- {
208
- type: 'group', items: [
209
- { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
210
- { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
211
- ]
212
- },
213
- ]}>
163
+ <Layout.Layout header='Rundowns' theme={this.state.theme}>
164
+ <Nav.SideBarMenu
165
+ items={[
166
+ { icon: 'dashboard', size: 'big' },
167
+ { icon: 'view', size: 'big', onCLick: () => this.setState({openEditor: !this.state.openEditor}) },
168
+ { icon: 'marked-star', size: 'big' },
169
+ { icon: 'spike', size: 'big' },
170
+ { icon: 'personal', size: 'big' },
171
+ { icon: 'global-search', size: 'big' },
172
+ { icon: 'picture', size: 'big' },
173
+ { icon: 'rundown', size: 'big', }
174
+ ]}
175
+ />
214
176
 
215
- <CreateButton ariaValue='Create' onClick={() => false} />
216
- </Dropdown>
217
- </ButtonGroup>
218
- </SubNav>
219
- <SubNav zIndex={1}>
220
- <ButtonGroup align='start'>
221
- <NavButton icon='filter-large' onClick={this.handleFilter} />
222
- </ButtonGroup>
223
- <ButtonGroup align='end'>
224
- <ButtonGroup align='sub' padded={true} >
225
- <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
226
- <Button text='Today' style='hollow' onClick={() => false} />
227
- <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
228
- </ButtonGroup>
229
- <RadioButtonGroup options={[
230
- {value:'test10', label:'D'},
231
- {value:'test11', label:'W'},
232
- {value:'test12', label:'M'},
233
- ]} group={{padded:false}} value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} />
234
- <ButtonGroup align='sub' spaces='no-space'>
177
+ <Layout.LayoutContainer>
178
+ <Layout.HeaderPanel>
179
+ <SubNav zIndex={2}>
180
+ <SearchBar placeholder='Search media'></SearchBar>
181
+ <ButtonGroup align='end' spaces='no-space'>
235
182
  <Dropdown
236
183
  items={[
237
184
  {
238
- type: 'group', label: 'Chose a theme', items: [
185
+ type: 'group', label: 'Settings', items: [
239
186
  'divider',
240
- { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
241
- { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
242
- { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
187
+ { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
188
+ { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
243
189
  ]
244
- },
245
- ]}>
246
- <NavButton type='default' icon='adjust' onClick={()=> false} />
190
+ }
191
+ ]}
192
+ >
193
+ <NavButton icon='settings' onClick={() => false} />
247
194
  </Dropdown>
248
195
  <Dropdown
196
+ header={[
197
+ {
198
+ type: 'group', label: 'Create', items: []
199
+ },
200
+ {
201
+ type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
202
+ { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
203
+ ]
204
+ },
205
+ ]}
249
206
  items={[
250
207
  {
251
- type: 'group', label: 'Actions', items: [
252
- 'divider',
253
- { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
254
- { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
255
- { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
208
+ type: 'group', label: 'Recent Templates', items: [
209
+ { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
210
+ { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
211
+ { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
212
+ { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
256
213
  ]
257
- }]}>
258
- <NavButton icon='dots-vertical' onClick={() => false} />
214
+ }
215
+ ]}
216
+ footer={[
217
+ {
218
+ type: 'group', items: [
219
+ { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
220
+ { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
221
+ ]
222
+ },
223
+ ]}
224
+ >
225
+
226
+ <CreateButton ariaValue='Create' onClick={() => false} />
259
227
  </Dropdown>
260
228
  </ButtonGroup>
261
- </ButtonGroup>
262
- </SubNav>
263
- </Layout.HeaderPanel>
264
- {/* TOOLBAR HEADER */}
229
+ </SubNav>
230
+ <SubNav zIndex={1}>
231
+ <ButtonGroup align='start'>
232
+ <NavButton icon='filter-large' onClick={this.handleFilter} />
233
+ </ButtonGroup>
234
+ <ButtonGroup align='end'>
235
+ <ButtonGroup align='sub' padded={true} >
236
+ <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
237
+ <Button text='Today' style='hollow' onClick={() => false} />
238
+ <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
239
+ </ButtonGroup>
240
+ <RadioButtonGroup
241
+ options={[
242
+ {value:'test10', label:'D'},
243
+ {value:'test11', label:'W'},
244
+ {value:'test12', label:'M'},
245
+ ]}
246
+ group={{padded:false}}
247
+ value={this.state.itemType}
248
+ onChange={(value) => this.setState({ itemType: value })}
249
+ />
250
+ <ButtonGroup align='sub' spaces='no-space'>
251
+ <Dropdown
252
+ items={[
253
+ {
254
+ type: 'group', label: 'Chose a theme', items: [
255
+ 'divider',
256
+ { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
257
+ { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
258
+ { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
259
+ ]
260
+ },
261
+ ]}
262
+ >
263
+ <NavButton type='default' icon='adjust' onClick={()=> false} />
264
+ </Dropdown>
265
+ <Dropdown
266
+ items={[
267
+ {
268
+ type: 'group', label: 'Actions', items: [
269
+ 'divider',
270
+ { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
271
+ { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
272
+ { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
273
+ ]
274
+ }
275
+ ]}
276
+ >
277
+ <NavButton icon='dots-vertical' onClick={() => false} />
278
+ </Dropdown>
279
+ </ButtonGroup>
280
+ </ButtonGroup>
281
+ </SubNav>
282
+ </Layout.HeaderPanel>
283
+ {/* TOOLBAR HEADER */}
265
284
 
266
- <Layout.LeftPanel open={this.state.openFilter}>
267
- <Layout.Panel side='left' background='grey'>
268
- <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
269
- <Layout.PanelContent>
270
- <Layout.PanelContentBlock>
271
- <Form.FormGroup>
272
- <Form.FormItem>
273
- <Select
274
- label='Shows'
275
- labelHidden={true}
276
- value='This is some value'
277
- error='This is error message'
278
- info='This is some hint message'
279
- required={true}
280
- disabled={false}
281
- invalid={false}
282
- onChange={(value) => {}}>
283
- <Option>Marker</Option>
284
- <Option>Tabu</Option>
285
- </Select>
286
- </Form.FormItem>
287
- </Form.FormGroup>
288
- <div className="form__group">
289
- <div className="form__item">
290
- <Input label='Title'
291
- error='This is error message'
292
- type='text'
293
- value='Title'
294
- inlineLabel={false}
295
- disabled={false}
296
- invalid={false}
297
- onChange={(value) => { }} />
285
+ <Layout.LeftPanel open={this.state.openFilter}>
286
+ <Layout.Panel side='left' background='grey'>
287
+ <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
288
+ <Layout.PanelContent>
289
+ <Layout.PanelContentBlock>
290
+ <Form.FormGroup>
291
+ <Form.FormItem>
292
+ <Select
293
+ label='Shows'
294
+ labelHidden={true}
295
+ value='This is some value'
296
+ info='This is some hint message'
297
+ required={true}
298
+ disabled={false}
299
+ onChange={() => false}
300
+ >
301
+ <Option>Marker</Option>
302
+ <Option>Tabu</Option>
303
+ </Select>
304
+ </Form.FormItem>
305
+ </Form.FormGroup>
306
+ <div className="form__group">
307
+ <div className="form__item">
308
+ <Input
309
+ label='Title'
310
+ type='text'
311
+ value='Title'
312
+ inlineLabel={false}
313
+ disabled={false}
314
+ onChange={() => false}
315
+ />
316
+ </div>
298
317
  </div>
299
- </div>
300
- <div className="form__group">
301
- <div className="form__item">
302
- <Select label='Source'
303
- value='Select ingest source...'
304
- error='This is error message'
305
- inlineLabel={false}
306
- disabled={false}
307
- invalid={false}
308
- onChange={(value) => { }}>
309
- <Option value="option-1">Select ingest source...</Option>
310
- <Option value="option-2">Associated Press</Option>
311
- <Option value="option-3">Reuters</Option>
312
- </Select>
318
+ <div className="form__group">
319
+ <div className="form__item">
320
+ <Select
321
+ label='Source'
322
+ value='Select ingest source...'
323
+ inlineLabel={false}
324
+ disabled={false}
325
+ onChange={() => false}
326
+ >
327
+ <Option value="option-1">Select ingest source...</Option>
328
+ <Option value="option-2">Associated Press</Option>
329
+ <Option value="option-3">Reuters</Option>
330
+ </Select>
331
+ </div>
313
332
  </div>
314
- </div>
315
333
 
316
- <div className="form__group">
317
- <div className="form__item">
318
- <Input label='Keyword'
319
- error='This is error message'
320
- type='text'
321
- value='Keyword'
322
- inlineLabel={false}
323
- disabled={false}
324
- invalid={false}
325
- onChange={(value) => { }} />
334
+ <div className="form__group">
335
+ <div className="form__item">
336
+ <Input
337
+ label='Keyword'
338
+ type='text'
339
+ value='Keyword'
340
+ inlineLabel={false}
341
+ disabled={false}
342
+ onChange={() => false}
343
+ />
344
+ </div>
326
345
  </div>
327
- </div>
328
346
 
329
- <div className="form__group">
330
- <div className="form__item">
331
- <Select label='Usage right'
332
- value='--- Not selected ---'
333
- error='This is error message'
334
- info='Dolor in hendrerit.'
335
- inlineLabel={false}
336
- disabled={false}
337
- invalid={false}
338
- onChange={(value) => { }}>
339
- <Option value="">--- Not selected ---</Option>
340
- <Option value="single">Single usage</Option>
341
- <Option value="time">Time restricted</Option>
342
- <Option value="bananas">Indefinite usage</Option>
343
- <Option value="indefinite">Pears</Option>
344
- </Select>
347
+ <div className="form__group">
348
+ <div className="form__item">
349
+ <Select
350
+ label='Usage right'
351
+ value='--- Not selected ---'
352
+ info='Dolor in hendrerit.'
353
+ inlineLabel={false}
354
+ disabled={false}
355
+ onChange={() => false}
356
+ >
357
+ <Option value="">--- Not selected ---</Option>
358
+ <Option value="single">Single usage</Option>
359
+ <Option value="time">Time restricted</Option>
360
+ <Option value="bananas">Indefinite usage</Option>
361
+ <Option value="indefinite">Pears</Option>
362
+ </Select>
363
+ </div>
345
364
  </div>
346
- </div>
347
- </Layout.PanelContentBlock>
348
- </Layout.PanelContent>
349
- <Layout.PanelFooter>
350
- <Button text='Clear' style='hollow' onClick={() => false} />
351
- <Button text='Submit' type='primary' onClick={() => false} />
352
- </Layout.PanelFooter>
353
- </Layout.Panel>
354
- </Layout.LeftPanel>
355
- {/* FILTER PANEL*/}
356
- <Layout.MainPanel>
365
+ </Layout.PanelContentBlock>
366
+ </Layout.PanelContent>
367
+ <Layout.PanelFooter>
368
+ <Button text='Clear' style='hollow' onClick={() => false} />
369
+ <Button text='Submit' type='primary' onClick={() => false} />
370
+ </Layout.PanelFooter>
371
+ </Layout.Panel>
372
+ </Layout.LeftPanel>
373
+ {/* FILTER PANEL*/}
374
+ <Layout.MainPanel>
357
375
 
358
- {/* <GridList size="small" gap="medium" margin="3">
359
- {dummy_items.map((item, index) =>
360
- <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={index}>
361
- <GridElements.GridItemCheckWrapper>
362
- <Checkbox checked={item.selected} label={{text:''}} onChange={(value) => {
363
- item.selected = value;
364
- this.changeStatus(item, 'selected');
365
- }} />
366
- </GridElements.GridItemCheckWrapper>
367
- <GridElements.GridItemTopActions>
368
- <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
369
- </GridElements.GridItemTopActions>
370
- <GridElements.GridItemMedia>
371
- { item.image ? <img src={item.image} alt={item.imageAlt}/> : null }
372
- </GridElements.GridItemMedia>
373
- <GridElements.GridItemContent>
374
- <GridElements.GridItemTime time={item.date} />
375
- <GridElements.GridItemTitle>{item.title}</GridElements.GridItemTitle>
376
- <GridElements.GridItemText>{item.description}</GridElements.GridItemText>
377
- </GridElements.GridItemContent>
378
- <GridElements.GridItemFooter>
379
- <GridElements.GridItemFooterBlock align='left'>
380
- <Icon name={item.type} className='sd-grid-item__type-icn' />
381
- <Badge text={item.urgency} color={item.urgencyColor} />
382
- <Badge text={item.priority} shape='square' color={item.priorityColor} />
383
- </GridElements.GridItemFooterBlock>
384
- <GridElements.GridItemFooterActions>
385
- <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
386
- </GridElements.GridItemFooterActions>
387
- </GridElements.GridItemFooter>
388
- </GridElements.GridItem>
389
- )}
390
- </GridList> */}
376
+ {/* <GridList size="small" gap="medium" margin="3">
377
+ {dummy_items.map((item, index) =>
378
+ <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={index}>
379
+ <GridElements.GridItemCheckWrapper>
380
+ <Checkbox checked={item.selected} label={{text:''}} onChange={(value) => {
381
+ item.selected = value;
382
+ this.changeStatus(item, 'selected');
383
+ }} />
384
+ </GridElements.GridItemCheckWrapper>
385
+ <GridElements.GridItemTopActions>
386
+ <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
387
+ </GridElements.GridItemTopActions>
388
+ <GridElements.GridItemMedia>
389
+ { item.image ? <img src={item.image} alt={item.imageAlt}/> : null }
390
+ </GridElements.GridItemMedia>
391
+ <GridElements.GridItemContent>
392
+ <GridElements.GridItemTime time={item.date} />
393
+ <GridElements.GridItemTitle>{item.title}</GridElements.GridItemTitle>
394
+ <GridElements.GridItemText>{item.description}</GridElements.GridItemText>
395
+ </GridElements.GridItemContent>
396
+ <GridElements.GridItemFooter>
397
+ <GridElements.GridItemFooterBlock align='left'>
398
+ <Icon name={item.type} className='sd-grid-item__type-icn' />
399
+ <Badge text={item.urgency} color={item.urgencyColor} />
400
+ <Badge text={item.priority} shape='square' color={item.priorityColor} />
401
+ </GridElements.GridItemFooterBlock>
402
+ <GridElements.GridItemFooterActions>
403
+ <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
404
+ </GridElements.GridItemFooterActions>
405
+ </GridElements.GridItemFooter>
406
+ </GridElements.GridItem>
407
+ )}
408
+ </GridList> */}
391
409
 
392
- <ContentList
393
- items={[
394
- {
395
- itemColum: [
410
+ <ContentList
411
+ items={[
396
412
  {
397
- itemRow: [{content:<>
398
- <i className="icon-rundown"></i>
399
- </>}],
400
- border: true
401
- },
402
- {
403
- itemRow: [
413
+ itemColum: [
404
414
  {
405
- content:
406
- <>
407
- <span className="sd-list-item__slugline">19:00 – 19:45</span>
408
- <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
409
- <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
410
- <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
411
- </>
415
+ itemRow: [{content:<>
416
+ <i className="icon-rundown"></i>
417
+ </>}],
418
+ border: true
412
419
  },
413
420
  {
414
- content:
415
- <>
416
- <Label text='Marker' color='blue--800'/>
417
- <span className='sd-list-item__compound-text'>
418
- <span className='sd-list-item__text-label'>Template:</span>
419
- <span>Marker Daily</span>
420
- </span>
421
- <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
422
- <Label style='translucent' text='In Progress' type='warning' />
423
- </>
424
- },
421
+ itemRow: [
422
+ {
423
+ content:
424
+ <>
425
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
426
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
427
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
428
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
429
+ </>
430
+ },
431
+ {
432
+ content:
433
+ <>
434
+ <Label text='Marker' color='blue--800'/>
435
+ <span className='sd-list-item__compound-text'>
436
+ <span className='sd-list-item__text-label'>Template:</span>
437
+ <span>Marker Daily</span>
438
+ </span>
439
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
440
+ <Label style='translucent' text='In Progress' type='warning' />
441
+ </>
442
+ },
443
+ ],
444
+ fullwidth: true,
445
+ }
425
446
  ],
426
- fullwidth: true,
427
- }
428
- ],
429
- action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
430
- locked: true,
431
- onClick: () => this.setState({openEditor: !this.state.openEditor}),
432
- },
433
- {
434
- itemColum: [
435
- {
436
- itemRow: [{content:<>
437
- <i className="icon-rundown"></i>
438
- </>}],
439
- border: true
447
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
448
+ locked: true,
449
+ onClick: () => this.setState({openEditor: !this.state.openEditor}),
440
450
  },
441
451
  {
442
- itemRow: [
452
+ itemColum: [
443
453
  {
444
- content:
445
- <>
446
- <span className="sd-list-item__slugline">19:00 – 19:45</span>
447
- <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
448
- <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
449
- <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
450
- </>
454
+ itemRow: [{content:<>
455
+ <i className="icon-rundown"></i>
456
+ </>}],
457
+ border: true
451
458
  },
452
459
  {
453
- content:
454
- <>
455
- <Label text='Tabu' color='blue--800'/>
456
- <span className='sd-list-item__compound-text'>
457
- <span className='sd-list-item__text-label'>Template:</span>
458
- <span>Tabu Daily</span>
459
- </span>
460
- <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
461
- <Label style='translucent' text='Draft' />
462
- </>
463
- },
460
+ itemRow: [
461
+ {
462
+ content:
463
+ <>
464
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
465
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
466
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
467
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
468
+ </>
469
+ },
470
+ {
471
+ content:
472
+ <>
473
+ <Label text='Tabu' color='blue--800'/>
474
+ <span className='sd-list-item__compound-text'>
475
+ <span className='sd-list-item__text-label'>Template:</span>
476
+ <span>Tabu Daily</span>
477
+ </span>
478
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
479
+ <Label style='translucent' text='Draft' />
480
+ </>
481
+ },
482
+ ],
483
+ fullwidth: true,
484
+ }
464
485
  ],
465
- fullwidth: true,
466
- }
467
- ],
468
- action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
469
- onClick: () => this.setState({openPreview: !this.state.openPreview}),
470
- },
471
- ]} />
486
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
487
+ onClick: () => this.setState({openPreview: !this.state.openPreview}),
488
+ },
489
+ ]}
490
+ />
472
491
 
473
- </Layout.MainPanel>
474
- {/* MAIN CONTENT (Monitoring) */}
475
- <Layout.RightPanel open={this.state.openPreview}>
476
- <Layout.Panel side='right'>
477
- <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})} />
478
- <Layout.PanelContent>
479
- <Layout.PanelContentBlock flex={true}>
480
- <Container direction='column' gap='x-small'>
481
- <Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Container>
482
- <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
483
- </Container>
484
- <Container className='sd-margin-s--auto sd-flex--items-center'>
485
- {/* <Dropdown
486
- align = 'right'
487
- append = {true}
488
- items={[
489
- {
490
- type: 'group', label: 'Actions', items: [
491
- 'divider',
492
- { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
493
- { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
494
- { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
495
- ]
496
- }]}>
497
- <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
498
- </Dropdown> */}
499
- </Container>
500
- </Layout.PanelContentBlock>
492
+ </Layout.MainPanel>
493
+ {/* MAIN CONTENT (Monitoring) */}
494
+ <Layout.RightPanel open={this.state.openPreview}>
495
+ <Layout.Panel side='right'>
496
+ <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})} />
497
+ <Layout.PanelContent>
498
+ <Layout.PanelContentBlock flex={true}>
499
+ <Container direction='column' gap='x-small'>
500
+ <Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Container>
501
+ <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
502
+ </Container>
503
+ <Container className='sd-margin-s--auto sd-flex--items-center'>
504
+ {/* <Dropdown
505
+ align = 'right'
506
+ append = {true}
507
+ items={[
508
+ {
509
+ type: 'group', label: 'Actions', items: [
510
+ 'divider',
511
+ { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
512
+ { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
513
+ { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
514
+ ]
515
+ }]}>
516
+ <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
517
+ </Dropdown> */}
518
+ </Container>
519
+ </Layout.PanelContentBlock>
501
520
 
502
- <Layout.PanelContentBlock>
503
- <Container direction='row' gap='large' className='sd-margin-b--3'>
504
- <Label size='large' text='Tabu' color='blue--800'/>
505
- <Container direction='row' gap='small'>
506
- <Text color='light' size='small' style='italic' >Template:</Text>
507
- <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
521
+ <Layout.PanelContentBlock>
522
+ <Container direction='row' gap='large' className='sd-margin-b--3'>
523
+ <Label size='large' text='Tabu' color='blue--800'/>
524
+ <Container direction='row' gap='small'>
525
+ <Text color='light' size='small' style='italic' >Template:</Text>
526
+ <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
527
+ </Container>
508
528
  </Container>
509
- </Container>
510
-
511
- <Container direction='column' className='sd-margin-y--2'>
512
- {/* <FormLabel text='Title' /> */}
513
- <Heading type='h2'>Tabu // 01.06.2022</Heading>
514
- </Container>
515
- <ButtonGroup>
516
- <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
517
- <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
518
- <Text color='light' size='small' className='sd-margin--0'>OF</Text>
519
- <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
520
- </ButtonGroup>
521
- <TableList
522
- className='sd-margin-y--4'
523
- array={this.state.array}
524
- itemsDropdown={() => [
525
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
526
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
527
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
528
- ]}
529
- />
530
- </Layout.PanelContentBlock>
531
- </Layout.PanelContent>
532
- </Layout.Panel>
533
- </Layout.RightPanel>
534
- {/* PREVIEW PANEL*/}
529
+
530
+ <Container direction='column' className='sd-margin-y--2'>
531
+ {/* <FormLabel text='Title' /> */}
532
+ <Heading type='h2'>Tabu // 01.06.2022</Heading>
533
+ </Container>
534
+ <ButtonGroup>
535
+ <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
536
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
537
+ <Text color='light' size='small' className='sd-margin--0'>OF</Text>
538
+ <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
539
+ </ButtonGroup>
540
+ <TableList
541
+ className='sd-margin-y--4'
542
+ array={this.state.array}
543
+ itemsDropdown={() => [
544
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
545
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
546
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
547
+ ]}
548
+ />
549
+ </Layout.PanelContentBlock>
550
+ </Layout.PanelContent>
551
+ </Layout.Panel>
552
+ </Layout.RightPanel>
553
+ {/* PREVIEW PANEL*/}
554
+
555
+ <Layout.OverlayPanel />
556
+ {/* OVERLAY PANEL (Send To) */}
557
+ </Layout.LayoutContainer>
535
558
 
536
- <Layout.OverlayPanel />
537
- {/* OVERLAY PANEL (Send To) */}
538
- </Layout.LayoutContainer>
559
+ <Layout.ContentSplitter visible={this.state.openEditor} />
539
560
 
540
- <Layout.ContentSplitter visible={this.state.openEditor} />
561
+ {/* RUNDOWN EDITOR */}
562
+ <Layout.AuthoringContainer open={this.state.openEditor}>
563
+ <RundownEditor
564
+ rightPanel={this.state.rightPanel}
565
+ openPanel={() => {
566
+ if (this.state.fullEditor) {
567
+ this.setState({previousState: true})
568
+ } else {
569
+ this.setState({previousState: false})
570
+ }
571
+
572
+ this.setState({rightPanel: true})
573
+ }}
574
+ closePanel={() => {
575
+ if (!this.state.previousState) {
576
+ this.setState({rightPanel: false, fullEditor: false})
577
+ } else {
578
+ this.setState({rightPanel: false})
579
+ }
580
+ }}
581
+ />
582
+ </Layout.AuthoringContainer>
583
+ {/* END RUNDOWN EDITOR */}
541
584
 
542
- {/* RUNDOWN EDITOR */}
543
- <Layout.AuthoringContainer open={this.state.openEditor}>
544
- <RundownEditor />
545
- </Layout.AuthoringContainer>
546
- {/* END RUNDOWN EDITOR */}
547
-
548
- </Layout.Layout >
585
+ </Layout.Layout >
549
586
 
550
- {/* Manage Templates Modal */}
551
- <Modal headerTemplate="Manage Templates"
552
- visible={this.state.modalManageTemplate}
553
- zIndex={1000}
554
- contentBg='medium'
555
- contentPadding='none'
556
- size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}>
557
- <Layout.LayoutContainer>
558
- <Layout.LeftPanel open={true}>
559
- <Layout.Panel side='left' background='grey'>
560
- <Layout.PanelHeader>
561
- <Container className='sd-padding-x--2'>
562
- <Select
563
- label='Shows'
564
- fullWidth={true}
565
- labelHidden={true}
566
- inlineLabel={true}
567
- value='This is some value'
568
- required={true}
569
- disabled={false}
570
- invalid={false}
571
- onChange={(value) => {}}>
587
+ {/* Manage Templates Modal */}
588
+ <Modal
589
+ headerTemplate="Manage Templates"
590
+ visible={this.state.modalManageTemplate}
591
+ zIndex={1000}
592
+ contentBg='medium'
593
+ contentPadding='none'
594
+ size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}
595
+ >
596
+ <Layout.LayoutContainer>
597
+ <Layout.LeftPanel open={true}>
598
+ <Layout.Panel side='left' background='grey'>
599
+ <Layout.PanelHeader>
600
+ <Container className='sd-padding-x--2'>
601
+ <Select
602
+ label='Shows'
603
+ fullWidth={true}
604
+ labelHidden={true}
605
+ inlineLabel={true}
606
+ value='This is some value'
607
+ required={true}
608
+ disabled={false}
609
+ invalid={false}
610
+ onChange={() => false}
611
+ >
572
612
  <Option>Select show</Option>
573
613
  <Option>Marker</Option>
574
614
  <Option>Tabu</Option>
575
- </Select>
576
- </Container>
577
- </Layout.PanelHeader>
578
- <Layout.PanelContent>
579
- <EmptyState
580
- title={'No show is selected'}
581
- description={'Please select a Show from the dropdown at the top.'}
582
- size="small"
583
- illustration="1" />
615
+ </Select>
616
+ </Container>
617
+ </Layout.PanelHeader>
618
+ <Layout.PanelContent>
619
+ <EmptyState
620
+ title={'No show is selected'}
621
+ description={'Please select a Show from the dropdown at the top.'}
622
+ size="small"
623
+ illustration="1"
624
+ />
584
625
  {/* <Container className='sd-margin-b--1'>
585
626
  <ButtonGroup align='end'>
586
627
  <Tooltip text='Manage templates'>
@@ -630,371 +671,389 @@ export class Rundowns extends React.Component<IProps, IState> {
630
671
  </Container>
631
672
  </BoxedListItem>
632
673
  </BoxedList> */}
633
- </Layout.PanelContent>
634
- </Layout.Panel>
635
- </Layout.LeftPanel>
636
- {/* FILTER PANEL*/}
637
- <Layout.MainPanel >
638
- <EmptyState
639
- title={'No Template selected'}
640
- description={'Please select a Show and Template frome the side panel.'}
641
- size="large"
642
- illustration="1" />
643
- </Layout.MainPanel>
644
- {/* MAIN CONTENT */}
645
- </Layout.LayoutContainer>
646
- </Modal>
674
+ </Layout.PanelContent>
675
+ </Layout.Panel>
676
+ </Layout.LeftPanel>
677
+ {/* FILTER PANEL*/}
678
+ <Layout.MainPanel >
679
+ <EmptyState
680
+ title={'No Template selected'}
681
+ description={'Please select a Show and Template frome the side panel.'}
682
+ size="large"
683
+ illustration="1"
684
+ />
685
+ </Layout.MainPanel>
686
+ {/* MAIN CONTENT */}
687
+ </Layout.LayoutContainer>
688
+ </Modal>
647
689
 
648
- {/* New Show Modal */}
649
- <Modal headerTemplate="Create new Show"
650
- visible={this.state.modalNewShow}
651
- zIndex={1000}
652
- footerTemplate={newShowFooter}
653
- contentBg='medium'
654
- size='medium' onHide={() => {this.setState({modalNewShow: false})}}>
655
- <Form.FormGroup>
656
- <Form.FormItem>
657
- <Input
658
- label='Show name'
659
- type='text'
660
- value=''
661
- error='This is error message'
662
- required={true}
663
- onChange={() => {}}
664
- />
665
- </Form.FormItem>
666
- </Form.FormGroup>
690
+ {/* New Show Modal */}
691
+ <Modal
692
+ headerTemplate="Create new Show"
693
+ visible={this.state.modalNewShow}
694
+ zIndex={1000}
695
+ footerTemplate={newShowFooter}
696
+ contentBg='medium'
697
+ size='medium' onHide={() => {this.setState({modalNewShow: false})}}
698
+ >
667
699
  <Form.FormGroup>
668
- <Form.FormItem>
669
- <Input
670
- label='Description'
671
- type='text'
672
- value=''
673
- error='This is error message'
674
- required={false}
675
- onChange={() => {}}
676
- />
677
- </Form.FormItem>
678
- </Form.FormGroup>
679
- </Modal>
680
- {/* New Show Modal Success */}
681
- <Modal headerTemplate="Create new Show"
682
- visible={this.state.modalNewShowSuccess}
683
- zIndex={1000}
684
- footerTemplate={newShowFooter2}
685
- contentBg='medium'
686
- size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}>
687
- <Container direction='column' className='sd-flex--justify-center sd-flex--items-center sd-padding-y--2' gap='medium'>
688
- <Icon name='checkmark-circle' type='success' size='big' scale='3x' />
689
- <Text align='center' size='medium'>
690
- The show <strong>Marker</strong> has been successfully created.<br />
691
- Do you want to cretate a template for this show right away?
692
- </Text>
693
- </Container>
694
- </Modal>
700
+ <Form.FormItem>
701
+ <Input
702
+ label='Show name'
703
+ type='text'
704
+ value=''
705
+ required={true}
706
+ onChange={() => false}
707
+ />
708
+ </Form.FormItem>
709
+ </Form.FormGroup>
710
+ <Form.FormGroup>
711
+ <Form.FormItem>
712
+ <Input
713
+ label='Description'
714
+ type='text'
715
+ value=''
716
+ required={false}
717
+ onChange={() => false}
718
+ />
719
+ </Form.FormItem>
720
+ </Form.FormGroup>
721
+ </Modal>
722
+ {/* New Show Modal Success */}
723
+ <Modal
724
+ headerTemplate="Create new Show"
725
+ visible={this.state.modalNewShowSuccess}
726
+ zIndex={1000}
727
+ footerTemplate={newShowFooter2}
728
+ contentBg='medium'
729
+ size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}
730
+ >
731
+ <Container direction='column' className='sd-flex--justify-center sd-flex--items-center sd-padding-y--2' gap='medium'>
732
+ <Icon name='checkmark-circle' type='success' size='big' scale='3x' />
733
+ <Text align='center' size='medium'>
734
+ The show <strong>Marker</strong> has been successfully created.<br />
735
+ Do you want to cretate a template for this show right away?
736
+ </Text>
737
+ </Container>
738
+ </Modal>
695
739
 
696
- {/* New Template Modal */}
697
- <Modal headerTemplate="Create new Template"
698
- visible={this.state.modalNewTemplate}
699
- zIndex={1000}
700
- contentBg='medium'
701
- contentPadding='none'
702
- size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}>
703
- <Layout.LayoutContainer>
704
- <Layout.LeftPanel open={true}>
705
- <Layout.Panel side='left' background='grey'>
706
- <Layout.PanelHeader>
707
- <Container className='sd-padding-x--2'>
708
- <Select
709
- label='Shows'
710
- fullWidth={true}
711
- labelHidden={true}
712
- inlineLabel={true}
713
- value='This is some value'
714
- required={true}
715
- disabled={false}
716
- invalid={false}
717
- onChange={(value) => {}}>
740
+ {/* New Template Modal */}
741
+ <Modal headerTemplate="Create new Template"
742
+ visible={this.state.modalNewTemplate}
743
+ zIndex={1000}
744
+ contentBg='medium'
745
+ contentPadding='none'
746
+ size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}
747
+ >
748
+ <Layout.LayoutContainer>
749
+ <Layout.LeftPanel open={true}>
750
+ <Layout.Panel side='left' background='grey'>
751
+ <Layout.PanelHeader>
752
+ <Container className='sd-padding-x--2'>
753
+ <Select
754
+ label='Shows'
755
+ fullWidth={true}
756
+ labelHidden={true}
757
+ inlineLabel={true}
758
+ value='This is some value'
759
+ required={true}
760
+ disabled={false}
761
+ invalid={false}
762
+ onChange={() => false}
763
+ >
718
764
  <Option>Marker</Option>
719
765
  <Option>Tabu</Option>
720
- </Select>
721
- </Container>
722
- </Layout.PanelHeader>
723
- <Layout.PanelContent>
724
- <Layout.PanelContentBlock>
725
- <Container className='sd-margin-b--1-5'>
726
- <ButtonGroup align='end'>
727
- <Tooltip text='New template' flow='left'>
728
- <Button type="primary" size='small' icon="plus-large" text="Cretae new Template" shape="round" iconOnly={true} onClick={()=> false} />
729
- </Tooltip>
730
- </ButtonGroup>
766
+ </Select>
731
767
  </Container>
732
- <BoxedList>
733
- <BoxedListItem
734
- alignVertical='center'
735
- clickable={true}
736
- density='compact'
737
- selected={true}
738
- actions={(
739
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
740
- )}
768
+ </Layout.PanelHeader>
769
+ <Layout.PanelContent>
770
+ <Layout.PanelContentBlock>
771
+ <Container className='sd-margin-b--1-5'>
772
+ <ButtonGroup align='end'>
773
+ <Tooltip text='New template' flow='left'>
774
+ <Button type="primary" size='small' icon="plus-large" text="Cretae new Template" shape="round" iconOnly={true} onClick={()=> false} />
775
+ </Tooltip>
776
+ </ButtonGroup>
777
+ </Container>
778
+ <BoxedList>
779
+ <BoxedListItem
780
+ alignVertical='center'
781
+ clickable={true}
782
+ density='compact'
783
+ selected={true}
784
+ actions={(
785
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
786
+ )}
741
787
  >
742
- <Container gap='small' >
743
- <Label text='Marker' color='blue--800'/>
744
- <span>Untitled</span>
745
- </Container>
746
- </BoxedListItem>
747
- <BoxedListItem
748
- alignVertical='center'
749
- clickable={true}
750
- density='compact'
751
- actions={(
752
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
753
- )}
788
+ <Container gap='small' >
789
+ <Label text='Marker' color='blue--800'/>
790
+ <span>Untitled</span>
791
+ </Container>
792
+ </BoxedListItem>
793
+ <BoxedListItem
794
+ alignVertical='center'
795
+ clickable={true}
796
+ density='compact'
797
+ actions={(
798
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
799
+ )}
754
800
  >
755
- <Container gap='small' >
756
- <Label text='Marker' color='blue--800'/>
757
- <span>Marker Daily</span>
758
- </Container>
759
- </BoxedListItem>
760
- <BoxedListItem
761
- alignVertical='center'
762
- clickable={true}
763
- density='compact'
764
- actions={(
765
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
766
- )}
801
+ <Container gap='small' >
802
+ <Label text='Marker' color='blue--800'/>
803
+ <span>Marker Daily</span>
804
+ </Container>
805
+ </BoxedListItem>
806
+ <BoxedListItem
807
+ alignVertical='center'
808
+ clickable={true}
809
+ density='compact'
810
+ actions={(
811
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
812
+ )}
767
813
  >
768
- <Container gap='small' >
769
- <Label text='Marker' color='blue--800'/>
770
- <span>Marker Weekend</span>
771
- </Container>
772
- </BoxedListItem>
773
- <BoxedListItem
774
- alignVertical='center'
775
- density='compact'
776
- clickable={true}
777
- actions={(
778
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
779
- )}
814
+ <Container gap='small' >
815
+ <Label text='Marker' color='blue--800'/>
816
+ <span>Marker Weekend</span>
817
+ </Container>
818
+ </BoxedListItem>
819
+ <BoxedListItem
820
+ alignVertical='center'
821
+ density='compact'
822
+ clickable={true}
823
+ actions={(
824
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
825
+ )}
780
826
  >
781
- <Container gap='small' >
782
- <Label text='Marker' color='blue--800'/>
783
- <span>Marker Special</span>
784
- </Container>
785
- </BoxedListItem>
786
- </BoxedList>
827
+ <Container gap='small' >
828
+ <Label text='Marker' color='blue--800'/>
829
+ <span>Marker Special</span>
830
+ </Container>
831
+ </BoxedListItem>
832
+ </BoxedList>
787
833
 
788
- </Layout.PanelContentBlock>
789
- </Layout.PanelContent>
790
- </Layout.Panel>
791
- </Layout.LeftPanel>
792
- {/* FILTER PANEL*/}
793
- <Layout.MainPanel padding='none'>
794
-
795
- <RundownEditor />
796
-
797
- </Layout.MainPanel>
798
- {/* MAIN CONTENT */}
799
- </Layout.LayoutContainer>
800
- </Modal>
834
+ </Layout.PanelContentBlock>
835
+ </Layout.PanelContent>
836
+ </Layout.Panel>
837
+ </Layout.LeftPanel>
838
+ {/* FILTER PANEL*/}
839
+ <Layout.MainPanel padding='none'>
840
+ <RundownEditor
841
+ rightPanel={this.state.rightPanel}
842
+ openPanel={() => {
843
+ if (this.state.fullEditor) {
844
+ this.setState({previousState: true})
845
+ } else {
846
+ this.setState({previousState: false})
847
+ }
848
+
849
+ this.setState({rightPanel: true})
850
+ }}
851
+ closePanel={() => {
852
+ if (!this.state.previousState) {
853
+ this.setState({rightPanel: false, fullEditor: false})
854
+ } else {
855
+ this.setState({rightPanel: false})
856
+ }
857
+ }}
858
+ />
859
+ </Layout.MainPanel>
860
+ {/* MAIN CONTENT */}
861
+ </Layout.LayoutContainer>
862
+ </Modal>
801
863
 
802
- {/* Manage Shows Modal */}
803
- <Modal headerTemplate="Manage Shows"
804
- maximizable
805
- visible={this.state.modalManageShow}
806
- zIndex={1000}
807
- contentBg='medium'
808
- contentPadding='none'
809
- size='x-large' onHide={() => {this.setState({modalManageShow: false})}}>
810
- <Layout.LayoutContainer>
811
- <Layout.HeaderPanel>
812
- <SubNav zIndex={2}>
813
- <SearchBar placeholder='Search shows'></SearchBar>
814
- <ButtonGroup align='end' spaces='no-space'>
815
- <CreateButton ariaValue='New show' onClick={() => false} />
816
- </ButtonGroup>
817
- </SubNav>
818
- </Layout.HeaderPanel>
819
- {/* MAIN CONTENT */}
820
- <Layout.MainPanel>
821
- <BoxedList>
822
- <BoxedListItem
823
- alignVertical='center'
824
- clickable={true}
825
- density='compact'
826
- selected={this.state.openShowEditor}
827
- onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})}
828
- actions={(
829
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
830
- )}
831
- >
832
- <Container className='sd-flex-justify-space-between'>
833
- <Heading type='h4'>Marker</Heading>
834
- <Text color='lighter'>3 template</Text>
835
- </Container>
836
- </BoxedListItem>
837
- <BoxedListItem
838
- alignVertical='center'
839
- clickable={true}
840
- density='compact'
841
- actions={(
842
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
843
- )}
864
+ {/* Manage Shows Modal */}
865
+ <Modal
866
+ headerTemplate="Manage Shows"
867
+ maximizable
868
+ visible={this.state.modalManageShow}
869
+ zIndex={1000}
870
+ contentBg='medium'
871
+ contentPadding='none'
872
+ size='x-large' onHide={() => {this.setState({modalManageShow: false})}}
873
+ >
874
+ <Layout.LayoutContainer>
875
+ <Layout.HeaderPanel>
876
+ <SubNav zIndex={2}>
877
+ <SearchBar placeholder='Search shows'></SearchBar>
878
+ <ButtonGroup align='end' spaces='no-space'>
879
+ <CreateButton ariaValue='New show' onClick={() => false} />
880
+ </ButtonGroup>
881
+ </SubNav>
882
+ </Layout.HeaderPanel>
883
+ {/* MAIN CONTENT */}
884
+ <Layout.MainPanel>
885
+ <BoxedList>
886
+ <BoxedListItem
887
+ alignVertical='center'
888
+ clickable={true}
889
+ density='compact'
890
+ selected={this.state.openShowEditor}
891
+ onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})}
892
+ actions={(
893
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
894
+ )}
844
895
  >
845
- <Container className='sd-flex-justify-space-between'>
846
- <Heading type='h4'>Tabu</Heading>
847
- <Text color='lighter'>3 template</Text>
848
- </Container>
849
- </BoxedListItem>
850
- <BoxedListItem
851
- alignVertical='center'
852
- clickable={true}
853
- density='compact'
854
- actions={(
855
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
856
- )}
896
+ <Container className='sd-flex-justify-space-between'>
897
+ <Heading type='h4'>Marker</Heading>
898
+ <Text color='lighter'>3 template</Text>
899
+ </Container>
900
+ </BoxedListItem>
901
+ <BoxedListItem
902
+ alignVertical='center'
903
+ clickable={true}
904
+ density='compact'
905
+ actions={(
906
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
907
+ )}
857
908
  >
858
- <Container className='sd-flex-justify-space-between'>
859
- <Heading type='h4'>Život u ringu</Heading>
860
- <Text color='lighter'>1 template</Text>
861
- </Container>
862
- </BoxedListItem>
863
- <BoxedListItem
864
- alignVertical='center'
865
- density='compact'
866
- clickable={true}
867
- actions={(
868
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
869
- )}
909
+ <Container className='sd-flex-justify-space-between'>
910
+ <Heading type='h4'>Tabu</Heading>
911
+ <Text color='lighter'>3 template</Text>
912
+ </Container>
913
+ </BoxedListItem>
914
+ <BoxedListItem
915
+ alignVertical='center'
916
+ clickable={true}
917
+ density='compact'
918
+ actions={(
919
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
920
+ )}
870
921
  >
871
- <Container className='sd-flex-justify-space-between'>
872
- <Heading type='h4'>Intervju</Heading>
873
- <Text color='lighter'>3 templates</Text>
874
- </Container>
875
- </BoxedListItem>
876
- </BoxedList>
877
-
878
- </Layout.MainPanel>
879
- <Layout.RightPanel open={this.state.openShowEditor}>
880
- <Layout.Panel side='right' background='grey'>
881
- <Layout.PanelHeader title='Show details' onClose={() => this.setState({'openShowEditor': false})} >
882
-
883
- {this.state.value1 ||
884
- <Layout.PanelHeaderSlidingToolbar>
885
- <ButtonGroup align='start'>
886
- <IconButton ariaValue="Close" icon="close-small" onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})} />
887
- </ButtonGroup>
888
- <ButtonGroup align='end'>
889
- <Button text="Save Changes" style='hollow' onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})} type="primary" />
890
- </ButtonGroup>
891
- </Layout.PanelHeaderSlidingToolbar>}
892
- </Layout.PanelHeader>
893
- <Layout.PanelContent>
894
- <Layout.PanelContentBlock flex={true}>
895
- <Container direction='column' gap='x-small'>
896
- <Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Container>
897
- <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
922
+ <Container className='sd-flex-justify-space-between'>
923
+ <Heading type='h4'>Život u ringu</Heading>
924
+ <Text color='lighter'>1 template</Text>
898
925
  </Container>
899
- <Container className='sd-margin-s--auto sd-flex--items-center'>
900
- <Dropdown
901
- align = 'right'
902
- append = {true}
903
- items={[
904
- {
905
- type: 'group', label: 'Actions', items: [
906
- 'divider',
907
- { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
908
- { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
909
- { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
910
- ]
911
- }]}>
912
- <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
913
- </Dropdown>
926
+ </BoxedListItem>
927
+ <BoxedListItem
928
+ alignVertical='center'
929
+ density='compact'
930
+ clickable={true}
931
+ actions={(
932
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
933
+ )}
934
+ >
935
+ <Container className='sd-flex-justify-space-between'>
936
+ <Heading type='h4'>Intervju</Heading>
937
+ <Text color='lighter'>3 templates</Text>
914
938
  </Container>
915
- </Layout.PanelContentBlock>
916
- <Layout.PanelContentBlock>
917
- <SwitchGroup className='sd-margin-b--3'>
918
- <Switch label={{text:'Active'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
919
- </SwitchGroup>
920
- <Form.FormGroup>
921
- <Form.FormItem>
922
- <Input
923
- type='text'
924
- label='Show name'
925
- value='Marker'
926
- error='This is error message'
927
- info=' '
928
- required={true}
929
- disabled={false}
930
- invalid={false}
931
- onChange={(value) => {}} />
932
- </Form.FormItem>
933
- </Form.FormGroup>
934
- <Form.FormGroup>
935
- <Form.FormItem>
936
- <Input
937
- type='text'
938
- label='Description'
939
- value=''
940
- error='This is error message'
941
- info=''
942
- required={false}
943
- disabled={false}
944
- invalid={false}
945
- onChange={(value) => {}} />
946
- </Form.FormItem>
947
- </Form.FormGroup>
948
- </Layout.PanelContentBlock>
939
+ </BoxedListItem>
940
+ </BoxedList>
941
+
942
+ </Layout.MainPanel>
943
+ <Layout.RightPanel open={this.state.openShowEditor}>
944
+ <Layout.Panel side='right' background='grey'>
945
+ <Layout.PanelHeader title='Show details' onClose={() => this.setState({'openShowEditor': false})}>
946
+ {this.state.value1 ||
947
+ <Layout.PanelHeaderSlidingToolbar>
948
+ <ButtonGroup align='start'>
949
+ <IconButton ariaValue="Close" icon="close-small" onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})} />
950
+ </ButtonGroup>
951
+ <ButtonGroup align='end'>
952
+ <Button text="Save Changes" style='hollow' onClick={() => this.setState({openShowEditor: !this.state.openShowEditor})} type="primary" />
953
+ </ButtonGroup>
954
+ </Layout.PanelHeaderSlidingToolbar>}
955
+ </Layout.PanelHeader>
956
+ <Layout.PanelContent>
957
+ <Layout.PanelContentBlock flex={true}>
958
+ <Container direction='column' gap='x-small'>
959
+ <Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Container>
960
+ <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
961
+ </Container>
962
+ <Container className='sd-margin-s--auto sd-flex--items-center'>
963
+ <Dropdown
964
+ align = 'right'
965
+ append = {true}
966
+ items={[
967
+ {
968
+ type: 'group', label: 'Actions', items: [
969
+ 'divider',
970
+ { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
971
+ { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
972
+ { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
973
+ ]
974
+ }
975
+ ]}
976
+ >
977
+ <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
978
+ </Dropdown>
979
+ </Container>
980
+ </Layout.PanelContentBlock>
981
+ <Layout.PanelContentBlock>
982
+ <SwitchGroup className='sd-margin-b--3'>
983
+ <Switch label={{content:'Active'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
984
+ </SwitchGroup>
985
+ <Form.FormGroup>
986
+ <Form.FormItem>
987
+ <Input
988
+ type='text'
989
+ label='Show name'
990
+ value='Marker'
991
+ required={true}
992
+ disabled={false}
993
+ onChange={() => false}
994
+ />
995
+ </Form.FormItem>
996
+ </Form.FormGroup>
997
+ <Form.FormGroup>
998
+ <Form.FormItem>
999
+ <Input
1000
+ type='text'
1001
+ label='Description'
1002
+ required={false}
1003
+ disabled={false}
1004
+ onChange={() => false}
1005
+ />
1006
+ </Form.FormItem>
1007
+ </Form.FormGroup>
1008
+ </Layout.PanelContentBlock>
949
1009
 
950
- <Layout.PanelContentBlock>
951
- <Heading type='h3' className='sd-margin-b--2'>Show templates</Heading>
952
- <BoxedList>
953
- <BoxedListItem
954
- alignVertical='center'
955
- density='compact'
956
- actions={(
957
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
958
- )}
1010
+ <Layout.PanelContentBlock>
1011
+ <Heading type='h3' className='sd-margin-b--2'>Show templates</Heading>
1012
+ <BoxedList>
1013
+ <BoxedListItem
1014
+ alignVertical='center'
1015
+ density='compact'
1016
+ actions={(
1017
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
1018
+ )}
959
1019
  >
960
- <Container gap='small' >
961
- <Label text='Marker' color='blue--800'/>
962
- <span>Marker Daily</span>
963
- </Container>
964
- </BoxedListItem>
965
- <BoxedListItem
966
- alignVertical='center'
967
- density='compact'
968
- actions={(
969
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
970
- )}
1020
+ <Container gap='small' >
1021
+ <Label text='Marker' color='blue--800'/>
1022
+ <span>Marker Daily</span>
1023
+ </Container>
1024
+ </BoxedListItem>
1025
+ <BoxedListItem
1026
+ alignVertical='center'
1027
+ density='compact'
1028
+ actions={(
1029
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
1030
+ )}
971
1031
  >
972
- <Container gap='small' >
973
- <Label text='Marker' color='blue--800'/>
974
- <span>Marker Weekend</span>
975
- </Container>
976
- </BoxedListItem>
977
- <BoxedListItem
978
- alignVertical='center'
979
- density='compact'
980
- actions={(
981
- <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
982
- )}
1032
+ <Container gap='small' >
1033
+ <Label text='Marker' color='blue--800'/>
1034
+ <span>Marker Weekend</span>
1035
+ </Container>
1036
+ </BoxedListItem>
1037
+ <BoxedListItem
1038
+ alignVertical='center'
1039
+ density='compact'
1040
+ actions={(
1041
+ <IconButton icon="dots-vertical" size='small' ariaValue="More actions" onClick={()=> false} />
1042
+ )}
983
1043
  >
984
- <Container gap='small' >
985
- <Label text='Marker' color='blue--800'/>
986
- <span>Marker Special</span>
987
- </Container>
988
- </BoxedListItem>
989
- </BoxedList>
990
-
991
- </Layout.PanelContentBlock>
992
- </Layout.PanelContent>
993
- </Layout.Panel>
994
- </Layout.RightPanel>
995
- </Layout.LayoutContainer>
996
- </Modal>
997
- {/* End All Modals */}
1044
+ <Container gap='small' >
1045
+ <Label text='Marker' color='blue--800'/>
1046
+ <span>Marker Special</span>
1047
+ </Container>
1048
+ </BoxedListItem>
1049
+ </BoxedList>
1050
+ </Layout.PanelContentBlock>
1051
+ </Layout.PanelContent>
1052
+ </Layout.Panel>
1053
+ </Layout.RightPanel>
1054
+ </Layout.LayoutContainer>
1055
+ </Modal>
1056
+ {/* End All Modals */}
998
1057
  </>
999
1058
  );
1000
1059
  }