feat(core): adjust doc property style (#8561)

packages/common/infra/src/modules/doc/constants.ts

@@ -15,10 +15,12 @@ export const BUILT_IN_CUSTOM_PROPERTY_TYPE = [
     id: 'docPrimaryMode',
     type: 'docPrimaryMode',
     show: 'always-hide',
+    index: 'a0000002',
   },
   {
     id: 'journal',
     type: 'journal',
     show: 'always-hide',
+    index: 'a0000003',
   },
 ] as DocCustomPropertyInfo[];

packages/frontend/component/src/ui/property/property.css.ts

@@ -65,7 +65,7 @@ export const hide = style({
 export const propertyNameContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'center',
+  justifyContent: 'start',
   position: 'relative',
   borderRadius: 4,
   fontSize: cssVar('fontSm'),

packages/frontend/core/src/components/doc-properties/manager/index.tsx

@@ -134,7 +134,7 @@ const PropertyItem = ({
           <MoreHorizontalIcon />
         </IconButton>
       </Menu>
-      <DropIndicator edge={closestEdge} />
+      <DropIndicator edge={closestEdge} noTerminal />
     </div>
   );
 };

packages/frontend/core/src/components/doc-properties/table.css.ts

@@ -148,7 +148,7 @@ export const tableBodySortable = style({
 export const actionContainer = style({
   display: 'flex',
   flexDirection: 'row',
-  gap: 8,
+  paddingTop: '2px',
   selectors: {
     [`[data-property-collapsed="true"] &`]: {
       display: 'none',
@@ -157,13 +157,15 @@ export const actionContainer = style({
 });
 
 export const propertyActionButton = style({
-  alignSelf: 'flex-start',
   fontSize: cssVar('fontSm'),
   color: `${cssVarV2('text/secondary')}`,
   padding: '0 6px',
-  height: 36,
+  height: 34,
   fontWeight: 400,
   gap: 6,
+  width: '160px',
+  borderRadius: '4px',
+  justifyContent: 'start',
   '@media': {
     print: {
       display: 'none',

packages/frontend/core/src/components/doc-properties/types/constant.tsx

@@ -21,6 +21,13 @@ import { TextValue } from './text';
 import type { PropertyValueProps } from './types';
 
 export const DocPropertyTypes = {
+  tags: {
+    icon: TagIcon,
+    value: TagsValue,
+    name: 'com.affine.page-properties.property.tags',
+    uniqueId: 'tags',
+    renameable: false,
+  },
   text: {
     icon: TextIcon,
     value: TextValue,
@@ -31,16 +38,16 @@ export const DocPropertyTypes = {
     value: NumberValue,
     name: 'com.affine.page-properties.property.number',
   },
-  date: {
-    icon: DateTimeIcon,
-    value: DateValue,
-    name: 'com.affine.page-properties.property.date',
-  },
   checkbox: {
     icon: CheckBoxCheckLinearIcon,
     value: CheckboxValue,
     name: 'com.affine.page-properties.property.checkbox',
   },
+  date: {
+    icon: DateTimeIcon,
+    value: DateValue,
+    name: 'com.affine.page-properties.property.date',
+  },
   createdBy: {
     icon: CreatedEditedIcon,
     value: CreatedByValue,
@@ -51,13 +58,6 @@ export const DocPropertyTypes = {
     value: UpdatedByValue,
     name: 'com.affine.page-properties.property.updatedBy',
   },
-  tags: {
-    icon: TagIcon,
-    value: TagsValue,
-    name: 'com.affine.page-properties.property.tags',
-    uniqueId: 'tags',
-    renameable: false,
-  },
   docPrimaryMode: {
     icon: FileIcon,
     value: DocPrimaryModeValue,
@@ -67,8 +67,6 @@ export const DocPropertyTypes = {
     icon: TodayIcon,
     value: JournalValue,
     name: 'com.affine.page-properties.property.journal',
-    uniqueId: 'journal',
-    renameable: false,
   },
 } as Record<
   string,

packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+
+export const radioGroup = style({
+  //   height: '28px',
+});
+
+export const container = style({
+  paddingTop: '3px',
+  paddingBottom: '3px',
+});

packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx

@@ -9,6 +9,8 @@ import type { DocMode } from '@blocksuite/affine/blocks';
 import { DocService, useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
+import * as styles from './doc-primary-mode.css';
+
 export const DocPrimaryModeValue = () => {
   const t = useI18n();
   const doc = useService(DocService).doc;
@@ -46,12 +48,14 @@ export const DocPrimaryModeValue = () => {
     [doc, t]
   );
   return (
-    <PropertyValue>
+    <PropertyValue className={styles.container}>
       <RadioGroup
         width={194}
+        itemHeight={24}
         value={primaryMode}
         onChange={handleChange}
         items={DocModeItems}
+        className={styles.radioGroup}
       />
     </PropertyValue>
   );

tests/affine-local/e2e/page-properties.spec.ts

@@ -120,9 +120,9 @@ test('property table reordering', async ({ page }) => {
 
   // new order should be Doc mode, (Tags), Number, Date, Checkbox, Text
   for (const [index, property] of [
-    'Journal',
-    'Doc mode',
     'Tags',
+    'Doc mode',
+    'Journal',
     'Number',
     'Date',
     'Checkbox',
@@ -160,9 +160,9 @@ test('page info show more will show all properties', async ({ page }) => {
   await page.click('[data-testid="property-collapsible-button"]');
 
   for (const [index, property] of [
-    'Journal',
-    'Doc mode',
     'Tags',
+    'Doc mode',
+    'Journal',
     'Text',
     'Number',
     'Date',