Skip to content

Rework listing of discovered ports #614

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Nov 24, 2021
Merged

Rework listing of discovered ports #614

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
67b5fcb
Removed Protocol type
silvanocerza Nov 9, 2021
c8da135
Reworked function that groups ports by protocol
silvanocerza Nov 9, 2021
5617f79
Remove useless protocol check in Port sameAs function
silvanocerza Nov 10, 2021
1a11de2
Reworked port selection menu ordering
silvanocerza Nov 10, 2021
a2dc2b7
Fix ports shown multiple times in menu
silvanocerza Nov 10, 2021
54fe93e
Reworked board selection dropdown ordering
silvanocerza Nov 17, 2021
44c5b41
Localize some strings
silvanocerza Nov 17, 2021
995b9a1
Fix bug selecting board in boards selector dropdown
silvanocerza Nov 19, 2021
17e6d50
Reworked board selection dialog ordering
silvanocerza Nov 22, 2021
504e351
Fix Tools > Port menu not refreshing
silvanocerza Nov 22, 2021
22615d0
Move Select other board button to bottom of Board selector dropdown a…
silvanocerza Nov 22, 2021
4042f7d
Updated arduino-cli to 0.20.0 and generated protocol files
silvanocerza Nov 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Move Select other board button to bottom of Board selector dropdown a… 
…nd change its style
  • Loading branch information
@silvanocerza
silvanocerza authored and Alberto Iannaccone committed Nov 24, 2021
commit 22615d00b448dfec5ed0060637bade913e81bf26
18 changes: 11 additions & 7 deletions arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
if (coords === 'hidden') {
return '';
}
const footerLabel = nls.localize(
'arduino/board/openBoardsConfig',
'Select other board and port…'
);
return (
<div
className="arduino-boards-dropdown-list"
Expand All @@ -58,13 +62,6 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
...coords,
}}
>
{this.renderItem({
label: nls.localize(
'arduino/board/openBoardsConfig',
'Select Other Board & Port'
),
onClick: () => this.props.openBoardsConfig(),
})}
{items
.map(({ name, port, selected, onClick }) => ({
label: nls.localize(
Expand All @@ -77,6 +74,13 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
onClick,
}))
.map(this.renderItem)}
<div
key={footerLabel}
className="arduino-boards-dropdown-item arduino-board-dropdown-footer"
onClick={() => this.props.openBoardsConfig()}
>
<div>{footerLabel}</div>
</div>
</div>
);
}
Expand Down
241 changes: 127 additions & 114 deletions arduino-ide-extension/src/browser/style/boards-config-dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,224 +1,237 @@
div#select-board-dialog {
margin: 5px;
margin: 5px;
}

div#select-board-dialog .selectBoardContainer .body {
display: flex;
overflow: hidden;
display: flex;
overflow: hidden;
}

.select-board-dialog .head {
margin: 5px;
margin: 5px;
}

div.dialogContent.select-board-dialog > div.head .title {
font-weight: 400;
letter-spacing: .02em;
font-size: 1.2em;
color: var(--theia-arduino-branding-primary);
margin-bottom: 10px;
font-weight: 400;
letter-spacing: 0.02em;
font-size: 1.2em;
color: var(--theia-arduino-branding-primary);
margin-bottom: 10px;
}

div#select-board-dialog .selectBoardContainer .body .list .item.selected {
background: var(--theia-secondaryButton-hoverBackground);
background: var(--theia-secondaryButton-hoverBackground);
}

div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
color: var(--theia-arduino-branding-primary);
color: var(--theia-arduino-branding-primary);
}

#select-board-dialog .selectBoardContainer .search,
#select-board-dialog .selectBoardContainer .search input,
#select-board-dialog .selectBoardContainer .list,
#select-board-dialog .selectBoardContainer .list {
background: var(--theia-editor-background);
background: var(--theia-editor-background);
}

#select-board-dialog .selectBoardContainer .body .search input {
border: none;
width: 100%;
height: auto;
max-height: 37px;
padding: 10px 5px 10px 10px;
margin: 0;
vertical-align: top;
display: flex;
color: var(--theia-editor-foreground);
border: none;
width: 100%;
height: auto;
max-height: 37px;
padding: 10px 5px 10px 10px;
margin: 0;
vertical-align: top;
display: flex;
color: var(--theia-editor-foreground);
}

