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.
Files changed (56) hide show
  1. package/app/scripts/toggleBoxNext.js +1 -1
  2. package/app/styles/_buttons.scss +1 -1
  3. package/app/styles/_content-divider.scss +5 -5
  4. package/app/styles/_helpers.scss +24 -1
  5. package/app/styles/_icon-font.scss +9 -9
  6. package/app/styles/_modals.scss +3 -0
  7. package/app/styles/_normalize.scss +4 -0
  8. package/app/styles/_simple-list.scss +1 -0
  9. package/app/styles/_table-list.scss +14 -1
  10. package/app/styles/app.scss +1 -0
  11. package/app/styles/components/_list-item.scss +23 -16
  12. package/app/styles/components/_sd-collapse-box.scss +6 -6
  13. package/app/styles/design-tokens/_new-colors.scss +10 -5
  14. package/app/styles/form-elements/_input-wrap.scss +138 -0
  15. package/app/styles/form-elements/_inputs.scss +230 -61
  16. package/app/styles/interface-elements/_side-panel.scss +1 -1
  17. package/app/styles/layout/_editor.scss +1 -0
  18. package/app/styles/primereact/_pr-dialog.scss +1 -0
  19. package/app/styles/primereact/_pr-menu.scss +6 -5
  20. package/app-typescript/components/DurationInput.tsx +11 -17
  21. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  22. package/app-typescript/components/Form/InputBase.tsx +12 -2
  23. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
  24. package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
  25. package/app-typescript/components/Lists/ContentList.tsx +7 -3
  26. package/app-typescript/components/Lists/TableList.tsx +29 -16
  27. package/dist/examples.bundle.css +8 -8
  28. package/dist/examples.bundle.js +877 -856
  29. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  30. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
  31. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
  32. package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  33. package/dist/react/ContentDivider.tsx +4 -4
  34. package/dist/react/Inputs.tsx +1 -7
  35. package/dist/react/Togglebox.tsx +1 -1
  36. package/dist/superdesk-ui.bundle.css +462 -176
  37. package/dist/superdesk-ui.bundle.js +603 -687
  38. package/dist/vendor.bundle.js +2 -2
  39. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  40. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
  41. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
  42. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  43. package/examples/pages/react/ContentDivider.tsx +4 -4
  44. package/examples/pages/react/Inputs.tsx +1 -7
  45. package/examples/pages/react/Togglebox.tsx +1 -1
  46. package/package.json +1 -1
  47. package/react/components/DurationInput.js +13 -18
  48. package/react/components/Form/FormLabel.d.ts +4 -1
  49. package/react/components/Form/FormLabel.js +9 -3
  50. package/react/components/Form/InputBase.d.ts +0 -1
  51. package/react/components/Form/InputBase.js +15 -1
  52. package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
  53. package/react/components/Layouts/AuthoringMain.js +1 -1
  54. package/react/components/Lists/ContentList.js +2 -2
  55. package/react/components/Lists/TableList.d.ts +4 -0
  56. 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("ul", { className: classes }, this.props.items.map(function (item, index) {
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("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
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("li", { className: "table-list__add-item table-list__item--margin" },
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("ul", { className: classes },
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("li", { className: "table-list__add-item table-list__item--margin" },
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("ul", { className: classes },
139
- React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
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("li", { className: 'table-list__item-container' },
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("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
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),