Implemented custom dropdown for board selection

Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker
2019-07-19 17:44:27 +02:00
parent c2fbccc9e8
commit 4d2bd87f74
5 changed files with 232 additions and 97 deletions

View File

@@ -123,30 +123,62 @@ button.theia-button.main {
.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container {
display: flex;
align-items: baseline;
margin: 0 5px;
width: 100%;
}
.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .notAttached {
width: 10px;
height: 10px;
color: red;
margin-right: 5px;
margin: 0 5px;
}
.arduino-boards-toolbar-item-container {
display: flex;
align-items: center;
width: 220px;
}
.arduino-boards-toolbar-item .label {
height: 100%;
display: flex;
align-items: center;
margin: 0 5px;
width: 100%;
font-weight: bold;
}
.arduino-boards-toolbar-item .caret {
width: 10px;
margin-right: 5px;
}
.arduino-boards-toolbar-item {
background: white;
height: 18px;
height: 22px;
display: flex;
width: 100%;
overflow: hidden;
}
.arduino-boards-dropdown-list {
background: #f7f7f7;
border: 3px solid var(--theia-border-color2);
margin: -3px;
}
.arduino-boards-dropdown-item {
font-size: var(--theia-ui-font-size1);
display: flex;
padding: 10px;
cursor: pointer;
}
.arduino-boards-dropdown-item .fa-check {
color: var(--theia-accent-color2);
}
.arduino-boards-dropdown-item.selected,
.arduino-boards-dropdown-item:hover {
background: var(--theia-ui-button-color-secondary-hover);
}

View File

@@ -61,21 +61,6 @@
opacity: 1;
}
.arduino-boards-toolbar-item-container {
display: flex;
align-items: center;
}
.arduino-boards-toolbar-item .label {
height: 100%;
display: flex;
align-items: center;
}
.arduino-boards-toolbar-item {
background: white;
}
.arduino-tool-item.item.connected-boards select {
line-height: var(--theia-content-line-height);
font-size: var(--theia-ui-font-size1);
@@ -104,4 +89,10 @@
.monaco-editor .margin {
border-right: 2px solid var(--theia-border-color1);
box-sizing: border-box;
}
.noWrapInfo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}