feat(ui): support hiding footer and header (#4455)

dream-num · Jan 21, 2025 · 54e4378 · 54e4378
1 parent b55877b
commit 54e4378
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/packages/ui/src/controllers/ui/ui-desktop.controller.tsx b/packages/ui/src/controllers/ui/ui-desktop.controller.tsx
@@ -29,6 +29,7 @@ import { IMenuManagerService } from '../../services/menu/menu-manager.service';
 import { BuiltInUIPart, IUIPartsService } from '../../services/parts/parts.service';
 import { FloatDom } from '../../views/components/dom/FloatDom';
 import { CanvasPopup } from '../../views/components/popup/CanvasPopup';
+import { Ribbon } from '../../views/components/ribbon/Ribbon';
 import { DesktopWorkbench } from '../../views/workbench/Workbench';
 import { menuSchema } from '../menus/menu.schema';
 
@@ -104,6 +105,7 @@ export class DesktopUIController extends Disposable {
         this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.FLOATING, () => connectInjector(CanvasPopup, this._injector)));
         // this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(ContentDOMPopup, this._injector)));
         this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(FloatDom, this._injector)));
+        this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.TOOLBAR, () => connectInjector(Ribbon, this._injector)));
     }
 }
 

diff --git a/packages/ui/src/services/parts/parts.service.ts b/packages/ui/src/services/parts/parts.service.ts
@@ -35,6 +35,7 @@ export enum BuiltInUIPart {
     CUSTOM_LEFT = 'custom-left',
     CUSTOM_RIGHT = 'custom-right',
     CUSTOM_FOOTER = 'custom-footer',
+    TOOLBAR = 'toolbar',
 }
 
 export interface IUIPartsService {

diff --git a/packages/ui/src/views/components/ComponentContainer.tsx b/packages/ui/src/views/components/ComponentContainer.tsx
@@ -49,7 +49,7 @@ export function ComponentContainer(props: IComponentContainerProps) {
 export function useComponentsOfPart(part: string, injector?: Injector): Set<ComponentRenderer> {
     const uiPartsService = injector?.get(IUIPartsService) ?? useDependency(IUIPartsService);
     const uiVisibleChange$ = useMemo(() => uiPartsService.uiVisibleChange$.pipe(filter((ui) => ui.ui === part)), [part, uiPartsService]);
-    useObservable(uiVisibleChange$);
+    const changeInfo = useObservable(uiVisibleChange$);
 
     const updateCounterRef = useRef<number>(0);
     const componentPartUpdateCount = useObservable(
@@ -61,7 +61,7 @@ export function useComponentsOfPart(part: string, injector?: Injector): Set<Comp
         ),
         undefined,
         undefined,
-        [uiPartsService, part]
+        [uiPartsService, part, changeInfo]
     );
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/packages/ui/src/views/workbench/Workbench.tsx b/packages/ui/src/views/workbench/Workbench.tsx
@@ -26,7 +26,6 @@ import { createPortal } from 'react-dom';
 import { BuiltInUIPart } from '../../services/parts/parts.service';
 import { ComponentContainer, useComponentsOfPart } from '../components/ComponentContainer';
 import { DesktopContextMenu } from '../components/context-menu/ContextMenu';
-import { Ribbon } from '../components/ribbon/Ribbon';
 
 import { Sidebar } from '../components/sidebar/Sidebar';
 import { ZenZone } from '../components/zen-zone/ZenZone';
@@ -61,6 +60,7 @@ export function DesktopWorkbench(props: IUniverWorkbenchProps) {
     const contentComponents = useComponentsOfPart(BuiltInUIPart.CONTENT);
     const leftSidebarComponents = useComponentsOfPart(BuiltInUIPart.LEFT_SIDEBAR);
     const globalComponents = useComponentsOfPart(BuiltInUIPart.GLOBAL);
+    const toolbarComponents = useComponentsOfPart(BuiltInUIPart.TOOLBAR);
 
     const [docSnapShot, setDocSnapShot] = useState<Nullable<IDocumentData>>(null);
 
@@ -141,7 +141,13 @@ export function DesktopWorkbench(props: IUniverWorkbenchProps) {
                 {/* header */}
                 {header && toolbar && (
                     <header className={styles.workbenchContainerHeader}>
-                        <Ribbon headerMenuComponents={headerMenuComponents} />
+                        <ComponentContainer
+                            key="toolbar"
+                            components={toolbarComponents}
+                            sharedProps={{
+                                headerMenuComponents,
+                            }}
+                        />
                     </header>
                 )}
 

diff --git a/packages/ui/src/views/workbench/workbench.module.less b/packages/ui/src/views/workbench/workbench.module.less
@@ -48,7 +48,6 @@
             display: grid;
             grid-template-rows: auto 1fr;
             flex: 1;
-
             background-color: rgb(var(--bg-color-secondary));
             border-bottom: 1px solid rgb(var(--border-color));
         }