1 files changed, 27 insertions, 26 deletions
diff --git a/src/imports/controls/SpinBox.qml b/src/imports/controls/SpinBox.qml
index 77f89206..dee368e2 100644
--- a/src/imports/controls/SpinBox.qml
+++ b/src/imports/controls/SpinBox.qml
@@ -1,9 +1,9 @@
 /****************************************************************************
 **
-** Copyright (C) 2015 The Qt Company Ltd.
+** Copyright (C) 2016 The Qt Company Ltd.
 ** Contact: http://www.qt.io/licensing/
 **
-** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
 **
 ** $QT_BEGIN_LICENSE:LGPL3$
 ** Commercial License Usage
@@ -35,7 +35,7 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import Qt.labs.templates 1.0 as T
+import QtQuick.Templates 2.0 as T
 
 T.SpinBox {
     id: control
@@ -51,83 +51,84 @@ T.SpinBox {
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 6
-    leftPadding: 6 + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
-    rightPadding: 6 + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
-    opacity: control.enabled ? 1 : 0.3
+    leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
+    rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
 
-    //! [validator]
     validator: IntValidator {
         locale: control.locale.name
         bottom: Math.min(control.from, control.to)
         top: Math.max(control.from, control.to)
     }
-    //! [validator]
 
-    //! [contentItem]
     contentItem: TextInput {
+        z: 2
         text: control.textFromValue(control.value, control.locale)
+        opacity: control.enabled ? 1 : 0.3
 
         font: control.font
         color: "#353637"
-        selectionColor: "#fddd5c"
-        selectedTextColor: color
+        selectionColor: "#0066ff"
+        selectedTextColor: "#ffffff"
         horizontalAlignment: Qt.AlignHCenter
         verticalAlignment: Qt.AlignVCenter
 
+        readOnly: !control.editable
         validator: control.validator
         inputMethodHints: Qt.ImhFormattedNumbersOnly
+
+        Rectangle {
+            x: -6 - (down.indicator ? 1 : 0)
+            y: -6
+            width: control.width - (up.indicator ? up.indicator.width - 1 : 0) - (down.indicator ? down.indicator.width - 1 : 0)
+            height: control.height
+            visible: control.activeFocus
+            color: "transparent"
+            border.color: "#0066ff"
+            border.width: 2
+        }
     }
-    //! [contentItem]
 
-    //! [up.indicator]
     up.indicator: Rectangle {
         x: control.mirrored ? 0 : parent.width - width
         height: parent.height
         implicitWidth: 40
         implicitHeight: 40
-        color: up.pressed ? "#e4e4e4" : "#f6f6f6"
-        border.color: control.enabled ? "#353637" : "#bdbebf"
+        color: up.pressed ? "#d0d0d0" : "#e0e0e0"
 
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: parent.width / 3
             height: 2
-            color: control.enabled ? "#353637" : "#bdbebf"
+            color: enabled ? "#353637" : "#bdbebf"
         }
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: 2
             height: parent.width / 3
-            color: control.enabled ? "#353637" : "#bdbebf"
+            color: enabled ? "#353637" : "#bdbebf"
         }
     }
-    //! [up.indicator]
 
-    //! [down.indicator]
     down.indicator: Rectangle {
         x: control.mirrored ? parent.width - width : 0
         height: parent.height
         implicitWidth: 40
         implicitHeight: 40
-        color: down.pressed ? "#e4e4e4" : "#f6f6f6"
-        border.color: control.enabled ? "#353637" : "#bdbebf"
+        color: down.pressed ? "#d0d0d0" : "#e0e0e0"
 
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: parent.width / 3
             height: 2
-            color: control.enabled ? "#353637" : "#bdbebf"
+            color: enabled ? "#353637" : "#bdbebf"
         }
     }
-    //! [down.indicator]
 
-    //! [background]
     background: Rectangle {
         implicitWidth: 140
-        border.color: "#bdbebf"
+        border.color: "#e0e0e0"
     }
-    //! [background]
 }