jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-25 20:26:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix dialogs UI scalability (#1311)

Browse Source 
* 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
This commit is contained in:
Alberto Iannaccone 2022-08-18 16:42:16 +02:00 committed by GitHub
parent 79ea0fa9a6
commit de32bddc20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 378 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts
View File

@ -453,7 +453,10 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
bind(BoardsConfigDialog).toSelf().inSingletonScope();
bind(BoardsConfigDialogProps).toConstantValue({
title: nls.localize('arduino/common/selectBoard', 'Select Board'),
title: nls.localize(
'arduino/board/boardConfigDialogTitle',
'Select Other Board and Port'
),
});
// Core service

16
arduino-ide-extension/src/browser/boards/boards-config-dialog.ts
View File

@ -1,4 +1,8 @@
import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
import {
injectable,
inject,
postConstruct,
} from '@theia/core/shared/inversify';
import { Message } from '@theia/core/shared/@phosphor/messaging';
import { DialogProps, Widget, DialogError } from '@theia/core/lib/browser';
import { AbstractDialog } from '../theia/dialogs/dialogs';
@ -28,7 +32,7 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
@inject(BoardsConfigDialogProps)
protected override readonly props: BoardsConfigDialogProps
) {
super(props);
super({ ...props, maxWidth: 500 });
this.contentNode.classList.add('select-board-dialog');
this.contentNode.appendChild(this.createDescription());
@ -65,14 +69,6 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
const head = document.createElement('div');
head.classList.add('head');
const title = document.createElement('div');
title.textContent = nls.localize(
'arduino/board/configDialogTitle',
'Select Other Board & Port'
);
title.classList.add('title');
head.appendChild(title);
const text = document.createElement('div');
text.classList.add('text');
head.appendChild(text);

4
arduino-ide-extension/src/browser/boards/boards-config.tsx
View File

@ -258,14 +258,14 @@ export class BoardsConfig extends React.Component<
override render(): React.ReactNode {
return (
<div className="body">
<>
{this.renderContainer('boards', this.renderBoards.bind(this))}
{this.renderContainer(
'ports',
this.renderPorts.bind(this),
this.renderPortsFooter.bind(this)
)}
</div>
</>
);
}

7
arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx
View File

@ -1,5 +1,9 @@
import * as React from '@theia/core/shared/react';
import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
import {
inject,
injectable,
postConstruct,
} from '@theia/core/shared/inversify';
import { DialogProps } from '@theia/core/lib/browser/dialogs';
import { AbstractDialog } from '../../theia/dialogs/dialogs';
import { Widget } from '@theia/core/shared/@phosphor/widgets';
@ -153,6 +157,7 @@ export class UploadCertificateDialog extends AbstractDialog<void> {
'Upload SSL Root Certificates'
),
});
this.node.id = 'certificate-uploader-dialog-container';
this.contentNode.classList.add('certificate-uploader-dialog');
this.acceptButton = undefined;
}

1
arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx
View File

@ -101,6 +101,7 @@ export class UploadFirmwareDialog extends AbstractDialog<void> {
protected override readonly props: UploadFirmwareDialogProps
) {
super({ title: UploadFirmware.Commands.OPEN.label || '' });
this.node.id = 'firmware-uploader-dialog-container';
this.contentNode.classList.add('firmware-uploader-dialog');
this.acceptButton = undefined;
}

114
arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx
View File

