superdesk-ui-framework 3.0.65 → 3.0.66
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/_boxed-list.scss +10 -3
- package/app/styles/_helpers.scss +3 -1
- package/app/styles/components/_sd-searchbar.scss +20 -1
- package/app/styles/primereact/_pr-dialog.scss +29 -13
- package/app-typescript/components/Modal.tsx +2 -2
- package/app-typescript/components/SearchBar.tsx +1 -0
- package/dist/examples.bundle.js +33 -30
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +58 -10
- package/dist/superdesk-ui.bundle.css +55 -19
- package/dist/superdesk-ui.bundle.js +3 -2
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +58 -10
- package/package.json +1 -1
- package/react/components/Modal.js +2 -2
- package/react/components/SearchBar.js +1 -0
|
@@ -4,12 +4,16 @@
|
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
align-self: stretch;
|
|
7
|
-
gap: $sd-base-increment * 1
|
|
7
|
+
gap: $sd-base-increment * 1;
|
|
8
8
|
margin-block-end: $sd-base-increment * 2;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
.boxed-list--compact {
|
|
12
|
+
gap: $sd-base-increment * 1;
|
|
13
|
+
}
|
|
14
|
+
|
|
11
15
|
.boxed-list--comfortable {
|
|
12
|
-
gap: $sd-base-increment *
|
|
16
|
+
gap: $sd-base-increment * 1.5;
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
$boxed-list-palette: $sd-basic-palette;
|
|
@@ -80,7 +84,10 @@ $boxed-list-palette: $sd-basic-palette;
|
|
|
80
84
|
.boxed-list__item--clickable {
|
|
81
85
|
&:hover {
|
|
82
86
|
cursor: pointer;
|
|
83
|
-
box-shadow: $shadow__base--
|
|
87
|
+
box-shadow: $shadow__base--z2;
|
|
88
|
+
}
|
|
89
|
+
&:active {
|
|
90
|
+
box-shadow: 0 0 2px 1px hsla(0, 0%, 0%, 0.12);
|
|
84
91
|
}
|
|
85
92
|
}
|
|
86
93
|
|
package/app/styles/_helpers.scss
CHANGED
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
border-radius: $border-radius__base--medium;
|
|
45
45
|
border: 1px solid var(--color-border-line--medium);
|
|
46
46
|
background-color: var(--sd-colour-bg__searchbar);
|
|
47
|
-
box-shadow: inset 0
|
|
47
|
+
box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.14);
|
|
48
48
|
transition: box-shadow 0.2s ease-out;
|
|
49
49
|
|
|
50
50
|
&:hover {
|
|
@@ -77,6 +77,25 @@
|
|
|
77
77
|
border-color: rgba(123,123,123,0.4);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
+
|
|
81
|
+
.dropdown {
|
|
82
|
+
background-color: var(--sd-colour-bg__searchbar);
|
|
83
|
+
border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
|
|
84
|
+
border-inline-end: 1px solid var(--color-border-line--medium);
|
|
85
|
+
margin-inline-end: 1px;
|
|
86
|
+
transition: box-shadow 0.2s ease-out;
|
|
87
|
+
.dropdown__toggle {
|
|
88
|
+
height: 100%;
|
|
89
|
+
padding-inline: var(--space--1-5);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
&.sd-searchbar--focused,
|
|
93
|
+
&:focus-within {
|
|
94
|
+
.dropdown {
|
|
95
|
+
border-inline-end-color: var(--sd-colour-interactive--alpha-50);
|
|
96
|
+
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
80
99
|
}
|
|
81
100
|
|
|
82
101
|
.sd-searchbar__input, input[type="text"].sd-searchbar__input, input[type="search"].sd-searchbar__input {
|
|
@@ -260,7 +260,6 @@
|
|
|
260
260
|
}
|
|
261
261
|
|
|
262
262
|
.p-dialog .p-dialog-content {
|
|
263
|
-
background-color: transparent;
|
|
264
263
|
font-size: 1.4rem;
|
|
265
264
|
|
|
266
265
|
p {
|
|
@@ -323,7 +322,8 @@
|
|
|
323
322
|
}
|
|
324
323
|
|
|
325
324
|
.p-dialog-content {
|
|
326
|
-
|
|
325
|
+
padding: var(--dialog-content-padding);
|
|
326
|
+
background-color: var(--dialog-content-bg);
|
|
327
327
|
.sd-main-content-grid {
|
|
328
328
|
height: 100% !important;
|
|
329
329
|
}
|
|
@@ -350,30 +350,46 @@
|
|
|
350
350
|
}
|
|
351
351
|
|
|
352
352
|
// padding
|
|
353
|
-
.p-dialog-content--0-padding
|
|
354
|
-
|
|
353
|
+
.p-dialog-content--0-padding,
|
|
354
|
+
.p-dialog-content--padding-none {
|
|
355
|
+
--dialog-content-padding: 0 !important;
|
|
355
356
|
}
|
|
356
357
|
|
|
357
|
-
.p-dialog-content--s-padding
|
|
358
|
-
|
|
358
|
+
.p-dialog-content--s-padding,
|
|
359
|
+
.p-dialog-content--padding-small {
|
|
360
|
+
--dialog-content-padding: var(--space--2);
|
|
359
361
|
}
|
|
360
362
|
|
|
361
|
-
.p-dialog-content--m-padding
|
|
362
|
-
|
|
363
|
+
.p-dialog-content--m-padding,
|
|
364
|
+
.p-dialog-content--padding-medium {
|
|
365
|
+
--dialog-content-padding: var(--space--3);
|
|
363
366
|
}
|
|
364
367
|
|
|
365
|
-
.p-dialog-content--l-padding
|
|
366
|
-
|
|
368
|
+
.p-dialog-content--l-padding,
|
|
369
|
+
.p-dialog-content--padding-large, {
|
|
370
|
+
--dialog-content-padding: var(--space--4);
|
|
367
371
|
}
|
|
368
372
|
|
|
369
373
|
.p-dialog-content-bg--default {
|
|
370
|
-
|
|
374
|
+
--dialog-content-bg: var(--color-modal-Bg) !important;
|
|
371
375
|
}
|
|
372
376
|
|
|
373
377
|
.p-dialog-content-bg--dark {
|
|
374
|
-
|
|
378
|
+
--dialog-content-bg: var(--sd-colour-panel-bg--200) !important;
|
|
375
379
|
}
|
|
376
380
|
|
|
377
381
|
.p-dialog-content-bg--medium {
|
|
378
|
-
|
|
382
|
+
--dialog-content-bg: var(--sd-colour-panel-bg--100) !important;
|
|
379
383
|
}
|
|
384
|
+
|
|
385
|
+
.modal__sticky-header {
|
|
386
|
+
position: sticky;
|
|
387
|
+
inset-block-start: calc(-1 * var(--dialog-content-padding));
|
|
388
|
+
background-color: var(--dialog-content-bg);
|
|
389
|
+
padding-inline: var(--dialog-content-padding);
|
|
390
|
+
padding-block-start: var(--dialog-content-padding);
|
|
391
|
+
padding-block-end: var(--space--1);
|
|
392
|
+
z-index: 2;
|
|
393
|
+
margin: calc(-1 * var(--dialog-content-padding));
|
|
394
|
+
margin-block-end: 0;
|
|
395
|
+
}
|
|
@@ -28,8 +28,8 @@ export class Modal extends React.Component<IProps, {}> {
|
|
|
28
28
|
[`p-dialog-content--${this.props.size}`]: this.props.size,
|
|
29
29
|
'p-dialog-content-bg--default': this.props.contentBg === undefined,
|
|
30
30
|
[`p-dialog-content-bg--${this.props.contentBg}`]: this.props.contentBg,
|
|
31
|
-
'p-dialog-content--
|
|
32
|
-
[`p-dialog-content
|
|
31
|
+
'p-dialog-content--padding-small': this.props.contentPadding === undefined,
|
|
32
|
+
[`p-dialog-content--padding-${this.props.contentPadding}`]: this.props.contentPadding,
|
|
33
33
|
}, this.props.className);
|
|
34
34
|
return (
|
|
35
35
|
<div style={{display: 'content'}}
|
|
@@ -56,6 +56,7 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
|
|
|
56
56
|
});
|
|
57
57
|
return (
|
|
58
58
|
<div className={classes} ref={this.inputRef}>
|
|
59
|
+
{this.props.children}
|
|
59
60
|
<label className="sd-searchbar__icon"></label>
|
|
60
61
|
<input id="search-input"
|
|
61
62
|
ref={(input: any) => (input && this.props.focused) && input.focus()}
|
package/dist/examples.bundle.js
CHANGED
|
@@ -99376,8 +99376,8 @@ var Modal = /** @class */ (function (_super) {
|
|
|
99376
99376
|
_a["p-dialog-content--".concat(this.props.size)] = this.props.size,
|
|
99377
99377
|
_a['p-dialog-content-bg--default'] = this.props.contentBg === undefined,
|
|
99378
99378
|
_a["p-dialog-content-bg--".concat(this.props.contentBg)] = this.props.contentBg,
|
|
99379
|
-
_a['p-dialog-content--
|
|
99380
|
-
_a["p-dialog-content--".concat(this.props.contentPadding)] = this.props.contentPadding,
|
|
99379
|
+
_a['p-dialog-content--padding-small'] = this.props.contentPadding === undefined,
|
|
99380
|
+
_a["p-dialog-content--padding-".concat(this.props.contentPadding)] = this.props.contentPadding,
|
|
99381
99381
|
_a), this.props.className);
|
|
99382
99382
|
return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
|
|
99383
99383
|
React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.props.zIndex ? this.props.zIndex : 1000, position: this.props.position, closable: this.props.onHide != null ? true : false }, this.props.children)));
|
|
@@ -102501,6 +102501,7 @@ var SearchBar = /** @class */ (function (_super) {
|
|
|
102501
102501
|
_a['sd-searchbar--boxed'] = this.state.boxed,
|
|
102502
102502
|
_a));
|
|
102503
102503
|
return (React.createElement("div", { className: classes, ref: this.inputRef },
|
|
102504
|
+
this.props.children,
|
|
102504
102505
|
React.createElement("label", { className: "sd-searchbar__icon" }),
|
|
102505
102506
|
React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onKeyPress: function (event) {
|
|
102506
102507
|
if (event.key === 'Enter') {
|
|
@@ -139715,6 +139716,7 @@ var TestGround = /** @class */ (function (_super) {
|
|
|
139715
139716
|
invalid: false,
|
|
139716
139717
|
date: '01/08/2022',
|
|
139717
139718
|
time: '16:50',
|
|
139719
|
+
modalPlanningTemplates: false,
|
|
139718
139720
|
};
|
|
139719
139721
|
return _this;
|
|
139720
139722
|
}
|
|
@@ -139731,8 +139733,35 @@ var TestGround = /** @class */ (function (_super) {
|
|
|
139731
139733
|
return (React.createElement(Components.Layout, { header: 'Testing Ground' },
|
|
139732
139734
|
React.createElement(Components.LayoutContainer, null,
|
|
139733
139735
|
React.createElement(Components.MainPanel, null,
|
|
139734
|
-
React.createElement(
|
|
139736
|
+
React.createElement(index_1.Button, { text: "Planning Templates", onClick: function () { return _this.setState({ modalPlanningTemplates: true }); } }),
|
|
139737
|
+
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 }); } },
|
|
139738
|
+
React.createElement("div", { className: 'modal__sticky-header' },
|
|
139739
|
+
React.createElement(index_1.SearchBar, { placeholder: 'Search templates', boxed: true },
|
|
139740
|
+
React.createElement(index_1.Dropdown, { items: [
|
|
139741
|
+
{ label: 'Features', onSelect: function () { return 1; } },
|
|
139742
|
+
{ label: 'Sports', onSelect: function () { return 1; } },
|
|
139743
|
+
{ label: 'Entertainment', onSelect: function () { return 1; } },
|
|
139744
|
+
] }, "All Calendars"))),
|
|
139745
|
+
React.createElement(index_1.Heading, { type: 'h6', className: 'mt-1 mb-1' }, "Features"),
|
|
139746
|
+
React.createElement(index_1.BoxedList, null,
|
|
139747
|
+
React.createElement(index_1.BoxedListItem, { clickable: true }, "Features -- template one cras fringilla"),
|
|
139748
|
+
React.createElement(index_1.BoxedListItem, { clickable: true }, "Features -- template two sit quam"),
|
|
139749
|
+
React.createElement(index_1.BoxedListItem, { clickable: true }, "Features -- template fermentum quam venenatis"),
|
|
139750
|
+
React.createElement(index_1.BoxedListItem, { clickable: true }, "Features -- template dapibus mattis")),
|
|
139751
|
+
React.createElement(index_1.Heading, { type: 'h6', className: 'mt-2 mb-1' }, "Sports"),
|
|
139752
|
+
React.createElement(index_1.BoxedList, null,
|
|
139753
|
+
React.createElement(index_1.BoxedListItem, { clickable: true }, "Sports -- template one fermentum venenatis"),
|
|
139754
|
+
React.createElement(index_1.BoxedListItem, { clickable: true }, "Sports -- template two cras condimentum"),
|
|
139755
|
+
React.createElement(index_1.BoxedListItem, { clickable: true }, "Sports -- template bibendum commodo nibh"))),
|
|
139756
|
+
React.createElement("h3", { className: "docs-page__h3 " }, "Planning Templates"),
|
|
139757
|
+
React.createElement(index_1.SearchBar, { placeholder: 'Search', boxed: true },
|
|
139758
|
+
React.createElement(index_1.Dropdown, { items: [
|
|
139759
|
+
{ label: 'Action 1', onSelect: function () { return 1; } },
|
|
139760
|
+
{ label: 'Action 2', onSelect: function () { return 1; } },
|
|
139761
|
+
{ label: 'Action 3', onSelect: function () { return 1; } },
|
|
139762
|
+
] }, "Toogle button")),
|
|
139735
139763
|
React.createElement("hr", null),
|
|
139764
|
+
React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Pagination"),
|
|
139736
139765
|
React.createElement("div", { className: 'sd-pagination' },
|
|
139737
139766
|
React.createElement("button", { className: 'sd-pagination__item sd-pagination__item--start', disabled: true },
|
|
139738
139767
|
React.createElement(index_1.Icon, { name: 'backward-thin' })),
|
|
@@ -139785,12 +139814,6 @@ var TestGround = /** @class */ (function (_super) {
|
|
|
139785
139814
|
React.createElement("div", { className: 'form__group-new' },
|
|
139786
139815
|
React.createElement(index_1.Input, { value: '', onChange: function (value) { }, type: 'text', label: 'Text input', placeholder: 'Enter text', disabled: true }),
|
|
139787
139816
|
React.createElement(index_1.Input, { value: '', onChange: function (value) { }, type: 'text', label: 'Text input', placeholder: 'Enter text', disabled: true }),
|
|
139788
|
-
React.createElement(index_1.DatePicker, { value: this.state.date, onChange: function (date) {
|
|
139789
|
-
_this.setState({ date: date });
|
|
139790
|
-
}, disabled: true, dateFormat: "DD-MM-YYYY", label: 'Date', info: 'Nullam Sollicitudin', error: 'Error message', inlineLabel: false }),
|
|
139791
|
-
React.createElement(index_1.TimePicker, { value: this.state.time, disabled: true, required: true, label: 'Time', onChange: function (time) {
|
|
139792
|
-
_this.setState({ time: time });
|
|
139793
|
-
} }),
|
|
139794
139817
|
React.createElement(index_1.Button, { text: "Clear", onClick: function () { return false; } }),
|
|
139795
139818
|
React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; } }),
|
|
139796
139819
|
React.createElement(index_1.Button, { text: "Save", type: 'primary', onClick: function () { return false; } })),
|
|
@@ -139799,32 +139822,12 @@ var TestGround = /** @class */ (function (_super) {
|
|
|
139799
139822
|
React.createElement(index_1.Input, { value: '', onChange: function (value) { }, type: 'text', label: 'Text input', placeholder: 'Enter text', inlineLabel: true, labelHidden: true, disabled: false }),
|
|
139800
139823
|
React.createElement(index_1.Text, { size: 'small', align: 'center' }, "To:"),
|
|
139801
139824
|
React.createElement(index_1.Input, { value: '', onChange: function (value) { }, type: 'text', label: 'Text input', placeholder: 'Enter text', inlineLabel: true, labelHidden: true, disabled: false }),
|
|
139802
|
-
React.createElement(index_1.DatePicker, { value: this.state.date, onChange: function (date) {
|
|
139803
|
-
_this.setState({ date: date });
|
|
139804
|
-
},
|
|
139805
|
-
// disabled={true}
|
|
139806
|
-
dateFormat: "DD-MM-YYYY", label: 'Date', info: 'Nullam Sollicitudin', error: 'Error message', inlineLabel: true, labelHidden: true }),
|
|
139807
|
-
React.createElement(index_1.TimePicker, { value: this.state.time,
|
|
139808
|
-
// disabled={true}
|
|
139809
|
-
required: true, inlineLabel: true, labelHidden: true, label: 'Time', onChange: function (time) {
|
|
139810
|
-
_this.setState({ time: time });
|
|
139811
|
-
} }),
|
|
139812
139825
|
React.createElement(index_1.Button, { text: "Save", type: 'primary', onClick: function () { return false; } })),
|
|
139813
139826
|
React.createElement("hr", null),
|
|
139814
139827
|
React.createElement(index_1.FormRowNew, null,
|
|
139815
139828
|
React.createElement(index_1.Input, { value: '', onChange: function (value) { }, type: 'text', label: 'Text input', placeholder: 'Enter text', disabled: false }),
|
|
139816
139829
|
React.createElement(index_1.Text, { size: 'small', align: 'center' }, "To:"),
|
|
139817
139830
|
React.createElement(index_1.Input, { value: '', onChange: function (value) { }, type: 'text', label: 'Text input', placeholder: 'Enter text', labelHidden: true, disabled: false }),
|
|
139818
|
-
React.createElement(index_1.DatePicker, { value: this.state.date, onChange: function (date) {
|
|
139819
|
-
_this.setState({ date: date });
|
|
139820
|
-
},
|
|
139821
|
-
// disabled={true}
|
|
139822
|
-
dateFormat: "DD-MM-YYYY", label: 'Date', info: 'Nullam Sollicitudin', error: 'Error message', inlineLabel: false }),
|
|
139823
|
-
React.createElement(index_1.TimePicker, { value: this.state.time,
|
|
139824
|
-
// disabled={true}
|
|
139825
|
-
required: true, label: 'Time', onChange: function (time) {
|
|
139826
|
-
_this.setState({ time: time });
|
|
139827
|
-
} }),
|
|
139828
139831
|
React.createElement(index_1.Button, { text: "Save", type: 'primary', onClick: function () { return false; } })),
|
|
139829
139832
|
React.createElement("hr", null),
|
|
139830
139833
|
React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Table list (draggable)"),
|
|
@@ -144107,7 +144110,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
|
|
|
144107
144110
|
/* 692 */
|
|
144108
144111
|
/***/ (function(module, exports) {
|
|
144109
144112
|
|
|
144110
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
|
144113
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.66","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","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","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"}}
|
|
144111
144114
|
|
|
144112
144115
|
/***/ }),
|
|
144113
144116
|
/* 693 */
|
|
@@ -1,6 +1,6 @@
|
|
|
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, ButtonGroup, Heading} from '../../../../app-typescript/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, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, BoxedListContentRow} from '../../../../app-typescript/index';
|
|
4
4
|
import { Carousel } from '../../../../app-typescript/index';
|
|
5
5
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
|
6
6
|
|
|
@@ -27,6 +27,7 @@ interface IState {
|
|
|
27
27
|
invalid: boolean;
|
|
28
28
|
date: any;
|
|
29
29
|
time: string;
|
|
30
|
+
modalPlanningTemplates: boolean;
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
export class TestGround extends React.Component<IProps, IState> {
|
|
@@ -47,6 +48,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
47
48
|
invalid: false,
|
|
48
49
|
date: '01/08/2022',
|
|
49
50
|
time: '16:50',
|
|
51
|
+
modalPlanningTemplates: false,
|
|
50
52
|
}
|
|
51
53
|
}
|
|
52
54
|
|
|
@@ -63,9 +65,55 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
63
65
|
<Components.Layout header='Testing Ground'>
|
|
64
66
|
<Components.LayoutContainer>
|
|
65
67
|
<Components.MainPanel>
|
|
68
|
+
<Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
|
|
69
|
+
<Modal headerTemplate="Planning templates"
|
|
70
|
+
zIndex={10000}
|
|
71
|
+
visible={this.state.modalPlanningTemplates}
|
|
72
|
+
contentPadding='medium'
|
|
73
|
+
contentBg='medium'
|
|
74
|
+
size='medium'
|
|
75
|
+
onHide={() => {this.setState({modalPlanningTemplates: false})}}>
|
|
76
|
+
<div className='modal__sticky-header'>
|
|
77
|
+
<SearchBar placeholder='Search templates' boxed={true}>
|
|
78
|
+
<Dropdown
|
|
79
|
+
items={[
|
|
80
|
+
{ label: 'Features', onSelect: () => 1 },
|
|
81
|
+
{ label: 'Sports', onSelect: () => 1 },
|
|
82
|
+
{ label: 'Entertainment', onSelect: () => 1 },
|
|
83
|
+
]}>
|
|
84
|
+
All Calendars
|
|
85
|
+
</Dropdown>
|
|
86
|
+
</SearchBar>
|
|
87
|
+
</div>
|
|
66
88
|
|
|
67
|
-
|
|
89
|
+
<Heading type='h6' className='mt-1 mb-1'>Features</Heading>
|
|
90
|
+
<BoxedList>
|
|
91
|
+
<BoxedListItem clickable={true}>Features -- template one cras fringilla</BoxedListItem>
|
|
92
|
+
<BoxedListItem clickable={true}>Features -- template two sit quam</BoxedListItem>
|
|
93
|
+
<BoxedListItem clickable={true}>Features -- template fermentum quam venenatis</BoxedListItem>
|
|
94
|
+
<BoxedListItem clickable={true}>Features -- template dapibus mattis</BoxedListItem>
|
|
95
|
+
</BoxedList>
|
|
96
|
+
<Heading type='h6' className='mt-2 mb-1'>Sports</Heading>
|
|
97
|
+
<BoxedList>
|
|
98
|
+
<BoxedListItem clickable={true}>Sports -- template one fermentum venenatis</BoxedListItem>
|
|
99
|
+
<BoxedListItem clickable={true}>Sports -- template two cras condimentum</BoxedListItem>
|
|
100
|
+
<BoxedListItem clickable={true}>Sports -- template bibendum commodo nibh</BoxedListItem>
|
|
101
|
+
</BoxedList>
|
|
102
|
+
|
|
103
|
+
</Modal>
|
|
104
|
+
<h3 className="docs-page__h3 ">Planning Templates</h3>
|
|
105
|
+
<SearchBar placeholder='Search' boxed={true}>
|
|
106
|
+
<Dropdown
|
|
107
|
+
items={[
|
|
108
|
+
{ label: 'Action 1', onSelect: () => 1 },
|
|
109
|
+
{ label: 'Action 2', onSelect: () => 1 },
|
|
110
|
+
{ label: 'Action 3', onSelect: () => 1 },
|
|
111
|
+
]}>
|
|
112
|
+
Toogle button
|
|
113
|
+
</Dropdown>
|
|
114
|
+
</SearchBar>
|
|
68
115
|
<hr />
|
|
116
|
+
<h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
|
|
69
117
|
<div className='sd-pagination'>
|
|
70
118
|
<button className='sd-pagination__item sd-pagination__item--start' disabled>
|
|
71
119
|
<Icon name='backward-thin' />
|
|
@@ -169,7 +217,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
169
217
|
label='Text input'
|
|
170
218
|
placeholder='Enter text'
|
|
171
219
|
disabled={true} />
|
|
172
|
-
<DatePicker
|
|
220
|
+
{/* <DatePicker
|
|
173
221
|
value={this.state.date}
|
|
174
222
|
onChange={(date) => {
|
|
175
223
|
this.setState({date});
|
|
@@ -189,7 +237,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
189
237
|
onChange={(time) => {
|
|
190
238
|
this.setState({time});
|
|
191
239
|
}}
|
|
192
|
-
/>
|
|
240
|
+
/> */}
|
|
193
241
|
<Button text="Clear" onClick={()=> false} />
|
|
194
242
|
<Button text="Cancel" onClick={()=> false} />
|
|
195
243
|
<Button text="Save" type='primary' onClick={()=> false} />
|
|
@@ -216,7 +264,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
216
264
|
inlineLabel={true}
|
|
217
265
|
labelHidden={true}
|
|
218
266
|
disabled={false} />
|
|
219
|
-
<DatePicker
|
|
267
|
+
{/* <DatePicker
|
|
220
268
|
value={this.state.date}
|
|
221
269
|
onChange={(date) => {
|
|
222
270
|
this.setState({date});
|
|
@@ -239,7 +287,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
239
287
|
onChange={(time) => {
|
|
240
288
|
this.setState({time});
|
|
241
289
|
}}
|
|
242
|
-
/>
|
|
290
|
+
/> */}
|
|
243
291
|
<Button text="Save" type='primary' onClick={()=> false} />
|
|
244
292
|
</FormRowNew>
|
|
245
293
|
|
|
@@ -262,7 +310,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
262
310
|
placeholder='Enter text'
|
|
263
311
|
labelHidden={true}
|
|
264
312
|
disabled={false} />
|
|
265
|
-
<DatePicker
|
|
313
|
+
{/* <DatePicker
|
|
266
314
|
value={this.state.date}
|
|
267
315
|
onChange={(date) => {
|
|
268
316
|
this.setState({date});
|
|
@@ -273,8 +321,8 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
273
321
|
info='Nullam Sollicitudin'
|
|
274
322
|
error='Error message'
|
|
275
323
|
inlineLabel={false}
|
|
276
|
-
/>
|
|
277
|
-
<TimePicker
|
|
324
|
+
/> */}
|
|
325
|
+
{/* <TimePicker
|
|
278
326
|
value={this.state.time}
|
|
279
327
|
// disabled={true}
|
|
280
328
|
required={true}
|
|
@@ -282,7 +330,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
282
330
|
onChange={(time) => {
|
|
283
331
|
this.setState({time});
|
|
284
332
|
}}
|
|
285
|
-
/>
|
|
333
|
+
/> */}
|
|
286
334
|
<Button text="Save" type='primary' onClick={()=> false} />
|
|
287
335
|
</FormRowNew>
|
|
288
336
|
|
|
@@ -17232,7 +17232,8 @@ h6 {
|
|
|
17232
17232
|
font-size: calc(var(--text-size--base) * 1.2);
|
|
17233
17233
|
font-weight: 500;
|
|
17234
17234
|
text-transform: uppercase;
|
|
17235
|
-
color: var(--color-text-light);
|
|
17235
|
+
color: var(--color-text-light);
|
|
17236
|
+
letter-spacing: 0.06em; }
|
|
17236
17237
|
|
|
17237
17238
|
.sd-text {
|
|
17238
17239
|
font-size: 1.4rem;
|
|
@@ -36089,11 +36090,14 @@ tags-input,
|
|
|
36089
36090
|
display: flex;
|
|
36090
36091
|
flex-direction: column;
|
|
36091
36092
|
align-self: stretch;
|
|
36092
|
-
gap:
|
|
36093
|
+
gap: 0.8rem;
|
|
36093
36094
|
margin-block-end: 1.6rem; }
|
|
36094
36095
|
|
|
36096
|
+
.boxed-list--compact {
|
|
36097
|
+
gap: 0.8rem; }
|
|
36098
|
+
|
|
36095
36099
|
.boxed-list--comfortable {
|
|
36096
|
-
gap: 1.
|
|
36100
|
+
gap: 1.2rem; }
|
|
36097
36101
|
|
|
36098
36102
|
.boxed-list__item {
|
|
36099
36103
|
display: grid;
|
|
@@ -36211,7 +36215,10 @@ tags-input,
|
|
|
36211
36215
|
|
|
36212
36216
|
.boxed-list__item--clickable:hover {
|
|
36213
36217
|
cursor: pointer;
|
|
36214
|
-
box-shadow: 0 1px
|
|
36218
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1); }
|
|
36219
|
+
|
|
36220
|
+
.boxed-list__item--clickable:active {
|
|
36221
|
+
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.12); }
|
|
36215
36222
|
|
|
36216
36223
|
.boxed-list__item--blank {
|
|
36217
36224
|
background-color: transparent !important;
|
|
@@ -43393,7 +43400,7 @@ a.text-link {
|
|
|
43393
43400
|
border-radius: var(--b-radius--medium);
|
|
43394
43401
|
border: 1px solid var(--color-border-line--medium);
|
|
43395
43402
|
background-color: var(--sd-colour-bg__searchbar);
|
|
43396
|
-
box-shadow: inset 0
|
|
43403
|
+
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14);
|
|
43397
43404
|
transition: box-shadow 0.2s ease-out; }
|
|
43398
43405
|
.sd-searchbar--boxed:hover {
|
|
43399
43406
|
border-color: rgba(123, 123, 123, 0.6); }
|
|
@@ -43411,6 +43418,18 @@ a.text-link {
|
|
|
43411
43418
|
cursor: not-allowed !important; }
|
|
43412
43419
|
.sd-searchbar--boxed.sd-searchbar--disabled:hover {
|
|
43413
43420
|
border-color: rgba(123, 123, 123, 0.4); }
|
|
43421
|
+
.sd-searchbar--boxed .dropdown {
|
|
43422
|
+
background-color: var(--sd-colour-bg__searchbar);
|
|
43423
|
+
border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
|
|
43424
|
+
border-inline-end: 1px solid var(--color-border-line--medium);
|
|
43425
|
+
margin-inline-end: 1px;
|
|
43426
|
+
transition: box-shadow 0.2s ease-out; }
|
|
43427
|
+
.sd-searchbar--boxed .dropdown .dropdown__toggle {
|
|
43428
|
+
height: 100%;
|
|
43429
|
+
padding-inline: var(--space--1-5); }
|
|
43430
|
+
.sd-searchbar--boxed.sd-searchbar--focused .dropdown, .sd-searchbar--boxed:focus-within .dropdown {
|
|
43431
|
+
border-inline-end-color: var(--sd-colour-interactive--alpha-50);
|
|
43432
|
+
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10); }
|
|
43414
43433
|
|
|
43415
43434
|
.sd-searchbar__input, input[type="text"].sd-searchbar__input, input[type="search"].sd-searchbar__input {
|
|
43416
43435
|
flex-grow: 1;
|
|
@@ -64251,7 +64270,6 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
64251
64270
|
margin-inline-end: 0; }
|
|
64252
64271
|
|
|
64253
64272
|
.p-dialog .p-dialog-content {
|
|
64254
|
-
background-color: transparent;
|
|
64255
64273
|
font-size: 1.4rem; }
|
|
64256
64274
|
.p-dialog .p-dialog-content p {
|
|
64257
64275
|
line-height: 1.5; }
|
|
@@ -64297,8 +64315,11 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
64297
64315
|
color: var(--sd-colour-interactive) !important;
|
|
64298
64316
|
opacity: 1; }
|
|
64299
64317
|
|
|
64300
|
-
.p-dialog-content
|
|
64301
|
-
|
|
64318
|
+
.p-dialog-content {
|
|
64319
|
+
padding: var(--dialog-content-padding);
|
|
64320
|
+
background-color: var(--dialog-content-bg); }
|
|
64321
|
+
.p-dialog-content .sd-main-content-grid {
|
|
64322
|
+
height: 100% !important; }
|
|
64302
64323
|
|
|
64303
64324
|
.p-dialog-content--small {
|
|
64304
64325
|
width: var(--width__modal--small); }
|
|
@@ -64314,26 +64335,41 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
64314
64335
|
width: var(--width__modal--x-large);
|
|
64315
64336
|
height: calc(100vh - 200px); }
|
|
64316
64337
|
|
|
64317
|
-
.p-dialog-content--0-padding
|
|
64318
|
-
|
|
64338
|
+
.p-dialog-content--0-padding,
|
|
64339
|
+
.p-dialog-content--padding-none {
|
|
64340
|
+
--dialog-content-padding: 0 !important; }
|
|
64319
64341
|
|
|
64320
|
-
.p-dialog-content--s-padding
|
|
64321
|
-
|
|
64342
|
+
.p-dialog-content--s-padding,
|
|
64343
|
+
.p-dialog-content--padding-small {
|
|
64344
|
+
--dialog-content-padding: var(--space--2); }
|
|
64322
64345
|
|
|
64323
|
-
.p-dialog-content--m-padding
|
|
64324
|
-
|
|
64346
|
+
.p-dialog-content--m-padding,
|
|
64347
|
+
.p-dialog-content--padding-medium {
|
|
64348
|
+
--dialog-content-padding: var(--space--3); }
|
|
64325
64349
|
|
|
64326
|
-
.p-dialog-content--l-padding
|
|
64327
|
-
|
|
64350
|
+
.p-dialog-content--l-padding,
|
|
64351
|
+
.p-dialog-content--padding-large {
|
|
64352
|
+
--dialog-content-padding: var(--space--4); }
|
|
64328
64353
|
|
|
64329
64354
|
.p-dialog-content-bg--default {
|
|
64330
|
-
|
|
64355
|
+
--dialog-content-bg: var(--color-modal-Bg) !important; }
|
|
64331
64356
|
|
|
64332
64357
|
.p-dialog-content-bg--dark {
|
|
64333
|
-
|
|
64358
|
+
--dialog-content-bg: var(--sd-colour-panel-bg--200) !important; }
|
|
64334
64359
|
|
|
64335
64360
|
.p-dialog-content-bg--medium {
|
|
64336
|
-
|
|
64361
|
+
--dialog-content-bg: var(--sd-colour-panel-bg--100) !important; }
|
|
64362
|
+
|
|
64363
|
+
.modal__sticky-header {
|
|
64364
|
+
position: sticky;
|
|
64365
|
+
inset-block-start: calc(-1 * var(--dialog-content-padding));
|
|
64366
|
+
background-color: var(--dialog-content-bg);
|
|
64367
|
+
padding-inline: var(--dialog-content-padding);
|
|
64368
|
+
padding-block-start: var(--dialog-content-padding);
|
|
64369
|
+
padding-block-end: var(--space--1);
|
|
64370
|
+
z-index: 2;
|
|
64371
|
+
margin: calc(-1 * var(--dialog-content-padding));
|
|
64372
|
+
margin-block-end: 0; }
|
|
64337
64373
|
|
|
64338
64374
|
.p-tieredmenu, .p-tieredmenu .p-submenu-list {
|
|
64339
64375
|
padding-block-start: 0.8rem;
|
|
@@ -98637,8 +98637,8 @@ var Modal = /** @class */ (function (_super) {
|
|
|
98637
98637
|
_a["p-dialog-content--".concat(this.props.size)] = this.props.size,
|
|
98638
98638
|
_a['p-dialog-content-bg--default'] = this.props.contentBg === undefined,
|
|
98639
98639
|
_a["p-dialog-content-bg--".concat(this.props.contentBg)] = this.props.contentBg,
|
|
98640
|
-
_a['p-dialog-content--
|
|
98641
|
-
_a["p-dialog-content--".concat(this.props.contentPadding)] = this.props.contentPadding,
|
|
98640
|
+
_a['p-dialog-content--padding-small'] = this.props.contentPadding === undefined,
|
|
98641
|
+
_a["p-dialog-content--padding-".concat(this.props.contentPadding)] = this.props.contentPadding,
|
|
98642
98642
|
_a), this.props.className);
|
|
98643
98643
|
return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
|
|
98644
98644
|
React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.props.zIndex ? this.props.zIndex : 1000, position: this.props.position, closable: this.props.onHide != null ? true : false }, this.props.children)));
|
|
@@ -101762,6 +101762,7 @@ var SearchBar = /** @class */ (function (_super) {
|
|
|
101762
101762
|
_a['sd-searchbar--boxed'] = this.state.boxed,
|
|
101763
101763
|
_a));
|
|
101764
101764
|
return (React.createElement("div", { className: classes, ref: this.inputRef },
|
|
101765
|
+
this.props.children,
|
|
101765
101766
|
React.createElement("label", { className: "sd-searchbar__icon" }),
|
|
101766
101767
|
React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onKeyPress: function (event) {
|
|
101767
101768
|
if (event.key === 'Enter') {
|
|
@@ -1,6 +1,6 @@
|
|
|
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, ButtonGroup, Heading} from '../../../../app-typescript/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, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, BoxedListContentRow} from '../../../../app-typescript/index';
|
|
4
4
|
import { Carousel } from '../../../../app-typescript/index';
|
|
5
5
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
|
6
6
|
|
|
@@ -27,6 +27,7 @@ interface IState {
|
|
|
27
27
|
invalid: boolean;
|
|
28
28
|
date: any;
|
|
29
29
|
time: string;
|
|
30
|
+
modalPlanningTemplates: boolean;
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
export class TestGround extends React.Component<IProps, IState> {
|
|
@@ -47,6 +48,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
47
48
|
invalid: false,
|
|
48
49
|
date: '01/08/2022',
|
|
49
50
|
time: '16:50',
|
|
51
|
+
modalPlanningTemplates: false,
|
|
50
52
|
}
|
|
51
53
|
}
|
|
52
54
|
|
|
@@ -63,9 +65,55 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
63
65
|
<Components.Layout header='Testing Ground'>
|
|
64
66
|
<Components.LayoutContainer>
|
|
65
67
|
<Components.MainPanel>
|
|
68
|
+
<Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
|
|
69
|
+
<Modal headerTemplate="Planning templates"
|
|
70
|
+
zIndex={10000}
|
|
71
|
+
visible={this.state.modalPlanningTemplates}
|
|
72
|
+
contentPadding='medium'
|
|
73
|
+
contentBg='medium'
|
|
74
|
+
size='medium'
|
|
75
|
+
onHide={() => {this.setState({modalPlanningTemplates: false})}}>
|
|
76
|
+
<div className='modal__sticky-header'>
|
|
77
|
+
<SearchBar placeholder='Search templates' boxed={true}>
|
|
78
|
+
<Dropdown
|
|
79
|
+
items={[
|
|
80
|
+
{ label: 'Features', onSelect: () => 1 },
|
|
81
|
+
{ label: 'Sports', onSelect: () => 1 },
|
|
82
|
+
{ label: 'Entertainment', onSelect: () => 1 },
|
|
83
|
+
]}>
|
|
84
|
+
All Calendars
|
|
85
|
+
</Dropdown>
|
|
86
|
+
</SearchBar>
|
|
87
|
+
</div>
|
|
66
88
|
|
|
67
|
-
|
|
89
|
+
<Heading type='h6' className='mt-1 mb-1'>Features</Heading>
|
|
90
|
+
<BoxedList>
|
|
91
|
+
<BoxedListItem clickable={true}>Features -- template one cras fringilla</BoxedListItem>
|
|
92
|
+
<BoxedListItem clickable={true}>Features -- template two sit quam</BoxedListItem>
|
|
93
|
+
<BoxedListItem clickable={true}>Features -- template fermentum quam venenatis</BoxedListItem>
|
|
94
|
+
<BoxedListItem clickable={true}>Features -- template dapibus mattis</BoxedListItem>
|
|
95
|
+
</BoxedList>
|
|
96
|
+
<Heading type='h6' className='mt-2 mb-1'>Sports</Heading>
|
|
97
|
+
<BoxedList>
|
|
98
|
+
<BoxedListItem clickable={true}>Sports -- template one fermentum venenatis</BoxedListItem>
|
|
99
|
+
<BoxedListItem clickable={true}>Sports -- template two cras condimentum</BoxedListItem>
|
|
100
|
+
<BoxedListItem clickable={true}>Sports -- template bibendum commodo nibh</BoxedListItem>
|
|
101
|
+
</BoxedList>
|
|
102
|
+
|
|
103
|
+
</Modal>
|
|
104
|
+
<h3 className="docs-page__h3 ">Planning Templates</h3>
|
|
105
|
+
<SearchBar placeholder='Search' boxed={true}>
|
|
106
|
+
<Dropdown
|
|
107
|
+
items={[
|
|
108
|
+
{ label: 'Action 1', onSelect: () => 1 },
|
|
109
|
+
{ label: 'Action 2', onSelect: () => 1 },
|
|
110
|
+
{ label: 'Action 3', onSelect: () => 1 },
|
|
111
|
+
]}>
|
|
112
|
+
Toogle button
|
|
113
|
+
</Dropdown>
|
|
114
|
+
</SearchBar>
|
|
68
115
|
<hr />
|
|
116
|
+
<h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
|
|
69
117
|
<div className='sd-pagination'>
|
|
70
118
|
<button className='sd-pagination__item sd-pagination__item--start' disabled>
|
|
71
119
|
<Icon name='backward-thin' />
|
|
@@ -169,7 +217,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
169
217
|
label='Text input'
|
|
170
218
|
placeholder='Enter text'
|
|
171
219
|
disabled={true} />
|
|
172
|
-
<DatePicker
|
|
220
|
+
{/* <DatePicker
|
|
173
221
|
value={this.state.date}
|
|
174
222
|
onChange={(date) => {
|
|
175
223
|
this.setState({date});
|
|
@@ -189,7 +237,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
189
237
|
onChange={(time) => {
|
|
190
238
|
this.setState({time});
|
|
191
239
|
}}
|
|
192
|
-
/>
|
|
240
|
+
/> */}
|
|
193
241
|
<Button text="Clear" onClick={()=> false} />
|
|
194
242
|
<Button text="Cancel" onClick={()=> false} />
|
|
195
243
|
<Button text="Save" type='primary' onClick={()=> false} />
|
|
@@ -216,7 +264,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
216
264
|
inlineLabel={true}
|
|
217
265
|
labelHidden={true}
|
|
218
266
|
disabled={false} />
|
|
219
|
-
<DatePicker
|
|
267
|
+
{/* <DatePicker
|
|
220
268
|
value={this.state.date}
|
|
221
269
|
onChange={(date) => {
|
|
222
270
|
this.setState({date});
|
|
@@ -239,7 +287,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
239
287
|
onChange={(time) => {
|
|
240
288
|
this.setState({time});
|
|
241
289
|
}}
|
|
242
|
-
/>
|
|
290
|
+
/> */}
|
|
243
291
|
<Button text="Save" type='primary' onClick={()=> false} />
|
|
244
292
|
</FormRowNew>
|
|
245
293
|
|
|
@@ -262,7 +310,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
262
310
|
placeholder='Enter text'
|
|
263
311
|
labelHidden={true}
|
|
264
312
|
disabled={false} />
|
|
265
|
-
<DatePicker
|
|
313
|
+
{/* <DatePicker
|
|
266
314
|
value={this.state.date}
|
|
267
315
|
onChange={(date) => {
|
|
268
316
|
this.setState({date});
|
|
@@ -273,8 +321,8 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
273
321
|
info='Nullam Sollicitudin'
|
|
274
322
|
error='Error message'
|
|
275
323
|
inlineLabel={false}
|
|
276
|
-
/>
|
|
277
|
-
<TimePicker
|
|
324
|
+
/> */}
|
|
325
|
+
{/* <TimePicker
|
|
278
326
|
value={this.state.time}
|
|
279
327
|
// disabled={true}
|
|
280
328
|
required={true}
|
|
@@ -282,7 +330,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
282
330
|
onChange={(time) => {
|
|
283
331
|
this.setState({time});
|
|
284
332
|
}}
|
|
285
|
-
/>
|
|
333
|
+
/> */}
|
|
286
334
|
<Button text="Save" type='primary' onClick={()=> false} />
|
|
287
335
|
</FormRowNew>
|
|
288
336
|
|
package/package.json
CHANGED
|
@@ -58,8 +58,8 @@ var Modal = /** @class */ (function (_super) {
|
|
|
58
58
|
_a["p-dialog-content--".concat(this.props.size)] = this.props.size,
|
|
59
59
|
_a['p-dialog-content-bg--default'] = this.props.contentBg === undefined,
|
|
60
60
|
_a["p-dialog-content-bg--".concat(this.props.contentBg)] = this.props.contentBg,
|
|
61
|
-
_a['p-dialog-content--
|
|
62
|
-
_a["p-dialog-content--".concat(this.props.contentPadding)] = this.props.contentPadding,
|
|
61
|
+
_a['p-dialog-content--padding-small'] = this.props.contentPadding === undefined,
|
|
62
|
+
_a["p-dialog-content--padding-".concat(this.props.contentPadding)] = this.props.contentPadding,
|
|
63
63
|
_a), this.props.className);
|
|
64
64
|
return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
|
|
65
65
|
React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: (_b = this.props.onHide) !== null && _b !== void 0 ? _b : lodash_1.noop, zIndex: this.props.zIndex ? this.props.zIndex : 1000, position: this.props.position, closable: this.props.onHide != null ? true : false }, this.props.children)));
|
|
@@ -81,6 +81,7 @@ var SearchBar = /** @class */ (function (_super) {
|
|
|
81
81
|
_a['sd-searchbar--boxed'] = this.state.boxed,
|
|
82
82
|
_a));
|
|
83
83
|
return (React.createElement("div", { className: classes, ref: this.inputRef },
|
|
84
|
+
this.props.children,
|
|
84
85
|
React.createElement("label", { className: "sd-searchbar__icon" }),
|
|
85
86
|
React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onKeyPress: function (event) {
|
|
86
87
|
if (event.key === 'Enter') {
|