Index: sources/gui/qml/components/NumPad.qml
===================================================================
diff -u -rc1d0546e2d1a51ff919b2172ce647003359f0853 -r31b1e7a5d69f014398827e16286f28515cd60e35
--- sources/gui/qml/components/NumPad.qml	(.../NumPad.qml)	(revision c1d0546e2d1a51ff919b2172ce647003359f0853)
+++ sources/gui/qml/components/NumPad.qml	(.../NumPad.qml)	(revision 31b1e7a5d69f014398827e16286f28515cd60e35)
@@ -34,12 +34,38 @@
     readonly property bool isValueValid : validator ? validator(valueInt) : true
     readonly property var valueInt      : isNaN(parseInt(_valueLabel.text)) ? undefined : parseInt(_valueLabel.text)
     readonly property string backSpace  : "qrc:/images/iBackspace"
+    property bool slideToOpen           : false
+    property bool isOpened              : false
 
+
+    onVisibleChanged        : if ( ! _root.visible  )   { reset()                           }
+    onDisplayValueChanged   : if ( _root.setter     )   { _root.setter( _valueLabel.text )  }
+    onSettingValueChanged   : _valueLabel.text = _root.settingValue !== undefined ? _root.settingValue : ""
+    width                   : 450
+    height                  : 500
+    visible                 : false
+    radius                  : 9
+    color                   : Colors.transparent
+
+    layer.enabled   : ! slideToOpen
+    layer.effect    : DropShadow { id: _dropShadow
+        horizontalOffset: 4
+        verticalOffset  : 4
+        radius          : 12
+        samples         : 32
+        color           : Colors.dropShadowDialogColor
+        source          : _root
+        anchors.fill    : _root
+    }
+
     signal cancel()
 
     x: Math.round((Variables.applicationWidth   - _root.width) / 2)
-    y: Math.round((Variables.applicationHeight  - _root.height))
+    y: Math.round((Variables.applicationHeight  - _root.height) / 2)
 
+    // slide animation for slideToOpen
+    Behavior on x { NumberAnimation { duration: Variables.keybardAnimationDuration } }
+
     function open(entry, title, min, max, unit) {
         reset()
         _root.settingValue  = Qt.binding(function () { return entry.text })
@@ -56,37 +82,48 @@
         show()
     }
 
-    function show() { if ( ! _root.visible  )   { _root.visible = true  } }
+    function show() {
+        if ( ! isOpened ) {
+            if ( ! _root.visible  )
+            {
+                _root.visible = true
+            }
 
-    function hide() { if ( _root.visible    )   { _root.visible = false } }
+            if ( slideToOpen )
+            {
+                print("show x: " + x)
+                x = x + _root.width
+            }
 
+            isOpened = true
+        }
+    }
+
+    function hide() {
+        if ( isOpened ) {
+            if ( slideToOpen )
+            {
+                print("hide x: " + x)
+
+                x = x - _root.width
+            }
+
+            else if ( _root.visible )
+            {
+                _root.visible = false
+            }
+
+            isOpened = false
+        }
+    }
+
     function reset() {
         _numPadGrid.replaceValueText = true
         _root.getter = null
         _root.setter = null
         _root.displayValue = ""
     }
 
-    onVisibleChanged        : if ( ! _root.visible  )   { reset()                           }
-    onDisplayValueChanged   : if ( _root.setter     )   { _root.setter( _valueLabel.text )  }
-    onSettingValueChanged   : _valueLabel.text = _root.settingValue !== undefined ? _root.settingValue : ""
-    width                   : 450
-    height                  : 500
-    visible                 : false
-    radius                  : 9
-    color                   : Colors.transparent
-
-    layer.enabled   : true
-    layer.effect    : DropShadow { id: _dropShadow
-        horizontalOffset: 4
-        verticalOffset  : 4
-        radius          : 12
-        samples         : 32
-        color           : Colors.dropShadowDialogColor
-        source          : _root
-        anchors.fill    : _root
-    }
-
     Image { id: _backgroundImage
         anchors.fill: parent
         source          : "qrc:/images/iPopupGradient"
@@ -109,19 +146,48 @@
             left        : parent.left
             margins     : 10
         }
+        visible: ! slideToOpen
 
         onClicked: {
             cancel()
             reset()
         }
     }
 
+    TouchRect { id  : _sliderButton
+        anchors {
+            verticalCenter  : parent.verticalCenter
+            left            : parent.right
+            leftMargin      : height / 2 * -1
+        }
+        z           : -1
+        width       : 100
+        height      : 100
+        radius      : height
+        border.color: Colors.transparent
+        backgroundColor : "#455B78"
+        onPressed       : isOpened ? hide() : show()
+
+        Image { id  : _iconImage
+            anchors {
+
+                verticalCenter  :  parent.verticalCenter
+                right           : parent.right
+                rightMargin     : 15
+            }
+            height  : Variables.headerIconDiameter
+            width   : Variables.headerIconDiameter
+            fillMode: Image.PreserveAspectFit
+            source  : isOpened ? "qrc:/images/iChevronLeft" :
+                                 "qrc:/images/iChevronRight"
+        }
+    }
+
     Text { id: _title
         anchors {
             top             : _root.top
             topMargin       : 5
             horizontalCenter: _root.horizontalCenter
-
         }
         font {
             pixelSize   : 26