@ -1,4 +1,3 @@
import { WindowService } from '@theia/core/lib/browser/window/window-service';
import { nls } from '@theia/core/lib/common';
import { shell } from 'electron';
import * as React from '@theia/core/shared/react';
@ -7,36 +6,32 @@ import ReactMarkdown from 'react-markdown';
import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
import ProgressBar from '../../components/ProgressBar';
export type IDEUpdaterComponentProps = {
updateInfo: UpdateInfo;
windowService: WindowService;
export interface UpdateProgress {
progressInfo?: ProgressInfo | undefined;
downloadFinished?: boolean;
downloadStarted?: boolean;
progress?: ProgressInfo;
error?: Error;
onDownload: () => void;
onClose: () => void;
onSkipVersion: () => void;
onCloseAndInstall: () => void;
};
}
export interface IDEUpdaterComponentProps {
updateInfo: UpdateInfo;
updateProgress: UpdateProgress;
}
export const IDEUpdaterComponent = ({
updateInfo: { version, releaseNotes },
downloadStarted = false,
downloadFinished = false,
windowService,
progress,
error,
onDownload,
onClose,
onSkipVersion,
onCloseAndInstall,
updateInfo,
updateProgress: {
downloadStarted = false,
downloadFinished = false,
progressInfo,
error,
},
}: IDEUpdaterComponentProps): React.ReactElement => {
const changelogDivRef = React.useRef() as React.MutableRefObject<
HTMLDivElement
>;
const { version, releaseNotes } = updateInfo;
const changelogDivRef =
React.useRef() as React.MutableRefObject<HTMLDivElement>;
React.useEffect(() => {
if (!!releaseNotes) {
if (!!releaseNotes && changelogDivRef.current) {
let changelog: string;
if (typeof releaseNotes === 'string') changelog = releaseNotes;
else
@ -58,12 +53,7 @@ export const IDEUpdaterComponent = ({
changelogDivRef.current
);
}
}, [releaseNotes]);
const closeButton = (
<button onClick={onClose} type="button" className="theia-button secondary">
{nls.localize('arduino/ide-updater/notNowButton', 'Not now')}
</button>
);
}, [updateInfo]);
const DownloadCompleted: () => React.ReactElement = () => (
<div className="ide-updater-dialog--downloaded">
@ -80,19 +70,6 @@ export const IDEUpdaterComponent = ({
'Close the software and install the update on your machine.'
)}
</div>
<div className="buttons-container">
{closeButton}
<button
onClick={onCloseAndInstall}
type="button"
className="theia-button close-and-install"
>
{nls.localize(
'arduino/ide-updater/closeAndInstallButton',
'Close and Install'
)}
</button>
</div>
</div>
);
@ -104,7 +81,7 @@ export const IDEUpdaterComponent = ({
'Downloading the latest version of the Arduino IDE.'
)}
</div>
<ProgressBar percent={progress?.percent} showPercentage />
<ProgressBar percent={progressInfo?.percent} showPercentage />
</div>
);
@ -130,46 +107,14 @@ export const IDEUpdaterComponent = ({
)}
</div>
{releaseNotes && (
<div className="dialogRow">
<div className="changelog-container" ref={changelogDivRef} />
<div className="dialogRow changelog-container">
<div className="changelog" ref={changelogDivRef} />
</div>
)}
<div className="buttons-container">
<button
onClick={onSkipVersion}
type="button"
className="theia-button secondary skip-version"
>
{nls.localize(
'arduino/ide-updater/skipVersionButton',
'Skip Version'
)}
</button>
<div className="push"></div>
{closeButton}
<button
onClick={onDownload}
type="button"
className="theia-button primary"
>
{nls.localize('arduino/ide-updater/downloadButton', 'Download')}
</button>
</div>
</div>
</div>
);
const onGoToDownloadClick = (
event: React.SyntheticEvent<HTMLAnchorElement, Event>
) => {
const { target } = event.nativeEvent;
if (target instanceof HTMLAnchorElement) {
event.nativeEvent.preventDefault();
windowService.openNewWindow(target.href, { external: true });
onClose();
}
};
const GoToDownloadPage: () => React.ReactElement = () => (
<div className="ide-updater-dialog--go-to-download-page">
<div>
@ -178,19 +123,6 @@ export const IDEUpdaterComponent = ({
"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."
)}
</div>
<div className="buttons-container">
{closeButton}
<a
className="theia-button primary"
href="https://www.arduino.cc/en/software#experimental-software"
onClick={onGoToDownloadClick}
>
{nls.localize(
'arduino/ide-updater/goToDownloadButton',
'Go To Download'
)}
</a>
</div>
</div>
);

263
arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
View File

