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,
|};