diff --git a/webapp/packages/core-app/public/icons/sort_decrease.png b/webapp/packages/core-app/public/icons/sort_decrease.png new file mode 100644 index 0000000000..69e46d483c Binary files /dev/null and b/webapp/packages/core-app/public/icons/sort_decrease.png differ diff --git a/webapp/packages/core-app/public/icons/sort_increase.png b/webapp/packages/core-app/public/icons/sort_increase.png new file mode 100644 index 0000000000..3bdf742b87 Binary files /dev/null and b/webapp/packages/core-app/public/icons/sort_increase.png differ diff --git a/webapp/packages/core-app/public/icons/sort_unknown.png b/webapp/packages/core-app/public/icons/sort_unknown.png new file mode 100644 index 0000000000..7815511cb7 Binary files /dev/null and b/webapp/packages/core-app/public/icons/sort_unknown.png differ 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 02f31146b8..6cbed63f08 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 @@ -11,11 +11,10 @@ import { useContext } from 'react'; import type { HeaderRendererProps } from 'react-data-grid'; import styled, { css, use } from 'reshadow'; -import { StaticImage, Icon } from '@cloudbeaver/core-blocks'; +import { StaticImage, IconOrImage } 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 { ESortMode, getNextSortMode, ResultSetSortAction } from '@cloudbeaver/plugin-data-viewer'; +import { ESortMode, getNextSortMode, ResultSetSortAction, SortMode } from '@cloudbeaver/plugin-data-viewer'; import { DataGridContext } from '../DataGridContext'; import { DataGridSelectionContext } from '../DataGridSelection/DataGridSelectionContext'; @@ -45,7 +44,6 @@ const headerStyles = css` font-weight: 400; flex-grow: 1; } - sort-icons { margin-left: 4px; display: flex; @@ -57,13 +55,8 @@ const headerStyles = css` box-sizing: border-box; cursor: pointer; } - sort-icons > SortIcon { width: 8px; - fill: currentColor !important; - } - sort-icons > SortIcon:last-child { - transform: scaleY(-1); } sort-icons:hover > SortIcon { width: 9px; @@ -73,23 +66,18 @@ const headerStyles = css` cursor: default; } `; - -const activeSortIcon = composes( - css` - Icon { - composes: theme-text-primary from global; - } - ` -); - interface ISortIconProps { - active: boolean; + sortMode: SortMode; className?: string; } -const SortIcon: React.FC = function SortIcon({ active, className }) { - return styled(useStyles(active && activeSortIcon))( - +const SortIcon: React.FC = function SortIcon({ sortMode, className }) { + return ( + <> + {sortMode === ESortMode.asc && } + {sortMode === ESortMode.desc && } + {sortMode === null && } + ); }; @@ -145,8 +133,7 @@ export const TableColumnHeader: React.FC> = observer(fu {sortable && ( - - + )} diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts index 7f97a1cdcf..be7bf5bea1 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts @@ -1,6 +1,6 @@ export default [ ['data_grid_table_sorting', 'Сортировка'], ['data_grid_table_disable_sorting', 'Отключена'], - ['data_grid_table_disable_all_sorting', 'Отключить всю'], + ['data_grid_table_disable_all_sorting', 'Отменить сортировки'], ['data_grid_table_tooltip_column_header_sort', 'Сортировка по колонке'], ];