#select-board-dialog .selectBoardContainer .body .search input:focus {
box-shadow: none;
box-shadow: none;
}

#select-board-dialog .selectBoardContainer .body .container {
flex: 1;
padding: 0px 10px 0px 0px;
min-width: 240px;
max-width: 240px;
flex: 1;
padding: 0px 10px 0px 0px;
min-width: 240px;
max-width: 240px;
}

#select-board-dialog .selectBoardContainer .body .left.container .content {
margin: 0 5px 0 0;
margin: 0 5px 0 0;
}

#select-board-dialog .selectBoardContainer .body .right.container .content {
margin: 0 0 0 5px;
margin: 0 0 0 5px;
}

#select-board-dialog .selectBoardContainer .body .container .content .title {
color: #7f8c8d;
padding: 0px 0px 10px 0px;
text-transform: uppercase;
color: #7f8c8d;
padding: 0px 0px 10px 0px;
text-transform: uppercase;
}

#select-board-dialog .selectBoardContainer .body .container .content .footer {
padding: 10px 5px 10px 0px;
padding: 10px 5px 10px 0px;
}

#select-board-dialog .selectBoardContainer .body .container .content .loading {
font-size: var(--theia-ui-font-size1);
color: var(--theia-arduino-branding-secondary);
padding: 10px 5px 10px 10px;
text-transform: uppercase;
/* The max, min-height comes from `.body .list` 200px + 47px top padding - 2 * 10px top padding */
max-height: 227px;
min-height: 227px;
font-size: var(--theia-ui-font-size1);
color: var(--theia-arduino-branding-secondary);
padding: 10px 5px 10px 10px;
text-transform: uppercase;
/* The max, min-height comes from `.body .list` 200px + 47px top padding - 2 * 10px top padding */
max-height: 227px;
min-height: 227px;
}

#select-board-dialog .selectBoardContainer .body .list .item {
padding: 10px 5px 10px 10px;
display: flex;
justify-content: end;
white-space: nowrap;
overflow-x: hidden;
padding: 10px 5px 10px 10px;
display: flex;
justify-content: end;
white-space: nowrap;
overflow-x: hidden;
}

#select-board-dialog .selectBoardContainer .body .list .item .selected-icon {
margin-left: auto;
margin-left: auto;
}

#select-board-dialog .selectBoardContainer .body .list .item .details {
font-size: var(--theia-ui-font-size1);
opacity: var(--theia-mod-disabled-opacity);
width: 155px; /* used heuristics for the calculation */
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--theia-ui-font-size1);
opacity: var(--theia-mod-disabled-opacity);
width: 155px; /* used heuristics for the calculation */
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}

#select-board-dialog .selectBoardContainer .body .list .item.missing {
opacity: var(--theia-mod-disabled-opacity);
opacity: var(--theia-mod-disabled-opacity);
}

#select-board-dialog .selectBoardContainer .body .list .item:hover {
background: var(--theia-secondaryButton-hoverBackground);
background: var(--theia-secondaryButton-hoverBackground);
}

#select-board-dialog .selectBoardContainer .body .list .label {
max-width: 215px;
width: 215px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
max-width: 215px;
width: 215px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}

#select-board-dialog .selectBoardContainer .body .list {
max-height: 200px;
min-height: 200px;
overflow-y: auto;
max-height: 200px;
min-height: 200px;
overflow-y: auto;
}

#select-board-dialog .selectBoardContainer .body .ports.list {
margin: 47px 0px 0px 0px /* 47 is 37 as input height for the `Boards`, plus 10 margin bottom. */
margin: 47px 0px 0px 0px; /* 47 is 37 as input height for the `Boards`, plus 10 margin bottom. */
}

#select-board-dialog .selectBoardContainer .body .search {
margin-bottom: 10px;
display: flex;
align-items: center;
padding-right: 5px;
margin-bottom: 10px;
display: flex;
align-items: center;
padding-right: 5px;
}

