client: re-open bulk edit and metrics blocks when returning to post list.

+ select metrics on click; + improve header style

8 files changed, 80 insertions, 19 deletions

diff --git a/client/css/post-list-view.styl b/client/css/post-list-view.styl
index e92d509..0d043c8 100644
--- a/client/css/post-list-view.styl
+++ b/client/css/post-list-view.styl
@@ -200,15 +200,24 @@
         label
             display: inline !important
             margin-left: -0.5em
+            line-height 1.7em
+        a.append
+            line-height 1.7em
+            padding: 0.2em 0
+        form, ul
+            display: flex
+            flex-wrap: wrap
         .metric-list
             li
                 display: inline-block
                 line-height: 1.7em
                 margin-right: 0.5em
-                @media (max-width: 500px)
+                @media (max-width: 700px)
                     margin-bottom: 0.5em
+                border-width: 1px
+                &.selected
+                    border-style: solid
                 &:not(.selected)
-                    border-width: 1px
                     border-style: dotted
             li a
                 vertical-align: middle
diff --git a/client/html/metric-header-item.tpl b/client/html/metric-header-item.tpl
index 3fb975f..4e0e139 100644
--- a/client/html/metric-header-item.tpl
+++ b/client/html/metric-header-item.tpl
@@ -1,9 +1,6 @@
-<li class="<%= ctx.makeCssName(ctx.metric.tag.category, 'tag') %>">
-    <a href="<%- ctx.formatClientLink('posts', {
-                query: 'metric-' + ctx.escapeColons(ctx.metric.tag.names[0]) +
-                    ':' + ctx.metric.min + '..' + ctx.metric.max +
-                    ' sort:metric-' + ctx.escapeColons(ctx.metric.tag.names[0])
-                }) %>"
-       class="<%= ctx.makeCssName(ctx.metric.tag.category, 'tag') %>"><%
+<li class="<%= ctx.makeCssName(ctx.metric.tag.category, 'tag') %><%
+            if (ctx.selected) { %> selected<% } %>">
+    <a class="<%= ctx.makeCssName(ctx.metric.tag.category, 'tag') %><%
+            if (ctx.selected) { %> selected<% } %>"><%
         %><%- ctx.metric.tag.names[0] %></a>
 </li>
\ No newline at end of file
diff --git a/client/html/metric-header.tpl b/client/html/metric-header.tpl
index 9968f46..c88ed04 100644
--- a/client/html/metric-header.tpl
+++ b/client/html/metric-header.tpl
@@ -1,5 +1,6 @@
 <form class='horizontal'>
     <ul class='metric-list'></ul>
+    <wbr>
     <%= ctx.makeCheckbox({
         text: 'Show values on posts',
         name: 'show-values-on-posts',
diff --git a/client/html/posts_header.tpl b/client/html/posts_header.tpl
index 4efe665..1f5baad 100644
--- a/client/html/posts_header.tpl
+++ b/client/html/posts_header.tpl
@@ -12,7 +12,7 @@
             %><input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/><%
         %><% } %><%
         %><wbr/><%
-        %><a class='mousetrap button append desktop-only'
+        %><a class='mousetrap button append'
              href='<%- ctx.formatClientLink('help', 'search', 'posts') %>'><%
                 if (window.innerWidth <= 500) { %>Help<%
                 } else { %>Syntax help<% }
diff --git a/client/js/controls/metric_header_control.js b/client/js/controls/metric_header_control.js
index 428ba40..7bc03a3 100644
--- a/client/js/controls/metric_header_control.js
+++ b/client/js/controls/metric_header_control.js
@@ -13,6 +13,7 @@ class MetricHeaderControl extends events.EventTarget {
         super();
         this._ctx = ctx;
         this._hostNode = hostNode;
+        this._selectedMetrics = new MetricList();
 
         this._headerNode = mainTemplate(ctx);
         this._metricListNode = this._headerNode.querySelector('ul.metric-list');
@@ -22,16 +23,48 @@ class MetricHeaderControl extends events.EventTarget {
 
         MetricList.loadAll().then(response => {
             this._metrics = response.results;
+            this._addSelectedMetrics(ctx.parameters.metrics);
             this._installMetrics(response.results);
         });
     }
 
+    _addSelectedMetrics(metricsStr) {
+        let selectedNames = (metricsStr || '').split(' ');
+        for (let metric of [...this._metrics]) {
+            if (selectedNames.includes(metric.tag.names[0])) {
+                this._selectedMetrics.add(metric);
+            }
+        }
+    }
+
     _installMetrics(metrics) {
         for (let metric of metrics) {
-            const node = metricItemTemplate({metric: metric, ctx: this._ctx});
+            const node = metricItemTemplate(Object.assign({},
+                {
+                    metric: metric,
+                    selected: this._selectedMetrics.includes(metric),
+                },
+                this._ctx));
+            node.addEventListener('click', e => this._evtMetricClicked(e, node, metric));
             this._metricListNode.appendChild(node);
         }
     }
+
+    _evtMetricClicked(e, node, metric) {
+        e.preventDefault();
+        node.classList.toggle('selected');
+        node.querySelector('a').classList.toggle('selected');
+        if (this._selectedMetrics.includes(metric)) {
+            this._selectedMetrics.remove(metric);
+        } else {
+            this._selectedMetrics.add(metric);
+        }
+        this._ctx.parameters = Object.assign({}, this._ctx.parameters, {
+                metrics: this._selectedMetrics
+                    .map(metric => metric.tag.names[0]).join(' ')
+            });
+        this.dispatchEvent(new CustomEvent('submit'));
+    }
 }
 
 module.exports = MetricHeaderControl;
diff --git a/client/js/models/abstract_list.js b/client/js/models/abstract_list.js
index fb4dec8..31a0505 100644
--- a/client/js/models/abstract_list.js
+++ b/client/js/models/abstract_list.js
@@ -90,6 +90,10 @@ class AbstractList extends events.EventTarget {
         return this._list.filter(...args);
     }
 
+    includes(item) {
+        return this._list.includes(item);
+    }
+
     [Symbol.iterator]() {
         return this._list[Symbol.iterator]();
     }
diff --git a/client/js/tags.js b/client/js/tags.js
index 956022e..c32ef43 100644
--- a/client/js/tags.js
+++ b/client/js/tags.js
@@ -17,6 +17,9 @@ function refreshCategoryColorMap() {
             _stylesheet.sheet.insertRule(
                 `.${ruleName} { color: ${category.color}; border-color: ${category.color} }`,
                 _stylesheet.sheet.cssRules.length);
+            _stylesheet.sheet.insertRule(
+                `.${ruleName}.selected { color: white; background-color: ${category.color} }`,
+                _stylesheet.sheet.cssRules.length);
         }
     });
 }