@ -1,113 +1,57 @@
import * as React from '@theia/core/shared/react';
import { inject, injectable } from '@theia/core/shared/inversify';
import {
inject,
injectable,
postConstruct,
} from '@theia/core/shared/inversify';
import { DialogProps } from '@theia/core/lib/browser/dialogs';
import { AbstractDialog } from '../../theia/dialogs/dialogs';
import { Widget } from '@theia/core/shared/@phosphor/widgets';
import { Message } from '@theia/core/shared/@phosphor/messaging';
import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
import { nls } from '@theia/core';
import { IDEUpdaterComponent } from './ide-updater-component';
import { IDEUpdaterComponent, UpdateProgress } from './ide-updater-component';
import {
IDEUpdater,
IDEUpdaterClient,
ProgressInfo,
SKIP_IDE_VERSION,
UpdateInfo,
} from '../../../common/protocol/ide-updater';
import { LocalStorageService } from '@theia/core/lib/browser';
import { WindowService } from '@theia/core/lib/browser/window/window-service';
const DOWNLOAD_PAGE_URL =
'https://www.arduino.cc/en/software#experimental-software';
@injectable()
export class IDEUpdaterDialogWidget extends ReactWidget {
protected isOpen = new Object();
updateInfo: UpdateInfo;
progressInfo: ProgressInfo | undefined;
error: Error | undefined;
downloadFinished: boolean;
downloadStarted: boolean;
onClose: () => void;
private _updateInfo: UpdateInfo;
private _updateProgress: UpdateProgress = {};
@inject(IDEUpdater)
protected readonly updater: IDEUpdater;
@inject(IDEUpdaterClient)
protected readonly updaterClient: IDEUpdaterClient;
@inject(LocalStorageService)
protected readonly localStorageService: LocalStorageService;
@inject(WindowService)
protected windowService: WindowService;
init(updateInfo: UpdateInfo, onClose: () => void): void {
this.updateInfo = updateInfo;
this.progressInfo = undefined;
this.error = undefined;
this.downloadStarted = false;
this.downloadFinished = false;
this.onClose = onClose;
this.updaterClient.onError((e) => {
this.error = e;
this.update();
});
this.updaterClient.onDownloadProgressChanged((e) => {
this.progressInfo = e;
this.update();
});
this.updaterClient.onDownloadFinished((e) => {
this.downloadFinished = true;
this.update();
});
}
async onSkipVersion(): Promise<void> {
this.localStorageService.setData<string>(
SKIP_IDE_VERSION,
this.updateInfo.version
);
this.close();
}
override close(): void {
super.close();
this.onClose();
}
onDispose(): void {
if (this.downloadStarted && !this.downloadFinished)
this.updater.stopDownload();
}
async onDownload(): Promise<void> {
this.progressInfo = undefined;
this.downloadStarted = true;
this.error = undefined;
this.updater.downloadUpdate();
setUpdateInfo(updateInfo: UpdateInfo): void {
this._updateInfo = updateInfo;
this.update();
}
onCloseAndInstall(): void {
this.updater.quitAndInstall();
mergeUpdateProgress(updateProgress: UpdateProgress): void {
this._updateProgress = { ...this._updateProgress, ...updateProgress };
this.update();
}
get updateInfo(): UpdateInfo {
return this._updateInfo;
}
get updateProgress(): UpdateProgress {
return this._updateProgress;
}
protected render(): React.ReactNode {
return !!this.updateInfo ? (
<form>
<IDEUpdaterComponent
updateInfo={this.updateInfo}
windowService={this.windowService}
downloadStarted={this.downloadStarted}
downloadFinished={this.downloadFinished}
progress={this.progressInfo}
error={this.error}
onClose={this.close.bind(this)}
onSkipVersion={this.onSkipVersion.bind(this)}
onDownload={this.onDownload.bind(this)}
onCloseAndInstall={this.onCloseAndInstall.bind(this)}
/>
</form>
return !!this._updateInfo ? (
<IDEUpdaterComponent
updateInfo={this._updateInfo}
updateProgress={this._updateProgress}
/>
) : null;
}
}
@ -118,7 +62,19 @@ export class IDEUpdaterDialogProps extends DialogProps {}
@injectable()
export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
@inject(IDEUpdaterDialogWidget)
protected readonly widget: IDEUpdaterDialogWidget;
private readonly widget: IDEUpdaterDialogWidget;
@inject(IDEUpdater)
private readonly updater: IDEUpdater;
@inject(IDEUpdaterClient)
private readonly updaterClient: IDEUpdaterClient;
@inject(LocalStorageService)
private readonly localStorageService: LocalStorageService;
@inject(WindowService)
private readonly windowService: WindowService;
constructor(
@inject(IDEUpdaterDialogProps)
@ -130,10 +86,26 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
'Software Update'
),
});
this.node.id = 'ide-updater-dialog-container';
this.contentNode.classList.add('ide-updater-dialog');
this.acceptButton = undefined;
}
@postConstruct()
protected init(): void {
this.updaterClient.onUpdaterDidFail((error) => {
this.appendErrorButtons();
this.widget.mergeUpdateProgress({ error });
});
this.updaterClient.onDownloadProgressDidChange((progressInfo) => {
this.widget.mergeUpdateProgress({ progressInfo });
});
this.updaterClient.onDownloadDidFinish(() => {
this.appendInstallButtons();
this.widget.mergeUpdateProgress({ downloadFinished: true });
});
}
get value(): UpdateInfo {
return this.widget.updateInfo;
}
@ -143,24 +115,123 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
Widget.detach(this.widget);
}
Widget.attach(this.widget, this.contentNode);
this.appendInitialButtons();
super.onAfterAttach(msg);
this.update();
}
private clearButtons(): void {
while (this.controlPanel.firstChild) {
this.controlPanel.removeChild(this.controlPanel.firstChild);
}
this.closeButton = undefined;
}
private appendNotNowButton(): void {
this.appendCloseButton(
nls.localize('arduino/ide-updater/notNowButton', 'Not now')
);
if (this.closeButton) {
this.addCloseAction(this.closeButton, 'click');
}
}
private appendInitialButtons(): void {
this.clearButtons();
const skipVersionButton = this.createButton(
nls.localize('arduino/ide-updater/skipVersionButton', 'Skip Version')
);
skipVersionButton.classList.add('secondary');
skipVersionButton.classList.add('skip-version-button');
this.addAction(skipVersionButton, this.skipVersion.bind(this), 'click');
this.controlPanel.appendChild(skipVersionButton);
this.appendNotNowButton();
const downloadButton = this.createButton(
nls.localize('arduino/ide-updater/downloadButton', 'Download')
);
this.addAction(downloadButton, this.startDownload.bind(this), 'click');
this.controlPanel.appendChild(downloadButton);
downloadButton.focus();
}
private appendInstallButtons(): void {
this.clearButtons();
this.appendNotNowButton();
const closeAndInstallButton = this.createButton(
nls.localize(
'arduino/ide-updater/closeAndInstallButton',
'Close and Install'
)
);
this.addAction(
closeAndInstallButton,
this.closeAndInstall.bind(this),
'click'
);
this.controlPanel.appendChild(closeAndInstallButton);
closeAndInstallButton.focus();
}
private appendErrorButtons(): void {
this.clearButtons();
this.appendNotNowButton();
const goToDownloadPageButton = this.createButton(
nls.localize('arduino/ide-updater/goToDownloadButton', 'Go To Download')
);
this.addAction(
goToDownloadPageButton,
this.openDownloadPage.bind(this),
'click'
);
this.controlPanel.appendChild(goToDownloadPageButton);
goToDownloadPageButton.focus();
}
private openDownloadPage(): void {
this.windowService.openNewWindow(DOWNLOAD_PAGE_URL, { external: true });
this.close();
}
private skipVersion(): void {
this.localStorageService.setData<string>(
SKIP_IDE_VERSION,
this.widget.updateInfo.version
);
this.close();
}
private startDownload(): void {
this.widget.mergeUpdateProgress({
downloadStarted: true,
});
this.clearButtons();
this.updater.downloadUpdate();
}
private closeAndInstall() {
this.updater.quitAndInstall();
this.close();
}
override async open(
data: UpdateInfo | undefined = undefined
): Promise<UpdateInfo | undefined> {
if (data && data.version) {
this.widget.init(data, this.close.bind(this));
this.widget.mergeUpdateProgress({
progressInfo: undefined,
downloadStarted: false,
downloadFinished: false,
error: undefined,
});
this.widget.setUpdateInfo(data);
return super.open();
}
}
protected override onUpdateRequest(msg: Message): void {
super.onUpdateRequest(msg);
this.widget.update();
}
protected override onActivateRequest(msg: Message): void {
super.onActivateRequest(msg);
this.widget.activate();
@ -168,6 +239,12 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
override close(): void {
this.widget.dispose();
if (
this.widget.updateProgress?.downloadStarted &&
!this.widget.updateProgress?.downloadFinished
) {
this.updater.stopDownload();
}
super.close();
}
}

