fix board selection and workspace input dialogs width and height (#1406)

* fix board selection and workspace input dialogs width and height

* use same dialog for new file and rename

* fix board list getting small when filtering

* board select dialog: show variant text when no board is found

* fix addition boards url outline
This commit is contained in:
Alberto Iannaccone 2022-09-20 14:36:02 +02:00 committed by GitHub
parent 8de6cf84d9
commit 8a5995920a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 74 additions and 32 deletions

View File

@ -34,6 +34,7 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
) { ) {
super({ ...props, maxWidth: 500 }); super({ ...props, maxWidth: 500 });
this.node.id = 'select-board-dialog-container';
this.contentNode.classList.add('select-board-dialog'); this.contentNode.classList.add('select-board-dialog');
this.contentNode.appendChild(this.createDescription()); this.contentNode.appendChild(this.createDescription());

View File

@ -299,6 +299,18 @@ export class BoardsConfig extends React.Component<
} }
} }
const boardsList = Array.from(distinctBoards.values()).map((board) => (
<Item<BoardWithPackage>
key={toKey(board)}
item={board}
label={board.name}
details={board.details}
selected={board.selected}
onClick={this.selectBoard}
missing={board.missing}
/>
));
return ( return (
<React.Fragment> <React.Fragment>
<div className="search"> <div className="search">
@ -315,19 +327,17 @@ export class BoardsConfig extends React.Component<
/> />
<i className="fa fa-search"></i> <i className="fa fa-search"></i>
</div> </div>
<div className="boards list"> {boardsList.length > 0 ? (
{Array.from(distinctBoards.values()).map((board) => ( <div className="boards list">{boardsList}</div>
<Item<BoardWithPackage> ) : (
key={toKey(board)} <div className="no-result">
item={board} {nls.localize(
label={board.name} 'arduino/board/noBoardsFound',
details={board.details} 'No boards found for "{0}"',
selected={board.selected} query
onClick={this.selectBoard} )}
missing={board.missing} </div>
/> )}
))}
</div>
</React.Fragment> </React.Fragment>
); );
} }
@ -342,7 +352,7 @@ export class BoardsConfig extends React.Component<
); );
} }
return !ports.length ? ( return !ports.length ? (
<div className="loading noselect"> <div className="no-result">
{nls.localize('arduino/board/noPortsDiscovered', 'No ports discovered')} {nls.localize('arduino/board/noPortsDiscovered', 'No ports discovered')}
</div> </div>
) : ( ) : (

View File

@ -155,7 +155,6 @@ export class AdditionalUrlsDialog extends AbstractDialog<string[]> {
this.textArea = document.createElement('textarea'); this.textArea = document.createElement('textarea');
this.textArea.className = 'theia-input'; this.textArea.className = 'theia-input';
this.textArea.setAttribute('style', 'flex: 0;');
this.textArea.value = urls this.textArea.value = urls
.filter((url) => url.trim()) .filter((url) => url.trim())
.filter((url) => !!url) .filter((url) => !!url)

View File

@ -1,5 +1,11 @@
#select-board-dialog-container > .dialogBlock {
width: 640px;
height: 500px;
}
div#select-board-dialog { div#select-board-dialog {
margin: 5px; margin: 5px;
height: 100%;
} }
div#select-board-dialog .selectBoardContainer { div#select-board-dialog .selectBoardContainer {
@ -7,12 +13,17 @@ div#select-board-dialog .selectBoardContainer {
gap: 10px; gap: 10px;
overflow: hidden; overflow: hidden;
max-height: 100%; max-height: 100%;
height: 100%;
} }
.select-board-dialog .head { .select-board-dialog .head {
margin: 5px; margin: 5px;
} }
.dialogContent.select-board-dialog {
height: 100%;
}
div.dialogContent.select-board-dialog > div.head .title { div.dialogContent.select-board-dialog > div.head .title {
font-weight: 400; font-weight: 400;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@ -63,6 +74,7 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 100%; max-height: 100%;
height: 100%;
} }
#select-board-dialog .selectBoardContainer .left.container .content { #select-board-dialog .selectBoardContainer .left.container .content {
@ -131,6 +143,7 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
#select-board-dialog .selectBoardContainer .list { #select-board-dialog .selectBoardContainer .list {
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
flex: 1;
} }
#select-board-dialog .selectBoardContainer .ports.list { #select-board-dialog .selectBoardContainer .ports.list {
@ -282,3 +295,11 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
display: none; display: none;
} }
} }
#select-board-dialog .no-result {
text-transform: uppercase;
height: 100%;
user-select: none;
padding: 10px 5px;
overflow-wrap: break-word;
}

