superdesk-ui-framework 3.0.74 → 3.0.75
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/styles/_simple-list.scss +13 -1
- package/app/styles/components/_list-item.scss +4 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +14 -1
- package/app/styles/form-elements/_inputs.scss +53 -11
- package/app-typescript/components/FormLabel.tsx +1 -1
- package/app-typescript/components/Lists/SimpleList.tsx +3 -0
- package/app-typescript/components/Select.tsx +13 -11
- package/dist/examples.bundle.js +160 -3
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +284 -1
- package/dist/superdesk-ui.bundle.css +68 -13
- package/dist/superdesk-ui.bundle.js +4 -2
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +284 -1
- package/package.json +1 -1
- package/react/components/FormLabel.js +1 -1
- package/react/components/Lists/SimpleList.d.ts +1 -0
- package/react/components/Lists/SimpleList.js +1 -0
- package/react/components/Select.js +2 -1
@@ -12,13 +12,25 @@ $simple-list-border-color: $neutral-border-color;
|
|
12
12
|
display: flex;
|
13
13
|
flex-direction: row;
|
14
14
|
align-items: center;
|
15
|
-
gap:
|
15
|
+
gap: var(--space--1);
|
16
16
|
color: var(--color-text);
|
17
17
|
|
18
18
|
[class^="icon-"], [class*=" icon-"] {
|
19
19
|
flex-grow: 0;
|
20
20
|
flex-shrink: 0;
|
21
21
|
}
|
22
|
+
&.simple-list__item--gap-none {
|
23
|
+
gap: 0;
|
24
|
+
}
|
25
|
+
&.simple-list__item--gap-small {
|
26
|
+
gap: var(--space-0-5);
|
27
|
+
}
|
28
|
+
&.simple-list__item--gap-medium {
|
29
|
+
gap: var(--space-1);
|
30
|
+
}
|
31
|
+
&.simple-list__item--gap-large {
|
32
|
+
gap: var(--space-1-5);
|
33
|
+
}
|
22
34
|
}
|
23
35
|
|
24
36
|
.simple-list__item--stacked {
|
@@ -11,6 +11,9 @@
|
|
11
11
|
--space--3: calc(3 * var(--base-increment)); // 24px;
|
12
12
|
--space--4: calc(4 * var(--base-increment)); // 32px;
|
13
13
|
--space--5: calc(5 * var(--base-increment)); // 40px;
|
14
|
+
--space--6: calc(6 * var(--base-increment)); // 48px;
|
15
|
+
--space--7: calc(7 * var(--base-increment)); // 56px;
|
16
|
+
--space--8: calc(8 * var(--base-increment)); // 64px;
|
14
17
|
|
15
18
|
--gap--none: 0; // 0px
|
16
19
|
--gap--x-small: 0.4rem; // 4px
|
@@ -50,6 +53,11 @@
|
|
50
53
|
|
51
54
|
// TEXT SIZE
|
52
55
|
--text-size--base: 1rem;
|
56
|
+
--text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
|
57
|
+
--text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
|
58
|
+
--text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;
|
59
|
+
--text-size-large: calc(var(--text-size--base) * 2); // 20px;
|
60
|
+
|
53
61
|
|
54
62
|
// SHADOW
|
55
63
|
--sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
@@ -57,15 +65,20 @@
|
|
57
65
|
--sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
58
66
|
--sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.2), 0 6px 16px hsla(0, 0%, 0%, 0.3), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
59
67
|
|
60
|
-
|
61
68
|
// DROP-SHADOW Filter
|
62
69
|
--sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
|
63
70
|
--sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
64
71
|
--sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
65
72
|
--sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
66
73
|
|
74
|
+
// FORM ELEMENTS
|
75
|
+
// Size
|
76
|
+
--form-element-height-small: var(--space--3);
|
77
|
+
--form-element-height-medium: var(--space--4);
|
78
|
+
--form-element-height-large: var(--space--5);
|
67
79
|
}
|
68
80
|
|
81
|
+
|
69
82
|
:root,
|
70
83
|
[data-theme="light-ui"] {
|
71
84
|
--sd-shadow-outline: hsla(0, 0%, 0%, 0);
|
@@ -704,7 +704,7 @@
|
|
704
704
|
@include Line-input-base;
|
705
705
|
display: block;
|
706
706
|
position: relative;
|
707
|
-
padding-inline-end:
|
707
|
+
padding-inline-end: var(--space--3);
|
708
708
|
min-width: 5rem;
|
709
709
|
cursor: pointer;
|
710
710
|
|
@@ -804,23 +804,30 @@
|
|
804
804
|
&.sd-input--is-select {
|
805
805
|
&::after {
|
806
806
|
position: relative;
|
807
|
-
|
807
|
+
font-family: 'sd_icons';
|
808
|
+
content: "\e64b";
|
808
809
|
grid-row: 2/3;
|
809
810
|
grid-column: 2/4;
|
811
|
+
--icon-base-size: 14px !important;
|
812
|
+
width: var(--icon-base-size);
|
813
|
+
height: var(--icon-base-size);
|
814
|
+
line-height: var(--icon-base-size);
|
815
|
+
font-size: var(--icon-base-size);
|
816
|
+
speak: none;
|
817
|
+
font-style: normal;
|
818
|
+
font-weight: normal;
|
819
|
+
font-variant: normal;
|
820
|
+
text-transform: none;
|
821
|
+
color: var(--color-icon-default);
|
822
|
+
-webkit-font-smoothing: antialiased;
|
810
823
|
align-self: center;
|
811
824
|
justify-self: flex-end;
|
812
825
|
display: inline-block;
|
813
|
-
|
814
|
-
height: 0;
|
815
|
-
margin-inline-end: 1rem;
|
816
|
-
vertical-align: middle;
|
817
|
-
border-inline-start: 0.4rem solid transparent;
|
818
|
-
border-inline-end: 0.4rem solid transparent;
|
819
|
-
border-block-start: 0.4rem solid var(--color-text);
|
826
|
+
margin-inline-end: var(--space--1);
|
820
827
|
pointer-events: none;
|
821
|
-
opacity: 0.4;
|
822
|
-
content: "";
|
828
|
+
opacity: 0.4;
|
823
829
|
z-index: 0;
|
830
|
+
transition: opacity 0.2s ease;
|
824
831
|
}
|
825
832
|
|
826
833
|
&:hover {
|
@@ -829,6 +836,41 @@
|
|
829
836
|
}
|
830
837
|
}
|
831
838
|
}
|
839
|
+
.sd-input__select-caret-wrapper {
|
840
|
+
position: relative;
|
841
|
+
display: block;
|
842
|
+
&::after {
|
843
|
+
--icon-base-size: 14px !important;
|
844
|
+
font-family: 'sd_icons';
|
845
|
+
content: "\e64b";
|
846
|
+
position: absolute;
|
847
|
+
inset-block-start: 10px;
|
848
|
+
inset-inline-end: 0;
|
849
|
+
width: var(--icon-base-size);
|
850
|
+
height: var(--icon-base-size);
|
851
|
+
line-height: var(--icon-base-size);
|
852
|
+
font-size: var(--icon-base-size);
|
853
|
+
speak: none;
|
854
|
+
font-style: normal;
|
855
|
+
font-weight: normal;
|
856
|
+
font-variant: normal;
|
857
|
+
text-transform: none;
|
858
|
+
color: var(--color-text);
|
859
|
+
-webkit-font-smoothing: antialiased;
|
860
|
+
margin-inline-end: var(--space--1);
|
861
|
+
pointer-events: none;
|
862
|
+
opacity: 0.6;
|
863
|
+
z-index: 0;
|
864
|
+
transition: opacity 0.2s ease;
|
865
|
+
}
|
866
|
+
|
867
|
+
&:hover {
|
868
|
+
&::after {
|
869
|
+
opacity: 1;
|
870
|
+
}
|
871
|
+
}
|
872
|
+
}
|
873
|
+
|
832
874
|
|
833
875
|
.sd-input__message-box {
|
834
876
|
grid-row: 3/4;
|
@@ -13,6 +13,7 @@ interface IProps {
|
|
13
13
|
interface IPropsItem {
|
14
14
|
stacked?: boolean;
|
15
15
|
justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between';
|
16
|
+
gap?: 'none' | 'small' | 'medium' | 'large';
|
16
17
|
id?: string;
|
17
18
|
}
|
18
19
|
|
@@ -23,6 +24,8 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
|
|
23
24
|
'simple-list__item--justify-flex-start': this.props.justify === undefined,
|
24
25
|
[`simple-list__item--justify-${this.props.justify}`]:
|
25
26
|
this.props.justify || this.props.justify !== undefined,
|
27
|
+
[`simple-list__item--gap-${this.props.gap}`]:
|
28
|
+
this.props.gap || this.props.gap !== undefined,
|
26
29
|
});
|
27
30
|
return (
|
28
31
|
<li className={classes} id={this.props.id || undefined}>
|
@@ -44,17 +44,19 @@ class Select extends React.Component<ISelect> {
|
|
44
44
|
htmlId={this.htmlId}
|
45
45
|
tabindex={this.props.tabindex}
|
46
46
|
>
|
47
|
-
<
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
47
|
+
<span className='sd-input__select-caret-wrapper'>
|
48
|
+
<select
|
49
|
+
className='sd-input__select'
|
50
|
+
id={this.htmlId}
|
51
|
+
value={this.props.value}
|
52
|
+
aria-describedby={this.htmlId}
|
53
|
+
tabIndex={this.props.tabindex}
|
54
|
+
onChange={this.handleChange}
|
55
|
+
disabled={this.props.disabled || this.props.readonly}
|
56
|
+
>
|
57
|
+
{this.props.children}
|
58
|
+
</select>
|
59
|
+
</span>
|
58
60
|
</InputWrapper>
|
59
61
|
);
|
60
62
|
}
|
package/dist/examples.bundle.js
CHANGED
@@ -67051,7 +67051,8 @@ var Select = /** @class */ (function (_super) {
|
|
67051
67051
|
React.createElement("span", null, this.props.value)));
|
67052
67052
|
}
|
67053
67053
|
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
67054
|
-
React.createElement("
|
67054
|
+
React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
|
67055
|
+
React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children))));
|
67055
67056
|
};
|
67056
67057
|
return Select;
|
67057
67058
|
}(React.Component));
|
@@ -78293,7 +78294,7 @@ var FormLabel = /** @class */ (function (_super) {
|
|
78293
78294
|
var classes = (0, classnames_1.default)('form-label form-label--block', {
|
78294
78295
|
'form-label--light': this.props.style === 'light',
|
78295
78296
|
});
|
78296
|
-
return (React.createElement("
|
78297
|
+
return (React.createElement("label", { className: classes }, this.props.text));
|
78297
78298
|
};
|
78298
78299
|
return FormLabel;
|
78299
78300
|
}(React.PureComponent));
|
@@ -105627,6 +105628,7 @@ var SimpleListItem = /** @class */ (function (_super) {
|
|
105627
105628
|
'simple-list__item--justify-flex-start': this.props.justify === undefined
|
105628
105629
|
},
|
105629
105630
|
_a["simple-list__item--justify-".concat(this.props.justify)] = this.props.justify || this.props.justify !== undefined,
|
105631
|
+
_a["simple-list__item--gap-".concat(this.props.gap)] = this.props.gap || this.props.gap !== undefined,
|
105630
105632
|
_a));
|
105631
105633
|
return (React.createElement("li", { className: classes, id: this.props.id || undefined }, this.props.children));
|
105632
105634
|
};
|
@@ -139842,7 +139844,12 @@ var TestGround = /** @class */ (function (_super) {
|
|
139842
139844
|
date: new Date('2022-01-08'),
|
139843
139845
|
time: '16:50',
|
139844
139846
|
modalPlanningTemplates: false,
|
139847
|
+
modalSaveEvent: false,
|
139848
|
+
modalSaveEvent2: false,
|
139849
|
+
modalSaveEvent3: false,
|
139845
139850
|
treeSelectValue: [],
|
139851
|
+
value: undefined,
|
139852
|
+
valueS2: undefined,
|
139846
139853
|
};
|
139847
139854
|
return _this;
|
139848
139855
|
}
|
@@ -139856,10 +139863,160 @@ var TestGround = /** @class */ (function (_super) {
|
|
139856
139863
|
};
|
139857
139864
|
TestGround.prototype.render = function () {
|
139858
139865
|
var _this = this;
|
139866
|
+
var avatars = [
|
139867
|
+
{
|
139868
|
+
imageUrl: null,
|
139869
|
+
initials: "VS",
|
139870
|
+
displayName: 'Vladimir Stefanovic',
|
139871
|
+
icon: { name: 'text', color: 'var(--sd-colour-highlight)' },
|
139872
|
+
},
|
139873
|
+
{
|
139874
|
+
imageUrl: null,
|
139875
|
+
initials: "JL",
|
139876
|
+
displayName: 'Jeffrey Lebowski',
|
139877
|
+
icon: { name: 'photo', color: 'var(--sd-colour-highlight)' }
|
139878
|
+
},
|
139879
|
+
{
|
139880
|
+
imageUrl: null,
|
139881
|
+
initials: "WS",
|
139882
|
+
displayName: 'Walter Sobchak',
|
139883
|
+
icon: { name: 'video', color: 'var(--sd-colour-highlight)' }
|
139884
|
+
},
|
139885
|
+
{
|
139886
|
+
imageUrl: null,
|
139887
|
+
initials: "ML",
|
139888
|
+
displayName: 'Maude Lebowski',
|
139889
|
+
icon: { name: 'file', color: 'var(--sd-colour-highlight)' }
|
139890
|
+
},
|
139891
|
+
];
|
139892
|
+
var modalSaveEventFooterOne = (React.createElement(index_1.ButtonGroup, { align: "end" },
|
139893
|
+
React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent: false }); } }),
|
139894
|
+
React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent: false }); } })));
|
139895
|
+
var modalSaveEventFooterTwo = (React.createElement(index_1.ButtonGroup, { align: "end" },
|
139896
|
+
React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent2: false }); } }),
|
139897
|
+
React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent2: false }); } })));
|
139898
|
+
var modalSaveEventFooterThree = (React.createElement(index_1.ButtonGroup, { align: "end" },
|
139899
|
+
React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent3: false }); } }),
|
139900
|
+
React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent3: false }); } })));
|
139859
139901
|
return (React.createElement(Components.Layout, { header: 'Testing Ground' },
|
139860
139902
|
React.createElement(Components.LayoutContainer, null,
|
139861
139903
|
React.createElement(Components.MainPanel, null,
|
139904
|
+
React.createElement(index_1.ButtonGroup, null,
|
139905
|
+
React.createElement(index_1.Button, { text: "Save Event Modal (Event only)", onClick: function () { return _this.setState({ modalSaveEvent: true }); } }),
|
139906
|
+
React.createElement(index_1.Button, { text: "Save Event Modal (Event & Planning)", onClick: function () { return _this.setState({ modalSaveEvent2: true }); } }),
|
139907
|
+
React.createElement(index_1.Button, { text: "Save Event Modal (Planning only)", onClick: function () { return _this.setState({ modalSaveEvent3: true }); } })),
|
139908
|
+
React.createElement("hr", null),
|
139909
|
+
React.createElement("hr", null),
|
139862
139910
|
React.createElement(index_1.Button, { text: "Planning Templates", onClick: function () { return _this.setState({ modalPlanningTemplates: true }); } }),
|
139911
|
+
React.createElement("span", null),
|
139912
|
+
React.createElement(index_1.Modal, { headerTemplate: "Save Event", zIndex: 10000, visible: this.state.modalSaveEvent, contentPadding: 'medium', contentBg: 'medium', size: 'medium', footerTemplate: modalSaveEventFooterOne, onHide: function () { _this.setState({ modalSaveEvent: false }); } },
|
139913
|
+
React.createElement("div", null,
|
139914
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Name' }),
|
139915
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Australian Open 2024")),
|
139916
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139917
|
+
React.createElement("div", null,
|
139918
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Current Date' }),
|
139919
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "05.02.2024 @ 10:00")),
|
139920
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139921
|
+
React.createElement("div", null,
|
139922
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Current Repeat Summary' }),
|
139923
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Every 1 day(s) until CET 28 Feb 2024")),
|
139924
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139925
|
+
React.createElement("div", null,
|
139926
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'No. of events' }),
|
139927
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "1")),
|
139928
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139929
|
+
React.createElement(index_1.Text, { size: 'small', className: 'mb-1 mt-0-5' },
|
139930
|
+
React.createElement("strong", null, "This is a recurring event"),
|
139931
|
+
". Update all recurring events or just this one?"),
|
139932
|
+
React.createElement(index_1.Select, { value: this.state.value, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (value) {
|
139933
|
+
_this.setState({
|
139934
|
+
value: value,
|
139935
|
+
});
|
139936
|
+
} },
|
139937
|
+
React.createElement(index_1.Option, null, "This event only"),
|
139938
|
+
React.createElement(index_1.Option, null, "This and all future events"),
|
139939
|
+
React.createElement(index_1.Option, null, "All events"))),
|
139940
|
+
React.createElement(index_1.Modal, { headerTemplate: "Save Event", zIndex: 10000, visible: this.state.modalSaveEvent2, contentPadding: 'medium', contentBg: 'medium', size: 'medium', footerTemplate: modalSaveEventFooterTwo, onHide: function () { _this.setState({ modalSaveEvent2: false }); } },
|
139941
|
+
React.createElement("div", null,
|
139942
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Name' }),
|
139943
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Australian Open 2024")),
|
139944
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139945
|
+
React.createElement("div", null,
|
139946
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Current Date' }),
|
139947
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "05.02.2024 @ 10:00")),
|
139948
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139949
|
+
React.createElement("div", null,
|
139950
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Current Repeat Summary' }),
|
139951
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Every 1 day(s) until CET 28 Feb 2024")),
|
139952
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139953
|
+
React.createElement("div", null,
|
139954
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'No. of events' }),
|
139955
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "1")),
|
139956
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139957
|
+
React.createElement(index_1.Text, { size: 'small', className: 'mb-1 mt-0-5' },
|
139958
|
+
React.createElement("strong", null, "This is a recurring event"),
|
139959
|
+
". Update all recurring events or just this one?"),
|
139960
|
+
React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (value) {
|
139961
|
+
_this.setState({
|
139962
|
+
value: value,
|
139963
|
+
});
|
139964
|
+
} },
|
139965
|
+
React.createElement(index_1.Option, null, "This event only"),
|
139966
|
+
React.createElement(index_1.Option, null, "This and all future events"),
|
139967
|
+
React.createElement(index_1.Option, null, "All events")),
|
139968
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'small' }),
|
139969
|
+
React.createElement(index_1.Heading, { type: 'h4', className: 'mb-1' }, "Related Planning(s)"),
|
139970
|
+
React.createElement("div", { className: 'sd-list-item-group--space-between-items' },
|
139971
|
+
React.createElement("div", { role: "listitem", className: "sd-list-item sd-shadow--z1 mb-1" },
|
139972
|
+
React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" }),
|
139973
|
+
React.createElement("div", { className: "sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border" },
|
139974
|
+
React.createElement("div", { className: "sd-list-item__row" },
|
139975
|
+
React.createElement("i", { role: "presentation", className: "icon-calendar icon--light-blue" }),
|
139976
|
+
React.createElement("span", { className: "sd-list-item__slugline" }, "Planning Slug"),
|
139977
|
+
React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow" },
|
139978
|
+
React.createElement("span", { className: "sd-list-item__text-strong" }, "Cras justo odio, dapibus ac facilisis in."))),
|
139979
|
+
React.createElement("div", { className: "sd-list-item__row sd-list-item__row--overflow-visible me-1" },
|
139980
|
+
React.createElement(index_1.Label, { text: 'draft', style: 'translucent' }),
|
139981
|
+
React.createElement("span", { className: "sd-margin-s--auto" },
|
139982
|
+
React.createElement(index_1.AvatarGroup, { size: "x-small", items: avatars })))))),
|
139983
|
+
React.createElement(index_1.Text, { size: 'small', className: 'mb-1' },
|
139984
|
+
React.createElement("strong", null, "You made changes to a planning item that is a part of a recurring event"),
|
139985
|
+
". Update all recurring planning or just this one?"),
|
139986
|
+
React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (valueS2) {
|
139987
|
+
_this.setState({
|
139988
|
+
value: valueS2,
|
139989
|
+
});
|
139990
|
+
} },
|
139991
|
+
React.createElement(index_1.Option, null, "This planning only"),
|
139992
|
+
React.createElement(index_1.Option, null, "This and all future plannings"),
|
139993
|
+
React.createElement(index_1.Option, null, "All plannings"))),
|
139994
|
+
React.createElement(index_1.Modal, { headerTemplate: "Save Event", zIndex: 10000, visible: this.state.modalSaveEvent3, contentPadding: 'medium', contentBg: 'medium', size: 'medium', footerTemplate: modalSaveEventFooterThree, onHide: function () { _this.setState({ modalSaveEvent3: false }); } },
|
139995
|
+
React.createElement(index_1.Heading, { type: 'h4', className: 'mb-1' }, "Related Planning(s)"),
|
139996
|
+
React.createElement("div", { className: 'sd-list-item-group--space-between-items' },
|
139997
|
+
React.createElement("div", { role: "listitem", className: "sd-list-item sd-shadow--z1 mb-1" },
|
139998
|
+
React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" }),
|
139999
|
+
React.createElement("div", { className: "sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border" },
|
140000
|
+
React.createElement("div", { className: "sd-list-item__row" },
|
140001
|
+
React.createElement("i", { role: "presentation", className: "icon-calendar icon--light-blue" }),
|
140002
|
+
React.createElement("span", { className: "sd-list-item__slugline" }, "Planning Slug"),
|
140003
|
+
React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow" },
|
140004
|
+
React.createElement("span", { className: "sd-list-item__text-strong" }, "Cras justo odio, dapibus ac facilisis in."))),
|
140005
|
+
React.createElement("div", { className: "sd-list-item__row sd-list-item__row--overflow-visible me-1" },
|
140006
|
+
React.createElement(index_1.Label, { text: 'draft', style: 'translucent' }),
|
140007
|
+
React.createElement("span", { className: "sd-margin-s--auto" },
|
140008
|
+
React.createElement(index_1.AvatarGroup, { size: "x-small", items: avatars })))))),
|
140009
|
+
React.createElement(index_1.Text, { size: 'small', className: 'mb-1' },
|
140010
|
+
React.createElement("strong", null, "You made changes to a planning item that is a part of a recurring event"),
|
140011
|
+
". Update all recurring planning or just this one?"),
|
140012
|
+
React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (valueS2) {
|
140013
|
+
_this.setState({
|
140014
|
+
value: valueS2,
|
140015
|
+
});
|
140016
|
+
} },
|
140017
|
+
React.createElement(index_1.Option, null, "This planning only"),
|
140018
|
+
React.createElement(index_1.Option, null, "This and all future plannings"),
|
140019
|
+
React.createElement(index_1.Option, null, "All plannings"))),
|
139863
140020
|
React.createElement(index_1.Modal, { headerTemplate: "Planning templates", zIndex: 10000, visible: this.state.modalPlanningTemplates, contentPadding: 'medium', contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalPlanningTemplates: false }); } },
|
139864
140021
|
React.createElement("div", { className: 'modal__sticky-header' },
|
139865
140022
|
React.createElement(index_1.SearchBar, { placeholder: 'Search templates', boxed: true },
|
@@ -144267,7 +144424,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
|
|
144267
144424
|
/* 693 */
|
144268
144425
|
/***/ (function(module, exports) {
|
144269
144426
|
|
144270
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
144427
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.75","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
|
144271
144428
|
|
144272
144429
|
/***/ }),
|
144273
144430
|
/* 694 */
|