Put search behind a magnifying glass.

sandialabs · Mar 8, 2021 · 77cd05d · 77cd05d
1 parent a14b541
commit 77cd05d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/logger/resources/templates/output_block.html b/logger/resources/templates/output_block.html
@@ -1,14 +1,32 @@
 <div>
-    <input type="text"
-           id="{cmd_id}-{name}-search"
-           onkeyup="outputSearch(this)"
-           target="{cmd_id}-{name}-code"
-           placeholder="Regex Search...">
-    <input type="checkbox"
-           id="{cmd_id}-{name}-checkbox"
-           onclick="outputSearch(this)"
-           name="{cmd_id}-{name}-show-duplicates">
-    <label for="{cmd_id}-{name}-show-duplicates"> Show duplicates</label><br>
+    <div class="search-controls">
+        <div class="search-controls-right">
+            <div class="search-inputs">
+                <div class="collapse {cmd_id}-{name}-search-inputs">
+                    <input type="text"
+                           id="{cmd_id}-{name}-search"
+                           onkeyup="outputSearch(this)"
+                           target="{cmd_id}-{name}-code"
+                           placeholder="Regex Search...">
+                    <input type="checkbox"
+                           id="{cmd_id}-{name}-checkbox"
+                           onclick="outputSearch(this)"
+                           name="{cmd_id}-{name}-show-duplicates">
+                    <label for="{cmd_id}-{name}-show-duplicates">
+                        Show duplicates
+                    </label>
+                </div>
+            </div>
+            <svg type="button"
+                 role="button"
+                 data-target=".{cmd_id}-{name}-search-inputs"
+                 data-toggle="collapse"
+                 width="16pt"
+                 height="16pt">
+                <use href="#search-icon" />
+            </svg>
+        </div>
+    </div>
     <code class="output" id="{cmd_id}-{name}-code">
         {table_contents}
     </code>

diff --git a/logger/util.py b/logger/util.py
@@ -404,10 +404,12 @@ def html_header():
         embed_style("output_style.css") +
         embed_style("diagnostics_style.css") +
         embed_style("stat_chart_style.css") +
+        embed_style("search_controls.css") +
         embed_script("jquery.slim.min.js") +
         embed_script("bootstrap.bundle.min.js") +
         embed_script("Chart.bundle.min.js") +
         embed_script("search_output.js") +
+        embed_html("search_icon.svg") +
         "</head>"
     )
 
@@ -425,6 +427,9 @@ def embed_script(resource):
         "\n</script>\n"
     )
 
+def embed_html(resource):
+    return pkgutil.get_data(__name__, f"resources/{resource}").decode()
+
 def load_template(template):
     template_file = f"resources/templates/{template}"
     return pkgutil.get_data(__name__, template_file).decode()