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 de32bdd

Browse files
author
Alberto Iannaccone
authored
Fix dialogs UI scalability (#1311)
* make dialogs scroll when scaling up the UI * add unit of measure to settings step input * wrap settings dialog items when scaling up the UI * fix dialogs width when scaling up the UI * rework board config UI to make it scale up better * refactor ide updater dialog: move buttons outside the dialog content * refactor ide updater dialog: clean-up code and rename events * fix board config dialog title case and and remove double ellipsis
1 parent 79ea0fa commit de32bdd

20 files changed

+375
-298
lines changed

‎arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -453,7 +453,10 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
453453
bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
454454
bind(BoardsConfigDialog).toSelf().inSingletonScope();
455455
bind(BoardsConfigDialogProps).toConstantValue({
456-
title: nls.localize('arduino/common/selectBoard', 'Select Board'),
456+
title: nls.localize(
457+
'arduino/board/boardConfigDialogTitle',
458+
'Select Other Board and Port'
459+
),
457460
});
458461

459462
// Core service

‎arduino-ide-extension/src/browser/boards/boards-config-dialog.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
1+
import {
2+
injectable,
3+
inject,
4+
postConstruct,
5+
} from '@theia/core/shared/inversify';
26
import { Message } from '@theia/core/shared/@phosphor/messaging';
37
import { DialogProps, Widget, DialogError } from '@theia/core/lib/browser';
48
import { AbstractDialog } from '../theia/dialogs/dialogs';
@@ -28,7 +32,7 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
2832
@inject(BoardsConfigDialogProps)
2933
protected override readonly props: BoardsConfigDialogProps
3034
) {
31-
super(props);
35+
super({ ...props,maxWidth: 500});
3236

3337
this.contentNode.classList.add('select-board-dialog');
3438
this.contentNode.appendChild(this.createDescription());
@@ -65,14 +69,6 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
6569
const head = document.createElement('div');
6670
head.classList.add('head');
6771

68-
const title = document.createElement('div');
69-
title.textContent = nls.localize(
70-
'arduino/board/configDialogTitle',
71-
'Select Other Board & Port'
72-
);
73-
title.classList.add('title');
74-
head.appendChild(title);
75-
7672
const text = document.createElement('div');
7773
text.classList.add('text');
7874
head.appendChild(text);

‎arduino-ide-extension/src/browser/boards/boards-config.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -258,14 +258,14 @@ export class BoardsConfig extends React.Component<
258258

259259
override render(): React.ReactNode {
260260
return (
261-
<divclassName="body">
261+
<>
262262
{this.renderContainer('boards', this.renderBoards.bind(this))}
263263
{this.renderContainer(
264264
'ports',
265265
this.renderPorts.bind(this),
266266
this.renderPortsFooter.bind(this)
267267
)}
268-
</div>
268+
</>
269269
);
270270
}
271271

‎arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import * as React from '@theia/core/shared/react';
2-
import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
2+
import {
3+
inject,
4+
injectable,
5+
postConstruct,
6+
} from '@theia/core/shared/inversify';
37
import { DialogProps } from '@theia/core/lib/browser/dialogs';
48
import { AbstractDialog } from '../../theia/dialogs/dialogs';
59
import { Widget } from '@theia/core/shared/@phosphor/widgets';
@@ -153,6 +157,7 @@ export class UploadCertificateDialog extends AbstractDialog<void> {
153157
'Upload SSL Root Certificates'
154158
),
155159
});
160+
this.node.id = 'certificate-uploader-dialog-container';
156161
this.contentNode.classList.add('certificate-uploader-dialog');
157162
this.acceptButton = undefined;
158163
}

‎arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ export class UploadFirmwareDialog extends AbstractDialog<void> {
101101
protected override readonly props: UploadFirmwareDialogProps
102102
) {
103103
super({ title: UploadFirmware.Commands.OPEN.label || '' });
104+
this.node.id = 'firmware-uploader-dialog-container';
104105
this.contentNode.classList.add('firmware-uploader-dialog');
105106
this.acceptButton = undefined;
106107
}

‎arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx‎

Lines changed: 23 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { WindowService } from '@theia/core/lib/browser/window/window-service';
21
import { nls } from '@theia/core/lib/common';
32
import { shell } from 'electron';
43
import * as React from '@theia/core/shared/react';
@@ -7,36 +6,32 @@ import ReactMarkdown from 'react-markdown';
76
import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
87
import ProgressBar from '../../components/ProgressBar';
98

10-
export type IDEUpdaterComponentProps = {
11-
updateInfo: UpdateInfo;
12-
windowService: WindowService;
9+
export interface UpdateProgress {
10+
progressInfo?: ProgressInfo | undefined;
1311
downloadFinished?: boolean;
1412
downloadStarted?: boolean;
15-
progress?: ProgressInfo;
1613
error?: Error;
17-
onDownload: () => void;
18-
onClose: () => void;
19-
onSkipVersion: () => void;
20-
onCloseAndInstall: () => void;
21-
};
14+
}
15+
16+
export interface IDEUpdaterComponentProps {
17+
updateInfo: UpdateInfo;
18+
updateProgress: UpdateProgress;
19+
}
2220

