superdesk-ui-framework 3.0.1-beta.14 → 3.0.1-beta.15

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 (97) hide show
  1. package/app/scripts/toggleBoxNext.js +1 -1
  2. package/app/styles/_buttons.scss +1 -1
  3. package/app/styles/_content-divider.scss +5 -5
  4. package/app/styles/_helpers.scss +24 -1
  5. package/app/styles/_icon-font.scss +9 -9
  6. package/app/styles/_modals.scss +3 -0
  7. package/app/styles/_normalize.scss +4 -0
  8. package/app/styles/_simple-list.scss +1 -0
  9. package/app/styles/_table-list.scss +10 -1
  10. package/app/styles/app.scss +1 -0
  11. package/app/styles/components/_list-item.scss +23 -16
  12. package/app/styles/components/_sd-collapse-box.scss +6 -6
  13. package/app/styles/design-tokens/_new-colors.scss +10 -5
  14. package/app/styles/form-elements/_input-wrap.scss +138 -0
  15. package/app/styles/form-elements/_inputs.scss +230 -61
  16. package/app/styles/interface-elements/_side-panel.scss +1 -1
  17. package/app/styles/primereact/_pr-dialog.scss +1 -0
  18. package/app/styles/primereact/_pr-menu.scss +6 -5
  19. package/app-typescript/components/DurationInput.tsx +11 -17
  20. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  21. package/app-typescript/components/Form/InputBase.tsx +12 -2
  22. package/dist/examples.bundle.css +8 -8
  23. package/dist/examples.bundle.js +860 -841
  24. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  25. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
  26. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
  27. package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  28. package/dist/react/ContentDivider.tsx +4 -4
  29. package/dist/react/Inputs.tsx +1 -7
  30. package/dist/react/Togglebox.tsx +1 -1
  31. package/dist/superdesk-ui.bundle.css +457 -175
  32. package/dist/superdesk-ui.bundle.js +586 -672
  33. package/dist/vendor.bundle.js +2 -2
  34. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  35. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
  36. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
  37. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  38. package/examples/pages/react/ContentDivider.tsx +4 -4
  39. package/examples/pages/react/Inputs.tsx +1 -7
  40. package/examples/pages/react/Togglebox.tsx +1 -1
  41. package/package.json +1 -1
  42. package/react/components/DurationInput.js +13 -18
  43. package/react/components/Form/FormLabel.d.ts +4 -1
  44. package/react/components/Form/FormLabel.js +9 -3
  45. package/react/components/Form/InputBase.d.ts +0 -1
  46. package/react/components/Form/InputBase.js +15 -1
  47. package/.vscode/settings.json +0 -5
  48. package/app-typescript/dist/components/Alert.d.ts +0 -16
  49. package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
  50. package/app-typescript/dist/components/Avatar.d.ts +0 -33
  51. package/app-typescript/dist/components/Badge.d.ts +0 -13
  52. package/app-typescript/dist/components/Button.d.ts +0 -23
  53. package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
  54. package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
  55. package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
  56. package/app-typescript/dist/components/Checkbox.d.ts +0 -19
  57. package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
  58. package/app-typescript/dist/components/DatePicker.d.ts +0 -37
  59. package/app-typescript/dist/components/Divider.d.ts +0 -9
  60. package/app-typescript/dist/components/DonutChart.d.ts +0 -12
  61. package/app-typescript/dist/components/Dropdown.d.ts +0 -28
  62. package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
  63. package/app-typescript/dist/components/EmptyState.d.ts +0 -11
  64. package/app-typescript/dist/components/FormLabel.d.ts +0 -9
  65. package/app-typescript/dist/components/Genie.d.ts +0 -13
  66. package/app-typescript/dist/components/GridItem.d.ts +0 -69
  67. package/app-typescript/dist/components/GridList.d.ts +0 -14
  68. package/app-typescript/dist/components/HeadingText.d.ts +0 -10
  69. package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
  70. package/app-typescript/dist/components/Icon.d.ts +0 -12
  71. package/app-typescript/dist/components/IconButton.d.ts +0 -12
  72. package/app-typescript/dist/components/IconLabel.d.ts +0 -11
  73. package/app-typescript/dist/components/Input.d.ts +0 -24
  74. package/app-typescript/dist/components/Label.d.ts +0 -15
  75. package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
  76. package/app-typescript/dist/components/Loader.d.ts +0 -8
  77. package/app-typescript/dist/components/NavButton.d.ts +0 -15
  78. package/app-typescript/dist/components/Popover.d.ts +0 -13
  79. package/app-typescript/dist/components/PropsList.d.ts +0 -15
  80. package/app-typescript/dist/components/Radio.d.ts +0 -19
  81. package/app-typescript/dist/components/RadioButton.d.ts +0 -20
  82. package/app-typescript/dist/components/Select.d.ts +0 -29
  83. package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
  84. package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
  85. package/app-typescript/dist/components/StrechBar.d.ts +0 -4
  86. package/app-typescript/dist/components/SubNav.d.ts +0 -10
  87. package/app-typescript/dist/components/Switch.d.ts +0 -12
  88. package/app-typescript/dist/components/TabCustom.d.ts +0 -25
  89. package/app-typescript/dist/components/TabList.d.ts +0 -22
  90. package/app-typescript/dist/components/Tag.d.ts +0 -9
  91. package/app-typescript/dist/components/TagInput.d.ts +0 -7
  92. package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
  93. package/app-typescript/dist/components/TimePicker.d.ts +0 -11
  94. package/app-typescript/dist/components/Tooltip.d.ts +0 -11
  95. package/app-typescript/dist/components/_Positioner.d.ts +0 -27
  96. package/app-typescript/dist/index.d.ts +0 -56
  97. package/yarn-error.log +0 -111
