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

Prevent board selector item labels to overflow (#1216)

Browse Source 
* prevent board selector item labels to overflow

* make board selector show ellipsis when the board name is too long
This commit is contained in:
Alberto Iannaccone 2022-08-02 11:11:38 +02:00 committed by GitHub
parent d7f7010bb5
commit 564862e173
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
View File

@ -130,11 +130,14 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
protocolIcon
)}
/>
<div className="arduino-boards-dropdown-item--label">
<div className="arduino-boards-dropdown-item--board-label">
<div
className="arduino-boards-dropdown-item--label"
title={`${boardLabel}\n${port.address}`}
>
<div className="arduino-boards-dropdown-item--board-label noWrapInfo noselect">
{boardLabel}
</div>
<div className="arduino-boards-dropdown-item--port-label">
<div className="arduino-boards-dropdown-item--port-label noWrapInfo noselect">
{port.address}
</div>
</div>
@ -229,7 +232,8 @@ export class BoardsToolBarItem extends React.Component<
<div
className={classNames(
'arduino-boards-toolbar-item--label',
'noWrapInfo noselect',
'noWrapInfo',
'noselect',
{ 'arduino-boards-toolbar-item--label-connected': isConnected }
)}
>

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

@ -181,9 +181,6 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
}
.arduino-boards-toolbar-item--label {
height: 100%;
display: flex;
align-items: center;
width: 100%;
}
@ -227,6 +224,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
}
.arduino-boards-dropdown-item--label {
overflow: hidden;
flex: 1;
}