[Discover] Move doc viewer table row actions to left (#95064)

* Move doc viewer table actions to left

* Improve SCSS
This commit is contained in:
Matthias Wilhelm 2021-03-24 12:09:19 +01:00 committed by GitHub
parent c218ce292a
commit cb61b4a8fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 23 deletions

View file

@ -1,5 +1,5 @@
.kbnDocViewerTable {
@include euiBreakpoint('xs', 's') {
@include euiBreakpoint('xs', 's','m') {
table-layout: fixed;
}
}
@ -52,7 +52,7 @@
white-space: nowrap;
}
.kbnDocViewer__buttons {
width: 96px;
width: 108px;
// Show all icons if one is focused,
&:focus-within {
@ -64,7 +64,7 @@
.kbnDocViewer__field {
width: $euiSize * 10;
@include euiBreakpoint('xs', 's') {
@include euiBreakpoint('xs', 's', 'm') {
width: $euiSize * 6;
}
}

View file

@ -54,6 +54,26 @@ export function DocViewTableRow({
const key = field ? field : fieldMapping?.displayName;
return (
<tr key={key} data-test-subj={`tableDocViewRow-${key}`}>
{typeof onFilter === 'function' && (
<td className="kbnDocViewer__buttons">
<DocViewTableRowBtnFilterAdd
disabled={!fieldMapping || !fieldMapping.filterable}
onClick={() => onFilter(fieldMapping, valueRaw, '+')}
/>
<DocViewTableRowBtnFilterRemove
disabled={!fieldMapping || !fieldMapping.filterable}
onClick={() => onFilter(fieldMapping, valueRaw, '-')}
/>
{typeof onToggleColumn === 'function' && (
<DocViewTableRowBtnToggleColumn active={isColumnActive} onClick={onToggleColumn} />
)}
<DocViewTableRowBtnFilterExists
disabled={!fieldMapping || !fieldMapping.filterable}
onClick={() => onFilter('_exists_', field, '+')}
scripted={fieldMapping && fieldMapping.scripted}
/>
</td>
)}
<td className="kbnDocViewer__field">
{field ? (
<FieldName
@ -83,26 +103,6 @@ export function DocViewTableRow({
dangerouslySetInnerHTML={{ __html: value as string }}
/>
</td>
{typeof onFilter === 'function' && (
<td className="kbnDocViewer__buttons">
<DocViewTableRowBtnFilterAdd
disabled={!fieldMapping || !fieldMapping.filterable}
onClick={() => onFilter(fieldMapping, valueRaw, '+')}
/>
<DocViewTableRowBtnFilterRemove
disabled={!fieldMapping || !fieldMapping.filterable}
onClick={() => onFilter(fieldMapping, valueRaw, '-')}
/>
{typeof onToggleColumn === 'function' && (
<DocViewTableRowBtnToggleColumn active={isColumnActive} onClick={onToggleColumn} />
)}
<DocViewTableRowBtnFilterExists
disabled={!fieldMapping || !fieldMapping.filterable}
onClick={() => onFilter('_exists_', field, '+')}
scripted={fieldMapping && fieldMapping.scripted}
/>
</td>
)}
</tr>
);
}