From 48f79d64670faddb80c78c997f69f93431d0943e Mon Sep 17 00:00:00 2001 From: CatsJuice Date: Thu, 20 Mar 2025 23:20:57 +0000 Subject: [PATCH] feat(core): adjust property table's style to match design (#10849) ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/278b9dbf-a089-4007-bf35-088301a29d89.png) --- .../component/src/ui/property/property.css.ts | 33 ++++++---- .../component/src/ui/property/property.tsx | 2 + .../components/doc-properties/table.css.ts | 6 +- .../src/components/doc-properties/table.tsx | 4 +- .../doc-properties/types/doc-primary-mode.tsx | 13 +--- .../doc-properties/types/edgeless-theme.tsx | 7 +- .../doc-properties/types/journal.css.ts | 2 +- .../doc-properties/types/page-width.tsx | 7 +- .../doc-properties/types/tags.css.ts | 6 +- .../doc-properties/widgets/radio-group.css.ts | 5 ++ .../doc-properties/widgets/radio-group.tsx | 41 ++++++++++++ .../integration/views/properties-table.tsx | 64 +++++++++++-------- 12 files changed, 122 insertions(+), 68 deletions(-) create mode 100644 packages/frontend/core/src/components/doc-properties/widgets/radio-group.css.ts create mode 100644 packages/frontend/core/src/components/doc-properties/widgets/radio-group.tsx diff --git a/packages/frontend/component/src/ui/property/property.css.ts b/packages/frontend/component/src/ui/property/property.css.ts index 9b2b438b9..c1e45aacf 100644 --- a/packages/frontend/component/src/ui/property/property.css.ts +++ b/packages/frontend/component/src/ui/property/property.css.ts @@ -4,9 +4,9 @@ import { globalStyle, style } from '@vanilla-extract/css'; export const propertyRoot = style({ display: 'flex', - minHeight: 32, + gap: 4, + minHeight: 30, position: 'relative', - padding: '2px 0px 2px 2px', flexWrap: 'wrap', selectors: { '&[draggable="true"]': { @@ -20,7 +20,7 @@ export const propertyRoot = style({ display: 'block', position: 'absolute', cursor: 'grab', - top: '50%', + top: 15, left: 0, borderRadius: '2px', backgroundColor: cssVarV2('text/placeholder'), @@ -36,7 +36,7 @@ export const propertyRoot = style({ display: 'block', position: 'absolute', cursor: 'grab', - top: '50%', + top: 15, left: 0, borderRadius: '2px', backgroundColor: 'transparent', @@ -51,6 +51,11 @@ export const propertyRoot = style({ }, }, }); +export const propertyTableContent = style({ + display: 'flex', + flexDirection: 'column', + gap: 8, +}); export const hide = style({ // Visually hide the property while maintaining its position in the layout. @@ -61,21 +66,24 @@ export const hide = style({ padding: '0px', visibility: 'hidden', pointerEvents: 'none', + position: 'absolute', }); export const propertyNameContainer = style({ display: 'flex', + alignSelf: 'flex-start', flexDirection: 'column', justifyContent: 'start', position: 'relative', borderRadius: 4, fontSize: cssVar('fontSm'), - padding: `6px 6px 6px 4px`, + padding: `4px`, flexShrink: 0, lineHeight: '22px', userSelect: 'none', - color: cssVarV2('text/secondary'), + color: cssVarV2.text.tertiary, width: '160px', + height: 30, selectors: { '&[data-has-menu="true"]': { cursor: 'pointer', @@ -121,7 +129,7 @@ export const propertyValueContainer = style({ borderRadius: 4, fontSize: cssVar('fontSm'), lineHeight: '22px', - padding: `6px`, + padding: `4px`, flex: 1, ':focus-visible': { outline: 'none', @@ -145,9 +153,9 @@ export const propertyValueContainer = style({ export const tableButton = style({ alignSelf: 'flex-start', fontSize: cssVar('fontSm'), - color: `${cssVarV2('text/secondary')}`, - padding: '0 6px', - height: 36, + color: `${cssVarV2.text.tertiary}`, + padding: '0 8px 0px 4px', + height: 30, fontWeight: 400, gap: 6, '@media': { @@ -174,14 +182,14 @@ export const sectionHeader = style({ display: 'flex', alignItems: 'center', gap: 20, - padding: '4px 6px', + padding: '4px', minHeight: 30, }); export const sectionHeaderTrigger = style({ display: 'flex', alignItems: 'center', - gap: 4, + gap: 6, flex: 1, overflow: 'hidden', }); @@ -223,7 +231,6 @@ export const sectionContent = style({ display: 'flex', flexDirection: 'column', gap: 4, - marginTop: 4, selectors: { '&[hidden]': { display: 'none', diff --git a/packages/frontend/component/src/ui/property/property.tsx b/packages/frontend/component/src/ui/property/property.tsx index d12b70157..ba65f5b9d 100644 --- a/packages/frontend/component/src/ui/property/property.tsx +++ b/packages/frontend/component/src/ui/property/property.tsx @@ -137,6 +137,7 @@ export const PropertyCollapsibleContent = forwardRef< defaultCollapsed, onCollapseChange, collapseButtonText, + className, ...props }, ref @@ -179,6 +180,7 @@ export const PropertyCollapsibleContent = forwardRef< ref={ref} data-property-collapsible={finalCollapsible} data-property-collapsed={!finalShowAllHide} + className={clsx(styles.propertyTableContent, className)} {...props} > diff --git a/packages/frontend/core/src/components/doc-properties/table.css.ts b/packages/frontend/core/src/components/doc-properties/table.css.ts index 5ab2014ef..1a7355c9c 100644 --- a/packages/frontend/core/src/components/doc-properties/table.css.ts +++ b/packages/frontend/core/src/components/doc-properties/table.css.ts @@ -121,9 +121,9 @@ export const actionContainer = style({ export const propertyActionButton = style({ fontSize: cssVar('fontSm'), - color: `${cssVarV2('text/secondary')}`, - padding: '0 6px', - height: 34, + color: `${cssVarV2.text.tertiary}`, + padding: '0 4px', + height: 30, fontWeight: 400, gap: 6, width: '160px', diff --git a/packages/frontend/core/src/components/doc-properties/table.tsx b/packages/frontend/core/src/components/doc-properties/table.tsx index 57c12f785..a510d82b0 100644 --- a/packages/frontend/core/src/components/doc-properties/table.tsx +++ b/packages/frontend/core/src/components/doc-properties/table.tsx @@ -449,7 +449,9 @@ const DocPropertiesTableInner = ({ onOpenChange={setExpanded} /> - + } + /> - ); diff --git a/packages/frontend/core/src/components/doc-properties/types/edgeless-theme.tsx b/packages/frontend/core/src/components/doc-properties/types/edgeless-theme.tsx index c71c79625..72beb7313 100644 --- a/packages/frontend/core/src/components/doc-properties/types/edgeless-theme.tsx +++ b/packages/frontend/core/src/components/doc-properties/types/edgeless-theme.tsx @@ -1,9 +1,10 @@ -import { PropertyValue, RadioGroup, type RadioItem } from '@affine/component'; +import { PropertyValue, type RadioItem } from '@affine/component'; import { DocService } from '@affine/core/modules/doc'; import { useI18n } from '@affine/i18n'; import { useLiveData, useService } from '@toeverything/infra'; import { useCallback, useMemo } from 'react'; +import { DocPropertyRadioGroup } from '../widgets/radio-group'; import * as styles from './edgeless-theme.css'; import type { PropertyValueProps } from './types'; @@ -46,9 +47,7 @@ export const EdgelessThemeValue = ({ hoverable={false} readonly={readonly} > - { ); return ( - ) => { + const finalItems = useMemo( + () => + items.map(item => { + let finalItem: RadioItem = { value: '' }; + if (typeof item === 'string') { + finalItem.label = item; + finalItem.value = item; + } else { + finalItem = { ...item }; + finalItem.className = clsx(styles.label, item.className); + } + return finalItem; + }), + [items] + ); + + return ( + + ); +}; diff --git a/packages/frontend/core/src/modules/integration/views/properties-table.tsx b/packages/frontend/core/src/modules/integration/views/properties-table.tsx index 0fafa7831..fb40a84d2 100644 --- a/packages/frontend/core/src/modules/integration/views/properties-table.tsx +++ b/packages/frontend/core/src/modules/integration/views/properties-table.tsx @@ -6,13 +6,17 @@ import { } from '@affine/component'; import { useI18n } from '@affine/i18n'; import { useLiveData, useService } from '@toeverything/infra'; -import { useMemo } from 'react'; +import { type ReactNode, useMemo } from 'react'; import { IntegrationPropertyService } from '../services/integration-property'; import type { IntegrationProperty } from '../type'; import { ValueRenderer } from './property-values'; -export const DocIntegrationPropertiesTable = () => { +export const DocIntegrationPropertiesTable = ({ + divider, +}: { + divider?: ReactNode; +}) => { const t = useI18n(); const integrationPropertyService = useService(IntegrationPropertyService); @@ -36,31 +40,37 @@ export const DocIntegrationPropertiesTable = () => { if (!schema || !integrationType) return null; return ( - - - {properties.map(property => { - const Icon = property.icon; - const key = property.key as string; - const label = property.label; - const displayName = - typeof label === 'string' - ? t[label]() - : t.t(label?.i18nKey, label?.options); + <> + + + {properties.map(property => { + const Icon = property.icon; + const key = property.key as string; + const label = property.label; + const displayName = + typeof label === 'string' + ? t[label]() + : t.t(label?.i18nKey, label?.options); - return ( - - : null} /> - - - ); - })} - - + return ( + + : null} + /> + + + ); + })} + + + {divider} + ); };