Skip to content

Commit 78ed015

Browse files
silvanocerzasilvanocerza
committed
Move Select other board button to bottom of Board selector dropdown and change its style
1 parent 04722fc commit 78ed015

File tree

2 files changed

+138
-121
lines changed

2 files changed

+138
-121
lines changed

Diff for: ‎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
}

Diff for: ‎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
}

0 commit comments

Comments
 (0)