diff --git a/lib/filters/filtergui.js b/lib/filters/filtergui.js index daaf4d6..f6c6dac 100644 --- a/lib/filters/filtergui.js +++ b/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, diff --git a/lib/filters/genericnode.js b/lib/filters/genericnode.js index 9a569f9..832823c 100644 --- a/lib/filters/genericnode.js +++ b/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() { + function setRefresh(f) { + refresh = f + } + + 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) } diff --git a/scss/_filters.scss b/scss/_filters.scss index d8de370..2e69dde 100644 --- a/scss/_filters.scss +++ b/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: 0; - padding: 0; - background: none; - font-size: 1.41em; + 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); - &:hover { - box-shadow: none !important; + &:hover { + box-shadow: none !important; + color: #dc0067; + background: rgba(255, 255, 255, 0.9); + } + + &:active { + box-shadow: none; + } } } }