Merge pull request #25748 from abpframework/maliming/docs-options-floating-fix

Make docs options floating button a real toggle for touch and keyboard
1 week ago · 000a74fdc0
30 changed files with 245 additions and 149 deletions
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/ar.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/ar.json
@ -29,6 +29,7 @@
    "FullSearch": "ابحث في المستندات",
    "Volo.Docs.Domain:010001": "لم يتم تمكين البحث المرن.",
    "MultipleVersionDocumentInfo": "هذا المستند له إصدارات متعددة. حدد الخيارات الأنسب لك.",
+    "DocumentOptions": "خيارات المستند",
    "New": "جديد",
    "Upd": "مُحدث",
    "NewExplanation": "تم إنشاؤه في الأسبوعين الماضيين.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "ترجمة جوجل",
    "DownloadPDF": "تحميل PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/cs.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/cs.json
@ -29,6 +29,7 @@
    "FullSearch": "Hledat v dokumentech",
    "Volo.Docs.Domain:010001": "Elastické vyhledávání není povoleno.",
    "MultipleVersionDocumentInfo": "Tento dokument má více verzí. Vyberte možnosti, které vám nejlépe vyhovují.",
+    "DocumentOptions": "Možnosti dokumentu",
    "New": "Nové",
    "Upd": "Akt",
    "NewExplanation": "Vytvořeno v posledních dvou týdnech.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Přeložit do češtiny",
    "DownloadPDF": "Stáhnout PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/de.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/de.json
@ -29,6 +29,7 @@
    "FullSearch": "In Dokumenten suchen",
    "Volo.Docs.Domain:010001": "Elastic search ist nicht aktiviert.",
    "MultipleVersionDocumentInfo": "Dieses Dokument hat mehrere Versionen. Wählen Sie die für Sie am besten geeigneten Optionen aus.",
+    "DocumentOptions": "Dokumentoptionen",
    "New": "Neu",
    "Upd": "Upd",
    "NewExplanation": "Erstellt in den letzten zwei Wochen.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Ins Deutsche übersetzen",
    "DownloadPDF": "PDF herunterladen"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/el.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/el.json
@ -29,6 +29,7 @@
    "FullSearch": "Αναζήτηση σε έγγραφα",
    "Volo.Docs.Domain:010001": "Η ελαστική αναζήτηση δεν είναι ενεργοποιημένη.",
    "MultipleVersionDocumentInfo": "Αυτό το έγγραφο έχει πολλές εκδόσεις. Επιλέξτε τις επιλογές που σας ταιριάζουν καλύτερα.",
+    "DocumentOptions": "Επιλογές εγγράφου",
    "New": "Νέο",
    "Upd": "Επικαιροποιημένο",
    "NewExplanation": "Δημιουργήθηκε τις τελευταίες δύο εβδομάδες",
@ -40,4 +41,4 @@
    "GoogleTranslate": "Μετάφραση στα ελληνικά",
    "DownloadPDF": "Κατέβασμα PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/en-GB.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/en-GB.json
@ -29,6 +29,7 @@
    "FullSearch": "Search in documents",
    "Volo.Docs.Domain:010001": "Elastic search is not enabled.",
    "MultipleVersionDocumentInfo": "This document has multiple versions. Select the options that best fit you.",
+    "DocumentOptions": "Document Options",
    "New": "New",
    "Upd": "Upd",
    "NewExplanation": "Created in the last two weeks.",
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/en.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/en.json
@ -29,6 +29,7 @@
    "FullSearch": "Search in documents",
    "Volo.Docs.Domain:010001": "Elastic search is not enabled.",
    "MultipleVersionDocumentInfo": "There are multiple versions of this document. Pick the options that suit you best.",
+    "DocumentOptions": "Document Options",
    "New": "New",
    "Upd": "Upd",
    "NewExplanation": "Created in the last two weeks.",
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/es.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/es.json
@ -29,6 +29,7 @@
    "FullSearch": "Buscar en documentos",
    "Volo.Docs.Domain:010001": "Búsqueda elástica no habilida",
    "MultipleVersionDocumentInfo": "Este documento tiene múltiple versiones. Selecciona las opciones que más te interesan.",
