superdesk-ui-framework 3.1.25 → 3.1.27

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.
Files changed (15) hide show
  1. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +16 -9
  2. package/app-typescript/components/Layouts/AuthoringMain.tsx +10 -5
  3. package/dist/examples.bundle.js +18 -13
  4. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +3 -1
  5. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +0 -1
  6. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +0 -2
  7. package/dist/superdesk-ui.bundle.js +11 -8
  8. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +3 -1
  9. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +0 -1
  10. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +0 -2
  11. package/package.json +1 -1
  12. package/react/components/Layouts/AuthoringInnerHeader.d.ts +2 -1
  13. package/react/components/Layouts/AuthoringInnerHeader.js +10 -7
  14. package/react/components/Layouts/AuthoringMain.d.ts +7 -1
  15. package/react/components/Layouts/AuthoringMain.js +1 -1
package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx CHANGED
@@ -1,12 +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;
8
- headerStyles?: string;
9
+ headerPadding?: HeaderPadding;
9
10
  }
11
+
10
12
  interface IState {
11
13
  collapsed: boolean;
12
14
  }
@@ -21,16 +23,21 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
21
23
  }
22
24
 
23
25
  render() {
24
- const classes = classNames(
25
- 'sd-editor-content__authoring-header',
26
- {
27
- 'authoring-header--collapsed': this.state.collapsed,
28
- [`${this.props.headerStyles}`]: this.props.headerStyles,
29
- },
30
- );
26
+ const classes = classNames('sd-editor-content__authoring-header', {
27
+ 'authoring-header--collapsed': this.state.collapsed,
28
+ });
29
+ const {headerPadding} = this.props;
31
30
 
32
31
  return (
33
- <header className={classes}>
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
+ >
34
41
  <div className="authoring-header__holder">
35
42
  {this.props.children}
36
43
  </div>
package/app-typescript/components/Layouts/AuthoringMain.tsx CHANGED
@@ -7,16 +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
- headerStyles?: string;
18
23
  authoringBookmarks?: React.ReactNode;
19
24
  headerCollapsed?: boolean;
25
+ headerPadding?: HeaderPadding;
20
26
  toolbarCustom?: boolean;
21
27
  noPaddingForContent?: boolean;
22
28
  }
@@ -33,9 +39,8 @@ export class AuthoringMain extends React.PureComponent<IProps> {
33
39
  <AuthoringMainContent>
34
40
  {this.props.authoringHeader && (
35
41
  <AuthoringInnerHeader
36
- headerStyles={this.props.headerStyles}
37
- collapsed={this.props.headerCollapsed}
38
- >
42
+ headerPadding={this.props.headerPadding}
43
+ collapsed={this.props.headerCollapsed}>
39
44
  {this.props.authoringHeader}
40
45
  </AuthoringInnerHeader>
41
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, { headerStyles: this.props.headerStyles, 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
  };
@@ -150463,14 +150463,17 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
150463
150463
  return _this;
150464
150464
  }
150465
150465
  AuthoringInnerHeader.prototype.render = function () {
150466
- var _a;
150467
150466
  var _this = this;
150468
- var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', (_a = {
150469
- 'authoring-header--collapsed': this.state.collapsed
150470
- },
150471
- _a["".concat(this.props.headerStyles)] = this.props.headerStyles,
150472
- _a));
150473
- return (React.createElement("header", { className: classes },
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 },
150474
150477
  React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
150475
150478
  React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
150476
150479
  React.createElement(Icon_1.Icon, { name: "chevron-up-thin" }))));
@@ -158583,7 +158586,7 @@ var RundownEditor = /** @class */ (function (_super) {
158583
158586
  React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
158584
158587
  React.createElement(index_1.NavButton, { type: 'highlight', icon: 'send-to', iconSize: 'big', text: 'Send to / Publish', onClick: function () { return false; } })))))),
