superdesk-ui-framework 3.0.1-beta.13 → 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.
- 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 +11 -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/dropdowns/_basic-dropdown.scss +6 -0
- 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/primereact/_pr-dialog.scss +1 -0
- package/app/styles/primereact/_pr-menu.scss +6 -5
- package/app-typescript/components/Dropdown.tsx +65 -65
- package/app-typescript/components/DurationInput.tsx +10 -6
- package/app-typescript/components/Form/FormLabel.tsx +8 -1
- package/app-typescript/components/Form/InputBase.tsx +12 -2
- package/app-typescript/components/Lists/ContentList.tsx +28 -4
- package/app-typescript/components/Lists/TableList.tsx +11 -9
- package/dist/examples.bundle.css +8 -8
- package/dist/examples.bundle.js +1075 -640
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/dist/react/ContentDivider.tsx +4 -4
- package/dist/react/ContentList.tsx +2 -10
- package/dist/react/Dropdowns.tsx +357 -5
- package/dist/react/Inputs.tsx +1 -7
- package/dist/react/TableList.tsx +28 -30
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/superdesk-ui.bundle.css +463 -176
- package/dist/superdesk-ui.bundle.js +591 -539
- 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 +5 -10
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/examples/pages/react/ContentDivider.tsx +4 -4
- package/examples/pages/react/ContentList.tsx +2 -10
- package/examples/pages/react/Dropdowns.tsx +357 -5
- package/examples/pages/react/Inputs.tsx +1 -7
- package/examples/pages/react/TableList.tsx +28 -30
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +4 -4
- package/react/components/Dropdown.js +19 -15
- package/react/components/DurationInput.d.ts +1 -1
- package/react/components/DurationInput.js +12 -7
- 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/Lists/ContentList.d.ts +5 -0
- package/react/components/Lists/ContentList.js +36 -15
- package/react/components/Lists/TableList.d.ts +5 -5
- package/react/components/Lists/TableList.js +6 -4
package/dist/vendor.bundle.js
CHANGED
@@ -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__(
|
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
|
-
/***/
|
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={
|
75
|
+
editorFullWidth={false}
|
76
76
|
slideInMenu={(
|
77
77
|
<Layout.MainMenu
|
78
78
|
headerTitle='Main Menu'
|
@@ -1,11 +1,8 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import
|
3
|
-
import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, RadioButtonGroup, Container, Label, IconLabel } from '../../../../app-typescript/index';
|
2
|
+
import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
|
4
3
|
import * as Layout from '../../../../app-typescript/components/Layouts';
|
5
4
|
import * as Form from '../../../../app-typescript/components/Form';
|
6
5
|
import * as Nav from '../../../../app-typescript/components/Navigation';
|
7
|
-
import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
|
8
|
-
import { SimpleList, SimpleListItem } from '../../../../app-typescript/components/Lists';
|
9
6
|
import { TableList } from '../../../../app-typescript/components/Lists/TableList';
|
10
7
|
|
11
8
|
interface IProps {
|
@@ -115,7 +112,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
115
112
|
onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
|
116
113
|
},
|
117
114
|
]
|
118
|
-
|
119
115
|
}
|
120
116
|
this.handleTheme = this.handleTheme.bind(this);
|
121
117
|
}
|
@@ -319,31 +315,30 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
319
315
|
<Text color='light' size='medium' className='sd-margin--0'>OF</Text>
|
320
316
|
<IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
|
321
317
|
</ButtonGroup>
|
322
|
-
|
323
318
|
<TableList
|
324
319
|
className='sd-margin-y--4'
|
325
320
|
dragAndDrop
|
326
321
|
addItem
|
327
322
|
array={this.state.array}
|
328
|
-
itemsDropdown={[
|
323
|
+
itemsDropdown={() => [
|
329
324
|
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
|
330
325
|
{ label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
|
331
326
|
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
|
332
327
|
]}
|
333
|
-
|
334
|
-
/>
|
328
|
+
/>
|
335
329
|
|
336
330
|
</Layout.AuthoringMain>
|
337
331
|
</Layout.MainPanel>
|
338
332
|
|
339
333
|
<Layout.RightPanel open={this.state.rightPanelOpen}>
|
340
|
-
<Layout.Panel size='
|
334
|
+
<Layout.Panel size='x-large' side='right'>
|
341
335
|
<Layout.PanelContent>
|
342
336
|
<Layout.AuthoringFrame
|
343
337
|
main={
|
344
338
|
<Layout.AuthoringMain
|
345
339
|
headerPadding='medium'
|
346
340
|
toolbarCustom={true}
|
341
|
+
headerCollapsed={true}
|
347
342
|
toolBar={(
|
348
343
|
<React.Fragment>
|
349
344
|
<SubNav className='sd-shadow--z0'>
|
@@ -1,14 +1,9 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import * as Components from './components/Index';
|
3
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';
|
4
3
|
import * as Layout from '../../../../app-typescript/components/Layouts';
|
5
4
|
import * as Form from '../../../../app-typescript/components/Form';
|
6
5
|
import {RundownEditor} from './RundownEditor';
|
7
6
|
import * as Nav from '../../../../app-typescript/components/Navigation';
|
8
|
-
import * as GridElements from '../../../../app-typescript/components/GridItem';
|
9
|
-
|
10
|
-
|
11
|
-
import dummy_items from '../dummy-data/items';
|
12
7
|
import { ContentList } from '../../../../app-typescript/components/Lists/ContentList';
|
13
8
|
import { TableList } from '../../../../app-typescript/components/Lists/TableList';
|
14
9
|
|
@@ -137,6 +132,10 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
137
132
|
})
|
138
133
|
}
|
139
134
|
|
135
|
+
componentDidUpdate() {
|
136
|
+
console.log(this.state);
|
137
|
+
}
|
138
|
+
|
140
139
|
changeStatus(item: any, status: string) {
|
141
140
|
if (item.status.includes(status)) {
|
142
141
|
item.status.splice(item.status.indexOf(status), 1);
|
@@ -487,7 +486,7 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
487
486
|
<Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
|
488
487
|
</Container>
|
489
488
|
<Container className='sd-margin-s--auto sd-flex--items-center'>
|
490
|
-
<Dropdown
|
489
|
+
{/* <Dropdown
|
491
490
|
align = 'right'
|
492
491
|
append = {true}
|
493
492
|
items={[
|
@@ -500,7 +499,7 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
500
499
|
]
|
501
500
|
}]}>
|
502
501
|
<IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
|
503
|
-
</Dropdown>
|
502
|
+
</Dropdown> */}
|
504
503
|
</Container>
|
505
504
|
</Layout.PanelContentBlock>
|
506
505
|
|
@@ -524,15 +523,14 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
524
523
|
<IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
|
525
524
|
</ButtonGroup>
|
526
525
|
<TableList
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
/>
|
526
|
+
className='sd-margin-y--4'
|
527
|
+
array={this.state.array}
|
528
|
+
itemsDropdown={() => [
|
529
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
|
530
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
|
531
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
|
532
|
+
]}
|
533
|
+
/>
|
536
534
|
</Layout.PanelContentBlock>
|
537
535
|
</Layout.PanelContent>
|
538
536
|
</Layout.Panel>
|
@@ -553,6 +551,7 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
553
551
|
{/* Manage Templates Modal */}
|
554
552
|
<Modal headerTemplate="Manage Templates"
|
555
553
|
visible={this.state.modalManageTemplate}
|
554
|
+
zIndex={1000}
|
556
555
|
contentBg='medium'
|
557
556
|
contentPadding='none'
|
558
557
|
size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}>
|
@@ -632,8 +631,6 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
632
631
|
</Container>
|
633
632
|
</BoxedListItem>
|
634
633
|
</BoxedList> */}
|
635
|
-
|
636
|
-
|
637
634
|
</Layout.PanelContent>
|
638
635
|
</Layout.Panel>
|
639
636
|
</Layout.LeftPanel>
|
@@ -652,6 +649,7 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
652
649
|
{/* New Show Modal */}
|
653
650
|
<Modal headerTemplate="Create new Show"
|
654
651
|
visible={this.state.modalNewShow}
|
652
|
+
zIndex={1000}
|
655
653
|
footerTemplate={newShowFooter}
|
656
654
|
contentBg='medium'
|
657
655
|
size='medium' onHide={() => {this.setState({modalNewShow: false})}}>
|
@@ -683,6 +681,7 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
683
681
|
{/* New Show Modal Success */}
|
684
682
|
<Modal headerTemplate="Create new Show"
|
685
683
|
visible={this.state.modalNewShowSuccess}
|
684
|
+
zIndex={1000}
|
686
685
|
footerTemplate={newShowFooter2}
|
687
686
|
contentBg='medium'
|
688
687
|
size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}>
|
@@ -692,14 +691,13 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
692
691
|
The show <strong>Marker</strong> has been successfully created.<br />
|
693
692
|
Do you want to cretate a template for this show right away?
|
694
693
|
</Text>
|
695
|
-
|
696
|
-
|
697
694
|
</Container>
|
698
695
|
</Modal>
|
699
696
|
|
700
697
|
{/* New Template Modal */}
|
701
698
|
<Modal headerTemplate="Create new Template"
|
702
699
|
visible={this.state.modalNewTemplate}
|
700
|
+
zIndex={1000}
|
703
701
|
contentBg='medium'
|
704
702
|
contentPadding='none'
|
705
703
|
size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}>
|
@@ -733,7 +731,7 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
733
731
|
</ButtonGroup>
|
734
732
|
</Container>
|
735
733
|
<BoxedList>
|
736
|
-
|
734
|
+
<BoxedListItem
|
737
735
|
alignVertical='center'
|
738
736
|
clickable={true}
|
739
737
|
density='compact'
|
@@ -805,6 +803,7 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
805
803
|
{/* Manage Shows Modal */}
|
806
804
|
<Modal headerTemplate="Manage Shows"
|
807
805
|
visible={this.state.modalManageShow}
|
806
|
+
zIndex={1000}
|
808
807
|
contentBg='medium'
|
809
808
|
contentPadding='none'
|
810
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
|
)
|
@@ -1,28 +1,23 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Markup from '../../js/react';
|
3
|
-
import {
|
4
|
-
import {
|
5
|
-
import { ContentList, ContentListItem } from '../../../app-typescript/components/Lists/ContentList';
|
3
|
+
import { Prop, PropsList, Icon, IconButton, Label, Container, IconLabel } from '../../../app-typescript';
|
4
|
+
import { ContentList } from '../../../app-typescript/components/Lists/ContentList';
|
6
5
|
|
7
6
|
export default class ContentListDoc extends React.Component {
|
8
7
|
render() {
|
9
8
|
return (
|
10
9
|
<section className='docs-page__container'>
|
11
10
|
<h2 className='docs-page__h2'>ContentList</h2>
|
12
|
-
|
13
11
|
<Markup.ReactMarkupCodePreview>{`
|
14
12
|
<ContentList
|
15
13
|
items: [...]
|
16
14
|
/>
|
17
15
|
`}
|
18
16
|
</Markup.ReactMarkupCodePreview>
|
19
|
-
|
20
17
|
<p className="docs-page__paragraph">...</p>
|
21
|
-
|
22
18
|
<Markup.ReactMarkup>
|
23
19
|
<Markup.ReactMarkupPreview>
|
24
20
|
<p className="docs-page__paragraph">// basic</p>
|
25
|
-
|
26
21
|
<ContentList
|
27
22
|
items={[
|
28
23
|
{
|
@@ -140,7 +135,6 @@ export default class ContentListDoc extends React.Component {
|
|
140
135
|
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
141
136
|
},
|
142
137
|
]} />
|
143
|
-
|
144
138
|
</Markup.ReactMarkupPreview>
|
145
139
|
<Markup.ReactMarkupCode>{`
|
146
140
|
<ContentList
|
@@ -261,7 +255,6 @@ export default class ContentListDoc extends React.Component {
|
|
261
255
|
`}
|
262
256
|
</Markup.ReactMarkupCode>
|
263
257
|
</Markup.ReactMarkup>
|
264
|
-
|
265
258
|
<h3 className="docs-page__h3">Props</h3>
|
266
259
|
<p className="docs-page__paragraph">ContentList</p>
|
267
260
|
<PropsList>
|
@@ -279,7 +272,6 @@ export default class ContentListDoc extends React.Component {
|
|
279
272
|
<Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
|
280
273
|
<Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
|
281
274
|
</PropsList>
|
282
|
-
|
283
275
|
</section>
|
284
276
|
)
|
285
277
|
}
|