From c8717c519cf7fa8a410230e2e2c45b84eb162148 Mon Sep 17 00:00:00 2001 From: nikhil7174 Date: Sun, 11 Aug 2024 18:15:23 +0530 Subject: [PATCH] Fixed icon visibility on clicking, its position while scrolling, settings header bg-color --- .../components/Header/Header.tsx | 2 +- .../components/Header/styles.ts | 6 +-- .../content/content_scripts/content.js | 44 ++++++++++++++----- .../extension/content/ui/style.css | 5 ++- ui/webui/resources/css/md_colors.css | 3 +- 5 files changed, 42 insertions(+), 18 deletions(-) diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx index 253b6392724c..9cb551f31469 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx @@ -140,7 +140,7 @@ export const Header: React.FC = ({ - ? + ? diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/Header/styles.ts b/components/brave_rewards/resources/page/ping_doc_signer/components/Header/styles.ts index 58c139850469..f87ab865a703 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/Header/styles.ts +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/Header/styles.ts @@ -206,12 +206,12 @@ export const StyledNavBar = styled('nav')` margin-left: 20px `; - export const StyledHelpButton = styled('button')` + export const StyledHelpButton = styled('button')` font-size: 18px; - color: ${({ pdfFile }) => (pdfFile ? '#FFF' : 'gray')}; + color: #FFF; width: 34px; height: 34px; - border: 2px solid ${({ pdfFile }) => (pdfFile ? '#FFF' : 'gray')}; + border: 2px solid #FFF; border-radius: 20px; background: transparent; `; 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 b8f6c752b221..d242e263d6b1 100644 --- a/components/ping_ai_copilot/extension/content/content_scripts/content.js +++ b/components/ping_ai_copilot/extension/content/content_scripts/content.js @@ -1,10 +1,19 @@ let summarizer = null; let summaryBox = null; -let lastSelectedText = ''; +let isSummarizerVisible = false; +let isTextSelected = false; + +const debounce = (func, delay) => { + let timeoutId; + return (...args) => { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => func(...args), delay); + }; +}; const initializeExtension = () => { document.removeEventListener('mouseup', handleTextSelection); - document.addEventListener('mouseup', handleTextSelection); + document.addEventListener('mouseup', debounce(handleTextSelection, 190)); document.addEventListener('click', handleDocumentClick); } @@ -13,23 +22,30 @@ const handleTextSelection = (event) => { const selectedText = selection.toString().trim(); const wordCount = selectedText.split(/\s+/).length; if (wordCount >= 10 && wordCount <= 1000 && !(summaryBox && summaryBox.contains(selection.anchorNode))) { - if (selectedText !== lastSelectedText) { + if (!isSummarizerVisible) { showSummarizeIcon(selectedText, event); - lastSelectedText = selectedText; + isTextSelected = true; } } else { hideSummarizeIcon(); + isTextSelected = false; } } const handleDocumentClick = (event) => { - if ( - summaryBox && - !summaryBox.contains(event.target) && - (!summarizer || !summarizer.contains(event.target)) - ) { + if(summaryBox && !summaryBox.contains(event.target)){ hideSummaryBox(); } + if(isTextSelected && summarizer){ + if(summaryBox && !summaryBox.contains(event.target)){ + hideSummarizeIcon() + hideSummaryBox(); + } + else if(!summaryBox){ + hideSummarizeIcon() + hideSummaryBox(); + } + } } const showSummarizeIcon = (selectedText, event) => { @@ -52,15 +68,21 @@ const showSummarizeIcon = (selectedText, event) => { document.body.appendChild(summarizer); } - summarizer.style.top = `${event.clientY}px`; - summarizer.style.left = `${event.clientX}px`; + // Calculate position relative to the document + const scrollX = window.scrollX || document.documentElement.scrollLeft; + const scrollY = window.scrollY || document.documentElement.scrollTop; + + summarizer.style.top = `${event.clientY + scrollY}px`; + summarizer.style.left = `${event.clientX + scrollX}px`; summarizer.style.display = 'inline-block'; + isSummarizerVisible = true; } const hideSummarizeIcon = () => { if (summarizer) { summarizer.style.display = 'none'; + isSummarizerVisible = false; } } diff --git a/components/ping_ai_copilot/extension/content/ui/style.css b/components/ping_ai_copilot/extension/content/ui/style.css index c5925ad1cf4a..612408f296a1 100644 --- a/components/ping_ai_copilot/extension/content/ui/style.css +++ b/components/ping_ai_copilot/extension/content/ui/style.css @@ -21,7 +21,7 @@ } #summarizer-icon { - position: fixed; + position: absolute; z-index: 1000000000 !important; border-radius: 50%; } @@ -50,7 +50,8 @@ border-bottom: 7px solid #2BB563; border-left: 4px solid #2BB563; border-right: 4px solid #2BB563; - background: linear-gradient(153deg, #3674AD -39.05%, #112130 99.39%); border-radius: 24px; + background: linear-gradient(153deg, #4D97DA, #112130); + border-radius: 24px; padding: 24px; color: white; font-family: Arial, sans-serif; diff --git a/ui/webui/resources/css/md_colors.css b/ui/webui/resources/css/md_colors.css index 925d553a0157..1d82f1970736 100644 --- a/ui/webui/resources/css/md_colors.css +++ b/ui/webui/resources/css/md_colors.css @@ -1,5 +1,6 @@ html { - --brave-toolbar-gradient: linear-gradient(90deg, #50C276 0%, #27a348 100%); /* linear gradient */ + /* to change color */ + --brave-toolbar-gradient: linear-gradient(90deg, rgba(43, 161, 108, 1) 0%, rgba(14, 77, 135, 1) 100%); /* linear gradient */ --md-background-color: rgb(233, 236, 239); /* neutral200 */ --md-loading-message-color: #5E6175; /* grey700 */ --md-toolbar-color: rgb(200, 44, 109); /* not design system color. middle value of toolbar's linear gradient. */