mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-12 23:56:36 +08:00
zzj3720
0f1a3c212d
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced modular UI logic layers for Kanban and Table views, enhancing maintainability and scalability. - Added new CSS-in-JS style modules for database blocks and table views, improving visual consistency. - Expanded telemetry event tracking for database views, properties, filters, and groups. - Added utility functions for lazy initialization and cached computed values. - **Refactor** - Unified logic and state management across Kanban and Table views by replacing direct component dependencies with logic-centric architecture. - Updated components and widgets to use the new logic-based approach for state, selection, and event handling. - Replaced inline styles with CSS classes; updated class names to align with new component structure. - Centralized state access through UI logic instances, eliminating direct DOM queries and simplifying dependencies. - Consolidated Kanban and Table view presets effects for streamlined initialization. - Replaced Lit reactive state with Preact signals in multiple components for improved reactivity. - Split monolithic components into separate logic and UI classes for clearer separation of concerns. - Removed obsolete components and consolidated exports for cleaner API surface. - **Bug Fixes** - Enhanced selection and interaction reliability in database cells and views. - Fixed scrolling issues on mobile table views for improved compatibility. - **Chores** - Updated end-to-end test selectors to reflect new component names and structure. - Removed deprecated utilities and cleaned up unused imports. - **Documentation** - Improved type definitions and public API exports for better developer experience. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
74 lines
1.5 KiB
TypeScript
74 lines
1.5 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import { cssVarV2 } from '@toeverything/theme/v2';
|
|
|
|
export const databaseBlockStyles = css({
|
|
display: 'block',
|
|
borderRadius: '8px',
|
|
backgroundColor: 'var(--affine-background-primary-color)',
|
|
padding: '8px',
|
|
margin: '8px -8px -8px',
|
|
});
|
|
|
|
export const databaseBlockSelectedStyles = css({
|
|
backgroundColor: 'var(--affine-hover-color)',
|
|
borderRadius: '4px',
|
|
});
|
|
|
|
export const databaseOpsStyles = css({
|
|
padding: '2px',
|
|
borderRadius: '4px',
|
|
display: 'flex',
|
|
cursor: 'pointer',
|
|
alignItems: 'center',
|
|
height: 'max-content',
|
|
fontSize: '16px',
|
|
color: cssVarV2.icon.primary,
|
|
':hover': {
|
|
backgroundColor: 'var(--affine-hover-color)',
|
|
},
|
|
|
|
'@media print': {
|
|
display: 'none',
|
|
},
|
|
});
|
|
|
|
export const databaseHeaderBarStyles = css({
|
|
'@media print': {
|
|
display: 'none !important',
|
|
},
|
|
});
|
|
|
|
export const databaseTitleStyles = css({
|
|
overflow: 'hidden',
|
|
});
|
|
|
|
export const databaseHeaderContainerStyles = css({
|
|
marginBottom: '16px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
});
|
|
|
|
export const databaseTitleRowStyles = css({
|
|
display: 'flex',
|
|
gap: '12px',
|
|
marginBottom: '8px',
|
|
alignItems: 'center',
|
|
});
|
|
|
|
export const databaseToolbarRowStyles = css({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: '12px',
|
|
});
|
|
|
|
export const databaseViewBarContainerStyles = css({
|
|
flex: 1,
|
|
});
|
|
|
|
export const databaseContentStyles = css({
|
|
position: 'relative',
|
|
backgroundColor: 'var(--affine-background-primary-color)',
|
|
borderRadius: '4px',
|
|
});
|