Fixed icon visibility on clicking, its position while scrolling, sett…

…ings header bg-color
ping-browser · Aug 11, 2024 · c8717c5 · c8717c5
1 parent 47de3d5
commit c8717c5
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 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
@@ -140,7 +140,7 @@ export const Header: React.FC<HeaderProps> = ({
                 </StyledHeaderControlsContainer>
                 <StyledHelpButtonContainer>
                 <a href="https://ping-browser.com/help-1" target="_blank" rel="noopener noreferrer">
-                    <StyledHelpButton disabled={!pdfFile} pdfFile={pdfFile}>?</StyledHelpButton>
+                    <StyledHelpButton>?</StyledHelpButton>
                 </a>
                 </StyledHelpButtonContainer>
             </StyledNavBar>          

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
@@ -206,12 +206,12 @@ export const StyledNavBar = styled('nav')`
    margin-left: 20px
  `;
 
- export const StyledHelpButton = styled('button')<StyledDisabledProps>`
+ 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
@@ -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
@@ -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
@@ -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. */