add analysis preferences with inline notation

app/views/analyse/jsI18n.scala.html

@@ -41,6 +41,7 @@ trans.inLocalBrowser,
 trans.toggleLocalEvaluation,
 // action menu
 trans.menu,
+trans.preferences,
 trans.computerAnalysis,
 trans.enable,
 trans.bestMoveArrow,

ui/analyse/src/actionMenu.ts

@@ -189,11 +189,10 @@ export function view(ctrl: AnalyseCtrl): VNode {
     ctrl.showComputer() ? [
       boolSetting(ctrl, {
         name: 'bestMoveArrow',
+        title: 'Keyboard: a',
         id: 'shapes',
         checked: ctrl.showAutoShapes(),
-        change(e) {
-          ctrl.toggleAutoShapes((e.target as HTMLInputElement).checked);
-        }
+        change: ctrl.toggleAutoShapes
       }),
       boolSetting(ctrl, {
         name: 'evaluationGauge',
@@ -206,9 +205,7 @@ export function view(ctrl: AnalyseCtrl): VNode {
         title: 'removesTheDepthLimit',
         id: 'infinite',
         checked: ceval.infinite(),
-        change(e) {
-          ctrl.cevalSetInfinite((e.target as HTMLInputElement).checked);
-        }
+        change: ctrl.cevalSetInfinite
       }),
       (id => {
         const max = 5;
@@ -265,8 +262,23 @@ export function view(ctrl: AnalyseCtrl): VNode {
       ]))('analyse-memory') : null
     ] : []) : [];
 
+    const notationConfig = [
+      h('h2', ctrl.trans.noarg('preferences')),
+      boolSetting(ctrl, {
+        name: 'Inline notation',
+        title: 'Keyboard: Shift+i',
+        id: 'inline',
+        checked: ctrl.treeView.inline(),
+        change(v) {
+          ctrl.treeView.set(v);
+          ctrl.actionMenu.toggle();
+        }
+      })
+    ];
+
     return h('div.action_menu',
       tools
+        .concat(notationConfig)
         .concat(cevalConfig)
         .concat(ctrl.mainline.length > 4 ? [h('h2', ctrl.trans.noarg('replayMode')), autoplayButtons(ctrl)] : [])
         .concat([
@@ -296,7 +308,7 @@ interface BoolSetting {
   id: string,
   checked: boolean;
   disabled?: boolean;
-  change(e: MouseEvent): void;
+  change(v: boolean): void;
 }
 
 function boolSetting(ctrl: AnalyseCtrl, o: BoolSetting) {
@@ -311,7 +323,7 @@ function boolSetting(ctrl: AnalyseCtrl, o: BoolSetting) {
           type: 'checkbox',
           checked: o.checked
         },
-        hook: bind('change', o.change, ctrl.redraw)
+        hook: bind('change', e => o.change((e.target as HTMLInputElement).checked), ctrl.redraw)
       }),
       h('label', { attrs: { 'for': fullId } })
     ])

ui/analyse/src/keyboard.ts

@@ -1,6 +1,6 @@
 import * as control from './control';
 import AnalyseCtrl from './ctrl';
-import { bind as bindEvent } from './util';
+import { bind as bindEvent, dataIcon } from './util';
 import { h } from 'snabbdom'
 import { VNode } from 'snabbdom/vnode'
 
@@ -50,13 +50,10 @@ export function bind(ctrl: AnalyseCtrl): void {
     ctrl.autoScroll();
     ctrl.redraw();
   }));
-  kbd.bind('shift+t', preventing(function() {
+  kbd.bind('shift+i', preventing(function() {
     ctrl.treeView.toggle();
     ctrl.redraw();
   }));
-  kbd.bind('esc', function() {
-    ctrl.chessground.cancelMove();
-  });
 
   if (ctrl.studyPractice) return;
 
@@ -132,7 +129,7 @@ export function view(ctrl: AnalyseCtrl): VNode {
     }
   }, [
     h('a.close.icon', {
-      attrs: { 'data-icon': 'L' },
+      attrs: dataIcon('L'),
       hook: bindEvent('click', () => ctrl.keyboardHelp = false, ctrl.redraw)
     }),
     h('div.scrollable', [
@@ -146,6 +143,7 @@ export function view(ctrl: AnalyseCtrl): VNode {
         row([k('shift'), k('←'), or(), k('shift'), k('→')], trans('keyEnterOrExitVariation')),
         row([k('shift'), k('j'), or(), k('shift'), k('k')], trans('keyEnterOrExitVariation')),
         header('Analysis options'),
+        row([k('shift'), k('i')], 'Inline notation'),
         row([k('l')], 'Local computer analysis'),
         row([k('a')], 'Computer arrows'),
         row([k('space')], 'Play computer best move'),

ui/analyse/src/treeView/treeView.ts

@@ -40,24 +40,33 @@ export type TreeViewKey = 'column' | 'inline';
 
 export interface TreeView {
   get: StoredProp<TreeViewKey>;
+  set(inline: boolean): void;
   toggle(): void;
+  inline(): boolean;
 }
 
 export function ctrl(): TreeView {
   const value = storedProp<TreeViewKey>('treeView', 'column');
+  function inline() {
+    return value() === 'inline';
+  }
+  function set(i: boolean) {
+    value(i ? 'inline' : 'column');
+  }
   return {
     get: value,
+    set,
     toggle() {
-      value(value() === 'column' ? 'inline' : 'column');
-    }
+      set(!inline());
+    },
+    inline
   };
 }
 
 
 // entry point, dispatching to selected view
 export function render(ctrl: AnalyseCtrl, concealOf?: ConcealOf): VNode {
-  if (ctrl.treeView.get() === 'column') return column(ctrl, concealOf);
-  return inline(ctrl);
+  return ctrl.treeView.inline() ? inline(ctrl) : column(ctrl, concealOf);
 }
 
 export function nodeClasses(c: AnalyseCtrl, path: Tree.Path): NodeClasses {