scrollbar, options and widgets changes

* complete scrollbar skin
* implement scrollbar functionality (scrolling with mouse)
* fix onMouseClick issues
* add tabs in options (graphics and general tab)
* add new option for limiting frame rate using scrollbar
* add new widget property "clipping" that will be used on scrollable areas

modules/client_options/general.otui

@@ -0,0 +1,28 @@
+Panel
+  OptionCheckBox
+    id: classicControl
+    text: Classic control
+
+  OptionCheckBox
+    id: showInfoMessagesInConsole
+    text: Show info messages in console
+
+  OptionCheckBox
+    id: showEventMessagesInConsole
+    text: Show event messages in console
+
+  OptionCheckBox
+    id: showStatusMessagesInConsole
+    text: Show status messages in console
+
+  OptionCheckBox
+    id: showTimestampsInConsole
+    text: Show timestamps in console
+
+  OptionCheckBox
+    id: showLevelsInConsole
+    text: Show levels in console
+
+  OptionCheckBox
+    id: showPrivateMessagesInConsole
+    text: Show private messages in console

modules/client_options/graphics.otui

@@ -0,0 +1,32 @@
+Panel
+  OptionCheckBox
+    id: vsync
+    text: Enable vertical synchronization
+    tooltip: Limits FPS to 60
+
+  OptionCheckBox
+    id: showfps
+    text: Show frame rate
+
+  OptionCheckBox
+    id: fullscreen
+    text: Fullscreen
+
+  Label
+    text: Frame rate limit
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 6
+
+  HorizontalScrollBar
+    id: frameRateScrollBar
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin-top: 3
+    minimum: 0
+    maximum: 50
+    value: 0
+    step: 1
+    @onValueChange: g_app.setFrameSleep(self:getValue())

modules/client_options/options.lua

@@ -2,6 +2,7 @@ Options = {}
 
 local optionsWindow
 local optionsButton
+local optionsTabBar
 local options = { vsync = true,
                   showfps = true,
                   fullscreen = false,
@@ -22,18 +23,24 @@ function Options.init()
     end
   end
 
+  Keyboard.bindKeyDown('Ctrl+P', Options.toggle)
+
   optionsWindow = displayUI('options.otui')
   optionsWindow:hide()
   optionsButton = TopMenu.addLeftButton('optionsButton', 'Options (Ctrl+O)', 'options.png', Options.toggle)
-  Keyboard.bindKeyDown('Ctrl+O', Options.toggle)
+  optionsTabBar = optionsWindow:getChildById('optionsTabBar')
+  optionsTabBar:setContentWidget(optionsWindow:getChildById('optionsTabContent'))
+  optionsTabBar:addTab('General', loadUI('general.otui'))
+  optionsTabBar:addTab('Graphics', loadUI('graphics.otui'))
 end
 
 function Options.terminate()
-  Keyboard.unbindKeyDown('Ctrl+O')
+  Keyboard.unbindKeyDown('Ctrl+P')
   optionsWindow:destroy()
   optionsWindow = nil
   optionsButton:destroy()
   optionsButton = nil
+  optionsTabBar = nil
   Options = nil
 end
 

modules/client_options/options.otui

@@ -16,51 +16,24 @@ OptionCheckBox < CheckBox
 MainWindow
   id: optionsWindow
   text: Options
-  size: 286 250
+  size: 286 200
 
   @onEnter: Options.hide()
   @onEscape: Options.hide()
 
-  OptionCheckBox
-    id: vsync
-    text: Enable vertical synchronization
-    tooltip: Limits FPS to 60
+  TabBar
+    id: optionsTabBar
+    anchors.top: parent.top
+    anchors.left: parent.left
+    anchors.right: parent.right
 
-  OptionCheckBox
-    id: showfps
-    text: Show frame rate
-
-  OptionCheckBox
-    id: fullscreen
-    text: Fullscreen
-
-  OptionCheckBox
-    id: classicControl
-    text: Classic control
-
-  OptionCheckBox
-    id: showInfoMessagesInConsole
-    text: Show info messages in console
-
-  OptionCheckBox
-    id: showEventMessagesInConsole
-    text: Show event messages in console
-
-  OptionCheckBox
-    id: showStatusMessagesInConsole
-    text: Show status messages in console
-
-  OptionCheckBox
-    id: showTimestampsInConsole
-    text: Show timestamps in console
-
-  OptionCheckBox
-    id: showLevelsInConsole
-    text: Show levels in console
-
-  OptionCheckBox
-    id: showPrivateMessagesInConsole
-    text: Show private messages in console
+  Panel
+    id: optionsTabContent
+    anchors.top: optionsTabBar.bottom
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    margin-top: 10
 
   Button
     text: Ok