Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): some UI bugs of table block (#9987)

Browse Source 
close: BS-2507, BS-2508, BS-2511, BS-2519, BS-2523
This commit is contained in:
zzj3720
2025-02-06 15:42:05 +00:00
parent 7c7febd495
commit 1652e6df6b
4 changed files with 41 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
blocksuite/affine/block-table/src/add-button.css.ts
View File

@@ -4,10 +4,10 @@ import { style } from '@vanilla-extract/css';
export const addColumnButtonStyle = style({
cursor: 'col-resize',
backgroundColor: cssVarV2.layer.background.hoverOverlay,
fontSize: '10px',
fontSize: '16px',
color: cssVarV2.icon.secondary,
display: 'flex',
width: '12px',
width: '16px',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
@@ -30,10 +30,10 @@ export const addColumnButtonStyle = style({
export const addRowButtonStyle = style({
cursor: 'row-resize',
backgroundColor: cssVarV2.layer.background.hoverOverlay,
fontSize: '10px',
fontSize: '16px',
color: cssVarV2.icon.secondary,
display: 'flex',
height: '12px',
height: '16px',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
@@ -56,11 +56,11 @@ export const addRowButtonStyle = style({
export const addRowColumnButtonStyle = style({
cursor: 'nwse-resize',
backgroundColor: cssVarV2.layer.background.hoverOverlay,
fontSize: '10px',
fontSize: '16px',
color: cssVarV2.icon.secondary,
display: 'flex',
width: '12px',
height: '12px',
width: '16px',
height: '16px',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',

30
blocksuite/affine/block-table/src/table-cell.css.ts
View File

@@ -1,5 +1,5 @@
import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme';
import { style } from '@vanilla-extract/css';
import { createVar, style } from '@vanilla-extract/css';
export const cellContainerStyle = style({
position: 'relative',
@@ -22,11 +22,12 @@ export const columnOptionsCellStyle = style({
justifyContent: 'center',
});
const threePointerIconColorVar = createVar();
export const columnOptionsStyle = style({
cursor: 'pointer',
zIndex: 2,
width: '22px',
height: '12px',
width: '28px',
height: '16px',
backgroundColor: cssVarV2.table.headerBackground.default,
borderRadius: '8px',
boxShadow: cssVar('buttonShadow'),
@@ -35,6 +36,9 @@ export const columnOptionsStyle = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
vars: {
[threePointerIconColorVar]: cssVarV2.icon.secondary,
},
selectors: {
'&:hover': {
opacity: 1,
@@ -42,6 +46,9 @@ export const columnOptionsStyle = style({
'&.active': {
opacity: 1,
backgroundColor: cssVarV2.table.indicator.activated,
vars: {
[threePointerIconColorVar]: cssVarV2.table.indicator.pointerActive,
},
},
},
});
@@ -57,12 +64,11 @@ export const rowOptionsCellStyle = style({
alignItems: 'center',
justifyContent: 'center',
});
export const rowOptionsStyle = style({
cursor: 'pointer',
zIndex: 2,
width: '12px',
height: '22px',
width: '16px',
height: '28px',
backgroundColor: cssVarV2.table.headerBackground.default,
borderRadius: '8px',
boxShadow: cssVar('buttonShadow'),
@@ -71,6 +77,9 @@ export const rowOptionsStyle = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
vars: {
[threePointerIconColorVar]: cssVarV2.icon.secondary,
},
selectors: {
'&:hover': {
opacity: 1,
@@ -78,6 +87,9 @@ export const rowOptionsStyle = style({
'&.active': {
opacity: 1,
backgroundColor: cssVarV2.table.indicator.activated,
vars: {
[threePointerIconColorVar]: cssVarV2.table.indicator.pointerActive,
},
},
},
});
@@ -90,9 +102,9 @@ export const threePointerIconStyle = style({
});
export const threePointerIconDotStyle = style({
width: '2px',
height: '2px',
backgroundColor: cssVarV2.icon.secondary,
width: '3px',
height: '3px',
backgroundColor: threePointerIconColorVar,
borderRadius: '50%',
});

2
blocksuite/affine/block-table/src/table-cell.ts
View File

@@ -435,6 +435,7 @@ export class TableCell extends SignalWatcher(
renderColumnOptions(column: TableColumn, columnIndex: number) {
const openColumnOptions = (e: Event) => {
e.stopPropagation();
const element = e.currentTarget;
if (element instanceof HTMLElement) {
this.openColumnOptions(
@@ -461,6 +462,7 @@ export class TableCell extends SignalWatcher(
renderRowOptions(row: TableRow, rowIndex: number) {
const openRowOptions = (e: Event) => {
e.stopPropagation();
const element = e.currentTarget;
if (element instanceof HTMLElement) {
this.openRowOptions(popupTargetFromElement(element), row, rowIndex);