From c9a0dfcb536da918c2d4a38666f2d320183fdda4 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Mon, 27 Apr 2020 18:51:56 +0200
Subject: [PATCH] column manager select ux improved

---
 packages/web/src/datagrid/ColumnManager.js | 18 +++++++++++-------
 packages/web/src/icons.js                  |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/datagrid/ColumnManager.js b/packages/web/src/datagrid/ColumnManager.js
index ac9e72ad0..8797b747c 100644
--- a/packages/web/src/datagrid/ColumnManager.js
+++ b/packages/web/src/datagrid/ColumnManager.js
@@ -54,9 +54,17 @@ function ColumnManagerRow(props) {
   const { display, column } = props;
   const [isHover, setIsHover] = React.useState(false);
   return (
-    <Row onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
+    <Row
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+      onClick={(e) => {
+        // @ts-ignore
+        if (e.target.closest('.expandColumnIcon')) return;
+        display.focusColumn(column.uniqueName);
+      }}
+    >
       <ExpandIcon
-        // className="expandColumnIcon"
+        className="expandColumnIcon"
         isBlank={!column.foreignKey}
         isExpanded={column.foreignKey && display.isExpandedColumn(column.uniqueName)}
         isSelected={isHover}
@@ -68,11 +76,7 @@ function ColumnManagerRow(props) {
         checked={column.isChecked}
         onChange={() => display.setColumnVisibility(column.uniquePath, !column.isChecked)}
       ></input>
-      <ColumnLabel
-        {...column}
-        // @ts-ignore
-        onClick={() => display.focusColumn(column.uniqueName)}
-      />
+      <ColumnLabel {...column} />
     </Row>
   );
 }
diff --git a/packages/web/src/icons.js b/packages/web/src/icons.js
index 6f089aac0..37c9b7385 100644
--- a/packages/web/src/icons.js
+++ b/packages/web/src/icons.js
@@ -27,7 +27,7 @@ export function FontIcon({ icon, ...props }) {
   let className = props.className || '';
 
   // if (_.startsWith(name, 'bs-')) className += ` glyphicon glyphicon-${name.substr(3)}`;
-  if (type == 'fas' || type == 'far') className += `${type} ${name}`;
+  if (type == 'fas' || type == 'far') className += ` ${type} ${name}`;
 
   if (_.includes(parts, 'spin')) className += ' fa-spin';