controls panel moved to xml

res/layouts/pages/controls.xml

@@ -0,0 +1,11 @@
+<panel size='400' color='0' padding='8'>
+    <label id='sensitivity_label'>-</label>
+    <trackbar id='sensitivity_track' 
+              min='0.1' max='10' value='2' step='0.1' track-width='4' 
+              consumer='change_sensitivity'>
+    </trackbar>
+    <panel id='bindings_panel' size='380,200' padding='2' interval='1' max-length='400' color='#0000004C'>
+        <!-- content is generated in script -->
+    </panel>
+    <button padding='10' onclick='menu:back()'>@Back</button>
+</panel>

res/layouts/pages/controls.xml.lua

@@ -0,0 +1,25 @@
+function refresh_sensitivity()
+    document.sensitivity_label.text = string.format(
+        "%s: %s", 
+        gui.str("Mouse Sensitivity", "settings"),
+        core.str_setting("camera.sensitivity")
+    )
+end
+
+function change_sensitivity(val)
+    core.set_setting("camera.sensitivity", val)
+    refresh_sensitivity()
+end
+
+function on_open()
+    document.sensitivity_track.value = core.get_setting("camera.sensitivity")
+    refresh_sensitivity()
+
+    local panel = document.bindings_panel
+    local bindings = core.get_bindings()
+    for i,name in ipairs(bindings) do
+        panel:add(gui.template("binding", {
+            id=name, name=gui.str(name)
+        }))
+    end
+end

res/layouts/pages/generators.xml

@@ -1,3 +1,3 @@
-<panel size='400' color='#00000080' padding='8'>
+<panel size='400' color='#00000080' padding='8' context='settings'>
     <!-- content is generated in script -->
 </panel>

res/layouts/templates/binding.xml

@@ -0,0 +1,4 @@
+<panel size='400,40' padding='4' color='0' orientation='horizontal'>
+    <bindbox binding='%{id}'/>
+    <label margin='6'>%{name}</label>
+</panel>

res/layouts/templates/pack.xml

@@ -1,4 +1,4 @@
-<container onclick='%{callback}' size='540,80' color='#0F1E2DB2'>
+<container onclick='%{callback}' size='540,80' color='#0F1E2DB2' hover-color='#0F1E2DF0'>
     <label color='#FFFFFF80' size='300,25' align='right' gravity='top-right'>
         [%{id}]
     </label>
@@ -12,7 +12,7 @@
     </label>
     <button if='%{remover}' onclick='%{remover}' color='0' hover-color='#FFFFFF2B' 
             gravity='center-right' margin='10'>
-        <image src='gui/cross' size='32,32'/>
+        <image src='gui/cross' size='32,32' color='#FFFFFF80'/>
     </button>
     <image pos='8,8' src='%{icon}' size='64'></image>
 </container>