diff --git a/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png b/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png index 067d380974..18246e6b03 100644 Binary files a/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png and b/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-filter-row-current-worksheet-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-filter-row-current-worksheet-ci-chromium-linux.png index 22cdc3f390..6cc852d87f 100644 Binary files a/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-filter-row-current-worksheet-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-filter-row-current-worksheet-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-filter-row-other-worksheet-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-filter-row-other-worksheet-ci-chromium-linux.png index 18d58660f3..58232a98ad 100644 Binary files a/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-filter-row-other-worksheet-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-filter-row-other-worksheet-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-hide-row-current-worksheet-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-hide-row-current-worksheet-ci-chromium-linux.png index 9a0bde2c35..621567705c 100644 Binary files a/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-hide-row-current-worksheet-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-formula-related.spec.ts-snapshots/formula-hide-row-current-worksheet-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-gridlines.spec.ts-snapshots/sheets-no-gridlines-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-gridlines.spec.ts-snapshots/sheets-no-gridlines-ci-chromium-linux.png index 30cceb1094..7701bd6e19 100644 Binary files a/e2e/visual-comparison/sheets/sheets-gridlines.spec.ts-snapshots/sheets-no-gridlines-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-gridlines.spec.ts-snapshots/sheets-no-gridlines-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-scroll.spec.ts-snapshots/mergedCellsRenderingScrolling-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-scroll.spec.ts-snapshots/mergedCellsRenderingScrolling-ci-chromium-linux.png index 3a6ccc7511..229a0483f6 100644 Binary files a/e2e/visual-comparison/sheets/sheets-scroll.spec.ts-snapshots/mergedCellsRenderingScrolling-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-scroll.spec.ts-snapshots/mergedCellsRenderingScrolling-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-scroll.spec.ts-snapshots/renderingAfterScrollByAPI-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-scroll.spec.ts-snapshots/renderingAfterScrollByAPI-ci-chromium-linux.png index 264263698f..3c02c03cd1 100644 Binary files a/e2e/visual-comparison/sheets/sheets-scroll.spec.ts-snapshots/renderingAfterScrollByAPI-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-scroll.spec.ts-snapshots/renderingAfterScrollByAPI-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png index a5f6791490..a1ce64a557 100644 Binary files a/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png index b4db561d1d..2114ff10bd 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/dark-mode-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-ci-chromium-linux.png index 0a35162d3e..53970b784e 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png index 8aef79e987..5a5e8c93ed 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/defaultstyle-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/defaultstyle-ci-chromium-linux.png index 603fe0b550..b4ffab4fd3 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/defaultstyle-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/defaultstyle-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/demo-sheet-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/demo-sheet-ci-chromium-linux.png index 400130ef1b..07a11192b9 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/demo-sheet-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/demo-sheet-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/facade-sheet-hooks-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/facade-sheet-hooks-ci-chromium-linux.png index bd02e6fa2e..6c0c429b65 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/facade-sheet-hooks-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/facade-sheet-hooks-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRendering-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRendering-ci-chromium-linux.png index 3a6ccc7511..229a0483f6 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRendering-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRendering-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/set-force-string-cell-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/set-force-string-cell-ci-chromium-linux.png index 429a7db7d0..87d94ee824 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/set-force-string-cell-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/set-force-string-cell-ci-chromium-linux.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/set-text-format-number-cell-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/set-text-format-number-cell-ci-chromium-linux.png index 21692c332a..cc409e7b09 100644 Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/set-text-format-number-cell-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/set-text-format-number-cell-ci-chromium-linux.png differ diff --git a/examples/src/sheets/custom-menu/controllers/custom-menu.controller.ts b/examples/src/sheets/custom-menu/controllers/custom-menu.controller.ts index 6bf4a08838..74b53a12e0 100644 --- a/examples/src/sheets/custom-menu/controllers/custom-menu.controller.ts +++ b/examples/src/sheets/custom-menu/controllers/custom-menu.controller.ts @@ -16,7 +16,7 @@ import { Disposable, ICommandService, Inject, Injector } from '@univerjs/core'; import { AiSingle, BarChartSingle, CommentSingle } from '@univerjs/icons'; -import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, MenuItemType, RibbonStartGroup } from '@univerjs/ui'; +import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, MenuItemType, RibbonOthersGroup } from '@univerjs/ui'; import { DropdownListFirstItemOperation, DropdownListSecondItemOperation } from '../commands/operations/dropdown-list.operation'; import { SingleButtonOperation } from '../commands/operations/single-button.operation'; import { CUSTOM_MENU_DROPDOWN_LIST_OPERATION_ID, CustomMenuItemDropdownListFirstItemFactory, CustomMenuItemDropdownListMainButtonFactory, CustomMenuItemDropdownListSecondItemFactory } from './menu/dropdown-list.menu'; @@ -74,7 +74,7 @@ export class CustomMenuController extends Disposable { }, })); this._menuManagerService.mergeMenu({ - [RibbonStartGroup.OTHERS]: { + [RibbonOthersGroup.OTHERS]: { [SingleButtonOperation.id]: { order: 9999, menuItemFactory: CustomMenuItemSingleButtonFactory, diff --git a/examples/src/sheets/custom-plugin/import-csv-button.ts b/examples/src/sheets/custom-plugin/import-csv-button.ts index 45297c3514..80c5c8f068 100644 --- a/examples/src/sheets/custom-plugin/import-csv-button.ts +++ b/examples/src/sheets/custom-plugin/import-csv-button.ts @@ -41,7 +41,7 @@ import { ComponentManager, IMenuManagerService, MenuItemType, - RibbonStartGroup, + RibbonOthersGroup, } from '@univerjs/ui'; /** @@ -210,7 +210,7 @@ class ImportCSVButtonPlugin extends Plugin { }); this.menuManagerService.mergeMenu({ - [RibbonStartGroup.OTHERS]: { + [RibbonOthersGroup.OTHERS]: { [buttonId]: { order: 10, menuItemFactory, diff --git a/package.json b/package.json index 06b1dbbea7..d810e695cb 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "@types/fs-extra": "^11.0.4", "@types/node": "^22.15.17", "@types/react": "^19.1.4", - "@types/react-dom": "^19.1.4", + "@types/react-dom": "^19.1.5", "@univerjs-infra/shared": "workspace:*", "@univerjs/design": "workspace:*", "@vitejs/plugin-react": "^4.4.1", @@ -89,7 +89,7 @@ }, "resolutions": { "@types/react": "^19.1.3", - "@types/react-dom": "^19.1.4", + "@types/react-dom": "^19.1.5", "react": "^19.1.0", "react-dom": "^19.1.0" }, diff --git a/packages-experimental/debugger/src/controllers/menu.ts b/packages-experimental/debugger/src/controllers/menu.ts index cf93c7e795..8fc9a3d352 100644 --- a/packages-experimental/debugger/src/controllers/menu.ts +++ b/packages-experimental/debugger/src/controllers/menu.ts @@ -99,11 +99,11 @@ export function ThemeMenuItemFactory(): IMenuSelectorItem { type: MenuItemType.SELECTOR, selections: [ { - label: 'green', + label: '🟢', value: greenTheme as any, }, { - label: 'default', + label: '🔵', value: defaultTheme as any, }, ], diff --git a/packages-experimental/debugger/src/controllers/multi-units/multi-units.menu.ts b/packages-experimental/debugger/src/controllers/multi-units/multi-units.menu.ts index 255220cbea..89b04f8dcf 100644 --- a/packages-experimental/debugger/src/controllers/multi-units/multi-units.menu.ts +++ b/packages-experimental/debugger/src/controllers/multi-units/multi-units.menu.ts @@ -17,7 +17,7 @@ import type { IAccessor, IOperation, Workbook } from '@univerjs/core'; import type { IMenuSelectorItem, IValueOption, MenuSchemaType } from '@univerjs/ui'; import { CommandType, IUniverInstanceService, UniverInstanceType } from '@univerjs/core'; -import { MenuItemType, RibbonStartGroup } from '@univerjs/ui'; +import { MenuItemType, RibbonOthersGroup } from '@univerjs/ui'; import { merge, Observable, shareReplay } from 'rxjs'; export const SwitchUnitOperation: IOperation<{ value: string }> = { @@ -53,7 +53,7 @@ function SwitchUnitMenuFactory(accessor: IAccessor): IMenuSelectorItem { } export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.OTHERS]: { + [RibbonOthersGroup.OTHERS]: { [SwitchUnitOperation.id]: { order: 999, menuItemFactory: SwitchUnitMenuFactory, diff --git a/packages/action-recorder/src/controllers/action-recorder.menu.ts b/packages/action-recorder/src/controllers/action-recorder.menu.ts index 3efacf0605..e1a7bc802d 100644 --- a/packages/action-recorder/src/controllers/action-recorder.menu.ts +++ b/packages/action-recorder/src/controllers/action-recorder.menu.ts @@ -69,7 +69,7 @@ export function ReplayLocalRecordOnActiveMenuItemFactory(): IMenuButtonItem { export const menuSchema: MenuSchemaType = { [RibbonStartGroup.OTHERS]: { [RECORD_MENU_ITEM_ID]: { - order: 10, + order: 2, menuItemFactory: RecordMenuItemFactory, [OpenRecordPanelOperation.id]: { order: 1, diff --git a/packages/design/src/helper/class-utilities.ts b/packages/design/src/helper/class-utilities.ts index 089dd91039..1b78b104ad 100644 --- a/packages/design/src/helper/class-utilities.ts +++ b/packages/design/src/helper/class-utilities.ts @@ -26,3 +26,4 @@ export const borderTopClassName = clsx(borderBasicClassName, 'univer-border-t un export const borderBottomClassName = clsx(borderBasicClassName, 'univer-border-b univer-border-0'); export const borderRightClassName = clsx(borderBasicClassName, 'univer-border-r univer-border-0'); export const divideYClassName = 'univer-divide-gray-200 dark:univer-divide-gray-600 univer-divide-y univer-divide-x-0 univer-divide-solid'; +export const divideXClassName = 'univer-divide-gray-200 dark:univer-divide-gray-600 univer-divide-x univer-divide-y-0 univer-divide-solid'; diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts index dc147bc43b..e22cf5f23b 100644 --- a/packages/design/src/index.ts +++ b/packages/design/src/index.ts @@ -69,6 +69,7 @@ export { borderLeftClassName, borderRightClassName, borderTopClassName, + divideXClassName, divideYClassName, scrollbarClassName, } from './helper/class-utilities'; diff --git a/packages/docs-drawing-ui/src/controllers/menu.schema.ts b/packages/docs-drawing-ui/src/controllers/menu.schema.ts index 34194d5104..e0bd4d559e 100644 --- a/packages/docs-drawing-ui/src/controllers/menu.schema.ts +++ b/packages/docs-drawing-ui/src/controllers/menu.schema.ts @@ -15,7 +15,7 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { RibbonStartGroup } from '@univerjs/ui'; +import { RibbonInsertGroup } from '@univerjs/ui'; import { DOCS_IMAGE_MENU_ID, IMAGE_MENU_UPLOAD_FLOAT_ID, @@ -24,7 +24,7 @@ import { } from '../views/menu/image.menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.LAYOUT]: { + [RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: { order: 0, menuItemFactory: ImageMenuFactory, diff --git a/packages/docs-hyper-link-ui/src/controllers/menu.schema.ts b/packages/docs-hyper-link-ui/src/controllers/menu.schema.ts index 22eba71c27..3091de80ab 100644 --- a/packages/docs-hyper-link-ui/src/controllers/menu.schema.ts +++ b/packages/docs-hyper-link-ui/src/controllers/menu.schema.ts @@ -15,14 +15,14 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui'; +import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup } from '@univerjs/ui'; import { ShowDocHyperLinkEditPopupOperation } from '../commands/operations/popup.operation'; import { AddHyperLinkMenuItemFactory } from './menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.OTHERS]: { + [RibbonInsertGroup.MEDIA]: { [ShowDocHyperLinkEditPopupOperation.id]: { - order: 0, + order: 1, menuItemFactory: AddHyperLinkMenuItemFactory, }, }, diff --git a/packages/docs-thread-comment-ui/src/controllers/menu.schema.ts b/packages/docs-thread-comment-ui/src/controllers/menu.schema.ts index b8ebeb011b..5493514180 100644 --- a/packages/docs-thread-comment-ui/src/controllers/menu.schema.ts +++ b/packages/docs-thread-comment-ui/src/controllers/menu.schema.ts @@ -15,7 +15,7 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui'; +import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup } from '@univerjs/ui'; import { StartAddCommentOperation, ToggleCommentPanelOperation, @@ -23,9 +23,9 @@ import { import { AddDocCommentMenuItemFactory, ToolbarDocCommentMenuItemFactory } from './menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.OTHERS]: { + [RibbonInsertGroup.MEDIA]: { [ToggleCommentPanelOperation.id]: { - order: 1, + order: 3, menuItemFactory: ToolbarDocCommentMenuItemFactory, }, }, diff --git a/packages/docs-ui/package.json b/packages/docs-ui/package.json index a8a76a16c3..daac3e27a4 100644 --- a/packages/docs-ui/package.json +++ b/packages/docs-ui/package.json @@ -91,7 +91,7 @@ "@univerjs-infra/shared": "workspace:*", "@univerjs/docs-drawing": "workspace:*", "jest-canvas-mock": "^2.5.2", - "jsdom": "^24.1.1", + "jsdom": "^26.1.0", "postcss": "^8.5.3", "react": "18.3.1", "rxjs": "^7.8.2", diff --git a/packages/docs-ui/src/controllers/menu.schema.ts b/packages/docs-ui/src/controllers/menu.schema.ts index 2c24d06635..04f32baacb 100644 --- a/packages/docs-ui/src/controllers/menu.schema.ts +++ b/packages/docs-ui/src/controllers/menu.schema.ts @@ -15,7 +15,7 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui'; +import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup, RibbonStartGroup } from '@univerjs/ui'; import { DocCopyCommand, DocCopyCurrentParagraphCommand, DocCutCommand, DocCutCurrentParagraphCommand, DocPasteCommand } from '../commands/commands/clipboard.command'; import { DeleteCurrentParagraphCommand, DeleteLeftCommand } from '../commands/commands/doc-delete.command'; import { OpenHeaderFooterPanelCommand } from '../commands/commands/doc-header-footer.command'; @@ -131,14 +131,6 @@ export const menuSchema: MenuSchemaType = { }, }, [RibbonStartGroup.LAYOUT]: { - [TABLE_MENU_ID]: { - order: 1, - menuItemFactory: TableMenuFactory, - [DocCreateTableOperation.id]: { - order: 0, - menuItemFactory: InsertTableMenuFactory, - }, - }, [AlignLeftCommand.id]: { order: 2, menuItemFactory: AlignLeftMenuItemFactory, @@ -184,6 +176,16 @@ export const menuSchema: MenuSchemaType = { menuItemFactory: PageSettingMenuItemFactory, }, }, + [RibbonInsertGroup.MEDIA]: { + [TABLE_MENU_ID]: { + order: 2, + menuItemFactory: TableMenuFactory, + [DocCreateTableOperation.id]: { + order: 0, + menuItemFactory: InsertTableMenuFactory, + }, + }, + }, [ContextMenuPosition.MAIN_AREA]: { [ContextMenuGroup.FORMAT]: { [DocCopyCommand.name]: { diff --git a/packages/docs-ui/src/views/doc-footer/DocFooter.tsx b/packages/docs-ui/src/views/doc-footer/DocFooter.tsx index f72aa73aa8..5b3579535e 100644 --- a/packages/docs-ui/src/views/doc-footer/DocFooter.tsx +++ b/packages/docs-ui/src/views/doc-footer/DocFooter.tsx @@ -30,7 +30,11 @@ export function DocFooter() { return workbook ? null : isShow && ( -
+
diff --git a/packages/find-replace/src/controllers/menu.schema.ts b/packages/find-replace/src/controllers/menu.schema.ts index b1b968aba1..e9a7152248 100644 --- a/packages/find-replace/src/controllers/menu.schema.ts +++ b/packages/find-replace/src/controllers/menu.schema.ts @@ -15,12 +15,12 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { RibbonStartGroup } from '@univerjs/ui'; +import { RibbonDataGroup } from '@univerjs/ui'; import { OpenFindDialogOperation } from '../commands/operations/find-replace.operation'; import { FindReplaceMenuItemFactory } from './find-replace.menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.OTHERS]: { + [RibbonDataGroup.ORGANIZATION]: { [OpenFindDialogOperation.id]: { order: 2, menuItemFactory: FindReplaceMenuItemFactory, diff --git a/packages/sheets-conditional-formatting-ui/src/controllers/menu.schema.ts b/packages/sheets-conditional-formatting-ui/src/controllers/menu.schema.ts index f35665f276..ac95d8f073 100644 --- a/packages/sheets-conditional-formatting-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-conditional-formatting-ui/src/controllers/menu.schema.ts @@ -15,14 +15,14 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { RibbonStartGroup } from '@univerjs/ui'; +import { RibbonDataGroup } from '@univerjs/ui'; import { OpenConditionalFormattingOperator } from '../commands/operations/open-conditional-formatting-panel'; import { FactoryManageConditionalFormattingRule } from '../menu/manage-rule'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.FORMULAS_INSERT]: { + [RibbonDataGroup.RULES]: { [OpenConditionalFormattingOperator.id]: { - order: 0, + order: 1, menuItemFactory: FactoryManageConditionalFormattingRule, }, }, diff --git a/packages/sheets-data-validation-ui/src/controllers/menu.schema.ts b/packages/sheets-data-validation-ui/src/controllers/menu.schema.ts index caed46bbaf..f6bc0033aa 100644 --- a/packages/sheets-data-validation-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-data-validation-ui/src/controllers/menu.schema.ts @@ -15,7 +15,7 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { RibbonStartGroup } from '@univerjs/ui'; +import { RibbonDataGroup } from '@univerjs/ui'; import { AddSheetDataValidationAndOpenCommand } from '../commands/commands/data-validation-ui.command'; import { OpenValidationPanelOperation } from '../commands/operations/data-validation.operation'; import { @@ -26,9 +26,9 @@ import { } from './dv.menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.FORMULAS_INSERT]: { + [RibbonDataGroup.RULES]: { [DATA_VALIDATION_MENU_ID]: { - order: 9, + order: 0, menuItemFactory: dataValidationMenuFactory, [OpenValidationPanelOperation.id]: { order: 0, diff --git a/packages/sheets-drawing-ui/src/controllers/menu.schema.ts b/packages/sheets-drawing-ui/src/controllers/menu.schema.ts index cc9d3562f6..0cb5885bff 100644 --- a/packages/sheets-drawing-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-drawing-ui/src/controllers/menu.schema.ts @@ -15,14 +15,14 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { RibbonStartGroup } from '@univerjs/ui'; +import { RibbonInsertGroup } from '@univerjs/ui'; import { InsertCellImageCommand, InsertFloatImageCommand } from '../commands/commands/insert-image.command'; import { ImageMenuFactory, SHEETS_IMAGE_MENU_ID, UploadCellImageMenuFactory, UploadFloatImageMenuFactory } from '../views/menu/image.menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.FORMULAS_INSERT]: { + [RibbonInsertGroup.MEDIA]: { [SHEETS_IMAGE_MENU_ID]: { - order: 3, + order: 0, menuItemFactory: ImageMenuFactory, [InsertFloatImageCommand.id]: { order: 0, diff --git a/packages/sheets-filter-ui/src/controllers/menu.schema.ts b/packages/sheets-filter-ui/src/controllers/menu.schema.ts index 7ac22a26d7..ae75291aa0 100644 --- a/packages/sheets-filter-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-filter-ui/src/controllers/menu.schema.ts @@ -20,7 +20,7 @@ import { ReCalcSheetsFilterCommand, SmartToggleSheetsFilterCommand, } from '@univerjs/sheets-filter'; -import { RibbonStartGroup } from '@univerjs/ui'; +import { RibbonDataGroup } from '@univerjs/ui'; import { ClearFilterCriteriaMenuItemFactory, ReCalcFilterMenuItemFactory, @@ -28,9 +28,9 @@ import { } from './sheets-filter.menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.FORMULAS_INSERT]: { + [RibbonDataGroup.ORGANIZATION]: { [SmartToggleSheetsFilterCommand.id]: { - order: 10, + order: 2, menuItemFactory: SmartToggleFilterMenuItemFactory, [ClearSheetsFilterCriteriaCommand.id]: { order: 0, diff --git a/packages/sheets-formula-ui/src/controllers/menu.schema.ts b/packages/sheets-formula-ui/src/controllers/menu.schema.ts index b15e2b3d69..e8894348fc 100644 --- a/packages/sheets-formula-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-formula-ui/src/controllers/menu.schema.ts @@ -16,22 +16,45 @@ import type { MenuSchemaType } from '@univerjs/ui'; import { PASTE_SPECIAL_MENU_ID } from '@univerjs/sheets-ui'; -import { RibbonStartGroup } from '@univerjs/ui'; +import { RibbonFormulasGroup } from '@univerjs/ui'; import { SheetOnlyPasteFormulaCommand } from '../commands/commands/formula-clipboard.command'; import { InsertFunctionOperation } from '../commands/operations/insert-function.operation'; -import { MoreFunctionsOperation } from '../commands/operations/more-functions.operation'; -import { InsertFunctionMenuItemFactory, MoreFunctionsMenuItemFactory, PasteFormulaMenuItemFactory } from './menu'; +import { + InsertAVERAGEFunctionMenuItemFactory, + InsertCOUNTFunctionMenuItemFactory, + InsertMAXFunctionMenuItemFactory, + InsertMINFunctionMenuItemFactory, + InsertSUMFunctionMenuItemFactory, + MoreFunctionsMenuItemFactory, + PasteFormulaMenuItemFactory, +} from './menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.FORMULAS_INSERT]: { - [InsertFunctionOperation.id]: { - order: 1, - menuItemFactory: InsertFunctionMenuItemFactory, - [MoreFunctionsOperation.id]: { - order: 1, - menuItemFactory: MoreFunctionsMenuItemFactory, - }, + [RibbonFormulasGroup.BASIC]: { + [`${InsertFunctionOperation.id}.sum`]: { + order: 0, + menuItemFactory: InsertSUMFunctionMenuItemFactory, }, + [`${InsertFunctionOperation.id}.count`]: { + order: 0, + menuItemFactory: InsertCOUNTFunctionMenuItemFactory, + }, + [`${InsertFunctionOperation.id}.average`]: { + order: 0, + menuItemFactory: InsertAVERAGEFunctionMenuItemFactory, + }, + [`${InsertFunctionOperation.id}.max`]: { + order: 0, + menuItemFactory: InsertMAXFunctionMenuItemFactory, + }, + [`${InsertFunctionOperation.id}.min`]: { + order: 0, + menuItemFactory: InsertMINFunctionMenuItemFactory, + }, + }, + [RibbonFormulasGroup.OTHERS]: { + order: 0, + menuItemFactory: MoreFunctionsMenuItemFactory, }, [PASTE_SPECIAL_MENU_ID]: { [SheetOnlyPasteFormulaCommand.id]: { diff --git a/packages/sheets-formula-ui/src/controllers/menu.ts b/packages/sheets-formula-ui/src/controllers/menu.ts index 980cb2807c..8a5551701c 100644 --- a/packages/sheets-formula-ui/src/controllers/menu.ts +++ b/packages/sheets-formula-ui/src/controllers/menu.ts @@ -20,12 +20,12 @@ import { IUniverInstanceService, UniverInstanceType } from '@univerjs/core'; import { RangeProtectionPermissionEditPoint, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellValuePermission } from '@univerjs/sheets'; import { getCurrentRangeDisable$ } from '@univerjs/sheets-ui'; import { getMenuHiddenObservable, IClipboardInterfaceService, MenuItemType } from '@univerjs/ui'; - import { combineLatestWith, map, Observable, of, switchMap } from 'rxjs'; import { SheetOnlyPasteFormulaCommand } from '../commands/commands/formula-clipboard.command'; import { InsertFunctionOperation } from '../commands/operations/insert-function.operation'; import { MoreFunctionsOperation } from '../commands/operations/more-functions.operation'; +/** @deprecated */ export function InsertFunctionMenuItemFactory(accessor: IAccessor): IMenuItem { return { id: InsertFunctionOperation.id, @@ -79,11 +79,113 @@ export function InsertFunctionMenuItemFactory(accessor: IAccessor): IMenuItem { }; } +// SUM +export function InsertSUMFunctionMenuItemFactory(accessor: IAccessor): IMenuItem { + return { + id: InsertFunctionOperation.id, + title: 'SUM', + icon: 'SumSingle', + type: MenuItemType.BUTTON, + params: { + value: 'SUM', + }, + hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), + }; +} + +// COUNT +export function InsertCOUNTFunctionMenuItemFactory(accessor: IAccessor): IMenuItem { + return { + id: InsertFunctionOperation.id, + title: 'COUNT', + icon: 'CntSingle', + type: MenuItemType.BUTTON, + params: { + value: 'COUNT', + }, + hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), + }; +} + +// AVERAGE +export function InsertAVERAGEFunctionMenuItemFactory(accessor: IAccessor): IMenuItem { + return { + id: InsertFunctionOperation.id, + title: 'AVERAGE', + icon: 'AvgSingle', + type: MenuItemType.BUTTON, + params: { + value: 'AVERAGE', + }, + hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), + }; +} + +// MAX +export function InsertMAXFunctionMenuItemFactory(accessor: IAccessor): IMenuItem { + return { + id: InsertFunctionOperation.id, + title: 'MAX', + icon: 'MaxSingle', + type: MenuItemType.BUTTON, + params: { + value: 'MAX', + }, + hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), + }; +} + +// MIN +export function InsertMINFunctionMenuItemFactory(accessor: IAccessor): IMenuItem { + return { + id: InsertFunctionOperation.id, + title: 'MIN', + icon: 'MinSingle', + type: MenuItemType.BUTTON, + params: { + value: 'MIN', + }, + hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), + }; +} + +// More Functions export function MoreFunctionsMenuItemFactory(accessor: IAccessor): IMenuItem { return { id: MoreFunctionsOperation.id, title: 'formula.insert.more', type: MenuItemType.BUTTON, + hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -110,7 +212,11 @@ export function PasteFormulaMenuItemFactory(accessor: IAccessor): IMenuItem { type: MenuItemType.BUTTON, title: 'formula.operation.pasteFormula', disabled$: menuClipboardDisabledObservable(accessor).pipe( - combineLatestWith(getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetSetCellValuePermission, WorksheetEditPermission] })), + combineLatestWith(getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + worksheetTypes: [WorksheetSetCellValuePermission, WorksheetEditPermission], + })), map(([d1, d2]) => d1 || d2) ), }; diff --git a/packages/sheets-hyper-link-ui/src/controllers/menu.schema.ts b/packages/sheets-hyper-link-ui/src/controllers/menu.schema.ts index 4720bfaa4e..8d41079187 100644 --- a/packages/sheets-hyper-link-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-hyper-link-ui/src/controllers/menu.schema.ts @@ -15,18 +15,18 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui'; +import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup } from '@univerjs/ui'; import { InsertHyperLinkToolbarOperation } from '../commands/operations/popup.operations'; import { genZenEditorMenuId, insertLinkMenuFactory, insertLinkMenuToolbarFactory, zenEditorInsertLinkMenuFactory, zenEditorInsertLinkMenuToolbarFactory } from './menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.OTHERS]: { + [RibbonInsertGroup.MEDIA]: { [InsertHyperLinkToolbarOperation.id]: { - order: 2, + order: 1, menuItemFactory: insertLinkMenuToolbarFactory, }, [genZenEditorMenuId(InsertHyperLinkToolbarOperation.id)]: { - order: 2, + order: 1, menuItemFactory: zenEditorInsertLinkMenuToolbarFactory, }, }, diff --git a/packages/sheets-numfmt-ui/src/controllers/menu.schema.ts b/packages/sheets-numfmt-ui/src/controllers/menu.schema.ts index 189cb0fd98..ac95bea3bd 100644 --- a/packages/sheets-numfmt-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-numfmt-ui/src/controllers/menu.schema.ts @@ -16,30 +16,30 @@ import type { MenuSchemaType } from '@univerjs/ui'; import { AddDecimalCommand, SetCurrencyCommand, SetPercentCommand, SubtractDecimalCommand } from '@univerjs/sheets-numfmt'; -import { RibbonStartGroup } from '@univerjs/ui'; +import { RibbonDataGroup } from '@univerjs/ui'; import { OpenNumfmtPanelOperator } from '../commands/operations/open.numfmt.panel.operation'; import { AddDecimalMenuItem, CurrencyMenuItem, FactoryOtherMenuItem, PercentMenuItem, SubtractDecimalMenuItem } from './menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.FORMULAS_INSERT]: { + [RibbonDataGroup.FORMULAS]: { [SetCurrencyCommand.id]: { - order: 4, + order: 0, menuItemFactory: CurrencyMenuItem, }, [AddDecimalCommand.id]: { - order: 5, + order: 1, menuItemFactory: AddDecimalMenuItem, }, [SubtractDecimalCommand.id]: { - order: 6, + order: 2, menuItemFactory: SubtractDecimalMenuItem, }, [SetPercentCommand.id]: { - order: 7, + order: 3, menuItemFactory: PercentMenuItem, }, [OpenNumfmtPanelOperator.id]: { - order: 8, + order: 4, menuItemFactory: FactoryOtherMenuItem, }, }, diff --git a/packages/sheets-sort-ui/src/controllers/menu.schema.ts b/packages/sheets-sort-ui/src/controllers/menu.schema.ts index 63e4ec2ab7..d30a221d3c 100644 --- a/packages/sheets-sort-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-sort-ui/src/controllers/menu.schema.ts @@ -15,7 +15,7 @@ */ import type { MenuSchemaType } from '@univerjs/ui'; -import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui'; +import { ContextMenuGroup, ContextMenuPosition, RibbonDataGroup } from '@univerjs/ui'; import { SortRangeAscCommand, SortRangeAscExtCommand, @@ -46,9 +46,9 @@ import { } from './sheets-sort.menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.FORMULAS_INSERT]: { + [RibbonDataGroup.ORGANIZATION]: { [SHEETS_SORT_MENU_ID]: { - order: 2, + order: 3, menuItemFactory: sortRangeMenuFactory, [SortRangeAscCommand.id]: { order: 0, diff --git a/packages/sheets-table-ui/src/controllers/menu.schema.ts b/packages/sheets-table-ui/src/controllers/menu.schema.ts index 6295c48088..86763fd3ad 100644 --- a/packages/sheets-table-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-table-ui/src/controllers/menu.schema.ts @@ -16,12 +16,12 @@ import type { MenuSchemaType } from '@univerjs/ui'; import { SheetTableInsertColCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveRowCommand } from '@univerjs/sheets-table'; -import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui'; +import { ContextMenuGroup, ContextMenuPosition, RibbonDataGroup } from '@univerjs/ui'; import { OpenTableSelectorOperation } from '../commands/operations/open-table-selector.operation'; import { SHEET_TABLE_CONTEXT_INSERT_MENU_ID, SHEET_TABLE_CONTEXT_REMOVE_MENU_ID, SheetTableInsertColMenuFactory, SheetTableInsertContextMenuFactory, SheetTableInsertRowMenuFactory, SheetTableRemoveColMenuFactory, SheetTableRemoveContextMenuFactory, SheetTableRemoveRowMenuFactory, sheetTableToolbarInsertMenuFactory } from '../views/menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.FORMULAS_VIEW]: { + [RibbonDataGroup.ORGANIZATION]: { [OpenTableSelectorOperation.id]: { order: 0, menuItemFactory: sheetTableToolbarInsertMenuFactory, diff --git a/packages/sheets-thread-comment-ui/src/controllers/menu.schema.ts b/packages/sheets-thread-comment-ui/src/controllers/menu.schema.ts index bf8aae0ec0..567755892b 100644 --- a/packages/sheets-thread-comment-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-thread-comment-ui/src/controllers/menu.schema.ts @@ -16,14 +16,14 @@ import type { MenuSchemaType } from '@univerjs/ui'; import { ToggleSheetCommentPanelOperation } from '@univerjs/thread-comment-ui'; -import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui'; +import { ContextMenuGroup, ContextMenuPosition, RibbonInsertGroup } from '@univerjs/ui'; import { ShowAddSheetCommentModalOperation } from '../commands/operations/comment.operation'; import { threadCommentMenuFactory, threadPanelMenuFactory } from './menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.OTHERS]: { + [RibbonInsertGroup.MEDIA]: { [ToggleSheetCommentPanelOperation.id]: { - order: 1, + order: 2, menuItemFactory: threadPanelMenuFactory, }, }, diff --git a/packages/sheets-ui/src/controllers/menu.schema.ts b/packages/sheets-ui/src/controllers/menu.schema.ts index 46bdeadc41..9225618687 100644 --- a/packages/sheets-ui/src/controllers/menu.schema.ts +++ b/packages/sheets-ui/src/controllers/menu.schema.ts @@ -49,7 +49,7 @@ import { SetWorksheetRowIsAutoHeightCommand, ToggleGridlinesCommand, } from '@univerjs/sheets'; -import { ContextMenuGroup, ContextMenuPosition, RibbonStartGroup } from '@univerjs/ui'; +import { ContextMenuGroup, ContextMenuPosition, RibbonPosition, RibbonStartGroup } from '@univerjs/ui'; import { SheetCopyCommand, // SheetCutCommand, @@ -176,98 +176,108 @@ import { } from './menu/sheet.menu'; export const menuSchema: MenuSchemaType = { - [RibbonStartGroup.FORMAT]: { - [SetOnceFormatPainterCommand.id]: { - order: 0, - menuItemFactory: FormatPainterMenuItemFactory, - }, - [SetRangeBoldCommand.id]: { - order: 1, - menuItemFactory: BoldMenuItemFactory, - }, - [SetRangeItalicCommand.id]: { - order: 2, - menuItemFactory: ItalicMenuItemFactory, - }, - [SetRangeUnderlineCommand.id]: { - order: 3, - menuItemFactory: UnderlineMenuItemFactory, - }, - [SetRangeStrickThroughCommand.id]: { - order: 4, - menuItemFactory: StrikeThroughMenuItemFactory, - }, - [SetRangeFontFamilyCommand.id]: { - order: 5, - menuItemFactory: FontFamilySelectorMenuItemFactory, - }, - [SetRangeFontSizeCommand.id]: { - order: 6, - menuItemFactory: FontSizeSelectorMenuItemFactory, - }, - [SetRangeTextColorCommand.id]: { - order: 7, - menuItemFactory: TextColorSelectorMenuItemFactory, - [ResetTextColorCommand.id]: { - order: 0, - menuItemFactory: ResetTextColorMenuItemFactory, - }, - }, - [SetBackgroundColorCommand.id]: { - order: 9, - menuItemFactory: BackgroundColorSelectorMenuItemFactory, - [ResetBackgroundColorCommand.id]: { - order: 0, - menuItemFactory: ResetBackgroundColorMenuItemFactory, - }, - }, - [SetBorderBasicCommand.id]: { - order: 10, - menuItemFactory: CellBorderSelectorMenuItemFactory, - }, - }, - [RibbonStartGroup.LAYOUT]: { - [AddWorksheetMergeCommand.id]: { - order: 0, - menuItemFactory: CellMergeMenuItemFactory, - [AddWorksheetMergeAllCommand.id]: { - order: 0, - menuItemFactory: CellMergeAllMenuItemFactory, - }, - [AddWorksheetMergeVerticalCommand.id]: { - order: 1, - menuItemFactory: CellMergeVerticalMenuItemFactory, - }, - [AddWorksheetMergeHorizontalCommand.id]: { + [RibbonPosition.START]: { + [RibbonStartGroup.HISTORY]: { + [SetOnceFormatPainterCommand.id]: { order: 2, - menuItemFactory: CellMergeHorizontalMenuItemFactory, + menuItemFactory: FormatPainterMenuItemFactory, }, - [RemoveWorksheetMergeCommand.id]: { + [ClearSelectionAllCommand.id]: { order: 3, - menuItemFactory: CellMergeCancelMenuItemFactory, + menuItemFactory: ClearSelectionAllMenuItemFactory, }, }, - [SetHorizontalTextAlignCommand.id]: { - order: 1, - menuItemFactory: HorizontalAlignMenuItemFactory, + [RibbonStartGroup.FORMAT]: { + [SetRangeFontFamilyCommand.id]: { + order: 1, + menuItemFactory: FontFamilySelectorMenuItemFactory, + }, + [SetRangeFontSizeCommand.id]: { + order: 2, + menuItemFactory: FontSizeSelectorMenuItemFactory, + }, + // TODO: fontsize + + // TODO: fontsize - + [SetRangeBoldCommand.id]: { + order: 5, + menuItemFactory: BoldMenuItemFactory, + }, + [SetRangeItalicCommand.id]: { + order: 6, + menuItemFactory: ItalicMenuItemFactory, + }, + [SetRangeUnderlineCommand.id]: { + order: 7, + menuItemFactory: UnderlineMenuItemFactory, + }, + [SetRangeStrickThroughCommand.id]: { + order: 8, + menuItemFactory: StrikeThroughMenuItemFactory, + }, + [SetRangeTextColorCommand.id]: { + order: 9, + menuItemFactory: TextColorSelectorMenuItemFactory, + [ResetTextColorCommand.id]: { + order: 0, + menuItemFactory: ResetTextColorMenuItemFactory, + }, + }, + [SetBackgroundColorCommand.id]: { + order: 10, + menuItemFactory: BackgroundColorSelectorMenuItemFactory, + [ResetBackgroundColorCommand.id]: { + order: 0, + menuItemFactory: ResetBackgroundColorMenuItemFactory, + }, + }, + [SetBorderBasicCommand.id]: { + order: 11, + menuItemFactory: CellBorderSelectorMenuItemFactory, + }, }, - [SetVerticalTextAlignCommand.id]: { - order: 1, - menuItemFactory: VerticalAlignMenuItemFactory, + [RibbonStartGroup.LAYOUT]: { + [SetHorizontalTextAlignCommand.id]: { + order: 0, + menuItemFactory: HorizontalAlignMenuItemFactory, + }, + [SetVerticalTextAlignCommand.id]: { + order: 3, + menuItemFactory: VerticalAlignMenuItemFactory, + }, + [SetTextWrapCommand.id]: { + order: 6, + menuItemFactory: WrapTextMenuItemFactory, + }, + [SetTextRotationCommand.id]: { + order: 7, + menuItemFactory: TextRotateMenuItemFactory, + }, + [AddWorksheetMergeCommand.id]: { + order: 8, + menuItemFactory: CellMergeMenuItemFactory, + [AddWorksheetMergeAllCommand.id]: { + order: 0, + menuItemFactory: CellMergeAllMenuItemFactory, + }, + [AddWorksheetMergeVerticalCommand.id]: { + order: 1, + menuItemFactory: CellMergeVerticalMenuItemFactory, + }, + [AddWorksheetMergeHorizontalCommand.id]: { + order: 2, + menuItemFactory: CellMergeHorizontalMenuItemFactory, + }, + [RemoveWorksheetMergeCommand.id]: { + order: 3, + menuItemFactory: CellMergeCancelMenuItemFactory, + }, + }, }, - [SetTextWrapCommand.id]: { - order: 2, - menuItemFactory: WrapTextMenuItemFactory, - }, - [SetTextRotationCommand.id]: { - order: 3, - menuItemFactory: TextRotateMenuItemFactory, - }, - }, - [RibbonStartGroup.OTHERS]: { - [AddRangeProtectionFromToolbarCommand.id]: { - order: 0, - menuItemFactory: sheetPermissionToolbarMenuFactory, + [RibbonStartGroup.OTHERS]: { + [AddRangeProtectionFromToolbarCommand.id]: { + order: 0, + menuItemFactory: sheetPermissionToolbarMenuFactory, + }, }, }, [ContextMenuPosition.MAIN_AREA]: { diff --git a/packages/sheets-ui/src/controllers/menu/clear.menu.ts b/packages/sheets-ui/src/controllers/menu/clear.menu.ts index 80054cfe3e..5bfea07958 100644 --- a/packages/sheets-ui/src/controllers/menu/clear.menu.ts +++ b/packages/sheets-ui/src/controllers/menu/clear.menu.ts @@ -14,12 +14,20 @@ * limitations under the License. */ -import { ClearSelectionAllCommand, ClearSelectionContentCommand, ClearSelectionFormatCommand, RangeProtectionPermissionEditPoint, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, WorksheetSetCellValuePermission } from '@univerjs/sheets'; -import type { IMenuButtonItem, IMenuSelectorItem } from '@univerjs/ui'; -import { getMenuHiddenObservable, MenuItemType } from '@univerjs/ui'; - import type { IAccessor } from '@univerjs/core'; +import type { IMenuButtonItem, IMenuSelectorItem } from '@univerjs/ui'; import { UniverInstanceType } from '@univerjs/core'; +import { + ClearSelectionAllCommand, + ClearSelectionContentCommand, + ClearSelectionFormatCommand, + RangeProtectionPermissionEditPoint, + WorkbookEditablePermission, + WorksheetEditPermission, + WorksheetSetCellStylePermission, + WorksheetSetCellValuePermission, +} from '@univerjs/sheets'; +import { getMenuHiddenObservable, MenuItemType } from '@univerjs/ui'; import { getCurrentRangeDisable$, getObservableWithExclusiveRange$ } from './menu-util'; export const CLEAR_SELECTION_MENU_ID = 'sheet.menu.clear-selection'; @@ -37,8 +45,13 @@ export function ClearSelectionContentMenuItemFactory(accessor: IAccessor): IMenu return { id: ClearSelectionContentCommand.id, type: MenuItemType.BUTTON, + icon: 'ClearFormat', title: 'rightClick.clearContent', - disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission], rangeTypes: [RangeProtectionPermissionEditPoint] })), + disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + })), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -46,8 +59,13 @@ export function ClearSelectionFormatMenuItemFactory(accessor: IAccessor): IMenuB return { id: ClearSelectionFormatCommand.id, type: MenuItemType.BUTTON, + icon: 'ClearFormat', title: 'rightClick.clearFormat', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -55,8 +73,13 @@ export function ClearSelectionAllMenuItemFactory(accessor: IAccessor): IMenuButt return { id: ClearSelectionAllCommand.id, type: MenuItemType.BUTTON, + icon: 'ClearFormat', title: 'rightClick.clearAll', - disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] })), + disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + })), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } diff --git a/packages/sheets-ui/src/controllers/menu/menu.ts b/packages/sheets-ui/src/controllers/menu/menu.ts index 1d28c1bb23..704e639148 100644 --- a/packages/sheets-ui/src/controllers/menu/menu.ts +++ b/packages/sheets-ui/src/controllers/menu/menu.ts @@ -319,7 +319,11 @@ export function UnderlineMenuItemFactory(accessor: IAccessor): IMenuButtonItem { subscriber.next(!!(isUnderline && isUnderline.s)); return disposable.dispose; })), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }, true), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -336,7 +340,11 @@ export function StrikeThroughMenuItemFactory(accessor: IAccessor): IMenuButtonIt icon: 'StrikethroughSingle', title: 'Set strike through', tooltip: 'toolbar.strikethrough', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }, true), activated$: deriveStateFromActiveSheet$(univerInstanceService, false, ({ worksheet }) => new Observable((subscriber) => { const disposable = commandService.onCommandExecuted((c) => { const id = c.id; @@ -401,7 +409,11 @@ export function FontFamilySelectorMenuItemFactory(accessor: IAccessor): IMenuSel value: item.value, })), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }, true), value$: deriveStateFromActiveSheet$(univerInstanceService, defaultValue, ({ worksheet }) => new Observable((subscriber) => { const updateSheet = () => { let ff = defaultValue; @@ -442,7 +454,11 @@ export function FontSizeSelectorMenuItemFactory(accessor: IAccessor): IMenuSelec const contextService = accessor.get(IContextService); const defaultValue = DEFAULT_STYLES.fs; - const disabled$ = getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true); + const disabled$ = getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }, true); return { id: SetRangeFontSizeCommand.id, @@ -507,7 +523,11 @@ export function ResetTextColorMenuItemFactory(accessor: IAccessor): IMenuButtonI type: MenuItemType.BUTTON, title: 'toolbar.resetColor', icon: 'NoColor', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }, true), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -543,7 +563,11 @@ export function TextColorSelectorMenuItemFactory(accessor: IAccessor): IMenuSele return disposable.dispose; }), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }, true), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }, true), }; } @@ -553,7 +577,11 @@ export function ResetBackgroundColorMenuItemFactory(accessor: IAccessor): IMenuB type: MenuItemType.BUTTON, title: 'toolbar.resetColor', icon: 'NoColor', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -588,7 +616,11 @@ export function BackgroundColorSelectorMenuItemFactory(accessor: IAccessor): IMe return disposable.dispose; }), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -651,7 +683,11 @@ export function HorizontalAlignMenuItemFactory(accessor: IAccessor): IMenuSelect return disposable.dispose; })), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -714,7 +750,11 @@ export function VerticalAlignMenuItemFactory(accessor: IAccessor): IMenuSelector return disposable.dispose; })), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -777,7 +817,11 @@ export function WrapTextMenuItemFactory(accessor: IAccessor): IMenuSelectorItem< return disposable.dispose; })), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -863,7 +907,11 @@ export function TextRotateMenuItemFactory(accessor: IAccessor): IMenuSelectorIte return disposable.dispose; })), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -882,7 +930,11 @@ export function CopyMenuItemFactory(accessor: IAccessor): IMenuButtonItem { type: MenuItemType.BUTTON, title: 'rightClick.copy', icon: 'Copy', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookCopyPermission], worksheetTypes: [WorksheetCopyPermission], rangeTypes: [RangeProtectionPermissionViewPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookCopyPermission], + worksheetTypes: [WorksheetCopyPermission], + rangeTypes: [RangeProtectionPermissionViewPoint], + }), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -893,7 +945,11 @@ export function CutMenuItemFactory(accessor: IAccessor): IMenuButtonItem { commandId: CutCommand.id, type: MenuItemType.BUTTON, title: 'contextMenu.cut', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetCopyPermission, WorksheetEditPermission] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + worksheetTypes: [WorksheetCopyPermission, WorksheetEditPermission], + }), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -906,7 +962,11 @@ export function PasteMenuItemFactory(accessor: IAccessor): IMenuButtonItem { title: 'rightClick.paste', icon: 'PasteSpecial', disabled$: menuClipboardDisabledObservable(accessor).pipe( - combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission, WorksheetSetCellValuePermission], workbookTypes: [WorkbookEditablePermission] })), + combineLatestWith(getCurrentRangeDisable$(accessor, { + rangeTypes: [RangeProtectionPermissionEditPoint], + worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission, WorksheetSetCellValuePermission], + workbookTypes: [WorkbookEditablePermission], + })), map(([d1, d2]) => d1 || d2) ), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), @@ -930,7 +990,11 @@ export function PasteValueMenuItemFactory(accessor: IAccessor): IMenuButtonItem< type: MenuItemType.BUTTON, title: 'rightClick.pasteValue', disabled$: menuClipboardDisabledObservable(accessor).pipe( - combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetSetCellValuePermission, WorksheetEditPermission], workbookTypes: [WorkbookEditablePermission] })), + combineLatestWith(getCurrentRangeDisable$(accessor, { + rangeTypes: [RangeProtectionPermissionEditPoint], + worksheetTypes: [WorksheetSetCellValuePermission, WorksheetEditPermission], + workbookTypes: [WorkbookEditablePermission], + })), map(([d1, d2]) => d1 || d2) ), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), @@ -943,7 +1007,11 @@ export function PasteFormatMenuItemFactory(accessor: IAccessor): IMenuButtonItem type: MenuItemType.BUTTON, title: 'rightClick.pasteFormat', disabled$: menuClipboardDisabledObservable(accessor).pipe( - combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission], workbookTypes: [WorkbookEditablePermission] })), + combineLatestWith(getCurrentRangeDisable$(accessor, { + rangeTypes: [RangeProtectionPermissionEditPoint], + worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission], + workbookTypes: [WorkbookEditablePermission], + })), map(([d1, d2]) => d1 || d2) ), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), @@ -956,7 +1024,11 @@ export function PasteColWidthMenuItemFactory(accessor: IAccessor): IMenuButtonIt type: MenuItemType.BUTTON, title: 'rightClick.pasteColWidth', disabled$: menuClipboardDisabledObservable(accessor).pipe( - combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetSetColumnStylePermission, WorksheetEditPermission], workbookTypes: [WorkbookEditablePermission] })), + combineLatestWith(getCurrentRangeDisable$(accessor, { + rangeTypes: [RangeProtectionPermissionEditPoint], + worksheetTypes: [WorksheetSetColumnStylePermission, WorksheetEditPermission], + workbookTypes: [WorkbookEditablePermission], + })), map(([d1, d2]) => d1 || d2) ), }; @@ -968,7 +1040,17 @@ export function PasteBesidesBorderMenuItemFactory(accessor: IAccessor): IMenuBut type: MenuItemType.BUTTON, title: 'rightClick.pasteBesidesBorder', disabled$: menuClipboardDisabledObservable(accessor).pipe( - combineLatestWith(getCurrentRangeDisable$(accessor, { rangeTypes: [RangeProtectionPermissionEditPoint], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission, WorksheetSetCellValuePermission, WorksheetSetRowStylePermission, WorksheetSetColumnStylePermission], workbookTypes: [WorkbookEditablePermission] })), + combineLatestWith(getCurrentRangeDisable$(accessor, { + rangeTypes: [RangeProtectionPermissionEditPoint], + worksheetTypes: [ + WorksheetEditPermission, + WorksheetSetCellStylePermission, + WorksheetSetCellValuePermission, + WorksheetSetRowStylePermission, + WorksheetSetColumnStylePermission, + ], + workbookTypes: [WorkbookEditablePermission], + })), map(([d1, d2]) => d1 || d2) ), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), @@ -981,7 +1063,11 @@ export function FitContentMenuItemFactory(accessor: IAccessor): IMenuButtonItem type: MenuItemType.BUTTON, icon: 'AutoHeight', title: 'rightClick.fitContent', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -992,7 +1078,11 @@ export function ColAutoWidthMenuItemFactory(accessor: IAccessor): IMenuButtonIte type: MenuItemType.BUTTON, icon: 'AutoWidth', title: 'rightClick.fitContent', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -1071,7 +1161,11 @@ export function HideRowMenuItemFactory(accessor: IAccessor): IMenuButtonItem { type: MenuItemType.BUTTON, icon: 'Hide', title: 'rightClick.hideSelectedRow', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetSetRowStylePermission, WorksheetEditPermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -1082,7 +1176,11 @@ export function HideColMenuItemFactory(accessor: IAccessor): IMenuButtonItem { type: MenuItemType.BUTTON, icon: 'Hide', title: 'rightClick.hideSelectedColumn', - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetColumnStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetColumnStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } @@ -1120,7 +1218,11 @@ export function ShowRowMenuItemFactory(accessor: IAccessor): IMenuButtonItem { subscriber.next(!hasHiddenRowsInSelections()); return () => disposable.dispose(); })), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetRowStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetRowStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -1156,7 +1258,11 @@ export function ShowColMenuItemFactory(accessor: IAccessor): IMenuButtonItem { subscriber.next(!hasHiddenColsInSelections()); return () => disposable.dispose(); })), - disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetSetColumnStylePermission, WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + disabled$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetSetColumnStylePermission, WorksheetEditPermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -1197,7 +1303,11 @@ export function SetRowHeightMenuItemFactory(accessor: IAccessor): IMenuButtonIte update(); return disposable.dispose; })), - hidden$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetRowStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + hidden$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetRowStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } @@ -1242,7 +1352,11 @@ export function SetColWidthMenuItemFactory(accessor: IAccessor): IMenuButtonItem update(); return disposable.dispose; })), - hidden$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetColumnStylePermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), + hidden$: getCurrentRangeDisable$(accessor, { + workbookTypes: [WorkbookEditablePermission], + worksheetTypes: [WorksheetEditPermission, WorksheetSetColumnStylePermission], + rangeTypes: [RangeProtectionPermissionEditPoint], + }), }; } diff --git a/packages/sheets-ui/src/views/sheet-bar/SheetBar.tsx b/packages/sheets-ui/src/views/sheet-bar/SheetBar.tsx index bee7e3c2ec..88254c66fd 100644 --- a/packages/sheets-ui/src/views/sheet-bar/SheetBar.tsx +++ b/packages/sheets-ui/src/views/sheet-bar/SheetBar.tsx @@ -76,7 +76,7 @@ export const SheetBar = () => { return (
-
+
{/* Add sheet button */} - {value} % - +
); diff --git a/packages/ui/src/controllers/menus/menu.schema.ts b/packages/ui/src/controllers/menus/menu.schema.ts index 1ef18b82d3..f8100017b5 100644 --- a/packages/ui/src/controllers/menus/menu.schema.ts +++ b/packages/ui/src/controllers/menus/menu.schema.ts @@ -34,7 +34,7 @@ export const menuSchema: MenuSchemaType = { }, [RibbonStartGroup.OTHERS]: { [ToggleShortcutPanelOperation.id]: { - order: 99, + order: 1, menuItemFactory: ShortcutPanelMenuItemFactory, }, }, diff --git a/packages/ui/src/controllers/shortcut-display/menu.ts b/packages/ui/src/controllers/shortcut-display/menu.ts index 7220a211b5..c8ee78f671 100644 --- a/packages/ui/src/controllers/shortcut-display/menu.ts +++ b/packages/ui/src/controllers/shortcut-display/menu.ts @@ -16,9 +16,7 @@ import type { IAccessor } from '@univerjs/core'; import type { IMenuButtonItem } from '../../services/menu/menu'; -import { UniverInstanceType } from '@univerjs/core'; import { ToggleShortcutPanelOperation } from '../../commands/operations/toggle-shortcut-panel.operation'; -import { getMenuHiddenObservable } from '../../common/menu-hidden-observable'; import { MenuItemType } from '../../services/menu/menu'; export function ShortcutPanelMenuItemFactory(accessor: IAccessor): IMenuButtonItem { @@ -28,7 +26,6 @@ export function ShortcutPanelMenuItemFactory(accessor: IAccessor): IMenuButtonIt tooltip: 'toggle-shortcut-panel', icon: 'KeyboardSingle', type: MenuItemType.BUTTON, - hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), - // disabled$: getCurrentSheetDisabled$(accessor), + // hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET), }; } diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index aa2be3deb9..fc941e1b3c 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -131,7 +131,7 @@ export { type IDialogPartMethodOptions } from './views/components/dialog-part/in export { FloatDom } from './views/components/dom/FloatDom'; export { GlobalZone } from './views/components/global-zone/GlobalZone'; export { CanvasPopup, SingleCanvasPopup } from './views/components/popup/CanvasPopup'; -export { ToolbarButton } from './views/components/ribbon/Button/ToolbarButton'; +export { ToolbarButton } from './views/components/ribbon/ToolbarButton'; export { useToolbarItemStatus } from './views/components/ribbon/hook'; export { Ribbon } from './views/components/ribbon/Ribbon'; export { ToolbarItem } from './views/components/ribbon/ToolbarItem'; diff --git a/packages/ui/src/locale/en-US.ts b/packages/ui/src/locale/en-US.ts index 787c8b0fc4..e0aa92f9ab 100644 --- a/packages/ui/src/locale/en-US.ts +++ b/packages/ui/src/locale/en-US.ts @@ -33,11 +33,17 @@ const locale: typeof zhCN = { }, ribbon: { start: 'Start', + startDesc: 'Initiate the worksheet and set basic parameters.', insert: 'Insert', + insertDesc: 'Insert rows, columns, charts and various other elements.', formulas: 'Formulas', + formulasDesc: 'Use functions and formulas for data calculations.', data: 'Data', + dataDesc: 'Manage data, including import, sorting and filtering.', view: 'View', + viewDesc: 'Switch view modes and adjust the display effect.', others: 'Others', + othersDesc: 'Other functions and settings.', more: 'More', }, fontFamily: { diff --git a/packages/ui/src/locale/fa-IR.ts b/packages/ui/src/locale/fa-IR.ts index 251ef08158..faebe1d8a4 100644 --- a/packages/ui/src/locale/fa-IR.ts +++ b/packages/ui/src/locale/fa-IR.ts @@ -33,11 +33,17 @@ const locale: typeof zhCN = { }, ribbon: { start: 'شروع', + startDesc: 'ایجاد کاربرگ و تنظیم پارامترهای اولیه.', insert: 'درج', + insertDesc: 'درج ردیف‌ها، ستون‌ها، نمودارها و عناصر مختلف دیگر.', formulas: 'فرمول‌ها', + formulasDesc: 'استفاده از توابع و فرمول‌ها برای محاسبات داده‌ها.', data: 'داده‌ها', + dataDesc: 'ادغام و تجزیه داده‌ها.', view: 'نمایش', + viewDesc: 'تغییر حالت نمایش و تنظیم اثرات نمایشی.', others: 'دیگر', + othersDesc: 'سایر عملکردها و تنظیمات.', more: 'بیشتر', }, fontFamily: { diff --git a/packages/ui/src/locale/fr-FR.ts b/packages/ui/src/locale/fr-FR.ts index 64587b9518..498503c3f2 100644 --- a/packages/ui/src/locale/fr-FR.ts +++ b/packages/ui/src/locale/fr-FR.ts @@ -33,11 +33,17 @@ const locale: typeof enUS = { }, ribbon: { start: 'Démarrer', + startDesc: 'Initialiser la feuille de calcul et définir les paramètres de base.', insert: 'Insérer', + insertDesc: 'Insérer des lignes, des colonnes, des graphiques et divers autres éléments.', formulas: 'Formules', + formulasDesc: 'Utiliser des fonctions et des formules pour les calculs de données.', data: 'Données', + dataDesc: 'Gérer les données, y compris l\'importation, le tri et le filtrage.', view: 'Vue', + viewDesc: 'Changer les modes d\'affichage et ajuster l\'effet d\'affichage.', others: 'Autres', + othersDesc: 'Autres fonctions et paramètres.', more: 'Plus', }, fontFamily: { diff --git a/packages/ui/src/locale/ru-RU.ts b/packages/ui/src/locale/ru-RU.ts index 89b9a2f52b..ac2572daef 100644 --- a/packages/ui/src/locale/ru-RU.ts +++ b/packages/ui/src/locale/ru-RU.ts @@ -33,11 +33,17 @@ const locale: typeof zhCN = { }, ribbon: { start: 'Начало', + startDesc: 'Инициализация рабочей таблицы и установка основных параметров.', insert: 'Вставка', + insertDesc: 'Вставка строк, столбцов, графиков и различных других элементов.', formulas: 'Формулы', + formulasDesc: 'Использование функций и формул для вычислений данных.', data: 'Данные', + dataDesc: 'Управление данными, включая импорт, сортировку и фильтрацию.', view: 'Вид', + viewDesc: 'Смена режимов отображения и настройка эффекта отображения.', others: 'Другие', + othersDesc: 'Другие функции и настройки.', more: 'Больше', }, fontFamily: { diff --git a/packages/ui/src/locale/vi-VN.ts b/packages/ui/src/locale/vi-VN.ts index 4a2c3f9e34..e8a8b0465f 100644 --- a/packages/ui/src/locale/vi-VN.ts +++ b/packages/ui/src/locale/vi-VN.ts @@ -33,11 +33,17 @@ const locale: typeof zhCN = { }, ribbon: { start: 'Bắt đầu', + startDesc: 'Khởi tạo bảng tính và thiết lập các tham số cơ bản.', insert: 'Chèn', + insertDesc: 'Chèn hàng, cột, biểu đồ và các phần tử khác.', formulas: 'Công thức', + formulasDesc: 'Sử dụng hàm và công thức để tính toán dữ liệu.', data: 'Dữ liệu', + dataDesc: 'Sắp xếp, lọc và phân tích dữ liệu.', view: 'Xem', + viewDesc: 'Chuyển đổi chế độ xem và điều chỉnh hiệu ứng hiển thị.', others: 'Khác', + othersDesc: 'Các chức năng và cài đặt khác.', more: 'Thêm', }, fontFamily: { diff --git a/packages/ui/src/locale/zh-CN.ts b/packages/ui/src/locale/zh-CN.ts index 1818c2624a..fe4bc34bee 100644 --- a/packages/ui/src/locale/zh-CN.ts +++ b/packages/ui/src/locale/zh-CN.ts @@ -31,11 +31,17 @@ const locale = { }, ribbon: { start: '开始', + startDesc: '初始化工作表并设置基本参数。', insert: '插入', + insertDesc: '插入行、列、图表和各种其他元素。', formulas: '公式', + formulasDesc: '使用函数和公式进行数据计算。', data: '数据', + dataDesc: '管理数据，包括导入、排序和筛选。', view: '视图', + viewDesc: '切换视图模式并调整显示效果。', others: '其他', + othersDesc: '其他功能和设置。', more: '更多', }, fontFamily: { diff --git a/packages/ui/src/locale/zh-TW.ts b/packages/ui/src/locale/zh-TW.ts index 582e36ba89..70a032c693 100644 --- a/packages/ui/src/locale/zh-TW.ts +++ b/packages/ui/src/locale/zh-TW.ts @@ -33,11 +33,17 @@ const locale: typeof zhCN = { }, ribbon: { start: '開始', + startDesc: '初始化工作表並設定基本參數。', insert: '插入', + insertDesc: '插入行、列、圖表和各種其他元素。', formulas: '公式', + formulasDesc: '使用函數和公式進行數據計算。', data: '資料', + dataDesc: '管理資料，包括匯入、排序和篩選。', view: '視圖', + viewDesc: '切換視圖模式並調整顯示效果。', others: '其他', + othersDesc: '其他功能和設定。', more: '更多', }, fontFamily: { diff --git a/packages/ui/src/services/menu/menu-manager.service.ts b/packages/ui/src/services/menu/menu-manager.service.ts index e6be3b6982..ac4f9b44a7 100644 --- a/packages/ui/src/services/menu/menu-manager.service.ts +++ b/packages/ui/src/services/menu/menu-manager.service.ts @@ -34,7 +34,7 @@ export interface IMenuSchema { } export interface IMenuManagerService { - readonly menuChanged$: Observable; + readonly menuChanged$: Observable; mergeMenu(source: MenuSchemaType, target?: MenuSchemaType): void; @@ -54,7 +54,7 @@ export type MenuSchemaType = { }; export class MenuManagerService extends Disposable implements IMenuManagerService { - readonly menuChanged$ = new Subject(); + readonly menuChanged$ = new Subject(); private _menu: MenuSchemaType = { [MenuManagerPosition.RIBBON]: { @@ -69,39 +69,54 @@ export class MenuManagerService extends Disposable implements IMenuManagerServic [RibbonStartGroup.LAYOUT]: { order: 2, }, - [RibbonStartGroup.FORMULAS_INSERT]: { - order: 3, - }, - [RibbonStartGroup.FORMULAS_VIEW]: { - order: 4, - }, - [RibbonStartGroup.FILE]: { - order: 5, - }, [RibbonStartGroup.OTHERS]: { - order: 6, + order: 3, }, }, [RibbonPosition.INSERT]: { order: 1, - [RibbonInsertGroup.OTHERS]: { + [RibbonInsertGroup.EDIT]: { order: 0, }, + [RibbonInsertGroup.MEDIA]: { + order: 1, + }, + [RibbonInsertGroup.OTHERS]: { + order: 2, + }, }, [RibbonPosition.FORMULAS]: { order: 2, - [RibbonFormulasGroup.OTHERS]: { + [RibbonFormulasGroup.BASIC]: { order: 0, }, + [RibbonFormulasGroup.OTHERS]: { + order: 1, + }, }, [RibbonPosition.DATA]: { order: 3, - [RibbonDataGroup.OTHERS]: { + [RibbonDataGroup.FORMULAS]: { order: 0, }, + [RibbonDataGroup.RULES]: { + order: 1, + }, + [RibbonDataGroup.ORGANIZATION]: { + order: 2, + }, + [RibbonDataGroup.OTHERS]: { + order: 3, + }, }, [RibbonPosition.VIEW]: { order: 4, + [RibbonViewGroup.DISPLAY]: { + order: 0, + }, + [RibbonViewGroup.VISIBILITY]: { + order: 0, + }, [RibbonViewGroup.OTHERS]: { order: 0, }, @@ -228,7 +243,7 @@ export class MenuManagerService extends Disposable implements IMenuManagerServic const _key = key as keyof MenuSchemaType; _target[_key] = merge({}, _target[_key], source[_key]); - this.menuChanged$.next(); + this.menuChanged$.next(Date.now()); } else if (typeof value === 'object') { this.mergeMenu(source, value); } @@ -237,7 +252,7 @@ export class MenuManagerService extends Disposable implements IMenuManagerServic appendRootMenu(source: MenuSchemaType): void { this._menu = merge({}, this._menu, source); - this.menuChanged$.next(); + this.menuChanged$.next(Date.now()); } private _buildMenuSchema(data: MenuSchemaType): IMenuSchema[] { diff --git a/packages/ui/src/services/menu/menu.ts b/packages/ui/src/services/menu/menu.ts index ea04e43325..3e9631ab9d 100644 --- a/packages/ui/src/services/menu/menu.ts +++ b/packages/ui/src/services/menu/menu.ts @@ -61,6 +61,7 @@ interface IMenuItemBase { hidden$?: Observable; disabled$?: Observable; + params?: any; /** On observable value that should emit the value of the corresponding selection component. */ value$?: Observable; } diff --git a/packages/ui/src/services/menu/types.ts b/packages/ui/src/services/menu/types.ts index f510587a09..0e2f2cf3b7 100644 --- a/packages/ui/src/services/menu/types.ts +++ b/packages/ui/src/services/menu/types.ts @@ -20,37 +20,42 @@ export enum MenuManagerPosition { } export enum RibbonPosition { - START = 'ribbon.start', - INSERT = 'ribbon.insert', - FORMULAS = 'ribbon.formulas', - DATA = 'ribbon.data', - VIEW = 'ribbon.view', - OTHERS = 'ribbon.others', + START = 'ribbon.start', // RibbonStartGroup + INSERT = 'ribbon.insert', // RibbonInsertGroup + FORMULAS = 'ribbon.formulas', // RibbonFormulasGroup + DATA = 'ribbon.data', // RibbonDataGroup + VIEW = 'ribbon.view', // RibbonViewGroup + OTHERS = 'ribbon.others', // RibbonOthersGroup } export enum RibbonStartGroup { HISTORY = 'ribbon.start.history', FORMAT = 'ribbon.start.format', LAYOUT = 'ribbon.start.layout', - FORMULAS_INSERT = 'ribbon.start.insert', - FORMULAS_VIEW = 'ribbon.start.view', - FILE = 'ribbon.start.file', OTHERS = 'ribbon.start.others', } export enum RibbonInsertGroup { + EDIT = 'ribbon.insert.edit', + MEDIA = 'ribbon.insert.media', OTHERS = 'ribbon.insert.others', } export enum RibbonFormulasGroup { + BASIC = 'ribbon.formulas.basic', OTHERS = 'ribbon.formulas.others', } export enum RibbonDataGroup { + FORMULAS = 'ribbon.data.formulas', + RULES = 'ribbon.data.rules', + ORGANIZATION = 'ribbon.data.organization', OTHERS = 'ribbon.data.others', } export enum RibbonViewGroup { + DISPLAY = 'ribbon.view.display', + VISIBILITY = 'ribbon.view.Visibility', OTHERS = 'ribbon.view.others', } diff --git a/packages/ui/src/views/components/ribbon/Ribbon.tsx b/packages/ui/src/views/components/ribbon/Ribbon.tsx index 9749390a42..8fb67e52cf 100644 --- a/packages/ui/src/views/components/ribbon/Ribbon.tsx +++ b/packages/ui/src/views/components/ribbon/Ribbon.tsx @@ -15,31 +15,44 @@ */ import type { ComponentType } from 'react'; +import type { Observable } from 'rxjs'; import type { IMenuSchema } from '../../../services/menu/menu-manager.service'; import { LocaleService } from '@univerjs/core'; -import { borderBottomClassName, clsx } from '@univerjs/design'; -import { MoreFunctionSingle } from '@univerjs/icons'; +import { borderBottomClassName, borderClassName, clsx, divideXClassName, Dropdown } from '@univerjs/design'; +import { DatabaseSingle, EyeSingle, FunctionSingle, HomeSingle, InsertSingle, MoreDownSingle, MoreFunctionSingle } from '@univerjs/icons'; import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { combineLatest } from 'rxjs'; import { IMenuManagerService } from '../../../services/menu/menu-manager.service'; import { MenuManagerPosition, RibbonPosition } from '../../../services/menu/types'; -import { useDependency } from '../../../utils/di'; +import { useDependency, useObservable } from '../../../utils/di'; import { ComponentContainer } from '../ComponentContainer'; -import { ToolbarButton } from '../ribbon/Button/ToolbarButton'; +import { ToolbarButton } from './ToolbarButton'; import { ToolbarItem } from './ToolbarItem'; -import { DropdownWrapper, TooltipWrapper } from './TooltipButtonWrapper'; interface IRibbonProps { headerMenuComponents?: Set; headerMenu?: boolean; } +const iconMap = { + [RibbonPosition.START]: HomeSingle, + [RibbonPosition.INSERT]: InsertSingle, + [RibbonPosition.FORMULAS]: FunctionSingle, + [RibbonPosition.DATA]: DatabaseSingle, + [RibbonPosition.VIEW]: EyeSingle, + [RibbonPosition.OTHERS]: MoreFunctionSingle, +}; + export function Ribbon(props: IRibbonProps) { const { headerMenuComponents, headerMenu = true } = props; const menuManagerService = useDependency(IMenuManagerService); const localeService = useDependency(LocaleService); - const fakeToolbarRef = useRef(null); + const menuChanged = useObservable(menuManagerService.menuChanged$); + + const containerRef = useRef(null!); + const fakeToolbarRef = useRef(null!); const toolbarItemRefs = useRef([]); const [activatedTab, setActivatedTab] = useState(RibbonPosition.START); - const [changingActiveTab, setChangingActiveTab] = useState(false); + const [groupSelectorVisible, setGroupSelectorVisible] = useState(false); const [collapsedIds, setCollapsedIds] = useState([]); - - const separatorClassName = `[&>*:last-child:after]:univer-absolute [&>*:last-child:after]:-univer-right-2 - [&>*:last-child:after]:univer-top-1/2 [&>*:last-child:after]:univer-h-5 [&>*:last-child:after]:univer-translate-x-[3px] - [&>*:last-child:after]:univer-w-px [&>*:last-child:after]:-univer-translate-y-1/2 - [&>*:last-child:after]:univer-bg-gray-200 [&>*:last-child:after]:univer-content-[''] - [&>*:last-child]:univer-relative dark:[&>*:last-child:after]:univer-bg-gray-600`; + // const [changingActiveTab, setChangingActiveTab] = useState(false); const handleSelectTab = useCallback((group: IMenuSchema) => { toolbarItemRefs.current = {}; - setChangingActiveTab(true); - const timer = setTimeout(() => { - setChangingActiveTab(false); - }, 300); + // setChangingActiveTab(true); + // const timer = setTimeout(() => { + // setChangingActiveTab(false); + // }, 300); setActivatedTab(group.key); + setGroupSelectorVisible(false); return () => { - clearTimeout(timer); + // clearTimeout(timer); }; }, []); // subscribe to menu changes useEffect(() => { - function getRibbon(): void { - const ribbon = menuManagerService.getMenuByPositionKey(MenuManagerPosition.RIBBON); - setRibbon(ribbon); - } - getRibbon(); + const ribbon = menuManagerService.getMenuByPositionKey(MenuManagerPosition.RIBBON); - const subscription = menuManagerService.menuChanged$.subscribe(getRibbon); + const hiddenObservaleMap: Observable[] = []; + const hiddenKeyMap: string[] = []; + for (const group of ribbon) { + if (group.children) { + for (const item of group.children) { + if (item.children) { + for (const child of item.children) { + if (child.item?.hidden$) { + hiddenObservaleMap.push(child.item.hidden$); + hiddenKeyMap.push(`${group.key}/${item.key}/${child.key}`); + } + } + } + } + } + } + + const subscription = combineLatest(hiddenObservaleMap) + // .pipe(debounceTime(300)) + .subscribe((hiddenMap) => { + const newRibbon: IMenuSchema[] = []; + + const hiddenPathMap = hiddenMap.map((hidden, index) => { + if (hidden) { + return hiddenKeyMap[index]; + } + return null; + }).filter((item) => !!item) as string[]; + + for (const group of ribbon) { + const newGroup: IMenuSchema = { ...group, children: [] }; + + if (group.children?.length) { + for (const item of group.children) { + const newItem: IMenuSchema = { ...item, children: [] }; + let shouldAddItem = true; + + if (item.children?.length) { + for (const child of item.children) { + const path = `${group.key}/${item.key}/${child.key}`; + + if (!hiddenPathMap.includes(path)) { + newItem.children?.push(child); + } + } + + if (newItem.children?.every((child) => child.children?.length === 0)) { + shouldAddItem = false; + } + } + + if (shouldAddItem) { + newGroup.children?.push(newItem); + } + } + } + + if (newGroup.children?.length && newGroup.children.every((item) => item.children?.length)) { + newRibbon.push(newGroup); + } + } + + setRibbon(newRibbon); + }); return () => { subscription.unsubscribe(); }; - }, [menuManagerService]); + }, [menuChanged]); const activeGroup = useMemo(() => { const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? []; @@ -115,211 +183,230 @@ export function Ribbon(props: IRibbonProps) { visibleGroups, hiddenGroups, }; - }, [ribbon, activatedTab, collapsedIds]); + }, [collapsedIds, ribbon, activatedTab]); - // resize observer useEffect(() => { const observer = new ResizeObserver((entries) => { - const toolbar = entries[0].target; - const toolbarWidth = toolbar.clientWidth; - const toolbarItems = Object.values(toolbarItemRefs.current); - const sortedToolbarItems = toolbarItems.sort((a, b) => { - if (a.groupOrder === b.groupOrder) { - return a.order - b.order; + for (const entry of entries) { + const { width: avaliableWidth } = entry.contentRect; + const toolbarItems = Object.values(toolbarItemRefs.current); + const sortedToolbarItems = toolbarItems.sort((a, b) => { + if (a.groupOrder === b.groupOrder) { + return a.order - b.order; + } + return a.groupOrder - b.groupOrder; + }); + + const newCollapsedIds: string[] = []; + let totalWidth = 32; + const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? []; + + const gapWidth = (allGroups.length - 1) * 8; + totalWidth += gapWidth; + + for (const { el, key } of sortedToolbarItems) { + if (!el) continue; + + totalWidth += el?.getBoundingClientRect().width + 8; + + if (totalWidth > avaliableWidth - gapWidth) { + newCollapsedIds.push(key); + } } - return a.groupOrder - b.groupOrder; - }); - const newCollapsedIds: string[] = []; - let totalWidth = 0; - - const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? []; - - const gapWidth = (allGroups.length - 1) * 8; - totalWidth += gapWidth; - - for (const { el, key } of sortedToolbarItems) { - if (!el) continue; - - totalWidth += el?.getBoundingClientRect().width + 8; - - if (totalWidth > toolbarWidth - 32 - gapWidth) { - newCollapsedIds.push(key); - } - } - - if (JSON.stringify(newCollapsedIds) !== JSON.stringify(collapsedIds)) { setCollapsedIds(newCollapsedIds); } }); - if (fakeToolbarRef.current) { - observer.observe(fakeToolbarRef.current); - } + observer.observe(containerRef.current); return () => { observer.disconnect(); }; - }, [ribbon, activatedTab, collapsedIds]); - - const fakeToolbarContent = useMemo(() => ( - activeGroup.allGroups.map((groupItem) => ( - -
- {groupItem.children?.map((child) => ( - child.item && ( - { - if (ref?.el) { - toolbarItemRefs.current[child.key] = { - el: ref.el, - key: child.key, - groupOrder: groupItem.order, - order: child.order, - }; - } - }} - /> - ) - ))} -
- - )) - ), [activeGroup.allGroups]); + }, [ribbon, activatedTab]); return ( <> - {/* header */} - {headerMenu && ( -
+ {headerMenu && (headerMenuComponents && headerMenuComponents.size > 0) && ( +
1 || (headerMenuComponents && headerMenuComponents.size > 0), - })} + className={` + univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-items-center + univer-gap-2 + [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded + [&>*]:univer-px-1 [&>*]:univer-transition-colors + hover:[&>*]:univer-bg-gray-100 + `} > - {ribbon.length > 1 && ribbon.map((group) => ( - handleSelectTab(group)} - > - {localeService.t(group.key)} - - ))} +
- - {(headerMenuComponents && headerMenuComponents.size > 0) && ( -
*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded - [&>*]:univer-px-1 [&>*]:univer-transition-colors - hover:[&>*]:univer-bg-gray-100 - `} - > - -
- )}
)} -
-
+ {/* + + */} + + {ribbon.length > 1 && ( + + {ribbon.map((group) => { + const Icon = iconMap[group.key as RibbonPosition]; + + return ( + handleSelectTab(group)} + > + + + + + + {localeService.t(group.key)} + + + {localeService.t(`${group.key}Desc`)} + + + + ); + })} +
+ )} + onOpenChange={setGroupSelectorVisible} + > + + {localeService.t(activatedTab)} + + + + )} + +
{activeGroup.visibleGroups.map((groupItem) => (groupItem.children?.length || groupItem.item) && ( -
- {groupItem.children - ? groupItem.children?.map((child) => ( - child.item && - )) - : ( - groupItem.item && - )} +
+ {groupItem.children && groupItem.children?.map((child) => ( + child.item && + ))}
))} - {/* overflow menu items */} {collapsedIds.length > 0 && ( -
- - - {activeGroup.hiddenGroups.map((groupItem) => ( -
-
- {groupItem.children - ? groupItem.children?.map((child) => ( - child.item && - )) - : ( - groupItem.item && - )} -
+
+ + {activeGroup.hiddenGroups.map((groupItem) => ( +
+
+ {groupItem.children + ? groupItem.children?.map((child) => ( + child.item && + )) + : ( + groupItem.item && + )}
- ))} -
- )} - > - - - - - +
+ ))} +
+ )} + > + + + +
)}
-
+
- {/* fake toolbar for calculating overflow width */} + {/* fake toolbar */}
- {fakeToolbarContent} + {activeGroup.allGroups.map((groupItem) => (groupItem.children?.length || groupItem.item) && ( + +
+ {groupItem.children && groupItem.children?.map((child) => ( + child.item && ( + { + if (ref?.el) { + toolbarItemRefs.current[child.key] = { + el: ref.el, + key: child.key, + groupOrder: groupItem.order, + order: child.order, + }; + } + }} + /> + ) + ))} +
+ + ))}
); diff --git a/packages/ui/src/views/components/ribbon/Button/ToolbarButton.tsx b/packages/ui/src/views/components/ribbon/ToolbarButton.tsx similarity index 88% rename from packages/ui/src/views/components/ribbon/Button/ToolbarButton.tsx rename to packages/ui/src/views/components/ribbon/ToolbarButton.tsx index b215ff2386..45270d2a13 100644 --- a/packages/ui/src/views/components/ribbon/Button/ToolbarButton.tsx +++ b/packages/ui/src/views/components/ribbon/ToolbarButton.tsx @@ -87,14 +87,14 @@ export function ToolbarButton(props: IBaseToolbarButtonProps) {