superdesk-ui-framework 3.0.1-beta.14 → 3.0.1-beta.16
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/scripts/toggleBoxNext.js +1 -1
- package/app/styles/_buttons.scss +1 -1
- package/app/styles/_content-divider.scss +5 -5
- package/app/styles/_helpers.scss +24 -1
- package/app/styles/_icon-font.scss +9 -9
- package/app/styles/_modals.scss +3 -0
- package/app/styles/_normalize.scss +4 -0
- package/app/styles/_simple-list.scss +1 -0
- package/app/styles/_table-list.scss +14 -1
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_list-item.scss +23 -16
- package/app/styles/components/_sd-collapse-box.scss +6 -6
- package/app/styles/design-tokens/_new-colors.scss +10 -5
- package/app/styles/form-elements/_input-wrap.scss +138 -0
- package/app/styles/form-elements/_inputs.scss +230 -61
- package/app/styles/interface-elements/_side-panel.scss +1 -1
- package/app/styles/layout/_editor.scss +1 -0
- package/app/styles/primereact/_pr-dialog.scss +1 -0
- package/app/styles/primereact/_pr-menu.scss +6 -5
- package/app-typescript/components/DurationInput.tsx +11 -17
- package/app-typescript/components/Form/FormLabel.tsx +8 -1
- package/app-typescript/components/Form/InputBase.tsx +12 -2
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
- package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
- package/app-typescript/components/Lists/ContentList.tsx +7 -3
- package/app-typescript/components/Lists/TableList.tsx +29 -16
- package/dist/examples.bundle.css +8 -8
- package/dist/examples.bundle.js +877 -856
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/dist/react/ContentDivider.tsx +4 -4
- package/dist/react/Inputs.tsx +1 -7
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/superdesk-ui.bundle.css +462 -176
- package/dist/superdesk-ui.bundle.js +603 -687
- package/dist/vendor.bundle.js +2 -2
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/examples/pages/react/ContentDivider.tsx +4 -4
- package/examples/pages/react/Inputs.tsx +1 -7
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/package.json +1 -1
- package/react/components/DurationInput.js +13 -18
- package/react/components/Form/FormLabel.d.ts +4 -1
- package/react/components/Form/FormLabel.js +9 -3
- package/react/components/Form/InputBase.d.ts +0 -1
- package/react/components/Form/InputBase.js +15 -1
- package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
- package/react/components/Layouts/AuthoringMain.js +1 -1
- package/react/components/Lists/ContentList.js +2 -2
- package/react/components/Lists/TableList.d.ts +4 -0
- package/react/components/Lists/TableList.js +13 -11
@@ -46,7 +46,7 @@ var AuthoringMain = /** @class */ (function (_super) {
|
|
46
46
|
return (React.createElement(_1.AuthoringMainContainer, null,
|
47
47
|
this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
|
48
48
|
React.createElement(_1.AuthoringMainContent, null,
|
49
|
-
this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding }, this.props.authoringHeader)),
|
49
|
+
this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
|
50
50
|
this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
|
51
51
|
React.createElement(_1.AuthoringInnerBody, null, this.props.children))));
|
52
52
|
};
|
@@ -74,7 +74,7 @@ var ContentListItem = /** @class */ (function (_super) {
|
|
74
74
|
'fetched': this.props.archived,
|
75
75
|
'actioning': this.props.loading,
|
76
76
|
});
|
77
|
-
return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
|
77
|
+
return (React.createElement("div", { role: 'listitem', className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
|
78
78
|
this.props.locked
|
79
79
|
? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
|
80
80
|
: React.createElement("div", { className: "sd-list-item__border" }),
|
@@ -97,7 +97,7 @@ var ContentList = /** @class */ (function (_super) {
|
|
97
97
|
}
|
98
98
|
ContentList.prototype.render = function () {
|
99
99
|
var classes = (0, classnames_1.default)('sd-list-item-group sd-list-item-group--space-between-items');
|
100
|
-
return (React.createElement("
|
100
|
+
return (React.createElement("div", { role: 'list', className: classes }, this.props.items.map(function (item, index) {
|
101
101
|
return React.createElement(ContentListItem, { key: index, itemColum: item.itemColum, locked: item.locked, action: item.action, loading: item.loading, activated: item.activated, selected: item.selected, archived: item.archived, onClick: item.onClick, onDoubleClick: item.onDoubleClick });
|
102
102
|
})));
|
103
103
|
};
|
@@ -20,6 +20,8 @@ export interface IPropsArrayItem {
|
|
20
20
|
hexColor?: string;
|
21
21
|
onClick?(): void;
|
22
22
|
onDoubleClick?(): void;
|
23
|
+
locked?: boolean;
|
24
|
+
positionLocked?: boolean;
|
23
25
|
}
|
24
26
|
interface IState {
|
25
27
|
items: Array<IPropsArrayItem>;
|
@@ -41,6 +43,8 @@ export interface IPropsItem {
|
|
41
43
|
dragAndDrop?: boolean;
|
42
44
|
hexColor?: string;
|
43
45
|
showDragHandle?: 'always' | 'onHover' | 'none';
|
46
|
+
locked?: boolean;
|
47
|
+
positionLocked?: boolean;
|
44
48
|
onClick?(): void;
|
45
49
|
onDoubleClick?(): void;
|
46
50
|
onSelect?(): void;
|
@@ -113,30 +113,30 @@ var TableList = /** @class */ (function (_super) {
|
|
113
113
|
return (this.state.items.length > 0
|
114
114
|
? this.props.dragAndDrop
|
115
115
|
? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
|
116
|
-
React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("
|
116
|
+
React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("div", __assign({ role: 'list', className: classes, ref: provided.innerRef }, provided.droppableProps),
|
117
117
|
_this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
118
118
|
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
119
119
|
? item.onDoubleClick
|
120
120
|
: undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
|
121
121
|
? _this.props.itemsDropdown(index)
|
122
|
-
: []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
122
|
+
: []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
|
123
123
|
&& _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
|
124
124
|
provided.placeholder,
|
125
125
|
(_this.props.addItem && !_this.props.readOnly) &&
|
126
|
-
React.createElement("
|
126
|
+
React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
|
127
127
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
128
128
|
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
129
|
-
: React.createElement("
|
129
|
+
: React.createElement("div", { role: 'list', className: classes },
|
130
130
|
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
131
131
|
? item.onDoubleClick
|
132
|
-
: undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
132
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
|
133
133
|
&& _this.props.onAddItem(index, item); } })); }),
|
134
134
|
(this.props.addItem && !this.props.readOnly) &&
|
135
|
-
React.createElement("
|
135
|
+
React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
|
136
136
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
137
137
|
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
138
|
-
: (this.props.addItem && !this.props.readOnly) ? React.createElement("
|
139
|
-
React.createElement("
|
138
|
+
: (this.props.addItem && !this.props.readOnly) ? React.createElement("div", { role: 'list', className: classes },
|
139
|
+
React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
|
140
140
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
141
141
|
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
142
142
|
: null);
|
@@ -176,12 +176,14 @@ var TableListItem = /** @class */ (function (_super) {
|
|
176
176
|
var classes = (0, classnames_1.default)('table-list__item', {
|
177
177
|
'table-list__item--clickable': this.props.onClick,
|
178
178
|
'table-list__item--draggable': this.props.dragAndDrop,
|
179
|
+
'table-list__item--locked': this.props.locked,
|
180
|
+
'table-list__item--position-locked': this.props.positionLocked,
|
179
181
|
'table-list__item--drag-handles-always': !this.props.showDragHandle,
|
180
182
|
'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
|
181
183
|
});
|
182
184
|
return (this.props.addItem ?
|
183
|
-
React.createElement("
|
184
|
-
React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
|
185
|
+
React.createElement("div", { className: 'table-list__item-container' },
|
186
|
+
React.createElement("div", { role: 'listitem', onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
|
185
187
|
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
186
188
|
React.createElement("div", { className: 'table-list__item-content' },
|
187
189
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|
@@ -193,7 +195,7 @@ var TableListItem = /** @class */ (function (_super) {
|
|
193
195
|
React.createElement("div", { className: 'table-list__add-bar' },
|
194
196
|
React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
|
195
197
|
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
|
196
|
-
: React.createElement("
|
198
|
+
: React.createElement("div", { role: 'listitem', className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
|
197
199
|
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
198
200
|
React.createElement("div", { className: 'table-list__item-content' },
|
199
201
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|