From 68b0759637b94b29ce4eb5436fc8b718eb8043a4 Mon Sep 17 00:00:00 2001
From: "Myst(MysterialPy)" <mysterialpy@gmail.com>
Date: Wed, 9 Mar 2022 12:26:12 +1000
Subject: [PATCH] Add sidebar search and support for search bar middle clicking
---
docs/_static/custom.js | 16 ++++++++++++++++
docs/_static/style.css | 18 ++++++++++++++++++
docs/_templates/layout.html | 12 ++++++++++--
3 files changed, 44 insertions(+), 2 deletions(-)
diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index f3cfa461f..bfbbe03ef 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -95,3 +95,19 @@ document.addEventListener('keydown', (event) => {
activeModal.close();
}
});
+
+function searchBarClick(event, which) {
+ event.preventDefault();
+
+ if (event.button === 1 || event.buttons === 4) {
+ which.target = "_blank"; // Middle mouse button was clicked. Set our target to a new tab.
+ }
+ else if (event.button === 2) {
+ return // Right button was clicked... Don't do anything here.
+ }
+ else {
+ which.target = "_self"; // Revert to same window.
+ }
+
+ which.submit();
+}
diff --git a/docs/_static/style.css b/docs/_static/style.css
index eec62eb38..f65806603 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -61,6 +61,8 @@ Historically however, thanks to:
--search-focus: var(--blue-1);
--search-button: var(--grey-1);
--search-button-hover: var(--grey-1-8);
+ --search-sidebar-background: var(--grey-1);
+ --search-sidebar-text: var(--grey-7);
--footer-text: var(--grey-5);
--footer-link: var(--grey-6);
--hr-border: var(--grey-2);
@@ -167,6 +169,8 @@ Historically however, thanks to:
--attribute-table-entry-hover-text: var(--blue-1);
--attribute-table-badge: var(--grey-4);
--highlighted-text: rgba(250, 166, 26, 0.2);
+ --search-sidebar-background: var(--grey-7);
+ --search-sidebar-text: var(--search-text);
}
img[src$="snake_dark.svg"] {
@@ -523,6 +527,20 @@ input[type=search]:focus ~ button[type=submit] {
color: var(--search-button-hover);
}
+/* search sidebar */
+
+.search-sidebar > input[type=search],
+.search-sidebar > button[type=submit] {
+ background-color: var(--search-sidebar-background);
+ color: var(--search-sidebar-text);
+}
+
+.sidebar-toggle .search-sidebar > input[type=search],
+.sidebar-toggle .search-sidebar > button[type=submit] {
+ background-color: var(--mobile-nav-background);
+ color: var(--mobile-nav-text);
+}
+
/* main content area */
main {
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
index d9fe22315..229da72c4 100644
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@@ -90,10 +90,10 @@
<option value="{{ pathto(p + '/index')|e }}" {% if pagename is prefixedwith p %}selected{% endif %}>{{ ext }}</option>
{%- endfor %}
</select>
- <form role="search" class="search" action="{{ pathto('search') }}" method="get">
+ <form id="search-form" role="search" class="search" action="{{ pathto('search') }}" method="get">
<div class="search-wrapper">
<input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
- <button type="submit">
+ <button type="submit" onmousedown="searchBarClick(event, document.getElementById('search-form'));">
<span class="material-icons">search</span>
</button>
</div>
@@ -111,6 +111,14 @@
<span class="material-icons">settings</span>
</span>
<div id="sidebar">
+ <form id="sidebar-form" role="search" class="search" action="{{ pathto('search') }}" method="get">
+ <div class="search-wrapper search-sidebar">
+ <input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
+ <button type="submit" onmousedown="searchBarClick(event, document.getElementById('sidebar-form'));">
+ <span class="material-icons">search</span>
+ </button>
+ </div>
+ </form>
{%- include "localtoc.html" %}
</div>
</aside>