diff --git a/src/device-plugins/logs/index.js b/src/device-plugins/logs/index.js index 9a65ecf82..d605206c0 100644 --- a/src/device-plugins/logs/index.js +++ b/src/device-plugins/logs/index.js @@ -77,7 +77,7 @@ function keepKeys(obj, keys) { } const COLUMN_SIZE = { - type: 32, + type: 40, time: 120, pid: 60, tid: 60, @@ -211,23 +211,28 @@ const HiddenScrollText = styled(Text)({ alignSelf: 'baseline', userSelect: 'none', lineHeight: '130%', - marginTop: 6, + marginTop: 5, + paddingBottom: 3, '&::-webkit-scrollbar': { display: 'none', }, }); -const LogCount = styled(HiddenScrollText)(({color}) => ({ - backgroundColor: color, +const LogCount = styled('div')(({backgroundColor}) => ({ + backgroundColor, borderRadius: '999em', fontSize: 11, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', marginTop: 4, - width: 16, + minWidth: 16, height: 16, color: colors.white, + textAlign: 'center', + lineHeight: '16px', + paddingLeft: 4, + paddingRight: 4, + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', })); function pad(chunk: mixed, len: number): string { @@ -335,6 +340,7 @@ export default class LogTable extends FlipperDevicePlugin< columns: { type: { value: icon, + align: 'center', }, time: { value: ( @@ -459,7 +465,7 @@ export default class LogTable extends FlipperDevicePlugin< : 2; const type = LOG_TYPES[previousRow.type] || LOG_TYPES.debug; previousRow.columns.type.value = ( - {count} + {count} ); } else { rows.push(row); diff --git a/src/ui/components/filter/FilterRow.js b/src/ui/components/filter/FilterRow.js index 5fe280f86..49afee170 100644 --- a/src/ui/components/filter/FilterRow.js +++ b/src/ui/components/filter/FilterRow.js @@ -21,20 +21,21 @@ const FilterText = styled('div')({ maxWidth: '100%', '&:hover': { color: colors.white, + zIndex: 2, }, '&:hover::after': { content: '""', position: 'absolute', - top: 3, - bottom: -2, + top: 2, + bottom: 1, left: -6, right: -6, borderRadius: '999em', backgroundColor: 'rgba(0, 0, 0, 0.3)', + zIndex: -1, }, '&:hover *': { color: `${colors.white} !important`, - zIndex: 2, }, }); diff --git a/src/ui/components/table/TableRow.js b/src/ui/components/table/TableRow.js index 892f10427..ff421ed71 100644 --- a/src/ui/components/table/TableRow.js +++ b/src/ui/components/table/TableRow.js @@ -73,6 +73,7 @@ const TableBodyColumnContainer = styled('div')(props => ({ wordWrap: props.multiline ? 'break-word' : 'normal', width: props.width === 'flex' ? '100%' : props.width, maxWidth: '100%', + justifyContent: props.justifyContent, })); type Props = { @@ -143,6 +144,7 @@ export default class TableRow extends React.PureComponent { key={key} title={title} multiline={multiline} + justifyContent={col.align || 'flex-start'} width={normaliseColumnWidth(columnSizes[key])}> {isFilterable && onAddFilter != null ? ( diff --git a/src/ui/components/table/types.js b/src/ui/components/table/types.js index 345e18dea..1d686b301 100644 --- a/src/ui/components/table/types.js +++ b/src/ui/components/table/types.js @@ -61,6 +61,7 @@ export type TableBodyColumn = {| sortValue?: string | number, isFilterable?: boolean, value: any, + align?: 'left' | 'center' | 'right', title?: string, |};