diff --git a/x-pack/plugins/code/public/common/types.ts b/x-pack/plugins/code/public/common/types.ts index 2ba201f3e0d6a..c2122022b9d84 100644 --- a/x-pack/plugins/code/public/common/types.ts +++ b/x-pack/plugins/code/public/common/types.ts @@ -35,6 +35,7 @@ export interface MainRouteParams { org: string; revision: string; pathType: PathTypes; + goto?: string; } export interface EuiSideNavItem { 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 00a9085e52a01..0f8c320f57b4b 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 @@ -75,164 +75,176 @@ exports[`render correctly 1`] = ` className="euiSideNavItem euiSideNavItem--trunk" >
- - + + + + + + + - - - - - - - -
+ - android/ -
- +
+ android/ +
+ +
- - + + + + + + + - - - - - - - -
+ - futures/ -
- +
+ futures/ +
+ +
- - + + + + + + + - - - - - - - -
+ - guava/ -
- +
+ guava/ +
+ +
- - + + + + + + + - - - - - - - -
+ - javadoc-link/ -
- +
+ javadoc-link/ +
+ +
- - - + + + + - - - - -
+ - pom.xml -
- +
+ pom.xml +
+ +
- - + + + + + + + - - - - - - - -
+ - src/com/google/ -
- +
+ src/com/google/ +
+ +
+
- - + + + + + + + - - - - - - - -
+ - common/ -
- +
+ common/ +
+ +
- - + + + + + + + - - - - - - - -
+ - thirdparty/publicsuffix/ -
- +
+ thirdparty/publicsuffix/ +
+ +
@@ -506,730 +541,794 @@ exports[`render correctly 1`] = ` className="euiSideNavItem euiSideNavItem--trunk" >
- - + + + + + + + - - - - - - - -
+ - guava-bom/ -
- +
+ guava-bom/ +
+ +
- - + + + + + + + - - - - - - - -
+ - guava-gwt/ -
- +
+ guava-gwt/ +
+ +
- - + + + + + + + - - - - - - - -
+ - guava-testlib/ -
- +
+ guava-testlib/ +
+ +
- - + + + + + + + - - - - - - - -
+ - guava-tests/ -
- +
+ guava-tests/ +
+ +
- - + + + + + + + - - - - - - - -
+ - refactorings/ -
- +
+ refactorings/ +
+ +
- - + + + + + + + - - - - - - - -
+ - util/ -
- +
+ util/ +
+ +
- - - + + + + - - - - -
+ - .gitattributes -
- +
+ .gitattributes +
+ +
- - - + + + + - - - - -
+ - .gitignore -
- +
+ .gitignore +
+ +
- - - + + + + - - - - -
+ - .travis.yml -
- +
+ .travis.yml +
+ +
- - - + + + + - - - - -
+ - CONTRIBUTING.md -
- +
+ CONTRIBUTING.md +
+ +
- - - + + + + - - - - -
+ - CONTRIBUTORS -
- +
+ CONTRIBUTORS +
+ +
- - - + + + + - - - - -
+ - COPYING -
- +
+ COPYING +
+ +
- - - + + + + - - - - -
+ - README.md -
- +
+ README.md +
+ +
- - - + + + + - - - - -
+ - cycle_whitelist.txt -
- +
+ cycle_whitelist.txt +
+ +
- - - + + + + - - - - -
+ - javadoc-stylesheet.css -
- +
+ javadoc-stylesheet.css +
+ +
- - - + + + + - - - - -
+ - pom.xml -
- +
+ pom.xml +
+ +
diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.scss b/x-pack/plugins/code/public/components/file_tree/file_tree.scss index a28b2294c5651..30b9368d02353 100644 --- a/x-pack/plugins/code/public/components/file_tree/file_tree.scss +++ b/x-pack/plugins/code/public/components/file_tree/file_tree.scss @@ -3,17 +3,21 @@ cursor: pointer; white-space: nowrap; margin-left: $euiSizeS; + z-index: 2; } .code-file-node { @extend %code-file-node; } -.code-active-file-node { - @extend %code-file-node; - background: $euiColorLightShade;; +.code-file-tree-file { + margin-left: calc(28rem/16); } -.code-file-tree-file { - margin-left: $euiSizeL; +.code-full-width-file-node { + position: absolute; + width: 100%; + background: $euiColorLightShade; + left: 0; + height: 29px; } diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx index 91d4897284e1b..018fd2d83e745 100644 --- a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx +++ b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx @@ -22,6 +22,11 @@ const DirectoryNode = styled.span` vertical-align: middle; `; +const Container = styled.div` + display: flex; + flex-direction: row; +`; + interface Props extends RouteComponentProps { node?: Tree; closeTreePath: (paths: string) => void; @@ -79,8 +84,11 @@ export class CodeFileTree extends React.Component { }; public getItemRenderer = (node: Tree, forceOpen: boolean, flattenFrom?: Tree) => () => { - const className = - this.props.match.params.path === node.path ? 'code-active-file-node' : 'code-file-node'; + const className = 'code-file-node'; + let bg = null; + if (this.props.match.params.path === node.path) { + bg =
; + } const onClick = () => { const path = flattenFrom ? flattenFrom.path! : node.path!; this.toggleTree(path, node.type === FileTreeItemType.Directory); @@ -89,75 +97,92 @@ export class CodeFileTree extends React.Component { switch (node.type) { case FileTreeItemType.Directory: { return ( -
- {forceOpen ? ( - - ) : ( - - )} - - - - {`${node.name}/`} - - -
+ +
+ {forceOpen ? ( + + ) : ( + + )} + + + + {`${node.name}/`} + + +
+ {bg} + ); } case FileTreeItemType.Submodule: { return ( -
- - - - {node.name} - - -
+ +
+ + + + {node.name} + + +
+ {bg} + ); } case FileTreeItemType.Link: { return ( -
- - - - {node.name} - - -
+ +
+ + + + {node.name} + + +
+ {bg} + ); } case FileTreeItemType.File: { return ( -
- - - - {node.name} - - -
+ +
+ + + + {node.name} + + +
+ {bg} + ); } } diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss index 84f87cfa4944f..7f9109474e470 100644 --- a/x-pack/plugins/code/public/components/main/main.scss +++ b/x-pack/plugins/code/public/components/main/main.scss @@ -26,35 +26,34 @@ } .code-navigation__sidebar { - width: calc(256rem / 14); + width: 16rem; border-right: $euiBorderThin; display: flex; flex-shrink: 0; flex-grow: 0; flex-direction: column; - & > div { - height: 100%; - display: flex; - flex-direction: column; - & > div:first-child { - flex-shrink: 0; - flex-grow: 0; - } - & > div:not(:first-child) { - display: flex; - flex-direction: column; - flex-grow: 1; - flex-shrink: 1; - } + height: 100%; + div[role="tablist"] { + flex-grow: 0; + flex-shrink: 0; + } + div[role="tabpanel"] { + width: 100%; + flex-grow: 1; + flex-shrink: 1; + overflow: auto; } } .codeFileTree--container { flex-grow: 1; flex-shrink: 1; - overflow: auto; padding: $euiSizeM; background-color: $euiColorLightestShade; + position: relative; + display: inline-block; + min-width: 100%; + height: 100%; } .codeFileTree--icon { diff --git a/x-pack/plugins/code/public/components/main/side_tabs.tsx b/x-pack/plugins/code/public/components/main/side_tabs.tsx index dae3a1f0ce532..ff4c7b23e762f 100644 --- a/x-pack/plugins/code/public/components/main/side_tabs.tsx +++ b/x-pack/plugins/code/public/components/main/side_tabs.tsx @@ -63,8 +63,9 @@ class CodeSideTabs extends React.PureComponent +
t.id === this.sideTab)} onTabClick={tab => this.switchTab(tab.id as Tabs)} diff --git a/x-pack/plugins/code/public/components/symbol_tree/__test__/__snapshots__/symbol_tree.test.tsx.snap b/x-pack/plugins/code/public/components/symbol_tree/__test__/__snapshots__/symbol_tree.test.tsx.snap index 2d6967b10d61c..19ef5b9a3efca 100644 --- a/x-pack/plugins/code/public/components/symbol_tree/__test__/__snapshots__/symbol_tree.test.tsx.snap +++ b/x-pack/plugins/code/public/components/symbol_tree/__test__/__snapshots__/symbol_tree.test.tsx.snap @@ -1,51 +1,66 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`render symbol tree correctly 1`] = ` - + +
`; diff --git a/x-pack/plugins/code/public/components/symbol_tree/code_symbol_tree.tsx b/x-pack/plugins/code/public/components/symbol_tree/code_symbol_tree.tsx index aa536668fef95..7e28bdf8dcc93 100644 --- a/x-pack/plugins/code/public/components/symbol_tree/code_symbol_tree.tsx +++ b/x-pack/plugins/code/public/components/symbol_tree/code_symbol_tree.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiFlexGroup, EuiFlexItem, EuiSideNav, EuiText, EuiToken } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSideNav, EuiText, EuiToken } from '@elastic/eui'; import theme from '@elastic/eui/dist/eui_theme_light.json'; import React from 'react'; import { Link } from 'react-router-dom'; @@ -13,16 +13,21 @@ import { Location, SymbolKind } from 'vscode-languageserver-types/lib/umd/main'; import { RepositoryUtils } from '../../../common/repository_utils'; import { EuiSideNavItem } from '../../common/types'; import { SymbolWithMembers } from '../../reducers/symbol'; -import { FolderClosedTriangle, FolderOpenTriangle } from '../shared'; -const Root = styled(EuiSideNav)` +const Root = styled.div` padding: ${theme.paddingSizes.l} ${theme.paddingSizes.m}; - overflow: auto; + position: relative; + display: inline-block; + min-width: 100%; + height: 100%; `; -const Symbol = styled(EuiFlexGroup)` - margin-bottom: ${theme.euiSizeS}; +const Symbol = styled.div<{ isContainer: boolean }>` cursor: pointer; + display: flex; + align-items: center; + height: 1.5rem; + margin-left: ${props => (props.isContainer ? '0.75rem' : '2rem')}; `; const Token = styled(EuiToken)` @@ -44,7 +49,13 @@ const sortSymbol = (a: SymbolWithMembers, b: SymbolWithMembers) => { return lineDiff; } }; -export class CodeSymbolTree extends React.PureComponent { + +export class CodeSymbolTree extends React.PureComponent { + public state = { activePath: undefined }; + + public getClickHandler = (path: string) => () => { + this.setState({ activePath: path }); + }; public getStructureTreeItemRenderer = ( location: Location, name: string, @@ -58,27 +69,50 @@ export class CodeSymbolTree extends React.PureComponent { // @ts-ignore tokenType = `token${Object.keys(SymbolKind).find(k => SymbolKind[k] === kind)}`; } + let bg = null; + if (this.state.activePath === path) { + bg =
; + } return ( - - {isContainer && - (forceOpen ? ( - this.props.closeSymbolPath(path)} /> - ) : ( - this.props.openSymbolPath(path)} /> - ))} - - - - {/* + + + {isContainer && + (forceOpen ? ( + this.props.closeSymbolPath(path)} + /> + ) : ( + this.props.openSymbolPath(path)} + /> + ))} + + + + {/* // @ts-ignore */} - - - {name} - - - - - + + + {name} + + + + + + {bg} + ); }; @@ -106,7 +140,8 @@ export class CodeSymbolTree extends React.PureComponent { s.name, s.kind, false, - false + false, + s.path ); } return item; @@ -117,6 +152,10 @@ export class CodeSymbolTree extends React.PureComponent { const items = [ { name: '', id: '', items: this.symbolsToSideNavItems(this.props.structureTree) }, ]; - return ; + return ( + + + + ); } } diff --git a/x-pack/plugins/code/public/components/symbol_tree/symbol_tree.scss b/x-pack/plugins/code/public/components/symbol_tree/symbol_tree.scss new file mode 100644 index 0000000000000..1c135b07d4974 --- /dev/null +++ b/x-pack/plugins/code/public/components/symbol_tree/symbol_tree.scss @@ -0,0 +1,20 @@ +.code-structure-node { + padding: $euiSizeXS; +} + +.code-full-width-node { + position: absolute; + width: 100%; + background: $euiColorLightShade; + left: 0; + height: 1.5rem; + z-index: -1; +} + +.euiSideNavItem__items { + position: static; +} + +.codeStructureTree--icon { + margin: auto 0.25rem; +} diff --git a/x-pack/plugins/code/public/index.scss b/x-pack/plugins/code/public/index.scss index 3474301d5b85d..44a5010ec5773 100644 --- a/x-pack/plugins/code/public/index.scss +++ b/x-pack/plugins/code/public/index.scss @@ -10,4 +10,6 @@ @import "./components/diff_page/diff.scss"; @import "./components/main/main.scss"; -@import "./components/admin_page/sidebar.scss"; \ No newline at end of file +@import "./components/admin_page/sidebar.scss"; + +@import "./components/symbol_tree/symbol_tree.scss"; \ No newline at end of file