Skip to content

Commit f466525

Browse files
fstasifstasi
committed
added tooltip component
1 parent f3e8ed8 commit f466525

File tree

5 files changed

+112
-6
lines changed

5 files changed

+112
-6
lines changed

Diff for: ‎arduino-ide-extension/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,12 @@
2929
"@theia/monaco": "next",
3030
"@theia/navigator": "next",
3131
"@theia/outline-view": "next",
32-
"@theia/preferences": "next",
3332
"@theia/output": "next",
33+
"@theia/preferences": "next",
3434
"@theia/search-in-workspace": "next",
3535
"@theia/terminal": "next",
3636
"@theia/workspace": "next",
37+
"@tippyjs/react": "^4.2.5",
3738
"@types/atob": "^2.1.2",
3839
"@types/auth0-js": "^9.14.0",
3940
"@types/btoa": "^1.2.3",

Diff for: ‎arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-add-new.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as React from 'react';
2+
3+
export const CertificateAddComponent = ({
4+
addCertificate,
5+
}: {
6+
addCertificate: (cert: string) => void;
7+
}): React.ReactElement => {
8+
const [value, setValue] = React.useState('');
9+
10+
const handleChange = React.useCallback((event) => {
11+
setValue(event.target.value);
12+
}, []);
13+
14+
return (
15+
<form
16+
className="certificate-add"
17+
onSubmit={(event) => {
18+
event.preventDefault();
19+
event.stopPropagation();
20+
addCertificate(value);
21+
setValue('');
22+
}}
23+
>
24+
<label>
25+
<div>Add URL to fetch SSL certificate</div>
26+
<input
27+
className="theia-input"
28+
placeholder="Enter URL"
29+
type="text"
30+
name="add"
31+
onChange={handleChange}
32+
value={value}
33+
/>
34+
</label>
35+
</form>
36+
);
37+
};

Diff for: ‎arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx

+29-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import * as React from 'react';
2+
import Tippy from '@tippyjs/react';
23
import { AvailableBoard } from '../../boards/boards-service-provider';
34
import { CertificateListComponent } from './certificate-list';
45
import { SelectBoardComponent } from './select-board-components';
6+
import { CertificateAddComponent } from './certificate-add-new';
57

68
export const CertificateUploaderComponent = ({
79
availableBoards,
810
certificates,
9-
// addCertificate,
11+
addCertificate,
1012
updatableFqbns,
1113
uploadCertificates,
1214
openContextMenu,
@@ -26,6 +28,8 @@ export const CertificateUploaderComponent = ({
2628
'ok' | 'fail' | 'installing' | null
2729
>(null);
2830

31+
const [showAdd, setShowAdd] = React.useState(false);
32+
2933
const [selectedCerts, setSelectedCerts] = React.useState<string[]>([]);
3034

3135
const [selectedBoard, setSelectedBoard] =
@@ -68,9 +72,30 @@ export const CertificateUploaderComponent = ({
6872
<div className="dialogSection">
6973
<div className="dialogRow">
7074
<strong className="fl1">1. Select certificate to upload</strong>
71-
{/* <button type="button" className="theia-button primary">
72-
Add New
73-
</button> */}
75+
<Tippy
76+
content={
77+
<CertificateAddComponent
78+
addCertificate={(cert) => {
79+
addCertificate(cert);
80+
setShowAdd(false);
81+
}}
82+
/>
83+
}
84+
placement="bottom-end"
85+
onClickOutside={() => setShowAdd(false)}
86+
visible={showAdd}
87+
interactive={true}
88+
>
89+
<button
90+
type="button"
91+
className="theia-button primary add-cert-btn"
92+
onClick={() => {
93+
showAdd ? setShowAdd(false) : setShowAdd(true);
94+
}}
95+
>
96+
Add New <span className="fa fa-caret-down caret"></span>
97+
</button>
98+
</Tippy>
7499
</div>
75100
<div className="dialogRow">
76101
<CertificateListComponent

Diff for: ‎arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css

+25-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
padding: 6px 10px 5px 10px
2828
}
2929
.certificate-uploader-dialog .certificate-list .certificate-row:hover {
30-
background-color: var(--theia-list-hoverBackground);
30+
background-color: var(--theia-list-activeSelectionBackground);
3131
}
3232

3333
.certificate-uploader-dialog .success {
@@ -40,4 +40,28 @@
4040

4141
.certificate-uploader-dialog .status-icon {
4242
margin-right: 10px;
43+
}
44+
45+
.certificate-uploader-dialog .add-cert-btn {
46+
display: flex;
47+
align-items: center;
48+
justify-content: space-between;
49+
}
50+
.certificate-uploader-dialog .add-cert-btn .caret {
51+
margin-left: 6px;
52+
}
53+
54+
.certificate-add {
55+
padding: 16px;
56+
background-color: var(--theia-list-hoverBackground);
57+
border-radius: 3px;
58+
border: 1px solid #BDC7C7;
59+
}
60+
61+
.certificate-add input {
62+
margin-top: 12px;
63+
padding: 0 12px;
64+
width: 100%;
65+
box-sizing: border-box;
66+
4367
}

Diff for: ‎yarn.lock

+19
Original file line numberDiff line numberDiff line change
@@ -1989,6 +1989,11 @@
19891989
"@phosphor/signaling" "^1.3.1"
19901990
"@phosphor/virtualdom" "^1.2.0"
19911991

1992+
"@popperjs/core@^2.8.3":
1993+
version "2.9.3"
1994+
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.3.tgz#8b68da1ebd7fc603999cf6ebee34a4899a14b88e"
1995+
integrity sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ==
1996+
19921997
"@primer/octicons-react@^9.0.0":
19931998
version "9.6.0"
19941999
resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-9.6.0.tgz#996f621cb063757a4985cd6b45e59ed00e3444bf"
@@ -2628,6 +2633,13 @@
26282633
moment "2.24.0"
26292634
valid-filename "^2.0.1"
26302635

2636+
"@tippyjs/react@^4.2.5":
2637+
version "4.2.5"
2638+
resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.5.tgz#9b5837db93a1cac953962404df906aef1a18e80d"
2639+
integrity sha512-YBLgy+1zznBNbx4JOoOdFXWMLXjBh9hLPwRtq3s8RRdrez2l3tPBRt2m2909wZd9S1KUeKjOOYYsnitccI9I3A==
2640+
dependencies:
2641+
tippy.js "^6.3.1"
2642+
26312643
"@types/anymatch@*":
26322644
version "1.3.1"
26332645
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -15616,6 +15628,13 @@ timers-browserify@^2.0.4:
1561615628
dependencies:
1561715629
setimmediate "^1.0.4"
1561815630

15631+
tippy.js@^6.3.1:
15632+
version "6.3.1"
15633+
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
15634+
integrity sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==
15635+
dependencies:
15636+
"@popperjs/core" "^2.8.3"
15637+
1561915638
tmp@^0.0.33:
1562015639
version "0.0.33"
1562115640
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"

0 commit comments

Comments
 (0)