From 7fe8d7e96f6998b99098914fc4f844257dd1e79e Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Fri, 6 Sep 2024 10:06:19 +0000
Subject: [PATCH] fix(core): adjust editor settings preview style (#8146)

close PD-1680 PD-1682 PD-1683

https://github.com/user-attachments/assets/49ed9ffe-8e8f-403d-91a0-e42b7f4ffb04
---
 .../general-setting/editor/edgeless/note.tsx  |  1 +
 .../general-setting/editor/edgeless/shape.tsx | 39 +++++++++++++------
 .../editor/edgeless/snapshot.tsx              |  3 +-
 .../general-setting/editor/style.css.ts       | 24 ++++++++++++
 4 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx
index a5548870c7..6f1864bf54 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx
@@ -178,6 +178,7 @@ export const NoteSettings = () => {
         docName="note"
         keyName="affine:note"
         getElements={getElements}
+        height={240}
       />
       <SettingRow
         name={t[
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx
index 8b25ef2388..2aa008f033 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx
@@ -35,7 +35,12 @@ import { useFramework, useLiveData } from '@toeverything/infra';
 import { useCallback, useMemo, useState } from 'react';
 
 import { DropdownMenu } from '../menu';
-import { menuTrigger, settingWrapper, shapeIndicator } from '../style.css';
+import {
+  menuTrigger,
+  preViewLabelWrapper,
+  settingWrapper,
+  shapeIndicator,
+} from '../style.css';
 import { useColor } from '../utils';
 import type { DocName } from './docs';
 import { Point } from './point';
@@ -206,7 +211,12 @@ export const ShapeSettings = () => {
       };
       const isSelected = fillColor === value;
       return (
-        <MenuItem key={name} onSelect={handler} selected={isSelected}>
+        <MenuItem
+          key={name}
+          onSelect={handler}
+          selected={isSelected}
+          prefix={<Point color={value} />}
+        >
           {name}
         </MenuItem>
       );
@@ -221,7 +231,12 @@ export const ShapeSettings = () => {
       };
       const isSelected = strokeColor === value;
       return (
-        <MenuItem key={name} onSelect={handler} selected={isSelected}>
+        <MenuItem
+          key={name}
+          onSelect={handler}
+          selected={isSelected}
+          prefix={<Point color={value} />}
+        >
           {name}
         </MenuItem>
       );
@@ -306,7 +321,12 @@ export const ShapeSettings = () => {
       };
       const isSelected = color === value;
       return (
-        <MenuItem key={name} onSelect={handler} selected={isSelected}>
+        <MenuItem
+          key={name}
+          onSelect={handler}
+          selected={isSelected}
+          prefix={<Point color={value} />}
+        >
           {name}
         </MenuItem>
       );
@@ -373,20 +393,15 @@ export const ShapeSettings = () => {
         firstUpdate={firstUpdate}
       >
         <RadioGroup
-          padding={0}
-          gap={4}
-          itemHeight={28}
-          borderRadius={8}
           value={currentDoc}
           items={docs}
           onChange={setCurrentDoc}
           style={{
-            background: 'transparent',
             position: 'absolute',
-            right: 0,
-            bottom: 0,
+            right: '10px',
+            bottom: '10px',
           }}
-          indicatorClassName={shapeIndicator}
+          className={preViewLabelWrapper}
         />
       </EdgelessSnapshot>
 
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx
index 44b60afc92..31a46e57e5 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx
@@ -12,7 +12,7 @@ import { isEqual } from 'lodash-es';
 import { useCallback, useEffect, useRef } from 'react';
 import { map, pairwise } from 'rxjs';
 
-import { snapshotContainer, snapshotTitle } from '../style.css';
+import { snapshotContainer, snapshotLabel, snapshotTitle } from '../style.css';
 import { type DocName, getDocByName } from './docs';
 import { getFrameBlock } from './utils';
 
@@ -126,6 +126,7 @@ export const EdgelessSnapshot = (props: Props) => {
   return (
     <div className={snapshotContainer}>
       <div className={snapshotTitle}>{title}</div>
+      <div className={snapshotLabel}>{title}</div>
       <div
         ref={wrapperRef}
         style={{
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/style.css.ts
index 74cbfa1f67..27e2d76697 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/style.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/style.css.ts
@@ -8,6 +8,13 @@ export const settingWrapper = style({
   minWidth: '150px',
   maxWidth: '250px',
 });
+export const preViewLabelWrapper = style({
+  flexGrow: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  minWidth: '100px',
+  maxWidth: '250px',
+});
 
 export const menu = style({
   background: 'white',
@@ -46,6 +53,23 @@ export const snapshot = style({
   alignItems: 'center',
 });
 
+export const snapshotLabel = style({
+  position: 'absolute',
+  bottom: '12px',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  fontSize: cssVar('fontXs'),
+  color: cssVarV2('text/secondary'),
+  backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+  padding: '2px 8px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '4px',
+  zIndex: 1,
+  height: '24px',
+});
+
 export const shapeIndicator = style({
   boxShadow: 'none',
   backgroundColor: cssVarV2('layer/background/tertiary'),