Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5c31c93

Browse files
author
Akos Kitta
committed
fix: relaxed hover service request when scrolling
 - do not render footer when scrolling - fix anchor word wrapping for long long links in the markdown - underline the link and change the cursor to pointer on hover - consider status-bar height when calculating hover top Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
1 parent 0335590 commit 5c31c93

File tree

8 files changed

+59
-13
lines changed

8 files changed

+59
-13
lines changed

‎arduino-ide-extension/src/browser/style/hover-service.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
/* Adapted from https://github.com/microsoft/vscode/blob/7d9b1c37f8e5ae3772782ba3b09d827eb3fdd833/src/vs/workbench/services/hover/browser/hoverService.ts */
55

66
:root {
7-
--theia-hover-max-width: 200px;
7+
--theia-hover-max-width: 200px;/* customized */
88
}
99

1010
.theia-hover {
@@ -29,10 +29,13 @@
2929

3030
.theia-hover a {
3131
color: var(--theia-textLink-foreground);
32+
word-wrap: break-word; /* customized */
33+
cursor: pointer; /* customized */
3234
}
3335

3436
.theia-hover a:hover {
35-
color: var(--theia-textLink-active-foreground);
37+
/* color: var(--theia-textLink-active-foreground); */
38+
text-decoration: underline; /* customized */
3639
}
3740

3841
.theia-hover .hover-row .actions {

‎arduino-ide-extension/src/browser/style/list-widget.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,10 @@
158158
padding-top: 8px;
159159
}
160160

161+
.component-list-item .footer.scrolling {
162+
visibility: hidden;
163+
}
164+
161165
.component-list-item .footer > * {
162166
display: inline-block;
163167
}

‎arduino-ide-extension/src/browser/theia/core/hover-service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export class HoverService {
144144
const documentWidth = document.body.getBoundingClientRect().width;
145145
// document.body.getBoundingClientRect().height doesn't work as expected
146146
// scrollHeight will always be accurate here: https://stackoverflow.com/a/44077777
147-
const documentHeight = document.documentElement.scrollHeight;
147+
const documentHeight = document.documentElement.scrollHeight-22;// --theia-statusBar-height: 22px;
148148
position = HoverPosition.invertIfNecessary(
149149
position,
150150
targetDimensions,

‎arduino-ide-extension/src/browser/widgets/component-list/component-list-item.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export class ComponentListItem<
2424
item,
2525
selectedVersion,
2626
inProgress: this.state.inProgress,
27+
isScrolling: this.props.isScrolling,
2728
install: (item) => this.install(item),
2829
uninstall: (item) => this.uninstall(item),
2930
onVersionChange: (version) => this.onVersionChange(version),
@@ -88,6 +89,7 @@ export namespace ComponentListItem {
8889
selectedVersion: Installable.Version
8990
) => void;
9091
readonly itemRenderer: ListItemRenderer<T>;
92+
readonly isScrolling: boolean;
9193
}
9294

9395
export interface State {

‎arduino-ide-extension/src/browser/widgets/component-list/component-list.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,33 @@ import * as React from '@theia/core/shared/react';
22
import { Virtuoso } from '@theia/core/shared/react-virtuoso';
33
import { ArduinoComponent } from '../../../common/protocol/arduino-component';
44
import { Installable } from '../../../common/protocol/installable';
5+
import { HoverService } from '../../theia/core/hover-service';
56
import { ComponentListItem } from './component-list-item';
67
import { ListItemRenderer } from './list-item-renderer';
78

89
export class ComponentList<T extends ArduinoComponent> extends React.Component<
9-
ComponentList.Props<T>
10+
ComponentList.Props<T>,
11+
ComponentList.State
1012
> {
13+
constructor(props: Readonly<ComponentList.Props<T>>) {
14+
super(props);
15+
this.state = {
16+
isScrolling: false,
17+
};
18+
}
19+
1120
override render(): React.ReactNode {
1221
return (
1322
<Virtuoso
1423
data={this.props.items}
24+
isScrolling={(isScrolling) => {
25+
if (this.state.isScrolling !== isScrolling) {
26+
this.setState({ isScrolling });
27+
if (isScrolling) {
28+
this.props.hoverService.cancelHover();
29+
}
30+
}
31+
}}
1532
itemContent={(_: number, item: T) => (
1633
<ComponentListItem<T>
1734
key={this.props.itemLabel(item)}
@@ -21,6 +38,7 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
2138
uninstall={this.props.uninstall}
2239
edited={this.props.edited}
2340
onItemEdit={this.props.onItemEdit}
41+
isScrolling={this.state.isScrolling}
2442
/>
2543
)}
2644
/>
@@ -42,5 +60,9 @@ export namespace ComponentList {
4260
item: T,
4361
selectedVersion: Installable.Version
4462
) => void;
63+
readonly hoverService: HoverService;
64+
}
65+
export interface State {
66+
isScrolling: boolean;
4567
}
4668
}

‎arduino-ide-extension/src/browser/widgets/component-list/filterable-list-container.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { ListItemRenderer } from './list-item-renderer';
1515
import { ResponseServiceClient } from '../../../common/protocol';
1616
import { nls } from '@theia/core/lib/common';
1717
import { DisposableCollection } from '@theia/core/lib/common/disposable';
18+
import { HoverService } from '../../theia/core/hover-service';
1819

1920
export class FilterableListContainer<
2021
T extends ArduinoComponent,
@@ -93,6 +94,7 @@ export class FilterableListContainer<
9394
uninstall={this.uninstall.bind(this)}
9495
edited={this.state.edited}
9596
onItemEdit={this.onItemEdit.bind(this)}
97+
hoverService={this.props.hoverService}
9698
/>
9799
);
98100
}
@@ -193,6 +195,7 @@ export namespace FilterableListContainer {
193195
progressId: string;
194196
}) => Promise<void>;
195197
readonly commandService: CommandService;
198+
readonly hoverService: HoverService;
196199
}
197200

