From fc1cdb2f0b445df953472dbf2bcf3c95de8411d4 Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Thu, 5 Jun 2025 15:43:37 +0200 Subject: [PATCH] adds className prop to nav bar menus --- webapp/packages/core-blocks/src/Menu/Menu.tsx | 6 +++++- webapp/packages/core-ui/package.json | 1 + .../packages/core-ui/src/ContextMenu/ContextMenu.tsx | 5 ++++- .../core-ui/src/ContextMenu/SubMenuElement.tsx | 1 + webapp/packages/core-ui/tsconfig.json | 3 +++ webapp/packages/core-view/src/Menu/IMenuInfo.ts | 1 + .../packages/plugin-devtools/src/menu/MENU_DEVTOOLS.ts | 2 +- .../packages/plugin-tools-panel/src/Menu/MENU_TOOLS.ts | 1 + .../plugin-top-app-bar/src/TopNavBar/TopNavBar.tsx | 1 + .../src/TopNavBar/shared/TopMenuCheckbox.css | 10 ++++++++++ webapp/yarn.lock | 3 ++- 11 files changed, 30 insertions(+), 4 deletions(-) create mode 100644 webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuCheckbox.css diff --git a/webapp/packages/core-blocks/src/Menu/Menu.tsx b/webapp/packages/core-blocks/src/Menu/Menu.tsx index ae05d8de7f..3956690387 100644 --- a/webapp/packages/core-blocks/src/Menu/Menu.tsx +++ b/webapp/packages/core-blocks/src/Menu/Menu.tsx @@ -1,6 +1,6 @@ /* * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2024 DBeaver Corp and others + * Copyright (C) 2020-2025 DBeaver Corp and others * * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. @@ -33,6 +33,7 @@ interface IMenuProps extends React.ButtonHTMLAttributes { rtl?: boolean; hasBindings?: boolean; panelAvailable?: boolean; + menuPanelClassName?: string; getHasBindings?: () => boolean; onVisibleSwitch?: (visible: boolean) => void; } @@ -54,6 +55,7 @@ export const Menu = observer( onVisibleSwitch, modal, submenu, + menuPanelClassName, rtl, className, ...props @@ -148,6 +150,7 @@ export const Menu = observer( label={label} menu={menu} rtl={rtl} + className={menuPanelClassName} submenu={submenu} panelAvailable={panelAvailable} hasBindings={hasBindings} @@ -179,6 +182,7 @@ export const Menu = observer( ( forwardRef(function ContextMenu( - { contextMenuPosition, menu: menuData, disclosure, children, placement, visible, onVisibleSwitch, modal, rtl, ...props }, + { contextMenuPosition, menu: menuData, disclosure, children, placement, visible, onVisibleSwitch, modal, rtl, className, ...props }, ref, ) { const translate = useTranslate(); @@ -64,6 +65,7 @@ export const ContextMenu = observer( @@ -83,6 +85,7 @@ export const ContextMenu = observer( disabled={disabled} disclosure={disclosure} getHasBindings={handlers.hasBindings} + menuPanelClassName={menuData.menu.info.className} onVisibleSwitch={handlers.handleVisibleSwitch} > {renderingChildren} diff --git a/webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx b/webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx index 83c1f9a707..2c41e43057 100644 --- a/webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx @@ -105,6 +105,7 @@ export const SubMenuElement = observer( panelAvailable={panelAvailable} disabled={disabled} getHasBindings={handlers.hasBindings} + menuPanelClassName={subMenuData.menu.info.className} submenu onVisibleSwitch={handlers.handleVisibleSwitch} > diff --git a/webapp/packages/core-ui/tsconfig.json b/webapp/packages/core-ui/tsconfig.json index 5c4b604db6..efb0c5474b 100644 --- a/webapp/packages/core-ui/tsconfig.json +++ b/webapp/packages/core-ui/tsconfig.json @@ -7,6 +7,9 @@ "composite": true }, "references": [ + { + "path": "../../../common-react/@dbeaver/ui-kit" + }, { "path": "../../../common-typescript/@dbeaver/js-helpers" }, diff --git a/webapp/packages/core-view/src/Menu/IMenuInfo.ts b/webapp/packages/core-view/src/Menu/IMenuInfo.ts index e16d8a337c..f53fc48446 100644 --- a/webapp/packages/core-view/src/Menu/IMenuInfo.ts +++ b/webapp/packages/core-view/src/Menu/IMenuInfo.ts @@ -11,6 +11,7 @@ export interface IMenuInfo { label: string; icon?: string; tooltip?: string; + className?: string; /** * experimental, can be changed */ diff --git a/webapp/packages/plugin-devtools/src/menu/MENU_DEVTOOLS.ts b/webapp/packages/plugin-devtools/src/menu/MENU_DEVTOOLS.ts index 89d98579cc..931e069425 100644 --- a/webapp/packages/plugin-devtools/src/menu/MENU_DEVTOOLS.ts +++ b/webapp/packages/plugin-devtools/src/menu/MENU_DEVTOOLS.ts @@ -7,4 +7,4 @@ */ import { createMenu } from '@cloudbeaver/core-view'; -export const MENU_DEVTOOLS = createMenu('devtools', { label: 'DevTools' }); +export const MENU_DEVTOOLS = createMenu('devtools', { label: 'DevTools', className: 'topNavBarMenu' }); diff --git a/webapp/packages/plugin-tools-panel/src/Menu/MENU_TOOLS.ts b/webapp/packages/plugin-tools-panel/src/Menu/MENU_TOOLS.ts index ba498a8716..8596d82507 100644 --- a/webapp/packages/plugin-tools-panel/src/Menu/MENU_TOOLS.ts +++ b/webapp/packages/plugin-tools-panel/src/Menu/MENU_TOOLS.ts @@ -11,4 +11,5 @@ export const MENU_TOOLS = createMenu('tools', { label: 'plugin_tools_panel_menu_title', icon: '/icons/plugin_tools_panel_m.svg', tooltip: 'plugin_tools_panel_menu_title', + className: 'topNavBarMenu', }); diff --git a/webapp/packages/plugin-top-app-bar/src/TopNavBar/TopNavBar.tsx b/webapp/packages/plugin-top-app-bar/src/TopNavBar/TopNavBar.tsx index 9aeaaf8b53..00ac9a3a77 100644 --- a/webapp/packages/plugin-top-app-bar/src/TopNavBar/TopNavBar.tsx +++ b/webapp/packages/plugin-top-app-bar/src/TopNavBar/TopNavBar.tsx @@ -26,6 +26,7 @@ import { MenuBarItemStyles, MenuBarStyles } from '@cloudbeaver/core-ui'; import TopMenuStyles from './shared/TopMenu.module.css'; import TopMenuBarStyles from './shared/TopMenuBar.module.css'; import TopMenuBarItemStyles from './shared/TopMenuBarItem.module.css'; +import './shared/TopMenuCheckbox.css'; import TopMenuItemStyles from './shared/TopMenuItem.module.css'; import TopMenuItemElementStyles from './shared/TopMenuItemElement.module.css'; import TopMenuPanelStyles from './shared/TopMenuPanel.module.css'; diff --git a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuCheckbox.css b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuCheckbox.css new file mode 100644 index 0000000000..a6dd985aeb --- /dev/null +++ b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuCheckbox.css @@ -0,0 +1,10 @@ +@layer components { + .topNavBarMenu .checkboxMarkup { + --dbv-kit-checkbox-background-checked: var(--theme-on-primary); + --dbv-kit-checkbox-icon-color: var(--theme-primary); + --dbv-kit-checkbox-background: transparent; + + --dbv-kit-checkbox-border-color: var(--theme-on-primary); + --dbv-kit-checkbox-border-color-checked: var(--theme-on-primary); + } +} diff --git a/webapp/yarn.lock b/webapp/yarn.lock index 9d53b9e37e..e93e775ee8 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -2172,6 +2172,7 @@ __metadata: "@cloudbeaver/core-view": "workspace:*" "@cloudbeaver/tsconfig": "workspace:*" "@dbeaver/js-helpers": "workspace:^" + "@dbeaver/ui-kit": "workspace:*" "@types/react": "npm:^19" mobx: "npm:^6" mobx-react-lite: "npm:^4" @@ -4538,7 +4539,7 @@ __metadata: languageName: unknown linkType: soft -"@dbeaver/ui-kit@workspace:../common-react/@dbeaver/ui-kit, @dbeaver/ui-kit@workspace:^": +"@dbeaver/ui-kit@workspace:*, @dbeaver/ui-kit@workspace:../common-react/@dbeaver/ui-kit, @dbeaver/ui-kit@workspace:^": version: 0.0.0-use.local resolution: "@dbeaver/ui-kit@workspace:../common-react/@dbeaver/ui-kit" dependencies: