feat: enhance node item style

* always show go-to button in search result, even if file name is long
* show go-to button only when hovered

src/components/FileExplorer.tsx

@@ -1,17 +1,17 @@
-import * as React from 'react'
-import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
+import LoadingIndicator from 'components/LoadingIndicator'
+import Node from 'components/Node'
+import SearchBar from 'components/SearchBar'
 import connect from 'driver/connect'
 import { FileExplorer as FileExplorerCore } from 'driver/core'
-import SearchBar from 'components/SearchBar'
-import Node from 'components/Node'
-import LoadingIndicator from 'components/LoadingIndicator'
-import cx from 'utils/cx'
 import { ConnectorState } from 'driver/core/FileExplorer'
-import { TreeData, MetaData } from 'utils/GitHubHelper'
-import { VisibleNodes, TreeNode } from 'utils/VisibleNodesGenerator'
+import * as React from 'react'
+import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
+import cx from 'utils/cx'
+import { MetaData, TreeData } from 'utils/GitHubHelper'
+import { usePrevious } from 'utils/hooks'
+import { TreeNode, VisibleNodes } from 'utils/VisibleNodesGenerator'
 import Icon from './Icon'
 import SizeObserver from './SizeObserver'
-import { usePrevious } from 'utils/hooks'
 
 export type Props = {
   treeData?: TreeData
@@ -130,12 +130,13 @@ class FileExplorer extends React.Component<Props & ConnectorState> {
     return (
       searchKey &&
       searched && (
-        <div className={'go-to-wrapper'}>
-          <button className={'go-to-button'} onClick={this.revealNode(goTo, node)}>
-            <Icon type="go-to" />
-            &nbsp; Reveal in file tree
-          </button>
-        </div>
+        <button
+          title={'Reveal in file tree'}
+          className={'go-to-button'}
+          onClick={this.revealNode(goTo, node)}
+        >
+          <Icon type="go-to" />
+        </button>
       )
     )
   }

src/components/Node.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import Icon from 'components/Icon'
+import * as React from 'react'
 import cx from 'utils/cx'
+import { OperatingSystems, os } from 'utils/general'
 import { TreeNode } from 'utils/VisibleNodesGenerator'
-import { os, OperatingSystems } from 'utils/general'
 
 function getIconType(node: TreeNode) {
   switch (node.type) {
@@ -52,7 +52,7 @@ export default class Node extends React.PureComponent<Props> {
             className={cx('node-item', { expanded })}
             style={{ paddingLeft: `${10 + 20 * depth}px` }}
           >
-            <div>
+            <div className={'node-item-label'}>
               <Icon type={getIconType(node)} />
               <span className={'node-item-name'}>{name}</span>
             </div>

src/content.less

@@ -352,30 +352,32 @@
               transform: rotate(90deg);
             }
 
-            .node-item-name {
-              padding-left: 6px;
-              vertical-align: middle;
-            }
+            .node-item-label {
+              overflow: hidden;
+              text-overflow: ellipsis;
 
+              .node-item-name {
+                padding-left: 6px;
+                vertical-align: middle;
+              }
+            }
             .node-item:hover .node-item-name {
               text-decoration: underline;
             }
-          }
-        }
-      }
 
-      .go-to-wrapper {
-        max-width: 16px;
-        overflow: hidden;
-        transition: max-width 0.5s linear;
-        &:hover {
-          max-width: 160px;
-        }
-        .go-to-button {
-          white-space: nowrap;
-          background: transparent;
-          border: none;
-          padding: 0;
+            .go-to-button {
+              display: none;
+              white-space: nowrap;
+              background: transparent;
+              border: none;
+              padding: 0;
+            }
+            &:hover {
+              .go-to-button {
+                display: inline-block;
+              }
+            }
+          }
         }
       }
     }