diff --git a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx index 0c6abbfaa..577bdd930 100644 --- a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx +++ b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx @@ -165,6 +165,37 @@ export class IDEUpdaterDialog extends ReactDialog { goToDownloadPageButton.focus(); } + private appendDonateFooter() { + const footer = document.createElement('div'); + footer.classList.add('ide-updater-dialog--footer'); + + footer.innerText = nls.localize( + 'arduino/ide-updater/donateText', + 'Open source is love, ' + ); + + const footerLink = document.createElement('a'); + footerLink.innerText = nls.localize( + 'arduino/ide-updater/donateLinkText', + 'donate to support us' + ); + footerLink.classList.add('ide-updater-dialog--footer-link'); + footerLink.onclick = () => + this.openExternal('https://www.arduino.cc/en/donate'); + + const footerLinkIcon = document.createElement('div'); + footerLinkIcon.title = nls.localize( + 'arduino/ide-updater/donateLinkIconTitle', + 'donate to support us' + ); + footerLinkIcon.classList.add('ide-updater-dialog--footer-link-icon'); + + footer.appendChild(footerLink); + footerLink.appendChild(footerLinkIcon); + + this.controlPanel.insertAdjacentElement('afterend', footer); + } + private openDownloadPage(): void { this.openExternal('https://www.arduino.cc/en/software'); this.close(); @@ -187,6 +218,7 @@ export class IDEUpdaterDialog extends ReactDialog { downloadStarted: true, }); this.clearButtons(); + this.appendDonateFooter(); this.updater.downloadUpdate(); } diff --git a/arduino-ide-extension/src/browser/icons/link-open-icon.svg b/arduino-ide-extension/src/browser/icons/link-open-icon.svg new file mode 100644 index 000000000..21136c806 --- /dev/null +++ b/arduino-ide-extension/src/browser/icons/link-open-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css index 5d5592baf..2c1860a36 100644 --- a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css +++ b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css @@ -34,6 +34,34 @@ min-width: 0; } +.ide-updater-dialog--footer { + display: flex; + justify-content: right; + align-items: center; + margin-top: -16px; + padding: 12px 0 24px 0; + border-top: 1px solid var(--theia-editorWidget-border); +} + +.ide-updater-dialog--footer-link { + display: flex; + align-items: center; + color: var(--theia-textLink-foreground); + font-weight: 500; + line-height: 13px; +} +.ide-updater-dialog--footer-link:hover { + color: var(--theia-textLink-foreground); + cursor: pointer; +} +.ide-updater-dialog--footer-link-icon { + -webkit-mask: url(../icons/link-open-icon.svg) center no-repeat; + background-color: var(--theia-textLink-foreground); + height: 24px; + width: 24px; + cursor: pointer; +} + .ide-updater-dialog .changelog { color: var(--theia-editor-foreground); background-color: var(--theia-editor-background); diff --git a/i18n/en.json b/i18n/en.json index 17cd55547..d93719b9f 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -275,6 +275,9 @@ "checkForUpdates": "Check for Arduino IDE Updates", "closeAndInstallButton": "Close and Install", "closeToInstallNotice": "Close the software and install the update on your machine.", + "donateLinkIconTitle": "donate to support us", + "donateLinkText": "donate to support us", + "donateText": "Open source is love, ", "downloadButton": "Download", "downloadingNotice": "Downloading the latest version of the Arduino IDE.", "errorCheckingForUpdates": "Error while checking for Arduino IDE updates.\n{0}",