From 244ed1f2104e4afd0de0dad4de56cd6cf96bd26f Mon Sep 17 00:00:00 2001 From: wanhose Date: Wed, 3 Apr 2024 21:19:44 +0200 Subject: [PATCH] feat(browser-extension): add button to open issue in GitHub after report --- .../browser-extension/src/scripts/dialog.js | 31 ++++++++++++------- .../browser-extension/src/styles/dialog.css | 30 +++++++++++++----- 2 files changed, 41 insertions(+), 20 deletions(-) diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js index 93849eb..65c8fb1 100644 --- a/packages/browser-extension/src/scripts/dialog.js +++ b/packages/browser-extension/src/scripts/dialog.js @@ -112,6 +112,9 @@ const reportDialogHtml = ` ${chrome.i18n.getMessage('reportDialog_submitExtraText')} + + ${chrome.i18n.getMessage('contextMenu_issueOption')} + @@ -121,25 +124,25 @@ const reportDialogHtml = ` * @description Dialog close button click handler * @param {MouseEvent} event */ -const closeButtonClickHandler = (event) => { +function closeButtonClickHandler(event) { const dialog = document.getElementById(reportDialogId); event.preventDefault(); dialog?.remove(); -}; +} /** * @description Hide report dialog */ -const hideReportDialog = () => { +function hideReportDialog() { document.getElementById(reportDialogId)?.remove(); -}; +} /** * @description Dialog radio input click handler * @param {MouseEvent} event */ -const radioClickHandler = (event) => { +function radioClickHandler(event) { const dialog = document.getElementById(reportDialogId); const radios = dialog.getElementsByTagName('report-dialog-radio'); const submitButton = dialog?.getElementsByTagName('report-dialog-submit-button')[0]; @@ -152,12 +155,12 @@ const radioClickHandler = (event) => { event.currentTarget.setAttribute('aria-checked', 'true'); submitButton.setAttribute('aria-disabled', 'false'); submitButton.addEventListener('click', submitButtonClickHandler); -}; +} /** * @description Show report dialog */ -const showReportDialog = () => { +function showReportDialog() { const parser = new DOMParser(); const result = parser.parseFromString(reportDialogHtml, 'text/html'); const dialog = result.body.firstElementChild; @@ -181,26 +184,30 @@ const showReportDialog = () => { if (!document.getElementById('report-dialog-font')) { document.head.appendChild(link); } -}; +} /** * @description Dialog submit button click handler * @param {MouseEvent} event */ -const submitButtonClickHandler = (event) => { +async function submitButtonClickHandler(event) { + event.preventDefault(); + const dialog = document.getElementById(reportDialogId); const formView = dialog?.getElementsByTagName('report-dialog-form-view')[0]; + const issueButton = dialog?.getElementsByTagName('report-dialog-issue-button')[0]; const option = dialog?.querySelector('report-dialog-radio[aria-checked="true"]'); const reasonIndex = option?.dataset.value; const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex]; const submitView = dialog?.getElementsByTagName('report-dialog-submit-view')[0]; const userAgent = window.navigator.userAgent; - event.preventDefault(); - dispatch({ userAgent, reason, type: 'REPORT' }); + const issueUrl = await dispatch({ userAgent, reason, type: 'REPORT' }); + formView?.setAttribute('hidden', 'true'); + issueButton?.addEventListener('click', () => window.open(issueUrl, '_blank')); submitView?.removeAttribute('hidden'); -}; +} /** * @description Listen to messages diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css index 4d179f8..e47f54a 100644 --- a/packages/browser-extension/src/styles/dialog.css +++ b/packages/browser-extension/src/styles/dialog.css @@ -70,6 +70,18 @@ report-dialog-close-button:hover { background-color: var(--cookie-dialog-monster-color-white); } +report-dialog-form { + display: flex; + flex-direction: column; + gap: 24px; +} + +report-dialog-form-view { + display: flex; + flex-direction: column; + gap: 24px; +} + report-dialog-form-view[hidden] { display: none; } @@ -96,7 +108,6 @@ report-dialog-radio { cursor: pointer; display: block; font-family: Inter, Arial, Helvetica, sans-serif; - margin-top: 18px; outline: none !important; padding-left: 24px; position: relative; @@ -148,8 +159,10 @@ report-dialog-radio:before { report-dialog-radio-group { display: flex; flex-direction: column; + gap: 18px; } +report-dialog-issue-button, report-dialog-submit-button { align-items: center; background-color: var(--cookie-dialog-monster-color-secondary); @@ -162,7 +175,6 @@ report-dialog-submit-button { font-size: 14px; height: 39px; justify-content: center; - margin-top: 24px; outline: none !important; padding: 8px 16px; text-align: center; @@ -170,12 +182,15 @@ report-dialog-submit-button { width: 100%; } +report-dialog-issue-button:focus, +report-dialog-issue-button:hover, report-dialog-submit-button:focus, report-dialog-submit-button:hover { background-color: var(--cookie-dialog-monster-color-white); color: var(--cookie-dialog-monster-color-secondary); } +report-dialog-issue-button[aria-disabled='true'], report-dialog-submit-button[aria-disabled='true'] { background-color: var(--cookie-dialog-monster-color-tertiary); border: 1px solid var(--cookie-dialog-monster-color-tertiary); @@ -186,18 +201,16 @@ report-dialog-submit-button[aria-disabled='true'] { report-dialog-submit-extra-text { font-family: inherit !important; font-size: 14px; - line-height: 14px; + line-height: 16px; margin: 0px; - margin-top: 16px; - text-align: center; + text-align: justify; } report-dialog-submit-text { font-family: inherit !important; font-size: 18px; - line-height: 18px; + line-height: 20px; margin: 0px; - margin-top: 24px; text-align: center; } @@ -206,8 +219,9 @@ report-dialog-submit-view { display: flex; flex-direction: column; font-family: Inter, Arial, Helvetica, sans-serif; + gap: 24px; justify-content: center; - min-height: 269px; + margin-top: 16px; } report-dialog-submit-view[hidden] {