feat(docs): add gray background color to docs

dream-num · Sep 21, 2024 · 8f40a37 · 8f40a37
1 parent d8b9271
commit 8f40a37
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 16 deletions.
diff --git a/packages/engine-render/src/components/docs/document.ts b/packages/engine-render/src/components/docs/document.ts
@@ -14,29 +14,29 @@
  * limitations under the License.
  */
 
-import './extensions';
-
 import { CellValueType, HorizontalAlign, VerticalAlign, WrapStrategy } from '@univerjs/core';
-import type { IDocumentRenderConfig, IScale, Nullable } from '@univerjs/core';
+
 import { Subject } from 'rxjs';
+import type { IDocumentRenderConfig, IScale, Nullable } from '@univerjs/core';
+import { BORDER_TYPE, drawLineByBorderType } from '../../basics';
 import { calculateRectRotate, getRotateOffsetAndFarthestHypotenuse } from '../../basics/draw';
-import type { IDocumentSkeletonGlyph, IDocumentSkeletonLine, IDocumentSkeletonPage, IDocumentSkeletonTable } from '../../basics/i-document-skeleton-cached';
 import { LineType } from '../../basics/i-document-skeleton-cached';
+import { VERTICAL_ROTATE_ANGLE } from '../../basics/text-rotation';
 import { degToRad } from '../../basics/tools';
+import { Vector2 } from '../../basics/vector2';
+import { DocumentsSpanAndLineExtensionRegistry } from '../extension';
+import { DocComponent } from './doc-component';
+import { DOCS_EXTENSION_TYPE } from './doc-extension';
+import { Liquid } from './liquid';
+import type { IDocumentSkeletonGlyph, IDocumentSkeletonLine, IDocumentSkeletonPage, IDocumentSkeletonTable } from '../../basics/i-document-skeleton-cached';
 import type { Transform } from '../../basics/transform';
 import type { IBoundRectNoAngle, IViewportInfo } from '../../basics/vector2';
-import { Vector2 } from '../../basics/vector2';
 import type { UniverRenderingContext } from '../../context';
 import type { Scene } from '../../scene';
 import type { ComponentExtension, IExtensionConfig } from '../extension';
-import { DocumentsSpanAndLineExtensionRegistry } from '../extension';
-import { VERTICAL_ROTATE_ANGLE } from '../../basics/text-rotation';
-import { BORDER_TYPE, drawLineByBorderType } from '../../basics';
-import { Liquid } from './liquid';
 import type { IDocumentsConfig, IPageMarginLayout } from './doc-component';
-import { DocComponent } from './doc-component';
-import { DOCS_EXTENSION_TYPE } from './doc-extension';
 import type { DocumentSkeleton } from './layout/doc-skeleton';
+import './extensions';
 
 export interface IPageRenderConfig {
     page: IDocumentSkeletonPage;

diff --git a/packages/ui/src/views/workbench/Workbench.tsx b/packages/ui/src/views/workbench/Workbench.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { LocaleService, ThemeService, useDependency } from '@univerjs/core';
-import type { ILocale } from '@univerjs/design';
+import { IUniverInstanceService, LocaleService, ThemeService, UniverInstanceType, useDependency } from '@univerjs/core';
 import { ConfigContext, ConfigProvider, defaultTheme, themeInstance } from '@univerjs/design';
+import clsx from 'clsx';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import { createPortal } from 'react-dom';
-import type { IWorkbenchOptions } from '../../controllers/ui/ui.controller';
+import type { ILocale } from '@univerjs/design';
 import { IMessageService } from '../../services/message/message.service';
 import { BuiltInUIPart } from '../../services/parts/parts.service';
 import { ComponentContainer, useComponentsOfPart } from '../components/ComponentContainer';
@@ -31,6 +31,7 @@ import { ZenZone } from '../components/zen-zone/ZenZone';
 import { builtInGlobalComponents } from '../parts';
 
 import styles from './workbench.module.less';
+import type { IWorkbenchOptions } from '../../controllers/ui/ui.controller';
 
 export interface IUniverWorkbenchProps extends IWorkbenchOptions {
     mountContainer: HTMLElement;
@@ -51,6 +52,7 @@ export function DesktopWorkbench(props: IUniverWorkbenchProps) {
     const localeService = useDependency(LocaleService);
     const themeService = useDependency(ThemeService);
     const messageService = useDependency(IMessageService);
+    const instanceService = useDependency(IUniverInstanceService);
     const contentRef = useRef<HTMLDivElement>(null);
 
     const footerComponents = useComponentsOfPart(BuiltInUIPart.FOOTER);
@@ -60,6 +62,24 @@ export function DesktopWorkbench(props: IUniverWorkbenchProps) {
     const leftSidebarComponents = useComponentsOfPart(BuiltInUIPart.LEFT_SIDEBAR);
     const globalComponents = useComponentsOfPart(BuiltInUIPart.GLOBAL);
 
+    const [focusUnitType, setFocusUnitType] = useState<UniverInstanceType>(UniverInstanceType.UNIVER_UNKNOWN);
+
+    useEffect(() => {
+        const sub = instanceService.focused$.subscribe((id) => {
+            if (id == null) {
+                return;
+            }
+            const instanceType = instanceService.getUnitType(id);
+
+            setFocusUnitType(instanceType);
+        });
+
+        return () => {
+            sub.unsubscribe();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     useEffect(() => {
         if (!themeService.getCurrentTheme()) {
             themeService.setTheme(defaultTheme);
@@ -88,7 +108,9 @@ export function DesktopWorkbench(props: IUniverWorkbenchProps) {
             }),
             themeService.currentTheme$.subscribe((theme) => {
                 themeInstance.setTheme(mountContainer, theme);
-                portalContainer && themeInstance.setTheme(portalContainer, theme);
+                if (portalContainer) {
+                    themeInstance.setTheme(portalContainer, theme);
+                }
             }),
         ];
 
@@ -123,7 +145,13 @@ export function DesktopWorkbench(props: IUniverWorkbenchProps) {
                             <ComponentContainer key="left-sidebar" components={leftSidebarComponents} />
                         </aside>
 
-                        <section className={styles.workbenchContainerContent}>
+                        <section className={clsx(
+                            styles.workbenchContainerContent,
+                            {
+                                [styles.workbenchContainerDocContent]: focusUnitType === UniverInstanceType.UNIVER_DOC,
+                            }
+                        )}
+                        >
                             <header>
                                 {header && <ComponentContainer key="header" components={headerComponents} />}
                             </header>

diff --git a/packages/ui/src/views/workbench/workbench.module.less b/packages/ui/src/views/workbench/workbench.module.less
@@ -45,6 +45,10 @@
             border-bottom: 1px solid rgb(var(--border-color));
         }
 
+        &-doc-content {
+            background: rgb(var(--grey-50));
+        }
+
         &-canvas {
             position: relative;
             overflow: hidden;