+    "DocumentOptions": "Opciones del documento",
    "New": "Nuevo",
    "Upd": "Upd",
    "NewExplanation": "Creado en las últimas dos semanas.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Traducir con Google",
    "DownloadPDF": "Descargar PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/fi.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/fi.json
@ -29,6 +29,7 @@
    "FullSearch": "Hae asiakirjoista",
    "Volo.Docs.Domain:010001": "Elastinen haku ei ole käytössä.",
    "MultipleVersionDocumentInfo": "Tällä asiakirjalla on useita versioita. Valitse sinulle parhaiten sopivat vaihtoehdot.",
+    "DocumentOptions": "Asiakirjan asetukset",
    "New": "Uusi",
    "Upd": "Päivitykset",
    "NewExplanation": "Luotu kahden viime viikon aikana.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Google-käännös",
    "DownloadPDF": "Lataa PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/fr.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/fr.json
@ -29,6 +29,7 @@
    "FullSearch": "Rechercher dans les documents",
    "Volo.Docs.Domain:010001": "La recherche élastique n'est pas activée.",
    "MultipleVersionDocumentInfo": "Ce document a plusieurs versions. Sélectionnez les options qui vous conviennent le mieux.",
+    "DocumentOptions": "Options du document",
    "New": "Nouveau",
    "Upd": "Mettre à jour",
    "NewExplanation": "Créé au cours des deux dernières semaines.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Google Traduction",
    "DownloadPDF": "Télécharger PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/hi.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/hi.json
@ -29,6 +29,7 @@
    "FullSearch": "दस्तावेजों में खोजें",
    "Volo.Docs.Domain:010001": "लोचदार खोज सक्षम नहीं है।",
    "MultipleVersionDocumentInfo": "इस दस्तावेज़ के कई संस्करण हैं। आपके लिए सबसे उपयुक्त विकल्प का चयन करें।",
+    "DocumentOptions": "दस्तावेज़ विकल्प",
    "New": "नवीन व",
    "Upd": "युपीडी",
    "NewExplanation": "पिछले दो हफ्तों में बनाया गया।",
@ -41,4 +42,4 @@
    "GoogleTranslate": "गूगल अनुवाद",
    "DownloadPDF": "PDF डाउनलोड करें"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/hr.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/hr.json
@ -29,6 +29,7 @@
    "FullSearch": "Traži u dokumentima",
    "Volo.Docs.Domain:010001": "Elastic search nije omogućen.",
    "MultipleVersionDocumentInfo": "Postoji više verzija ovog dokumenta. Odaberite opcije koje vam najbolje odgovaraju.",
+    "DocumentOptions": "Opcije dokumenta",
    "New": "Novi",
    "Upd": "Upd",
    "NewExplanation": "Stvoreno u posljednja dva tjedna.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Google prevoditelj",
    "DownloadPDF": "Preuzmi PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/hu.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/hu.json
@ -29,6 +29,7 @@
    "FullSearch": "Keresés a dokumentumokban",
    "Volo.Docs.Domain:010001": "A Elastic search nincs engedélyezve.",
    "MultipleVersionDocumentInfo": "Ennek a dokumentumnak több változata van. Válassza ki az Ön számára legmegfelelőbb lehetőségeket.",
+    "DocumentOptions": "Dokumentumbeállítások",
    "New": "Új",
    "Upd": "Mód",
    "NewExplanation": "Az elmúlt két hétben készült.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Google Fordító",
    "DownloadPDF": "PDF letöltése"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/is.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/is.json
@ -29,6 +29,7 @@
    "FullSearch": "Leita í öllum skjölum",
    "Volo.Docs.Domain:010001": "Teygjanleg leit er ekki virkjuð.",
    "MultipleVersionDocumentInfo": "Þetta skjal er með margar útgáfur. Veldu þá valkosti sem henta þér best.",
