superdesk-ui-framework 3.0.1-beta.14 → 3.0.1-beta.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/scripts/toggleBoxNext.js +1 -1
- package/app/styles/_buttons.scss +1 -1
- package/app/styles/_content-divider.scss +5 -5
- package/app/styles/_helpers.scss +24 -1
- package/app/styles/_icon-font.scss +9 -9
- package/app/styles/_modals.scss +3 -0
- package/app/styles/_normalize.scss +4 -0
- package/app/styles/_simple-list.scss +1 -0
- package/app/styles/_table-list.scss +14 -1
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_list-item.scss +23 -16
- package/app/styles/components/_sd-collapse-box.scss +6 -6
- package/app/styles/design-tokens/_new-colors.scss +10 -5
- package/app/styles/form-elements/_input-wrap.scss +138 -0
- package/app/styles/form-elements/_inputs.scss +230 -61
- package/app/styles/interface-elements/_side-panel.scss +1 -1
- package/app/styles/layout/_editor.scss +1 -0
- package/app/styles/primereact/_pr-dialog.scss +1 -0
- package/app/styles/primereact/_pr-menu.scss +6 -5
- package/app-typescript/components/DurationInput.tsx +11 -17
- package/app-typescript/components/Form/FormLabel.tsx +8 -1
- package/app-typescript/components/Form/InputBase.tsx +12 -2
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
- package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
- package/app-typescript/components/Lists/ContentList.tsx +7 -3
- package/app-typescript/components/Lists/TableList.tsx +29 -16
- package/dist/examples.bundle.css +8 -8
- package/dist/examples.bundle.js +877 -856
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/dist/react/ContentDivider.tsx +4 -4
- package/dist/react/Inputs.tsx +1 -7
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/superdesk-ui.bundle.css +462 -176
- package/dist/superdesk-ui.bundle.js +603 -687
- package/dist/vendor.bundle.js +2 -2
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/examples/pages/react/ContentDivider.tsx +4 -4
- package/examples/pages/react/Inputs.tsx +1 -7
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/package.json +1 -1
- package/react/components/DurationInput.js +13 -18
- package/react/components/Form/FormLabel.d.ts +4 -1
- package/react/components/Form/FormLabel.js +9 -3
- package/react/components/Form/InputBase.d.ts +0 -1
- package/react/components/Form/InputBase.js +15 -1
- package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
- package/react/components/Layouts/AuthoringMain.js +1 -1
- package/react/components/Lists/ContentList.js +2 -2
- package/react/components/Lists/TableList.d.ts +4 -0
- package/react/components/Lists/TableList.js +13 -11
@@ -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={
|
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='
|
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
|
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
|
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
|
-
<
|
226
|
-
|
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
|
230
|
-
<Label
|
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
|
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
|
247
|
-
<Label
|
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>
|
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
|
264
|
-
<Label
|
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>
|
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='
|
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--
|
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
|
282
|
-
<Label
|
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>
|
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
|
299
|
-
<Label
|
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'
|
171
|
-
<Prop name='orientation'
|
172
|
-
<Prop name='align'
|
173
|
-
<Prop name='border'
|
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
|
)
|
package/dist/react/Inputs.tsx
CHANGED
@@ -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
|
-
|
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>
|
package/dist/react/Togglebox.tsx
CHANGED
@@ -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;
|