From ab4f4ed02bb22cb97003c47a90003dfaf3cf41c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Fri, 21 Sep 2018 10:30:12 -0700
Subject: [PATCH] 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      | 24 +++++++++++++++---------
 src/ui/components/filter/FilterRow.js |  7 ++++---
 src/ui/components/table/TableRow.js   |  2 ++
 src/ui/components/table/types.js      |  1 +
 4 files changed, 22 insertions(+), 12 deletions(-)

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