Add toggles to hide inactive and private lists

2 files changed, 38 insertions, 4 deletions

diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-index.css b/hyperkitty/static/hyperkitty/css/hyperkitty-index.css
index 4f5fac4..963d2de 100644
--- a/hyperkitty/static/hyperkitty/css/hyperkitty-index.css
+++ b/hyperkitty/static/hyperkitty/css/hyperkitty-index.css
@@ -7,6 +7,8 @@
 }
 
 
+/* sides */
+
 .all-lists .side-menu h2 {
     font-size: 100%;
     line-height: 100%;
@@ -27,9 +29,25 @@
 .all-lists .lists-menu span.active {
     font-weight: bold;
 }
-.all-lists div.lists {
-    padding-right: 4em;
+
+
+/* title */
+
+.all-lists h1.lists {
+    margin-bottom: 0.5em;
+}
+
+.all-lists p.hide-switches label {
+    display: inline;
+    margin-right: 2em;
 }
+.all-lists p.hide-switches input {
+    margin: 0;
+}
+
+
+/* initials */
+
 .all-lists .initials {
     right: 0;
     right: -3em; /* there will be an animation to 0 */
@@ -59,8 +77,11 @@
     text-decoration: none;
 }
 
-.all-lists h1.lists {
-    margin-bottom: 0.5em;
+
+/* main content */
+
+.all-lists div.lists {
+    padding-right: 4em;
 }
 
 .all-lists table.lists th {
diff --git a/hyperkitty/templates/index.html b/hyperkitty/templates/index.html
index 8b9ca13..3dd9d79 100644
--- a/hyperkitty/templates/index.html
+++ b/hyperkitty/templates/index.html
@@ -59,6 +59,11 @@
     {% endif %}
 </h1>
 
+<p class="hide-switches">
+    <label><input type="checkbox" value="inactive" /> Hide inactive</label>
+    <label><input type="checkbox" value="private" /> Hide private</label>
+</p>
+
 {% if all_lists %}
 <table class="lists table">
     <thead>
@@ -169,6 +174,14 @@
             var target = $("a[name="+$(this).attr("href").substring(1)+"]");
             $(window).scrollTop(target.offset().top - 70);
         });
+        $(".hide-switches input").click(function() {
+            var target = $("table.lists tr.list."+$(this).val());
+            if ($(this).prop("checked")) {
+                target.hide();
+            } else {
+                target.show();
+            }
+        });
     });
 </script>