.p-Widget.dialogOverlay .dialogContent.select-board-dialog {
width: 500px;
width: 500px;
}
.arduino-boards-toolbar-item-container {
margin-left: 3px;
margin-left: 3px;
}

.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container {
display: flex;
align-items: baseline;
width: 100%;
.arduino-boards-toolbar-item-container
.arduino-boards-toolbar-item
.inner-container {
display: flex;
align-items: baseline;
width: 100%;
}

.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .notAttached {
width: 10px;
height: 10px;
color: red;
margin: 0 5px;
.arduino-boards-toolbar-item-container
.arduino-boards-toolbar-item
.inner-container
.notAttached {
width: 10px;
height: 10px;
color: red;
margin: 0 5px;
}

.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .guessed {
width: 10px;
height: 10px;
color: var(--theia-warningBackground);
margin: 0 5px;
.arduino-boards-toolbar-item-container
.arduino-boards-toolbar-item
.inner-container
.guessed {
width: 10px;
height: 10px;
color: var(--theia-warningBackground);
margin: 0 5px;
}

.arduino-boards-toolbar-item-container {
display: flex;
align-items: center;
width: 220px;
display: flex;
align-items: center;
width: 220px;
}

.arduino-boards-toolbar-item .label {
height: 100%;
display: flex;
align-items: center;
margin: 0 5px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
margin: 0 5px;
width: 100%;
}

.arduino-boards-toolbar-item .caret {
width: 10px;
margin-right: 5px;
width: 10px;
margin-right: 5px;
}

.arduino-boards-toolbar-item {
background: var(--theia-tab-unfocusedActiveBackground);
color: var(--theia-foreground);
height: 22px;
display: flex;
width: 100%;
overflow: hidden;
margin: 0px 3px 0px 3px;
border: 1px solid var(--theia-dropdown-border);
background: var(--theia-tab-unfocusedActiveBackground);
color: var(--theia-foreground);
height: 22px;
display: flex;
width: 100%;
overflow: hidden;
margin: 0px 3px 0px 3px;
border: 1px solid var(--theia-dropdown-border);
}

.arduino-boards-dropdown-list {
border: 3px solid var(--theia-activityBar-background);
margin: -1px;
z-index: 1;
border: 1px solid var(--theia-dropdown-border);
border: 3px solid var(--theia-activityBar-background);
margin: -1px;
z-index: 1;
border: 1px solid var(--theia-dropdown-border);
}

.arduino-boards-dropdown-item {
font-size: var(--theia-ui-font-size1);
display: flex;
padding: 10px;
cursor: pointer;
color: var(--theia-foreground);
background: var(--theia-tab-unfocusedActiveBackground);
border: 1px solid var(--theia-tab-unfocusedActiveBackground);
font-size: var(--theia-ui-font-size1);
display: flex;
padding: 10px;
cursor: pointer;
color: var(--theia-foreground);
background: var(--theia-tab-unfocusedActiveBackground);
border: 1px solid var(--theia-tab-unfocusedActiveBackground);
}

.arduino-boards-dropdown-item .fa-check {
color: var(--theia-arduino-branding-primary);
align-self: center;
color: var(--theia-arduino-branding-primary);
align-self: center;
}

.arduino-boards-dropdown-item.selected,
.arduino-boards-dropdown-item:hover {
border: 1px solid var(--theia-focusBorder);
border: 1px solid var(--theia-focusBorder);
}

.arduino-board-dropdown-footer {
color: var(--theia-arduino-branding-primary);
border-top: 1px solid var(--theia-dropdown-border);
}
2 changes: 1 addition & 1 deletion i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
"noneSelected": "No boards selected.",
"noPortsSelected": "No ports selected for board: '{0}'.",
"noFQBN": "The FQBN is not available for the selected board \"{0}\". Do you have the corresponding core installed?",
"openBoardsConfig": "Select Other Board & Port",
"openBoardsConfig": "Select other board and port…",
"boardListItem": "{0} at {1}",
"selectBoardForInfo": "Please select a board to obtain board info.",
"platformMissing": "The platform for the selected '{0}' board is not installed.",
Expand Down