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
@@ -25,6 +25,8 @@ export interface IPropsArrayItem {
|
|
25
25
|
hexColor?: string;
|
26
26
|
onClick?(): void;
|
27
27
|
onDoubleClick?(): void;
|
28
|
+
locked?: boolean;
|
29
|
+
positionLocked?: boolean;
|
28
30
|
}
|
29
31
|
|
30
32
|
interface IState {
|
@@ -113,7 +115,8 @@ class TableList extends React.PureComponent<IProps, IState> {
|
|
113
115
|
? <DragDropContext onDragEnd={this.onDragEnd}>
|
114
116
|
<Droppable droppableId="droppable">
|
115
117
|
{(provided, _snapshot) => (
|
116
|
-
<
|
118
|
+
<div
|
119
|
+
role='list'
|
117
120
|
className={classes}
|
118
121
|
ref={provided.innerRef}
|
119
122
|
{...provided.droppableProps} >
|
@@ -139,6 +142,8 @@ class TableList extends React.PureComponent<IProps, IState> {
|
|
139
142
|
? this.props.itemsDropdown(index)
|
140
143
|
: []}
|
141
144
|
hexColor={item.hexColor}
|
145
|
+
locked={item.locked}
|
146
|
+
positionLocked={item.positionLocked}
|
142
147
|
onAddItem={() => this.props.onAddItem
|
143
148
|
&& this.props.onAddItem(index, item)}
|
144
149
|
showDragHandle={this.props.showDragHandle}
|
@@ -149,19 +154,19 @@ class TableList extends React.PureComponent<IProps, IState> {
|
|
149
154
|
))}
|
150
155
|
{provided.placeholder}
|
151
156
|
{(this.props.addItem && !this.props.readOnly) &&
|
152
|
-
<
|
157
|
+
<div className={`table-list__add-item table-list__item--margin`}>
|
153
158
|
<Tooltip text='Add item' flow='top' appendToBody={true}>
|
154
159
|
<div className='table-list__add-item--container sd-margin-x--auto'>
|
155
160
|
{this.dropDown()}
|
156
161
|
</div>
|
157
162
|
</Tooltip>
|
158
|
-
</
|
163
|
+
</div>
|
159
164
|
}
|
160
|
-
</
|
165
|
+
</div>
|
161
166
|
)}
|
162
167
|
</Droppable>
|
163
168
|
</DragDropContext>
|
164
|
-
: <
|
169
|
+
: <div role='list' className={classes}>
|
165
170
|
{this.state.items.map((item: IPropsArrayItem, index: number) => (
|
166
171
|
<TableListItem
|
167
172
|
key={index}
|
@@ -176,29 +181,31 @@ class TableList extends React.PureComponent<IProps, IState> {
|
|
176
181
|
addItem={this.props.addItem}
|
177
182
|
itemsDropdown={() => this.props.itemsDropdown ? this.props.itemsDropdown(index) : []}
|
178
183
|
hexColor={item.hexColor}
|
184
|
+
locked={item.locked}
|
185
|
+
positionLocked={item.positionLocked}
|
179
186
|
onAddItem={() => this.props.onAddItem
|
180
187
|
&& this.props.onAddItem(index, item)}
|
181
188
|
/>
|
182
189
|
))}
|
183
190
|
{(this.props.addItem && !this.props.readOnly) &&
|
184
|
-
<
|
191
|
+
<div className={`table-list__add-item table-list__item--margin`}>
|
185
192
|
<Tooltip text='Add item' flow='top' appendToBody={true}>
|
186
193
|
<div className='table-list__add-item--container sd-margin-x--auto'>
|
187
194
|
{this.dropDown()}
|
188
195
|
</div>
|
189
196
|
</Tooltip>
|
190
|
-
</
|
197
|
+
</div>
|
191
198
|
}
|
192
|
-
</
|
193
|
-
: (this.props.addItem && !this.props.readOnly) ? <
|
194
|
-
<
|
199
|
+
</div>
|
200
|
+
: (this.props.addItem && !this.props.readOnly) ? <div role='list' className={classes}>
|
201
|
+
<div className={`table-list__add-item table-list__item--margin`}>
|
195
202
|
<Tooltip text='Add item' flow='top' appendToBody={true}>
|
196
203
|
<div className='table-list__add-item--container sd-margin-x--auto'>
|
197
204
|
{this.dropDown()}
|
198
205
|
</div>
|
199
206
|
</Tooltip>
|
200
|
-
</
|
201
|
-
</
|
207
|
+
</div>
|
208
|
+
</div>
|
202
209
|
: null
|
203
210
|
);
|
204
211
|
}
|
@@ -213,6 +220,8 @@ export interface IPropsItem {
|
|
213
220
|
dragAndDrop?: boolean;
|
214
221
|
hexColor?: string;
|
215
222
|
showDragHandle?: 'always' | 'onHover' | 'none';
|
223
|
+
locked?: boolean;
|
224
|
+
positionLocked?: boolean;
|
216
225
|
onClick?(): void;
|
217
226
|
onDoubleClick?(): void;
|
218
227
|
onSelect?(): void;
|
@@ -251,14 +260,17 @@ class TableListItem extends React.PureComponent<IPropsItem> {
|
|
251
260
|
let classes = classNames('table-list__item', {
|
252
261
|
'table-list__item--clickable': this.props.onClick,
|
253
262
|
'table-list__item--draggable': this.props.dragAndDrop,
|
263
|
+
'table-list__item--locked': this.props.locked,
|
264
|
+
'table-list__item--position-locked': this.props.positionLocked,
|
254
265
|
'table-list__item--drag-handles-always': !this.props.showDragHandle,
|
255
266
|
'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
|
256
267
|
});
|
257
268
|
|
258
269
|
return (
|
259
270
|
this.props.addItem ?
|
260
|
-
<
|
271
|
+
<div className='table-list__item-container'>
|
261
272
|
<div
|
273
|
+
role='listitem'
|
262
274
|
onClick={() => this.onSingleClick()}
|
263
275
|
onDoubleClick={() => this.onDoubleClick()}
|
264
276
|
className={classes}>
|
@@ -297,8 +309,9 @@ class TableListItem extends React.PureComponent<IPropsItem> {
|
|
297
309
|
</div>
|
298
310
|
</Tooltip>
|
299
311
|
</div>
|
300
|
-
</
|
301
|
-
: <
|
312
|
+
</div>
|
313
|
+
: <div
|
314
|
+
role='listitem'
|
302
315
|
className={`${classes} table-list__item--margin`}
|
303
316
|
onClick={() => this.onSingleClick()}
|
304
317
|
onDoubleClick={() => this.onDoubleClick()}>
|
@@ -317,7 +330,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
|
|
317
330
|
{this.props.action && <div className='table-list__slide-in-actions'>
|
318
331
|
{this.props.action}
|
319
332
|
</div>}
|
320
|
-
</
|
333
|
+
</div>
|
321
334
|
);
|
322
335
|
}
|
323
336
|
}
|
package/dist/examples.bundle.css
CHANGED
@@ -11118,11 +11118,11 @@ doc-react-playground {
|
|
11118
11118
|
box-sizing: content-box;
|
11119
11119
|
line-height: 100%;
|
11120
11120
|
color: #9b27b0;
|
11121
|
-
|
11122
|
-
|
11121
|
+
inset-inline-end: -0.4rem;
|
11122
|
+
inset-block-end: -0.6rem;
|
11123
11123
|
height: 1em;
|
11124
11124
|
width: 1em;
|
11125
|
-
background-color: var(--sd-item__main-Bg);
|
11125
|
+
background-color: var(--sd-item__main-Bg) !important;
|
11126
11126
|
border-radius: var(--b-radius--full);
|
11127
11127
|
padding: 1px;
|
11128
11128
|
z-index: 1;
|
@@ -11138,8 +11138,8 @@ doc-react-playground {
|
|
11138
11138
|
font-size: 32px; }
|
11139
11139
|
.icn-mix--2x .icn-mix__sub-icn {
|
11140
11140
|
font-size: 1.6rem;
|
11141
|
-
|
11142
|
-
|
11141
|
+
inset-inline-end: -0.6rem;
|
11142
|
+
inset-block-end: -0.3rem; }
|
11143
11143
|
|
11144
11144
|
.double-size-icn {
|
11145
11145
|
display: inline-block;
|
@@ -11156,13 +11156,13 @@ doc-react-playground {
|
|
11156
11156
|
opacity: 0.5; }
|
11157
11157
|
|
11158
11158
|
.subnav .icn-mix__sub-icn {
|
11159
|
-
background-color: var(--sd-colour-panel-bg--100); }
|
11159
|
+
background-color: var(--sd-colour-panel-bg--100) !important; }
|
11160
11160
|
|
11161
11161
|
.subnav--darker .icn-mix__sub-icn {
|
11162
|
-
background-color: var(--sd-colour-panel-bg--200); }
|
11162
|
+
background-color: var(--sd-colour-panel-bg--200) !important; }
|
11163
11163
|
|
11164
11164
|
.subnav--dark-blue-grey .icn-mix__sub-icn {
|
11165
|
-
background-color: var(--color-subnav-bg--blueGrey-10);
|
11165
|
+
background-color: var(--color-subnav-bg--blueGrey-10) !important;
|
11166
11166
|
color: #d686e4; }
|
11167
11167
|
|
11168
11168
|
.subnav--dark-blue-grey .icn-mix__icn {
|