superdesk-ui-framework 3.0.74 → 3.0.76
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/img/icon_illustrations/IconIllustration__headlines.svg +25 -0
- package/app/img/icon_illustrations/IconIllustration__keywords.svg +46 -0
- package/app/img/icon_illustrations/IconIllustration__optimise.svg +38 -0
- package/app/img/icon_illustrations/IconIllustration__summary.svg +27 -0
- package/app/img/icon_illustrations/IconIllustration__translate.svg +12 -0
- package/app/styles/_buttons.scss +47 -0
- package/app/styles/_simple-list.scss +13 -1
- package/app/styles/components/_list-item.scss +4 -0
- package/app/styles/components/_sd-grid-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/IllustrationButton.tsx +29 -0
- package/app-typescript/components/Lists/SimpleList.tsx +3 -0
- package/app-typescript/components/Select.tsx +13 -11
- package/app-typescript/components/SvgIconIllustration.tsx +191 -0
- package/app-typescript/index.ts +2 -0
- package/dist/examples.bundle.js +1143 -543
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +462 -2
- package/dist/react/IllustrationButton.tsx +89 -0
- package/dist/react/Index.tsx +6 -1
- package/dist/superdesk-ui.bundle.css +110 -14
- package/dist/superdesk-ui.bundle.js +588 -306
- package/dist/vendor.bundle.js +13 -13
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +462 -2
- package/examples/pages/react/IllustrationButton.tsx +89 -0
- package/examples/pages/react/Index.tsx +6 -1
- package/package.json +1 -4
- package/react/components/FormLabel.js +1 -1
- package/react/components/IllustrationButton.d.ts +11 -0
- package/react/components/IllustrationButton.js +62 -0
- package/react/components/Lists/SimpleList.d.ts +1 -0
- package/react/components/Lists/SimpleList.js +1 -0
- package/react/components/Select.js +2 -1
- package/react/components/SvgIconIllustration.d.ts +9 -0
- package/react/components/SvgIconIllustration.js +199 -0
- package/react/index.d.ts +2 -0
- package/react/index.js +6 -2
package/dist/vendor.bundle.js
CHANGED
|
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
|
70
70
|
/******/ __webpack_require__.p = "";
|
|
71
71
|
/******/
|
|
72
72
|
/******/ // Load entry module and return exports
|
|
73
|
-
/******/ return __webpack_require__(__webpack_require__.s =
|
|
73
|
+
/******/ return __webpack_require__(__webpack_require__.s = 576);
|
|
74
74
|
/******/ })
|
|
75
75
|
/************************************************************************/
|
|
76
76
|
/******/ ({
|
|
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
|
|
|
28246
28246
|
|
|
28247
28247
|
/***/ }),
|
|
28248
28248
|
|
|
28249
|
-
/***/
|
|
28249
|
+
/***/ 576:
|
|
28250
28250
|
/***/ (function(module, exports, __webpack_require__) {
|
|
28251
28251
|
|
|
28252
28252
|
"use strict";
|
|
@@ -28256,19 +28256,19 @@ __webpack_require__(21);
|
|
|
28256
28256
|
|
|
28257
28257
|
__webpack_require__(44);
|
|
28258
28258
|
|
|
28259
|
-
__webpack_require__(575);
|
|
28260
|
-
|
|
28261
28259
|
__webpack_require__(577);
|
|
28262
28260
|
|
|
28263
28261
|
__webpack_require__(579);
|
|
28264
28262
|
|
|
28263
|
+
__webpack_require__(581);
|
|
28264
|
+
|
|
28265
28265
|
__webpack_require__(0);
|
|
28266
28266
|
|
|
28267
28267
|
__webpack_require__(8);
|
|
28268
28268
|
|
|
28269
28269
|
/***/ }),
|
|
28270
28270
|
|
|
28271
|
-
/***/
|
|
28271
|
+
/***/ 577:
|
|
28272
28272
|
/***/ (function(module, exports, __webpack_require__) {
|
|
28273
28273
|
|
|
28274
28274
|
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
|
|
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
28292
28292
|
if ( true ) {
|
|
28293
28293
|
|
|
28294
28294
|
// AMD. Register as an anonymous module.
|
|
28295
|
-
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(
|
|
28295
|
+
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(578) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
|
|
28296
28296
|
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
|
|
28297
28297
|
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
|
|
28298
28298
|
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
|
@@ -29030,7 +29030,7 @@ return $.widget;
|
|
|
29030
29030
|
|
|
29031
29031
|
/***/ }),
|
|
29032
29032
|
|
|
29033
|
-
/***/
|
|
29033
|
+
/***/ 578:
|
|
29034
29034
|
/***/ (function(module, exports, __webpack_require__) {
|
|
29035
29035
|
|
|
29036
29036
|
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
|
|
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
|
|
|
29060
29060
|
|
|
29061
29061
|
/***/ }),
|
|
29062
29062
|
|
|
29063
|
-
/***/
|
|
29063
|
+
/***/ 579:
|
|
29064
29064
|
/***/ (function(module, exports, __webpack_require__) {
|
|
29065
29065
|
|
|
29066
|
-
__webpack_require__(
|
|
29066
|
+
__webpack_require__(580);
|
|
29067
29067
|
module.exports = angular;
|
|
29068
29068
|
|
|
29069
29069
|
|
|
29070
29070
|
/***/ }),
|
|
29071
29071
|
|
|
29072
|
-
/***/
|
|
29072
|
+
/***/ 580:
|
|
29073
29073
|
/***/ (function(module, exports, __webpack_require__) {
|
|
29074
29074
|
|
|
29075
29075
|
/* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
|
|
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
|
|
|
65676
65676
|
|
|
65677
65677
|
/***/ }),
|
|
65678
65678
|
|
|
65679
|
-
/***/
|
|
65679
|
+
/***/ 581:
|
|
65680
65680
|
/***/ (function(module, exports, __webpack_require__) {
|
|
65681
65681
|
|
|
65682
|
-
__webpack_require__(
|
|
65682
|
+
__webpack_require__(582);
|
|
65683
65683
|
module.exports = 'ngAnimate';
|
|
65684
65684
|
|
|
65685
65685
|
|
|
65686
65686
|
/***/ }),
|
|
65687
65687
|
|
|
65688
|
-
/***/
|
|
65688
|
+
/***/ 582:
|
|
65689
65689
|
/***/ (function(module, exports) {
|
|
65690
65690
|
|
|
65691
65691
|
/**
|
|
@@ -872,7 +872,7 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
|
872
872
|
size='x-large' onHide={() => {this.setState({modalManageShow: false})}}
|
|
873
873
|
>
|
|
874
874
|
<Layout.LayoutContainer>
|
|
875
|
-
|
|
875
|
+
<Layout.HeaderPanel>
|
|
876
876
|
<SubNav zIndex={2}>
|
|
877
877
|
<SearchBar placeholder='Search shows'></SearchBar>
|
|
878
878
|
<ButtonGroup align='end' spaces='no-space'>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as Components from './components/Index';
|
|
3
|
-
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
|
|
3
|
+
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton} from '../../../../app-typescript/index';
|
|
4
|
+
import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
|
|
4
5
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
|
5
6
|
|
|
6
7
|
interface IProps {
|
|
@@ -23,7 +24,14 @@ interface IState {
|
|
|
23
24
|
date: any;
|
|
24
25
|
time: string;
|
|
25
26
|
modalPlanningTemplates: boolean;
|
|
27
|
+
modalSaveEvent: boolean;
|
|
28
|
+
modalSaveEvent2: boolean;
|
|
29
|
+
modalSaveEvent3: boolean;
|
|
30
|
+
modalSaveEvent4: boolean;
|
|
26
31
|
treeSelectValue: any;
|
|
32
|
+
value: any;
|
|
33
|
+
valueS2: any;
|
|
34
|
+
thisTheme: string;
|
|
27
35
|
}
|
|
28
36
|
|
|
29
37
|
let options2 = [
|
|
@@ -57,7 +65,14 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
57
65
|
date: new Date('2022-01-08'),
|
|
58
66
|
time: '16:50',
|
|
59
67
|
modalPlanningTemplates: false,
|
|
68
|
+
modalSaveEvent: false,
|
|
69
|
+
modalSaveEvent2: false,
|
|
70
|
+
modalSaveEvent3: false,
|
|
71
|
+
modalSaveEvent4: false,
|
|
60
72
|
treeSelectValue: [],
|
|
73
|
+
value: undefined,
|
|
74
|
+
valueS2: undefined,
|
|
75
|
+
thisTheme: 'light-ui',
|
|
61
76
|
}
|
|
62
77
|
}
|
|
63
78
|
|
|
@@ -69,12 +84,457 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
69
84
|
}
|
|
70
85
|
}
|
|
71
86
|
|
|
87
|
+
toggleTheme = () => {
|
|
88
|
+
this.setState( {
|
|
89
|
+
thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
|
|
72
93
|
render() {
|
|
94
|
+
const avatars: Array<IAvatarInGroup> = [
|
|
95
|
+
{
|
|
96
|
+
imageUrl: null,
|
|
97
|
+
initials: "VS",
|
|
98
|
+
displayName: 'Vladimir Stefanovic',
|
|
99
|
+
icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
imageUrl: null,
|
|
103
|
+
initials: "JL",
|
|
104
|
+
displayName: 'Jeffrey Lebowski',
|
|
105
|
+
icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
imageUrl: null,
|
|
109
|
+
initials: "WS",
|
|
110
|
+
displayName: 'Walter Sobchak',
|
|
111
|
+
icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
imageUrl: null,
|
|
115
|
+
initials: "ML",
|
|
116
|
+
displayName: 'Maude Lebowski',
|
|
117
|
+
icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
|
|
118
|
+
},
|
|
119
|
+
];
|
|
120
|
+
|
|
121
|
+
const modalSaveEventFooterOne=(
|
|
122
|
+
<ButtonGroup align="end">
|
|
123
|
+
<Button text='Cancel' onClick={() => this.setState({modalSaveEvent:false})} />
|
|
124
|
+
<Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent:false})} />
|
|
125
|
+
</ButtonGroup>
|
|
126
|
+
);
|
|
127
|
+
const modalSaveEventFooterTwo=(
|
|
128
|
+
<ButtonGroup align="end">
|
|
129
|
+
<Button text='Cancel' onClick={() => this.setState({modalSaveEvent2:false})} />
|
|
130
|
+
<Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent2:false})} />
|
|
131
|
+
</ButtonGroup>
|
|
132
|
+
);
|
|
133
|
+
const modalSaveEventFooterThree=(
|
|
134
|
+
<ButtonGroup align="end">
|
|
135
|
+
<Button text='Cancel' onClick={() => this.setState({modalSaveEvent3:false})} />
|
|
136
|
+
<Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent3:false})} />
|
|
137
|
+
</ButtonGroup>
|
|
138
|
+
);
|
|
73
139
|
return (
|
|
74
|
-
<Components.Layout header='Testing Ground'>
|
|
140
|
+
<Components.Layout header='Testing Ground' theme={this.state.thisTheme}>
|
|
75
141
|
<Components.LayoutContainer>
|
|
76
142
|
<Components.MainPanel>
|
|
143
|
+
|
|
144
|
+
<ButtonGroup align='end'>
|
|
145
|
+
<IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
|
|
146
|
+
</ButtonGroup>
|
|
147
|
+
|
|
148
|
+
<hr />
|
|
149
|
+
<SvgIconIllustration illustration='headlines' />
|
|
150
|
+
<hr />
|
|
151
|
+
|
|
152
|
+
<div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
|
|
153
|
+
|
|
154
|
+
<IllustrationButton text='Headlines' onClick={()=> false}>
|
|
155
|
+
<SvgIconIllustration illustration='headlines' />
|
|
156
|
+
</IllustrationButton>
|
|
157
|
+
|
|
158
|
+
<IllustrationButton text='Keywords' onClick={()=> false}>
|
|
159
|
+
<SvgIconIllustration illustration='keywords' />
|
|
160
|
+
</IllustrationButton>
|
|
161
|
+
|
|
162
|
+
<IllustrationButton text='Optimise' onClick={()=> false}>
|
|
163
|
+
<SvgIconIllustration illustration='optimise' />
|
|
164
|
+
</IllustrationButton>
|
|
165
|
+
|
|
166
|
+
<IllustrationButton text='Summary' onClick={()=> false}>
|
|
167
|
+
<SvgIconIllustration illustration='summary' />
|
|
168
|
+
</IllustrationButton>
|
|
169
|
+
|
|
170
|
+
<IllustrationButton text='Translate' onClick={()=> false}>
|
|
171
|
+
<SvgIconIllustration illustration='translate' />
|
|
172
|
+
</IllustrationButton>
|
|
173
|
+
|
|
174
|
+
{/* <button className='illustration-button illustration-button--headlines'>
|
|
175
|
+
<SvgIconIllustration illustration='headlines' />
|
|
176
|
+
<span className='illustration-button__text-label'>
|
|
177
|
+
Headlines
|
|
178
|
+
</span>
|
|
179
|
+
</button>
|
|
180
|
+
|
|
181
|
+
<button className='illustration-button illustration-button--headlines'>
|
|
182
|
+
<SvgIconIllustration illustration='keywords' />
|
|
183
|
+
<span className='illustration-button__text-label'>
|
|
184
|
+
Keywords
|
|
185
|
+
</span>
|
|
186
|
+
</button>
|
|
187
|
+
|
|
188
|
+
<button className='illustration-button illustration-button--headlines'>
|
|
189
|
+
<SvgIconIllustration illustration='optimise' />
|
|
190
|
+
<span className='illustration-button__text-label'>
|
|
191
|
+
Optimise
|
|
192
|
+
</span>
|
|
193
|
+
</button>
|
|
194
|
+
|
|
195
|
+
<button className='illustration-button illustration-button--headlines'>
|
|
196
|
+
<SvgIconIllustration illustration='summary' />
|
|
197
|
+
<span className='illustration-button__text-label'>
|
|
198
|
+
Summary
|
|
199
|
+
</span>
|
|
200
|
+
</button>
|
|
201
|
+
|
|
202
|
+
<button className='illustration-button illustration-button--headlines'>
|
|
203
|
+
<SvgIconIllustration illustration='translate' />
|
|
204
|
+
<span className='illustration-button__text-label'>
|
|
205
|
+
Translate
|
|
206
|
+
</span>
|
|
207
|
+
</button> */}
|
|
208
|
+
|
|
209
|
+
</div>
|
|
210
|
+
|
|
211
|
+
<hr />
|
|
212
|
+
|
|
213
|
+
<Heading type='h3'>Below is an example structure of the content inside the 'Headlines' AI Assistant section</Heading>
|
|
214
|
+
<Text size="small" weight="light">Note: The surrounding div with inline styles is only there for the purpose of this demo. </Text>
|
|
215
|
+
|
|
216
|
+
<div className='' style={{width:'290px', marginBlockStart:'32px'}}>
|
|
217
|
+
<Container gap="small" direction='column'>
|
|
218
|
+
<Text size="small" weight="medium">
|
|
219
|
+
Praesent commodo cursus magna, vel scelerisque nisl consectetur et aenean eu leo quam ultricies.
|
|
220
|
+
</Text>
|
|
221
|
+
<ButtonGroup>
|
|
222
|
+
<Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
|
|
223
|
+
<IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
|
|
224
|
+
</ButtonGroup>
|
|
225
|
+
</Container>
|
|
226
|
+
|
|
227
|
+
<ContentDivider type="dashed" margin='small' />
|
|
228
|
+
|
|
229
|
+
<Container gap="small" direction='column'>
|
|
230
|
+
<Text size="small" weight="medium">
|
|
231
|
+
Aenean eu leo quam pellentesque ornare sem lacinia quam venenatis vestibulum nullam id dolor id nibh ultricies vehicula elit.
|
|
232
|
+
</Text>
|
|
233
|
+
<ButtonGroup>
|
|
234
|
+
<Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
|
|
235
|
+
<IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
|
|
236
|
+
</ButtonGroup>
|
|
237
|
+
</Container>
|
|
238
|
+
|
|
239
|
+
<ContentDivider type="dashed" margin='small' />
|
|
240
|
+
|
|
241
|
+
<Container gap="small" direction='column'>
|
|
242
|
+
<Text size="small" weight="medium">
|
|
243
|
+
Vestibulum id ligula porta felis euismod semper morbi leo risus, porta ac consectetur ac, vestibulum at eros maecenas faucibus.
|
|
244
|
+
</Text>
|
|
245
|
+
<ButtonGroup>
|
|
246
|
+
<Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
|
|
247
|
+
<IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
|
|
248
|
+
</ButtonGroup>
|
|
249
|
+
</Container>
|
|
250
|
+
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<hr />
|
|
254
|
+
|
|
255
|
+
<ButtonGroup>
|
|
256
|
+
<Button text="Save Event Modal (Event only)" onClick={() => this.setState({modalSaveEvent: true})} />
|
|
257
|
+
<Button text="Save Event Modal (Event & Planning)" onClick={() => this.setState({modalSaveEvent2: true})} />
|
|
258
|
+
<Button text="Save Event Modal (Planning only)" onClick={() => this.setState({modalSaveEvent3: true})} />
|
|
259
|
+
</ButtonGroup>
|
|
260
|
+
|
|
261
|
+
<hr />
|
|
262
|
+
|
|
263
|
+
{/* <button type="button" className="sd-dropdown-button" aria-haspopup="true" aria-expanded="false">
|
|
264
|
+
<span className="sd-dropdown-button__text-block">
|
|
265
|
+
<label className="sd-dropdown-button__text-label">Coverage:</label>
|
|
266
|
+
<span className="sd-dropdown-button__text-value">Events & Coverages</span>
|
|
267
|
+
</span>
|
|
268
|
+
<Icon name='chevron-down-thin' />
|
|
269
|
+
</button> */}
|
|
270
|
+
|
|
271
|
+
<hr />
|
|
272
|
+
|
|
77
273
|
<Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
|
|
274
|
+
<span></span>
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
{/* Event Saving modals */}
|
|
278
|
+
{/* Event Only (This one existed Before) */}
|
|
279
|
+
<Modal
|
|
280
|
+
headerTemplate="Save Event"
|
|
281
|
+
zIndex={10000}
|
|
282
|
+
visible={this.state.modalSaveEvent}
|
|
283
|
+
contentPadding='medium'
|
|
284
|
+
contentBg='medium'
|
|
285
|
+
size='medium'
|
|
286
|
+
footerTemplate={modalSaveEventFooterOne}
|
|
287
|
+
onHide={() => {this.setState({modalSaveEvent: false})}}
|
|
288
|
+
>
|
|
289
|
+
<div>
|
|
290
|
+
<FormLabel text='Name'/>
|
|
291
|
+
<Text size='small' weight='medium'>Australian Open 2024</Text>
|
|
292
|
+
</div>
|
|
293
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
294
|
+
<div>
|
|
295
|
+
<FormLabel text='Current Date'/>
|
|
296
|
+
<Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
|
|
297
|
+
</div>
|
|
298
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
299
|
+
<div>
|
|
300
|
+
<FormLabel text='Current Repeat Summary'/>
|
|
301
|
+
<Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
|
|
302
|
+
</div>
|
|
303
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
304
|
+
<div>
|
|
305
|
+
<FormLabel text='No. of events'/>
|
|
306
|
+
<Text size='small' weight='medium'>1</Text>
|
|
307
|
+
</div>
|
|
308
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
309
|
+
<Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
|
|
310
|
+
<Select
|
|
311
|
+
value={this.state.value}
|
|
312
|
+
label='Update:'
|
|
313
|
+
required={false}
|
|
314
|
+
disabled={false}
|
|
315
|
+
inlineLabel={true}
|
|
316
|
+
labelHidden={true}
|
|
317
|
+
onChange={(value) => {
|
|
318
|
+
this.setState({
|
|
319
|
+
value: value,
|
|
320
|
+
})
|
|
321
|
+
}}
|
|
322
|
+
>
|
|
323
|
+
<Option>This event only</Option>
|
|
324
|
+
<Option>This and all future events</Option>
|
|
325
|
+
<Option>All events</Option>
|
|
326
|
+
</Select>
|
|
327
|
+
</Modal>
|
|
328
|
+
|
|
329
|
+
{/* Event and Planning */}
|
|
330
|
+
<Modal
|
|
331
|
+
headerTemplate="Save Event"
|
|
332
|
+
zIndex={10000}
|
|
333
|
+
visible={this.state.modalSaveEvent2}
|
|
334
|
+
contentPadding='medium'
|
|
335
|
+
contentBg='medium'
|
|
336
|
+
size='medium'
|
|
337
|
+
footerTemplate={modalSaveEventFooterTwo}
|
|
338
|
+
onHide={() => {this.setState({modalSaveEvent2: false})}}
|
|
339
|
+
>
|
|
340
|
+
<div>
|
|
341
|
+
<FormLabel text='Name'/>
|
|
342
|
+
<Text size='small' weight='medium'>Australian Open 2024</Text>
|
|
343
|
+
</div>
|
|
344
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
345
|
+
<div>
|
|
346
|
+
<FormLabel text='Current Date'/>
|
|
347
|
+
<Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
|
|
348
|
+
</div>
|
|
349
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
350
|
+
<div>
|
|
351
|
+
<FormLabel text='Current Repeat Summary'/>
|
|
352
|
+
<Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
|
|
353
|
+
</div>
|
|
354
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
355
|
+
<div>
|
|
356
|
+
<FormLabel text='No. of events'/>
|
|
357
|
+
<Text size='small' weight='medium'>1</Text>
|
|
358
|
+
</div>
|
|
359
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
360
|
+
<Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
|
|
361
|
+
<Select
|
|
362
|
+
value={this.state.valueS2}
|
|
363
|
+
label='Update:'
|
|
364
|
+
required={false}
|
|
365
|
+
disabled={false}
|
|
366
|
+
inlineLabel={true}
|
|
367
|
+
labelHidden={true}
|
|
368
|
+
onChange={(value) => {
|
|
369
|
+
this.setState({
|
|
370
|
+
value: value,
|
|
371
|
+
})
|
|
372
|
+
}}
|
|
373
|
+
>
|
|
374
|
+
<Option>This event only</Option>
|
|
375
|
+
<Option>This and all future events</Option>
|
|
376
|
+
<Option>All events</Option>
|
|
377
|
+
</Select>
|
|
378
|
+
<ContentDivider type="solid" margin="medium" />
|
|
379
|
+
<Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
|
|
380
|
+
<Text size='small' className='mb-1'>
|
|
381
|
+
<strong>You made changes to a planning item that is a part of a recurring event</strong>.
|
|
382
|
+
Apply the changes to all recurring planning items or just this one?
|
|
383
|
+
</Text>
|
|
384
|
+
<div className='sd-list-item-group--space-between-items'>
|
|
385
|
+
<div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
|
|
386
|
+
<div className="sd-list-item__border sd-list-item__border--locked"></div>
|
|
387
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
|
|
388
|
+
<div className="sd-list-item__row">
|
|
389
|
+
<i role="presentation" className="icon-calendar icon--light-blue"></i>
|
|
390
|
+
<span className="sd-list-item__slugline">Planning Slug</span>
|
|
391
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow">
|
|
392
|
+
<span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
|
|
393
|
+
</span>
|
|
394
|
+
</div>
|
|
395
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
|
|
396
|
+
<Label text='draft' style='translucent'/>
|
|
397
|
+
<span className="sd-margin-s--auto">
|
|
398
|
+
<AvatarGroup
|
|
399
|
+
size="x-small"
|
|
400
|
+
items={avatars}
|
|
401
|
+
/>
|
|
402
|
+
</span>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
|
|
408
|
+
<Select
|
|
409
|
+
value={this.state.valueS2}
|
|
410
|
+
label='Update:'
|
|
411
|
+
required={false}
|
|
412
|
+
disabled={false}
|
|
413
|
+
inlineLabel={true}
|
|
414
|
+
labelHidden={true}
|
|
415
|
+
onChange={(valueS2) => {
|
|
416
|
+
this.setState({
|
|
417
|
+
value: valueS2,
|
|
418
|
+
})
|
|
419
|
+
}}
|
|
420
|
+
>
|
|
421
|
+
<Option>This planning only</Option>
|
|
422
|
+
<Option>This and all future plannings</Option>
|
|
423
|
+
<Option>All plannings</Option>
|
|
424
|
+
</Select>
|
|
425
|
+
|
|
426
|
+
</Modal>
|
|
427
|
+
|
|
428
|
+
{/* Planning only */}
|
|
429
|
+
<Modal
|
|
430
|
+
headerTemplate="Save Event"
|
|
431
|
+
zIndex={10000}
|
|
432
|
+
visible={this.state.modalSaveEvent3}
|
|
433
|
+
contentPadding='medium'
|
|
434
|
+
contentBg='medium'
|
|
435
|
+
size='medium'
|
|
436
|
+
footerTemplate={modalSaveEventFooterThree}
|
|
437
|
+
onHide={() => {this.setState({modalSaveEvent3: false})}}
|
|
438
|
+
>
|
|
439
|
+
<Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
|
|
440
|
+
<Text size='small' className='mb-1'>
|
|
441
|
+
<strong>You made changes to a planning item that is a part of a recurring event</strong>.
|
|
442
|
+
Apply the changes to all recurring planning items or just this one?
|
|
443
|
+
</Text>
|
|
444
|
+
<div className='sd-list-item-group--space-between-items'>
|
|
445
|
+
<div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
|
|
446
|
+
<div className="sd-list-item__border sd-list-item__border--locked"></div>
|
|
447
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
|
|
448
|
+
<div className="sd-list-item__row">
|
|
449
|
+
<i role="presentation" className="icon-calendar icon--light-blue"></i>
|
|
450
|
+
<span className="sd-list-item__slugline">Planning Slug</span>
|
|
451
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow">
|
|
452
|
+
<span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
|
|
453
|
+
</span>
|
|
454
|
+
</div>
|
|
455
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
|
|
456
|
+
<Label text='draft' style='translucent'/>
|
|
457
|
+
<span className="sd-margin-s--auto">
|
|
458
|
+
<AvatarGroup
|
|
459
|
+
size="x-small"
|
|
460
|
+
items={avatars}
|
|
461
|
+
/>
|
|
462
|
+
</span>
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<Select
|
|
469
|
+
value={this.state.valueS2}
|
|
470
|
+
label='Update:'
|
|
471
|
+
required={false}
|
|
472
|
+
disabled={false}
|
|
473
|
+
inlineLabel={true}
|
|
474
|
+
labelHidden={true}
|
|
475
|
+
onChange={(valueS2) => {
|
|
476
|
+
this.setState({
|
|
477
|
+
value: valueS2,
|
|
478
|
+
})
|
|
479
|
+
}}
|
|
480
|
+
>
|
|
481
|
+
<Option>This planning only</Option>
|
|
482
|
+
<Option>This and all future plannings</Option>
|
|
483
|
+
<Option>All plannings</Option>
|
|
484
|
+
</Select>
|
|
485
|
+
|
|
486
|
+
<ContentDivider type="dashed" margin='small' />
|
|
487
|
+
|
|
488
|
+
<Text size='small' className='mb-1'>
|
|
489
|
+
<strong>You made changes to a planning item that is a part of a recurring event</strong>.
|
|
490
|
+
Apply the changes to all recurring planning items or just this one?
|
|
491
|
+
</Text>
|
|
492
|
+
|
|
493
|
+
<div className='sd-list-item-group--space-between-items'>
|
|
494
|
+
<div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
|
|
495
|
+
<div className="sd-list-item__border sd-list-item__border--locked"></div>
|
|
496
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
|
|
497
|
+
<div className="sd-list-item__row">
|
|
498
|
+
<i role="presentation" className="icon-calendar icon--light-blue"></i>
|
|
499
|
+
<span className="sd-list-item__slugline">Planning Slug</span>
|
|
500
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow">
|
|
501
|
+
<span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
|
|
502
|
+
</span>
|
|
503
|
+
</div>
|
|
504
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
|
|
505
|
+
<Label text='draft' style='translucent'/>
|
|
506
|
+
<span className="sd-margin-s--auto">
|
|
507
|
+
<AvatarGroup
|
|
508
|
+
size="small"
|
|
509
|
+
items={avatars}
|
|
510
|
+
/>
|
|
511
|
+
</span>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
516
|
+
|
|
517
|
+
<Select
|
|
518
|
+
value={this.state.valueS2}
|
|
519
|
+
label='Update:'
|
|
520
|
+
required={false}
|
|
521
|
+
disabled={false}
|
|
522
|
+
inlineLabel={true}
|
|
523
|
+
labelHidden={true}
|
|
524
|
+
onChange={(valueS3) => {
|
|
525
|
+
this.setState({
|
|
526
|
+
value: valueS3,
|
|
527
|
+
})
|
|
528
|
+
}}
|
|
529
|
+
>
|
|
530
|
+
<Option>This planning only</Option>
|
|
531
|
+
<Option>This and all future plannings</Option>
|
|
532
|
+
<Option>All plannings</Option>
|
|
533
|
+
</Select>
|
|
534
|
+
|
|
535
|
+
</Modal>
|
|
536
|
+
|
|
537
|
+
{/* Planning templates modal */}
|
|
78
538
|
<Modal headerTemplate="Planning templates"
|
|
79
539
|
zIndex={10000}
|
|
80
540
|
visible={this.state.modalPlanningTemplates}
|