+    "DocumentOptions": "Skjalastillingar",
    "New": "Nýtt",
    "Upd": "Upd",
    "NewExplanation": "Búið til á síðustu tveimur vikum.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Google þýðing",
    "DownloadPDF": "Sækja PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/it.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/it.json
@ -29,6 +29,7 @@
    "FullSearch": "Cerca nei documenti",
    "Volo.Docs.Domain:010001": "La ricerca elastica non è abilitata.",
    "MultipleVersionDocumentInfo": "Questo documento ha più versioni. Seleziona le opzioni più adatte a te.",
+    "DocumentOptions": "Opzioni del documento",
    "New": "Nuovo",
    "Upd": "Agg",
    "NewExplanation": "Creato nelle ultime due settimane.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Traduci con Google",
    "DownloadPDF": "Scarica PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/nl.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/nl.json
@ -29,6 +29,7 @@
    "FullSearch": "Zoek in documenten",
    "Volo.Docs.Domain:010001": "Elastisch zoeken is niet ingeschakeld.",
    "MultipleVersionDocumentInfo": "Dit document heeft meerdere versies. Selecteer de opties die het beste bij u passen.",
+    "DocumentOptions": "Documentopties",
    "New": "Nieuw",
    "Upd": "Bew",
    "NewExplanation": "Gemaakt in de afgelopen twee weken.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Google Vertalen",
    "DownloadPDF": "PDF downloaden"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/pl-PL.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/pl-PL.json
@ -29,6 +29,7 @@
    "FullSearch": "Szukaj w dokumentach",
    "Volo.Docs.Domain:010001": "Wyszukiwanie elastyczne nie jest włączone.",
    "MultipleVersionDocumentInfo": "Ten dokument ma wiele wersji. Wybierz opcje, które najbardziej Ci odpowiadają.",
+    "DocumentOptions": "Opcje dokumentu",
    "New": "Nowy",
    "Upd": "Aktualizacja",
    "NewExplanation": "Utworzony w ciągu ostatnich dwóch tygodni.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Tłumaczenie na polski",
    "DownloadPDF": "Pobierz PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/pt-BR.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/pt-BR.json
@ -29,6 +29,7 @@
    "FullSearch": "Pesquisa em documentos",
    "Volo.Docs.Domain:010001": "A pesquisa elástica não está ativada.",
    "MultipleVersionDocumentInfo": "Este documento possui várias versões. Selecione as opções mais adequadas para você.",
+    "DocumentOptions": "Opções do documento",
    "New": "Novo",
    "Upd": "Atualizar",
    "NewExplanation": "Criado nas últimas duas semanas.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Traduzir com Google",
    "DownloadPDF": "Baixar PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/ro-RO.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/ro-RO.json
@ -29,6 +29,7 @@
    "FullSearch": "Caută în documente",
    "Volo.Docs.Domain:010001": "Căutarea elastică nu este activată.",
    "MultipleVersionDocumentInfo": "Acest document are multiple versiuni. Selectaţi opţiunile cele mai potrivite pentru dumneavoastră.",
+    "DocumentOptions": "Opțiuni document",
    "New": "Nou",
    "Upd": "Upd",
    "NewExplanation": "Creat în ultimele două săptămâni.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Traducere Google",
    "DownloadPDF": "Descărcare PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/ru.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/ru.json
@ -29,6 +29,7 @@
    "FullSearch": "Искать в документах",
    "Volo.Docs.Domain:010001": "Эластичный поиск не включен.",
    "MultipleVersionDocumentInfo": "У этого документа есть несколько версий. Выберите наиболее подходящие для вас варианты.",
+    "DocumentOptions": "Параметры документа",
    "New": "Новый",
    "Upd": "Upd",
    "NewExplanation": "Создано за последние две недели.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Google Translate",
    "DownloadPDF": "Скачать PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/sk.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/sk.json
