fix: switch small and medium table row size.

This commit is contained in:
a.bouhuolia
2021-09-26 13:14:03 +02:00
parent cd5116dbcb
commit 31d2b1b09a
6 changed files with 30 additions and 11 deletions

View File

@@ -13,3 +13,9 @@ export const TABLES = {
MANUAL_JOURNALS: 'manual_journal', MANUAL_JOURNALS: 'manual_journal',
EXPENSES: 'expenses', EXPENSES: 'expenses',
}; };
export const TABLE_SIZE = {
COMPACT: 'compact',
SMALL: 'small',
MEDIUM: 'medium',
}

View File

@@ -196,7 +196,7 @@ export default function DataTable(props) {
DataTable.defaultProps = { DataTable.defaultProps = {
pagination: false, pagination: false,
size: 'medium', size: null,
spinnerProps: { size: 30 }, spinnerProps: { size: 30 },
expandToggleColumn: 1, expandToggleColumn: 1,

View File

@@ -1,5 +1,5 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import classNames from 'classnames'; import clsx from 'classnames';
import { ScrollSync } from 'react-scroll-sync'; import { ScrollSync } from 'react-scroll-sync';
import TableContext from './TableContext'; import TableContext from './TableContext';
@@ -22,19 +22,20 @@ export default function TableWrapper({ children }) {
return ( return (
<div <div
className={classNames('bigcapital-datatable', className, { className={clsx('bigcapital-datatable', className, {
'has-sticky': sticky, 'has-sticky': sticky,
'has-pagination': pagination, 'has-pagination': pagination,
'is-expandable': expandable, 'is-expandable': expandable,
'is-loading': loading, 'is-loading': loading,
'has-virtualized-rows': virtualizedRows, 'has-virtualized-rows': virtualizedRows,
[`table-size--${size}`]: size,
})} })}
> >
<ScrollSync> <ScrollSync>
<div <div
{...getTableProps({ style: { minWidth: 'none' } })} {...getTableProps({ style: { minWidth: 'none' } })}
className="table" className={clsx('table', {
[`table-size--${size}`]: size,
})}
> >
{children} {children}
</div> </div>

View File

@@ -273,6 +273,21 @@
display: flex; display: flex;
width: 100%; width: 100%;
} }
&-size{
&--medium{
.tbody .tr{
background-size: red;
min-height: 46px;
}
}
&--small{
.tbody .tr{
min-height: 40px;
}
}
}
} }
.no-results { .no-results {
@@ -335,6 +350,9 @@
.ReactVirtualized__Grid { .ReactVirtualized__Grid {
will-change: auto !important; will-change: auto !important;
} }
} }
.table-constrant { .table-constrant {

View File

@@ -6,9 +6,6 @@
.bigcapital-datatable { .bigcapital-datatable {
.table { .table {
.tbody { .tbody {
.tr{
min-height: 46px;
}
.item_type.td { .item_type.td {
.bp3-tag { .bp3-tag {
font-size: 13px; font-size: 13px;

View File

@@ -4,9 +4,6 @@
.bigcapital-datatable{ .bigcapital-datatable{
.tbody{ .tbody{
.tr{
min-height: 46px;
}
.balance.td{ .balance.td{
.cell-inner{ .cell-inner{