Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 22615d0

Browse files
silvanocerzaAlberto Iannaccone
silvanocerza
authored and
Alberto Iannaccone
committedNov 24, 2021
Move Select other board button to bottom of Board selector dropdown and change its style
1 parent 504e351 commit 22615d0

File tree

3 files changed

+139
-122
lines changed

3 files changed

+139
-122
lines changed
 

‎arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
5050
if (coords === 'hidden') {
5151
return '';
5252
}
53+
const footerLabel = nls.localize(
54+
'arduino/board/openBoardsConfig',
55+
'Select other board and port…'
56+
);
5357
return (
5458
<div
5559
className="arduino-boards-dropdown-list"
@@ -58,13 +62,6 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
5862
...coords,
5963
}}
6064
>
61-
{this.renderItem({
62-
label: nls.localize(
63-
'arduino/board/openBoardsConfig',
64-
'Select Other Board & Port'
65-
),
66-
onClick: () => this.props.openBoardsConfig(),
67-
})}
6865
{items
6966
.map(({ name, port, selected, onClick }) => ({
7067
label: nls.localize(
@@ -77,6 +74,13 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
7774
onClick,
7875
}))
7976
.map(this.renderItem)}
77+
<div
78+
key={footerLabel}
79+
className="arduino-boards-dropdown-item arduino-board-dropdown-footer"
80+
onClick={() => this.props.openBoardsConfig()}
81+
>
82+
<div>{footerLabel}</div>
83+
</div>
8084
</div>
8185
);
8286
}

‎arduino-ide-extension/src/browser/style/boards-config-dialog.css

+127-114
Original file line numberDiff line numberDiff line change
@@ -1,224 +1,237 @@
11
div#select-board-dialog {
2-
margin: 5px;
2+
margin: 5px;
33
}
44

55
div#select-board-dialog .selectBoardContainer .body {
6-
display: flex;
7-
overflow: hidden;
6+
display: flex;
7+
overflow: hidden;
88
}
99

1010
.select-board-dialog .head {
11-
margin: 5px;
11+
margin: 5px;
1212
}
1313

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

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

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

3030
#select-board-dialog .selectBoardContainer .search,
3131
#select-board-dialog .selectBoardContainer .search input,
3232
#select-board-dialog .selectBoardContainer .list,
3333
#select-board-dialog .selectBoardContainer .list {
34-
background: var(--theia-editor-background);
34+
background: var(--theia-editor-background);
3535
}
3636

3737
#select-board-dialog .selectBoardContainer .body .search input {
38-
border: none;
39-
width: 100%;
40-
height: auto;
41-
max-height: 37px;
42-
padding: 10px 5px 10px 10px;
43-
margin: 0;
44-
vertical-align: top;
45-
display: flex;
46-
color: var(--theia-editor-foreground);
38+
border: none;
39+
width: 100%;
40+
height: auto;
41+
max-height: 37px;
42+
padding: 10px 5px 10px 10px;
43+
margin: 0;
44+
vertical-align: top;
45+
display: flex;
46+
color: var(--theia-editor-foreground);
4747
}
4848

4949
#select-board-dialog .selectBoardContainer .body .search input:focus {
50-
box-shadow: none;
50+
box-shadow: none;
5151
}
5252

5353
#select-board-dialog .selectBoardContainer .body .container {
54-
flex: 1;
55-
padding: 0px 10px 0px 0px;
56-
min-width: 240px;
57-
max-width: 240px;
54+
flex: 1;
55+
padding: 0px 10px 0px 0px;
56+
min-width: 240px;
57+
max-width: 240px;
5858
}
5959

6060
#select-board-dialog .selectBoardContainer .body .left.container .content {
61-
margin: 0 5px 0 0;
61+
margin: 0 5px 0 0;
6262
}
6363

6464
#select-board-dialog .selectBoardContainer .body .right.container .content {
65-
margin: 0 0 0 5px;
65+
margin: 0 0 0 5px;
6666
}
6767

6868
#select-board-dialog .selectBoardContainer .body .container .content .title {
69-
color: #7f8c8d;
70-
padding: 0px 0px 10px 0px;
71-
text-transform: uppercase;
69+
color: #7f8c8d;
70+
padding: 0px 0px 10px 0px;
71+
text-transform: uppercase;
7272
}
7373

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

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

8888
#select-board-dialog .selectBoardContainer .body .list .item {
89-
padding: 10px 5px 10px 10px;
90-
display: flex;
91-
justify-content: end;
92-
white-space: nowrap;
93-
overflow-x: hidden;
89+
padding: 10px 5px 10px 10px;
90+
display: flex;
91+
justify-content: end;
92+
white-space: nowrap;
93+
overflow-x: hidden;
9494
}
9595

9696
#select-board-dialog .selectBoardContainer .body .list .item .selected-icon {
97-
margin-left: auto;
97+
margin-left: auto;
9898
}
9999

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

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

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

117117
#select-board-dialog .selectBoardContainer .body .list .label {
118-
max-width: 215px;
119-
width: 215px;
120-
white-space: pre;
121-
overflow: hidden;
122-
text-overflow: ellipsis;
118+
max-width: 215px;
119+
width: 215px;
120+
white-space: pre;
121+
overflow: hidden;
122+
text-overflow: ellipsis;
123123
}
124124

125125
#select-board-dialog .selectBoardContainer .body .list {
126-
max-height: 200px;
127-
min-height: 200px;
128-
overflow-y: auto;
126+
max-height: 200px;
127+
min-height: 200px;
128+
overflow-y: auto;
129129
}
130130

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

