diff options
| -rw-r--r-- | client/css/post-list-view.styl | 13 | ||||
| -rw-r--r-- | client/html/metric-header-item.tpl | 11 | ||||
| -rw-r--r-- | client/html/metric-header.tpl | 1 | ||||
| -rw-r--r-- | client/html/posts_header.tpl | 2 | ||||
| -rw-r--r-- | client/js/controls/metric_header_control.js | 35 | ||||
| -rw-r--r-- | client/js/models/abstract_list.js | 4 | ||||
| -rw-r--r-- | client/js/tags.js | 3 | ||||
| -rw-r--r-- | client/js/views/posts_header_view.js | 30 |
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; |