From 9c84977062a1b594ba8839eeb22e61ba4fa29a63 Mon Sep 17 00:00:00 2001 From: wangqianliang Date: Sun, 10 Mar 2019 15:31:55 +0800 Subject: [PATCH] fix(code/frontend): truncate directory node and fix margin --- .../public/components/admin_page/admin.tsx | 2 +- .../code/public/components/diff_page/diff.tsx | 2 +- .../__snapshots__/file_tree.test.tsx.snap | 122 +++++++++--------- .../public/components/file_tree/file_tree.tsx | 20 ++- .../code/public/components/main/content.tsx | 2 +- .../code/public/components/main/directory.tsx | 45 ++----- .../code/public/components/main/main.scss | 14 +- .../plugins/code/public/components/shared.tsx | 24 ---- 8 files changed, 95 insertions(+), 136 deletions(-) delete mode 100644 x-pack/plugins/code/public/components/shared.tsx diff --git a/x-pack/plugins/code/public/components/admin_page/admin.tsx b/x-pack/plugins/code/public/components/admin_page/admin.tsx index 87b41c41df63c..d594c459d140a 100644 --- a/x-pack/plugins/code/public/components/admin_page/admin.tsx +++ b/x-pack/plugins/code/public/components/admin_page/admin.tsx @@ -22,7 +22,7 @@ import { LanguageSeverTab } from './language_server_tab'; import { ProjectTab } from './project_tab'; const Container = styled.div` - margin: 0 ${theme.euiSizeXl}; + margin: 0 ${theme.euiSizeXL}; flex-grow: 1; `; diff --git a/x-pack/plugins/code/public/components/diff_page/diff.tsx b/x-pack/plugins/code/public/components/diff_page/diff.tsx index b2b677d79ccc6..f766fb65dccee 100644 --- a/x-pack/plugins/code/public/components/diff_page/diff.tsx +++ b/x-pack/plugins/code/public/components/diff_page/diff.tsx @@ -36,7 +36,7 @@ const CommitId = styled.span` const Addition = styled.div` padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.s}; - border-radius: ${theme.euiSizeXs}; + border-radius: ${theme.euiSizeXS}; color: white; margin-right: ${theme.euiSizeS}; background-color: ${theme.euiColorDanger}; diff --git a/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap b/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap index df396adbb8c8f..dc1ba77c8ac49 100644 --- a/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap +++ b/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap @@ -84,7 +84,7 @@ exports[`render correctly 1`] = ` role="button" >
{ onClick={onClick} > {forceOpen ? ( - + ) : ( - + )} - + {`${node.name}/`} @@ -147,7 +143,7 @@ export class CodeFileTree extends React.Component { className={classes(className, 'code-file-tree-file')} role="button" > - + {node.name} @@ -167,7 +163,7 @@ export class CodeFileTree extends React.Component { className={classes(className, 'code-file-tree-file')} role="button" > - + {node.name} @@ -187,7 +183,7 @@ export class CodeFileTree extends React.Component { className={classes(className, 'code-file-tree-file')} role="button" > - + {node.name} diff --git a/x-pack/plugins/code/public/components/main/content.tsx b/x-pack/plugins/code/public/components/main/content.tsx index 3b119a6dc44a7..ba9d58956ff9b 100644 --- a/x-pack/plugins/code/public/components/main/content.tsx +++ b/x-pack/plugins/code/public/components/main/content.tsx @@ -91,7 +91,7 @@ enum ButtonOption { } const Title = styled(EuiTitle)` - margin: ${theme.euiSizeXs} 0 ${theme.euiSize}; + margin: ${theme.euiSizeXS} 0 ${theme.euiSize}; `; class CodeContent extends React.PureComponent { diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx index 1ff99fbc2281b..32021c1f09997 100644 --- a/x-pack/plugins/code/public/components/main/directory.tsx +++ b/x-pack/plugins/code/public/components/main/directory.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiIcon, EuiText, EuiTitle, IconType } from '@elastic/eui'; +import { EuiIcon, EuiTitle, IconType } from '@elastic/eui'; import theme from '@elastic/eui/dist/eui_theme_light.json'; import React from 'react'; import { Link, RouteComponentProps, withRouter } from 'react-router-dom'; @@ -21,23 +21,8 @@ const DirectoryNodesContainer = styled.div` flex-wrap: wrap; `; -const NodeName = styled.span` - margin-left: ${theme.euiSizeXs}; - vertical-align: middle; - a { - :focus: { - border: none; - outline: none; - } - :hover { - border: none; - outline: none; - } - } -`; - const Title = styled(EuiTitle)` - margin: ${theme.euiSizeXs} 0 ${theme.euiSize}; + margin: ${theme.euiSizeXS} 0 ${theme.euiSize}; `; const Container = styled.div` @@ -60,21 +45,17 @@ const DirectoryNodes = (props: DirectoryNodesProps) => { [FileTreeItemType.Submodule]: 'submodule', }; const nodes = props.nodes.map(n => ( -
- - - - - {n.name} - - - -
+ +
+ + {n.name} +
+ )); return ( diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss index 23aaed4cf7d02..8bb3290a11e71 100644 --- a/x-pack/plugins/code/public/components/main/main.scss +++ b/x-pack/plugins/code/public/components/main/main.scss @@ -62,17 +62,23 @@ .code-directory__node { width: calc(200rem / 14); - margin: 0 $euiSizeXS $euiSizeS; + margin: 0 $euiSizeS $euiSizeS; padding: $euiSizeXS; border-radius: $euiBorderRadius; - a { - color: $euiColorDarkestShade; - } + white-space: nowrap; + color: $euiColorFullShade; &:hover { background-color: rgba($euiColorGhost, .10); cursor: pointer; } } + +.code-fileNodeName { + display: inline-block; + vertical-align: middle; + margin-left: $euiSizeS; +} + .code-timeline { border-left: $euiBorderThick; margin-left: $euiSizeXS; diff --git a/x-pack/plugins/code/public/components/shared.tsx b/x-pack/plugins/code/public/components/shared.tsx deleted file mode 100644 index c8e06ca4fd034..0000000000000 --- a/x-pack/plugins/code/public/components/shared.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import theme from '@elastic/eui/dist/eui_theme_light.json'; -import styled from 'styled-components'; - -export const FolderClosedTriangle = styled.i` - display: inline-block; - width: 0; - height: 0; - margin-right: ${theme.euiSizeXs}; - border: 6px solid transparent; - border-left: 6px solid grey; - vertical-align: middle; -`; - -export const FolderOpenTriangle = styled(FolderClosedTriangle)` - margin-top: 3px; - border-top: 6px solid grey; - border-left: 6px solid transparent; -`;