fix(code/frontend): highlight structure node (#32034)

elastic · Mar 5, 2019 · b2af3dc · b2af3dc
1 parent bb94f4a
commit b2af3dc
Show file tree

Hide file tree

Showing 10 changed files with 1,503 additions and 1,252 deletions.
diff --git 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
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
@@ -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
@@ -22,6 +22,11 @@ const DirectoryNode = styled.span`
   vertical-align: middle;
 `;
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
 interface Props extends RouteComponentProps<MainRouteParams> {
   node?: Tree;
   closeTreePath: (paths: string) => void;
@@ -79,8 +84,11 @@ export class CodeFileTree extends React.Component<Props> {
   };
 
   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 = <div className="code-full-width-file-node" />;
+    }
     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<Props> {
     switch (node.type) {
       case FileTreeItemType.Directory: {
         return (
-          <div
-            data-test-subj={`codeFileTreeNode-Directory-${node.path}`}
-            className={className}
-            role="button"
-            onClick={onClick}
-          >
-            {forceOpen ? (
-              <EuiIcon type="arrowDown" size="s" color="subdued" className="codeFileTree--icon" />
-            ) : (
-              <EuiIcon type="arrowRight" size="s" color="subdued" className="codeFileTree--icon" />
-            )}
-            <EuiIcon type={forceOpen ? 'folderOpen' : 'folderClosed'} color="subdued" />
-            <DirectoryNode>
-              <EuiText size="s" grow={false} className="eui-displayInlineBlock">
-                {`${node.name}/`}
-              </EuiText>
-            </DirectoryNode>
-          </div>
+          <Container>
+            <div
+              data-test-subj={`codeFileTreeNode-Directory-${node.path}`}
+              className={className}
+              role="button"
+              onClick={onClick}
+            >
+              {forceOpen ? (
+                <EuiIcon type="arrowDown" size="s" color="subdued" className="codeFileTree--icon" />
+              ) : (
+                <EuiIcon
+                  type="arrowRight"
+                  size="s"
+                  color="subdued"
+                  className="codeFileTree--icon"
+                />
+              )}
+              <EuiIcon type={forceOpen ? 'folderOpen' : 'folderClosed'} color="subdued" />
+              <DirectoryNode>
+                <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                  {`${node.name}/`}
+                </EuiText>
+              </DirectoryNode>
+            </div>
+            {bg}
+          </Container>
         );
       }
       case FileTreeItemType.Submodule: {
         return (
-          <div
-            data-test-subj={`codeFileTreeNode-Submodule-${node.path}`}
-            onClick={onClick}
-            className={classes(className, 'code-file-tree-file')}
-            role="button"
-          >
-            <EuiIcon type="submodule" color="subdued" />
-            <DirectoryNode>
-              <EuiText size="s" grow={false} className="eui-displayInlineBlock">
-                {node.name}
-              </EuiText>
-            </DirectoryNode>
-          </div>
+          <Container>
+            <div
+              data-test-subj={`codeFileTreeNode-Submodule-${node.path}`}
+              onClick={onClick}
+              className={classes(className, 'code-file-tree-file')}
+              role="button"
+            >
+              <EuiIcon type="submodule" color="subdued" />
+              <DirectoryNode>
+                <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                  {node.name}
+                </EuiText>
+              </DirectoryNode>
+            </div>
+            {bg}
+          </Container>
         );
       }
       case FileTreeItemType.Link: {
         return (
-          <div
-            data-test-subj={`codeFileTreeNode-Link-${node.path}`}
-            onClick={onClick}
-            className={classes(className, 'code-file-tree-file')}
-            role="button"
-          >
-            <EuiIcon type="symlink" color="subdued" />
-            <DirectoryNode>
-              <EuiText size="s" grow={false} className="eui-displayInlineBlock">
-                {node.name}
-              </EuiText>
-            </DirectoryNode>
-          </div>
+          <Container>
+            <div
+              data-test-subj={`codeFileTreeNode-Link-${node.path}`}
+              onClick={onClick}
+              className={classes(className, 'code-file-tree-file')}
+              role="button"
+            >
+              <EuiIcon type="symlink" color="subdued" />
+              <DirectoryNode>
+                <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                  {node.name}
+                </EuiText>
+              </DirectoryNode>
+            </div>
+            {bg}
+          </Container>
         );
       }
       case FileTreeItemType.File: {
         return (
-          <div
-            data-test-subj={`codeFileTreeNode-File-${node.path}`}
-            onClick={onClick}
-            className={classes(className, 'code-file-tree-file')}
-            role="button"
-          >
-            <EuiIcon type="document" color="subdued" />
-            <DirectoryNode>
-              <EuiText size="s" grow={false} className="eui-displayInlineBlock">
-                {node.name}
-              </EuiText>
-            </DirectoryNode>
-          </div>
+          <Container>
+            <div
+              data-test-subj={`codeFileTreeNode-File-${node.path}`}
+              onClick={onClick}
+              className={classes(className, 'code-file-tree-file')}
+              role="button"
+            >
+              <EuiIcon type="document" color="subdued" />
+              <DirectoryNode>
+                <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                  {node.name}
+                </EuiText>
+              </DirectoryNode>
+            </div>
+            {bg}
+          </Container>
         );
       }
     }

diff --git 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
@@ -63,8 +63,9 @@ class CodeSideTabs extends React.PureComponent<RouteComponentProps<MainRoutePara
 
   public render() {
     return (
-      <div className="code-navigation__sidebar">
+      <div>
         <EuiTabbedContent
+          className="code-navigation__sidebar"
           tabs={this.tabs}
           initialSelectedTab={this.tabs.find(t => t.id === this.sideTab)}
           onTabClick={tab => this.switchTab(tab.id as Tabs)}