@ -29,6 +29,7 @@
    "FullSearch": "Vyhľadať v dokumentoch",
    "Volo.Docs.Domain:010001": "Elastic vyhľadávanie nie je povolené.",
    "MultipleVersionDocumentInfo": "Tento dokument má viacero verzií. Vyberte si možnosť, ktorá vám vyhovuje najviac.",
+    "DocumentOptions": "Možnosti dokumentu",
    "New": "Nový",
    "Upd": "Upd",
    "NewExplanation": "Vytvorené za posledné dva týždne.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Google preklad",
    "DownloadPDF": "Stiahnuť PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/sl.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/sl.json
@ -29,6 +29,7 @@
    "FullSearch": "Išči v dokumentih",
    "Volo.Docs.Domain:010001": "Elastično iskanje ni omogočeno.",
    "MultipleVersionDocumentInfo": "Ta dokument ima več verzij. Izberite možnosti, ki so najprimernejše.",
+    "DocumentOptions": "Možnosti dokumenta",
    "New": "Nov",
    "Upd": "Posod.",
    "NewExplanation": "Ustvarjeno v zadnjih dveh tednih.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Google prevajalnik",
    "DownloadPDF": "Prenesi PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/sv.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/sv.json
@ -29,6 +29,7 @@
    "FullSearch": "Sök i dokument",
    "Volo.Docs.Domain:010001": "Elastisk sökning är inte aktiverad.",
    "MultipleVersionDocumentInfo": "Det finns flera versioner av detta dokument. Välj de alternativ som passar dig bäst.",
+    "DocumentOptions": "Dokumentalternativ",
    "New": "Nya",
    "Upd": "Uppdatering",
    "NewExplanation": "Skapad under de senaste två veckorna.",
@ -46,4 +47,4 @@
    "GoogleTranslate": "Google Översätt",
    "DownloadPDF": "Ladda ner PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/tr.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/tr.json
@ -29,6 +29,7 @@
    "FullSearch": "Dokümanlarda Ara",
    "Volo.Docs.Domain:010001": "Elastic search etkin değil",
    "MultipleVersionDocumentInfo": "Bu dökümanın birden çok versiyonu bulunmaktadır. Sizin için en uygun olan seçenekleri seçiniz.",
+    "DocumentOptions": "Belge Seçenekleri",
    "New": "Yeni",
    "Upd": "Günc",
    "NewExplanation": "Son iki hafta içinde oluşturuldu.",
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/vi.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/vi.json
@ -29,6 +29,7 @@
    "FullSearch": "Tìm kiếm trong tài liệu",
    "Volo.Docs.Domain:010001": "Tìm kiếm đàn hồi không được bật.",
    "MultipleVersionDocumentInfo": "Tài liệu này có nhiều phiên bản. Chọn các tùy chọn phù hợp nhất với bạn.",
+    "DocumentOptions": "Tùy chọn tài liệu",
    "New": "Mới",
    "Upd": "Cập nhật",
    "NewExplanation": "Được tạo trong hai tuần qua.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "Dịch Google",
    "DownloadPDF": "Tải xuống PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/zh-Hans.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/zh-Hans.json
@ -29,6 +29,7 @@
    "FullSearch": "在文档中搜索",
    "Volo.Docs.Domain:010001": "未启用Elastic search。",
    "MultipleVersionDocumentInfo": "本文档有多个版本。请选择最适合您的选项。",
+    "DocumentOptions": "文档选项",
    "New": "新",
    "Upd": "更新文档",
    "NewExplanation": "最近两周创建。",
@ -41,4 +42,4 @@
    "GoogleTranslate": "谷歌翻译",
    "DownloadPDF": "下载PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/zh-Hant.json
+++ b/modules/docs/src/Volo.Docs.Domain/Volo/Docs/Localization/Domain/zh-Hant.json
@ -29,6 +29,7 @@
    "FullSearch": "搜索文件",
    "Volo.Docs.Domain:010001": "Elastic search未啟用.",
    "MultipleVersionDocumentInfo": "此份文件有多個版本。請選擇一個最適合的。",
