table filter and icons enhancements

Summary:
- Allows alignment of table columns
- fixes display of lager numbers in log counts
- fixes the alignment of `FilterRow`

Reviewed By: priteshrnandgaonkar

Differential Revision: D9850598

fbshipit-source-id: 106f4dc6a422f58e090f97857bd7be02e7c2c1d2

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}) => ({
+const LogCount = styled('div')(({backgroundColor}) => ({
-  backgroundColor: color,
+  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 = (
-        <LogCount color={type.color}>{count}</LogCount>
+        <LogCount backgroundColor={type.color}>{count}</LogCount>
       );
     } else {
       rows.push(row);

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,
+    top: 2,
-    bottom: -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,
   },
 });
 

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<Props> {
               key={key}
               title={title}
               multiline={multiline}
+              justifyContent={col.align || 'flex-start'}
               width={normaliseColumnWidth(columnSizes[key])}>
               {isFilterable && onAddFilter != null ? (
                 <FilterRow addFilter={onAddFilter} filterKey={key}>

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