158585
158588
  React.createElement(Layout.MainPanel, { padding: 'none' },
158586
- React.createElement(Layout.AuthoringMain, { headerStyles: 'authoring-header--padding-medium', toolBar: (React.createElement(React.Fragment, null,
158589
+ React.createElement(Layout.AuthoringMain, { toolBar: (React.createElement(React.Fragment, null,
158587
158590
  React.createElement("div", { className: "sd-editor-toolbar__content" },
158588
158591
  React.createElement("dl", null,
158589
158592
  React.createElement("dt", null, "Created"),
@@ -158638,7 +158641,7 @@ var RundownEditor = /** @class */ (function (_super) {
158638
158641
  React.createElement(Layout.RightPanel, { open: this.props.rightPanel },
158639
158642
  React.createElement(Layout.Panel, { size: 'x-large', side: 'right' },
158640
158643
  React.createElement(Layout.PanelContent, null,
158641
- React.createElement(Layout.AuthoringFrame, { main: React.createElement(Layout.AuthoringMain, { headerStyles: 'authoring-header--padding-medium', toolbarCustom: true, headerCollapsed: true, toolBar: (React.createElement(React.Fragment, null,
158644
+ React.createElement(Layout.AuthoringFrame, { main: React.createElement(Layout.AuthoringMain, { toolbarCustom: true, headerCollapsed: true, toolBar: (React.createElement(React.Fragment, null,
158642
158645
  React.createElement(index_1.SubNav, { className: 'sd-shadow--z0' },
158643
158646
  React.createElement(index_1.SlidingToolbar, null,
158644
158647
  React.createElement(index_1.ButtonGroup, { align: 'start' },
@@ -179229,7 +179232,9 @@ var EditorTest = /** @class */ (function (_super) {
179229
179232
  _this.setState({
179230
179233
  activeTab: val,
179231
179234
  });
179232
- } })), main: (React.createElement(Layout.AuthoringMain, { headerStyles: 'authoring-header--padding-medium', toolBar: (React.createElement(React.Fragment, null,
179235
+ } })), main: (React.createElement(Layout.AuthoringMain, { headerPadding: {
179236
+ top: 10,
179237
+ }, toolBar: (React.createElement(React.Fragment, null,
179233
179238
  React.createElement("div", { className: "sd-editor-toolbar__content" },
179234
179239
  React.createElement("dl", null,
179235
179240
  React.createElement("dt", null, "Created"),
@@ -179508,7 +179513,7 @@ var Editor = /** @class */ (function (_super) {
179508
179513
  React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
179509
179514
  React.createElement(index_1.NavButton, { type: 'highlight', icon: 'send-to', iconSize: 'big', text: 'Send to / Publish', onClick: function () { return false; } })),
179510
179515
  React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
179511
- React.createElement(index_1.NavButton, { type: 'darker', icon: this.state.sideBarOpen ? 'forward-thin' : 'backward-thin', text: 'More actions', onClick: function () { return _this.setState({ sideBarOpen: !_this.state.sideBarOpen }); } })))))), main: (React.createElement(Layout.AuthoringMain, { headerStyles: 'authoring-header--padding-medium', toolBar: (React.createElement(React.Fragment, null,
179516
+ React.createElement(index_1.NavButton, { type: 'darker', icon: this.state.sideBarOpen ? 'forward-thin' : 'backward-thin', text: 'More actions', onClick: function () { return _this.setState({ sideBarOpen: !_this.state.sideBarOpen }); } })))))), main: (React.createElement(Layout.AuthoringMain, { toolBar: (React.createElement(React.Fragment, null,
179512
179517
  React.createElement("div", { className: "sd-editor-toolbar__content" },
179513
179518
  React.createElement("dl", null,
179514
179519
  React.createElement("dt", null, "Created"),
@@ -185535,7 +185540,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
185535
185540
  /* 935 */
185536
185541
  /***/ (function(module, exports) {
185537
185542
 
185538
- module.exports = {"name":"superdesk-ui-framework","version":"3.1.25","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":"*"}}
185543
+ module.exports = {"name":"superdesk-ui-framework","version":"3.1.27","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":"*"}}
185539
185544
 
185540
185545
  /***/ }),
185541
185546
  /* 936 */
package/dist/playgrounds/react-playgrounds/EditorTest.tsx CHANGED
@@ -122,7 +122,9 @@ export class EditorTest extends React.Component<IProps, IState> {
122
122
  )}
123
123
  main={(
124
124
  <Layout.AuthoringMain
125
- headerStyles='authoring-header--padding-medium'
125
+ headerPadding={{
126
+ top: 10,
127
+ }}
126
128
  toolBar={(
127
129
  <React.Fragment>
128
130
  <div className="sd-editor-toolbar__content">
package/dist/playgrounds/react-playgrounds/Multiedit.tsx CHANGED
@@ -134,7 +134,6 @@ export class Editor extends React.Component<{}, IEditor> {
134
134
  )}
135
135
  main={(
136
136
  <Layout.AuthoringMain
137
- headerStyles='authoring-header--padding-medium'
138
137
  toolBar={(
139
138
  <React.Fragment>
140
139
  <div className="sd-editor-toolbar__content">
package/dist/playgrounds/react-playgrounds/RundownEditor.tsx CHANGED
@@ -175,7 +175,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
175
175
 
176
176
  <Layout.MainPanel padding='none'>
177
177
  <Layout.AuthoringMain
178
- headerStyles='authoring-header--padding-medium'
179
178
  toolBar={(
180
179
  <React.Fragment>
181
180
  <div className="sd-editor-toolbar__content">
@@ -341,7 +340,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
341
340
  <Layout.AuthoringFrame
342
341
  main={
343
342
  <Layout.AuthoringMain
344
- headerStyles='authoring-header--padding-medium'
345
343
  toolbarCustom={true}
346
344
  headerCollapsed={true}
347
345
  toolBar={(
package/dist/superdesk-ui.bundle.js CHANGED
@@ -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, { headerStyles: this.props.headerStyles, 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
  };
@@ -149584,14 +149584,17 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
149584
149584
  return _this;
149585
149585
  }
149586
149586
  AuthoringInnerHeader.prototype.render = function () {
149587
- var _a;
149588
149587
  var _this = this;
149589
- var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', (_a = {
149590
- 'authoring-header--collapsed': this.state.collapsed
149591
- },
149592
- _a["".concat(this.props.headerStyles)] = this.props.headerStyles,
149593
- _a));
149594
- return (React.createElement("header", { className: classes },
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 },
149595
149598
  React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
149596
149599
  React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
149597
149600
  React.createElement(Icon_1.Icon, { name: "chevron-up-thin" }))));
package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx CHANGED
@@ -122,7 +122,9 @@ export class EditorTest extends React.Component<IProps, IState> {
122
122
  )}
123
123
  main={(
124
124
  <Layout.AuthoringMain
125
- headerStyles='authoring-header--padding-medium'
125
+ headerPadding={{
126
+ top: 10,
127
+ }}
126
128
  toolBar={(
127
129
  <React.Fragment>
128
130
  <div className="sd-editor-toolbar__content">
package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx CHANGED
@@ -134,7 +134,6 @@ export class Editor extends React.Component<{}, IEditor> {
134
134
  )}
135
135
  main={(
136
136
  <Layout.AuthoringMain
137
- headerStyles='authoring-header--padding-medium'
138
137
  toolBar={(
139
138
  <React.Fragment>
140
139
  <div className="sd-editor-toolbar__content">
package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx CHANGED
@@ -175,7 +175,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
175
175
 
176
176
  <Layout.MainPanel padding='none'>
177
177
  <Layout.AuthoringMain
178
- headerStyles='authoring-header--padding-medium'
179
178
  toolBar={(
180
179
  <React.Fragment>
181
180
  <div className="sd-editor-toolbar__content">
@@ -341,7 +340,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
341
340
  <Layout.AuthoringFrame
342
341
  main={
343
342
  <Layout.AuthoringMain
344
- headerStyles='authoring-header--padding-medium'
345
343
  toolbarCustom={true}
346
344
  headerCollapsed={true}
347
345
  toolBar={(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.1.25",
3
+ "version": "3.1.27",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Layouts/AuthoringInnerHeader.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
+ import { HeaderPadding } from './AuthoringMain';
2
3
  interface IProps {
3
4
  children?: React.ReactNode;
4
5
  collapsed?: boolean;
5
- headerStyles?: string;
6
+ headerPadding?: HeaderPadding;
6
7
  }
7
8
  interface IState {
8
9
  collapsed: boolean;
package/react/components/Layouts/AuthoringInnerHeader.js CHANGED
@@ -55,14 +55,17 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
55
55
  return _this;
56
56
  }
57
57
  AuthoringInnerHeader.prototype.render = function () {
58
- var _a;
59
58
  var _this = this;
60
- var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', (_a = {
61
- 'authoring-header--collapsed': this.state.collapsed
62
- },
63
- _a["".concat(this.props.headerStyles)] = this.props.headerStyles,
64
- _a));
65
- return (React.createElement("header", { className: classes },
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 },
66
69
  React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
67
70
  React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
68
71
  React.createElement(Icon_1.Icon, { name: "chevron-up-thin" }))));
package/react/components/Layouts/AuthoringMain.d.ts CHANGED
@@ -1,11 +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
- headerStyles?: string;
7
12
  authoringBookmarks?: React.ReactNode;
8
13
  headerCollapsed?: boolean;
14
+ headerPadding?: HeaderPadding;
9
15
  toolbarCustom?: boolean;
10
16
  noPaddingForContent?: boolean;
11
17
  }
package/react/components/Layouts/AuthoringMain.js CHANGED
@@ -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, { headerStyles: this.props.headerStyles, 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
  };