+    "DocumentOptions": "文件選項",
    "New": "新文檔",
    "Upd": "更新",
    "NewExplanation": "在最近兩周內創建.",
@ -41,4 +42,4 @@
    "GoogleTranslate": "谷歌翻譯",
    "DownloadPDF": "下載PDF"
  }
-}
+}
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@ -482,6 +482,13 @@
                        @if (visibleParameters.Count > 0)
                        {
                            <div class="alert alert-primary alert-criteria">
+                                <div class="options-header">
+                                    <span>@L["DocumentOptions"]</span>
+                                    <button type="button" class="btn toggle-btn" aria-expanded="false" aria-controls="DocumentOptionsBody" aria-label="@L["DocumentOptions"]">
+                                        <i class="fa-solid fa-chevron-up"></i>
+                                    </button>
+                                </div>
+                                <div class="options-body" id="DocumentOptionsBody">
                                <abp-row>
                                    <abp-column>
                                        <p class="alert-p mb-2">
@ -534,6 +541,7 @@
                                        }
                                    }
                                </abp-row>
+                                </div>
                            </div>
                        }
                    </div>
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
@ -175,8 +175,51 @@
        var docsContentWidth = $('.docs-content').width() - 74;
        $('.alert-criteria').width(docsContentWidth);
    }
