From c029124f813d5d1edc04ec5f1538fbbfcf1da2f2 Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Sat, 28 Nov 2015 19:51:23 +0700 Subject: [PATCH] redesign insights and open selects on mouseover --- .gitmodules | 2 +- app/views/insight/index.scala.html | 1 + public/stylesheets/insight.css | 53 +++++++++++++++++++------- public/vendor/multiple-select | 2 +- ui/insight/src/axis.js | 48 +++++++++++++++++++++++ ui/insight/src/chart.js | 18 +++++---- ui/insight/src/ctrl.js | 1 + ui/insight/src/filters.js | 31 +++++++++++++++ ui/insight/src/form.js | 61 ------------------------------ ui/insight/src/view.js | 32 +++++++++++----- 10 files changed, 154 insertions(+), 95 deletions(-) create mode 100644 ui/insight/src/axis.js create mode 100644 ui/insight/src/filters.js delete mode 100644 ui/insight/src/form.js diff --git a/.gitmodules b/.gitmodules index f7fbc4d7ba..beb37f01f7 100644 --- a/.gitmodules +++ b/.gitmodules @@ -27,4 +27,4 @@ url = https://github.com/ornicar/ChessPursuit [submodule "public/vendor/multiple-select"] path = public/vendor/multiple-select - url = https://github.com/wenzhixin/multiple-select + url = https://github.com/ornicar/multiple-select diff --git a/app/views/insight/index.scala.html b/app/views/insight/index.scala.html index 12d4b8e562..3635c35028 100644 --- a/app/views/insight/index.scala.html +++ b/app/views/insight/index.scala.html @@ -12,6 +12,7 @@ ui: @Html(ui), initialQuestion: @Html(toJson(question)), i18n: @jsI18n(), userId: "@u.id", +username: "@u.username", pageUrl: "@routes.Insight.index(u.username)", postUrl: "@routes.Insight.json(u.username)" }); diff --git a/public/stylesheets/insight.css b/public/stylesheets/insight.css index 10fd30f30d..2ed7cfb261 100644 --- a/public/stylesheets/insight.css +++ b/public/stylesheets/insight.css @@ -1,10 +1,3 @@ -.preview { - padding: 10px; - margin-bottom: 10px; - text-align: center; - background: rgba(99,0,0,0.5); - color: #fff; -} #insight .square-wrap { text-align: center; margin-top: 180px; @@ -28,21 +21,53 @@ margin-top: 10px; } -#insight .ms-parent { +#insight .top { + background: #fff; + border: 1px solid #ccc; + height: 60px; +} +#insight .top h2 { + font-size: 2em; + line-height: 60px; + margin-left: 15px; +} +#insight .top > * { + display: inline-block; +} +#insight .axis-form { + float: right; +} +#insight .axis-form .ms-choice { + padding: 30px 10px; + border-width: 0 1px; + border-radius: 0; + font-size: 14px; +} +#insight .axis-form .ms-choice span { + line-height: 60px; +} +#insight .axis-form .ms-choice div { + top: 18px; +} + +#insight .filters .ms-parent { display: block; margin-top: 10px; } -#insight .ms-parent > * { - position: absoule; +#insight .filters .ms-choice { + padding: 5px 10px; +} + +#insight .filters .ms-drop { + margin-left: 100%; top: 0; left: 0; } #insight .ms-choice { - padding: 5px 10px; + border-color: #ccc; } - -#insight .ms-drop { - margin-left: 100%; +#insight .ms-choice:focus { + outline:0; } #insight .ms-drop ul { padding: 0; diff --git a/public/vendor/multiple-select b/public/vendor/multiple-select index 0e7962a3e1..940677634e 160000 --- a/public/vendor/multiple-select +++ b/public/vendor/multiple-select @@ -1 +1 @@ -Subproject commit 0e7962a3e1b919687e9c706be757d9cb5ddeb231 +Subproject commit 940677634eba01e4d0e1aee1b0190a5252c21086 diff --git a/ui/insight/src/axis.js b/ui/insight/src/axis.js new file mode 100644 index 0000000000..1f7b477845 --- /dev/null +++ b/ui/insight/src/axis.js @@ -0,0 +1,48 @@ +var m = require('mithril'); + +module.exports = function(ctrl) { + return m('div.axis-form', [ + m('select.metric', { + multiple: true, + config: function(e, isUpdate) { + if (isUpdate) return; + $(e).multipleSelect({ + width: '200px', + single: true, + onClick: function(v) { + ctrl.setMetric(v.value); + }, + onFocus: function(v) { + console.log('onFocus', v); + } + }); + } + }, ctrl.ui.metrics.map(function(y) { + return m('option', { + value: y.key, + disabled: !ctrl.validCombination(ctrl.vm.dimension, y), + selected: ctrl.vm.metric.key === y.key + }, y.name); + })), + ' by ', + m('select.dimension', { + multiple: true, + config: function(e, isUpdate) { + if (isUpdate) return; + $(e).multipleSelect({ + width: '200px', + single: true, + onClick: function(v) { + ctrl.setDimension(v.value); + } + }); + } + }, ctrl.ui.dimensions.map(function(x) { + return m('option', { + value: x.key, + disabled: !ctrl.validCombination(x, ctrl.vm.metric), + selected: ctrl.vm.dimension.key === x.key + }, x.name); + })) + ]); +}; diff --git a/ui/insight/src/chart.js b/ui/insight/src/chart.js index 36d737633c..ac6a5c894f 100644 --- a/ui/insight/src/chart.js +++ b/ui/insight/src/chart.js @@ -45,9 +45,9 @@ function makeChart(el, data) { yAxis: 0, type: 'column', stack: s.stack, - animation: { - duration: 300 - }, + // animation: { + // duration: 300 + // }, dataLabels: { enabled: true, format: dataTypeFormat(s.dataType) @@ -66,15 +66,15 @@ function makeChart(el, data) { type: 'column', alignTicks: true, spacing: [20, 0, 20, 0], - animation: { - duration: 300 - }, backgroundColor: null, borderWidth: 0, borderRadius: 0, plotBackgroundColor: null, plotShadow: false, - plotBorderWidth: 0 + plotBorderWidth: 0, + style: { + font: "12px 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif" + } }, title: { text: null @@ -101,6 +101,9 @@ function makeChart(el, data) { }), plotOptions: { column: { + animation: { + duration: 300 + }, stacking: 'normal' } }, @@ -112,7 +115,6 @@ function makeChart(el, data) { enabled: true } }; - console.log(chartConf); $(el).highcharts(chartConf); } diff --git a/ui/insight/src/ctrl.js b/ui/insight/src/ctrl.js index c8303fd62f..a1af0e5efe 100644 --- a/ui/insight/src/ctrl.js +++ b/ui/insight/src/ctrl.js @@ -4,6 +4,7 @@ var throttle = require('./throttle'); module.exports = function(env) { this.ui = env.ui; + this.username = env.username; var findMetric = function(key) { return this.ui.metrics.filter(function(x) { diff --git a/ui/insight/src/filters.js b/ui/insight/src/filters.js new file mode 100644 index 0000000000..d12be27645 --- /dev/null +++ b/ui/insight/src/filters.js @@ -0,0 +1,31 @@ +var m = require('mithril'); + +module.exports = function(ctrl) { + return m('div.filters', [ + m('p', 'Filter results by:'), + ctrl.ui.dimensions.map(function(dimension) { + return m('select', { + multiple: true, + config: function(e, isUpdate) { + if (isUpdate) return; + $(e).multipleSelect({ + placeholder: dimension.name, + width: '240px', + selectAll: false, + filter: dimension.key === 'opening', + // single: dimension.key === 'color', + onClick: function() { + ctrl.setFilter(dimension.key, $(e).multipleSelect("getSelects")); + } + }); + } + }, dimension.values.map(function(value) { + var selected = ctrl.vm.filters[dimension.key]; + return m('option', { + value: value.key, + selected: selected && selected.indexOf(value.key) !== -1 + }, value.name); + })); + }) + ]); +}; diff --git a/ui/insight/src/form.js b/ui/insight/src/form.js deleted file mode 100644 index 4666db4994..0000000000 --- a/ui/insight/src/form.js +++ /dev/null @@ -1,61 +0,0 @@ -var m = require('mithril'); - -module.exports = { - filters: function(ctrl) { - return m('div.filters', [ - m('p', 'Filter results by:'), - ctrl.ui.dimensions.map(function(dimension) { - return m('select', { - multiple: true, - config: function(e, isUpdate) { - if (isUpdate) return; - $(e).multipleSelect({ - placeholder: dimension.name, - width: '240px', - selectAll: false, - filter: dimension.key === 'opening', - // single: dimension.key === 'color', - onClick: function() { - ctrl.setFilter(dimension.key, $(e).multipleSelect("getSelects")); - } - }); - } - }, dimension.values.map(function(value) { - var selected = ctrl.vm.filters[dimension.key]; - return m('option', { - value: value.key, - selected: selected && selected.indexOf(value.key) !== -1 - }, value.name); - })); - }) - ]); - }, - axis: function(ctrl) { - return m('div.axis-form', [ - 'Examine ', - m('select.metric', { - onchange: function(e) { - ctrl.setMetric(e.target.value); - } - }, ctrl.ui.metrics.map(function(y) { - return m('option', { - value: y.key, - disabled: !ctrl.validCombination(ctrl.vm.dimension, y), - selected: ctrl.vm.metric.key === y.key - }, y.name); - })), - ' by ', - m('select.dimension', { - onchange: function(e) { - ctrl.setDimension(e.target.value); - } - }, ctrl.ui.dimensions.map(function(x) { - return m('option', { - value: x.key, - disabled: !ctrl.validCombination(x, ctrl.vm.metric), - selected: ctrl.vm.dimension.key === x.key - }, x.name); - })) - ]); - } -}; diff --git a/ui/insight/src/view.js b/ui/insight/src/view.js index 1788247d74..9f95cee9fa 100644 --- a/ui/insight/src/view.js +++ b/ui/insight/src/view.js @@ -1,14 +1,25 @@ var m = require('mithril'); -var form = require('./form'); +var axis = require('./axis'); +var filters = require('./filters'); var chart = require('./chart'); var table = require('./table'); module.exports = function(ctrl) { return m('div', { class: ctrl.vm.answer ? '' : 'loading', + // config: function(el, isUpdate) { + // if (isUpdate) return; + // $(el).find('.ms-parent').each(function() { + // $(this).hover(function() { + // $(this).prev().multipleSelect('open'); + // }, function() { + // $(this).prev().multipleSelect('close'); + // }); + // }); + // } }, [ m('div.left', [ - form.filters(ctrl), + filters(ctrl), m('div.refresh', { config: function(e, isUpdate) { if (isUpdate) return; @@ -20,15 +31,16 @@ module.exports = function(ctrl) { } }) ]), - m('p.preview', - 'lichess insights ', - m('strong', 'developer preview'), - ' - not even a beta', - ' - use with light background' - ), - form.axis(ctrl), + m('div.top', [ + axis(ctrl), + m('h2', [ + m('a', { + href: '/@/' + ctrl.username, + }, ctrl.username), + '\'s chess insights' + ]) + ]), chart(ctrl), - // table.horiz(ctrl), table.vert(ctrl) ]); };