From 12ef593bd75fb38a21b0d83d38011b748e05f25e Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Fri, 13 Jun 2025 18:16:45 +0200 Subject: [PATCH] [CB] Integrate UIKit Checkbox to Cloudbeaver #5797 (#3493) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * dbeaver/pro#5797 adds boilerplate for checkboxes (needs styles setting for CB) * reverts ui-kit checkbox behavior * adjusts styles * removes _checkbox.scss * incapsulates styles into checkboxMarkup so it does not affect ui kit checkbox * removes unused styles * tunes styles: margin + disabled checkbox state * moves caption layout inside checkboxmarkup * adds sizes styles * сleanup * removes unused checkbox ref + fixes styles for menu checkbox items * adds className prop to nav bar menus * cleanup * moved datagrid styles to boolean formatter * Revert "adds className prop to nav bar menus" This reverts commit fc1cdb2f0b445df953472dbf2bcf3c95de8411d4. * adds approach of reusing checkbox styles (module/non-module) * cleanup * removes secondary from menu item renderer checkbox * fixes checkbox bug with datagrid styles conflict * adds BEM methodology naming for checkboxes classNames * pr fixes * adds checkbox sizes in booleanFormatter * test fixes * fixes styles for users --------- Co-authored-by: Alexey Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com> --- .../src/FormControls/Checkboxes/Checkbox.tsx | 28 ++---- .../Checkboxes/CheckboxMarkup.css | 88 +++++++++++++++++++ .../Checkboxes/CheckboxMarkup.module.css | 74 +--------------- .../Checkboxes/CheckboxMarkup.tsx | 72 +++++---------- .../packages/core-theming/src/ThemeService.ts | 1 - .../core-theming/src/styles/UiCheckbox.css | 15 ---- .../core-theming/src/styles/_checkbox.scss | 71 --------------- .../core-theming/src/styles/_mixins.scss | 1 - .../src/styles/main/dark.theme.scss | 1 - .../src/styles/main/light.theme.scss | 1 - .../src/styles/theme-dark.module.scss | 1 - .../src/styles/theme-light.module.scss | 1 - .../src/ContextMenu/MenuActionElement.tsx | 7 +- .../src/ContextMenu/MenuItemRenderer.tsx | 6 +- .../Administration/Users/UsersTable/User.tsx | 16 ++-- .../src/ConnectionForm/Options/Options.tsx | 1 - .../BooleanFormatter.module.css | 8 ++ .../CellFormatters/BooleanFormatter.tsx | 8 +- .../src/SpreadsheetGrid.tsx | 2 +- .../src/TopNavBar/TopNavBar.tsx | 2 +- .../shared/TopMenuCheckbox.module.css | 11 +-- 21 files changed, 147 insertions(+), 268 deletions(-) create mode 100644 webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.css delete mode 100644 webapp/packages/core-theming/src/styles/UiCheckbox.css delete mode 100644 webapp/packages/core-theming/src/styles/_checkbox.scss create mode 100644 webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.module.css diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx index c92f5d67c5..9fc1ae263c 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.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. @@ -8,20 +8,21 @@ import { observer } from 'mobx-react-lite'; import { isControlPresented } from '../isControlPresented.js'; -import { CheckboxMarkup, type CheckboxMod } from './CheckboxMarkup.js'; +import { CheckboxMarkup } from './CheckboxMarkup.js'; import { type CheckboxOnChangeEvent, useCheckboxState } from './useCheckboxState.js'; +import type { ControlSize } from '@dbeaver/ui-kit/types/controls'; export interface CheckboxBaseProps { caption?: string; - mod?: CheckboxMod[]; - ripple?: boolean; indeterminate?: boolean; inverse?: boolean; + size?: ControlSize; + variant?: 'primary' | 'secondary'; } export type CheckboxInputProps = Omit< React.InputHTMLAttributes, - 'onChange' | 'type' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'style' + 'onChange' | 'type' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'style' | 'size' > & { value?: string; defaultValue?: string; @@ -54,14 +55,10 @@ export const Checkbox: CheckboxType = observer(function Checkbox({ value, defaultValue, state, - label, checked, defaultChecked, children, inverse, - mod, - ripple, - className, autoHide, onChange, ...rest @@ -81,16 +78,5 @@ export const Checkbox: CheckboxType = observer(function Checkbox({ return null; } - return ( - - ); + return ; }); diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.css b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.css new file mode 100644 index 0000000000..c951fdca2a --- /dev/null +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.css @@ -0,0 +1,88 @@ +.checkbox-markup-theme--primary { + --dbv-kit-checkbox-background-checked: var(--theme-primary); + --dbv-kit-checkbox-icon-color: var(--theme-on-primary); + + --dbv-kit-checkbox-border-color: color-mix(in srgb, var(--theme-on-secondary), white 20%); + --dbv-kit-checkbox-border-color-checked: transparent; +} + +.checkbox-markup-theme--secondary { + --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); +} + +.checkbox-markup-theme--tertiary { + --dbv-kit-checkbox-background: var(--theme-surface); + --dbv-kit-checkbox-background-checked: var(--theme-surface); + --dbv-kit-checkbox-foreground: var(--theme-on-surface); + --dbv-kit-checkbox-border-color: var(--theme-on-secondary); + --dbv-kit-checkbox-border-color-checked: var(--theme-on-secondary); + --dbv-kit-checkbox-icon-color: var(--theme-on-secondary); + --dbv-kit-control-outline-color: var(--theme-primary); +} + +@layer components { + .theme-dark .checkbox-markup { + --dbv-kit-checkbox-hover-shadow-color: color-mix(in srgb, var(--theme-on-secondary), black 50%); + --dbv-kit-checkbox-border-color: color-mix(in srgb, var(--theme-on-secondary), black 20%); + + & .dbv-kit-checkbox { + &[data-disabled='true'] { + & .dbv-kit-checkbox__check { + --dbv-kit-checkbox-background-checked: color-mix(in srgb, var(--theme-on-secondary), black 20%); + } + } + } + } + + .checkbox-markup { + --dbv-kit-checkbox-hover-shadow-color: color-mix(in srgb, var(--theme-on-secondary), white 80%); + + --dbv-kit-checkbox-border-width: 2px; + --dbv-kit-checkbox-border-radius: 2px; + + --dbv-kit-checkbox-small-height: 24px; + --dbv-kit-checkbox-medium-height: 28px; + --dbv-kit-checkbox-large-height: 32px; + --dbv-kit-checkbox-xlarge-height: 36px; + + --dbv-kit-checkbox-small-font-size: 14px; + --dbv-kit-checkbox-medium-font-size: 14px; + --dbv-kit-checkbox-large-font-size: 16px; + --dbv-kit-checkbox-xlarge-font-size: 18px; + + & .checkbox-markup__label { + color: var(--theme-on-surface); + } + + & .checkbox-markup__caption { + font-size: calc(var(--dbv-kit-checkbox-font-size) * 0.875); + color: var(--theme-on-secondary); + } + + & .dbv-kit-checkbox { + display: flex; + align-items: center; + + &[data-disabled='true'] { + & .dbv-kit-checkbox__check { + --dbv-kit-checkbox-background-checked: color-mix(in srgb, var(--theme-on-secondary), white 30%); + } + } + } + + & .dbv-kit-checkbox__text { + line-height: calc(var(--dbv-kit-checkbox-font-size) * 1.4); + display: flex; + flex-direction: column; + } + + & .dbv-kit-checkbox__check { + margin: calc(var(--dbv-kit-checkbox-font-size) * 0.5); + } + } +} diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.module.css b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.module.css index d274783150..3fc3aee60f 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.module.css +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.module.css @@ -1,74 +1,6 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2024 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ -.checkbox { - composes: theme-checkbox from global; - box-sizing: content-box !important; +.container { } -.checkboxInput { - composes: theme-checkbox_native-control from global; +.label { } -.checkboxBackground { - composes: theme-checkbox__background from global; - box-sizing: border-box !important; -} -.checkboxCheckmark { - composes: theme-checkbox__checkmark from global; -} -.checkboxCheckmarkPath { - composes: theme-checkbox__checkmark-path from global; -} -.checkboxMixedmark { - composes: theme-checkbox__mixedmark from global; -} -.checkboxRipple { - composes: theme-checkbox__ripple from global; -} -.checkboxContainer { - display: flex; - align-items: center; - height: 32px; -} -.checkboxLabel { - composes: theme-typography--body2 from global; - cursor: pointer; -} -.checkboxCaption { - composes: theme-text-text-hint-on-light theme-typography--caption from global; - white-space: normal; -} - -.primary { - composes: theme-checkbox_primary from global; -} -.surface { - composes: theme-checkbox_surface from global; -} -.small { - composes: theme-checkbox_small from global; -} - -.small { - &.checkboxContainer { - & .checkbox { - width: 14px; - height: 14px; - } - & .checkboxBackground { - width: 14px; - height: 14px; - } - } -} - -.disabled { - composes: theme-checkbox--disabled from global; -} - -.checked { - composes: theme-checkbox--checked from global; +.caption { } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx index 0294eea1e4..dfbe87b27e 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx @@ -1,83 +1,51 @@ /* * 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. */ -import { useLayoutEffect, useRef } from 'react'; -import { s } from '../../s.js'; +import { Checkbox as UiKitCheckbox } from '@dbeaver/ui-kit'; +import type { ControlSize } from '@dbeaver/ui-kit/types/controls'; import { useS } from '../../useS.js'; +import './CheckboxMarkup.css'; import CheckboxMarkupStyles from './CheckboxMarkup.module.css'; +import { s } from '../../s.js'; export type CheckboxMod = 'primary' | 'surface' | 'small'; -interface ICheckboxMarkupProps extends Omit, 'style'> { +export { CheckboxMarkupStyles }; + +interface ICheckboxMarkupProps extends Omit, 'style' | 'size'> { label?: string; caption?: string; indeterminate?: boolean; - ripple?: boolean; - mod?: CheckboxMod[]; + size?: ControlSize; + theme?: 'primary' | 'secondary' | 'tertiary'; } -export { CheckboxMarkupStyles }; - export const CheckboxMarkup: React.FC = function CheckboxMarkup({ id, label, indeterminate, className, - title, - mod = ['primary'], - ripple = true, - readOnly, caption, + size = 'medium', + theme = 'primary', + title, + readOnly, + children, ...rest }) { const styles = useS(CheckboxMarkupStyles); - const checkboxRef = useRef(null); - - useLayoutEffect(() => { - if (checkboxRef.current) { - checkboxRef.current.indeterminate = indeterminate || false; - } - }); return ( -
-
- -
- - - -
-
- {ripple &&
} -
- {label && (id || rest.name) && ( - - )} +
+ + {label && {label}} + {caption && {caption}} +
); }; diff --git a/webapp/packages/core-theming/src/ThemeService.ts b/webapp/packages/core-theming/src/ThemeService.ts index 523a11ad86..f8cfa10672 100644 --- a/webapp/packages/core-theming/src/ThemeService.ts +++ b/webapp/packages/core-theming/src/ThemeService.ts @@ -19,7 +19,6 @@ import './styles/main/fonts.pure.css'; // TODO: important to keep normalize first import './styles/main/normalize.pure.css'; import './styles/main/typography.pure.scss'; -import './styles/UiCheckbox.css'; import './styles/UiIconButton.css'; import './styles/UiSpinner.css'; import './styles/UiInput.css'; diff --git a/webapp/packages/core-theming/src/styles/UiCheckbox.css b/webapp/packages/core-theming/src/styles/UiCheckbox.css deleted file mode 100644 index 95c1d2c107..0000000000 --- a/webapp/packages/core-theming/src/styles/UiCheckbox.css +++ /dev/null @@ -1,15 +0,0 @@ -@layer components { - body { - --dbv-kit-checkbox-background: var(--theme-surface); - --dbv-kit-checkbox-background-checked: var(--theme-surface); - --dbv-kit-checkbox-foreground: var(--theme-on-surface); - --dbv-kit-checkbox-border-color: var(--theme-on-secondary); - --dbv-kit-checkbox-border-color-checked: var(--theme-on-secondary); - --dbv-kit-checkbox-icon-color: var(--theme-on-secondary); - --dbv-kit-control-outline-color: var(--theme-primary); - - --dbv-kit-checkbox-border-width: 1px; - --dbv-kit-checkbox-check-size: 0.8; - --dbv-kit-checkbox-small-height: 1.375rem; - } -} diff --git a/webapp/packages/core-theming/src/styles/_checkbox.scss b/webapp/packages/core-theming/src/styles/_checkbox.scss deleted file mode 100644 index 45f2d22161..0000000000 --- a/webapp/packages/core-theming/src/styles/_checkbox.scss +++ /dev/null @@ -1,71 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2024 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -@import '@material/checkbox/mixins'; -$mdc-checkbox-icon-size: 16px; - -@mixin checkbox-core-styles($query: mdc-feature-all()) { - @include mdc-checkbox-core-styles($query); - - .theme-checkbox { - @extend .mdc-checkbox; - } - .theme-checkbox_native-control { - @extend .mdc-checkbox__native-control; - - &:disabled { - opacity: 0; - } - } - .theme-checkbox__background { - @extend .mdc-checkbox__background; - } - .theme-checkbox__checkmark { - @extend .mdc-checkbox__checkmark; - } - .theme-checkbox__checkmark-path { - @extend .mdc-checkbox__checkmark-path; - } - .theme-checkbox__mixedmark { - @extend .mdc-checkbox__mixedmark; - } - .theme-checkbox__ripple { - @extend .mdc-checkbox__ripple; - } - .theme-checkbox--checked { - @extend .mdc-checkbox--selected; - } - .theme-checkbox--disabled { - @extend .mdc-checkbox--disabled; - } - - .theme-checkbox_primary { - $mdc-checkbox-mark-color: $mdc-theme-on-primary; - @include mdc-checkbox-ink-color($mdc-checkbox-mark-color, $query); - @include mdc-checkbox-disabled-ink-color(rgba($mdc-checkbox-mark-color, 0.5), $query); - @include mdc-checkbox-container-colors($mdc-checkbox-border-color, transparent, $mdc-theme-primary, $mdc-theme-primary); - } - - .theme-checkbox_surface { - $mdc-checkbox-mark-color: $mdc-theme-primary; - @include mdc-checkbox-ink-color($mdc-checkbox-mark-color, $query); - @include mdc-checkbox-disabled-ink-color(rgba($mdc-checkbox-mark-color, 0.5), $query); - @include mdc-checkbox-container-colors($mdc-theme-surface, transparent, $mdc-theme-surface, $mdc-theme-surface); - } - - .theme-checkbox_on_primary { - $mdc-checkbox-mark-color: $mdc-theme-primary; - @include mdc-checkbox-ink-color($mdc-checkbox-mark-color, $query); - @include mdc-checkbox-disabled-ink-color(rgba($mdc-checkbox-mark-color, 0.5), $query); - @include mdc-checkbox-container-colors($mdc-theme-on-primary, transparent, $mdc-theme-on-primary, $mdc-theme-on-primary); - } - - .theme-checkbox_small { - @include mdc-checkbox-density(-3); - } -} diff --git a/webapp/packages/core-theming/src/styles/_mixins.scss b/webapp/packages/core-theming/src/styles/_mixins.scss index 7d6d239871..d9bee48bd4 100644 --- a/webapp/packages/core-theming/src/styles/_mixins.scss +++ b/webapp/packages/core-theming/src/styles/_mixins.scss @@ -21,7 +21,6 @@ @import './color'; @import './radio'; @import './switch'; -@import './checkbox'; @import './placeholder'; @import './form-controls'; @import './link'; diff --git a/webapp/packages/core-theming/src/styles/main/dark.theme.scss b/webapp/packages/core-theming/src/styles/main/dark.theme.scss index 1d7f747458..694d1cf8be 100644 --- a/webapp/packages/core-theming/src/styles/main/dark.theme.scss +++ b/webapp/packages/core-theming/src/styles/main/dark.theme.scss @@ -19,7 +19,6 @@ @include form-controls; @include radio-core-styles; @include switch-core-styles; - @include checkbox-core-styles; @include link; @include placeholder; @include delimiter($mdc-theme-secondary); diff --git a/webapp/packages/core-theming/src/styles/main/light.theme.scss b/webapp/packages/core-theming/src/styles/main/light.theme.scss index fe8ada7883..aa0f20549f 100644 --- a/webapp/packages/core-theming/src/styles/main/light.theme.scss +++ b/webapp/packages/core-theming/src/styles/main/light.theme.scss @@ -19,7 +19,6 @@ @include form-controls; @include radio-core-styles; @include switch-core-styles; - @include checkbox-core-styles; @include link; @include placeholder; @include delimiter($mdc-theme-secondary); diff --git a/webapp/packages/core-theming/src/styles/theme-dark.module.scss b/webapp/packages/core-theming/src/styles/theme-dark.module.scss index c38dd55b75..2376824606 100644 --- a/webapp/packages/core-theming/src/styles/theme-dark.module.scss +++ b/webapp/packages/core-theming/src/styles/theme-dark.module.scss @@ -15,7 +15,6 @@ @include theme-ripple; @include radio-core-styles; @include switch-core-styles; -@include checkbox-core-styles; @include form-controls; @include link; @include placeholder; diff --git a/webapp/packages/core-theming/src/styles/theme-light.module.scss b/webapp/packages/core-theming/src/styles/theme-light.module.scss index 4b3cb01c4a..7f823e7b1b 100644 --- a/webapp/packages/core-theming/src/styles/theme-light.module.scss +++ b/webapp/packages/core-theming/src/styles/theme-light.module.scss @@ -15,7 +15,6 @@ @include theme-ripple; @include radio-core-styles; @include switch-core-styles; -@include checkbox-core-styles; @include form-controls; @include link; @include placeholder; diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuActionElement.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuActionElement.tsx index 45f59656b9..ba3cd0be98 100644 --- a/webapp/packages/core-ui/src/ContextMenu/MenuActionElement.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/MenuActionElement.tsx @@ -72,12 +72,7 @@ export const MenuActionElement = observer(function Menu focusable onClick={handleClick} > - } - tooltip={actionInfo.tooltip} - loading={loading} - /> + } tooltip={actionInfo.tooltip} loading={loading} /> ); } diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx index 9f0dd5faee..2732591fa3 100644 --- a/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx @@ -89,11 +89,7 @@ export const MenuItemRenderer = observer(function MenuIt checked={item.checked} onClick={() => onClick(false)} > - } - tooltip={item.tooltip} - /> + } tooltip={item.tooltip} /> ); } diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.tsx index 62915bbd95..ee1ccd82e3 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/User.tsx @@ -63,13 +63,15 @@ export const User = observer(function User({ user, displayAuthRole, isMan {teams} - - + +
+ +
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx index 874d37ac57..9e762fa505 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx @@ -352,7 +352,6 @@ export const Options: TabContainerPanelComponent = observe name="saveCredentials" state={optionsPart.state} disabled={formState.isDisabled || readonly || optionsPart.state.sharedCredentials} - mod={['primary']} title={translate( !isSharedProject || serverConfigResource.data?.distributed ? 'connections_connection_authentication_save_credentials_for_user_tooltip' diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.module.css b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.module.css new file mode 100644 index 0000000000..10dbe7b88c --- /dev/null +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.module.css @@ -0,0 +1,8 @@ +@layer components { + .formatter { + composes: checkbox-markup-theme--tertiary from global; + --dbv-kit-checkbox-border-width: 1px; + --dbv-kit-checkbox-check-size: 0.8; + --dbv-kit-checkbox-small-height: 1.375rem; + } +} diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx index fde0695b00..3aca960ce6 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx @@ -9,18 +9,20 @@ import { observer } from 'mobx-react-lite'; import { useContext } from 'react'; import { BooleanFormatter as GridBooleanFormatter } from '@cloudbeaver/plugin-data-grid'; -import { getComputed } from '@cloudbeaver/core-blocks'; +import { getComputed, s, useS } from '@cloudbeaver/core-blocks'; import { DatabaseEditChangeType } from '@cloudbeaver/plugin-data-viewer'; import { CellContext } from '../../CellRenderer/CellContext.js'; import { DataGridContext } from '../../DataGridContext.js'; import { TableDataContext } from '../../TableDataContext.js'; import type { ICellFormatterProps } from '../ICellFormatterProps.js'; +import styles from './BooleanFormatter.module.css'; export const BooleanFormatter = observer(function BooleanFormatter() { const context = useContext(DataGridContext); const tableDataContext = useContext(TableDataContext); const cellContext = useContext(CellContext); + const style = useS(styles); const cell = cellContext.cell; @@ -50,5 +52,7 @@ export const BooleanFormatter = observer(function BooleanFo tableDataContext.editor.set(cell, nextValue); } - return ; + return ( + + ); }); diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/SpreadsheetGrid.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/SpreadsheetGrid.tsx index 53b2075b7f..3a277977b7 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/SpreadsheetGrid.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/SpreadsheetGrid.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. 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 3638ebdbd4..2b80f27c8c 100644 --- a/webapp/packages/plugin-top-app-bar/src/TopNavBar/TopNavBar.tsx +++ b/webapp/packages/plugin-top-app-bar/src/TopNavBar/TopNavBar.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. diff --git a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuCheckbox.module.css b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuCheckbox.module.css index 3b7a4a2b28..eb34ffdc23 100644 --- a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuCheckbox.module.css +++ b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuCheckbox.module.css @@ -1,10 +1,3 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2024 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ -.checkbox { - composes: theme-checkbox_on_primary from global; +.container { + composes: checkbox-markup-theme--secondary from global; }