From 3158aebca4431e578019e0e5f17782f25a9aed99 Mon Sep 17 00:00:00 2001 From: Sychev Andrey <44414066+SychevAndrey@users.noreply.github.com> Date: Thu, 23 Jul 2026 13:07:10 +0200 Subject: [PATCH] dbeaver/pro#9877 UI fixes (#4473) * dbeaver/pro#9877 fix: select render field popover * dbeaver/pro#9877 fix: revert back ripple hover effect * dbeaver/pro#9877 fix: make all outlines 1px by default * dbeaver/pro#9877 fix: switch outline * dbeaver/pro#9877 fix: topbar buttons outline * dbeaver/pro#9877 fix: tablist styles * dbeaver/pro#9877 fix: rule priorities * dbeaver/pro#9877 fix: eslint * dbeaver/pro#9877 fix: eslint --------- Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com> --- .../react-data-grid/src/formatters/BooleanFormatter.tsx | 2 +- .../src/renderers/HeaderCellContentRenderer.tsx | 2 +- webapp/common-react/@dbeaver/ui-kit/src/Switch/Switch.css | 4 ++-- webapp/common-react/@dbeaver/ui-kit/src/Switch/_base.css | 4 ++++ webapp/common-react/@dbeaver/ui-kit/src/index.css | 2 +- .../ObjectPropertyInfoForm/RenderField.tsx | 2 ++ webapp/packages/core-theming/src/ThemeService.ts | 1 + webapp/packages/core-theming/src/styles/UiSwitch.css | 6 ++++++ .../Administration/Users/Teams/TeamsTable/TeamsTable.tsx | 2 +- .../src/Administration/Users/UsersTable/UsersTable.tsx | 2 +- .../NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx | 2 +- .../src/ObjectPropertiesPage/ObjectFolders.tsx | 6 +++--- .../src/ObjectViewerPanel/ObjectViewerPanel.tsx | 4 ++-- .../packages/plugin-tailwindcss-theme/src/styles/ripple.css | 2 +- .../src/TopNavBar/shared/TopMenuBar.module.css | 2 +- 15 files changed, 28 insertions(+), 15 deletions(-) create mode 100644 webapp/packages/core-theming/src/styles/UiSwitch.css diff --git a/webapp/common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx b/webapp/common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx index f48917634a..75b18ae703 100644 --- a/webapp/common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx +++ b/webapp/common-react/@dbeaver/react-data-grid/src/formatters/BooleanFormatter.tsx @@ -27,7 +27,7 @@ export function BooleanFormatter({ value, className, onClick, onKeyDown, focusab return ( diff --git a/webapp/common-react/@dbeaver/react-data-grid/src/renderers/HeaderCellContentRenderer.tsx b/webapp/common-react/@dbeaver/react-data-grid/src/renderers/HeaderCellContentRenderer.tsx index 74510bf369..ef7dd1f667 100644 --- a/webapp/common-react/@dbeaver/react-data-grid/src/renderers/HeaderCellContentRenderer.tsx +++ b/webapp/common-react/@dbeaver/react-data-grid/src/renderers/HeaderCellContentRenderer.tsx @@ -86,7 +86,7 @@ export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer return (
(function RenderField({ readOnly={readonly} description={property.hint} className={className} + portal > {property.displayName ?? ''} @@ -196,6 +197,7 @@ export const RenderField = observer(function RenderField({ readOnly={readonly} description={hint} className={className} + portal > {property.displayName ?? ''} diff --git a/webapp/packages/core-theming/src/ThemeService.ts b/webapp/packages/core-theming/src/ThemeService.ts index 27f63a49c3..420b2416f0 100644 --- a/webapp/packages/core-theming/src/ThemeService.ts +++ b/webapp/packages/core-theming/src/ThemeService.ts @@ -24,6 +24,7 @@ import './styles/UiInput.css'; import './styles/UISearch.css'; import './styles/UiPopover.css'; import './styles/UiColorPicker.css'; +import './styles/UiSwitch.css'; import './styles/form-controls.css'; import { FALLBACK_THEME_ID, themes } from './themes.js'; import { ThemeSettingsService } from './ThemeSettingsService.js'; diff --git a/webapp/packages/core-theming/src/styles/UiSwitch.css b/webapp/packages/core-theming/src/styles/UiSwitch.css new file mode 100644 index 0000000000..13171a4e10 --- /dev/null +++ b/webapp/packages/core-theming/src/styles/UiSwitch.css @@ -0,0 +1,6 @@ +@layer components { + .dbv-kit-switch { + --dbv-kit-switch-outline-offset: 2px; + --dbv-kit-switch-outline-color: var(--theme-primary); + } +} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTable.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTable.tsx index 7247548bd2..122d3b8b63 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTable.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/TeamsTable/TeamsTable.tsx @@ -59,7 +59,7 @@ export const TeamsTable = observer(function TeamsTable({ teams }) { render={
} tabIndex={0} title={row.teamId} - className="tw:flex tw:cursor-pointer tw:items-center tw:gap-2 tw:outline-none" + className="tw:flex tw:cursor-pointer tw:items-center tw:gap-2 tw:outline-none!" onClick={() => teamsTableOptionsPanelService.open(row.teamId)} > {row.teamId} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UsersTable.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UsersTable.tsx index 589caefada..93db786fb0 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UsersTable.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UsersTable.tsx @@ -90,7 +90,7 @@ export const UsersTable = observer(function UsersTable({ users, isManagea render={
} tabIndex={0} title={row.userId} - className="tw:flex tw:cursor-pointer tw:items-center tw:gap-2 tw:outline-none" + className="tw:flex tw:cursor-pointer tw:items-center tw:gap-2 tw:outline-none!" onClick={() => usersTableOptionsPanelService.open(row.userId)} > {row.userId} diff --git a/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx b/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx index 934e169bb1..3952914f53 100644 --- a/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx +++ b/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx @@ -109,7 +109,7 @@ export const NavigationTabsBar = observer(function NavigationTabsBar({ cl onChange={handleTabChange} onReorder={handleReorder} > -
+
(function ObjectFolders({ tab }) { return folders.length > 0 ? ( -
- +
+ {folders.map(folderId => ( ))} diff --git a/webapp/packages/plugin-object-viewer/src/ObjectViewerPanel/ObjectViewerPanel.tsx b/webapp/packages/plugin-object-viewer/src/ObjectViewerPanel/ObjectViewerPanel.tsx index 7b9d5f3e2a..c2c1e9aea3 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectViewerPanel/ObjectViewerPanel.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectViewerPanel/ObjectViewerPanel.tsx @@ -1,6 +1,6 @@ /* * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2025 DBeaver Corp and others + * Copyright (C) 2020-2026 DBeaver Corp and others * * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. @@ -68,7 +68,7 @@ export const ObjectViewerPanel: TabHandlerPanelComponent {node.tryGetData ? ( -
+
{pages.map(page => ( diff --git a/webapp/packages/plugin-tailwindcss-theme/src/styles/ripple.css b/webapp/packages/plugin-tailwindcss-theme/src/styles/ripple.css index 79638ff5c7..aa74c39e24 100644 --- a/webapp/packages/plugin-tailwindcss-theme/src/styles/ripple.css +++ b/webapp/packages/plugin-tailwindcss-theme/src/styles/ripple.css @@ -14,7 +14,7 @@ } &:hover::before { - opacity: 0.06; + opacity: 0.04; } &:focus::before { diff --git a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuBar.module.css b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuBar.module.css index 98ca17ce3b..2954ec6204 100644 --- a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuBar.module.css +++ b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuBar.module.css @@ -5,7 +5,7 @@ } & *:focus-visible { - outline: 2px solid var(--theme-on-primary); + outline: 1px solid var(--theme-on-primary); outline-offset: -2px; border-radius: var(--theme-form-element-radius); }