From af9a13e70e12ba1ef73844e07ebb32febbcd672f Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Fri, 19 Sep 2025 15:20:54 +0200 Subject: [PATCH] ui fixes --- .../@dbeaver/ui-kit/src/Menu/Menu.css | 2 - .../@dbeaver/ui-kit/src/Menu/__base.css | 4 +- .../src/Menu/AriaKit/MenuAriaKit.css | 4 +- .../src/Menu/AriaKit/MenuAriaKit.tsx | 49 +++++------ .../ContextMenuAriaKit/ContextMenuAriaKit.tsx | 85 ++++++++++--------- .../MenuItemRendererAriaKit.tsx | 33 ++++--- .../TreeNodeMenu/TreeNodeMenu.module.css | 2 - .../TreeNodeMenu/TreeNodeMenu.tsx | 12 ++- 8 files changed, 95 insertions(+), 96 deletions(-) diff --git a/webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.css b/webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.css index 995989f6f5..56574d2827 100644 --- a/webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.css +++ b/webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.css @@ -86,8 +86,6 @@ } .dbv-kit-menu__separator { - height: 1px; - margin: 0.25rem 0; background-color: var(--dbv-kit-menu-separator-color); } diff --git a/webapp/common-react/@dbeaver/ui-kit/src/Menu/__base.css b/webapp/common-react/@dbeaver/ui-kit/src/Menu/__base.css index 0522dda58c..a9cd9f2c6c 100644 --- a/webapp/common-react/@dbeaver/ui-kit/src/Menu/__base.css +++ b/webapp/common-react/@dbeaver/ui-kit/src/Menu/__base.css @@ -20,8 +20,8 @@ --dbv-kit-menu-popover-shadow: var(--tw-shadow-md); --dbv-kit-menu-popover-max-height: 18rem; - --dbv-kit-menu-item-padding-inline: calc(var(--tw-spacing) * 3); - --dbv-kit-menu-item-padding-block: var(--tw-spacing); + --dbv-kit-menu-item-padding-inline: calc(var(--tw-spacing) * 5); + --dbv-kit-menu-item-padding-block: calc(var(--tw-spacing) * 1.4); --dbv-kit-menu-item-hover-background: var(--tw-color-gray-200); --dbv-kit-menu-item-hover-foreground: var(--dbv-kit-menu-foreground); --dbv-kit-menu-item-selected-background: var(--dbv-kit-color-primary-100); diff --git a/webapp/packages/core-blocks/src/Menu/AriaKit/MenuAriaKit.css b/webapp/packages/core-blocks/src/Menu/AriaKit/MenuAriaKit.css index 5ab60e700d..ecec576903 100644 --- a/webapp/packages/core-blocks/src/Menu/AriaKit/MenuAriaKit.css +++ b/webapp/packages/core-blocks/src/Menu/AriaKit/MenuAriaKit.css @@ -5,7 +5,7 @@ } .dbv-kit-menu__button { - --dbv-kit-menu-background: var(--theme-input-background); - --dbv-kit-menu-foreground: var(--theme-input-color); + --dbv-kit-menu-background: transparent; + --dbv-kit-menu-foreground: inherit; } } diff --git a/webapp/packages/core-blocks/src/Menu/AriaKit/MenuAriaKit.tsx b/webapp/packages/core-blocks/src/Menu/AriaKit/MenuAriaKit.tsx index 59282f4ead..8b92f187f5 100644 --- a/webapp/packages/core-blocks/src/Menu/AriaKit/MenuAriaKit.tsx +++ b/webapp/packages/core-blocks/src/Menu/AriaKit/MenuAriaKit.tsx @@ -13,7 +13,7 @@ * you may not use this file except in compliance with the License. */ import { observer } from 'mobx-react-lite'; -import { forwardRef, useEffect } from 'react'; +import { useEffect } from 'react'; import { MenuField, useMenuStore, useStoreState, type MenuFieldProps, type MenuStoreProps } from '@dbeaver/ui-kit'; import { ErrorBoundary } from '../../ErrorBoundary.js'; @@ -25,33 +25,30 @@ export interface IMenuAriaKitProps extends Omit, 'sto menuStoreProps?: MenuStoreProps; } -export const MenuAriaKit = observer( - forwardRef(function MenuAriaKit({ contextMenuPosition, menuStoreProps, ...props }: IMenuAriaKitProps) { - const store = useMenuStore(menuStoreProps); - const storeState = useStoreState(store); - const menuVisible = !!storeState.open; +export const MenuAriaKit = observer(function MenuAriaKit({ contextMenuPosition, menuStoreProps, ...props }: IMenuAriaKitProps) { + const store = useMenuStore(menuStoreProps); + const storeState = useStoreState(store); + const menuVisible = !!storeState.open; - function getAnchorRect() { - if (!contextMenuPosition?.position) { - return; - } - - return () => contextMenuPosition.position; + function getAnchorRect() { + if (!contextMenuPosition?.position) { + return; } - useEffect(() => { - if (!contextMenuPosition?.position || menuVisible) { - return; - } + return () => contextMenuPosition.position; + } - store.show(); - contextMenuPosition.position = null; - }, [contextMenuPosition?.position]); + useEffect(() => { + if (!contextMenuPosition?.position || menuVisible) { + return; + } - return ( - - - - ); - }), -) as (props: IMenuAriaKitProps & React.RefAttributes) => React.ReactElement; + store.show(); + }, [contextMenuPosition?.position]); + + return ( + + + + ); +}) as (props: IMenuAriaKitProps & React.RefAttributes) => React.ReactElement; diff --git a/webapp/packages/core-ui/src/ContextMenu/ContextMenuAriaKit/ContextMenuAriaKit.tsx b/webapp/packages/core-ui/src/ContextMenu/ContextMenuAriaKit/ContextMenuAriaKit.tsx index 755198d6c5..69abfa58b0 100644 --- a/webapp/packages/core-ui/src/ContextMenu/ContextMenuAriaKit/ContextMenuAriaKit.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/ContextMenuAriaKit/ContextMenuAriaKit.tsx @@ -7,7 +7,6 @@ */ import { getComputed, MenuAriaKit, useAutoLoad, useObjectRef, useTranslate, type IMenuAriaKitProps } from '@cloudbeaver/core-blocks'; import { observer } from 'mobx-react-lite'; -import { forwardRef } from 'react'; import { MenuActionItem, type IMenuData, type IMenuItem } from '@cloudbeaver/core-view'; import { MenuItemRendererAriaKit } from './MenuItemRendererAriaKit.js'; @@ -16,50 +15,52 @@ export interface IContextMenuAriaKitProps extends Omit( - forwardRef(function ContextMenuAriaKit({ contextMenuPosition, menu: menuData, onSwitch, ...props }, ref) { - const translate = useTranslate(); +export const ContextMenuAriaKit = observer(function ContextMenuAriaKit({ + contextMenuPosition, + menu: menuData, + onSwitch, + ...props +}) { + const translate = useTranslate(); - const handler = menuData.handler; - const hidden = getComputed(() => handler?.isHidden?.(menuData.context) || false); - const loading = getComputed(() => handler?.isLoading?.(menuData.context) || menuData.loaders.some(loader => loader.isLoading()) || false); - const disabled = getComputed(() => loading || handler?.isDisabled?.(menuData.context) || false); - const lazy = getComputed(() => !menuData.available || hidden); + const handler = menuData.handler; + const hidden = getComputed(() => handler?.isHidden?.(menuData.context) || false); + const loading = getComputed(() => handler?.isLoading?.(menuData.context) || menuData.loaders.some(loader => loader.isLoading()) || false); + const disabled = getComputed(() => loading || handler?.isDisabled?.(menuData.context) || false); + const lazy = getComputed(() => !menuData.available || hidden); - useAutoLoad({ name: `${ContextMenuAriaKit.name}(${menuData.menu.id})` }, menuData.loaders, !lazy, lazy, true); + useAutoLoad({ name: `${ContextMenuAriaKit.name}(${menuData.menu.id})` }, menuData.loaders, !lazy, lazy, true); - const handlers = useObjectRef( - () => ({ - hasBindings() { - return this.menuData.items.some(item => item instanceof MenuActionItem && item.action.binding !== null); - }, - handleVisibleSwitch(visible: boolean) { - this.onSwitch?.(visible); + const handlers = useObjectRef( + () => ({ + hasBindings() { + return this.menuData.items.some(item => item instanceof MenuActionItem && item.action.binding !== null); + }, + handleVisibleSwitch(visible: boolean) { + this.onSwitch?.(visible); - if (visible) { - this.handler?.handler?.(this.menuData.context); - } - }, - }), - { menuData, handler, onSwitch }, - ['hasBindings', 'handleVisibleSwitch'], - ); + if (visible) { + this.handler?.handler?.(this.menuData.context); + } + }, + }), + { menuData, handler, onSwitch }, + ['hasBindings', 'handleVisibleSwitch'], + ); - if (lazy) { - return null; - } + if (lazy) { + return null; + } - return ( - } - onSwitch={handlers.handleVisibleSwitch} - /> - ); - }), -); + return ( + } + onSwitch={handlers.handleVisibleSwitch} + /> + ); +}); diff --git a/webapp/packages/core-ui/src/ContextMenu/ContextMenuAriaKit/MenuItemRendererAriaKit.tsx b/webapp/packages/core-ui/src/ContextMenu/ContextMenuAriaKit/MenuItemRendererAriaKit.tsx index 7d248b092e..2c6253d0e1 100644 --- a/webapp/packages/core-ui/src/ContextMenu/ContextMenuAriaKit/MenuItemRendererAriaKit.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/ContextMenuAriaKit/MenuItemRendererAriaKit.tsx @@ -13,6 +13,7 @@ import { type IMenuData, type IMenuItem, isMenuCustomItem, + MenuActionItem, MenuBaseItem, MenuCheckboxItem, MenuRadioItem, @@ -65,12 +66,28 @@ export const MenuItemRendererAriaKit = observer(f return ; } + if (item instanceof MenuActionItem) { + return ( + + ); + } + if (item instanceof MenuBaseItem) { const IconComponent = item.iconComponent?.(); const extraProps = item.getExtraProps?.(); return ( -