@@ -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__(49)(module)))
17299
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(50)(module)))
17300
17300
 
17301
17301
  /***/ }),
17302
17302
 
@@ -28217,7 +28217,7 @@ return jQuery;
28217
28217
 
28218
28218
  /***/ }),
28219
28219
 
28220
- /***/ 49:
28220
+ /***/ 50:
28221
28221
  /***/ (function(module, exports) {
28222
28222
 
28223
28223
  module.exports = function(module) {
@@ -72,7 +72,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
72
72
  active={this.state.mainMenuOpen}
73
73
  ariaControls='main-menu'
74
74
  menuId='main-menu'
75
- editorFullWidth={true}
75
+ editorFullWidth={false}
76
76
  slideInMenu={(
77
77
  <Layout.MainMenu
78
78
  headerTitle='Main Menu'
@@ -331,13 +331,14 @@ export class RundownEditor extends React.Component<IProps, IState> {
331
331
  </Layout.MainPanel>
332
332
 
333
333
  <Layout.RightPanel open={this.state.rightPanelOpen}>
334
- <Layout.Panel size='full' side='right'>
334
+ <Layout.Panel size='x-large' side='right'>
335
335
  <Layout.PanelContent>
336
336
  <Layout.AuthoringFrame
337
337
  main={
338
338
  <Layout.AuthoringMain
339
339
  headerPadding='medium'
340
340
  toolbarCustom={true}
341
+ headerCollapsed={true}
341
342
  toolBar={(
342
343
  <React.Fragment>
343
344
  <SubNav className='sd-shadow--z0'>
@@ -132,6 +132,10 @@ export class Rundowns extends React.Component<IProps, IState> {
132
132
  })
133
133
  }
134
134
 
135
+ componentDidUpdate() {
136
+ console.log(this.state);
137
+ }
138
+
135
139
  changeStatus(item: any, status: string) {
136
140
  if (item.status.includes(status)) {
137
141
  item.status.splice(item.status.indexOf(status), 1);
@@ -482,7 +486,7 @@ export class Rundowns extends React.Component<IProps, IState> {
482
486
  <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
483
487
  </Container>
484
488
  <Container className='sd-margin-s--auto sd-flex--items-center'>
485
- <Dropdown
489
+ {/* <Dropdown
486
490
  align = 'right'
487
491
  append = {true}
488
492
  items={[
@@ -495,7 +499,7 @@ export class Rundowns extends React.Component<IProps, IState> {
495
499
  ]
496
500
  }]}>
497
501
  <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
498
- </Dropdown>
502
+ </Dropdown> */}
499
503
  </Container>
500
504
  </Layout.PanelContentBlock>
501
505
 
@@ -547,6 +551,7 @@ export class Rundowns extends React.Component<IProps, IState> {
547
551
  {/* Manage Templates Modal */}
548
552
  <Modal headerTemplate="Manage Templates"
549
553
  visible={this.state.modalManageTemplate}
554
+ zIndex={1000}
550
555
  contentBg='medium'
551
556
  contentPadding='none'
552
557
  size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}>
@@ -644,6 +649,7 @@ export class Rundowns extends React.Component<IProps, IState> {
644
649
  {/* New Show Modal */}
645
650
  <Modal headerTemplate="Create new Show"
646
651
  visible={this.state.modalNewShow}
652
+ zIndex={1000}
647
653
  footerTemplate={newShowFooter}
648
654
  contentBg='medium'
649
655
  size='medium' onHide={() => {this.setState({modalNewShow: false})}}>
@@ -675,6 +681,7 @@ export class Rundowns extends React.Component<IProps, IState> {
675
681
  {/* New Show Modal Success */}
676
682
  <Modal headerTemplate="Create new Show"
677
683
  visible={this.state.modalNewShowSuccess}
684
+ zIndex={1000}
678
685
  footerTemplate={newShowFooter2}
679
686
  contentBg='medium'
680
687
  size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}>
@@ -690,6 +697,7 @@ export class Rundowns extends React.Component<IProps, IState> {
690
697
  {/* New Template Modal */}
691
698
  <Modal headerTemplate="Create new Template"
692
699
  visible={this.state.modalNewTemplate}
700
+ zIndex={1000}
693
701
  contentBg='medium'
694
702
  contentPadding='none'
695
703
  size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}>
@@ -795,6 +803,7 @@ export class Rundowns extends React.Component<IProps, IState> {
795
803
  {/* Manage Shows Modal */}
796
804
  <Modal headerTemplate="Manage Shows"
797
805
  visible={this.state.modalManageShow}
806
+ zIndex={1000}
798
807
  contentBg='medium'
799
808
  contentPadding='none'
800
809
  size='x-large' onHide={() => {this.setState({modalManageShow: false})}}>
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew } from '../../../../app-typescript/index';
3
+ import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew} from '../../../../app-typescript/index';
4
4
  import { Carousel } from '../../../../app-typescript/index';
5
- import * as GridElements from '../../../../app-typescript/components/GridItem';
5
+ import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
6
+
6
7
 
7
8
  import dummy_items from '../dummy-data/items';
8
9
 
@@ -62,6 +63,35 @@ export class TestGround extends React.Component<IProps, IState> {
62
63
  <Components.Layout header='Testing Ground'>
63
64
  <Components.LayoutContainer>
64
65
  <Components.MainPanel>
66
+
67
+
68
+ <h3 className="docs-page__h3 sd-margin-y--0">Form test</h3>
69
+ <hr />
70
+ <div className="input-wrap">
71
+ <FormLabel invalid required={true} state='focused' text="Form Label" forId="input1" />
72
+ <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
73
+ <InputBase placeholder='Test placeholder' boxedStyle invalid type='text' id="input1" value='' onChange={(value) => {}} />
74
+ <div className="input-wrap__message-box">
75
+ <div className="sd-input__hint">Error message</div>
76
+ </div>
77
+ <span className="sd-input__char-count">0 / 40</span>
78
+ </div>
79
+
80
+ <hr />
81
+
82
+ <div className="input-wrap input-wrap--boxed">
83
+ <FormLabel style='boxed' text="Form Label" required={true} forId="input2" />
84
+ <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
85
+ <InputBase disabled size='medium' placeholder='Test placeholder' boxedStyle type='text' id="input2" value='' onChange={(value) => {}} />
86
+ <div className="input-wrap__message-box">
87
+ <div className="sd-input__hint">Error message</div>
88
+ </div>
89
+ <span className="sd-input__char-count">0 / 40</span>
90
+ </div>
91
+
92
+ <hr />
93
+ <hr />
94
+
65
95
  <InputNew
66
96
  label='test'
67
97
  value=''
@@ -220,17 +250,114 @@ export class TestGround extends React.Component<IProps, IState> {
220
250
  </FormRowNew>
221
251
 
222
252
  <hr />
223
- <h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
253
+ <h3 className="docs-page__h3 sd-margin-y--0">Table list (draggable)</h3>
224
254
  <hr />
225
- <ul className='table-list'>
226
- <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
255
+ <h4 className="docs-page__h4 sd-margin-y--1">Handles visible</h4>
256
+ <ul className='table-list table-list--gap-s'>
257
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
258
+ <div className='table-list__item-border'></div>
259
+ <div className='table-list__item-content'>
260
+ <div className='table-list__item-content-block'>
261
+ <Label text='Uvod' />
262
+ <Label type='primary' text='prlg' />
263
+ </div>
264
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
265
+ <span>Handle visible. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
266
+ </div>
267
+ <div className='table-list__item-content-block'>
268
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
269
+ </div>
270
+ </div>
271
+ <div className='table-list__slide-in-actions'>
272
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
273
+ </div>
274
+ </li>
275
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
276
+ <div className='table-list__item-border'></div>
277
+ <div className='table-list__item-content'>
278
+ <div className='table-list__item-content-block'>
279
+ <Label text='Gost' />
280
+ <Label type='primary' text='prlg' />
281
+ </div>
282
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
283
+ <span>Handle visible. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
284
+ </div>
285
+ <div className='table-list__item-content-block'>
286
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
287
+ </div>
288
+ </div>
289
+ <div className='table-list__slide-in-actions'>
290
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
291
+ </div>
292
+ </li>
293
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
294
+ <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
295
+ <div className='table-list__item-content'>
296
+ <div className='table-list__item-content-block'>
297
+ <Label text='Podatak' />
298
+ <Label type='primary' text='Gost' />
299
+ </div>
300
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
301
+ <span>Handle visible. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
302
+ </div>
303
+ <div className='table-list__item-content-block'>
304
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
305
+ </div>
306
+ </div>
307
+ <div className='table-list__slide-in-actions'>
308
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
309
+ </div>
310
+ </li>
311
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always table-list__item--selected'>
312
+ <div className='table-list__item-border'></div>
313
+ <div className='table-list__item-content'>
314
+ <div className='table-list__item-content-block'>
315
+ <Label text='Odjava' />
316
+ <Label type='warning' text='Slika' />
317
+ </div>
318
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
319
+ <span>Handle visible. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
320
+ </div>
321
+ <div className='table-list__item-content-block'>
322
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
323
+ </div>
324
+ </div>
325
+ <div className='table-list__slide-in-actions'>
326
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
327
+ </div>
328
+ </li>
329
+ </ul>
330
+
331
+ <hr />
332
+ <h4 className="docs-page__h4 sd-margin-y--1">Handles hidden</h4>
333
+ <ul className='table-list table-list--gap-s'>
334
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
335
+ <div className='table-list__item-border'></div>
336
+ <div className='table-list__item-content'>
337
+ <div className='table-list__item-content-block'>
338
+ <Label text='Uvod' />
339
+ <Label type='primary' text='prlg' />
340
+ </div>
341
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
342
+ <span>Handle hidden. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
343
+ </div>
344
+ <div className='table-list__item-content-block'>
345
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
346
+ </div>
347
+ </div>
348
+ <div className='table-list__slide-in-actions'>
349
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
350
+ </div>
351
+ </li>
352
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
353
+ <div className='table-list__item-border'></div>
227
354
  <div className='table-list__item-content'>
228
355
  <div className='table-list__item-content-block'>
229
- <Label style='translucent' text='aacc' />
230
- <Label style='translucent' type='primary' text='prlg' />
356
+ <Label text='Gost' />
357
+ <Label type='primary' text='prlg' />
231
358
  </div>
232
359
  <div className='table-list__item-content-block table-list__item-content-block--center'>
233
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
360
+ <span>Handle hidden. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
234
361
  </div>
235
362
  <div className='table-list__item-content-block'>
236
363
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -240,14 +367,56 @@ export class TestGround extends React.Component<IProps, IState> {
240
367
  <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
241
368
  </div>
242
369
  </li>
370
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
371
+ <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
372
+ <div className='table-list__item-content'>
373
+ <div className='table-list__item-content-block'>
374
+ <Label text='Podatak' />
375
+ <Label type='primary' text='Gost' />
376
+ </div>
377
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
378
+ <span>Handle hidden. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
379
+ </div>
380
+ <div className='table-list__item-content-block'>
381
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
382
+ </div>
383
+ </div>
384
+ <div className='table-list__slide-in-actions'>
385
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
386
+ </div>
387
+ </li>
388
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none table-list__item--selected'>
389
+ <div className='table-list__item-border'></div>
390
+ <div className='table-list__item-content'>
391
+ <div className='table-list__item-content-block'>
392
+ <Label text='Odjava' />
393
+ <Label type='warning' text='Slika' />
394
+ </div>
395
+ <div className='table-list__item-content-block table-list__item-content-block--center'>
396
+ <span>Handle hidden. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
397
+ </div>
398
+ <div className='table-list__item-content-block'>
399
+ <IconLabel style='translucent' text='Label success' type='success' icon='time' />
400
+ </div>
401
+ </div>
402
+ <div className='table-list__slide-in-actions'>
403
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
404
+ </div>
405
+ </li>
406
+ </ul>
407
+
408
+ <hr />
409
+ <h4 className="docs-page__h4 sd-margin-y--1">Handles on hover</h4>
410
+ <ul className='table-list table-list--gap-s'>
243
411
  <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
412
+ <div className='table-list__item-border'></div>
244
413
  <div className='table-list__item-content'>
245
414
  <div className='table-list__item-content-block'>
246
- <Label style='translucent' type='warning' text='pokr' />
247
- <Label style='translucent' text='slika' />
415
+ <Label text='Uvod' />
416
+ <Label type='primary' text='prlg' />
248
417
  </div>
249
418
  <div className='table-list__item-content-block table-list__item-content-block--center'>
250
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
419
+ <span>Handle on hover. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
251
420
  </div>
252
421
  <div className='table-list__item-content-block'>
253
422
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -257,32 +426,33 @@ export class TestGround extends React.Component<IProps, IState> {
257
426
  <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
258
427
  </div>
259
428
  </li>
260
- <li className='table-list__item table-list__item--clickable'>
429
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
430
+ <div className='table-list__item-border'></div>
261
431
  <div className='table-list__item-content'>
262
432
  <div className='table-list__item-content-block'>
263
- <Label style='translucent' type='warning' text='pokr' />
264
- <Label style='translucent' text='slika' />
433
+ <Label text='Gost' />
434
+ <Label type='primary' text='prlg' />
265
435
  </div>
266
436
  <div className='table-list__item-content-block table-list__item-content-block--center'>
267
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
437
+ <span>Handle on hover. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
268
438
  </div>
269
439
  <div className='table-list__item-content-block'>
270
440
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
271
441
  </div>
272
442
  </div>
273
443
  <div className='table-list__slide-in-actions'>
274
- <IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
275
- <IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
444
+ <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
276
445
  </div>
277
446
  </li>
278
- <li className='table-list__item table-list__item--clickable table-list__item--selected'>
447
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
448
+ <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
279
449
  <div className='table-list__item-content'>
280
450
  <div className='table-list__item-content-block'>
281
- <Label style='translucent' type='warning' text='pokr' />
282
- <Label style='translucent' text='slika' />
451
+ <Label text='Podatak' />
452
+ <Label type='primary' text='Gost' />
283
453
  </div>
284
454
  <div className='table-list__item-content-block table-list__item-content-block--center'>
285
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
455
+ <span>Handle on hover. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
286
456
  </div>
287
457
  <div className='table-list__item-content-block'>
288
458
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -292,14 +462,15 @@ export class TestGround extends React.Component<IProps, IState> {
292
462
  <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
293
463
  </div>
294
464
  </li>
295
- <li className='table-list__item table-list__item--clickable'>
465
+ <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--selected'>
466
+ <div className='table-list__item-border'></div>
296
467
  <div className='table-list__item-content'>
297
468
  <div className='table-list__item-content-block'>
298
- <Label style='translucent' type='warning' text='pokr' />
299
- <Label style='translucent' text='slika' />
469
+ <Label text='Odjava' />
470
+ <Label type='warning' text='Slika' />
300
471
  </div>
301
472
  <div className='table-list__item-content-block table-list__item-content-block--center'>
302
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
473
+ <span>Handle on hover. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
303
474
  </div>
304
475
  <div className='table-list__item-content-block'>
305
476
  <IconLabel style='translucent' text='Label success' type='success' icon='time' />
@@ -310,6 +481,8 @@ export class TestGround extends React.Component<IProps, IState> {
310
481
  </div>
311
482
  </li>
312
483
  </ul>
484
+ <hr />
485
+ <hr />
313
486
 
314
487
  <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-t--3">Table list with items between</h3>
315
488
  <hr />
@@ -167,10 +167,10 @@ export default class ContentDividerDoc extends React.Component {
167
167
 
168
168
  <h3 className="docs-page__h3">Props</h3>
169
169
  <PropsList>
170
- <Prop name='type' isRequered={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
171
- <Prop name='orientation' isRequered={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
172
- <Prop name='align' isRequered={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
173
- <Prop name='border' isRequered={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
170
+ <Prop name='type' isRequired={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
171
+ <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
172
+ <Prop name='align' isRequired={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
173
+ <Prop name='border' isRequired={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
174
174
  </PropsList>
175
175
  </section>
176
176
  )
@@ -108,12 +108,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
108
108
  tabindex={0}
109
109
  onChange={(value) => this.setState({value2: value})} />
110
110
  </div>
111
- <div className='form__row'>
112
- <DurationInput
113
- onChange={(e) => {
114
- console.log(e)
115
- }}
116
- />
111
+
117
112
  <p className="docs-page__paragraph">// Boxed with hidden label</p>
118
113
  <div className='form__row'>
119
114
  <Input label='Input label'
@@ -214,7 +209,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
214
209
  tabindex={0}
215
210
  onChange={(value) => this.setState({value2: value})} />
216
211
  </div>
217
- </div>
218
212
  </div>
219
213
 
220
214
  </Markup.ReactMarkupPreview>
@@ -40,6 +40,7 @@ const ToggleboxDocs = () => {
40
40
  <Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
41
41
  <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
42
42
  <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
43
+ <Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
43
44
  <Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
44
45
  <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
45
46
  </PropsList>
@@ -47,5 +48,4 @@ const ToggleboxDocs = () => {
47
48
  )
48
49
  }
49
50
 
50
-
51
51
  export default ToggleboxDocs;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.1-beta.14",
3
+ "version": "3.0.1-beta.15",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -327,27 +327,22 @@ function getDurationString(seconds, zero) {
327
327
  return value;
328
328
  }
329
329
  }
330
- var hour;
331
- var minute;
332
- var second;
330
+ var hour = zeroPad(Math.floor(seconds / 3600));
331
+ var minute = zeroPad(Math.floor((seconds % 3600) / 60));
332
+ var second = zeroPad(Math.floor(seconds % 60));
333
333
  if (zero) {
334
- hour = zeroPad(Math.floor(seconds / 3600));
335
- minute = zeroPad(Math.floor((seconds % 3600) / 60));
336
- second = zeroPad(Math.floor(seconds % 60));
337
- }
338
- else {
339
- hour = Math.floor(seconds / 3600);
340
- minute = Math.floor((seconds % 3600) / 60);
341
- second = Math.floor(seconds % 60);
342
- }
343
- if (Number(hour) === 0 && Number(minute) > 0) {
344
- return "".concat(minute, "m ").concat(second, "s");
345
- }
346
- else if (Number(hour) === 0 && Number(minute) === 0) {
347
- return "".concat(second, "s");
334
+ return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
348
335
  }
349
336
  else {
350
- return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
337
+ if (Number(hour) === 0 && Number(minute) > 0) {
338
+ return "".concat(minute, "m ").concat(second, "s");
339
+ }
340
+ else if (Number(hour) === 0 && Number(minute) === 0) {
341
+ return "".concat(second, "s");
342
+ }
343
+ else {
344
+ return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
345
+ }
351
346
  }
352
347
  }
353
348
  exports.getDurationString = getDurationString;
@@ -1,8 +1,11 @@
1
1
  import * as React from 'react';
2
2
  interface IProps {
3
- style?: 'normal' | 'light';
3
+ style?: 'normal' | 'light' | 'boxed';
4
+ state?: 'default' | 'focused' | 'warning';
4
5
  text: string;
5
6
  forId?: string;
7
+ required?: boolean;
8
+ invalid?: boolean;
6
9
  }
7
10
  export declare class FormLabel extends React.PureComponent<IProps> {
8
11
  render(): JSX.Element;
@@ -46,9 +46,15 @@ var FormLabel = /** @class */ (function (_super) {
46
46
  return _super !== null && _super.apply(this, arguments) || this;
47
47
  }
48
48
  FormLabel.prototype.render = function () {
49
- var classes = (0, classnames_1.default)('form-label', {
50
- 'form-label--light': this.props.style === 'light',
51
- });
49
+ var _a;
50
+ var classes = (0, classnames_1.default)('form-label', (_a = {
51
+ 'form-label--light': this.props.style === 'light',
52
+ 'form-label--boxed': this.props.style === 'boxed',
53
+ 'form-label--required': this.props.required,
54
+ 'form-label--invalid': this.props.invalid
55
+ },
56
+ _a["form-label--".concat(this.props.state)] = this.props.state !== 'default' && this.props.state !== undefined,
57
+ _a));
52
58
  return (React.createElement("label", { htmlFor: this.props.forId, className: classes }, this.props.text));
53
59
  };
54
60
  return FormLabel;
@@ -7,7 +7,6 @@ interface IPropsBase {
7
7
  tabIndex?: number;
8
8
  fullWidth?: boolean;
9
9
  boxedStyle?: boolean;
10
- boxedLable?: boolean;
11
10
  placeholder?: string;
12
11
  htmlId?: string;
13
12
  id?: string;
@@ -33,9 +33,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
33
33
  __setModuleDefault(result, mod);
34
34
  return result;
35
35
  };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
36
39
  Object.defineProperty(exports, "__esModule", { value: true });
37
40
  exports.InputBase = void 0;
38
41
  var React = __importStar(require("react"));
42
+ var classnames_1 = __importDefault(require("classnames"));
39
43
  var InputBase = /** @class */ (function (_super) {
40
44
  __extends(InputBase, _super);
41
45
  function InputBase(props) {
@@ -65,7 +69,17 @@ var InputBase = /** @class */ (function (_super) {
65
69
  };
66
70
  InputBase.prototype.render = function () {
67
71
  var _a;
68
- return (React.createElement("input", { className: 'sd-input__input', type: (_a = this.props.type) !== null && _a !== void 0 ? _a : 'text', id: this.props.htmlId, value: this.state.value, "aria-describedby": this.props.htmlId + 'label', tabIndex: this.props.tabIndex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }));
72
+ var _b;
73
+ var classes = (0, classnames_1.default)('sd-input__input', (_a = {
74
+ 'sd-input__input--boxed-style': this.props.boxedStyle,
75
+ 'sd-input__input--required': this.props.required,
76
+ 'sd-input__input--invalid': this.props.invalid,
77
+ 'sd-input__input--disabled': this.props.disabled,
78
+ 'sd-input__input--medium': this.props.size === undefined
79
+ },
80
+ _a["sd-input__input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
81
+ _a));
82
+ return (React.createElement("input", { className: classes, type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.props.htmlId, value: this.state.value, "aria-describedby": this.props.htmlId + 'label', tabIndex: this.props.tabIndex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }));
69
83
  };
70
84
  return InputBase;
71
85
  }(React.Component));
@@ -1,5 +0,0 @@
1
- {
2
- "cSpell.words": [
3
- "qcode"
4
- ]
5
- }