superdesk-ui-framework 4.0.6 → 4.0.8
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/components/_list-item.scss +3 -3
- package/app/styles/layout/_editor.scss +8 -1
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -0
- package/dist/components/Togglebox.tsx +5 -5
- package/dist/examples.bundle.js +3 -2
- package/dist/superdesk-ui.bundle.css +8 -2
- package/dist/superdesk-ui.bundle.js +1 -0
- package/examples/pages/components/Togglebox.tsx +5 -5
- package/package.json +1 -1
- package/react/components/Layouts/AuthoringInnerHeader.js +1 -0
|
@@ -100,7 +100,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
|
|
|
100
100
|
|
|
101
101
|
.sd-list-item--no-hover {
|
|
102
102
|
&:hover {
|
|
103
|
-
background-color:
|
|
103
|
+
background-color: transparent;
|
|
104
104
|
cursor: default;
|
|
105
105
|
}
|
|
106
106
|
}
|
|
@@ -390,7 +390,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
|
|
|
390
390
|
text-transform: uppercase;
|
|
391
391
|
flex-shrink: 0;
|
|
392
392
|
}
|
|
393
|
-
|
|
393
|
+
|
|
394
394
|
.sd-list-item__headline {
|
|
395
395
|
color: $sd-text;
|
|
396
396
|
font-weight: 500;
|
|
@@ -682,7 +682,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
|
|
|
682
682
|
.sd-list-header__number {
|
|
683
683
|
margin-inline-start: 1rem;
|
|
684
684
|
}
|
|
685
|
-
|
|
685
|
+
|
|
686
686
|
.sd-list-header__stretch-bar {
|
|
687
687
|
flex-grow: 1;
|
|
688
688
|
height: 1px;
|
|
@@ -207,6 +207,14 @@
|
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
+
/**
|
|
211
|
+
max-height is used for animation, but might cause issues when content height is greater
|
|
212
|
+
the class should only be applied if header has the capability to be collapsed
|
|
213
|
+
*/
|
|
214
|
+
.sd-editor-content__authoring-header--collapsible {
|
|
215
|
+
max-height: 1400px;
|
|
216
|
+
}
|
|
217
|
+
|
|
210
218
|
.sd-editor-content__authoring-header {
|
|
211
219
|
grid-column: 1 / 3;
|
|
212
220
|
grid-row: authoringHeader;
|
|
@@ -218,7 +226,6 @@
|
|
|
218
226
|
padding: $sd-base-increment * 3 $sd-base-increment * 1.5;
|
|
219
227
|
z-index: 2;
|
|
220
228
|
box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.25);
|
|
221
|
-
max-height: 1400px;
|
|
222
229
|
transition: max-height 0.12s ease-in;
|
|
223
230
|
|
|
224
231
|
&>.authoring-header__holder {
|
|
@@ -28,6 +28,7 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
|
|
|
28
28
|
|
|
29
29
|
const classes = classNames('sd-editor-content__authoring-header', {
|
|
30
30
|
'authoring-header--collapsed': this.state.collapsed,
|
|
31
|
+
'sd-editor-content__authoring-header--collapsible': !hideCollapseButton,
|
|
31
32
|
});
|
|
32
33
|
const {headerPadding} = this.props;
|
|
33
34
|
|
|
@@ -49,15 +49,15 @@ const ToggleboxDocs = () => {
|
|
|
49
49
|
<ToggleBox variant='simple' title="Togglebox - circled chevron" circledChevron={true}>Togglebox content</ToggleBox>
|
|
50
50
|
<ToggleBox variant='simple' title="Large title" largeTitle={true} circledChevron={true}>
|
|
51
51
|
<div className="px-4 text-sm line-height-lg">
|
|
52
|
-
<p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.
|
|
53
|
-
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
|
|
52
|
+
<p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.
|
|
53
|
+
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
|
|
54
54
|
Curabitur blandit tempus porttitor.</p>
|
|
55
55
|
|
|
56
56
|
<p className="mb-2">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.
|
|
57
|
-
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere
|
|
57
|
+
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere
|
|
58
58
|
erat a ante venenatis dapibus posuere velit aliquet.</p>
|
|
59
59
|
|
|
60
|
-
<p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id
|
|
60
|
+
<p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id
|
|
61
61
|
ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
|
62
62
|
</div>
|
|
63
63
|
</ToggleBox>
|
|
@@ -98,7 +98,7 @@ const ToggleboxDocs = () => {
|
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
}
|
|
101
|
-
|
|
101
|
+
getToggleButtonLabel={(open) => open ? 'show less' : 'show more'}
|
|
102
102
|
onToggle={(isOpen) => false}
|
|
103
103
|
>
|
|
104
104
|
<div>
|
package/dist/examples.bundle.js
CHANGED
|
@@ -150584,6 +150584,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
|
|
|
150584
150584
|
var hideCollapseButton = (_a = this.props.hideCollapseButton) !== null && _a !== void 0 ? _a : false;
|
|
150585
150585
|
var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
|
|
150586
150586
|
'authoring-header--collapsed': this.state.collapsed,
|
|
150587
|
+
'sd-editor-content__authoring-header--collapsible': !hideCollapseButton,
|
|
150587
150588
|
});
|
|
150588
150589
|
var headerPadding = this.props.headerPadding;
|
|
150589
150590
|
return (React.createElement("header", { style: {
|
|
@@ -175206,7 +175207,7 @@ var ToggleboxDocs = function () {
|
|
|
175206
175207
|
React.createElement("div", { className: "sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5" },
|
|
175207
175208
|
React.createElement(app_typescript_1.Label, { text: 'draft', style: 'translucent' }),
|
|
175208
175209
|
React.createElement("span", { className: "sd-margin-s--auto" },
|
|
175209
|
-
React.createElement(app_typescript_1.AvatarGroup, { size: "x-small", items: avatars }))))),
|
|
175210
|
+
React.createElement(app_typescript_1.AvatarGroup, { size: "x-small", items: avatars }))))), getToggleButtonLabel: function (open) { return open ? 'show less' : 'show more'; }, onToggle: function (isOpen) { return false; } },
|
|
175210
175211
|
React.createElement("div", null,
|
|
175211
175212
|
React.createElement(app_typescript_1.FormLabel, { text: 'Name' }),
|
|
175212
175213
|
React.createElement(app_typescript_1.Text, { size: 'small', weight: 'medium' }, "Australian Open 2024")),
|
|
@@ -185392,7 +185393,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
185392
185393
|
/* 938 */
|
|
185393
185394
|
/***/ (function(module, exports) {
|
|
185394
185395
|
|
|
185395
|
-
module.exports = {"name":"superdesk-ui-framework","version":"4.0.
|
|
185396
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.8","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":"*"}}
|
|
185396
185397
|
|
|
185397
185398
|
/***/ }),
|
|
185398
185399
|
/* 939 */
|
|
@@ -42671,6 +42671,13 @@ a.text-link {
|
|
|
42671
42671
|
line-height: 1.5;
|
|
42672
42672
|
margin-block-end: 24px; }
|
|
42673
42673
|
|
|
42674
|
+
/**
|
|
42675
|
+
max-height is used for animation, but might cause issues when content height is greater
|
|
42676
|
+
the class should only be applied if header has the capability to be collapsed
|
|
42677
|
+
*/
|
|
42678
|
+
.sd-editor-content__authoring-header--collapsible {
|
|
42679
|
+
max-height: 1400px; }
|
|
42680
|
+
|
|
42674
42681
|
.sd-editor-content__authoring-header {
|
|
42675
42682
|
grid-column: 1 / 3;
|
|
42676
42683
|
grid-row: authoringHeader;
|
|
@@ -42682,7 +42689,6 @@ a.text-link {
|
|
|
42682
42689
|
padding: 2.4rem 1.2rem;
|
|
42683
42690
|
z-index: 2;
|
|
42684
42691
|
box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.25);
|
|
42685
|
-
max-height: 1400px;
|
|
42686
42692
|
transition: max-height 0.12s ease-in; }
|
|
42687
42693
|
.sd-editor-content__authoring-header > .authoring-header__holder {
|
|
42688
42694
|
height: auto;
|
|
@@ -42953,7 +42959,7 @@ a.text-link {
|
|
|
42953
42959
|
background-color: transparent; }
|
|
42954
42960
|
|
|
42955
42961
|
.sd-list-item--no-hover:hover {
|
|
42956
|
-
background-color:
|
|
42962
|
+
background-color: transparent;
|
|
42957
42963
|
cursor: default; }
|
|
42958
42964
|
|
|
42959
42965
|
.sd-list-item--inactive {
|
|
@@ -149705,6 +149705,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
|
|
|
149705
149705
|
var hideCollapseButton = (_a = this.props.hideCollapseButton) !== null && _a !== void 0 ? _a : false;
|
|
149706
149706
|
var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
|
|
149707
149707
|
'authoring-header--collapsed': this.state.collapsed,
|
|
149708
|
+
'sd-editor-content__authoring-header--collapsible': !hideCollapseButton,
|
|
149708
149709
|
});
|
|
149709
149710
|
var headerPadding = this.props.headerPadding;
|
|
149710
149711
|
return (React.createElement("header", { style: {
|
|
@@ -49,15 +49,15 @@ const ToggleboxDocs = () => {
|
|
|
49
49
|
<ToggleBox variant='simple' title="Togglebox - circled chevron" circledChevron={true}>Togglebox content</ToggleBox>
|
|
50
50
|
<ToggleBox variant='simple' title="Large title" largeTitle={true} circledChevron={true}>
|
|
51
51
|
<div className="px-4 text-sm line-height-lg">
|
|
52
|
-
<p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.
|
|
53
|
-
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
|
|
52
|
+
<p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.
|
|
53
|
+
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
|
|
54
54
|
Curabitur blandit tempus porttitor.</p>
|
|
55
55
|
|
|
56
56
|
<p className="mb-2">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.
|
|
57
|
-
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere
|
|
57
|
+
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere
|
|
58
58
|
erat a ante venenatis dapibus posuere velit aliquet.</p>
|
|
59
59
|
|
|
60
|
-
<p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id
|
|
60
|
+
<p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id
|
|
61
61
|
ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
|
62
62
|
</div>
|
|
63
63
|
</ToggleBox>
|
|
@@ -98,7 +98,7 @@ const ToggleboxDocs = () => {
|
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
100
100
|
}
|
|
101
|
-
|
|
101
|
+
getToggleButtonLabel={(open) => open ? 'show less' : 'show more'}
|
|
102
102
|
onToggle={(isOpen) => false}
|
|
103
103
|
>
|
|
104
104
|
<div>
|
package/package.json
CHANGED
|
@@ -60,6 +60,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
|
|
|
60
60
|
var hideCollapseButton = (_a = this.props.hideCollapseButton) !== null && _a !== void 0 ? _a : false;
|
|
61
61
|
var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
|
|
62
62
|
'authoring-header--collapsed': this.state.collapsed,
|
|
63
|
+
'sd-editor-content__authoring-header--collapsible': !hideCollapseButton,
|
|
63
64
|
});
|
|
64
65
|
var headerPadding = this.props.headerPadding;
|
|
65
66
|
return (React.createElement("header", { style: {
|