superdesk-ui-framework 4.0.14 → 4.0.17
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/.github/workflows/publish-to-npm.yml +1 -0
- package/app/styles/app.scss +1 -0
- package/app-typescript/components/CreateButton.tsx +1 -1
- package/app-typescript/components/DateTimePicker.tsx +33 -29
- package/app-typescript/components/Editor/EditorButton.tsx +1 -1
- package/app-typescript/components/IconButton.tsx +1 -3
- package/app-typescript/components/Lists/TableList.tsx +4 -4
- package/app-typescript/components/Switch.tsx +0 -1
- package/app-typescript/components/Tooltip.tsx +81 -48
- package/dist/components/Tooltips.tsx +1 -44
- package/dist/examples.bundle.js +3572 -1087
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +26 -26
- package/dist/superdesk-ui.bundle.css +1 -1
- package/dist/superdesk-ui.bundle.js +3541 -1040
- package/examples/pages/components/Tooltips.tsx +1 -44
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +26 -26
- package/package.json +3 -2
- package/react/components/CreateButton.js +1 -1
- package/react/components/DateTimePicker.js +9 -7
- package/react/components/IconButton.js +1 -1
- package/react/components/Lists/TableList.js +4 -4
- package/react/components/Switch.js +1 -1
- package/react/components/Tooltip.d.ts +10 -4
- package/react/components/Tooltip.js +68 -64
@@ -146,7 +146,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
146
146
|
<Layout.LayoutContainer>
|
147
147
|
<Layout.HeaderPanel>
|
148
148
|
<SubNav>
|
149
|
-
<Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right'
|
149
|
+
<Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right'>
|
150
150
|
<button
|
151
151
|
className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
|
152
152
|
onClick={this.toggleExpand}
|
@@ -221,7 +221,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
221
221
|
</div>
|
222
222
|
<div className="sd-list-item__action-menu sd-list-item__action-menu--direction-row ps-0">
|
223
223
|
<ButtonGroup orientation='vertical' spaces='compact'>
|
224
|
-
<IconButton size='small' icon='external' ariaValue='Open in modal' onClick={()=> false} />
|
224
|
+
<IconButton size='small' icon='external' ariaValue='Open in modal' onClick={()=> false} />
|
225
225
|
<IconButton size='small' icon='trash' ariaValue='Delete Coverage' onClick={()=> false} />
|
226
226
|
</ButtonGroup>
|
227
227
|
</div>
|
@@ -378,7 +378,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
378
378
|
<div className='sd-border--medium border-dashed p-1-5 radius-md d-flex items-center justify-center'>
|
379
379
|
<span className='text-sm text-color-subdued'>No Coverages yet</span>
|
380
380
|
</div>
|
381
|
-
|
381
|
+
|
382
382
|
{/* <ContentDivider type="dashed" margin='x-small' /> */}
|
383
383
|
|
384
384
|
{/* NESTED BOX */}
|
@@ -404,7 +404,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
404
404
|
<span className="sd-list-item__text-light">//</span>
|
405
405
|
<span className="sd-list-item__text">Archive</span>
|
406
406
|
</span>
|
407
|
-
|
407
|
+
|
408
408
|
</span>
|
409
409
|
<time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
|
410
410
|
</div>
|
@@ -460,8 +460,8 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
460
460
|
<span className="sd-list-item__text-light">//</span>
|
461
461
|
<span className="sd-list-item__text">Archive</span>
|
462
462
|
</span>
|
463
|
-
|
464
|
-
|
463
|
+
|
464
|
+
|
465
465
|
</span>
|
466
466
|
<Label text='Draft' style='translucent' type='default' />
|
467
467
|
</div>
|
@@ -662,7 +662,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
662
662
|
|
663
663
|
<hr />
|
664
664
|
|
665
|
-
<Avatar
|
665
|
+
<Avatar
|
666
666
|
displayName="Jeffrey Lebowski"
|
667
667
|
imageUrl={null}
|
668
668
|
initials='JL'
|
@@ -757,7 +757,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
757
757
|
<span className="sd-list-item__text-light">//</span>
|
758
758
|
<span className="sd-list-item__text">Archive</span>
|
759
759
|
</span>
|
760
|
-
|
760
|
+
|
761
761
|
</span>
|
762
762
|
<time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
|
763
763
|
</div>
|
@@ -881,8 +881,8 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
881
881
|
<hr />
|
882
882
|
|
883
883
|
<SubNav color='darker'>
|
884
|
-
<Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right'
|
885
|
-
<button
|
884
|
+
<Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right'>
|
885
|
+
<button
|
886
886
|
className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
|
887
887
|
onClick={this.toggleExpand}
|
888
888
|
>
|
@@ -911,11 +911,11 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
911
911
|
</ButtonGroup>
|
912
912
|
</ButtonGroup>
|
913
913
|
</SubNav>
|
914
|
-
|
914
|
+
|
915
915
|
<hr />
|
916
916
|
|
917
917
|
<div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
|
918
|
-
|
918
|
+
|
919
919
|
<IllustrationButton text='Headlines' onClick={()=> false}>
|
920
920
|
<SvgIconIllustration illustration='headlines' />
|
921
921
|
</IllustrationButton>
|
@@ -997,16 +997,16 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
997
997
|
</span>
|
998
998
|
<Icon name='chevron-down-thin' />
|
999
999
|
</button> */}
|
1000
|
-
|
1000
|
+
|
1001
1001
|
<hr />
|
1002
1002
|
|
1003
1003
|
<Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
|
1004
1004
|
<span></span>
|
1005
|
-
|
1006
|
-
|
1005
|
+
|
1006
|
+
|
1007
1007
|
{/* Event Saving modals */}
|
1008
1008
|
{/* Event Only (This one existed Before) */}
|
1009
|
-
<Modal
|
1009
|
+
<Modal
|
1010
1010
|
headerTemplate="Save Event"
|
1011
1011
|
visible={this.state.modalSaveEvent}
|
1012
1012
|
contentPadding='medium'
|
@@ -1056,7 +1056,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
1056
1056
|
</Modal>
|
1057
1057
|
|
1058
1058
|
{/* Event and Planning */}
|
1059
|
-
<Modal
|
1059
|
+
<Modal
|
1060
1060
|
headerTemplate="Save Event"
|
1061
1061
|
visible={this.state.modalSaveEvent2}
|
1062
1062
|
contentPadding='medium'
|
@@ -1154,7 +1154,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
1154
1154
|
</Modal>
|
1155
1155
|
|
1156
1156
|
{/* Planning only */}
|
1157
|
-
<Modal
|
1157
|
+
<Modal
|
1158
1158
|
headerTemplate="Save Event"
|
1159
1159
|
visible={this.state.modalSaveEvent3}
|
1160
1160
|
contentPadding='medium'
|
@@ -1373,7 +1373,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
1373
1373
|
|
1374
1374
|
<img
|
1375
1375
|
src="/path/toimage"
|
1376
|
-
alt="my image"
|
1376
|
+
alt="my image"
|
1377
1377
|
onError={({ currentTarget }) => {
|
1378
1378
|
currentTarget.onerror = null; // prevents looping
|
1379
1379
|
currentTarget.src="/illustration--playground.svg";
|
@@ -1417,7 +1417,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
1417
1417
|
labelHidden={true}
|
1418
1418
|
type='text'
|
1419
1419
|
/>
|
1420
|
-
|
1420
|
+
|
1421
1421
|
<hr />
|
1422
1422
|
|
1423
1423
|
<div className='form__group-new'>
|
@@ -1776,7 +1776,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
1776
1776
|
</div>
|
1777
1777
|
|
1778
1778
|
<div className='table-list__add-bar-container'>
|
1779
|
-
<Tooltip text='Add item' flow='top'
|
1779
|
+
<Tooltip text='Add item' flow='top'>
|
1780
1780
|
<div className='table-list__add-bar'>
|
1781
1781
|
<Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
1782
1782
|
</div>
|
@@ -1804,7 +1804,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
1804
1804
|
</div>
|
1805
1805
|
|
1806
1806
|
<div className='table-list__add-bar-container'>
|
1807
|
-
<Tooltip text='Add item' flow='top'
|
1807
|
+
<Tooltip text='Add item' flow='top'>
|
1808
1808
|
<div className='table-list__add-bar'>
|
1809
1809
|
<Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
1810
1810
|
</div>
|
@@ -1833,7 +1833,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
1833
1833
|
</div>
|
1834
1834
|
|
1835
1835
|
<div className='table-list__add-bar-container'>
|
1836
|
-
<Tooltip text='Add item' flow='top'
|
1836
|
+
<Tooltip text='Add item' flow='top'>
|
1837
1837
|
<div className='table-list__add-bar'>
|
1838
1838
|
<Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
1839
1839
|
</div>
|
@@ -1861,7 +1861,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
1861
1861
|
<hr />
|
1862
1862
|
|
1863
1863
|
<Checkbox label={{text: 'The label is hidden here', hidden: true}} onChange={(value) => console.log('value changed', value)} />
|
1864
|
-
|
1864
|
+
|
1865
1865
|
<hr />
|
1866
1866
|
|
1867
1867
|
<div className="sd-check-button__group sd-check-button__group--start">
|
@@ -1974,9 +1974,9 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
1974
1974
|
</ul>
|
1975
1975
|
</div>
|
1976
1976
|
<div className="sd-thumb-carousel__description">
|
1977
|
-
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.
|
1978
|
-
Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.
|
1979
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis
|
1977
|
+
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.
|
1978
|
+
Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.
|
1979
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis
|
1980
1980
|
parturient montes, nascetur ridiculus mus.
|
1981
1981
|
</div>
|
1982
1982
|
</div>
|
@@ -11646,7 +11646,7 @@
|
|
11646
11646
|
.pi-spinner:before {
|
11647
11647
|
content: "\e926";
|
11648
11648
|
}
|
11649
|
-
@charset "UTF-8";
|
11649
|
+
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}@charset "UTF-8";
|
11650
11650
|
:root {
|
11651
11651
|
--base-increment: 0.8rem;
|
11652
11652
|
--space--0: 0;
|