From c426f70362e694cd6589167cc2ede490456371cb Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Fri, 21 May 2021 14:36:57 +0300 Subject: [PATCH] feat(plugin-data-viewer): CB-665 change sorting icons --- .../core-app/public/icons/sort_decrease.png | Bin 0 -> 3772 bytes .../core-app/public/icons/sort_increase.png | Bin 0 -> 3799 bytes .../core-app/public/icons/sort_unknown.png | Bin 0 -> 3924 bytes .../TableColumnHeader/TableColumnHeader.tsx | 35 ++++++------------ .../src/locales/ru.ts | 2 +- 5 files changed, 12 insertions(+), 25 deletions(-) create mode 100644 webapp/packages/core-app/public/icons/sort_decrease.png create mode 100644 webapp/packages/core-app/public/icons/sort_increase.png create mode 100644 webapp/packages/core-app/public/icons/sort_unknown.png 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 0000000000000000000000000000000000000000..69e46d483cce1a283dab2524eb48c29500c58f7d GIT binary patch literal 3772 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..3bdf742b8764abe560fb72bb0efa9ed5a320c0d7 GIT binary patch literal 3799 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 F{{T>@w0{5q literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..7815511cb7b7f8ce73111408f58cec247dd56690 GIT binary patch literal 3924 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 literal 0 HcmV?d00001 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', 'Сортировка по колонке'], ];