superdesk-ui-framework 3.1.26 → 3.1.28
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/layout/_editor.scss +20 -1
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +16 -5
- package/app-typescript/components/Layouts/AuthoringMain.tsx +11 -2
- package/dist/examples.bundle.js +15 -5
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +3 -0
- package/dist/superdesk-ui.bundle.css +10 -1
- package/dist/superdesk-ui.bundle.js +11 -3
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +3 -0
- package/package.json +1 -1
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +2 -0
- package/react/components/Layouts/AuthoringInnerHeader.js +10 -2
- package/react/components/Layouts/AuthoringMain.d.ts +7 -0
- package/react/components/Layouts/AuthoringMain.js +1 -1
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
|
|
234
234
|
&.authoring-header--collapsed {
|
|
235
235
|
max-height: 0;
|
|
236
|
-
padding: 0 $sd-base-increment * 1.5;
|
|
236
|
+
padding: 0 $sd-base-increment * 1.5 !important;
|
|
237
237
|
|
|
238
238
|
.authoring-header__toggle {
|
|
239
239
|
i {
|
|
@@ -247,6 +247,25 @@
|
|
|
247
247
|
overflow: hidden;
|
|
248
248
|
transition: opacity 0.4s 0.1s;
|
|
249
249
|
}
|
|
250
|
+
|
|
251
|
+
&.authoring-header--padding-small,
|
|
252
|
+
&.authoring-header--padding-medium,
|
|
253
|
+
&.authoring-header--padding-large {
|
|
254
|
+
padding-block-start: 0 !important;
|
|
255
|
+
padding-block-end: 0 !important;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
&.authoring-header--padding-small {
|
|
260
|
+
padding: $sd-base-increment * 3 $sd-base-increment * 1.5;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
&.authoring-header--padding-medium {
|
|
264
|
+
padding: $sd-base-increment * 3 $sd-base-increment * 3;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
&.authoring-header--padding-large {
|
|
268
|
+
padding: $sd-base-increment * 3 $sd-base-increment * 4;
|
|
250
269
|
}
|
|
251
270
|
}
|
|
252
271
|
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import {Icon} from '../Icon';
|
|
4
|
+
import {HeaderPadding} from './AuthoringMain';
|
|
4
5
|
|
|
5
6
|
interface IProps {
|
|
6
7
|
children?: React.ReactNode;
|
|
7
8
|
collapsed?: boolean;
|
|
9
|
+
headerPadding?: HeaderPadding;
|
|
8
10
|
}
|
|
11
|
+
|
|
9
12
|
interface IState {
|
|
10
13
|
collapsed: boolean;
|
|
11
14
|
}
|
|
@@ -20,13 +23,21 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
|
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
render() {
|
|
23
|
-
const classes = classNames(
|
|
24
|
-
'
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
const classes = classNames('sd-editor-content__authoring-header', {
|
|
27
|
+
'authoring-header--collapsed': this.state.collapsed,
|
|
28
|
+
});
|
|
29
|
+
const {headerPadding} = this.props;
|
|
27
30
|
|
|
28
31
|
return (
|
|
29
|
-
<header
|
|
32
|
+
<header
|
|
33
|
+
style={{
|
|
34
|
+
paddingBlockStart: headerPadding?.top,
|
|
35
|
+
paddingBlockEnd: headerPadding?.bottom,
|
|
36
|
+
paddingInlineStart: headerPadding?.inlineStart,
|
|
37
|
+
paddingInlineEnd: headerPadding?.inlineEnd,
|
|
38
|
+
}}
|
|
39
|
+
className={classes}
|
|
40
|
+
>
|
|
30
41
|
<div className="authoring-header__holder">
|
|
31
42
|
{this.props.children}
|
|
32
43
|
</div>
|
|
@@ -7,15 +7,22 @@ import {
|
|
|
7
7
|
AuthoringInnerHeader,
|
|
8
8
|
AuthoringInnerBody,
|
|
9
9
|
AuthorinInnerSideBar,
|
|
10
|
-
|
|
11
10
|
} from './';
|
|
12
11
|
|
|
12
|
+
export type HeaderPadding = {
|
|
13
|
+
inlineStart?: React.CSSProperties['padding'];
|
|
14
|
+
inlineEnd?: React.CSSProperties['padding'];
|
|
15
|
+
top?: React.CSSProperties['padding'];
|
|
16
|
+
bottom?: React.CSSProperties['padding'];
|
|
17
|
+
};
|
|
18
|
+
|
|
13
19
|
interface IProps {
|
|
14
20
|
toolBar?: React.ReactNode;
|
|
15
21
|
authoringMain?: React.ReactNode;
|
|
16
22
|
authoringHeader?: React.ReactNode;
|
|
17
23
|
authoringBookmarks?: React.ReactNode;
|
|
18
24
|
headerCollapsed?: boolean;
|
|
25
|
+
headerPadding?: HeaderPadding;
|
|
19
26
|
toolbarCustom?: boolean;
|
|
20
27
|
noPaddingForContent?: boolean;
|
|
21
28
|
}
|
|
@@ -31,7 +38,9 @@ export class AuthoringMain extends React.PureComponent<IProps> {
|
|
|
31
38
|
)}
|
|
32
39
|
<AuthoringMainContent>
|
|
33
40
|
{this.props.authoringHeader && (
|
|
34
|
-
<AuthoringInnerHeader
|
|
41
|
+
<AuthoringInnerHeader
|
|
42
|
+
headerPadding={this.props.headerPadding}
|
|
43
|
+
collapsed={this.props.headerCollapsed}>
|
|
35
44
|
{this.props.authoringHeader}
|
|
36
45
|
</AuthoringInnerHeader>
|
|
37
46
|
)}
|
package/dist/examples.bundle.js
CHANGED
|
@@ -150205,7 +150205,7 @@ var AuthoringMain = /** @class */ (function (_super) {
|
|
|
150205
150205
|
return (React.createElement(_1.AuthoringMainContainer, null,
|
|
150206
150206
|
this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
|
|
150207
150207
|
React.createElement(_1.AuthoringMainContent, null,
|
|
150208
|
-
this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
|
|
150208
|
+
this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
|
|
150209
150209
|
this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
|
|
150210
150210
|
React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
|
|
150211
150211
|
};
|
|
@@ -150464,8 +150464,16 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
|
|
|
150464
150464
|
}
|
|
150465
150465
|
AuthoringInnerHeader.prototype.render = function () {
|
|
150466
150466
|
var _this = this;
|
|
150467
|
-
var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
|
|
150468
|
-
|
|
150467
|
+
var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
|
|
150468
|
+
'authoring-header--collapsed': this.state.collapsed,
|
|
150469
|
+
});
|
|
150470
|
+
var headerPadding = this.props.headerPadding;
|
|
150471
|
+
return (React.createElement("header", { style: {
|
|
150472
|
+
paddingBlockStart: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.top,
|
|
150473
|
+
paddingBlockEnd: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.bottom,
|
|
150474
|
+
paddingInlineStart: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.inlineStart,
|
|
150475
|
+
paddingInlineEnd: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.inlineEnd,
|
|
150476
|
+
}, className: classes },
|
|
150469
150477
|
React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
|
|
150470
150478
|
React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
|
|
150471
150479
|
React.createElement(Icon_1.Icon, { name: "chevron-up-thin" }))));
|
|
@@ -179224,7 +179232,9 @@ var EditorTest = /** @class */ (function (_super) {
|
|
|
179224
179232
|
_this.setState({
|
|
179225
179233
|
activeTab: val,
|
|
179226
179234
|
});
|
|
179227
|
-
} })), main: (React.createElement(Layout.AuthoringMain, {
|
|
179235
|
+
} })), main: (React.createElement(Layout.AuthoringMain, { headerPadding: {
|
|
179236
|
+
top: 10,
|
|
179237
|
+
}, toolBar: (React.createElement(React.Fragment, null,
|
|
179228
179238
|
React.createElement("div", { className: "sd-editor-toolbar__content" },
|
|
179229
179239
|
React.createElement("dl", null,
|
|
179230
179240
|
React.createElement("dt", null, "Created"),
|
|
@@ -185530,7 +185540,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
185530
185540
|
/* 935 */
|
|
185531
185541
|
/***/ (function(module, exports) {
|
|
185532
185542
|
|
|
185533
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.1.
|
|
185543
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.1.28","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/enzyme-adapter-react-16":"^1.0.6","@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","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","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","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","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":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","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-scrollspy":"^3.4.3"},"peerDependencies":{"moment":"*"}}
|
|
185534
185544
|
|
|
185535
185545
|
/***/ }),
|
|
185536
185546
|
/* 936 */
|
|
@@ -42694,7 +42694,7 @@ a.text-link {
|
|
|
42694
42694
|
max-width: var(--width__container--xxx-large); }
|
|
42695
42695
|
.sd-editor-content__authoring-header.authoring-header--collapsed {
|
|
42696
42696
|
max-height: 0;
|
|
42697
|
-
padding: 0 1.2rem; }
|
|
42697
|
+
padding: 0 1.2rem !important; }
|
|
42698
42698
|
.sd-editor-content__authoring-header.authoring-header--collapsed .authoring-header__toggle i {
|
|
42699
42699
|
transform: rotate(180deg); }
|
|
42700
42700
|
.sd-editor-content__authoring-header.authoring-header--collapsed > .authoring-header__holder {
|
|
@@ -42702,6 +42702,15 @@ a.text-link {
|
|
|
42702
42702
|
opacity: 0;
|
|
42703
42703
|
overflow: hidden;
|
|
42704
42704
|
transition: opacity 0.4s 0.1s; }
|
|
42705
|
+
.sd-editor-content__authoring-header.authoring-header--collapsed.authoring-header--padding-small, .sd-editor-content__authoring-header.authoring-header--collapsed.authoring-header--padding-medium, .sd-editor-content__authoring-header.authoring-header--collapsed.authoring-header--padding-large {
|
|
42706
|
+
padding-block-start: 0 !important;
|
|
42707
|
+
padding-block-end: 0 !important; }
|
|
42708
|
+
.sd-editor-content__authoring-header.authoring-header--padding-small {
|
|
42709
|
+
padding: 2.4rem 1.2rem; }
|
|
42710
|
+
.sd-editor-content__authoring-header.authoring-header--padding-medium {
|
|
42711
|
+
padding: 2.4rem 2.4rem; }
|
|
42712
|
+
.sd-editor-content__authoring-header.authoring-header--padding-large {
|
|
42713
|
+
padding: 2.4rem 3.2rem; }
|
|
42705
42714
|
|
|
42706
42715
|
.authoring-header__toggle {
|
|
42707
42716
|
position: absolute;
|
|
@@ -149326,7 +149326,7 @@ var AuthoringMain = /** @class */ (function (_super) {
|
|
|
149326
149326
|
return (React.createElement(_1.AuthoringMainContainer, null,
|
|
149327
149327
|
this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
|
|
149328
149328
|
React.createElement(_1.AuthoringMainContent, null,
|
|
149329
|
-
this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
|
|
149329
|
+
this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
|
|
149330
149330
|
this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
|
|
149331
149331
|
React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
|
|
149332
149332
|
};
|
|
@@ -149585,8 +149585,16 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
|
|
|
149585
149585
|
}
|
|
149586
149586
|
AuthoringInnerHeader.prototype.render = function () {
|
|
149587
149587
|
var _this = this;
|
|
149588
|
-
var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
|
|
149589
|
-
|
|
149588
|
+
var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
|
|
149589
|
+
'authoring-header--collapsed': this.state.collapsed,
|
|
149590
|
+
});
|
|
149591
|
+
var headerPadding = this.props.headerPadding;
|
|
149592
|
+
return (React.createElement("header", { style: {
|
|
149593
|
+
paddingBlockStart: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.top,
|
|
149594
|
+
paddingBlockEnd: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.bottom,
|
|
149595
|
+
paddingInlineStart: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.inlineStart,
|
|
149596
|
+
paddingInlineEnd: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.inlineEnd,
|
|
149597
|
+
}, className: classes },
|
|
149590
149598
|
React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
|
|
149591
149599
|
React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
|
|
149592
149600
|
React.createElement(Icon_1.Icon, { name: "chevron-up-thin" }))));
|
package/package.json
CHANGED
|
@@ -56,8 +56,16 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
|
|
|
56
56
|
}
|
|
57
57
|
AuthoringInnerHeader.prototype.render = function () {
|
|
58
58
|
var _this = this;
|
|
59
|
-
var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
|
|
60
|
-
|
|
59
|
+
var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
|
|
60
|
+
'authoring-header--collapsed': this.state.collapsed,
|
|
61
|
+
});
|
|
62
|
+
var headerPadding = this.props.headerPadding;
|
|
63
|
+
return (React.createElement("header", { style: {
|
|
64
|
+
paddingBlockStart: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.top,
|
|
65
|
+
paddingBlockEnd: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.bottom,
|
|
66
|
+
paddingInlineStart: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.inlineStart,
|
|
67
|
+
paddingInlineEnd: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.inlineEnd,
|
|
68
|
+
}, className: classes },
|
|
61
69
|
React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
|
|
62
70
|
React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
|
|
63
71
|
React.createElement(Icon_1.Icon, { name: "chevron-up-thin" }))));
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
export type HeaderPadding = {
|
|
3
|
+
inlineStart?: React.CSSProperties['padding'];
|
|
4
|
+
inlineEnd?: React.CSSProperties['padding'];
|
|
5
|
+
top?: React.CSSProperties['padding'];
|
|
6
|
+
bottom?: React.CSSProperties['padding'];
|
|
7
|
+
};
|
|
2
8
|
interface IProps {
|
|
3
9
|
toolBar?: React.ReactNode;
|
|
4
10
|
authoringMain?: React.ReactNode;
|
|
5
11
|
authoringHeader?: React.ReactNode;
|
|
6
12
|
authoringBookmarks?: React.ReactNode;
|
|
7
13
|
headerCollapsed?: boolean;
|
|
14
|
+
headerPadding?: HeaderPadding;
|
|
8
15
|
toolbarCustom?: boolean;
|
|
9
16
|
noPaddingForContent?: boolean;
|
|
10
17
|
}
|
|
@@ -50,7 +50,7 @@ var AuthoringMain = /** @class */ (function (_super) {
|
|
|
50
50
|
return (React.createElement(_1.AuthoringMainContainer, null,
|
|
51
51
|
this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
|
|
52
52
|
React.createElement(_1.AuthoringMainContent, null,
|
|
53
|
-
this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
|
|
53
|
+
this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
|
|
54
54
|
this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
|
|
55
55
|
React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
|
|
56
56
|
};
|