From 26c061e65bb0b0f670721b91a88013f6a7528719 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Thu, 8 Apr 2021 18:56:35 +0300 Subject: [PATCH 1/3] fix(core-blocks): CB-804, CB-933 new arrow icon, additional tooltips --- .../packages/core-app/public/icons/icons.svg | 2 +- .../SettingsMenu/settingsMenuStyles.ts | 2 +- .../LogViewTab/LogEntry/LogEntry.tsx | 6 +++- .../core-blocks/src/FormControls/Combobox.tsx | 4 +-- .../src/FormControls/ComboboxNew.tsx | 4 +-- .../FormControls/FormFieldDescriptionNew.tsx | 4 ++- .../ObjectPropertyInfoFormNew.tsx | 2 +- .../src/PropertiesTable/PropertyItem.tsx | 4 +-- .../src/Tree/TreeNode/TreeNodeExpand.tsx | 4 --- .../src/Tree/TreeNode/TreeNodeStyles.ts | 4 +-- .../src/Menu/MenuPanel/menuPanelStyles.ts | 1 + .../src/DataGrid/Formatters/CellFormatter.tsx | 2 +- .../TableColumnHeader/TableColumnHeader.tsx | 6 ++-- .../src/LocaleService.ts | 32 +++++++++++++++++++ .../src/locales/en.ts | 3 ++ .../src/locales/ru.ts | 3 ++ .../src/manifest.ts | 3 +- 17 files changed, 62 insertions(+), 24 deletions(-) create mode 100644 webapp/packages/plugin-data-spreadsheet-new/src/LocaleService.ts create mode 100644 webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts create mode 100644 webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts diff --git a/webapp/packages/core-app/public/icons/icons.svg b/webapp/packages/core-app/public/icons/icons.svg index 24d2606bbf..ba0ebf32e9 100644 --- a/webapp/packages/core-app/public/icons/icons.svg +++ b/webapp/packages/core-app/public/icons/icons.svg @@ -30,7 +30,7 @@ - + diff --git a/webapp/packages/core-app/src/TopNavBar/SettingsMenu/settingsMenuStyles.ts b/webapp/packages/core-app/src/TopNavBar/SettingsMenu/settingsMenuStyles.ts index 05dd5cf8f4..b5bf2450d2 100644 --- a/webapp/packages/core-app/src/TopNavBar/SettingsMenu/settingsMenuStyles.ts +++ b/webapp/packages/core-app/src/TopNavBar/SettingsMenu/settingsMenuStyles.ts @@ -32,7 +32,7 @@ export const settingsMenuStyles = css` margin-left: auto; } & Icon { - transform: rotate(-180deg); + transform: rotate(90deg); } } `; diff --git a/webapp/packages/core-app/src/shared/ToolsPanel/LogViewTab/LogEntry/LogEntry.tsx b/webapp/packages/core-app/src/shared/ToolsPanel/LogViewTab/LogEntry/LogEntry.tsx index bc9e6c9c1e..9caf9dbc53 100644 --- a/webapp/packages/core-app/src/shared/ToolsPanel/LogViewTab/LogEntry/LogEntry.tsx +++ b/webapp/packages/core-app/src/shared/ToolsPanel/LogViewTab/LogEntry/LogEntry.tsx @@ -32,6 +32,10 @@ const style = css` padding-right: 16px; text-overflow: ellipsis; } + Link { + overflow: hidden; + text-overflow: ellipsis; + } Link:hover { cursor: pointer; } @@ -50,7 +54,7 @@ export const LogEntry = observer(function LogEntry({ item }: LogEntryProps) { {item.time} - + {item.stackTrace ? {item.message} : item.message} diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx index 182bf557e5..305f64b55d 100644 --- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx @@ -71,10 +71,8 @@ const styles = composes( display: block; } MenuButton Icon { - transform: rotate(90deg); - &[|focus] { - transform: rotate(-90deg); + transform: rotate(180deg); } } input-box { diff --git a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx index a0be743104..472d384bb4 100644 --- a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx @@ -86,10 +86,8 @@ const styles = composes( display: block; } MenuButton Icon { - transform: rotate(90deg); - &[|focus] { - transform: rotate(-90deg); + transform: rotate(180deg); } } input-box { diff --git a/webapp/packages/core-blocks/src/FormControls/FormFieldDescriptionNew.tsx b/webapp/packages/core-blocks/src/FormControls/FormFieldDescriptionNew.tsx index 5f790c4522..d562f1c668 100644 --- a/webapp/packages/core-blocks/src/FormControls/FormFieldDescriptionNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/FormFieldDescriptionNew.tsx @@ -22,18 +22,20 @@ const formFieldDescriptionNewStyles = css` interface Props { label?: string; + title?: string; className?: string; } export const FormFieldDescriptionNew: React.FC = function FormFieldDescriptionNew({ label, + title, children, className, }) { const styles = useStyles(baseFormControlStylesNew, formFieldDescriptionNewStyles); return styled(styles)( - + {label && {label}} {children} diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx index 75c9be682a..0947969e50 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx @@ -66,7 +66,7 @@ const RenderField: React.FC = observer(function RenderField({ return null; } return ( - + {state[property.id!]} ); diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx index 4c88b88f7a..373f2b97f2 100644 --- a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx +++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx @@ -92,10 +92,8 @@ const styles = composes( display: block; } property-select Icon { - transform: rotate(90deg); - &[|focus] { - transform: rotate(-90deg); + transform: rotate(180deg); } } button { diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx index 2fe997e0d7..0fd443104d 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx @@ -19,10 +19,6 @@ const styles = css` cursor: pointer; height: 100%; width: 100%; - - &[name="angle"] { - transform: rotate(-90deg); - } } `; diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeStyles.ts b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeStyles.ts index 9b8a15a3d3..9fdad4ba32 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeStyles.ts +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeStyles.ts @@ -28,7 +28,7 @@ export const TREE_NODE_STYLES = composes( } & > TreeNodeControl > TreeNodeExpand { - transform: rotate(90deg); + transform: rotate(0deg); } } @@ -64,7 +64,7 @@ export const TREE_NODE_STYLES = composes( opacity: 0.5; width: 16px; height: 16px; - + transform: rotate(-90deg); & [|size='small'] { display: block; } diff --git a/webapp/packages/core-dialogs/src/Menu/MenuPanel/menuPanelStyles.ts b/webapp/packages/core-dialogs/src/Menu/MenuPanel/menuPanelStyles.ts index 17360cefad..09803865e4 100644 --- a/webapp/packages/core-dialogs/src/Menu/MenuPanel/menuPanelStyles.ts +++ b/webapp/packages/core-dialogs/src/Menu/MenuPanel/menuPanelStyles.ts @@ -105,6 +105,7 @@ export const menuPanelStyles = composes( width: 16px; height: 16px; opacity: 0.5; + transform: rotate(-90deg); } & IconOrImage { width: 14px; diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx index 33c60d34f4..d4719343e7 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx @@ -60,7 +60,7 @@ export const CellFormatter: React.FC = function CellFormatter({ } return ( - + {value} ); diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx index edfaf42ad6..024125a320 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx @@ -12,6 +12,7 @@ import type { HeaderRendererProps } from 'react-data-grid'; import styled, { css, use } from 'reshadow'; import { StaticImage, Icon } from '@cloudbeaver/core-blocks'; +import { useTranslate } from '@cloudbeaver/core-localization'; import type { SqlResultSet } from '@cloudbeaver/core-sdk'; import { composes, useStyles } from '@cloudbeaver/core-theming'; import type { SortMode } from '@cloudbeaver/plugin-data-viewer'; @@ -103,6 +104,7 @@ export const TableColumnHeader: React.FC> = observer(fu const dataGridContext = useContext(DataGridContext); const gridSortingContext = useContext(DataGridSortingContext); const gridSelectionContext = useContext(DataGridSelectionContext); + const translate = useTranslate(); if (!dataGridContext || !gridSortingContext || !gridSelectionContext) { throw new Error('One of the following contexts are missed(data grid context, grid sorting context, grid selection context)'); @@ -144,14 +146,14 @@ export const TableColumnHeader: React.FC> = observer(fu return styled(headerStyles)( - + {columnName} {sortable && ( - + diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/LocaleService.ts b/webapp/packages/plugin-data-spreadsheet-new/src/LocaleService.ts new file mode 100644 index 0000000000..efc6d123bd --- /dev/null +++ b/webapp/packages/plugin-data-spreadsheet-new/src/LocaleService.ts @@ -0,0 +1,32 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2021 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 { Bootstrap, injectable } from '@cloudbeaver/core-di'; +import { LocalizationService } from '@cloudbeaver/core-localization'; + +@injectable() +export class LocaleService extends Bootstrap { + constructor(private localizationService: LocalizationService) { + super(); + } + + register(): void | Promise { + this.localizationService.addProvider(this.provider.bind(this)); + } + + load(): void | Promise { } + + private async provider(locale: string) { + switch (locale) { + case 'ru': + return (await import('./locales/ru')).default; + default: + return (await import('./locales/en')).default; + } + } +} diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts new file mode 100644 index 0000000000..8cb2385bd6 --- /dev/null +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts @@ -0,0 +1,3 @@ +export default [ + ['data_grid_table_tooltip_column_header_sort', 'Sort by column'], +]; diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts new file mode 100644 index 0000000000..a091d87fd5 --- /dev/null +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts @@ -0,0 +1,3 @@ +export default [ + ['data_grid_table_tooltip_column_header_sort', 'Сортировка по колонке'], +]; diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/manifest.ts b/webapp/packages/plugin-data-spreadsheet-new/src/manifest.ts index e047ccf567..45c6425ba3 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/manifest.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/manifest.ts @@ -9,9 +9,10 @@ import type { PluginManifest } from '@cloudbeaver/core-di'; import { DataGridSettingsService } from './DataGridSettingsService'; +import { LocaleService } from './LocaleService'; import { SpreadsheetService } from './SpreadsheetService'; export const manifest: PluginManifest = { info: { name: 'New spreadsheet implementation' }, - providers: [SpreadsheetService, DataGridSettingsService], + providers: [SpreadsheetService, DataGridSettingsService, LocaleService], }; From 74d3df4c4e8b1403df8cdd2b4b1bfa6186ebc0aa Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Thu, 8 Apr 2021 19:02:10 +0300 Subject: [PATCH 2/3] fix(core-blocks): CB-804, CB-933 remove extra css nesting --- webapp/packages/core-blocks/src/FormControls/Combobox.tsx | 6 ++---- .../packages/core-blocks/src/FormControls/ComboboxNew.tsx | 6 ++---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx index 305f64b55d..4266e07895 100644 --- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx @@ -70,10 +70,8 @@ const styles = composes( height: 16px; display: block; } - MenuButton Icon { - &[|focus] { - transform: rotate(180deg); - } + MenuButton Icon[|focus] { + transform: rotate(180deg); } input-box { flex: 1; diff --git a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx index 472d384bb4..cd89102b11 100644 --- a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx @@ -85,10 +85,8 @@ const styles = composes( height: 16px; display: block; } - MenuButton Icon { - &[|focus] { - transform: rotate(180deg); - } + MenuButton Icon[|focus] { + transform: rotate(180deg); } input-box { flex: 1; From 6440b3360da716ce215e1570bba0944c54c70151 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Fri, 9 Apr 2021 11:37:21 +0300 Subject: [PATCH 3/3] fix(core-blocks): CB-804, CB-933 moved tooltip in variable decalration --- .../src/DataGrid/TableColumnHeader/TableColumnHeader.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx index 024125a320..a1bf8578e5 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx @@ -119,6 +119,7 @@ export const TableColumnHeader: React.FC> = observer(fu // TODO we want to get "sortable" property from SqlResultColumn data const sortable = model.source.results.length === 1; const currentSortMode = gridSortingContext.getSortMode(columnName); + const columnTooltip = columnName + (column?.fullTypeName ? ': ' + column.fullTypeName : ''); const handleSort = (e: React.MouseEvent) => { e.stopPropagation(); @@ -146,7 +147,7 @@ export const TableColumnHeader: React.FC> = observer(fu return styled(headerStyles)( - +