@atlaskit/editor-plugin-table 7.7.1 → 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 +13 -0
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +1 -3
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js +3 -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 -3
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-column.js +3 -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 -3
- package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js +3 -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 +2 -2
- package/src/pm-plugins/table-resizing/event-handlers.ts +2 -2
- package/src/pm-plugins/table-resizing/utils/resize-column.ts +5 -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,18 @@
|
|
|
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
|
+
|
|
9
|
+
## 7.7.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#92335](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92335) [`8bdb6ebbad6c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8bdb6ebbad6c) - fix column resize issue when table preserve width enabled.
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 7.7.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -141,10 +141,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
|
|
|
141
141
|
var newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
|
|
142
142
|
var resizedDelta = clientX - startX;
|
|
143
143
|
tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
|
|
144
|
-
|
|
145
|
-
// console.log('debug newResizeState=', newResizeState);
|
|
146
144
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
|
|
147
|
-
tr.setNodeAttribute(
|
|
145
|
+
tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
|
|
148
146
|
}
|
|
149
147
|
if (colIndex === map.width - 1) {
|
|
150
148
|
var mouseUpTime = event.timeStamp;
|
|
@@ -17,7 +17,9 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
|
|
|
17
17
|
var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
|
|
18
18
|
var scalePercent = 1;
|
|
19
19
|
var resizeAmount = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
|
|
20
|
-
|
|
20
|
+
|
|
21
|
+
// This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
|
|
22
|
+
if (isTableScalingEnabled && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
|
|
21
23
|
scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
|
|
22
24
|
resizeAmount = amount / scalePercent;
|
|
23
25
|
}
|
|
@@ -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
|
};
|
|
@@ -148,10 +148,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
148
148
|
const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
|
|
149
149
|
const resizedDelta = clientX - startX;
|
|
150
150
|
tr = updateColumnWidths(newResizeState, table, start)(tr);
|
|
151
|
-
|
|
152
|
-
// console.log('debug newResizeState=', newResizeState);
|
|
153
151
|
if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
|
|
154
|
-
tr.setNodeAttribute(
|
|
152
|
+
tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
|
|
155
153
|
}
|
|
156
154
|
if (colIndex === map.width - 1) {
|
|
157
155
|
const mouseUpTime = event.timeStamp;
|
|
@@ -8,7 +8,9 @@ import { updateColgroup } from './resize-state';
|
|
|
8
8
|
export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false) => {
|
|
9
9
|
let scalePercent = 1;
|
|
10
10
|
let resizeAmount = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
|
|
11
|
-
|
|
11
|
+
|
|
12
|
+
// This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
|
|
13
|
+
if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
|
|
12
14
|
scalePercent = getTableScalingPercent(tableNode, tableRef);
|
|
13
15
|
resizeAmount = amount / scalePercent;
|
|
14
16
|
}
|
|
@@ -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';
|
|
@@ -135,10 +135,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
135
135
|
var newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
|
|
136
136
|
var resizedDelta = clientX - startX;
|
|
137
137
|
tr = updateColumnWidths(newResizeState, table, start)(tr);
|
|
138
|
-
|
|
139
|
-
// console.log('debug newResizeState=', newResizeState);
|
|
140
138
|
if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
|
|
141
|
-
tr.setNodeAttribute(
|
|
139
|
+
tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
|
|
142
140
|
}
|
|
143
141
|
if (colIndex === map.width - 1) {
|
|
144
142
|
var mouseUpTime = event.timeStamp;
|
|
@@ -12,7 +12,9 @@ export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, t
|
|
|
12
12
|
var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
|
|
13
13
|
var scalePercent = 1;
|
|
14
14
|
var resizeAmount = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
|
|
15
|
-
|
|
15
|
+
|
|
16
|
+
// This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
|
|
17
|
+
if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
|
|
16
18
|
scalePercent = getTableScalingPercent(tableNode, tableRef);
|
|
17
19
|
resizeAmount = amount / scalePercent;
|
|
18
20
|
}
|
|
@@ -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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.7.
|
|
3
|
+
"version": "7.7.3",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/adf-schema": "^35.9.0",
|
|
32
32
|
"@atlaskit/custom-steps": "^0.0.18",
|
|
33
|
-
"@atlaskit/editor-common": "^78.
|
|
33
|
+
"@atlaskit/editor-common": "^78.30.0",
|
|
34
34
|
"@atlaskit/editor-palette": "1.5.3",
|
|
35
35
|
"@atlaskit/editor-plugin-accessibility-utils": "^1.0.0",
|
|
36
36
|
"@atlaskit/editor-plugin-analytics": "^1.0.0",
|
|
@@ -196,10 +196,10 @@ export const handleMouseDown = (
|
|
|
196
196
|
|
|
197
197
|
tr = updateColumnWidths(newResizeState, table, start)(tr);
|
|
198
198
|
|
|
199
|
-
// console.log('debug newResizeState=', newResizeState);
|
|
200
199
|
if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
|
|
201
|
-
tr.setNodeAttribute(
|
|
200
|
+
tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
|
|
202
201
|
}
|
|
202
|
+
|
|
203
203
|
if (colIndex === map.width - 1) {
|
|
204
204
|
const mouseUpTime = event.timeStamp;
|
|
205
205
|
|
|
@@ -25,7 +25,11 @@ export const resizeColumn = (
|
|
|
25
25
|
? amount * 2
|
|
26
26
|
: amount;
|
|
27
27
|
|
|
28
|
-
if
|
|
28
|
+
// This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
|
|
29
|
+
if (
|
|
30
|
+
isTableScalingEnabled &&
|
|
31
|
+
!getBooleanFF('platform.editor.table.colum-resizing-improvements')
|
|
32
|
+
) {
|
|
29
33
|
scalePercent = getTableScalingPercent(tableNode, tableRef);
|
|
30
34
|
resizeAmount = amount / scalePercent;
|
|
31
35
|
}
|
|
@@ -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