2321
export const IDEUpdaterComponent = ({
24-
updateInfo: { version, releaseNotes },
25-
downloadStarted = false,
26-
downloadFinished = false,
27-
windowService,
28-
progress,
29-
error,
30-
onDownload,
31-
onClose,
32-
onSkipVersion,
33-
onCloseAndInstall,
22+
updateInfo,
23+
updateProgress: {
24+
downloadStarted = false,
25+
downloadFinished = false,
26+
progressInfo,
27+
error,
28+
},
3429
}: IDEUpdaterComponentProps): React.ReactElement => {
35-
const changelogDivRef=React.useRef()asReact.MutableRefObject<
36-
HTMLDivElement
37-
>;
30+
const { version, releaseNotes }=updateInfo;
31+
constchangelogDivRef=
32+
React.useRef()asReact.MutableRefObject<HTMLDivElement>;
3833
React.useEffect(() => {
39-
if (!!releaseNotes) {
34+
if (!!releaseNotes&&changelogDivRef.current) {
4035
let changelog: string;
4136
if (typeof releaseNotes === 'string') changelog = releaseNotes;
4237
else
@@ -58,12 +53,7 @@ export const IDEUpdaterComponent = ({
5853
changelogDivRef.current
5954
);
6055
}
61-
}, [releaseNotes]);
62-
const closeButton = (
63-
<button onClick={onClose} type="button" className="theia-button secondary">
64-
{nls.localize('arduino/ide-updater/notNowButton', 'Not now')}
65-
</button>
66-
);
56+
}, [updateInfo]);
6757

6858
const DownloadCompleted: () => React.ReactElement = () => (
6959
<div className="ide-updater-dialog--downloaded">
@@ -80,19 +70,6 @@ export const IDEUpdaterComponent = ({
8070
'Close the software and install the update on your machine.'
8171
)}
8272
</div>
83-
<div className="buttons-container">
84-
{closeButton}
85-
<button
86-
onClick={onCloseAndInstall}
87-
type="button"
88-
className="theia-button close-and-install"
89-
>
90-
{nls.localize(
91-
'arduino/ide-updater/closeAndInstallButton',
92-
'Close and Install'
93-
)}
94-
</button>
95-
</div>
9673
</div>
9774
);
9875

@@ -104,7 +81,7 @@ export const IDEUpdaterComponent = ({
10481
'Downloading the latest version of the Arduino IDE.'
10582
)}
10683
</div>
107-
<ProgressBar percent={progress?.percent} showPercentage />
84+
<ProgressBar percent={progressInfo?.percent} showPercentage />
10885
</div>
10986
);
11087

@@ -130,46 +107,14 @@ export const IDEUpdaterComponent = ({
130107
)}
131108
</div>
132109
{releaseNotes && (
133-
<div className="dialogRow">
134-
<div className="changelog-container" ref={changelogDivRef} />
110+
<div className="dialogRow changelog-container">
111+
<div className="changelog" ref={changelogDivRef} />
135112
</div>
136113
)}
137-
<div className="buttons-container">
138-
<button
139-
onClick={onSkipVersion}
140-
type="button"
141-
className="theia-button secondary skip-version"
142-
>
143-
{nls.localize(
144-
'arduino/ide-updater/skipVersionButton',
145-
'Skip Version'
146-
)}
147-
</button>
148-
<div className="push"></div>
149-
{closeButton}
150-
<button
151-
onClick={onDownload}
152-
type="button"
153-
className="theia-button primary"
154-
>
155-
{nls.localize('arduino/ide-updater/downloadButton', 'Download')}
156-
</button>
157-
</div>
158114
</div>
159115
</div>
160116
);
161117

162-
const onGoToDownloadClick = (
163-
event: React.SyntheticEvent<HTMLAnchorElement, Event>
164-
) => {
165-
const { target } = event.nativeEvent;
166-
if (target instanceof HTMLAnchorElement) {
167-
event.nativeEvent.preventDefault();
168-
windowService.openNewWindow(target.href, { external: true });
169-
onClose();
170-
}
171-
};
172-
173118
const GoToDownloadPage: () => React.ReactElement = () => (
174119
<div className="ide-updater-dialog--go-to-download-page">
175120
<div>
@@ -178,19 +123,6 @@ export const IDEUpdaterComponent = ({
178123
"An update for the Arduino IDE is available, but we're not able to download and install it automatically. Please go to the download page and download the latest version from there."
179124
)}
180125
</div>
181-
<div className="buttons-container">
182-
{closeButton}
183-
<a
184-
className="theia-button primary"
185-
href="https://www.arduino.cc/en/software#experimental-software"
186-
onClick={onGoToDownloadClick}
187-
>
188-
{nls.localize(
189-
'arduino/ide-updater/goToDownloadButton',
190-
'Go To Download'
191-
)}
192-
</a>
193-
</div>
194126
</div>
195127
);
196128

0 commit comments

Comments
(0)

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