Support switching keyboard mode by UI

src/ui/header.tis

@@ -139,11 +139,22 @@ class Header: Reactor.Component {
             <span #chat>{svg_chat}</span>
             <span #action>{svg_action}</span>
             <span #display>{svg_display}</span>
+            <span #keyboard>{svg_keyboard}</span>
+            {this.renderKeyboardPop()}
             {this.renderDisplayPop()}
             {this.renderActionPop()}
         </div>;
     }
 
+    function renderKeyboardPop(){
+        return <popup>
+            <menu.context #keyboard-options>
+                <li #legacy><span>{svg_checkmark}</span>{translate('Legacy mode')}</li> 
+                <li #map><span>{svg_checkmark}</span>{translate('Map mode')}</li> 
+            </menu>
+        </popup>;
+    }
+
     function renderDisplayPop() {
         return <popup>
             <menu.context #display-options>
@@ -252,6 +263,11 @@ class Header: Reactor.Component {
         me.popup(menu);
     }
 
+    event click $(#keyboard) (_, me) {
+        var menu = $(menu#keyboard-options);
+        me.popup(menu);
+    }
+
     event click $(#screen) (_, me) {
         if (pi.current_display == me.index) return;
         handler.switch_display(me.index);
@@ -332,6 +348,16 @@ class Header: Reactor.Component {
             toggleMenuState();
         }
     }
+
+    event click $(menu#keyboard-options>li) (_, me) {
+        stdout.println(me.id);
+        if (me.id == "legacy") {
+            handler.save_keyboard_mode("legacy");
+        } else if (me.id == "map") {
+            handler.save_keyboard_mode("map");
+        }
+        toggleMenuState()
+    }
 }
 
 function handle_custom_image_quality() {
@@ -355,9 +381,14 @@ function toggleMenuState() {
     var s = handler.get_view_style();
     if (!s) s = "original";
     values.push(s);
+    var k = handler.get_keyboard_mode();
+    values.push(k);
     for (var el in $$(menu#display-options>li)) {
         el.attributes.toggleClass("selected", values.indexOf(el.id) >= 0);
     }
+    for (var el in $$(menu#keyboard-options>li)) {
+        el.attributes.toggleClass("selected", values.indexOf(el.id) >= 0);
+    }
     for (var id in ["show-remote-cursor", "show-quality-monitor", "disable-audio", "enable-file-transfer", "disable-clipboard", "lock-after-session-end"]) {
         var el = self.select('#' + id);
         if (el) {