From 29f404e9a5dc4c3d11d311b4976b2f159d9b03d6 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Sun, 11 Aug 2019 08:42:32 -0400
Subject: [PATCH] Add inline search filters

Closes #757

Mostly just the UI at this point. Centered the dropdown link and menu, and set up translations. Hooked up the menu click function, and I know we don't usually bother with auto-closing menus, but it felt kinda weird with this one, so I added scroll and click listeners to auto-close.
---
 popup/search-results.css | 114 ++++++++++++++++++++++++++++++++++++++-
 popup/search-results.js  |  20 +++++++
 2 files changed, 133 insertions(+), 1 deletion(-)

diff --git a/popup/search-results.css b/popup/search-results.css
index e1c805a6..2116e94d 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -88,6 +88,109 @@ body.search-results-shown {
   font-weight: 600;
 }
 
+.filter-results {
+  display: inline-flex;
+  text-decoration: none;
+}
+
+.filter-results span {
+  padding-left: 5px;
+  color: #333;
+  transition: color .2s;
+}
+
+.filter-results:hover span,
+.filter-results.show-menu span {
+  color: #000;
+}
+
+.filter-results .svg-icon {
+  fill: #666;
+  transition: fill .2s;
+}
+
+.filter-results:hover .svg-icon,
+.filter-results.show-menu .svg-icon {
+  fill: #111;
+}
+
+.filter-results .svg-icon.select-arrow {
+  position: relative;
+  top: -1px;
+  right: unset;
+  left: 1px;
+  transition: fill .2s;
+}
+
+.filter-menu {
+  background-color: #eee;
+  z-index: 10;
+  position: absolute;
+  top: 28px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: max-content;
+  flex-direction: column;
+  border-radius: 3px;
+  border: 1px solid #000;
+  box-shadow: 0 1px 2px hsla(0, 0%, 0%, .3);
+  display: none;
+}
+
+.filter-results.show-menu + .filter-menu {
+  display: flex;
+}
+
+.filter-item {
+  text-align: left;
+  text-decoration: none;
+  padding: 8px 24px 8px 16px;
+  transition: color .2s, background-color .2s;
+}
+
+.filter-item:hover {
+  background-color: hsla(0, 0%, 50%, .1)
+}
+
+.filter-radio-wrapper {
+  padding: 8px 16px 4px;
+}
+
+.filter-radio-wrapper input[type="radio"] {
+  margin-left: 0;
+  margin-right: 5px;
+}
+
+.filter-radio-wrapper .icon-wrapper {
+  padding-top: 2px;
+}
+
+.filter-radio-wrapper > label:first-child {
+  margin-right: 14px;
+}
+
+.filter-radio-wrapper > label:hover .svg-icon {
+  fill: #000;
+}
+
+.filter-radio-wrapper > label,
+.filter-radio-wrapper > label * {
+  cursor: pointer;
+}
+
+.filter-radio-wrapper,
+.filter-radio-wrapper label > div {
+  display: flex;
+}
+
+.filter-results .svg-icon,
+.svg-icon.ascending,
+.svg-icon.descending {
+  height: 16px;
+  width: 16px;
+}
+
 .search-result:hover .search-result-title {
   color: initial;
 }
@@ -223,7 +326,16 @@ body.search-results-shown {
 
 .search-results-nav[data-type="top"] {
   padding-top: 1em;
-  margin-bottom: 1em;
+}
+
+.current-filters {
+  padding: .5em 0 .75em;
+  text-align: center;
+  position: relative;
+}
+
+.current-filters > .svg-icon {
+  margin: 4px 0 -4px;
 }
 
 .search-results-nav[data-type="bottom"] {
diff --git a/popup/search-results.js b/popup/search-results.js
index d0a47793..c67460c0 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -102,6 +102,26 @@ window.addEventListener('showStyles:done', function _() {
 
     $('#find-styles-inline-group').classList.add('hidden');
 
+    const filterResults = $('.filter-results');
+
+    function closeMenu(event) {
+      if (event.target.closest('.filter-menu') || event.target.closest('.filter-results')) return;
+      filterResults.classList.remove('show-menu');
+      document.removeEventListener('click', closeMenu, true);
+      document.body.removeEventListener('scroll', closeMenu);
+    }
+
+    filterResults.onclick = () => {
+      filterResults.classList.toggle('show-menu');
+      if (filterResults.classList.contains('show-menu')) {
+        document.addEventListener('click', closeMenu, true);
+        document.body.addEventListener('scroll', closeMenu);
+      } else {
+        document.removeEventListener('click', closeMenu, true);
+        document.body.removeEventListener('scroll', closeMenu);
+      }
+    }
+
     dom.container = $('#search-results');
     dom.container.dataset.empty = '';