superdesk-ui-framework 3.0.38 → 3.0.39
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/.eslintignore +1 -0
- package/app/styles/_drag-handle.scss +24 -0
- package/app-typescript/components/DragHandle.tsx +13 -0
- package/app-typescript/index.ts +1 -0
- package/dist/examples.bundle.css +20 -0
- package/dist/examples.bundle.js +477 -324
- package/dist/react/DragHandleDocs.tsx +26 -0
- package/dist/react/Index.tsx +6 -1
- package/dist/superdesk-ui.bundle.css +20 -0
- package/dist/superdesk-ui.bundle.js +174 -93
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/react/DragHandleDocs.tsx +26 -0
- package/examples/pages/react/Index.tsx +6 -1
- package/globals.d.ts +4 -0
- package/package.json +1 -1
- package/react/components/DragHandle.d.ts +5 -0
- package/react/components/DragHandle.js +59 -0
- package/react/index.d.ts +1 -0
- package/react/index.js +3 -1
- package/tsconfig.json +1 -1
package/.eslintignore
CHANGED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.drag-handle {
|
|
2
|
+
height: 30px;
|
|
3
|
+
width: 8px;
|
|
4
|
+
opacity: 0.85;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.drag-handle-wrapper {
|
|
8
|
+
padding: 6px;
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
align-items: center;
|
|
12
|
+
background-color: var(--sd-colour-line--medium);
|
|
13
|
+
border-start-start-radius: 3px;
|
|
14
|
+
border-end-start-radius: 3px;
|
|
15
|
+
&:hover {
|
|
16
|
+
background-color: var(--sd-colour-line--strong);
|
|
17
|
+
cursor: grab;
|
|
18
|
+
}
|
|
19
|
+
&:active {
|
|
20
|
+
background-color: var(--sd-colour-interactive);
|
|
21
|
+
cursor: grabbing;
|
|
22
|
+
opacity: 1;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import '../../app/styles/_drag-handle.scss';
|
|
3
|
+
import dragHandleImg from '../../app/img/dots.svg';
|
|
4
|
+
|
|
5
|
+
export class DragHandle extends React.PureComponent {
|
|
6
|
+
render() {
|
|
7
|
+
return (
|
|
8
|
+
<div className="drag-handle-wrapper">
|
|
9
|
+
<img src={dragHandleImg} className="drag-handle" />
|
|
10
|
+
</div>
|
|
11
|
+
);
|
|
12
|
+
}
|
|
13
|
+
}
|
package/app-typescript/index.ts
CHANGED
|
@@ -97,6 +97,7 @@ export { MultiSelect } from './components/MultiSelect';
|
|
|
97
97
|
export { ResizablePanels } from './components/ResizablePanels';
|
|
98
98
|
export { WithPopover } from './components/WithPopover';
|
|
99
99
|
export { Spacer, SpacerBlock } from './components/Spacer';
|
|
100
|
+
export { DragHandle } from './components/DragHandle';
|
|
100
101
|
|
|
101
102
|
// declare non-typescript exports to prevent errors
|
|
102
103
|
export declare const ToggleBoxNext: any;
|
package/dist/examples.bundle.css
CHANGED
|
@@ -12064,6 +12064,26 @@ doc-react-playground {
|
|
|
12064
12064
|
.side-panel__top-tools--dark-blue-grey .icn-mix__icn {
|
|
12065
12065
|
color: inherit;
|
|
12066
12066
|
opacity: 1; }
|
|
12067
|
+
.drag-handle {
|
|
12068
|
+
height: 30px;
|
|
12069
|
+
width: 8px;
|
|
12070
|
+
opacity: 0.85; }
|
|
12071
|
+
|
|
12072
|
+
.drag-handle-wrapper {
|
|
12073
|
+
padding: 6px;
|
|
12074
|
+
display: inline-flex;
|
|
12075
|
+
justify-content: center;
|
|
12076
|
+
align-items: center;
|
|
12077
|
+
background-color: var(--sd-colour-line--medium);
|
|
12078
|
+
border-start-start-radius: 3px;
|
|
12079
|
+
border-end-start-radius: 3px; }
|
|
12080
|
+
.drag-handle-wrapper:hover {
|
|
12081
|
+
background-color: var(--sd-colour-line--strong);
|
|
12082
|
+
cursor: grab; }
|
|
12083
|
+
.drag-handle-wrapper:active {
|
|
12084
|
+
background-color: var(--sd-colour-interactive);
|
|
12085
|
+
cursor: grabbing;
|
|
12086
|
+
opacity: 1; }
|
|
12067
12087
|
@charset "UTF-8";
|
|
12068
12088
|
.red--100 {
|
|
12069
12089
|
background-color: #fde4e2; }
|