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>
2026-10-16 14:50:15 +08:00 · 2026-07-23 13:07:10 +02:00
parent 99866fdc12
commit 3158aebca4
15 changed files with 28 additions and 15 deletions
@@ -27,7 +27,7 @@ export function BooleanFormatter({ value, className, onClick, onKeyDown, focusab
  return (
    <Focusable
      focusable={focusable}
-      className={clsx('tw:flex tw:items-center tw:outline-none tw:hover:cursor-pointer', className)}
+      className={clsx('tw:flex tw:items-center tw:outline-none! tw:hover:cursor-pointer', className)}
      onKeyDown={handleKeyDown}
      onClick={onClick}
    >
@@ -86,7 +86,7 @@ export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer
  return (
    <div
      tabIndex={ownsFocus ? tabIndex : -1}
-      className="tw:w-full tw:h-full tw:content-center tw:flex tw:items-center tw:justify-between tw:gap-1 tw:outline-none tw:group"
+      className="tw:w-full tw:h-full tw:content-center tw:flex tw:items-center tw:justify-between tw:gap-1 tw:outline-none! tw:group"
      {...drag.props}
      {...drop.props}
      onKeyDown={onKeyDown}
@@ -71,8 +71,8 @@
  }

  .dbv-kit-switch__track[data-focus-visible]:not([data-disabled]) {
-    outline: 2px solid var(--dbv-kit-control-outline-color, #3b82f6);
-    outline-offset: 2px;
+    outline: var(--dbv-kit-switch-outline-width, 1px) solid var(--dbv-kit-switch-outline-color);
+    outline-offset: var(--dbv-kit-switch-outline-offset);
  }

  .dbv-kit-switch__track[data-checked] {
@@ -14,6 +14,10 @@
    --dbv-kit-switch-thumb-color: #ffffff;
    --dbv-kit-switch-checked-color: #2a7cb4;

+    --dbv-kit-switch-outline-offset: var(--dbv-kit-control-outline-offset);
+    --dbv-kit-switch-outline-color: var(--dbv-kit-control-outline-color);
+    --dbv-kit-switch-outline-width: var(--dbv-kit-control-outline-width);
+
    --dbv-kit-switch-transition-duration: 200ms;
    --dbv-kit-switch-transition-easing: cubic-bezier(0, 0, 0.2, 1);
  }
@@ -12,7 +12,7 @@

    /* Outline */
    --dbv-kit-control-outline-color: var(--tw-color-blue-500);
-    --dbv-kit-control-outline-width: 2px;
+    --dbv-kit-control-outline-width: 1px;
    --dbv-kit-control-outline-offset: 2px;

    /* Sizes */
@@ -175,6 +175,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
          readOnly={readonly}
          description={property.hint}
          className={className}
+          portal
        >
          {property.displayName ?? ''}
        </Select>
@@ -196,6 +197,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
        readOnly={readonly}
        description={hint}
        className={className}
+        portal
      >
        {property.displayName ?? ''}
      </Select>
@@ -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';
@@ -0,0 +1,6 @@
+@layer components {
+  .dbv-kit-switch {
+    --dbv-kit-switch-outline-offset: 2px;
+    --dbv-kit-switch-outline-color: var(--theme-primary);
+  }
+}
@@ -59,7 +59,7 @@ export const TeamsTable = observer<Props>(function TeamsTable({ teams }) {
          render={<div />}
          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)}
        >
          <Link truncate>{row.teamId}</Link>
@@ -90,7 +90,7 @@ export const UsersTable = observer<Props>(function UsersTable({ users, isManagea
          render={<div />}
          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)}
        >
          <Link truncate>{row.userId}</Link>
@@ -109,7 +109,7 @@ export const NavigationTabsBar = observer<Props>(function NavigationTabsBar({ cl
          onChange={handleTabChange}
          onReorder={handleReorder}
        >
-          <div className="tw:outline-none tw:flex-1 tw:flex tw:flex-col tw:max-w-full">
+          <div className="tw:outline-none! tw:flex-1 tw:flex tw:flex-col tw:max-w-full">
            <TabList
              className={clsx(
                'tw:overflow-auto tw:max-w-full theme-background-secondary theme-text-on-secondary',
@@ -1,6 +1,6 @@
 /*
 * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 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.
@@ -115,8 +115,8 @@ export const ObjectFolders = observer<IProps>(function ObjectFolders({ tab }) {
  return folders.length > 0 ? (
    <TabsState currentTabId={folderId} orientation="vertical" localState={innerTabState} lazy onChange={openFolder}>
      <SContext registry={objectFoldersRegistry}>
-        <div>
-          <TabList aria-label="Object folders" vertical>
+        <div className="theme-border-color-background tw:border-r tw:border-t">
+          <TabList aria-label="Object folders" className="tw:border-none!" vertical>
            {folders.map(folderId => (
              <FolderTabRenderer key={folderId} nodeId={nodeId} folderId={folderId} parents={parents} />
            ))}
@@ -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<IObjectViewerTabState>
    <ConnectionShieldLazy connectionKey={connectionKey}>
      {node.tryGetData ? (
        <TabsState currentTabId={tab.handlerState.pageId} localState={innerTabState}>
-          <div className="tw:outline-none tw:flex-1 tw:flex tw:flex-col tw:max-w-full">
+          <div className="tw:outline-none! tw:flex-1 tw:flex tw:flex-col tw:max-w-full">
            <TabList className="theme-background-background theme-text-text-primary-on-light">
              <SContext registry={tabsRegistry}>
                {pages.map(page => (
@@ -14,7 +14,7 @@
    }

    &:hover::before {
-      opacity: 0.06;
+      opacity: 0.04;
    }

    &:focus::before {
@@ -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);
  }