Skip to content

Commit 71ab292

Browse files
CsCherrYYCsCherrYY
committed
show button when hover
Signed-off-by: Shi Chen <chenshi@microsoft.com>
1 parent a340e9a commit 71ab292

2 files changed

Lines changed: 102 additions & 51 deletions

File tree

‎webview-ui/src/App.css‎

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,34 @@ main>* {
2525
min-width: none;
2626
}
2727

28-
.modifier {
28+
.header-left {
2929
flex-wrap: nowrap;
3030
flex-direction: column;
3131
display: flex;
32-
margin: 1rem 1rem 1rem 0;
33-
flex: 0 0 25%;
34-
max-width: 25%;
32+
padding: 1rem 1rem 1rem 0;
33+
flex: 0 0 30%;
34+
max-width: 30%;
35+
box-sizing: border-box;
3536
}
3637

37-
.type-name {
38+
.header {
3839
flex-wrap: nowrap;
3940
flex-direction: column;
4041
display: flex;
41-
margin: 1rem;
42-
flex: 0 0 25%;
43-
max-width: 25%;
42+
padding: 1rem;
43+
flex: 0 0 30%;
44+
max-width: 30%;
45+
box-sizing: border-box;
46+
}
47+
48+
.header-right {
49+
flex-wrap: nowrap;
50+
flex-direction: column;
51+
display: flex;
52+
padding: 1rem 0 1rem 1rem;
53+
flex: 0 0 30%;
54+
max-width: 30%;
55+
box-sizing: border-box;
4456
}
4557

4658
.vsc-button-left {
@@ -49,32 +61,47 @@ main>* {
4961
}
5062

5163
.bottom-buttons {
64+
margin: 0;
5265
display: block;
53-
width: 85%;
66+
width: 90%;
5467
}
5568

5669
.preview {
57-
width: 85%;
70+
width: 90%;
5871
}
5972

60-
.parametersPanel {
61-
width: 85%;
73+
.parameters-panel {
74+
margin: 0;
75+
width: 90%;
6276
}
6377

64-
.parametersView {
65-
padding-left: 0;
78+
.parameters-view {
79+
padding: 0;
6680
flex-direction: column;
6781
width: 100%;
6882
}
6983

70-
.parametersGrid {
84+
.parameters-grid {
7185
width: 100%;
7286
}
7387

74-
.parameterCell {
88+
.parameter-cell {
7589
padding-left: 0;
7690
}
7791

92+
.parameter-cell-button {
93+
display: flex;
94+
justify-content: right;
95+
}
96+
7897
.table-buttons {
7998
display: inline-flex;
8099
}
100+
101+
.table-buttons-hide {
102+
visibility: hidden;
103+
}
104+
105+
.delegate {
106+
margin: 0;
107+
}

‎webview-ui/src/App.tsx‎

Lines changed: 59 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React from "react";
44
import { vscode } from "./utilities/vscode";
55

66
interface State {
7+
focusRow: number;
78
methodIdentifier: string | undefined;
89
isDelegate: boolean;
910
methodName: string | undefined;
@@ -30,6 +31,7 @@ export class App extends React.Component<{}, State> {
3031
constructor(props: any) {
3132
super(props);
3233
this.state = {
34+
focusRow: -1,
3335
methodIdentifier: undefined,
3436
isDelegate: false,
3537
methodName: undefined,
@@ -150,8 +152,8 @@ export class App extends React.Component<{}, State> {
150152
return `${this.state.accessType} ${this.state.returnType} ${this.state.methodName}(${parameters})${exceptions}`;
151153
}
152154

153-
onClick = (e: any) => {
154-
const id = e.target.id as string;
155+
onClick = (event: any) => {
156+
const id = event.target.id as string;
155157
if (!id) {
156158
return;
157159
}
@@ -243,7 +245,7 @@ export class App extends React.Component<{}, State> {
243245
this.forceUpdate();
244246
} else if (id === "delegate") {
245247
this.setState({
246-
isDelegate: e.target.checked
248+
isDelegate: event.target.checked
247249
})
248250
this.forceUpdate();
249251
}
@@ -265,6 +267,28 @@ export class App extends React.Component<{}, State> {
265267
}
266268
}
267269

270+
onMouseEnter = (event: any) => {
271+
const id = event.target.id as string;
272+
if (id.includes("Header")) {
273+
this.setState({
274+
focusRow: -1
275+
});
276+
} else if (id) {
277+
const selectedRowNumber: number | undefined = this.getSelectedRowNumber(id);
278+
if (selectedRowNumber !== undefined) {
279+
this.setState({
280+
focusRow: selectedRowNumber
281+
});
282+
}
283+
}
284+
}
285+
286+
onMouseLeave = (event: any) => {
287+
this.setState({
288+
focusRow: -1
289+
});
290+
}
291+
268292
componentDidMount(): void {
269293
window.addEventListener("message", this.handleMessage);
270294
vscode.postMessage({
@@ -278,7 +302,7 @@ export class App extends React.Component<{}, State> {
278302
<h1>Change Method Signature</h1>
279303
<div className="section">
280304
<div className="flex section-columns">
281-
<div className="modifier">
305+
<div className="header-left">
282306
<label className="vscode-text-field" htmlFor="access-modifier">Access modifier:</label>
283307
<VSCodeDropdown className="vsc-dropdown" id={"access-modifier"} onChange={this.onChange} initialValue={this.state.accessType}>
284308
<VSCodeOption id={"public"} key={"public"}>public</VSCodeOption>
@@ -287,43 +311,43 @@ export class App extends React.Component<{}, State> {
287311
<VSCodeOption id={"private"} key={"private"}>private</VSCodeOption>
288312
</VSCodeDropdown>
289313
</div>
290-
<div className="flex-grow type-name">
314+
<div className="flex-grow header">
291315
<VSCodeTextField readOnly={false} value={this.state.returnType} id={"returnType"} onChange={this.onChange}>Return type:</VSCodeTextField>
292316
</div>
293-
<div className="flex-grow type-name">
317+
<div className="flex-grow header-right">
294318
<VSCodeTextField readOnly={false} value={this.state.methodName} id={"methodName"} onChange={this.onChange}>Method name:</VSCodeTextField>
295319
</div>
296320
</div>
297321
</div>
298-
<VSCodePanels className={"parametersPanel"}>
322+
<VSCodePanels className={"parameters-panel"}>
299323
<VSCodePanelTab id="parametersTab">Parameters</VSCodePanelTab>
300324
<VSCodePanelTab id="exceptionsTab">Exceptions</VSCodePanelTab>
301-
<VSCodePanelView id="parametersView" className={"parametersView"}>
302-
<VSCodeDataGrid className={"parametersGrid"}>
303-
<VSCodeDataGridRow>
304-
<VSCodeDataGridCell className={"parameterCell"} cellType={"columnheader"} gridColumn={1}>Type</VSCodeDataGridCell>
305-
<VSCodeDataGridCell className={"parameterCell"} cellType={"columnheader"} gridColumn={2}>Name</VSCodeDataGridCell>
306-
<VSCodeDataGridCell className={"parameterCell"} cellType={"columnheader"} gridColumn={3}>Default value</VSCodeDataGridCell>
307-
<VSCodeDataGridCell className={"parameterCell"} cellType={"columnheader"} gridColumn={4}></VSCodeDataGridCell>
325+
<VSCodePanelView id="parametersView" className={"parameters-view"}>
326+
<VSCodeDataGrid className={"parameters-grid"} onMouseLeave={this.onMouseLeave}>
327+
<VSCodeDataGridRow onMouseEnter={this.onMouseEnter} id={"parameterHeader"}>
328+
<VSCodeDataGridCell className={"parameter-cell"} cellType={"columnheader"} id={"parameterHeaderType"} gridColumn={1}>Type</VSCodeDataGridCell>
329+
<VSCodeDataGridCell className={"parameter-cell"} cellType={"columnheader"} id={"parameterHeaderName"} gridColumn={2}>Name</VSCodeDataGridCell>
330+
<VSCodeDataGridCell className={"parameter-cell"} cellType={"columnheader"} id={"parameterHeaderDefault"} gridColumn={3}>Default value</VSCodeDataGridCell>
331+
<VSCodeDataGridCell className={"parameter-cell"} cellType={"columnheader"} id={"parameterHeaderButton"} gridColumn={4}></VSCodeDataGridCell>
308332
</VSCodeDataGridRow>
309333
{
310334
(() => {
311335
const options = [];
312336
for (let i = 0; i < this.state.parameters.length; i++) {
313-
options.push(<VSCodeDataGridRow>
314-
<VSCodeDataGridCell className={"parameterCell"} id={"parameterType-" + i} contentEditable={true} suppressContentEditableWarning={true} gridColumn={1} onBlur={this.onChange}>{this.state.parameters[i].type}</VSCodeDataGridCell>
315-
<VSCodeDataGridCell className={"parameterCell"} id={"parameterName-" + i} contentEditable={true} suppressContentEditableWarning={true} gridColumn={2} onBlur={this.onChange}>{this.state.parameters[i].name}</VSCodeDataGridCell>
316-
<VSCodeDataGridCell className={"parameterCell"} id={"parameterDefault-" + i} contentEditable={this.state.parameters[i].originalIndex === -1} suppressContentEditableWarning={true} gridColumn={3} onBlur={this.onChange}>{this.state.parameters[i].originalIndex === -1 ? this.state.parameters[i].defaultValue : "-"}</VSCodeDataGridCell>
317-
<VSCodeDataGridCell className={"parameterCell"} gridColumn={4}>
337+
options.push(<VSCodeDataGridRow onMouseEnter={this.onMouseEnter} id={`parameterRow-${i}`}>
338+
<VSCodeDataGridCell className={"parameter-cell"} id={"parameterType-" + i} contentEditable={true} suppressContentEditableWarning={true} gridColumn={1} onBlur={this.onChange}>{this.state.parameters[i].type}</VSCodeDataGridCell>
339+
<VSCodeDataGridCell className={"parameter-cell"} id={"parameterName-" + i} contentEditable={true} suppressContentEditableWarning={true} gridColumn={2} onBlur={this.onChange}>{this.state.parameters[i].name}</VSCodeDataGridCell>
340+
<VSCodeDataGridCell className={"parameter-cell"} id={"parameterDefault-" + i} contentEditable={this.state.parameters[i].originalIndex === -1} suppressContentEditableWarning={true} gridColumn={3} onBlur={this.onChange}>{this.state.parameters[i].originalIndex === -1 ? this.state.parameters[i].defaultValue : "-"}</VSCodeDataGridCell>
341+
<VSCodeDataGridCell className={"parameter-cell-button"} id={"parameterButton-" + i} gridColumn={4}>
318342
<div className="table-buttons">
319-
<VSCodeButton appearance="icon">
320-
<span className="codicon codicon-remove" title={"Remove"} onClick={this.onClick} id={`removeParameter-${i}`}></span>
343+
<VSCodeButton appearance="icon" className={this.state.focusRow === i ? "" : "table-buttons-hide"} disabled={i === 0}>
344+
<span className={"codicon codicon-arrow-up"} title={"Up"} onClick={this.onClick} id={`upParameter-${i}`}></span>
321345
</VSCodeButton>
322-
<VSCodeButton appearance="icon" disabled={i === 0}>
323-
<span className="codicon codicon-arrow-up" title={"Up"} onClick={this.onClick} id={`upParameter-${i}`}></span>
346+
<VSCodeButton appearance="icon" className={this.state.focusRow === i ? "" : "table-buttons-hide"} disabled={i === this.state.parameters.length - 1}>
347+
<span className={"codicon codicon-arrow-down"} title={"Down"} onClick={this.onClick} id={`downParameter-${i}`}></span>
324348
</VSCodeButton>
325-
<VSCodeButton appearance="icon" disabled={i === this.state.parameters.length - 1}>
326-
<span className="codicon codicon-arrow-down" title={"Down"} onClick={this.onClick} id={`downParameter-${i}`}></span>
349+
<VSCodeButton appearance="icon" className={this.state.focusRow === i ? "" : "table-buttons-hide"}>
350+
<span className={"codicon codicon-remove"} title={"Remove"} onClick={this.onClick} id={`removeParameter-${i}`}></span>
327351
</VSCodeButton>
328352
</div>
329353
</VSCodeDataGridCell>
@@ -338,21 +362,21 @@ export class App extends React.Component<{}, State> {
338362
<VSCodeButton className={"vsc-button-left"} appearance="primary" onClick={this.onClick} id={"addParameter"}>Add</VSCodeButton>
339363
</div>
340364
</VSCodePanelView>
341-
<VSCodePanelView id="exceptionsView" className={"parametersView"}>
342-
<VSCodeDataGrid className={"parametersGrid"}>
343-
<VSCodeDataGridRow>
344-
<VSCodeDataGridCell className={"parameterCell"} cellType={"columnheader"} gridColumn={1}>Type</VSCodeDataGridCell>
345-
<VSCodeDataGridCell className={"parameterCell"} cellType={"columnheader"} gridColumn={2}></VSCodeDataGridCell>
365+
<VSCodePanelView id="exceptionsView" className={"parameters-view"}>
366+
<VSCodeDataGrid className={"parameters-grid"} onMouseLeave={this.onMouseLeave}>
367+
<VSCodeDataGridRow onMouseEnter={this.onMouseEnter} id={`exceptionHeader`}>
368+
<VSCodeDataGridCell className={"parameter-cell"} cellType={"columnheader"} id={"exceptionHeaderType"}gridColumn={1}>Type</VSCodeDataGridCell>
369+
<VSCodeDataGridCell className={"parameter-cell"} cellType={"columnheader"} id={"exceptionHeaderButton"} gridColumn={2}></VSCodeDataGridCell>
346370
</VSCodeDataGridRow>
347371
{
348372
(() => {
349373
const options = [];
350374
for (let i = 0; i < this.state.exceptions.length; i++) {
351-
options.push(<VSCodeDataGridRow>
352-
<VSCodeDataGridCell className={"parameterCell"} id={"exceptionType-" + i} gridColumn={1} contentEditable={true} suppressContentEditableWarning={true} onBlur={this.onChange}>{this.state.exceptions[i].type}</VSCodeDataGridCell>
353-
<VSCodeDataGridCell className={"parameterCell"} gridColumn={4} onInput={this.onChange}>
375+
options.push(<VSCodeDataGridRow onMouseEnter={this.onMouseEnter} id={`exceptionRow-${i}`}>
376+
<VSCodeDataGridCell className={"parameter-cell"} id={"exceptionType-" + i} gridColumn={1} contentEditable={true} suppressContentEditableWarning={true} onBlur={this.onChange}>{this.state.exceptions[i].type}</VSCodeDataGridCell>
377+
<VSCodeDataGridCell className={"parameter-cell-button"} id={"exceptionButton-" + i} gridColumn={4} onInput={this.onChange}>
354378
<div className="table-buttons">
355-
<VSCodeButton appearance="icon">
379+
<VSCodeButton appearance="icon" className={this.state.focusRow === i ? "" : "table-buttons-hide"}>
356380
<span className="codicon codicon-remove" onClick={this.onClick} id={`removeException-${i}`} title={"Remove"}></span>
357381
</VSCodeButton>
358382
</div>
@@ -370,7 +394,7 @@ export class App extends React.Component<{}, State> {
370394
</VSCodePanelView>
371395
</VSCodePanels>
372396
<VSCodeTextArea className={"preview"} value={this.getPreview()} readOnly={true}>Method signature preview:</VSCodeTextArea>
373-
<VSCodeCheckbox id="delegate" onClick={this.onClick}>Keep original method as delegate to changed method</VSCodeCheckbox>
397+
<VSCodeCheckbox id="delegate" className={"delegate"} onClick={this.onClick}>Keep original method as delegate to changed method</VSCodeCheckbox>
374398
<div className={"bottom-buttons"}>
375399
<VSCodeButton className={"vsc-button-left"} appearance="primary" onClick={this.onClick} id={"refactor"}>Preview and Refactor</VSCodeButton>
376400
</div>

0 commit comments

Comments
 (0)