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..4266e07895 100644 --- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx @@ -70,12 +70,8 @@ const styles = composes( height: 16px; display: block; } - MenuButton Icon { - transform: rotate(90deg); - - &[|focus] { - transform: rotate(-90deg); - } + 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 6546b39304..a76d3da5cd 100644 --- a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx @@ -85,12 +85,8 @@ const styles = composes( height: 16px; display: block; } - MenuButton Icon { - transform: rotate(90deg); - - &[|focus] { - transform: rotate(-90deg); - } + MenuButton Icon[|focus] { + transform: rotate(180deg); } input-box { flex: 1; 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..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 @@ -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)'); @@ -117,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(); @@ -144,14 +147,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], };