diff --git a/src/components/quickTools/footer.js b/src/components/quickTools/footer.js index f95eedd41..fcb133035 100644 --- a/src/components/quickTools/footer.js +++ b/src/components/quickTools/footer.js @@ -45,6 +45,7 @@ export const SearchRow1 = ({ inputRef }) => ( + ); diff --git a/src/components/quickTools/style.scss b/src/components/quickTools/style.scss index 1a28e83b2..e14616ae3 100644 --- a/src/components/quickTools/style.scss +++ b/src/components/quickTools/style.scss @@ -1,6 +1,17 @@ @use '../../styles/mixins.scss'; #quick-tools { + #search_row1 { + [data-id="close"] { + display: none; + flex: 0 0 40px; + } + + &.inline-close [data-id="close"] { + display: inline-flex; + } + } + .icon.click:not([disabled]) { @include mixins.active-icon; transition: all 0.3s ease-in-out; diff --git a/src/handlers/quickTools.js b/src/handlers/quickTools.js index f1cbf27fc..aff8f9009 100644 --- a/src/handlers/quickTools.js +++ b/src/handlers/quickTools.js @@ -33,6 +33,8 @@ let input; /** @type {number} */ let quickToolUsedTimeout = null; let activeSearchState = null; +/** @type {MutationObserver | null} */ +let searchCloseVisibilityObserver = null; const state = { shift: false, @@ -438,6 +440,7 @@ function toggleSearch() { activeSearchState = { className, content: $content, footerHeight }; $toggler.className = "floating icon clearclose"; + startSearchCloseVisibilitySync(); $footer.content = [$searchRow1, $searchRow2]; clearSearchQuickToolsState($content); setRefValue($searchInput, selectedText || ""); @@ -469,6 +472,7 @@ function toggleSearch() { content: $content, footerHeight, }; + stopSearchCloseVisibilitySync(); clearSearchQuickToolsState(restoreState.content); removeSearch(); clearQuickToolsButtonFeedback(restoreState.content); @@ -493,6 +497,36 @@ function toggleSearch() { $searchInput.focus(); } +function startSearchCloseVisibilitySync() { + stopSearchCloseVisibilitySync(); + syncSearchCloseVisibility(); + + const { $toggler } = quickTools; + searchCloseVisibilityObserver = new MutationObserver( + syncSearchCloseVisibility, + ); + searchCloseVisibilityObserver.observe(root, { childList: true }); + searchCloseVisibilityObserver.observe($toggler, { + attributes: true, + attributeFilter: ["class"], + }); +} + +function stopSearchCloseVisibilitySync() { + searchCloseVisibilityObserver?.disconnect(); + searchCloseVisibilityObserver = null; + quickTools.$searchRow1.classList.remove("inline-close"); +} + +function syncSearchCloseVisibility() { + const { $searchRow1, $toggler } = quickTools; + const hasVisibleFloatingClose = + appSettings.value.floatingButton && + $toggler.isConnected && + !$toggler.classList.contains("hide"); + $searchRow1.classList.toggle("inline-close", !hasVisibleFloatingClose); +} + function toggle() { // if search is active, remove it const searchBar = actionStack.get("search-bar");