+
+    // Toggle the collapsed document-options popover by click/tap (works on touch, unlike a hover-only reveal).
+    function docsOptionsToggle() {
+        var $criteria = $('.alert-criteria');
+        var $btn = $criteria.find('.options-header .toggle-btn');
+        if (!$criteria.length || !$btn.length) {
+            return;
+        }
+        function setOpen(isOpen) {
+            $criteria.toggleClass('is-open', isOpen);
+            $btn.attr('aria-expanded', isOpen ? 'true' : 'false');
+        }
+        // clear any previous bindings so a second init (e.g. partial reload) does not stack handlers
+        $btn.off('.docsOptions');
+        $criteria.off('.docsOptions');
+        $(document).off('.docsOptions');
+        $(window).off('.docsOptions');
+        $btn.on('click.docsOptions', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(!$criteria.hasClass('is-open'));
+        });
+        $criteria.on('click.docsOptions', function (e) {
+            e.stopPropagation();
+        });
+        $(document).on('click.docsOptions', function () {
+            setOpen(false);
+        });
+        $(document).on('keydown.docsOptions', function (e) {
+            if (e.key === 'Escape' && $criteria.hasClass('is-open')) {
+                setOpen(false);
+                // keyboard close: return focus to the button (focus ring is appropriate here)
+                $btn.trigger('focus');
+            }
+        });
+        $(window).on('scroll.docsOptions', function () {
+            if (!$('body').hasClass('scrolledMore')) {
+                setOpen(false);
+            }
+        });
+    }
+
    $(document).ready(function () {
        docsCriteria();
+        docsOptionsToggle();
    });
    $(window).resize(function () {
        docsCriteria();
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@ -52,6 +52,9 @@ body .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  filter: "alpha(opacity=1)";
  -ms-filter: "alpha(opacity=1)";
 }
+body .alert-criteria .options-header {
+  display: none;
+}
 body.scrolledMore {
  padding-top: 107px;
 }
@ -67,7 +70,8 @@ body.scrolledMore .alert-criteria {
  border-radius: 16px !important;
  color: #2d2d2d !important;
  z-index: 9999 !important;
-  visibility: hidden;
+  visibility: hidden !important;
+  transition: none !important;
  pointer-events: none;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
@ -75,70 +79,76 @@ body.scrolledMore .alert-criteria {
  border: 0 !important;
  box-shadow: none !important;
 }
-body.scrolledMore .alert-criteria::before {
-  content: "\f1de";
-  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
-  font-weight: 900;
-  color: #6f42c1;
-  font-size: 24px;
+body.scrolledMore .alert-criteria .options-header {
+  display: block !important;
+  color: #6f42c1 !important;
+  font-weight: 700;
+}
+body.scrolledMore .alert-criteria .options-header .toggle-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
-  background: linear-gradient(135deg, #ffffff 0%, #f5f0ff 100%);
-  border: 1px solid #d9ccf2;
-  box-shadow: 0 8px 22px rgba(111, 66, 193, 0.16), 0 2px 6px rgba(31, 41, 55, 0.08);
+  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
+  color: #6f42c1;
+  background: linear-gradient(135deg, #ffffff 0%, #f5f0ff 100%);
+  border: 1px solid #d9ccf2;
+  box-shadow: 0 8px 22px rgba(111, 66, 193, 0.16), 0 2px 6px rgba(31, 41, 55, 0.08);
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  z-index: 9999;
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+body.scrolledMore .alert-criteria .options-header .toggle-btn > i {
+  display: none;
 }
-body.scrolledMore .alert-criteria:hover::before, body.scrolledMore .alert-criteria:focus-within::before {
+body.scrolledMore .alert-criteria .options-header .toggle-btn::before {
+  content: "\f1de";
+  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
+  font-weight: 900;
+  font-size: 24px;
+}
+body.scrolledMore .alert-criteria .options-header .toggle-btn:hover {
  transform: translateY(-2px);
-  box-shadow: 0 12px 28px rgba(111, 66, 193, 0.22);
+  box-shadow: 0 12px 28px rgba(111, 66, 193, 0.28);
 }
-body.scrolledMore .alert-criteria::after {
-  content: "";
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  width: 60px;
-  height: 74px;
-  background: transparent;
-  pointer-events: auto;
-  visibility: visible;
-  z-index: 9998;
+body.scrolledMore .alert-criteria .options-header .toggle-btn:focus-visible {
+  outline: 2px solid #6f42c1;
+  outline-offset: 2px;
 }
-body.scrolledMore .alert-criteria:hover, body.scrolledMore .alert-criteria:focus-within {
-  visibility: visible;
+body.scrolledMore .alert-criteria.is-open {
+  visibility: visible !important;
  pointer-events: auto;
  background: #fff !important;
  border: 1px solid #e6def7 !important;
  box-shadow: 0 16px 40px rgba(40, 20, 80, 0.18) !important;
 }
-body.scrolledMore .alert-criteria:has(.options-header) p.alert-p {
-  display: none !important;
+body.scrolledMore .alert-criteria.is-open .options-header {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+body.scrolledMore .alert-criteria.is-open .options-header .toggle-btn::before {
+  content: "\f00d";
+  font-size: 22px;
+}
+body.scrolledMore .alert-criteria:not(.is-open), body.scrolledMore .alert-criteria:not(.is-open):hover, body.scrolledMore .alert-criteria:not(.is-open):focus-within {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
 }
 body.scrolledMore .alert-criteria p.alert-p {
  margin: 0 0 12px !important;
  color: #6f42c1 !important;
  font-weight: 600;
 }
-body.scrolledMore .alert-criteria .options-header {
-  display: flex !important;
-  color: #6f42c1 !important;
-  font-weight: 700;
-  margin-bottom: 12px;
-}
-body.scrolledMore .alert-criteria .options-header .toggle-btn {
-  display: none !important;
-}
 body.scrolledMore .alert-criteria .row > div {
  width: 100% !important;
  max-width: 100% !important;
@ -154,25 +164,21 @@ body.scrolledMore .alert-criteria .row > div:last-child {
    bottom: 75px !important;
    width: calc(100vw - 20px) !important;
  }
-  body.scrolledMore .alert-criteria::before {
+  body.scrolledMore .alert-criteria .options-header .toggle-btn {
    right: 10px;
    bottom: 10px;
    width: 55px;
    height: 55px;
-    font-size: 22px;
  }
-  body.scrolledMore .alert-criteria::after {
-    right: 10px;
-    bottom: 10px;
-    width: 55px;
-    height: 70px;
+  body.scrolledMore .alert-criteria .options-header .toggle-btn::before {
+    font-size: 22px;
  }
 }
-body.scrolledMore:has(#abp-chatbot-container) .alert-criteria::before, body.scrolledMore:has(#abp-chatbot-container) .alert-criteria::after {
+body.scrolledMore:has(#abp-chatbot-container) .alert-criteria .options-header .toggle-btn {
  right: 92px;
 }
@media (max-width: 768px) {
-  body.scrolledMore:has(#abp-chatbot-container) .alert-criteria::before, body.scrolledMore:has(#abp-chatbot-container) .alert-criteria::after {
+  body.scrolledMore:has(#abp-chatbot-container) .alert-criteria .options-header .toggle-btn {
    right: 75px;
  }
 }
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@ -70,12 +70,19 @@ body {
        -ms-filter: 'alpha(opacity=1)';
    }

+    // the options-header only exists to host the floating button; hide it while the bar is inline
+    // (non-scrolled), so the inline bar keeps its original look. It reappears once .scrolledMore collapses.
+    .alert-criteria .options-header {
+        display: none;
+    }
+
    &.scrolledMore {
        padding-top: 107px;

        // Collapse the floating document-options bar into a round button (like the chat widget).
-        // The bar slides out of the way; hovering the button (or focusing a select) reveals the options.
-        // CSS-only so it applies on abp.io too (this stylesheet is bundled into that page).
+        // The bar slides out of the way; clicking/tapping the button (.toggle-btn) reveals the options
+        // by toggling .is-open (see vs.js). Click-based so it works on touch, unlike a hover-only reveal.
+        // The stylesheet is bundled into abp.io too.
        .alert-criteria {
            position: fixed !important;
            left: auto !important;
@ -88,7 +95,10 @@ body {
            border-radius: 16px !important;
            color: #2d2d2d !important;
            z-index: 9999 !important;
-            visibility: hidden;
+            visibility: hidden !important;
+            // hide instantly: the base 0.3s transition otherwise fades the bar out on collapse,
+            // flashing a translucent half-open panel while scrolling on narrow viewports
+            transition: none !important;
            pointer-events: none;
            background: transparent !important;
            -webkit-backdrop-filter: none !important;
@ -96,64 +106,88 @@ body {
            border: 0 !important;
            box-shadow: none !important;

-            // the round button
-            &::before {
-                content: "\f1de";
-                font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
-                font-weight: 900;
-                color: #6f42c1;
-                font-size: 24px;
-                position: fixed;
-                right: 20px;
-                bottom: 20px;
-                width: 60px;
-                height: 60px;
-                border-radius: 50%;
-                background: linear-gradient(135deg, #ffffff 0%, #f5f0ff 100%);
-                border: 1px solid #d9ccf2;
-                box-shadow: 0 8px 22px rgba(111, 66, 193, 0.16), 0 2px 6px rgba(31, 41, 55, 0.08);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                visibility: visible;
-                pointer-events: auto;
-                cursor: pointer;
-                z-index: 9999;
-                transition: transform 0.25s ease, box-shadow 0.25s ease;
-            }
+            // collapsed: only the round FAB (a real <button> for touch + keyboard/ARIA) stays visible
+            .options-header {
+                display: block !important;
+                color: #6f42c1 !important;
+                font-weight: 700;

-            &:hover::before,
-            &:focus-within::before {
-                transform: translateY(-2px);
-                box-shadow: 0 12px 28px rgba(111, 66, 193, 0.22);
-            }
+                .toggle-btn {
+                    position: fixed;
+                    right: 20px;
+                    bottom: 20px;
+                    width: 60px;
+                    height: 60px;
+                    border-radius: 50%;
+                    padding: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #6f42c1;
+                    background: linear-gradient(135deg, #ffffff 0%, #f5f0ff 100%);
+                    border: 1px solid #d9ccf2;
+                    box-shadow: 0 8px 22px rgba(111, 66, 193, 0.16), 0 2px 6px rgba(31, 41, 55, 0.08);
+                    visibility: visible;
+                    pointer-events: auto;
+                    cursor: pointer;
+                    z-index: 9999;
+                    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+                    // show the sliders glyph instead of the collapse chevron while acting as the FAB
+                    > i {
+                        display: none;
+                    }

-            // transparent bridge so hover survives the gap between button and popover
-            &::after {
-                content: "";
-                position: fixed;
-                right: 20px;
-                bottom: 20px;
-                width: 60px;
-                height: 74px;
-                background: transparent;
-                pointer-events: auto;
-                visibility: visible;
-                z-index: 9998;
+                    &::before {
+                        content: "\f1de";
+                        font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
+                        font-weight: 900;
+                        font-size: 24px;
+                    }
+
+                    &:hover {
+                        transform: translateY(-2px);
+                        box-shadow: 0 12px 28px rgba(111, 66, 193, 0.28);
+                    }
+
+                    // the custom box-shadow hides the default focus ring; restore a visible one for keyboard users
+                    &:focus-visible {
+                        outline: 2px solid #6f42c1;
+                        outline-offset: 2px;
+                    }
+                }
            }

-            &:hover,
-            &:focus-within {
-                visibility: visible;
+            // click/tap toggles .is-open (vs.js); hover no longer reveals, so open/close is predictable
+            &.is-open {
+                visibility: visible !important;
                pointer-events: auto;
                background: #fff !important;
                border: 1px solid #e6def7 !important;
                box-shadow: 0 16px 40px rgba(40, 20, 80, 0.18) !important;
+
+                .options-header {
+                    display: flex !important;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 12px;
+
+                    // keep the FAB in place, swap the glyph to a close (X) — tap again to close
+                    .toggle-btn::before {
+                        content: "\f00d";
+                        font-size: 22px;
+                    }
+                }
            }

-            // abp.io renders an .options-header title, so its info line is redundant; module pages keep it
-            &:has(.options-header) p.alert-p {
-                display: none !important;
+            // defensive: the collapsed state must never pick up the opened panel's background/
+            // border/shadow (e.g. from a :hover / :focus-within rule leaking in) — only the FAB shows
+            &:not(.is-open),
+            &:not(.is-open):hover,
+            &:not(.is-open):focus-within {
+                background: transparent !important;
+                border: 0 !important;
+                box-shadow: none !important;
            }

            p.alert-p {
@ -162,17 +196,6 @@ body {
                font-weight: 600;
            }

-            .options-header {
-                display: flex !important;
-                color: #6f42c1 !important;
-                font-weight: 700;
-                margin-bottom: 12px;
-
-                .toggle-btn {
-                    display: none !important;
-                }
-            }
-
            .row > div {
                width: 100% !important;
                max-width: 100% !important;
@ -189,35 +212,25 @@ body {
                bottom: 75px !important;
                width: calc(100vw - 20px) !important;

-                &::before {
+                .options-header .toggle-btn {
                    right: 10px;
                    bottom: 10px;
                    width: 55px;
                    height: 55px;
-                    font-size: 22px;
-                }

-                &::after {
-                    right: 10px;
-                    bottom: 10px;
-                    width: 55px;
-                    height: 70px;
+                    &::before {
+                        font-size: 22px;
+                    }
                }
            }
        }

-        // when a chat widget is present (e.g. abp.io), shift the button to its left
-        &:has(#abp-chatbot-container) .alert-criteria {
-            &::before,
-            &::after {
-                right: 92px;
-            }
+        // when a chat widget is present (e.g. abp.io), shift the FAB to its left
+        &:has(#abp-chatbot-container) .alert-criteria .options-header .toggle-btn {
+            right: 92px;

            @media (max-width: 768px) {
-                &::before,
-                &::after {
-                    right: 75px;
-                }
+                right: 75px;
            }
        }
    }