Restored row toggler

pull/5677/head
Cagatay Civici 2024-04-29 11:32:53 +03:00
parent cfda59b1fe
commit 94c6e7d19f
2 changed files with 37 additions and 4 deletions

View File

@ -88,8 +88,8 @@ const classes = {
filterApplyButton: 'p-datatable-filter-apply-button',
tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
rowgroupHeader: 'p-datatable-row-group-header',
rowGroupToggler: 'p-datatable-row-group-toggle',
rowGroupTogglerIcon: 'p-row-toggler-icon', //TODO: Remove
rowGroupToggler: 'p-datatable-row-toggle-button',
rowGroupTogglerIcon: 'p-datatable-row-toggle-icon',
row: ({ instance, props, index, columnSelectionMode }) => {
let rowStyleClass = [];
@ -123,8 +123,8 @@ const classes = {
],
columnTitle: 'p-column-title', //TODO: Remove due to stacked mode
rowReorderIcon: 'p-datatable-reorderable-row-handle',
rowToggler: 'p-datatable-row-toggle',
rowTogglerIcon: 'p-row-toggler-icon', //TODO: Remove
rowToggler: 'p-datatable-row-toggle-button',
rowTogglerIcon: 'p-datatable-row-toggle-icon',
rowEditorInitButton: 'p-datatable-row-editor-init',
rowEditorInitIcon: 'p-row-editor-init-icon', //TODO: Remove
rowEditorSaveButton: 'p-datatable-row-editor-save',

View File

@ -544,5 +544,38 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
.p-datatable.p-datatable-lg .p-datatable-footer {
padding: 0.9375rem 1.25rem;
}
.p-datatable-row-toggle-button {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: 1.75rem;
height: 1.75rem;
color: ${dt('datatable.row.action.color')};
border: 0 none;
background: transparent;
cursor: pointer;
border-radius: 50%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
user-select: none;
}
.p-datatable-row-toggle-button:enabled:hover {
color: ${dt('datatable.row.action.hover.color')};
background: ${dt('datatable.row.action.hover.background')};
}
.p-datatable-row-toggle-button:focus-visible {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px;
}
.p-datatable-tbody > tr.p-datatable-row-select .p-datatable-row-toggle-button:hover{
background: ${dt('datatable.row.action.highlight.hover.background')};
color: inherit;
}
`
};