@atlaskit/editor-plugin-table 7.7.2 → 7.7.3
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/CHANGELOG.md +6 -0
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +1 -1
- package/dist/cjs/ui/FloatingContextualButton/styles.js +43 -5
- package/dist/cjs/ui/FloatingContextualMenu/styles.js +14 -5
- package/dist/cjs/ui/FloatingDragMenu/styles.js +29 -5
- package/dist/cjs/ui/ui-styles.js +1 -0
- package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +1 -1
- package/dist/es2019/ui/FloatingContextualButton/styles.js +42 -42
- package/dist/es2019/ui/FloatingContextualMenu/styles.js +11 -9
- package/dist/es2019/ui/FloatingDragMenu/styles.js +24 -22
- package/dist/es2019/ui/ui-styles.js +1 -0
- package/dist/esm/pm-plugins/table-resizing/event-handlers.js +1 -1
- package/dist/esm/ui/FloatingContextualButton/styles.js +43 -4
- package/dist/esm/ui/FloatingContextualMenu/styles.js +14 -5
- package/dist/esm/ui/FloatingDragMenu/styles.js +29 -5
- package/dist/esm/ui/ui-styles.js +1 -0
- package/package.json +1 -1
- package/src/pm-plugins/table-resizing/event-handlers.ts +2 -1
- package/src/ui/FloatingContextualButton/styles.ts +48 -46
- package/src/ui/FloatingContextualMenu/styles.ts +11 -9
- package/src/ui/FloatingDragMenu/styles.ts +27 -25
- package/src/ui/ui-styles.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 7.7.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#92977](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92977) [`402557920a06`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/402557920a06) - Use the start position during col resize to update table width
|
|
8
|
+
|
|
3
9
|
## 7.7.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -142,7 +142,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
|
|
|
142
142
|
var resizedDelta = clientX - startX;
|
|
143
143
|
tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
|
|
144
144
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
|
|
145
|
-
tr.setNodeAttribute(
|
|
145
|
+
tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
|
|
146
146
|
}
|
|
147
147
|
if (colIndex === map.width - 1) {
|
|
148
148
|
var mouseUpTime = event.timeStamp;
|
|
@@ -1,18 +1,56 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.tableFloatingCellButtonStyles = exports.tableFloatingCellButtonSelectedStyles = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
7
|
var _react = require("@emotion/react");
|
|
10
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
9
|
var _consts = require("../consts");
|
|
12
|
-
var _templateObject, _templateObject2;
|
|
13
10
|
var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
|
|
14
|
-
return (0, _react.css)(
|
|
11
|
+
return (0, _react.css)({
|
|
12
|
+
'> div': {
|
|
13
|
+
// Sits behind button to provide surface-color background
|
|
14
|
+
background: "var(--ds-surface, ".concat(_colors.N20, ")"),
|
|
15
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
16
|
+
display: 'flex',
|
|
17
|
+
height: "".concat(_consts.contextualMenuTriggerSize + 2, "px"),
|
|
18
|
+
flexDirection: 'column'
|
|
19
|
+
},
|
|
20
|
+
'&& button': {
|
|
21
|
+
background: "var(--ds-background-neutral, none)",
|
|
22
|
+
flexDirection: 'column',
|
|
23
|
+
margin: "var(--ds-space-025, 2px)",
|
|
24
|
+
outline: "2px solid ".concat("var(--ds-surface, ".concat(_colors.N0, ")")),
|
|
25
|
+
borderRadius: '1px',
|
|
26
|
+
padding: 0,
|
|
27
|
+
height: 'calc(100% - 4px)',
|
|
28
|
+
display: 'flex'
|
|
29
|
+
},
|
|
30
|
+
'&& button:hover': {
|
|
31
|
+
background: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")
|
|
32
|
+
},
|
|
33
|
+
'&& button:active': {
|
|
34
|
+
background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
|
|
35
|
+
},
|
|
36
|
+
'&& button > span': {
|
|
37
|
+
margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
|
|
38
|
+
},
|
|
39
|
+
'&& span': {
|
|
40
|
+
pointerEvents: 'none'
|
|
41
|
+
}
|
|
42
|
+
});
|
|
15
43
|
};
|
|
16
44
|
var tableFloatingCellButtonSelectedStyles = exports.tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
|
|
17
|
-
return (0, _react.css)(
|
|
45
|
+
return (0, _react.css)({
|
|
46
|
+
'&& button': {
|
|
47
|
+
background: "var(--ds-background-selected, ".concat(_colors.N700, ")")
|
|
48
|
+
},
|
|
49
|
+
'&& button:hover': {
|
|
50
|
+
background: "var(--ds-background-selected-hovered, ".concat(_colors.N700, ")")
|
|
51
|
+
},
|
|
52
|
+
'&& button:active': {
|
|
53
|
+
background: "var(--ds-background-selected-pressed, ".concat(_colors.N700, ")")
|
|
54
|
+
}
|
|
55
|
+
});
|
|
18
56
|
};
|
|
@@ -11,14 +11,23 @@ var _adfSchema = require("@atlaskit/adf-schema");
|
|
|
11
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
12
|
var _types = require("../../types");
|
|
13
13
|
var _consts = require("../consts");
|
|
14
|
-
var _templateObject
|
|
14
|
+
var _templateObject;
|
|
15
15
|
var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
|
|
16
|
-
return (0, _react.css)(
|
|
16
|
+
return (0, _react.css)({
|
|
17
|
+
'&::before': {
|
|
18
|
+
background: selectedColor
|
|
19
|
+
}
|
|
20
|
+
});
|
|
17
21
|
};
|
|
18
|
-
var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(
|
|
22
|
+
var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)({
|
|
23
|
+
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
24
|
+
display: 'flex'
|
|
25
|
+
});
|
|
19
26
|
|
|
20
27
|
// TODO Delete this comment after verifying space token -> previous value `padding: 8px`
|
|
21
28
|
// TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
|
|
22
|
-
var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
|
|
23
|
-
|
|
29
|
+
var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
|
|
30
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
31
|
+
) {
|
|
32
|
+
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n border-radius: ", ";\n background: ", ";\n box-shadow: ", ";\n display: block;\n position: absolute;\n top: 0;\n left: ", "px;\n padding: ", ";\n\n > div {\n padding: 0;\n }\n }\n\n .", " {\n display: flex;\n\n &::before {\n content: '';\n display: block;\n border: 1px solid ", ";\n border-radius: ", ";\n width: 20px;\n height: 20px;\n }\n\n &::after {\n content: '\u203A';\n margin-left: ", ";\n line-height: 20px;\n color: ", ";\n }\n }\n\n .", " {\n display: flex;\n\n &::before {\n content: '';\n display: block;\n border: 1px solid ", ";\n border-radius: ", ";\n width: 14px;\n height: 14px;\n }\n\n &::after {\n content: '\u203A';\n margin-left: ", ";\n line-height: 14px;\n color: ", ";\n }\n }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
|
|
24
33
|
};
|
|
@@ -11,10 +11,34 @@ var _adfSchema = require("@atlaskit/adf-schema");
|
|
|
11
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
12
|
var _types = require("../../types");
|
|
13
13
|
var _consts = require("../consts");
|
|
14
|
-
var _templateObject
|
|
14
|
+
var _templateObject;
|
|
15
15
|
var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
|
|
16
|
-
return (0, _react.css)(
|
|
16
|
+
return (0, _react.css)({
|
|
17
|
+
'&::before': {
|
|
18
|
+
background: selectedColor
|
|
19
|
+
}
|
|
20
|
+
});
|
|
17
21
|
};
|
|
18
|
-
var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)({
|
|
23
|
+
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
24
|
+
display: 'flex'
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
28
|
+
var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n border-radius: ", ";\n background: ", ";\n box-shadow: ", ";\n display: block;\n position: absolute;\n top: 0;\n left: ", "px;\n padding: ", ";\n\n > div {\n padding: 0;\n }\n }\n\n .", " {\n display: flex;\n\n &::before {\n content: '';\n display: block;\n border: 1px solid ", ";\n border-radius: ", ";\n width: 14px;\n height: 14px;\n }\n\n &::after {\n content: '\u203A';\n margin-left: ", ";\n line-height: 14px;\n color: ", ";\n }\n }\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
|
|
29
|
+
var toggleStyles = exports.toggleStyles = (0, _react.css)({
|
|
30
|
+
display: 'flex',
|
|
31
|
+
"input[type='checkbox']": {
|
|
32
|
+
width: '30px',
|
|
33
|
+
height: '14px',
|
|
34
|
+
pointerEvents: 'initial',
|
|
35
|
+
cursor: 'pointer'
|
|
36
|
+
},
|
|
37
|
+
'> label': {
|
|
38
|
+
margin: '0px',
|
|
39
|
+
pointerEvents: 'none',
|
|
40
|
+
'> span': {
|
|
41
|
+
pointerEvents: 'none'
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
});
|
package/dist/cjs/ui/ui-styles.js
CHANGED
|
@@ -14,6 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
14
14
|
var _types = require("../types");
|
|
15
15
|
var _consts = require("./consts");
|
|
16
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
|
|
17
|
+
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
|
|
17
18
|
var InsertLine = function InsertLine(cssString) {
|
|
18
19
|
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
|
|
19
20
|
};
|
|
@@ -149,7 +149,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
149
149
|
const resizedDelta = clientX - startX;
|
|
150
150
|
tr = updateColumnWidths(newResizeState, table, start)(tr);
|
|
151
151
|
if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
|
|
152
|
-
tr.setNodeAttribute(
|
|
152
|
+
tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
|
|
153
153
|
}
|
|
154
154
|
if (colIndex === map.width - 1) {
|
|
155
155
|
const mouseUpTime = event.timeStamp;
|
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
|
|
3
3
|
import { contextualMenuTriggerSize } from '../consts';
|
|
4
|
-
export const tableFloatingCellButtonStyles = () => css
|
|
5
|
-
> div {
|
|
4
|
+
export const tableFloatingCellButtonStyles = () => css({
|
|
5
|
+
'> div': {
|
|
6
6
|
// Sits behind button to provide surface-color background
|
|
7
|
-
background:
|
|
8
|
-
|
|
9
|
-
display: flex
|
|
10
|
-
height:
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
&& button {
|
|
14
|
-
background:
|
|
15
|
-
|
|
16
|
-
margin:
|
|
17
|
-
outline: 2px solid ${`var(--ds-surface, ${N0})`}
|
|
18
|
-
|
|
19
|
-
padding: 0
|
|
20
|
-
height: calc(100% - 4px)
|
|
21
|
-
display: flex
|
|
22
|
-
}
|
|
23
|
-
&& button:hover {
|
|
24
|
-
background:
|
|
25
|
-
}
|
|
26
|
-
&& button:active {
|
|
27
|
-
background:
|
|
28
|
-
}
|
|
29
|
-
&& button > span {
|
|
30
|
-
margin: 0px ${"var(--ds-space-negative-050, -4px)"}
|
|
31
|
-
}
|
|
32
|
-
&& span {
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export const tableFloatingCellButtonSelectedStyles = () => css
|
|
37
|
-
&& button {
|
|
38
|
-
background:
|
|
39
|
-
}
|
|
40
|
-
&& button:hover {
|
|
41
|
-
background:
|
|
42
|
-
}
|
|
43
|
-
&& button:active {
|
|
44
|
-
background:
|
|
45
|
-
}
|
|
46
|
-
|
|
7
|
+
background: `var(--ds-surface, ${N20})`,
|
|
8
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
9
|
+
display: 'flex',
|
|
10
|
+
height: `${contextualMenuTriggerSize + 2}px`,
|
|
11
|
+
flexDirection: 'column'
|
|
12
|
+
},
|
|
13
|
+
'&& button': {
|
|
14
|
+
background: "var(--ds-background-neutral, none)",
|
|
15
|
+
flexDirection: 'column',
|
|
16
|
+
margin: "var(--ds-space-025, 2px)",
|
|
17
|
+
outline: `2px solid ${`var(--ds-surface, ${N0})`}`,
|
|
18
|
+
borderRadius: '1px',
|
|
19
|
+
padding: 0,
|
|
20
|
+
height: 'calc(100% - 4px)',
|
|
21
|
+
display: 'flex'
|
|
22
|
+
},
|
|
23
|
+
'&& button:hover': {
|
|
24
|
+
background: `var(--ds-background-neutral-hovered, ${N30A})`
|
|
25
|
+
},
|
|
26
|
+
'&& button:active': {
|
|
27
|
+
background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
|
|
28
|
+
},
|
|
29
|
+
'&& button > span': {
|
|
30
|
+
margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
|
|
31
|
+
},
|
|
32
|
+
'&& span': {
|
|
33
|
+
pointerEvents: 'none'
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
export const tableFloatingCellButtonSelectedStyles = () => css({
|
|
37
|
+
'&& button': {
|
|
38
|
+
background: `var(--ds-background-selected, ${N700})`
|
|
39
|
+
},
|
|
40
|
+
'&& button:hover': {
|
|
41
|
+
background: `var(--ds-background-selected-hovered, ${N700})`
|
|
42
|
+
},
|
|
43
|
+
'&& button:active': {
|
|
44
|
+
background: `var(--ds-background-selected-pressed, ${N700})`
|
|
45
|
+
}
|
|
46
|
+
});
|
|
@@ -3,19 +3,21 @@ import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
|
|
|
3
3
|
import { N60A, N90 } from '@atlaskit/theme/colors';
|
|
4
4
|
import { TableCssClassName as ClassName } from '../../types';
|
|
5
5
|
import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
|
|
6
|
-
export const cellColourPreviewStyles = selectedColor => css
|
|
7
|
-
&::before {
|
|
8
|
-
background:
|
|
6
|
+
export const cellColourPreviewStyles = selectedColor => css({
|
|
7
|
+
'&::before': {
|
|
8
|
+
background: selectedColor
|
|
9
9
|
}
|
|
10
|
-
|
|
11
|
-
export const elementBeforeIconStyles = css
|
|
12
|
-
|
|
13
|
-
display: flex
|
|
14
|
-
|
|
10
|
+
});
|
|
11
|
+
export const elementBeforeIconStyles = css({
|
|
12
|
+
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
13
|
+
display: 'flex'
|
|
14
|
+
});
|
|
15
15
|
|
|
16
16
|
// TODO Delete this comment after verifying space token -> previous value `padding: 8px`
|
|
17
17
|
// TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
|
|
18
|
-
export const tablePopupStyles = isDragAndDropEnabled
|
|
18
|
+
export const tablePopupStyles = (isDragAndDropEnabled
|
|
19
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
20
|
+
) => css`
|
|
19
21
|
.${ClassName.CONTEXTUAL_SUBMENU} {
|
|
20
22
|
border-radius: ${"var(--ds-border-radius, 3px)"};
|
|
21
23
|
background: ${"var(--ds-surface-overlay, white)"};
|
|
@@ -3,15 +3,17 @@ import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
|
|
|
3
3
|
import { N60A, N90 } from '@atlaskit/theme/colors';
|
|
4
4
|
import { TableCssClassName as ClassName } from '../../types';
|
|
5
5
|
import { dragMenuDropdownWidth } from '../consts';
|
|
6
|
-
export const cellColourPreviewStyles = selectedColor => css
|
|
7
|
-
&::before {
|
|
8
|
-
background:
|
|
6
|
+
export const cellColourPreviewStyles = selectedColor => css({
|
|
7
|
+
'&::before': {
|
|
8
|
+
background: selectedColor
|
|
9
9
|
}
|
|
10
|
-
|
|
11
|
-
export const elementBeforeIconStyles = css
|
|
12
|
-
|
|
13
|
-
display: flex
|
|
14
|
-
|
|
10
|
+
});
|
|
11
|
+
export const elementBeforeIconStyles = css({
|
|
12
|
+
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
13
|
+
display: 'flex'
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
15
17
|
export const dragMenuBackgroundColorStyles = css`
|
|
16
18
|
.${ClassName.DRAG_SUBMENU} {
|
|
17
19
|
border-radius: ${"var(--ds-border-radius, 3px)"};
|
|
@@ -48,19 +50,19 @@ export const dragMenuBackgroundColorStyles = css`
|
|
|
48
50
|
}
|
|
49
51
|
}
|
|
50
52
|
`;
|
|
51
|
-
export const toggleStyles = css
|
|
52
|
-
display: flex
|
|
53
|
-
input[type='checkbox'] {
|
|
54
|
-
width: 30px
|
|
55
|
-
height: 14px
|
|
56
|
-
|
|
57
|
-
cursor: pointer
|
|
58
|
-
}
|
|
59
|
-
> label {
|
|
60
|
-
margin: 0px
|
|
61
|
-
|
|
62
|
-
> span {
|
|
63
|
-
|
|
53
|
+
export const toggleStyles = css({
|
|
54
|
+
display: 'flex',
|
|
55
|
+
"input[type='checkbox']": {
|
|
56
|
+
width: '30px',
|
|
57
|
+
height: '14px',
|
|
58
|
+
pointerEvents: 'initial',
|
|
59
|
+
cursor: 'pointer'
|
|
60
|
+
},
|
|
61
|
+
'> label': {
|
|
62
|
+
margin: '0px',
|
|
63
|
+
pointerEvents: 'none',
|
|
64
|
+
'> span': {
|
|
65
|
+
pointerEvents: 'none'
|
|
64
66
|
}
|
|
65
67
|
}
|
|
66
|
-
|
|
68
|
+
});
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
|
|
1
2
|
import { css } from '@emotion/react';
|
|
2
3
|
import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
|
|
3
4
|
import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
|
|
@@ -136,7 +136,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
136
136
|
var resizedDelta = clientX - startX;
|
|
137
137
|
tr = updateColumnWidths(newResizeState, table, start)(tr);
|
|
138
138
|
if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
|
|
139
|
-
tr.setNodeAttribute(
|
|
139
|
+
tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
|
|
140
140
|
}
|
|
141
141
|
if (colIndex === map.width - 1) {
|
|
142
142
|
var mouseUpTime = event.timeStamp;
|
|
@@ -1,11 +1,50 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2;
|
|
3
1
|
import { css } from '@emotion/react';
|
|
4
2
|
import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
|
|
5
3
|
import { contextualMenuTriggerSize } from '../consts';
|
|
6
4
|
export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
|
|
7
|
-
return css(
|
|
5
|
+
return css({
|
|
6
|
+
'> div': {
|
|
7
|
+
// Sits behind button to provide surface-color background
|
|
8
|
+
background: "var(--ds-surface, ".concat(N20, ")"),
|
|
9
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
10
|
+
display: 'flex',
|
|
11
|
+
height: "".concat(contextualMenuTriggerSize + 2, "px"),
|
|
12
|
+
flexDirection: 'column'
|
|
13
|
+
},
|
|
14
|
+
'&& button': {
|
|
15
|
+
background: "var(--ds-background-neutral, none)",
|
|
16
|
+
flexDirection: 'column',
|
|
17
|
+
margin: "var(--ds-space-025, 2px)",
|
|
18
|
+
outline: "2px solid ".concat("var(--ds-surface, ".concat(N0, ")")),
|
|
19
|
+
borderRadius: '1px',
|
|
20
|
+
padding: 0,
|
|
21
|
+
height: 'calc(100% - 4px)',
|
|
22
|
+
display: 'flex'
|
|
23
|
+
},
|
|
24
|
+
'&& button:hover': {
|
|
25
|
+
background: "var(--ds-background-neutral-hovered, ".concat(N30A, ")")
|
|
26
|
+
},
|
|
27
|
+
'&& button:active': {
|
|
28
|
+
background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
|
|
29
|
+
},
|
|
30
|
+
'&& button > span': {
|
|
31
|
+
margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
|
|
32
|
+
},
|
|
33
|
+
'&& span': {
|
|
34
|
+
pointerEvents: 'none'
|
|
35
|
+
}
|
|
36
|
+
});
|
|
8
37
|
};
|
|
9
38
|
export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
|
|
10
|
-
return css(
|
|
39
|
+
return css({
|
|
40
|
+
'&& button': {
|
|
41
|
+
background: "var(--ds-background-selected, ".concat(N700, ")")
|
|
42
|
+
},
|
|
43
|
+
'&& button:hover': {
|
|
44
|
+
background: "var(--ds-background-selected-hovered, ".concat(N700, ")")
|
|
45
|
+
},
|
|
46
|
+
'&& button:active': {
|
|
47
|
+
background: "var(--ds-background-selected-pressed, ".concat(N700, ")")
|
|
48
|
+
}
|
|
49
|
+
});
|
|
11
50
|
};
|
|
@@ -1,17 +1,26 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject
|
|
2
|
+
var _templateObject;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
4
|
import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
|
|
5
5
|
import { N60A, N90 } from '@atlaskit/theme/colors';
|
|
6
6
|
import { TableCssClassName as ClassName } from '../../types';
|
|
7
7
|
import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
|
|
8
8
|
export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
|
|
9
|
-
return css(
|
|
9
|
+
return css({
|
|
10
|
+
'&::before': {
|
|
11
|
+
background: selectedColor
|
|
12
|
+
}
|
|
13
|
+
});
|
|
10
14
|
};
|
|
11
|
-
export var elementBeforeIconStyles = css(
|
|
15
|
+
export var elementBeforeIconStyles = css({
|
|
16
|
+
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
17
|
+
display: 'flex'
|
|
18
|
+
});
|
|
12
19
|
|
|
13
20
|
// TODO Delete this comment after verifying space token -> previous value `padding: 8px`
|
|
14
21
|
// TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
|
|
15
|
-
export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
|
|
16
|
-
|
|
22
|
+
export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
|
|
23
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
24
|
+
) {
|
|
25
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n border-radius: ", ";\n background: ", ";\n box-shadow: ", ";\n display: block;\n position: absolute;\n top: 0;\n left: ", "px;\n padding: ", ";\n\n > div {\n padding: 0;\n }\n }\n\n .", " {\n display: flex;\n\n &::before {\n content: '';\n display: block;\n border: 1px solid ", ";\n border-radius: ", ";\n width: 20px;\n height: 20px;\n }\n\n &::after {\n content: '\u203A';\n margin-left: ", ";\n line-height: 20px;\n color: ", ";\n }\n }\n\n .", " {\n display: flex;\n\n &::before {\n content: '';\n display: block;\n border: 1px solid ", ";\n border-radius: ", ";\n width: 14px;\n height: 14px;\n }\n\n &::after {\n content: '\u203A';\n margin-left: ", ";\n line-height: 14px;\n color: ", ";\n }\n }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
|
|
17
26
|
};
|
|
@@ -1,13 +1,37 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject
|
|
2
|
+
var _templateObject;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
4
|
import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
|
|
5
5
|
import { N60A, N90 } from '@atlaskit/theme/colors';
|
|
6
6
|
import { TableCssClassName as ClassName } from '../../types';
|
|
7
7
|
import { dragMenuDropdownWidth } from '../consts';
|
|
8
8
|
export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
|
|
9
|
-
return css(
|
|
9
|
+
return css({
|
|
10
|
+
'&::before': {
|
|
11
|
+
background: selectedColor
|
|
12
|
+
}
|
|
13
|
+
});
|
|
10
14
|
};
|
|
11
|
-
export var elementBeforeIconStyles = css(
|
|
12
|
-
|
|
13
|
-
|
|
15
|
+
export var elementBeforeIconStyles = css({
|
|
16
|
+
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
17
|
+
display: 'flex'
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
21
|
+
export var dragMenuBackgroundColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n border-radius: ", ";\n background: ", ";\n box-shadow: ", ";\n display: block;\n position: absolute;\n top: 0;\n left: ", "px;\n padding: ", ";\n\n > div {\n padding: 0;\n }\n }\n\n .", " {\n display: flex;\n\n &::before {\n content: '';\n display: block;\n border: 1px solid ", ";\n border-radius: ", ";\n width: 14px;\n height: 14px;\n }\n\n &::after {\n content: '\u203A';\n margin-left: ", ";\n line-height: 14px;\n color: ", ";\n }\n }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
|
|
22
|
+
export var toggleStyles = css({
|
|
23
|
+
display: 'flex',
|
|
24
|
+
"input[type='checkbox']": {
|
|
25
|
+
width: '30px',
|
|
26
|
+
height: '14px',
|
|
27
|
+
pointerEvents: 'initial',
|
|
28
|
+
cursor: 'pointer'
|
|
29
|
+
},
|
|
30
|
+
'> label': {
|
|
31
|
+
margin: '0px',
|
|
32
|
+
pointerEvents: 'none',
|
|
33
|
+
'> span': {
|
|
34
|
+
pointerEvents: 'none'
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
package/dist/esm/ui/ui-styles.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
2
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
|
|
3
|
+
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
|
|
3
4
|
import { css } from '@emotion/react';
|
|
4
5
|
import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
|
|
5
6
|
import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
|
package/package.json
CHANGED
|
@@ -197,8 +197,9 @@ export const handleMouseDown = (
|
|
|
197
197
|
tr = updateColumnWidths(newResizeState, table, start)(tr);
|
|
198
198
|
|
|
199
199
|
if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
|
|
200
|
-
tr.setNodeAttribute(
|
|
200
|
+
tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
|
|
201
201
|
}
|
|
202
|
+
|
|
202
203
|
if (colIndex === map.width - 1) {
|
|
203
204
|
const mouseUpTime = event.timeStamp;
|
|
204
205
|
|
|
@@ -5,50 +5,52 @@ import { token } from '@atlaskit/tokens';
|
|
|
5
5
|
|
|
6
6
|
import { contextualMenuTriggerSize } from '../consts';
|
|
7
7
|
|
|
8
|
-
export const tableFloatingCellButtonStyles = () =>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
8
|
+
export const tableFloatingCellButtonStyles = () =>
|
|
9
|
+
css({
|
|
10
|
+
'> div': {
|
|
11
|
+
// Sits behind button to provide surface-color background
|
|
12
|
+
background: token('elevation.surface', N20),
|
|
13
|
+
borderRadius: token('border.radius', '3px'),
|
|
14
|
+
display: 'flex',
|
|
15
|
+
height: `${contextualMenuTriggerSize + 2}px`,
|
|
16
|
+
flexDirection: 'column',
|
|
17
|
+
},
|
|
18
|
+
'&& button': {
|
|
19
|
+
background: token('color.background.neutral', 'none'),
|
|
20
|
+
flexDirection: 'column',
|
|
21
|
+
margin: token('space.025', '2px'),
|
|
22
|
+
outline: `2px solid ${token('elevation.surface', N0)}`,
|
|
23
|
+
borderRadius: '1px',
|
|
24
|
+
padding: 0,
|
|
25
|
+
height: 'calc(100% - 4px)',
|
|
26
|
+
display: 'flex',
|
|
27
|
+
},
|
|
28
|
+
'&& button:hover': {
|
|
29
|
+
background: token('color.background.neutral.hovered', N30A),
|
|
30
|
+
},
|
|
31
|
+
'&& button:active': {
|
|
32
|
+
background: token(
|
|
33
|
+
'color.background.neutral.pressed',
|
|
34
|
+
'rgba(179, 212, 255, 0.6)',
|
|
35
|
+
),
|
|
36
|
+
},
|
|
37
|
+
'&& button > span': {
|
|
38
|
+
margin: `0px ${token('space.negative.050', '-4px')}`,
|
|
39
|
+
},
|
|
40
|
+
'&& span': {
|
|
41
|
+
pointerEvents: 'none',
|
|
42
|
+
},
|
|
43
|
+
});
|
|
43
44
|
|
|
44
|
-
export const tableFloatingCellButtonSelectedStyles = () =>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
45
|
+
export const tableFloatingCellButtonSelectedStyles = () =>
|
|
46
|
+
css({
|
|
47
|
+
'&& button': {
|
|
48
|
+
background: token('color.background.selected', N700),
|
|
49
|
+
},
|
|
50
|
+
'&& button:hover': {
|
|
51
|
+
background: token('color.background.selected.hovered', N700),
|
|
52
|
+
},
|
|
53
|
+
'&& button:active': {
|
|
54
|
+
background: token('color.background.selected.pressed', N700),
|
|
55
|
+
},
|
|
56
|
+
});
|
|
@@ -10,21 +10,23 @@ import {
|
|
|
10
10
|
contextualMenuDropdownWidthDnD,
|
|
11
11
|
} from '../consts';
|
|
12
12
|
|
|
13
|
-
export const cellColourPreviewStyles = (selectedColor: string) =>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
export const cellColourPreviewStyles = (selectedColor: string) =>
|
|
14
|
+
css({
|
|
15
|
+
'&::before': {
|
|
16
|
+
background: selectedColor,
|
|
17
|
+
},
|
|
18
|
+
});
|
|
18
19
|
|
|
19
|
-
export const elementBeforeIconStyles = css
|
|
20
|
-
|
|
21
|
-
display: flex
|
|
22
|
-
|
|
20
|
+
export const elementBeforeIconStyles = css({
|
|
21
|
+
marginRight: token('space.negative.075', '-6px'),
|
|
22
|
+
display: 'flex',
|
|
23
|
+
});
|
|
23
24
|
|
|
24
25
|
// TODO Delete this comment after verifying space token -> previous value `padding: 8px`
|
|
25
26
|
// TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
|
|
26
27
|
export const tablePopupStyles = (
|
|
27
28
|
isDragAndDropEnabled: boolean | undefined,
|
|
29
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
28
30
|
) => css`
|
|
29
31
|
.${ClassName.CONTEXTUAL_SUBMENU} {
|
|
30
32
|
border-radius: ${token('border.radius', '3px')};
|
|
@@ -7,17 +7,19 @@ import { token } from '@atlaskit/tokens';
|
|
|
7
7
|
import { TableCssClassName as ClassName } from '../../types';
|
|
8
8
|
import { dragMenuDropdownWidth } from '../consts';
|
|
9
9
|
|
|
10
|
-
export const cellColourPreviewStyles = (selectedColor: string) =>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
export const cellColourPreviewStyles = (selectedColor: string) =>
|
|
11
|
+
css({
|
|
12
|
+
'&::before': {
|
|
13
|
+
background: selectedColor,
|
|
14
|
+
},
|
|
15
|
+
});
|
|
15
16
|
|
|
16
|
-
export const elementBeforeIconStyles = css
|
|
17
|
-
|
|
18
|
-
display: flex
|
|
19
|
-
|
|
17
|
+
export const elementBeforeIconStyles = css({
|
|
18
|
+
marginRight: token('space.negative.075', '-6px'),
|
|
19
|
+
display: 'flex',
|
|
20
|
+
});
|
|
20
21
|
|
|
22
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
21
23
|
export const dragMenuBackgroundColorStyles = css`
|
|
22
24
|
.${ClassName.DRAG_SUBMENU} {
|
|
23
25
|
border-radius: ${token('border.radius', '3px')};
|
|
@@ -58,19 +60,19 @@ export const dragMenuBackgroundColorStyles = css`
|
|
|
58
60
|
}
|
|
59
61
|
`;
|
|
60
62
|
|
|
61
|
-
export const toggleStyles = css
|
|
62
|
-
display: flex
|
|
63
|
-
input[type='checkbox'] {
|
|
64
|
-
width: 30px
|
|
65
|
-
height: 14px
|
|
66
|
-
|
|
67
|
-
cursor: pointer
|
|
68
|
-
}
|
|
69
|
-
> label {
|
|
70
|
-
margin: 0px
|
|
71
|
-
|
|
72
|
-
> span {
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
63
|
+
export const toggleStyles = css({
|
|
64
|
+
display: 'flex',
|
|
65
|
+
"input[type='checkbox']": {
|
|
66
|
+
width: '30px',
|
|
67
|
+
height: '14px',
|
|
68
|
+
pointerEvents: 'initial',
|
|
69
|
+
cursor: 'pointer',
|
|
70
|
+
},
|
|
71
|
+
'> label': {
|
|
72
|
+
margin: '0px',
|
|
73
|
+
pointerEvents: 'none',
|
|
74
|
+
'> span': {
|
|
75
|
+
pointerEvents: 'none',
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
});
|
package/src/ui/ui-styles.ts
CHANGED