20
arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx
View File

@ -188,15 +188,17 @@ export class SettingsComponent extends React.Component<
/>
{nls.localize('arduino/preferences/automatic', 'Automatic')}
</label>
<SettingsStepInput
value={scalePercentage}
setSettingsStateValue={this.setInterfaceScale}
step={scaleStep}
maxValue={maxScale}
minValue={minScale}
classNames={{ input: 'theia-input small with-margin' }}
/>
%
<div>
<SettingsStepInput
value={scalePercentage}
setSettingsStateValue={this.setInterfaceScale}
step={scaleStep}
maxValue={maxScale}
minValue={minScale}
unitOfMeasure="%"
classNames={{ input: 'theia-input small with-margin' }}
/>
</div>
</div>
<div className="flex-line">
<select

13
arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
View File

@ -7,14 +7,22 @@ interface SettingsStepInputProps {
step: number;
maxValue: number;
minValue: number;
unitOfMeasure?: string;
classNames?: { [key: string]: string };
}
const SettingsStepInput: React.FC<SettingsStepInputProps> = (
props: SettingsStepInputProps
) => {
const { value, setSettingsStateValue, step, maxValue, minValue, classNames } =
props;
const {
value,
setSettingsStateValue,
step,
maxValue,
minValue,
unitOfMeasure,
classNames,
} = props;
const clamp = (value: number, min: number, max: number): number => {
return Math.min(Math.max(value, min), max);
@ -86,6 +94,7 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
&#9662;
</button>
</div>
{unitOfMeasure && `${unitOfMeasure}`}
</div>
);
};

51
arduino-ide-extension/src/browser/ide-updater/ide-updater-client-impl.ts
View File