135135
#select-board-dialog .selectBoardContainer .body .search {
136-
margin-bottom: 10px;
137-
display: flex;
138-
align-items: center;
139-
padding-right: 5px;
136+
margin-bottom: 10px;
137+
display: flex;
138+
align-items: center;
139+
padding-right: 5px;
140140
}
141141

142142
.p-Widget.dialogOverlay .dialogContent.select-board-dialog {
143-
width: 500px;
143+
width: 500px;
144144
}
145145
.arduino-boards-toolbar-item-container {
146-
margin-left: 3px;
146+
margin-left: 3px;
147147
}
148148

149-
.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container {
150-
display: flex;
151-
align-items: baseline;
152-
width: 100%;
149+
.arduino-boards-toolbar-item-container
150+
.arduino-boards-toolbar-item
151+
.inner-container {
152+
display: flex;
153+
align-items: baseline;
154+
width: 100%;
153155
}
154156

155-
.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .notAttached {
156-
width: 10px;
157-
height: 10px;
158-
color: red;
159-
margin: 0 5px;
157+
.arduino-boards-toolbar-item-container
158+
.arduino-boards-toolbar-item
159+
.inner-container
160+
.notAttached {
161+
width: 10px;
162+
height: 10px;
163+
color: red;
164+
margin: 0 5px;
160165
}
161166

162-
.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .guessed {
163-
width: 10px;
164-
height: 10px;
165-
color: var(--theia-warningBackground);
166-
margin: 0 5px;
167+
.arduino-boards-toolbar-item-container
168+
.arduino-boards-toolbar-item
169+
.inner-container
170+
.guessed {
171+
width: 10px;
172+
height: 10px;
173+
color: var(--theia-warningBackground);
174+
margin: 0 5px;
167175
}
168176

169177
.arduino-boards-toolbar-item-container {
170-
display: flex;
171-
align-items: center;
172-
width: 220px;
178+
display: flex;
179+
align-items: center;
180+
width: 220px;
173181
}
174182

175183
.arduino-boards-toolbar-item .label {
176-
height: 100%;
177-
display: flex;
178-
align-items: center;
179-
margin: 0 5px;
180-
width: 100%;
184+
height: 100%;
185+
display: flex;
186+
align-items: center;
187+
margin: 0 5px;
188+
width: 100%;
181189
}
182190

183191
.arduino-boards-toolbar-item .caret {
184-
width: 10px;
185-
margin-right: 5px;
192+
width: 10px;
193+
margin-right: 5px;
186194
}
187195

188196
.arduino-boards-toolbar-item {
189-
background: var(--theia-tab-unfocusedActiveBackground);
190-
color: var(--theia-foreground);
191-
height: 22px;
192-
display: flex;
193-
width: 100%;
194-
overflow: hidden;
195-
margin: 0px 3px 0px 3px;
196-
border: 1px solid var(--theia-dropdown-border);
197+
background: var(--theia-tab-unfocusedActiveBackground);
198+
color: var(--theia-foreground);
199+
height: 22px;
200+
display: flex;
201+
width: 100%;
202+
overflow: hidden;
203+
margin: 0px 3px 0px 3px;
204+
border: 1px solid var(--theia-dropdown-border);
197205
}
198206

199207
.arduino-boards-dropdown-list {
200-
border: 3px solid var(--theia-activityBar-background);
201-
margin: -1px;
202-
z-index: 1;
203-
border: 1px solid var(--theia-dropdown-border);
208+
border: 3px solid var(--theia-activityBar-background);
209+
margin: -1px;
210+
z-index: 1;
211+
border: 1px solid var(--theia-dropdown-border);
204212
}
205213

206214
.arduino-boards-dropdown-item {
207-
font-size: var(--theia-ui-font-size1);
208-
display: flex;
209-
padding: 10px;
210-
cursor: pointer;
211-
color: var(--theia-foreground);
212-
background: var(--theia-tab-unfocusedActiveBackground);
213-
border: 1px solid var(--theia-tab-unfocusedActiveBackground);
215+
font-size: var(--theia-ui-font-size1);
216+
display: flex;
217+
padding: 10px;
218+
cursor: pointer;
219+
color: var(--theia-foreground);
220+
background: var(--theia-tab-unfocusedActiveBackground);
221+
border: 1px solid var(--theia-tab-unfocusedActiveBackground);
214222
}
215223

216224
.arduino-boards-dropdown-item .fa-check {
217-
color: var(--theia-arduino-branding-primary);
218-
align-self: center;
225+
color: var(--theia-arduino-branding-primary);
226+
align-self: center;
219227
}
220228

221229
.arduino-boards-dropdown-item.selected,
222230
.arduino-boards-dropdown-item:hover {
223-
border: 1px solid var(--theia-focusBorder);
231+
border: 1px solid var(--theia-focusBorder);
232+
}
233+
234+
.arduino-board-dropdown-footer {
235+
color: var(--theia-arduino-branding-primary);
236+
border-top: 1px solid var(--theia-dropdown-border);
224237
}

‎i18n/en.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
"noneSelected": "No boards selected.",
121121
"noPortsSelected": "No ports selected for board: '{0}'.",
122122
"noFQBN": "The FQBN is not available for the selected board \"{0}\". Do you have the corresponding core installed?",
123-
"openBoardsConfig": "Select Other Board & Port",
123+
"openBoardsConfig": "Select other board and port…",
124124
"boardListItem": "{0} at {1}",
125125
"selectBoardForInfo": "Please select a board to obtain board info.",
126126
"platformMissing": "The platform for the selected '{0}' board is not installed.",

0 commit comments

Comments
 (0)
Please sign in to comment.