redesign insights and open selects on mouseover

.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

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)"
 });

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;

public/vendor/multiple-select

@@ -1 +1 @@
-Subproject commit 0e7962a3e1b919687e9c706be757d9cb5ddeb231
+Subproject commit 940677634eba01e4d0e1aee1b0190a5252c21086

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);
+    }))
+  ]);
+};

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);
 }
 

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) {

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);
+      }));
+    })
+  ]);
+};

ui/insight/src/form.js

@@ -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);
-      }))
-    ]);
-  }
-};

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)
   ]);
 };