From 3c7b13ee5f45cd24ebcab1e67410d06d6247b23a Mon Sep 17 00:00:00 2001 From: MDeeApp <6595194+MDeeApp@users.noreply.github.com> Date: Thu, 30 Oct 2025 16:54:35 +0100 Subject: [PATCH] bookmark AI Button visual fix --- extension/content.js | 93 +++++++++++++++++++++++++------------------- 1 file changed, 54 insertions(+), 39 deletions(-) diff --git a/extension/content.js b/extension/content.js index 4aca282..1c6a76b 100644 --- a/extension/content.js +++ b/extension/content.js @@ -3879,8 +3879,10 @@ async function addAICommentButton(container, postElement) { display: inline-flex; align-items: stretch; border-radius: 6px; - overflow: visible; + overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + transition: transform 0.2s ease, box-shadow 0.2s ease; `; const button = document.createElement('button'); @@ -3889,7 +3891,7 @@ async function addAICommentButton(container, postElement) { button.textContent = '✨ AI'; button.title = 'Generiere automatisch einen passenden Kommentar'; button.style.cssText = ` - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: transparent; color: white; border: none; padding: 6px 12px; @@ -3901,8 +3903,8 @@ async function addAICommentButton(container, postElement) { font-size: 13px; font-weight: 600; flex: 1 1 auto; - border-radius: 6px 0 0 6px; - transition: all 0.2s ease; + border-radius: 0; + transition: background-color 0.2s ease; `; const dropdownButton = document.createElement('button'); @@ -3914,7 +3916,7 @@ async function addAICommentButton(container, postElement) { dropdownButton.setAttribute('aria-haspopup', 'menu'); dropdownButton.setAttribute('aria-expanded', 'false'); dropdownButton.style.cssText = ` - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: transparent; color: white; border: none; width: 34px; @@ -3924,8 +3926,8 @@ async function addAICommentButton(container, postElement) { align-items: center; justify-content: center; border-left: 1px solid rgba(255, 255, 255, 0.35); - border-radius: 0 6px 6px 0; - transition: all 0.2s ease; + border-radius: 0; + transition: background-color 0.2s ease; `; const dropdown = document.createElement('div'); @@ -3945,6 +3947,22 @@ async function addAICommentButton(container, postElement) { wrapper.appendChild(dropdown); actionsContainer.appendChild(wrapper); + const baseWrapperShadow = '0 1px 2px rgba(0, 0, 0, 0.12)'; + const setHoverState = (active) => { + if (active) { + wrapper.style.transform = 'translateY(-2px)'; + wrapper.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)'; + button.style.backgroundColor = 'rgba(255, 255, 255, 0.08)'; + dropdownButton.style.backgroundColor = 'rgba(255, 255, 255, 0.08)'; + } else { + wrapper.style.transform = 'translateY(0)'; + wrapper.style.boxShadow = baseWrapperShadow; + button.style.backgroundColor = 'transparent'; + dropdownButton.style.backgroundColor = 'transparent'; + } + }; + setHoverState(false); + const baseButtonText = button.textContent; const resolvePostContexts = () => { @@ -4014,39 +4032,27 @@ async function addAICommentButton(container, postElement) { updateNotePreview(); }; - button.addEventListener('mouseenter', () => { + const maybeActivateHover = () => { if ((button.dataset.aiState || 'idle') === 'idle') { - button.style.transform = 'translateY(-2px)'; - button.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)'; - dropdownButton.style.transform = 'translateY(-2px)'; - dropdownButton.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)'; + setHoverState(true); } - }); + }; - button.addEventListener('mouseleave', () => { - button.style.transform = 'translateY(0)'; - button.style.boxShadow = 'none'; - dropdownButton.style.transform = 'translateY(0)'; - dropdownButton.style.boxShadow = 'none'; - }); - - dropdownButton.addEventListener('mouseenter', () => { - if ((button.dataset.aiState || 'idle') === 'idle') { - button.style.transform = 'translateY(-2px)'; - button.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)'; - dropdownButton.style.transform = 'translateY(-2px)'; - dropdownButton.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)'; + const maybeDeactivateHover = () => { + if (wrapper.classList.contains('fb-tracker-ai-wrapper--open')) { + return; } - }); - - dropdownButton.addEventListener('mouseleave', () => { - if (!wrapper.classList.contains('fb-tracker-ai-wrapper--open')) { - button.style.transform = 'translateY(0)'; - button.style.boxShadow = 'none'; - dropdownButton.style.transform = 'translateY(0)'; - dropdownButton.style.boxShadow = 'none'; + if (button.matches(':hover') || dropdownButton.matches(':hover')) { + return; } - }); + setHoverState(false); + }; + + button.addEventListener('mouseenter', maybeActivateHover); + button.addEventListener('mouseleave', maybeDeactivateHover); + + dropdownButton.addEventListener('mouseenter', maybeActivateHover); + dropdownButton.addEventListener('mouseleave', maybeDeactivateHover); button.addEventListener('pointerdown', () => { const context = resolvePostContext(); @@ -4096,10 +4102,11 @@ async function addAICommentButton(container, postElement) { wrapper.classList.remove('fb-tracker-ai-wrapper--open'); document.removeEventListener('click', handleOutsideClick, true); document.removeEventListener('keydown', handleKeydown, true); - button.style.transform = 'translateY(0)'; - dropdownButton.style.transform = 'translateY(0)'; - button.style.boxShadow = 'none'; - dropdownButton.style.boxShadow = 'none'; + if (button.matches(':hover') || dropdownButton.matches(':hover')) { + setHoverState(true); + } else { + setHoverState(false); + } dropdown.style.position = ''; dropdown.style.top = ''; dropdown.style.left = ''; @@ -4396,6 +4403,7 @@ async function addAICommentButton(container, postElement) { dropdownOpen = true; wrapper.classList.add('fb-tracker-ai-wrapper--open'); dropdownButton.textContent = '▴'; + setHoverState(true); mountDropdownInPortal(); dropdown.style.display = 'block'; dropdownButton.setAttribute('aria-expanded', 'true'); @@ -4484,6 +4492,12 @@ async function addAICommentButton(container, postElement) { } }, revertDelay); } + + if (wrapper.classList.contains('fb-tracker-ai-wrapper--open')) { + setHoverState(true); + } else if (!(button.matches(':hover') || dropdownButton.matches(':hover'))) { + setHoverState(false); + } }; button._aiContext = aiContext; @@ -4492,6 +4506,7 @@ async function addAICommentButton(container, postElement) { button.classList.add('fb-tracker-btn-ai--processing'); button.classList.remove('fb-tracker-btn-ai--cancelling'); button.style.cursor = 'progress'; + setHoverState(true); dropdownButton.disabled = true; dropdownButton.style.opacity = '0.5'; dropdownButton.style.cursor = 'not-allowed';