Skip to content

Commit b2af3dc

Browse files
WangQianliangWangQianliang
authored
fix(code/frontend): highlight structure node (#32034)
1 parent bb94f4a commit b2af3dc

File tree

10 files changed

+1503
-1252
lines changed

10 files changed

+1503
-1252
lines changed

‎x-pack/plugins/code/public/common/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export interface MainRouteParams {
3535
org: string;
3636
revision: string;
3737
pathType: PathTypes;
38+
goto?: string;
3839
}
3940

4041
export interface EuiSideNavItem {

‎x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap‎

Lines changed: 999 additions & 900 deletions
Large diffs are not rendered by default.

‎x-pack/plugins/code/public/components/file_tree/file_tree.scss‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,21 @@
33
cursor: pointer;
44
white-space: nowrap;
55
margin-left: $euiSizeS;
6+
z-index: 2;
67
}
78

89
.code-file-node {
910
@extend %code-file-node;
1011
}
1112

12-
.code-active-file-node {
13-
@extend %code-file-node;
14-
background: $euiColorLightShade;;
13+
.code-file-tree-file {
14+
margin-left: calc(28rem/16);
1515
}
1616

17-
.code-file-tree-file {
18-
margin-left: $euiSizeL;
17+
.code-full-width-file-node {
18+
position: absolute;
19+
width: 100%;
20+
background: $euiColorLightShade;
21+
left: 0;
22+
height: 29px;
1923
}

‎x-pack/plugins/code/public/components/file_tree/file_tree.tsx‎

Lines changed: 84 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ const DirectoryNode = styled.span`
2222
vertical-align: middle;
2323
`;
2424

25+
const Container = styled.div`
26+
display: flex;
27+
flex-direction: row;
28+
`;
29+
2530
interface Props extends RouteComponentProps<MainRouteParams> {
2631
node?: Tree;
2732
closeTreePath: (paths: string) => void;
@@ -79,8 +84,11 @@ export class CodeFileTree extends React.Component<Props> {
7984
};
8085

8186
public getItemRenderer = (node: Tree, forceOpen: boolean, flattenFrom?: Tree) => () => {
82-
const className =
83-
this.props.match.params.path === node.path ? 'code-active-file-node' : 'code-file-node';
87+
const className = 'code-file-node';
88+
let bg = null;
89+
if (this.props.match.params.path === node.path) {
90+
bg = <div className="code-full-width-file-node" />;
91+
}
8492
const onClick = () => {
8593
const path = flattenFrom ? flattenFrom.path! : node.path!;
8694
this.toggleTree(path, node.type === FileTreeItemType.Directory);
@@ -89,75 +97,92 @@ export class CodeFileTree extends React.Component<Props> {
8997
switch (node.type) {
9098
case FileTreeItemType.Directory: {
9199
return (
92-
<div
93-
data-test-subj={`codeFileTreeNode-Directory-${node.path}`}
94-
className={className}
95-
role="button"
96-
onClick={onClick}
97-
>
98-
{forceOpen ? (
99-
<EuiIcon type="arrowDown" size="s" color="subdued" className="codeFileTree--icon" />
100-
) : (
101-
<EuiIcon type="arrowRight" size="s" color="subdued" className="codeFileTree--icon" />
102-
)}
103-
<EuiIcon type={forceOpen ? 'folderOpen' : 'folderClosed'} color="subdued" />
104-
<DirectoryNode>
105-
<EuiText size="s" grow={false} className="eui-displayInlineBlock">
106-
{`${node.name}/`}
107-
</EuiText>
108-
</DirectoryNode>
109-
</div>
100+
<Container>
101+
<div
102+
data-test-subj={`codeFileTreeNode-Directory-${node.path}`}
103+
className={className}
104+
role="button"
105+
onClick={onClick}
106+
>
107+
{forceOpen ? (
108+
<EuiIcon type="arrowDown" size="s" color="subdued" className="codeFileTree--icon" />
109+
) : (
110+
<EuiIcon
111+
type="arrowRight"
112+
size="s"
113+
color="subdued"
114+
className="codeFileTree--icon"
115+
/>
116+
)}
117+
<EuiIcon type={forceOpen ? 'folderOpen' : 'folderClosed'} color="subdued" />
118+
<DirectoryNode>
119+
<EuiText size="s" grow={false} className="eui-displayInlineBlock">
120+
{`${node.name}/`}
121+
</EuiText>
122+
</DirectoryNode>
123+
</div>
124+
{bg}
125+
</Container>
110126
);
111127
}
112128
case FileTreeItemType.Submodule: {
113129
return (
114-
<div
115-
data-test-subj={`codeFileTreeNode-Submodule-${node.path}`}
116-
onClick={onClick}
117-
className={classes(className, 'code-file-tree-file')}
118-
role="button"
119-
>
120-
<EuiIcon type="submodule" color="subdued" />
121-
<DirectoryNode>
122-
<EuiText size="s" grow={false} className="eui-displayInlineBlock">
123-
{node.name}
124-
</EuiText>
125-
</DirectoryNode>
126-
</div>
130+
<Container>
131+
<div
132+
data-test-subj={`codeFileTreeNode-Submodule-${node.path}`}
133+
onClick={onClick}
134+
className={classes(className, 'code-file-tree-file')}
135+
role="button"
136+
>
137+
<EuiIcon type="submodule" color="subdued" />
138+
<DirectoryNode>
139+
<EuiText size="s" grow={false} className="eui-displayInlineBlock">
140+
{node.name}
141+
</EuiText>
142+
</DirectoryNode>
143+
</div>
144+
{bg}
145+
</Container>
127146
);
128147
}
129148
case FileTreeItemType.Link: {
130149
return (
131-
<div
132-
data-test-subj={`codeFileTreeNode-Link-${node.path}`}
133-
onClick={onClick}
134-
className={classes(className, 'code-file-tree-file')}
135-
role="button"
136-
>
137-
<EuiIcon type="symlink" color="subdued" />
138-
<DirectoryNode>
139-
<EuiText size="s" grow={false} className="eui-displayInlineBlock">
140-
{node.name}
141-
</EuiText>
142-
</DirectoryNode>
143-
</div>
150+
<Container>
151+
<div
152+
data-test-subj={`codeFileTreeNode-Link-${node.path}`}
153+
onClick={onClick}
154+
className={classes(className, 'code-file-tree-file')}
155+
role="button"
156+
>
157+
<EuiIcon type="symlink" color="subdued" />
158+
<DirectoryNode>
159+
<EuiText size="s" grow={false} className="eui-displayInlineBlock">
160+
{node.name}
161+
</EuiText>
162+
</DirectoryNode>
163+
</div>
164+
{bg}
165+
</Container>
144166
);
145167
}
146168
case FileTreeItemType.File: {
147169
return (
148-
<div
149-
data-test-subj={`codeFileTreeNode-File-${node.path}`}
150-
onClick={onClick}
151-
className={classes(className, 'code-file-tree-file')}
152-
role="button"
153-
>
154-
<EuiIcon type="document" color="subdued" />
155-
<DirectoryNode>
156-
<EuiText size="s" grow={false} className="eui-displayInlineBlock">
157-
{node.name}
158-
</EuiText>
159-
</DirectoryNode>
160-
</div>
170+
<Container>
171+
<div
172+
data-test-subj={`codeFileTreeNode-File-${node.path}`}
173+
onClick={onClick}
174+
className={classes(className, 'code-file-tree-file')}
175+
role="button"
176+
>
177+
<EuiIcon type="document" color="subdued" />
178+
<DirectoryNode>
179+
<EuiText size="s" grow={false} className="eui-displayInlineBlock">
180+
{node.name}
181+
</EuiText>
182+
</DirectoryNode>
183+
</div>
184+
{bg}
185+
</Container>
161186
);
162187
}
163188
}

‎x-pack/plugins/code/public/components/main/main.scss‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,35 +26,34 @@
2626
}
2727

2828
.code-navigation__sidebar {
29-
width: calc(256rem / 14);
29+
width: 16rem;
3030
border-right: $euiBorderThin;
3131
display: flex;
3232
flex-shrink: 0;
3333
flex-grow: 0;
3434
flex-direction: column;
35-
& > div {
36-
height: 100%;
37-
display: flex;
38-
flex-direction: column;
39-
& > div:first-child {
40-
flex-shrink: 0;
41-
flex-grow: 0;
42-
}
43-
& > div:not(:first-child) {
44-
display: flex;
45-
flex-direction: column;
46-
flex-grow: 1;
47-
flex-shrink: 1;
48-
}
35+
height: 100%;
36+
div[role="tablist"] {
37+
flex-grow: 0;
38+
flex-shrink: 0;
39+
}
40+
div[role="tabpanel"] {
41+
width: 100%;
42+
flex-grow: 1;
43+
flex-shrink: 1;
44+
overflow: auto;
4945
}
5046
}
5147

5248
.codeFileTree--container {
5349
flex-grow: 1;
5450
flex-shrink: 1;
55-
overflow: auto;
5651
padding: $euiSizeM;
5752
background-color: $euiColorLightestShade;
53+
position: relative;
54+
display: inline-block;
55+
min-width: 100%;
56+
height: 100%;
5857
}
5958

6059
.codeFileTree--icon {

‎x-pack/plugins/code/public/components/main/side_tabs.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,9 @@ class CodeSideTabs extends React.PureComponent<RouteComponentProps<MainRoutePara
6363

6464
public render() {
6565
return (
66-
<div className="code-navigation__sidebar">
66+
<div>
6767
<EuiTabbedContent
68+
className="code-navigation__sidebar"
6869
tabs={this.tabs}
6970
initialSelectedTab={this.tabs.find(t => t.id === this.sideTab)}
7071
onTabClick={tab => this.switchTab(tab.id as Tabs)}

0 commit comments

Comments
 (0)