diff --git a/client/js/views/posts_header_view.js b/client/js/views/posts_header_view.js
index 8935939..86c6998 100644
--- a/client/js/views/posts_header_view.js
+++ b/client/js/views/posts_header_view.js
@@ -191,6 +191,9 @@ class PostsHeaderView extends events.EventTarget {
 
         if (this._metricsButtonHolderNode) {
             this._metricControl = new MetricHeaderControl(this._metricsBlockNode, ctx);
+            this._metricControl.addEventListener('submit', e => {
+                this._navigate();
+            });
             this._metricsOpenButtonNode.addEventListener(
                 'click', e => this._evtOpenMetricsBtnClick(e));
             this._metricsCloseButtonNode.addEventListener(
@@ -218,6 +221,9 @@ class PostsHeaderView extends events.EventTarget {
         } else if (ctx.parameters.relations && this._bulkAddRelationEditor) {
             this._openBulkEditor(this._bulkAddRelationEditor);
         }
+        if (ctx.parameters.metrics) {
+            this._toggleMetricsBlock(true);
+        }
     }
 
     get _formNode() {
@@ -282,24 +288,28 @@ class PostsHeaderView extends events.EventTarget {
 
     _evtOpenBulkEditBtnClick(e) {
         e.preventDefault();
-        this._bulkEditBtnHolderNode.classList.toggle('opened', true);
-        this._bulkEditBlockNode.classList.toggle('hidden', false);
+        this._toggleBulkEditBlock(true);
         this._navigate();
     }
 
     _evtCloseBulkEditBtnClick(e) {
         e.preventDefault();
-        this._bulkEditBtnHolderNode.classList.toggle('opened', false);
+        this._toggleBulkEditBlock(false);
         this._closeAndShowAllBulkEditors();
-        this._bulkEditBlockNode.classList.toggle('hidden', true);
         this._navigate();
     }
 
     _openBulkEditor(editor) {
         editor.toggleOpen(true);
+        this._toggleBulkEditBlock(true);
         this._hideBulkEditorsExcept(editor);
     }
 
+    _toggleBulkEditBlock(open) {
+        this._bulkEditBtnHolderNode.classList.toggle('opened', open);
+        this._bulkEditBlockNode.classList.toggle('hidden', !open);
+    }
+
     _hideBulkEditorsExcept(editor) {
         for (let otherEditor of this._bulkEditors) {
             if (otherEditor !== editor) {
@@ -318,18 +328,21 @@ class PostsHeaderView extends events.EventTarget {
 
     _evtOpenMetricsBtnClick(e) {
         e.preventDefault();
-        this._metricsButtonHolderNode.classList.toggle('opened', true);
-        this._metricsBlockNode.classList.toggle('hidden', false);
+        this._toggleMetricsBlock(true);
         this._navigate();
     }
 
     _evtCloseMetricsBtnClick(e) {
         e.preventDefault();
-        this._metricsButtonHolderNode.classList.toggle('opened', false);
-        this._metricsBlockNode.classList.toggle('hidden', true);
+        this._toggleMetricsBlock(false);
         this._navigate();
     }
 
+    _toggleMetricsBlock(open) {
+        this._metricsButtonHolderNode.classList.toggle('opened', open);
+        this._metricsBlockNode.classList.toggle('hidden', !open);
+    }
+
     _evtSafetyButtonClick(e, url) {
         e.preventDefault();
         e.target.classList.toggle('disabled');
@@ -366,6 +379,7 @@ class PostsHeaderView extends events.EventTarget {
         let parameters = {
             query: this._queryInputNode.value,
             cachenumber: this._ctx.parameters.cachenumber,
+            metrics: this._ctx.parameters.metrics,
         };
         parameters.offset = parameters.query === this._ctx.parameters.query ?
             this._ctx.parameters.offset : 0;