View File

@ -9,7 +9,8 @@
total = padding + margin = 96px total = padding + margin = 96px
*/ */
max-width: calc(100% - 96px) !important; max-width: calc(100% - 96px) !important;
min-width: unset;
min-width: 424px;
max-height: 560px; max-height: 560px;
padding: 0 28px; padding: 0 28px;
} }
@ -85,3 +86,4 @@
max-height: 400px; max-height: 400px;
} }
} }

View File

@ -88,10 +88,12 @@
} }
.additional-urls-dialog textarea { .additional-urls-dialog textarea {
width: 100%; resize: none;
} }
.p-Widget.dialogOverlay .dialogBlock .dialogContent.additional-urls-dialog { .p-Widget.dialogOverlay .dialogBlock .dialogContent.additional-urls-dialog {
display: block; display: flex;
overflow: hidden; overflow: hidden;
padding: 0 1px;
margin: 0 -1px;
} }

View File

@ -17,7 +17,6 @@ import {
SketchesServiceClientImpl, SketchesServiceClientImpl,
} from '../../../common/protocol/sketches-service-client-impl'; } from '../../../common/protocol/sketches-service-client-impl';
import { SaveAsSketch } from '../../contributions/save-as-sketch'; import { SaveAsSketch } from '../../contributions/save-as-sketch';
import { SingleTextInputDialog } from '@theia/core/lib/browser';
import { nls } from '@theia/core/lib/common'; import { nls } from '@theia/core/lib/common';
@injectable() @injectable()
@ -161,20 +160,26 @@ export class WorkspaceCommandContribution extends TheiaWorkspaceCommandContribut
return; return;
} }
const initialValue = uri.path.base; const initialValue = uri.path.base;
const dialog = new SingleTextInputDialog({ const parentUri = parent.resource;
title: nls.localize('theia/workspace/newFileName', 'New name for file'),
initialValue, const dialog = new WorkspaceInputDialog(
initialSelectionRange: { {
start: 0, title: nls.localize('theia/workspace/newFileName', 'New name for file'),
end: uri.path.name.length, initialValue,
parentUri,
initialSelectionRange: {
start: 0,
end: uri.path.name.length,
},
validate: (name, mode) => {
if (initialValue === name && mode === 'preview') {
return false;
}
return this.validateFileName(name, parent, false);
},
}, },
validate: (name, mode) => { this.labelProvider
if (initialValue === name && mode === 'preview') { );
return false;
}
return this.validateFileName(name, parent, false);
},
});
const newName = await dialog.open(); const newName = await dialog.open();
const newNameWithExt = this.maybeAppendInoExt(newName); const newNameWithExt = this.maybeAppendInoExt(newName);
if (newNameWithExt) { if (newNameWithExt) {

View File

@ -18,6 +18,7 @@ export class WorkspaceInputDialog extends TheiaWorkspaceInputDialog {
protected override readonly labelProvider: LabelProvider protected override readonly labelProvider: LabelProvider
) { ) {
super(props, labelProvider); super(props, labelProvider);
this.node.classList.add('workspace-input-dialog');
this.appendCloseButton( this.appendCloseButton(
nls.localize('vscode/issueMainService/cancel', 'Cancel') nls.localize('vscode/issueMainService/cancel', 'Cancel')
); );

View File

@ -15,6 +15,7 @@
"getBoardInfo": "Get Board Info", "getBoardInfo": "Get Board Info",
"inSketchbook": " (in Sketchbook)", "inSketchbook": " (in Sketchbook)",
"installNow": "The \"{0} {1}\" core has to be installed for the currently selected \"{2}\" board. Do you want to install it now?", "installNow": "The \"{0} {1}\" core has to be installed for the currently selected \"{2}\" board. Do you want to install it now?",
"noBoardsFound": "No boards found for \"{0}\"",
"noFQBN": "The FQBN is not available for the selected board \"{0}\". Do you have the corresponding core installed?", "noFQBN": "The FQBN is not available for the selected board \"{0}\". Do you have the corresponding core installed?",
"noPortsDiscovered": "No ports discovered", "noPortsDiscovered": "No ports discovered",
"noPortsSelected": "No ports selected for board: '{0}'.", "noPortsSelected": "No ports selected for board: '{0}'.",