198201
export interface State<T, S extends Searchable.Options> {

‎arduino-ide-extension/src/browser/widgets/component-list/list-item-renderer.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ interface ListItemRendererParams<T extends ArduinoComponent> {
114114
readonly item: T;
115115
readonly selectedVersion: Installable.Version | undefined;
116116
readonly inProgress?: 'installing' | 'uninstalling' | undefined;
117+
readonly isScrolling: boolean;
117118
readonly install: (item: T) => Promise<void>;
118119
readonly uninstall: (item: T) => Promise<void>;
119120
readonly onVersionChange: (version: Installable.Version) => void;
@@ -156,23 +157,25 @@ export class ListItemRenderer<T extends ArduinoComponent> {
156157

157158
private readonly showHover = (
158159
event: React.MouseEvent<HTMLElement>,
159-
markdown: string
160+
params: ListItemRendererParams<T>
160161
) => {
161-
this.hoverService.requestHover({
162-
content: new MarkdownStringImpl(markdown),
163-
target: event.currentTarget,
164-
position: 'right',
165-
});
162+
if (!params.isScrolling) {
163+
const markdown = this.markdown(params);
164+
this.hoverService.requestHover({
165+
content: new MarkdownStringImpl(markdown),
166+
target: event.currentTarget,
167+
position: 'right',
168+
});
169+
}
166170
};
167-
168171
renderItem(params: ListItemRendererParams<T>): React.ReactNode {
169172
const action = this.action(params);
170173
return (
171174
<>
172175
<Separator />
173176
<div
174177
className="component-list-item noselect"
175-
onMouseEnter={(event) => this.showHover(event, this.markdown(params))}
178+
onMouseOver={(event) => this.showHover(event, params)}
176179
>
177180
<Header
178181
params={params}
@@ -650,8 +653,13 @@ class Footer<T extends ArduinoComponent> extends React.Component<
650653
}>
651654
> {
652655
override render(): React.ReactNode {
656+
const { isScrolling } = this.props.params;
657+
const className = ['footer'];
658+
if (isScrolling) {
659+
className.push('scrolling');
660+
}
653661
return (
654-
<div className="footer">
662+
<div className={className.join(' ')}>
655663
<SelectVersion {...this.props} />
656664
<Button {...this.props} />
657665
</div>

‎arduino-ide-extension/src/browser/widgets/component-list/list-widget.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { FilterableListContainer } from './filterable-list-container';
2121
import { ListItemRenderer } from './list-item-renderer';
2222
import { NotificationCenter } from '../../notification-center';
2323
import { StatefulWidget } from '@theia/core/lib/browser';
24+
import { HoverService } from '../../theia/core/hover-service';
2425

2526
@injectable()
2627
export abstract class ListWidget<
@@ -38,6 +39,8 @@ export abstract class ListWidget<
3839
private readonly commandService: CommandService;
3940
@inject(ResponseServiceClient)
4041
private readonly responseService: ResponseServiceClient;
42+
@inject(HoverService)
43+
private readonly hoverService: HoverService;
4144

4245
/**
4346
* Do not touch or use it. It is for setting the focus on the `input` after the widget activation.
@@ -162,6 +165,7 @@ export abstract class ListWidget<
162165
commandService={this.commandService}
163166
responseService={this.responseService}
164167
onDidShow={this.onDidShowEmitter.event}
168+
hoverService={this.hoverService}
165169
/>
166170
);
167171
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /