Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-22 04:26:23 +08: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
blocksuite/affine/block-table/src/table-cell.css.ts
+21 -9
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%',
});