diff --git a/examples/components/CRUD/Table.jsx b/examples/components/CRUD/Table.jsx index fe66b5e79..7b14bf986 100644 --- a/examples/components/CRUD/Table.jsx +++ b/examples/components/CRUD/Table.jsx @@ -149,6 +149,7 @@ export default { } ], footerToolbar: ['statistics', 'switch-per-page', 'pagination'], + // rowClassNameExpr: '<%= data.id == 1 ? "bg-success" : "" %>', columns: [ { name: 'id', diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 7a8b4571a..bcc120298 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -94,7 +94,8 @@ $hover-color: #fff; color: $font-color; - & a { + & a, + & .#{$ns}Button--link { color: $link-color; &:hover { @@ -118,20 +119,20 @@ color: lighten($font-color, 25%) !important; } - &.auto, - & .auto { - & .list-group-item { - border-color: darken($bg-color, 5%) !important; - background-color: transparent; + // &.auto, + // & .auto { + // & .list-group-item { + // border-color: darken($bg-color, 5%) !important; + // background-color: transparent; - &:hover, - &:focus, - &:active, - &.active { - @include color-schema($bg-color, 5%, 2.5% !important); - } - } - } + // &:hover, + // &:focus, + // &:active, + // &.active { + // @include color-schema($bg-color, 5%, 2.5% !important); + // } + // } + // } } @mixin text-wariant($bg-color, $name) { diff --git a/scss/_variables.scss b/scss/_variables.scss index 9ff079b1f..082adfa08 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -477,22 +477,10 @@ $Table-onHover-boxShadow: $boxShadow !default; $Table-onChecked-bg: #d9f3fb !default; $Table-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default; $Table-onChecked-color: darken($Table-onChecked-bg, 40%) !default; -$Table-onChecked-onHover-bg: darken($Table-onChecked-bg, 5%) !default; -$Table-onChecked-onHover-borderColor: darken( - $Table-onChecked-borderColor, - 5% -) !default; -$Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%) !default; $Table-onModified-bg: #e8f0fe !default; $Table-onModified-color: #4285f4 !default; $Table-onModified-borderColor: darken($Table-onModified-bg, 5%) !default; -$Table-onModified-onHover-bg: darken($Table-onModified-bg, 2.5%) !default; -$Table-onModified-onHover-borderColor: darken( - $Table-onModified-onHover-bg, - 5% -) !default; -$Table-onModified-onHover-color: darken($Table-onModified-color, 5%) !default; $Table-onDragging-opacity: 0.1 !default; $TableCell-searchBtn-width: px2rem(16px) !default; @@ -573,19 +561,18 @@ $ListItem-onModified-borderColor: darken($ListItem-onModified-bg, 10%) !default; $ListItem-onDragging-opacity: 0.1 !default; // QuickEdit -$QuickEdit-iconColor: $icon-color !default; -$QuickEdit-onHover-iconColor: $icon-onHover-color !default; +$QuickEdit-iconColor: inherit !default; +$QuickEdit-onHover-iconColor: inherit !default; $QuickEdit-onFocus-borderColor: $info !default; $QuickEdit-onFocus-borderWidth: $borderWidth !default; // Copyable -$Copyable-iconColor: $icon-color !default; -$Copyable-onHover-iconColor: $icon-onHover-color !default; +$Copyable-iconColor: inherit !default; +$Copyable-onHover-iconColor: inherit !default; // PopOverAble - -$PopOverAble-iconColor: $icon-color !default; -$PopOverAble-onHover-iconColor: $icon-onHover-color !default; +$PopOverAble-iconColor: inherit !default; +$PopOverAble-onHover-iconColor: inherit !default; // PopOver $PopOver-bg: white !default; diff --git a/scss/components/_popoverable.scss b/scss/components/_popoverable.scss index 11406e2ee..51f3cef5e 100644 --- a/scss/components/_popoverable.scss +++ b/scss/components/_popoverable.scss @@ -4,9 +4,11 @@ visibility: hidden; display: inline-block; cursor: pointer; + opacity: 0.6; &:hover { color: $PopOverAble-onHover-iconColor; + opacity: 1; } } diff --git a/scss/components/_quick-edit.scss b/scss/components/_quick-edit.scss index 4509a12d8..f85ec75f9 100644 --- a/scss/components/_quick-edit.scss +++ b/scss/components/_quick-edit.scss @@ -4,9 +4,11 @@ visibility: hidden; display: inline-block; cursor: pointer; + opacity: 0.6; &:hover { color: $QuickEdit-onHover-iconColor; + opacity: 1; } } diff --git a/scss/components/_table.scss b/scss/components/_table.scss index 3651c5fcc..71741ab61 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -264,17 +264,6 @@ & + tr { border-color: $Table-onChecked-borderColor; } - - &:hover, - &.is-hovered { - background-color: $Table-onChecked-onHover-bg; - border-color: $Table-onChecked-onHover-borderColor; - color: $Table-onChecked-onHover-color; - - & + tr { - border-color: $Table-onChecked-onHover-borderColor; - } - } } &.is-moved, @@ -286,17 +275,46 @@ & + tr { border-color: $Table-onModified-borderColor; } + } - &:hover, - &.is-hovered { - background-color: $Table-onModified-onHover-bg; - border-color: $Table-onModified-onHover-borderColor; - color: $Table-onModified-onHover-color; + &.bg-light { + @include color-variant($light, 2%, 3%, 3%, 5%); + color: $text-color; + } - & + tr { - border-color: $Table-onModified-onHover-borderColor; - } - } + &.bg-dark { + @include color-variant($dark, 5%, 10%, 5%, 10%); + @include font-variant($dark); + } + + &.bg-black { + @include color-variant($black, 5%, 10%, 5%, 10%); + @include font-variant($black); + } + + &.bg-primary { + @include color-variant($primary, 5%, 10%, 5%, 10%); + @include font-variant($primary); + } + + &.bg-success { + @include color-variant($success, 5%, 10%, 5%, 10%); + @include font-variant($success); + } + + &.bg-info { + @include color-variant($info, 5%, 10%, 5%, 10%); + @include font-variant($info); + } + + &.bg-warning { + @include color-variant($warning, 5%, 10%, 5%, 10%); + @include font-variant($warning); + } + + &.bg-danger { + @include color-variant($danger, 5%, 10%, 5%, 10%); + @include font-variant($danger); } &.is-dragging { diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index e133db175..3c7f24fda 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -1255,6 +1255,7 @@ export default class Table extends React.Component { ) { const { rowClassName, + rowClassNameExpr, placeholder, store, onAction, @@ -1310,7 +1311,11 @@ export default class Table extends React.Component { key={item.id} itemIndex={rowIndex} item={item} - itemClassName={rowClassName} + itemClassName={cx( + rowClassNameExpr + ? filter(rowClassNameExpr, item.data) + : rowClassName + )} columns={columns} renderCell={this.renderCell} regionPrefix="fixed/" @@ -1582,6 +1587,7 @@ export default class Table extends React.Component { const { store, rowClassName, + rowClassNameExpr, onAction, buildItemProps, checkOnItemClick, @@ -1600,11 +1606,16 @@ export default class Table extends React.Component { key={item.id} itemIndex={rowIndex} item={item} - itemClassName={cx(rowClassName, { - 'is-last': item.depth > 1 && rowIndex === rows.length - 1, - 'is-expanded': item.expanded, - 'is-expandable': item.expandable - })} + itemClassName={cx( + rowClassNameExpr + ? filter(rowClassNameExpr, item.data) + : rowClassName, + { + 'is-last': item.depth > 1 && rowIndex === rows.length - 1, + 'is-expanded': item.expanded, + 'is-expandable': item.expandable + } + )} columns={store.filteredColumns} renderCell={this.renderCell} onAction={onAction} @@ -1625,7 +1636,11 @@ export default class Table extends React.Component { key={`foot-${item.id}`} itemIndex={rowIndex} item={item} - itemClassName={rowClassName} + itemClassName={cx( + rowClassNameExpr + ? filter(rowClassNameExpr, item.data) + : rowClassName + )} columns={store.footableColumns} renderCell={this.renderCell} onAction={onAction} diff --git a/src/utils/tpl-builtin.ts b/src/utils/tpl-builtin.ts index 9d530272b..7803cdaa8 100644 --- a/src/utils/tpl-builtin.ts +++ b/src/utils/tpl-builtin.ts @@ -443,12 +443,12 @@ export const tokenize = ( ); }; -function resolveMapping(value: any, data: PlainObject) { +function resolveMapping(value: any, data: PlainObject, defaultFilter = '| raw') { return typeof value === 'string' && /^\$(?:([a-z0-9_.]+)|{[^}{]+})$/.test(value) - ? resolveVariableAndFilter(value, data, '| raw') + ? resolveVariableAndFilter(value, data, defaultFilter) : typeof value === 'string' && ~value.indexOf('$') - ? tokenize(value, data, '| raw') + ? tokenize(value, data, defaultFilter) : value; }