@ -5,36 +5,43 @@ import { IDEUpdaterClient } from '../../common/protocol/ide-updater';
@injectable()
export class IDEUpdaterClientImpl implements IDEUpdaterClient {
protected readonly onErrorEmitter = new Emitter<Error>();
protected readonly onCheckingForUpdateEmitter = new Emitter<void>();
protected readonly onUpdateAvailableEmitter = new Emitter<UpdateInfo>();
protected readonly onUpdateNotAvailableEmitter = new Emitter<UpdateInfo>();
protected readonly onDownloadProgressEmitter = new Emitter<ProgressInfo>();
protected readonly onDownloadFinishedEmitter = new Emitter<UpdateInfo>();
protected readonly onUpdaterDidFailEmitter = new Emitter<Error>();
protected readonly onUpdaterDidCheckForUpdateEmitter = new Emitter<void>();
protected readonly onUpdaterDidFindUpdateAvailableEmitter =
new Emitter<UpdateInfo>();
protected readonly onUpdaterDidNotFindUpdateAvailableEmitter =
new Emitter<UpdateInfo>();
protected readonly onDownloadProgressDidChangeEmitter =
new Emitter<ProgressInfo>();
protected readonly onDownloadDidFinishEmitter = new Emitter<UpdateInfo>();
readonly onError = this.onErrorEmitter.event;
readonly onCheckingForUpdate = this.onCheckingForUpdateEmitter.event;
readonly onUpdateAvailable = this.onUpdateAvailableEmitter.event;
readonly onUpdateNotAvailable = this.onUpdateNotAvailableEmitter.event;
readonly onDownloadProgressChanged = this.onDownloadProgressEmitter.event;
readonly onDownloadFinished = this.onDownloadFinishedEmitter.event;
readonly onUpdaterDidFail = this.onUpdaterDidFailEmitter.event;
readonly onUpdaterDidCheckForUpdate =
this.onUpdaterDidCheckForUpdateEmitter.event;
readonly onUpdaterDidFindUpdateAvailable =
this.onUpdaterDidFindUpdateAvailableEmitter.event;
readonly onUpdaterDidNotFindUpdateAvailable =
this.onUpdaterDidNotFindUpdateAvailableEmitter.event;
readonly onDownloadProgressDidChange =
this.onDownloadProgressDidChangeEmitter.event;
readonly onDownloadDidFinish = this.onDownloadDidFinishEmitter.event;
notifyError(message: Error): void {
this.onErrorEmitter.fire(message);
notifyUpdaterFailed(message: Error): void {
this.onUpdaterDidFailEmitter.fire(message);
}
notifyCheckingForUpdate(message: void): void {
this.onCheckingForUpdateEmitter.fire(message);
notifyCheckedForUpdate(message: void): void {
this.onUpdaterDidCheckForUpdateEmitter.fire(message);
}
notifyUpdateAvailable(message: UpdateInfo): void {
this.onUpdateAvailableEmitter.fire(message);
notifyUpdateAvailableFound(message: UpdateInfo): void {
this.onUpdaterDidFindUpdateAvailableEmitter.fire(message);
}
notifyUpdateNotAvailable(message: UpdateInfo): void {
this.onUpdateNotAvailableEmitter.fire(message);
notifyUpdateAvailableNotFound(message: UpdateInfo): void {
this.onUpdaterDidNotFindUpdateAvailableEmitter.fire(message);
}
notifyDownloadProgressChanged(message: ProgressInfo): void {
this.onDownloadProgressEmitter.fire(message);
this.onDownloadProgressDidChangeEmitter.fire(message);
}
notifyDownloadFinished(message: UpdateInfo): void {
this.onDownloadFinishedEmitter.fire(message);
this.onDownloadDidFinishEmitter.fire(message);
}
}

81
arduino-ide-extension/src/browser/style/boards-config-dialog.css
View File

@ -2,9 +2,11 @@ div#select-board-dialog {
margin: 5px;
}
div#select-board-dialog .selectBoardContainer .body {
div#select-board-dialog .selectBoardContainer {
display: flex;
gap: 10px;
overflow: hidden;
max-height: 100%;
}
.select-board-dialog .head {
@ -19,12 +21,13 @@ div.dialogContent.select-board-dialog > div.head .title {
margin-bottom: 10px;
}
div#select-board-dialog .selectBoardContainer .body .list .item.selected {
div#select-board-dialog .selectBoardContainer .list .item.selected {
background: var(--theia-secondaryButton-hoverBackground);
}
div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
color: var(--theia-list-activeSelectionIconForeground);
div#select-board-dialog .selectBoardContainer .list .item.selected i {
color: var(--theia-arduino-branding-primary);
}
#select-board-dialog .selectBoardContainer .search,
@ -34,7 +37,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
background: var(--theia-editor-background);
}
#select-board-dialog .selectBoardContainer .body .search input {
#select-board-dialog .selectBoardContainer .search input {
border: none;
width: 100%;
height: auto;
@ -46,58 +49,63 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
color: var(--theia-input-foreground);
}
#select-board-dialog .selectBoardContainer .body .search input:focus {
#select-board-dialog .selectBoardContainer .search input:focus {
box-shadow: none;
}
#select-board-dialog .selectBoardContainer .body .container {
#select-board-dialog .selectBoardContainer .container {
flex: 1;
padding: 0px 10px 0px 0px;
min-width: 240px;
max-width: 240px;
overflow: hidden;
max-height: 100%;
}
#select-board-dialog .selectBoardContainer .body .left.container .content {
#select-board-dialog .selectBoardContainer .container .content {
display: flex;
flex-direction: column;
max-height: 100%;
}
#select-board-dialog .selectBoardContainer .left.container .content {
margin: 0 5px 0 0;
}
#select-board-dialog .selectBoardContainer .body .right.container .content {
#select-board-dialog .selectBoardContainer .right.container .content {
margin: 0 0 0 5px;
}
#select-board-dialog .selectBoardContainer .body .container .content .title {
#select-board-dialog .selectBoardContainer .container .content .title {
color: var(--theia-editorWidget-foreground);
padding: 0px 0px 10px 0px;
text-transform: uppercase;
}
#select-board-dialog .selectBoardContainer .body .container .content .footer {
#select-board-dialog .selectBoardContainer .container .content .footer {
padding: 10px 5px 10px 0px;
}
#select-board-dialog .selectBoardContainer .body .container .content .loading {
#select-board-dialog .selectBoardContainer .container .content .loading {
font-size: var(--theia-ui-font-size1);
color: var(--theia-editorWidget-foreground);
padding: 10px 5px 10px 10px;
text-transform: uppercase;
/* The max, min-height comes from `.body .list` 200px + 47px top padding - 2 * 10px top padding */
/* The max, min-height comes from `.list` 200px + 47px top padding - 2 * 10px top padding */
max-height: 227px;
min-height: 227px;
}
#select-board-dialog .selectBoardContainer .body .list .item {
#select-board-dialog .selectBoardContainer .list .item {
padding: 10px 5px 10px 10px;
display: flex;
justify-content: end;
white-space: nowrap;
overflow-x: hidden;
flex: 1 0;
}
#select-board-dialog .selectBoardContainer .body .list .item .selected-icon {
#select-board-dialog .selectBoardContainer .list .item .selected-icon {
margin-left: auto;
}
#select-board-dialog .selectBoardContainer .body .list .item .details {
#select-board-dialog .selectBoardContainer .list .item .details {
font-size: var(--theia-ui-font-size1);
opacity: var(--theia-mod-disabled-opacity);
width: 155px; /* used heuristics for the calculation */
@ -106,43 +114,36 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
text-overflow: ellipsis;
}
#select-board-dialog .selectBoardContainer .body .list .item.missing {
#select-board-dialog .selectBoardContainer .list .item.missing {
opacity: var(--theia-mod-disabled-opacity);
}
#select-board-dialog .selectBoardContainer .body .list .item:hover {
#select-board-dialog .selectBoardContainer .list .item:hover {
background: var(--theia-secondaryButton-hoverBackground);
}
#select-board-dialog .selectBoardContainer .body .list .label {
max-width: 215px;
width: 215px;
#select-board-dialog .selectBoardContainer .list .label {
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
#select-board-dialog .selectBoardContainer .body .list {
#select-board-dialog .selectBoardContainer .list {
max-height: 200px;
min-height: 200px;
overflow-y: auto;
}
#select-board-dialog .selectBoardContainer .body .ports.list {
#select-board-dialog .selectBoardContainer .ports.list {
margin: 47px 0px 0px 0px; /* 47 is 37 as input height for the `Boards`, plus 10 margin bottom. */
}
#select-board-dialog .selectBoardContainer .body .search {
#select-board-dialog .selectBoardContainer .search {
margin-bottom: 10px;
display: flex;
align-items: center;
padding-right: 5px;
}
.p-Widget.dialogOverlay .dialogContent.select-board-dialog {
width: 500px;
}
.arduino-boards-toolbar-item-container {
align-items: center;
background: var(--theia-arduino-toolbar-dropdown-background);
@ -264,10 +265,20 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
/* High Contrast Theme rules */
/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
.hc-black.hc-theia.theia-hc #select-board-dialog .selectBoardContainer .body .list .item:hover {
.hc-black.hc-theia.theia-hc #select-board-dialog .selectBoardContainer .list .item:hover {
outline: 1px dashed var(--theia-focusBorder);
}
.hc-black.hc-theia.theia-hc div#select-board-dialog .selectBoardContainer .body .list .item.selected {
.hc-black.hc-theia.theia-hc div#select-board-dialog .selectBoardContainer .list .item.selected {
outline: 1px solid var(--theia-focusBorder);
}
@media only screen and (max-height: 400px) {
div.dialogContent.select-board-dialog > div.head {
display: none;
}
#select-board-dialog .selectBoardContainer .container .content .title {
display: none;
}
}

