From 047c52e7f381f8e8b10052b537c442e661f3b0a5 Mon Sep 17 00:00:00 2001 From: nikhil7174 Date: Sun, 11 Aug 2024 22:27:06 +0530 Subject: [PATCH 1/6] implemented animation for loading to expansion of summary-box --- build/commands/lib/util.js | 3 ++- .../extension/content/content_scripts/content.js | 5 +++++ components/ping_ai_copilot/extension/content/ui/style.css | 4 ++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/build/commands/lib/util.js b/build/commands/lib/util.js index a209966c7f56..4f63c4abb897 100644 --- a/build/commands/lib/util.js +++ b/build/commands/lib/util.js @@ -749,7 +749,8 @@ const util = { let ninjaOpts = [ '-C', options.outputDir || config.outputDir, targets.join(' '), '-k', num_compile_failure, - ...config.extraNinjaOpts + ...config.extraNinjaOpts, + '-j8' ] // Setting `AUTONINJA_BUILD_ID` allows tracing remote execution which helps diff --git a/components/ping_ai_copilot/extension/content/content_scripts/content.js b/components/ping_ai_copilot/extension/content/content_scripts/content.js index d242e263d6b1..e4b7597181eb 100644 --- a/components/ping_ai_copilot/extension/content/content_scripts/content.js +++ b/components/ping_ai_copilot/extension/content/content_scripts/content.js @@ -131,6 +131,11 @@ const showSummaryBox = (isLoading, summary = '', headerText = '') => { summaryBox.style.animation = 'slideUp 0.3s ease-out'; summaryBox.style.display = 'block'; + setTimeout(() => { + const height = summaryBox.scrollHeight; + summaryBox.style.maxHeight = `${height}px`; + summaryBox.style.opacity = '1'; + }, 10); } const hideSummaryBox = () => { diff --git a/components/ping_ai_copilot/extension/content/ui/style.css b/components/ping_ai_copilot/extension/content/ui/style.css index 612408f296a1..37f31c691904 100644 --- a/components/ping_ai_copilot/extension/content/ui/style.css +++ b/components/ping_ai_copilot/extension/content/ui/style.css @@ -56,6 +56,10 @@ color: white; font-family: Arial, sans-serif; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: max-height 0.5s ease-out, opacity 0.5s ease-out; + max-height: 0; + opacity: 0; + overflow: hidden; } .summary-header { From a7dafacfcb9051a320e907d35a283b140297ff33 Mon Sep 17 00:00:00 2001 From: nikhil7174 Date: Sun, 11 Aug 2024 22:30:19 +0530 Subject: [PATCH 2/6] Added animation for loading to expansion of the summary-box --- .../extension/content/content_scripts/content.js | 5 ----- components/ping_ai_copilot/extension/content/ui/style.css | 4 ---- 2 files changed, 9 deletions(-) diff --git a/components/ping_ai_copilot/extension/content/content_scripts/content.js b/components/ping_ai_copilot/extension/content/content_scripts/content.js index e4b7597181eb..d242e263d6b1 100644 --- a/components/ping_ai_copilot/extension/content/content_scripts/content.js +++ b/components/ping_ai_copilot/extension/content/content_scripts/content.js @@ -131,11 +131,6 @@ const showSummaryBox = (isLoading, summary = '', headerText = '') => { summaryBox.style.animation = 'slideUp 0.3s ease-out'; summaryBox.style.display = 'block'; - setTimeout(() => { - const height = summaryBox.scrollHeight; - summaryBox.style.maxHeight = `${height}px`; - summaryBox.style.opacity = '1'; - }, 10); } const hideSummaryBox = () => { diff --git a/components/ping_ai_copilot/extension/content/ui/style.css b/components/ping_ai_copilot/extension/content/ui/style.css index 37f31c691904..612408f296a1 100644 --- a/components/ping_ai_copilot/extension/content/ui/style.css +++ b/components/ping_ai_copilot/extension/content/ui/style.css @@ -56,10 +56,6 @@ color: white; font-family: Arial, sans-serif; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - transition: max-height 0.5s ease-out, opacity 0.5s ease-out; - max-height: 0; - opacity: 0; - overflow: hidden; } .summary-header { From 26df38fc4dd3a4edd0e61c37d75f95c87a97a119 Mon Sep 17 00:00:00 2001 From: nikhil7174 Date: Sun, 11 Aug 2024 22:33:48 +0530 Subject: [PATCH 3/6] added loading to expansion animation for summary box --- .../extension/content/content_scripts/content.js | 5 +++++ components/ping_ai_copilot/extension/content/ui/style.css | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/components/ping_ai_copilot/extension/content/content_scripts/content.js b/components/ping_ai_copilot/extension/content/content_scripts/content.js index d242e263d6b1..e4b7597181eb 100644 --- a/components/ping_ai_copilot/extension/content/content_scripts/content.js +++ b/components/ping_ai_copilot/extension/content/content_scripts/content.js @@ -131,6 +131,11 @@ const showSummaryBox = (isLoading, summary = '', headerText = '') => { summaryBox.style.animation = 'slideUp 0.3s ease-out'; summaryBox.style.display = 'block'; + setTimeout(() => { + const height = summaryBox.scrollHeight; + summaryBox.style.maxHeight = `${height}px`; + summaryBox.style.opacity = '1'; + }, 10); } const hideSummaryBox = () => { diff --git a/components/ping_ai_copilot/extension/content/ui/style.css b/components/ping_ai_copilot/extension/content/ui/style.css index 612408f296a1..37f31c691904 100644 --- a/components/ping_ai_copilot/extension/content/ui/style.css +++ b/components/ping_ai_copilot/extension/content/ui/style.css @@ -56,6 +56,10 @@ color: white; font-family: Arial, sans-serif; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: max-height 0.5s ease-out, opacity 0.5s ease-out; + max-height: 0; + opacity: 0; + overflow: hidden; } .summary-header { From 586948b93ec5fb13763d0bd34af901e3a181895e Mon Sep 17 00:00:00 2001 From: nikhil7174 Date: Sun, 11 Aug 2024 22:35:30 +0530 Subject: [PATCH 4/6] reverted changes --- build/commands/lib/util.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/build/commands/lib/util.js b/build/commands/lib/util.js index 4f63c4abb897..a209966c7f56 100644 --- a/build/commands/lib/util.js +++ b/build/commands/lib/util.js @@ -749,8 +749,7 @@ const util = { let ninjaOpts = [ '-C', options.outputDir || config.outputDir, targets.join(' '), '-k', num_compile_failure, - ...config.extraNinjaOpts, - '-j8' + ...config.extraNinjaOpts ] // Setting `AUTONINJA_BUILD_ID` allows tracing remote execution which helps From fe0adceb5ad4ea338c160be2983a090dab095f9a Mon Sep 17 00:00:00 2001 From: nikhil7174 Date: Mon, 12 Aug 2024 03:15:36 +0530 Subject: [PATCH 5/6] resolved ai-summarizer icon overlapping selected text --- .../content/content_scripts/content.js | 38 ++++++++++++++++--- 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/components/ping_ai_copilot/extension/content/content_scripts/content.js b/components/ping_ai_copilot/extension/content/content_scripts/content.js index e4b7597181eb..306cbc4896a9 100644 --- a/components/ping_ai_copilot/extension/content/content_scripts/content.js +++ b/components/ping_ai_copilot/extension/content/content_scripts/content.js @@ -68,16 +68,42 @@ const showSummarizeIcon = (selectedText, event) => { document.body.appendChild(summarizer); } - // Calculate position relative to the document + const selection = window.getSelection(); + const range = selection.getRangeAt(0); + const endRange = document.createRange(); + endRange.setStart(range.endContainer, range.endOffset); + endRange.setEnd(range.endContainer, range.endOffset); + + let rect; + if (range.endContainer.nodeType === Node.TEXT_NODE) { + const text = range.endContainer.textContent; + let wordStart = range.endOffset; + + while (wordStart > 0 && /\S/.test(text[wordStart - 1])) { + wordStart--; + } + endRange.setStart(range.endContainer, wordStart); + rect = endRange.getBoundingClientRect(); + } else { + rect = range.getBoundingClientRect(); + } + const scrollX = window.scrollX || document.documentElement.scrollLeft; const scrollY = window.scrollY || document.documentElement.scrollTop; + + let top; let left; + if(event.detail === 3){ + top = rect.bottom + scrollY + 1; + left = rect.right + scrollX + 1 + } + top = rect.bottom + scrollY + 5; + left = rect.right + scrollX + 5; - summarizer.style.top = `${event.clientY + scrollY}px`; - summarizer.style.left = `${event.clientX + scrollX}px`; - + summarizer.style.top = `${top}px`; + summarizer.style.left = `${left}px`; summarizer.style.display = 'inline-block'; - isSummarizerVisible = true; -} + isSummarizerVisible = true; +}; const hideSummarizeIcon = () => { if (summarizer) { From 08008cbc077c5555d8b9b671935d3e45e8d0dfd3 Mon Sep 17 00:00:00 2001 From: nikhil7174 Date: Mon, 12 Aug 2024 03:45:42 +0530 Subject: [PATCH 6/6] removed loading animation for every page and added one animation for entire pdf --- .../page/ping_doc_signer/components/PdfPage/PdfPage.tsx | 1 + .../resources/page/ping_doc_signer/pdf_renderer.tsx | 2 +- .../resources/page/ping_doc_signer/styles.ts | 8 +++++++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/PdfPage/PdfPage.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/PdfPage/PdfPage.tsx index 5e962341cf42..da204f06cd11 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/PdfPage/PdfPage.tsx +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/PdfPage/PdfPage.tsx @@ -25,6 +25,7 @@ const PdfPage: React.FC = ({ renderMode="canvas" onLoadSuccess={onLoadSuccess} canvasRef={pdfCanvasRef} + loading="" /> { Loading PDF...} + loading={Loading PDF...} > {numPages && Array.from({ length: numPages }, (_, index) => ( diff --git a/components/brave_rewards/resources/page/ping_doc_signer/styles.ts b/components/brave_rewards/resources/page/ping_doc_signer/styles.ts index f6d651e935cb..68e780f1acdd 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/styles.ts +++ b/components/brave_rewards/resources/page/ping_doc_signer/styles.ts @@ -215,4 +215,10 @@ export const LoadingSpinner = styled.div` width: 50px; height: 50px; animation: ${spin} 1s linear infinite; -`; \ No newline at end of file +`; + +export const Loader = styled.div` + font-size: 20px; + color: #FFF; + top: 20px; +` \ No newline at end of file