From 2ced5dc01384807ebde9b4f7a182e6c29b6413c9 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Fri, 8 Apr 2022 06:04:12 +0200 Subject: [PATCH] feat(TextOverlayTooltip): WIP --- src/components/CommercialDoc/index.js | 2 +- .../DataTableCells/TextOverviewTooltipCell.js | 27 ++++++++++ src/components/DataTableCells/index.js | 2 + src/components/index.js | 3 +- .../Drawers/InvoiceDetailDrawer/utils.js | 51 ++++++++----------- src/style/App.scss | 5 ++ 6 files changed, 56 insertions(+), 34 deletions(-) create mode 100644 src/components/DataTableCells/TextOverviewTooltipCell.js diff --git a/src/components/CommercialDoc/index.js b/src/components/CommercialDoc/index.js index d1480c3f5..5a6e9b13f 100644 --- a/src/components/CommercialDoc/index.js +++ b/src/components/CommercialDoc/index.js @@ -11,7 +11,7 @@ export const CommercialDocHeader = styled.div` `; export const CommercialDocTopHeader = styled.div` - margin-bottom: 25px; + margin-bottom: 30px; `; export const CommercialDocEntriesTable = styled(DataTable)` diff --git a/src/components/DataTableCells/TextOverviewTooltipCell.js b/src/components/DataTableCells/TextOverviewTooltipCell.js new file mode 100644 index 000000000..e2028d797 --- /dev/null +++ b/src/components/DataTableCells/TextOverviewTooltipCell.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Tooltip, Position } from '@blueprintjs/core'; + +/** + * Text overview tooltip cell. + * @returns {JSX.Element} + */ +export function TextOverviewTooltipCell({ cell: { value } }) { + const SUBMENU_POPOVER_MODIFIERS = { + flip: { boundariesElement: 'viewport', padding: 20 }, + offset: { offset: '0, 10' }, + preventOverflow: { boundariesElement: 'viewport', padding: 40 }, + }; + + return ( + + {value} + + ); +} diff --git a/src/components/DataTableCells/index.js b/src/components/DataTableCells/index.js index 98d4aec24..84ef9d344 100644 --- a/src/components/DataTableCells/index.js +++ b/src/components/DataTableCells/index.js @@ -10,6 +10,7 @@ import CheckBoxFieldCell from './CheckBoxFieldCell'; import SwitchFieldCell from './SwitchFieldCell'; import TextAreaCell from './TextAreaCell'; import BranchesListFieldCell from './BranchesListFieldCell'; +import { TextOverviewTooltipCell } from './TextOverviewTooltipCell'; export { AccountsListFieldCell, @@ -25,4 +26,5 @@ export { SwitchFieldCell, TextAreaCell, BranchesListFieldCell, + TextOverviewTooltipCell, }; diff --git a/src/components/index.js b/src/components/index.js index c91a4f1a1..78a22851d 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -49,7 +49,6 @@ import DrawerHeaderContent from './Drawer/DrawerHeaderContent'; import Postbox from './Postbox'; import AccountsSuggestField from './AccountsSuggestField'; import MaterialProgressBar from './MaterialProgressBar'; -import { MoneyFieldCell } from './DataTableCells'; import AvaterCell from './AvaterCell'; import { ItemsMultiSelect } from './Items'; @@ -105,6 +104,7 @@ export * from './Currencies'; export * from './FormTopbar' export * from './Paper'; export * from './Accounts' +export * from './DataTableCells'; const Hint = FieldHint; @@ -167,7 +167,6 @@ export { Postbox, AccountsSuggestField, MaterialProgressBar, - MoneyFieldCell, ItemsMultiSelect, AvaterCell, MoreMenuItems, diff --git a/src/containers/Drawers/InvoiceDetailDrawer/utils.js b/src/containers/Drawers/InvoiceDetailDrawer/utils.js index 93b10978e..1c44d4d10 100644 --- a/src/containers/Drawers/InvoiceDetailDrawer/utils.js +++ b/src/containers/Drawers/InvoiceDetailDrawer/utils.js @@ -19,7 +19,7 @@ import { FormattedMessage as T, Choose, Can, - MODIFIER, + TextOverviewTooltipCell, } from 'components'; import { SaleInvoiceAction, @@ -27,19 +27,6 @@ import { } from '../../../common/abilityOption'; import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider'; -export function TooltipAccessor({ cell: { value } }) { - return ( - - {value} - - ); -} - /** * Retrieve invoice readonly details table columns. */ @@ -54,52 +41,54 @@ export const useInvoiceReadonlyEntriesColumns = () => { { Header: intl.get('product_and_service'), accessor: 'item.name', - Cell: TooltipAccessor, - width: getColumnWidth(entries, 'item.name', { - minWidth: 100, - maxWidth: 150, - magicSpacing: 5, - }), - className: 'name', + Cell: TextOverviewTooltipCell, disableSortBy: true, textOverview: true, + width: 150, }, { Header: intl.get('description'), accessor: 'description', - // Cell: TooltipAccessor, - className: 'description', - width: getColumnWidth(entries, 'description', { - minWidth: 100, - maxWidth: 150, - magicSpacing: 5, - }), + Cell: TextOverviewTooltipCell, disableSortBy: true, textOverview: true, + width: 75, }, { Header: intl.get('quantity'), accessor: 'quantity', Cell: FormatNumberCell, - width: 100, align: 'right', disableSortBy: true, + textOverview: true, + width: getColumnWidth(entries, 'quantity', { + minWidth: 60, + magicSpacing: 5, + }), }, { Header: intl.get('rate'), accessor: 'rate', Cell: FormatNumberCell, - width: 100, align: 'right', disableSortBy: true, + textOverview: true, + width: getColumnWidth(entries, 'rate', { + minWidth: 60, + magicSpacing: 5, + }), }, { Header: intl.get('amount'), accessor: 'amount', Cell: FormatNumberCell, - width: 100, align: 'right', disableSortBy: true, + textOverview: true, + width: getColumnWidth(entries, 'amount', { + minWidth: 60, + magicSpacing: 5, + }), }, ], [], diff --git a/src/style/App.scss b/src/style/App.scss index 11a3f35cf..76c182828 100644 --- a/src/style/App.scss +++ b/src/style/App.scss @@ -290,3 +290,8 @@ html[lang^='ar'] { .font-bold { font-weight: 600; } + + +span.table-tooltip-overview-target{ + display: inline; +} \ No newline at end of file