2
arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css
View File

@ -1,4 +1,4 @@
.certificate-uploader-dialog {
#certificate-uploader-dialog-container > .dialogBlock {
width: 600px;
}

12
arduino-ide-extension/src/browser/style/dialogs.css
View File

@ -9,11 +9,13 @@
total = padding + margin = 96px
*/
max-width: calc(100% - 96px) !important;
min-width: unset;
max-height: 560px;
padding: 0 28px;
}
.p-Widget.dialogOverlay .dialogBlock .dialogTitle {
padding: 36px 0 28px;
padding: 20px 0;
font-weight: 500;
background-color: transparent;
font-size: var(--theia-ui-font-size2);
@ -28,6 +30,7 @@
.p-Widget.dialogOverlay .dialogBlock .dialogContent {
padding: 0;
overflow: auto;
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent > input {
@ -75,3 +78,10 @@
.fa.disabled {
opacity: .4;
}
@media only screen and (max-height: 560px) {
.p-Widget.dialogOverlay .dialogBlock {
max-height: 400px;
}
}

3
arduino-ide-extension/src/browser/style/firmware-uploader-dialog.css
View File

@ -1,4 +1,4 @@
.firmware-uploader-dialog {
#firmware-uploader-dialog-container > .dialogBlock {
width: 600px;
}
@ -11,7 +11,6 @@
}
.firmware-uploader-dialog .dialogRow > button{
width: 33%;
margin-right: 3px;
}

45
arduino-ide-extension/src/browser/style/ide-updater-dialog.css
View File

@ -1,4 +1,4 @@
.ide-updater-dialog {
#ide-updater-dialog-container > .dialogBlock {
width: 546px;
}
@ -10,6 +10,10 @@
display: flex;
}
.ide-updater-dialog--downloading {
flex: 1;
}
.ide-updater-dialog--logo-container {
margin-right: 28px;
}
@ -23,37 +27,49 @@
.dialogContent.ide-updater-dialog
.ide-updater-dialog--content
.ide-updater-dialog--new-version-text.dialogSection {
display: flex;
flex: 1;
flex-direction: column;
margin-top: 0;
min-width: 0;
}
.ide-updater-dialog .changelog-container {
.ide-updater-dialog .changelog {
color: var(--theia-editor-foreground);
background-color: var(--theia-editor-background);
border: 1px solid var(--theia-editorWidget-border);
border-radius: 2px;
font-size: 12px;
height: 180px;
overflow: auto;
padding: 0 12px;
cursor: text;
}
.ide-updater-dialog .changelog-container a {
.dialogContent.ide-updater-dialog
.ide-updater-dialog--content
.ide-updater-dialog--new-version-text
.dialogRow.changelog-container {
align-items: flex-start;
border: 1px solid var(--theia-editorWidget-border);
border-radius: 2px;
overflow: auto;
max-height: 180px;
}
.ide-updater-dialog .changelog a {
color: var(--theia-textLink-foreground);
}
.ide-updater-dialog .changelog-container a:hover {
.ide-updater-dialog .changelog a:hover {
text-decoration: underline;
cursor: pointer;
}
.ide-updater-dialog .changelog-container code {
.ide-updater-dialog .changelog code {
background: var(--theia-textBlockQuote-background);
border-radius: 2px;
padding: 0 2px;
}
.ide-updater-dialog .changelog-container a code {
.ide-updater-dialog .changelog a code {
color: var(--theia-textLink-foreground);
}
@ -77,3 +93,14 @@
.ide-updater-dialog .buttons-container .push {
margin-right: auto;
}
.ide-updater-dialog--content {
max-height: 100%;
overflow: hidden;
display: flex;
}
#ide-updater-dialog-container .skip-version-button {
margin-left: 79px;
margin-right: auto;
}

1
arduino-ide-extension/src/browser/style/settings-dialog.css
View File

@ -21,6 +21,7 @@
display: flex;
align-items: center;
white-space: nowrap;
flex-wrap: wrap;
}
.arduino-settings-dialog .with-margin {

2
arduino-ide-extension/src/browser/style/settings-step-input.css
View File

@ -12,7 +12,7 @@
display: none;
flex-direction: column;
position: absolute;
right: 0px;
right: 14px;
top: 50%;
transform: translate(0px, -50%);
height: calc(100% - 4px);

20
arduino-ide-extension/src/common/protocol/ide-updater.ts
View File

@ -56,16 +56,16 @@ export interface IDEUpdater extends JsonRpcServer<IDEUpdaterClient> {
export const IDEUpdaterClient = Symbol('IDEUpdaterClient');
export interface IDEUpdaterClient {
onError: Event<Error>;
onCheckingForUpdate: Event<void>;
onUpdateAvailable: Event<UpdateInfo>;
onUpdateNotAvailable: Event<UpdateInfo>;
onDownloadProgressChanged: Event<ProgressInfo>;
onDownloadFinished: Event<UpdateInfo>;
notifyError(message: Error): void;
notifyCheckingForUpdate(message: void): void;
notifyUpdateAvailable(message: UpdateInfo): void;
notifyUpdateNotAvailable(message: UpdateInfo): void;
onUpdaterDidFail: Event<Error>;
onUpdaterDidCheckForUpdate: Event<void>;
onUpdaterDidFindUpdateAvailable: Event<UpdateInfo>;
onUpdaterDidNotFindUpdateAvailable: Event<UpdateInfo>;
onDownloadProgressDidChange: Event<ProgressInfo>;
onDownloadDidFinish: Event<UpdateInfo>;
notifyUpdaterFailed(message: Error): void;
notifyCheckedForUpdate(message: void): void;
notifyUpdateAvailableFound(message: UpdateInfo): void;
notifyUpdateAvailableNotFound(message: UpdateInfo): void;
notifyDownloadProgressChanged(message: ProgressInfo): void;
notifyDownloadFinished(message: UpdateInfo): void;
}

16
arduino-ide-extension/src/electron-main/ide-updater/ide-updater-impl.ts
View File

@ -19,13 +19,13 @@ export class IDEUpdaterImpl implements IDEUpdater {
constructor() {
this.updater.on('checking-for-update', (e) => {
this.clients.forEach((c) => c.notifyCheckingForUpdate(e));
this.clients.forEach((c) => c.notifyCheckedForUpdate(e));
});
this.updater.on('update-available', (e) => {
this.clients.forEach((c) => c.notifyUpdateAvailable(e));
this.clients.forEach((c) => c.notifyUpdateAvailableFound(e));
});
this.updater.on('update-not-available', (e) => {
this.clients.forEach((c) => c.notifyUpdateNotAvailable(e));
this.clients.forEach((c) => c.notifyUpdateAvailableNotFound(e));
});
this.updater.on('download-progress', (e) => {
this.clients.forEach((c) => c.notifyDownloadProgressChanged(e));
@ -34,7 +34,7 @@ export class IDEUpdaterImpl implements IDEUpdater {
this.clients.forEach((c) => c.notifyDownloadFinished(e));
});
this.updater.on('error', (e) => {
this.clients.forEach((c) => c.notifyError(e));
this.clients.forEach((c) => c.notifyUpdaterFailed(e));
});
}
@ -58,10 +58,8 @@ export class IDEUpdaterImpl implements IDEUpdater {
this.isAlreadyChecked = true;
}
const {
updateInfo,
cancellationToken,
} = await this.updater.checkForUpdates();
const { updateInfo, cancellationToken } =
await this.updater.checkForUpdates();
this.cancellationToken = cancellationToken;
if (this.updater.currentVersion.compare(updateInfo.version) === -1) {
@ -104,7 +102,7 @@ export class IDEUpdaterImpl implements IDEUpdater {
await this.updater.downloadUpdate(this.cancellationToken);
} catch (e) {
if (e.message === 'cancelled') return;
this.clients.forEach((c) => c.notifyError(e));
this.clients.forEach((c) => c.notifyUpdaterFailed(e));
}
}

3
i18n/en.json
View File

@ -6,10 +6,10 @@
},
"board": {
"board": "Board{0}",
"boardConfigDialogTitle": "Select Other Board and Port",
"boardInfo": "Board Info",
"configDialog1": "Select both a Board and a Port if you want to upload a sketch.",
"configDialog2": "If you only select a Board you will be able to compile, but not to upload your sketch.",
"configDialogTitle": "Select Other Board & Port",
"couldNotFindPreviouslySelected": "Could not find previously selected board '{0}' in installed platform '{1}'. Please manually reselect the board you want to use. Do you want to reselect it now?",
"disconnected": "Disconnected",
"getBoardInfo": "Get Board Info",
@ -107,7 +107,6 @@
"offlineIndicator": "You appear to be offline. Without an Internet connection, the Arduino CLI might not be able to download the required resources and could cause malfunction. Please connect to the Internet and restart the application.",
"oldFormat": "The '{0}' still uses the old `.pde` format. Do you want to switch to the new `.ino` extension?",
"processing": "Processing",
"selectBoard": "Select Board",
"selectedOn": "on {0}",
"serialMonitor": "Serial Monitor",
"unknown": "Unknown"