diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx index 418e766..34ab421 100644 --- a/src/components/FileExplorer.tsx +++ b/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 { return ( searchKey && searched && ( -
- -
+ ) ) } diff --git a/src/components/Node.tsx b/src/components/Node.tsx index dbbed06..4641c50 100644 --- a/src/components/Node.tsx +++ b/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 { className={cx('node-item', { expanded })} style={{ paddingLeft: `${10 + 20 * depth}px` }} > -
+
{name}
diff --git a/src/content.less b/src/content.less index 195ac4c..1300d06 100644 --- a/src/content.less +++ b/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; + } + } + } } } }