filters: negation, styling

lib/filters/filtergui.js

@@ -2,9 +2,10 @@ define([], function () {
   return function (distributor) {
     var container = document.createElement("ul")
     container.classList.add("filters")
+    var div = document.createElement("div")
 
     function render(el) {
-      el.appendChild(container)
+      el.appendChild(div)
     }
 
     function filtersChanged(filters) {
@@ -25,6 +26,11 @@ define([], function () {
         }
         li.appendChild(button)
       })
+
+      if (container.parentNode === div && filters.length === 0)
+        div.removeChild(container)
+      else if (filters.length > 0)
+        div.appendChild(container)
     }
 
     return { render: render,

lib/filters/genericnode.js

@@ -1,15 +1,26 @@
 define(["filters/nodefilter"], function (nodefilter) {
   return function (name, key, value, f) {
+    var negate = false
+    var refresh
+
     function run(d) {
       var o = dictGet(d, key.slice(0))
 
       if (f)
         o = f(o)
 
-      return o === value
+      return o === value ? !negate : negate
+    }
+
+    function setRefresh(f) {
+      refresh = f
     }
 
-    function setRefresh() {
+    function draw(el) {
+      if (negate)
+        el.parentNode.classList.add("not")
+      else
+        el.parentNode.classList.remove("not")
     }
 
     function render(el) {
@@ -19,7 +30,17 @@ define(["filters/nodefilter"], function (nodefilter) {
       var strong = document.createElement("strong")
       strong.textContent = value
 
+      draw(el)
+
       label.appendChild(strong)
+      label.onclick = function () {
+        negate = !negate
+
+        draw(el)
+
+        if (refresh)
+          refresh()
+      }
 
       el.appendChild(label)
     }

scss/_filters.scss

@@ -1,28 +1,53 @@
 .filters {
   margin: 0;
-  padding: 0 !important;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: Roboto;
+  font-size: 0.83em;
+  font-weight: bold;
+  padding: 0 6pt 6pt !important;
 
   li  {
+    border-radius: 20pt;
     display: flex;
-    padding: 6pt 0 6pt 12pt;
+    padding: 0pt 0 0pt 8pt;
+    margin: 3pt;
     align-items: center;
+    background: #009ee0;
+    color: rgba(255, 255, 255, 0.8);
 
-    & > div {
-      flex-grow: 1;
+    label {
+      cursor: pointer;
+
+      strong {
+        color: rgba(255, 255, 255, 1);
+      }
     }
 
-    @include shadow(1);
-  }
+    &.not {
+      background: #dc0067;
+    }
+
+    button {
+      box-shadow: none;
+      margin: 2pt;
+      padding: 0;
+      width: 18pt;
+      height: 18pt;
+      background: rgba(255, 255, 255, 0.0);
+      font-size: 12pt;
+      vertical-align: middle;
+      color: rgba(255, 255, 255, 0.8);
 
-  button {
-    box-shadow: none;
-    margin: 0;
-    padding: 0;
-    background: none;
-    font-size: 1.41em;
+      &:hover {
+        box-shadow: none !important;
+        color: #dc0067;
+        background: rgba(255, 255, 255, 0.9);
+      }
 
-    &:hover {
-      box-shadow: none !important;
+      &:active {
+        box-shadow: none;
+      }
     }
   }
 }