QmlDesigner: Add RealSpinBox and refactor SpinBox

 * Transfer all changes which came up while Qt Creator integration
 * Refactor states by using dedicated edit property
 * Refactor alias properties
 * Set SpinBox slider indicator default to false
 * Add CheckBox tri-state
 * Fix Menu closePolicy
 * Remove some connections
 * Fix TranslationIndicator
 * Add new values and fix some missing scale factor multiplications
 * Add new icon font
 * Use MenuItem instead of Action for context menu due to shortcut issue
 * Add RealSpinBox due to the following bug QDS-806
 * Refactor SpinBox with findings during RealSpiBox implementation
 * Fix SpinBoxIndicator enable/disable state
 * Fix RealSpinBoxIndicator enable/disable with a new property called
   realEnabled and synching between the actual property and the new one
 * Make RealSpinBoxIndicator increase/decrease on release
 * Add drag start/end signals
 * Fix indicator behavior exiting/entering while pressing (and holding)
 * Fix wheel and dragging step size for increase/decrease
 * Fix reset of step size for cursor keys
 * Fix press and hold timer
 * Set decimals 0 by default (int by default)
 * Replace SpinBox with RealSpinBox in HelperWidgets

Change-Id: Ieda049595e6483b052fcdf4ca597f6af66e5f4dc
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

18 files changed, 975 insertions, 182 deletions

diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml
index 5b368565ae..a6874c7bd7 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml
@@ -33,15 +33,13 @@ Item {
     property alias decimals: spinBox.decimals
     property alias hasSlider: spinBox.hasSlider
 
-    property real minimumValue: 0.0
-    property real maximumValue: 1.0
-    property real stepSize: 0.1
+    property alias minimumValue: spinBox.realFrom
+    property alias maximumValue: spinBox.realTo
+    property alias stepSize: spinBox.realStepSize
 
     property alias sliderIndicatorVisible: spinBox.sliderIndicatorVisible
 
-    property real value
-
-    onValueChanged: spinBox.value = wrapper.value * spinBox.factor
+    property alias value: spinBox.realValue
 
     signal compressedValueModified
     signal valueModified
@@ -49,45 +47,20 @@ Item {
     width: 90
     implicitHeight: spinBox.height
 
-    onStepSizeChanged: spinBox.convert("stepSize", wrapper.stepSize)
-    onMinimumValueChanged: spinBox.convert("from", wrapper.minimumValue)
-    onMaximumValueChanged: spinBox.convert("to", wrapper.maximumValue)
-
-    StudioControls.SpinBox {
+    StudioControls.RealSpinBox {
         id: spinBox
 
-        onValueModified: wrapper.valueModified()
-        onCompressedValueModified: wrapper.compressedValueModified()
+        realFrom: 0.0
+        realTo: 1.0
+        realStepSize: 0.1
+        decimals: 2
 
-        onValueChanged: {
-            if (spinBox.__initialized)
-                wrapper.value = spinBox.value / spinBox.factor
-        }
+        onRealValueModified: wrapper.valueModified()
+        onCompressedRealValueModified: wrapper.compressedValueModified()
 
         width: wrapper.width
-        decimals: 2
-
         actionIndicatorVisible: false
 
-        property bool __initialized: false
-
         property bool hasSlider: spinBox.sliderIndicatorVisible
-
-        Component.onCompleted: {
-            spinBox.__initialized = true
-
-            spinBox.convert("stepSize", wrapper.stepSize)
-            spinBox.convert("from", wrapper.minimumValue)
-            spinBox.convert("to", wrapper.maximumValue)
-
-            spinBox.value = wrapper.value * spinBox.factor
-        }
-
-        function convert(target, value) {
-            if (!spinBox.__initialized)
-                return
-            spinBox[target] = Math.round(value * spinBox.factor)
-        }
-
     }
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml
index 02665fc77a..8411e8d173 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml
@@ -34,9 +34,9 @@ Item {
     property alias decimals: spinBox.decimals
     property alias hasSlider: spinBox.hasSlider
 
-    property real minimumValue: 0.0
-    property real maximumValue: 99
-    property real stepSize: 1.0
+    property alias minimumValue: spinBox.realFrom
+    property alias maximumValue: spinBox.realTo
+    property alias stepSize: spinBox.realStepSize
 
     property alias backendValue: spinBox.backendValue
     property alias sliderIndicatorVisible: spinBox.sliderIndicatorVisible
@@ -44,35 +44,12 @@ Item {
     width: 96
     implicitHeight: spinBox.height
 
-    property bool __initialized: false
-
-    Component.onCompleted: {
-        wrapper.__initialized = true
-
-        convert("stepSize", stepSize)
-        convert("from", minimumValue)
-        convert("to", maximumValue)
-    }
-
-    onStepSizeChanged: convert("stepSize", stepSize)
-    onMinimumValueChanged: convert("from", minimumValue)
-    onMaximumValueChanged: convert("to", maximumValue)
-
-    function convert(target, value) {
-        if (!wrapper.__initialized)
-            return
-        spinBox[target] = Math.round(value * spinBox.factor)
-    }
-
-    StudioControls.SpinBox {
+    StudioControls.RealSpinBox {
         id: spinBox
 
-        property real realValue: value / factor
         property variant backendValue
         property bool hasSlider: wrapper.sliderIndicatorVisible
 
-        from: minimumValue * factor
-        to: maximumValue * factor
         width: wrapper.width
 
         ExtendedFunctionLogic {
@@ -88,13 +65,14 @@ Item {
             id: colorLogic
             backendValue: spinBox.backendValue
             onValueFromBackendChanged: {
-                spinBox.value = valueFromBackend * spinBox.factor;
+                if (valueFromBackend !== undefined)
+                    spinBox.realValue = valueFromBackend
             }
         }
 
         labelColor: edit ? StudioTheme.Values.themeTextColor : colorLogic.textColor
 
-        onCompressedValueModified: {
+        onCompressedRealValueModified: {
             if (backendValue.value !== realValue)
                 backendValue.value = realValue;
         }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml
index 142421ee99..f75b54d261 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml
@@ -90,9 +90,9 @@ T.CheckBox {
         border.width: StudioTheme.Values.border
 
         T.Label {
-            id: checkBoxIcon
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
+            id: checkedIcon
+            x: (parent.width - checkedIcon.width) / 2
+            y: (parent.height - checkedIcon.height) / 2
             text: StudioTheme.Constants.tickIcon
             visible: myCheckBox.checkState === Qt.Checked
             color: StudioTheme.Values.themeTextColor
@@ -100,17 +100,16 @@ T.CheckBox {
             font.family: StudioTheme.Constants.iconFont.family
         }
 
-        /*
-        // Tristate only
-        Rectangle {
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            width: 16
-            height: 3
-            color: myCheckBox.palette.text
+        T.Label {
+            id: partiallyCheckedIcon
+            x: (parent.width - checkedIcon.width) / 2
+            y: (parent.height - checkedIcon.height) / 2
+            text: StudioTheme.Constants.triState
             visible: myCheckBox.checkState === Qt.PartiallyChecked
+            color: StudioTheme.Values.themeTextColor
+            font.pixelSize: StudioTheme.Values.sliderControlSizeMulti
+            font.family: StudioTheme.Constants.iconFont.family
         }
-*/
     }
 
     states: [
@@ -150,7 +149,11 @@ T.CheckBox {
                 border.color: StudioTheme.Values.themeControlOutlineDisabled
             }
             PropertyChanges {
-                target: checkBoxIcon
+                target: checkedIcon
+                color: StudioTheme.Values.themeTextColorDisabled
+            }
+            PropertyChanges {
+                target: partiallyCheckedIcon
                 color: StudioTheme.Values.themeTextColorDisabled
             }
             PropertyChanges {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
index c61e7e0dbf..2f2ebb0541 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
@@ -53,7 +53,7 @@ T.ComboBox {
     wheelEnabled: false
 
     onFocusChanged: {
-        if (!focus)
+        if (!myComboBox.focus)
             comboBoxPopup.close()
     }
 
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml
new file mode 100644
index 0000000000..d260940c39
--- /dev/null
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.12
+import QtQuick.Templates 2.12 as T
+import StudioTheme 1.0 as StudioTheme
+
+T.Popup {
+    id: sliderPopup
+
+    property T.Control myControl
+
+    dim: false
+    closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent
+
+    background: Rectangle {
+        color: StudioTheme.Values.themeControlBackground
+        border.color: StudioTheme.Values.themeInteraction
+    }
+
+    contentItem: T.Slider {
+        id: slider
+        anchors.fill: parent
+
+        bottomPadding: 0
+        topPadding: 0
+        rightPadding: 3
+        leftPadding: 3
+
+        from: myControl.realFrom
+        value: myControl.realValue
+        to: myControl.realTo
+
+        focusPolicy: Qt.NoFocus
+
+        handle: Rectangle {
+            x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
+            y: slider.topPadding + (slider.availableHeight / 2) - (height / 2)
+            width: StudioTheme.Values.sliderHandleWidth
+            height: StudioTheme.Values.sliderHandleHeight
+            radius: 0
+            color: slider.pressed ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeControlOutline
+        }
+
+        background: Rectangle {
+            x: slider.leftPadding
+            y: slider.topPadding + (slider.availableHeight / 2) - (height / 2)
+            width: slider.availableWidth
+            height: StudioTheme.Values.sliderTrackHeight
+            radius: 0
+            color: StudioTheme.Values.themeSliderInactiveTrack
+
+            Rectangle {
+                width: slider.visualPosition * parent.width
+                height: parent.height
+                color: StudioTheme.Values.themeSliderActiveTrack
+                radius: 0
+            }
+        }
+
+        onMoved: {
+            var currValue = myControl.value
+            myControl.realValue = slider.value
+
+            if (currValue !== myControl.realValue)
+                myControl.realValueModified()
+        }
+    }
+}
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml
new file mode 100644
index 0000000000..5213c09d95
--- /dev/null
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml
@@ -0,0 +1,345 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.12
+import QtQuick.Templates 2.12 as T
+import StudioTheme 1.0 as StudioTheme
+
+T.SpinBox {
+    id: mySpinBox
+
+    property real realFrom: 0.0
+    property real realTo: 99.0
+    property real realValue: 1.0
+    property real realStepSize: 1.0
+
+    property alias labelColor: spinBoxInput.color
+    property alias actionIndicator: actionIndicator
+
+    property int decimals: 0
+
+    property real minStepSize: 1
+    property real maxStepSize: 10
+
+    property bool edit: spinBoxInput.activeFocus
+    property bool hover: false // This property is used to indicate the global hover state
+    property bool drag: false
+
+    property alias actionIndicatorVisible: actionIndicator.visible
+    property real __actionIndicatorWidth: StudioTheme.Values.squareComponentWidth
+    property real __actionIndicatorHeight: StudioTheme.Values.height
+
+    property bool spinBoxIndicatorVisible: true
+    property real __spinBoxIndicatorWidth: StudioTheme.Values.smallRectWidth - 2
+                                           * StudioTheme.Values.border
+    property real __spinBoxIndicatorHeight: StudioTheme.Values.height / 2
+                                            - StudioTheme.Values.border
+
+    property alias sliderIndicatorVisible: sliderIndicator.visible
+    property real __sliderIndicatorWidth: StudioTheme.Values.squareComponentWidth
+    property real __sliderIndicatorHeight: StudioTheme.Values.height
+
+    signal realValueModified
+    signal compressedRealValueModified
+    signal dragStarted
+    signal dragEnded
+
+    // Use custom wheel handling due to bugs
+    property bool __wheelEnabled: false
+    wheelEnabled: false
+
+    width: StudioTheme.Values.squareComponentWidth * 5
+    height: StudioTheme.Values.height
+
+    leftPadding: spinBoxIndicatorDown.x + spinBoxIndicatorDown.width
+                 - (spinBoxIndicatorVisible ? 0 : StudioTheme.Values.border)
+    rightPadding: sliderIndicator.width - (sliderIndicatorVisible ? StudioTheme.Values.border : 0)
+
+    font.pixelSize: StudioTheme.Values.myFontSize
+    editable: true
+
+    // Leave this in for now
+    from: -99
+    value: 0
+    to: 99
+
+    validator: DoubleValidator {
+        id: doubleValidator
+        locale: mySpinBox.locale.name
+        notation: DoubleValidator.StandardNotation
+        decimals: mySpinBox.decimals
+        bottom: Math.min(mySpinBox.realFrom, mySpinBox.realTo)
+        top: Math.max(mySpinBox.realFrom, mySpinBox.realTo)
+    }
+
+    ActionIndicator {
+        id: actionIndicator
+        myControl: mySpinBox
+        x: 0
+        y: 0
+        width: actionIndicator.visible ? __actionIndicatorWidth : 0
+        height: actionIndicator.visible ? __actionIndicatorHeight : 0
+    }
+
+    up.indicator: RealSpinBoxIndicator {
+        id: spinBoxIndicatorUp
+        myControl: mySpinBox
+        iconFlip: -1
+        visible: spinBoxIndicatorVisible
+        onRealReleased: mySpinBox.realIncrease()
+        onRealPressAndHold: mySpinBox.realIncrease()
+        x: actionIndicator.width + (actionIndicatorVisible ? 0 : StudioTheme.Values.border)
+        y: StudioTheme.Values.border
+        width: spinBoxIndicatorVisible ? __spinBoxIndicatorWidth : 0
+        height: spinBoxIndicatorVisible ? __spinBoxIndicatorHeight : 0
+
+        realEnabled: (mySpinBox.realFrom < mySpinBox.realTo) ? (mySpinBox.realValue < mySpinBox.realTo) : (mySpinBox.realValue > mySpinBox.realTo)
+    }
+
+    down.indicator: RealSpinBoxIndicator {
+        id: spinBoxIndicatorDown
+        myControl: mySpinBox
+        visible: spinBoxIndicatorVisible
+        onRealReleased: mySpinBox.realDecrease()
+        onRealPressAndHold: mySpinBox.realDecrease()
+        x: actionIndicator.width + (actionIndicatorVisible ? 0 : StudioTheme.Values.border)
+        y: spinBoxIndicatorUp.y + spinBoxIndicatorUp.height
+        width: spinBoxIndicatorVisible ? __spinBoxIndicatorWidth : 0
+        height: spinBoxIndicatorVisible ? __spinBoxIndicatorHeight : 0
+
+        realEnabled: (mySpinBox.realFrom < mySpinBox.realTo) ? (mySpinBox.realValue > mySpinBox.realFrom) : (mySpinBox.realValue < mySpinBox.realFrom)
+    }
+
+    contentItem: RealSpinBoxInput {
+        id: spinBoxInput
+        myControl: mySpinBox
+        validator: doubleValidator
+    }
+
+    background: Rectangle {
+        id: spinBoxBackground
+        color: StudioTheme.Values.themeControlOutline
+        border.color: StudioTheme.Values.themeControlOutline
+        border.width: StudioTheme.Values.border
+        width: mySpinBox.width
+        height: mySpinBox.height
+    }
+
+    CheckIndicator {
+        id: sliderIndicator
+        myControl: mySpinBox
+        myPopup: sliderPopup
+        x: spinBoxInput.x + spinBoxInput.width - StudioTheme.Values.border
+        width: sliderIndicator.visible ? __sliderIndicatorWidth : 0
+        height: sliderIndicator.visible ? __sliderIndicatorHeight : 0
+        visible: false // reasonable default
+    }
+
+    RealSliderPopup {
+        id: sliderPopup
+        myControl: mySpinBox
+        x: spinBoxInput.x
+        y: StudioTheme.Values.height - StudioTheme.Values.border
+        width: spinBoxInput.width + sliderIndicator.width - StudioTheme.Values.border
+        height: StudioTheme.Values.sliderHeight
+
+        enter: Transition {
+        }
+        exit: Transition {
+        }
+    }
+
+    textFromValue: function (value, locale) {
+        return Number(mySpinBox.realValue).toLocaleString(locale, 'f', mySpinBox.decimals)
+    }
+
+    valueFromText: function (text, locale) {
+        mySpinBox.setRealValue(Number.fromLocaleString(locale, spinBoxInput.text))
+        return 0
+    }
+
+    states: [
+        State {
+            name: "default"
+            when: mySpinBox.enabled && !mySpinBox.hover
+                  && !mySpinBox.edit && !mySpinBox.drag
+            PropertyChanges {
+                target: mySpinBox
+                __wheelEnabled: false
+            }
+            PropertyChanges {
+                target: spinBoxInput
+                selectByMouse: false
+            }
+            PropertyChanges {
+                target: spinBoxBackground
+                color: StudioTheme.Values.themeControlOutline
+                border.color: StudioTheme.Values.themeControlOutline
+            }
+        },
+        State {
+            name: "edit"
+            when: mySpinBox.edit
+            PropertyChanges {
+                target: mySpinBox
+                __wheelEnabled: true
+            }
+            PropertyChanges {
+                target: spinBoxInput
+                selectByMouse: true
+            }
+            PropertyChanges {
+                target: spinBoxBackground
+                color: StudioTheme.Values.themeInteraction
+                border.color: StudioTheme.Values.themeInteraction
+            }
+        },
+        State {
+            name: "drag"
+            when: mySpinBox.drag
+            PropertyChanges {
+                target: spinBoxBackground
+                color: StudioTheme.Values.themeInteraction
+                border.color: StudioTheme.Values.themeInteraction
+            }
+        },
+        State {
+            name: "disabled"
+            when: !mySpinBox.enabled
+            PropertyChanges {
+                target: spinBoxBackground
+                color: StudioTheme.Values.themeControlOutlineDisabled
+                border.color: StudioTheme.Values.themeControlOutlineDisabled
+            }
+        }
+    ]
+
+    Timer {
+        id: myTimer
+        repeat: false
+        running: false
+        interval: 100
+        onTriggered: mySpinBox.compressedRealValueModified()
+    }
+
+    onRealValueChanged: {
+        spinBoxInput.text = mySpinBox.textFromValue(mySpinBox.realValue, mySpinBox.locale)
+        mySpinBox.value = 0 // Without setting value back to 0, it can occur that one of
+                            // the indicator will be disabled due to range logic.
+    }
+    onRealValueModified: myTimer.restart()
+    onFocusChanged: mySpinBox.setValueFromInput()
+    onDisplayTextChanged: spinBoxInput.text = mySpinBox.displayText
+    onActiveFocusChanged: {
+        if (mySpinBox.activeFocus)
+            // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason)
+            spinBoxInput.selectAll()
+
+        if (sliderPopup.opened && !mySpinBox.activeFocus)
+            sliderPopup.close()
+    }
+
+    Keys.onPressed: {
+        if (event.key === Qt.Key_Up || event.key === Qt.Key_Down) {
+            event.accepted = true
+
+            // Store current step size
+            var currStepSize = mySpinBox.realStepSize
+
+            // Set stepSize according to used modifier key
+            if (event.modifiers & Qt.ControlModifier)
+                mySpinBox.realStepSize = mySpinBox.minStepSize
+
+            if (event.modifiers & Qt.ShiftModifier)
+                mySpinBox.realStepSize = mySpinBox.maxStepSize
+
+            if (event.key === Qt.Key_Up)
+                mySpinBox.realIncrease()
+            else
+                mySpinBox.realDecrease()
+
+            // Reset step size
+            mySpinBox.realStepSize = currStepSize
+        }
+
+        if (event.key === Qt.Key_Escape)
+            mySpinBox.focus = false
+
+        // FIX: This is a temporary fix for QTBUG-74239
+        if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
+            mySpinBox.setValueFromInput()
+    }
+
+    function clamp(v, lo, hi) {
+        return (v < lo || v > hi) ? Math.min(Math.max(lo, v), hi) : v
+    }
+
+    function setValueFromInput() {
+        // FIX: This is a temporary fix for QTBUG-74239
+        var currValue = mySpinBox.realValue
+
+        // Call the function but don't use return value. The realValue property
+        // will be implicitly set inside the function/procedure.
+        mySpinBox.valueFromText(spinBoxInput.text, mySpinBox.locale)
+
+        if (mySpinBox.realValue !== currValue) {
+            mySpinBox.realValueModified()
+        } else {
+            // Check if input text differs in format from the current value
+            var tmpInputValue = mySpinBox.textFromValue(mySpinBox.realValue, mySpinBox.locale)
+
+            if (tmpInputValue !== spinBoxInput.text)
+                spinBoxInput.text = tmpInputValue
+        }
+    }
+
+    function setRealValue(value) {
+        mySpinBox.realValue = clamp(value,
+                                    mySpinBox.validator.bottom,
+                                    mySpinBox.validator.top)
+    }
+
+    function realDecrease() {
+        // Store the current value for comparison
+        var currValue = mySpinBox.realValue
+        mySpinBox.valueFromText(spinBoxInput.text, mySpinBox.locale)
+
+        setRealValue(mySpinBox.realValue - realStepSize)
+
+        if (mySpinBox.realValue !== currValue)
+            mySpinBox.realValueModified()
+    }
+
+    function realIncrease() {
+        // Store the current value for comparison
+        var currValue = mySpinBox.realValue
+        mySpinBox.valueFromText(spinBoxInput.text, mySpinBox.locale)
+
+        setRealValue(mySpinBox.realValue + realStepSize)
+
+        if (mySpinBox.realValue !== currValue)
+            mySpinBox.realValueModified()
+    }
+}
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml
new file mode 100644
index 0000000000..dc1ea28701
--- /dev/null
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml
@@ -0,0 +1,189 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.12
+import QtQuick.Templates 2.12 as T
+import StudioTheme 1.0 as StudioTheme
+
+Rectangle {
+    id: spinBoxIndicator
+
+    property T.Control myControl
+
+    property bool hover: false
+    property bool pressed: false
+    property bool released: false
+    property bool realEnabled: true
+
+    signal realPressed
+    signal realPressAndHold
+    signal realReleased
+
+    property alias iconFlip: spinBoxIndicatorIconScale.yScale
+
+    color: StudioTheme.Values.themeControlBackground
+    border.width: 0
+
+    onEnabledChanged: invalidateEnabled()
+    onRealEnabledChanged: {
+        invalidateEnabled()
+        if (spinBoxIndicator.realEnabled === false)
+            pressAndHoldTimer.stop()
+    }
+
+    // This function is meant to synchronize enabled with realEnable to avoid
+    // the internal logic messing with the actual state.
+    function invalidateEnabled() {
+        spinBoxIndicator.enabled = spinBoxIndicator.realEnabled
+    }
+
+    Timer {
+        id: pressAndHoldTimer
+        repeat: true
+        running: false
+        interval: 100
+        onTriggered: spinBoxIndicator.realPressAndHold()
+    }
+
+    // This MouseArea is a workaround to avoid some hover state related bugs
+    // when using the actual signal 'up.hovered'. QTBUG-74688
+    MouseArea {
+        id: spinBoxIndicatorMouseArea
+
+        property bool pressedAndHeld: false
+
+        anchors.fill: parent
+        // Shift the MouseArea down by 1 pixel due to potentially overlapping areas
+        anchors.topMargin: iconFlip < 0 ? 0 : 1
+        anchors.bottomMargin: iconFlip < 0 ? 1 : 0
+        hoverEnabled: true
+        pressAndHoldInterval: 500
+        onContainsMouseChanged: spinBoxIndicator.hover = containsMouse
+        onContainsPressChanged: spinBoxIndicator.pressed = containsPress
+        onPressed: {
+            myControl.forceActiveFocus()
+            spinBoxIndicator.realPressed()
+            mouse.accepted = true
+        }
+        onPressAndHold: {
+            pressAndHoldTimer.restart()
+            pressedAndHeld = true
+        }
+        onReleased: {
+            // Only trigger real released when pressAndHold isn't active
+            if (!pressAndHoldTimer.running && containsMouse)
+                spinBoxIndicator.realReleased()
+            pressAndHoldTimer.stop()
+            mouse.accepted = true
+            pressedAndHeld = false
+        }
+        onEntered: {
+            if (pressedAndHeld)
+                pressAndHoldTimer.restart()
+        }
+        onExited: {
+            if (pressAndHoldTimer.running)
+                pressAndHoldTimer.stop()
+        }
+    }
+
+    T.Label {
+        id: spinBoxIndicatorIcon
+        text: StudioTheme.Constants.upDownSquare2
+        color: StudioTheme.Values.themeTextColor
+        renderType: Text.NativeRendering
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        font.pixelSize: StudioTheme.Values.spinControlIconSizeMulti
+        font.family: StudioTheme.Constants.iconFont.family
+        anchors.fill: parent
+        transform: Scale {
+            id: spinBoxIndicatorIconScale
+            origin.x: 0
+            origin.y: spinBoxIndicatorIcon.height / 2
+            yScale: 1
+        }
+    }
+
+    states: [
+        State {
+            name: "default"
+            when: myControl.enabled && !(spinBoxIndicator.hover
+                                         || myControl.hover)
+                  && !spinBoxIndicator.pressed && !myControl.edit
+                  && !myControl.drag && spinBoxIndicator.enabled
+            PropertyChanges {
+                target: spinBoxIndicator
+                color: StudioTheme.Values.themeControlBackground
+            }
+        },
+        State {
+            name: "hovered"
+            when: (spinBoxIndicator.hover || myControl.hover)
+                  && !spinBoxIndicator.pressed && !myControl.edit
+                  && !myControl.drag && spinBoxIndicator.enabled
+            PropertyChanges {
+                target: spinBoxIndicator
+                color: StudioTheme.Values.themeHoverHighlight
+            }
+        },
+        State {
+            name: "pressed"
+            when: spinBoxIndicator.pressed && spinBoxIndicator.enabled
+            PropertyChanges {
+                target: spinBoxIndicator
+                color: StudioTheme.Values.themeInteraction
+            }
+        },
+        State {
+            name: "edit"
+            when: myControl.edit && spinBoxIndicator.enabled
+            PropertyChanges {
+                target: spinBoxIndicator
+                color: StudioTheme.Values.themeFocusEdit
+            }
+        },
+        State {
+            name: "drag"
+            when: myControl.drag && spinBoxIndicator.enabled
+            PropertyChanges {
+                target: spinBoxIndicator
+                color: StudioTheme.Values.themeFocusDrag
+            }
+        },
+        State {
+            name: "disabled"
+            when: !myControl.enabled || !spinBoxIndicator.enabled
+            PropertyChanges {
+                target: spinBoxIndicator
+                color: StudioTheme.Values.themeControlBackgroundDisabled
+            }
+            PropertyChanges {
+                target: spinBoxIndicatorIcon
+                color: StudioTheme.Values.themeTextColorDisabled
+            }
+        }
+    ]
+}
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml
new file mode 100644
index 0000000000..91f4d667e1
--- /dev/null
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml
@@ -0,0 +1,211 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.12
+import QtQuick.Templates 2.12 as T
+import StudioTheme 1.0 as StudioTheme
+
+TextInput {
+    id: textInput
+
+    property T.Control myControl
+
+    property bool edit: textInput.activeFocus
+    property bool drag: false
+
+    z: 2
+    font: myControl.font
+    color: StudioTheme.Values.themeTextColor
+    selectionColor: StudioTheme.Values.themeTextSelectionColor
+    selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor
+
+    horizontalAlignment: Qt.AlignRight
+    verticalAlignment: Qt.AlignVCenter
+    leftPadding: StudioTheme.Values.inputHorizontalPadding
+    rightPadding: StudioTheme.Values.inputHorizontalPadding
+
+    readOnly: !myControl.editable
+    validator: myControl.validator
+    inputMethodHints: myControl.inputMethodHints
+    selectByMouse: false
+    activeFocusOnPress: false
+    clip: true
+
+    // TextInput focus needs to be set to activeFocus whenever it changes,
+    // otherwise TextInput will get activeFocus whenever the parent SpinBox gets
+    // activeFocus. This will lead to weird side effects.
+    onActiveFocusChanged: textInput.focus = activeFocus
+
+    Rectangle {
+        id: textInputArea
+        color: StudioTheme.Values.themeControlBackground
+        border.color: StudioTheme.Values.themeControlOutline
+        border.width: StudioTheme.Values.border
+        x: 0
+        y: 0
+        z: -1
+        width: textInput.width
+        height: StudioTheme.Values.height
+    }
+
+    DragHandler {
+        id: dragHandler
+        target: null
+        acceptedDevices: PointerDevice.Mouse
+        enabled: true
+
+        property real initialValue: 0
+
+        onActiveChanged: {
+            if (dragHandler.active) {
+                dragHandler.initialValue = myControl.realValue
+                mouseArea.cursorShape = Qt.ClosedHandCursor
+                myControl.drag = true
+                myControl.dragStarted()
+            } else {
+                mouseArea.cursorShape = Qt.PointingHandCursor
+                myControl.drag = false
+                myControl.dragEnded()
+            }
+        }
+        onTranslationChanged: {
+            var currValue = myControl.realValue
+            myControl.setRealValue(dragHandler.initialValue + (translation.x * myControl.realStepSize))
+            if (currValue !== myControl.realValue)
+                myControl.realValueModified()
+        }
+    }
+
+    TapHandler {
+        id: tapHandler
+        acceptedDevices: PointerDevice.Mouse
+        enabled: true
+        onTapped: {
+            textInput.forceActiveFocus()
+            textInput.deselect() // QTBUG-75862
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        enabled: true
+        hoverEnabled: true
+        propagateComposedEvents: true
+        acceptedButtons: Qt.LeftButton
+        cursorShape: Qt.PointingHandCursor
+        // Sets the global hover
+        onContainsMouseChanged: myControl.hover = containsMouse
+        onPressed: mouse.accepted = false
+        onWheel: {
+            if (!myControl.__wheelEnabled)
+                return
+
+            var currValue = myControl.realValue
+            myControl.valueFromText(textInput.text, myControl.locale)
+            myControl.setRealValue(myControl.realValue + (wheel.angleDelta.y / 120.0 * myControl.realStepSize))
+
+            if (currValue !== myControl.realValue)
+                myControl.realValueModified()
+        }
+    }
+
+    states: [
+        State {
+            name: "default"
+            when: myControl.enabled && !textInput.edit
+                  && !mouseArea.containsMouse && !myControl.drag
+            PropertyChanges {
+                target: textInputArea
+                color: StudioTheme.Values.themeControlBackground
+                border.color: StudioTheme.Values.themeControlOutline
+            }
+            PropertyChanges {
+                target: dragHandler
+                enabled: true
+            }
+            PropertyChanges {
+                target: tapHandler
+                enabled: true
+            }
+            PropertyChanges {
+                target: mouseArea
+                cursorShape: Qt.PointingHandCursor
+            }
+        },
+        State {
+            name: "hovered"
+            when: myControl.hover && !textInput.edit && !myControl.drag
+            PropertyChanges {
+                target: textInputArea
+                color: StudioTheme.Values.themeHoverHighlight
+                border.color: StudioTheme.Values.themeControlOutline
+            }
+        },
+        State {
+            name: "edit"
+            when: textInput.edit
+            PropertyChanges {
+                target: textInputArea
+                color: StudioTheme.Values.themeFocusEdit
+                border.color: StudioTheme.Values.themeInteraction
+            }
+            PropertyChanges {
+                target: dragHandler
+                enabled: false
+            }
+            PropertyChanges {
+                target: tapHandler
+                enabled: false
+            }
+            PropertyChanges {
+                target: mouseArea
+                cursorShape: Qt.IBeamCursor
+            }
+        },
+        State {
+            name: "drag"
+            when: myControl.drag
+            PropertyChanges {
+                target: textInputArea
+                color: StudioTheme.Values.themeFocusDrag
+                border.color: StudioTheme.Values.themeInteraction
+            }
+        },
+        State {
+            name: "disabled"
+            when: !myControl.enabled
+            PropertyChanges {
+                target: textInputArea
+                color: StudioTheme.Values.themeControlBackgroundDisabled
+                border.color: StudioTheme.Values.themeControlOutlineDisabled
+            }
+            PropertyChanges {
+                target: textInput
+                color: StudioTheme.Values.themeTextColorDisabled
+            }
+        }
+    ]
+}
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml
index bf1b3937b9..3f21c4dbbf 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml
@@ -43,10 +43,10 @@ T.ScrollView {
     ScrollBar.vertical: ScrollBar {
         id: verticalScrollBar
         parent: control
-        x: control.width - width - StudioTheme.Values.border
+        x: control.width - verticalScrollBar.width - StudioTheme.Values.border
         y: StudioTheme.Values.border
-        height: control.availableHeight - 2 * StudioTheme.Values.border
-                - (bothVisible ? horizontalThickness : 0)
+        height: control.availableHeight - (2 * StudioTheme.Values.border)
+                - (control.bothVisible ? control.horizontalThickness : 0)
         active: control.ScrollBar.horizontal.active
     }
 
@@ -54,9 +54,9 @@ T.ScrollView {
         id: horizontalScrollBar
         parent: control
         x: StudioTheme.Values.border
-        y: control.height - height - StudioTheme.Values.border
-        width: control.availableWidth - 2 * StudioTheme.Values.border
-               - (bothVisible ? verticalThickness : 0)
+        y: control.height - horizontalScrollBar.height - StudioTheme.Values.border
+        width: control.availableWidth - (2 * StudioTheme.Values.border)
+               - (control.bothVisible ? control.verticalThickness : 0)
         active: control.ScrollBar.vertical.active
     }
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml
index 7e111b6851..e8cfe2a13a 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml
@@ -77,8 +77,8 @@ T.Slider {
     handle: Rectangle {
         id: sliderHandle
         x: slider.leftPadding + (slider.visualPosition * slider.availableWidth)
-           - sliderHandle.width / 2
-        y: slider.topPadding + slider.availableHeight / 2 - sliderHandle.height / 2
+           - (sliderHandle.width / 2)
+        y: slider.topPadding + (slider.availableHeight / 2) - (sliderHandle.height / 2)
         z: 20
         implicitWidth: StudioTheme.Values.sliderHandleWidth
         implicitHeight: StudioTheme.Values.sliderHandleHeight
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml
index beb6da4a8f..a80ff78c40 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml
@@ -57,7 +57,7 @@ T.Popup {
 
         handle: Rectangle {
             x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
-            y: slider.topPadding + slider.availableHeight / 2 - height / 2
+            y: slider.topPadding + (slider.availableHeight / 2) - (height / 2)
             width: StudioTheme.Values.sliderHandleWidth
             height: StudioTheme.Values.sliderHandleHeight
             radius: 0
@@ -66,7 +66,7 @@ T.Popup {
 
         background: Rectangle {
             x: slider.leftPadding
-            y: slider.topPadding + slider.availableHeight / 2 - height / 2
+            y: slider.topPadding + (slider.availableHeight / 2) - (height / 2)
             width: slider.availableWidth
             height: StudioTheme.Values.sliderTrackHeight
             radius: 0
@@ -81,7 +81,20 @@ T.Popup {
         }
 
         onMoved: {
-            myControl.value = value
+            var currValue = myControl.value
+            myControl.value = slider.value
+
+            if (currValue !== myControl.value)
+                myControl.valueModified()
+        }
+    }
+
+    onOpened: {
+        // Check if value is in sync with text input, if not sync it!
+        var val = myControl.valueFromText(myControl.contentItem.text,
+                                          myControl.locale)
+        if (myControl.value !== val) {
+            myControl.value = val
             myControl.valueModified()
         }
     }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml
index e10a334bd6..c60e7002f2 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml
@@ -36,7 +36,6 @@ T.SpinBox {
     property int decimals: 0
     property int factor: Math.pow(10, decimals)
 
-    property real defaultStepSize: 1
     property real minStepSize: 1
     property real maxStepSize: 10
 
@@ -49,9 +48,9 @@ T.SpinBox {
     property real __actionIndicatorHeight: StudioTheme.Values.height
 
     property bool spinBoxIndicatorVisible: true
-    property real __spinBoxIndicatorWidth: StudioTheme.Values.smallRectWidth - 2
-                                           * StudioTheme.Values.border
-    property real __spinBoxIndicatorHeight: StudioTheme.Values.height / 2
+    property real __spinBoxIndicatorWidth: StudioTheme.Values.smallRectWidth - (2
+                                           * StudioTheme.Values.border)
+    property real __spinBoxIndicatorHeight: (StudioTheme.Values.height / 2)
                                             - StudioTheme.Values.border
 
     property alias sliderIndicatorVisible: sliderIndicator.visible
@@ -80,8 +79,8 @@ T.SpinBox {
         locale: mySpinBox.locale.name
         notation: DoubleValidator.StandardNotation
         decimals: mySpinBox.decimals
-        bottom: Math.min(mySpinBox.from, mySpinBox.to) / factor
-        top: Math.max(mySpinBox.from, mySpinBox.to) / factor
+        bottom: Math.min(mySpinBox.from, mySpinBox.to) / mySpinBox.factor
+        top: Math.max(mySpinBox.from, mySpinBox.to) / mySpinBox.factor
     }
 
     IntValidator {
@@ -110,10 +109,12 @@ T.SpinBox {
         pressed: mySpinBox.up.pressed
         iconFlip: -1
 
-        x: actionIndicator.width + (actionIndicator.visible ? 0 : StudioTheme.Values.border)
+        x: actionIndicator.width + (actionIndicatorVisible ? 0 : StudioTheme.Values.border)
         y: StudioTheme.Values.border
         width: spinBoxIndicatorVisible ? __spinBoxIndicatorWidth : 0
         height: spinBoxIndicatorVisible ? __spinBoxIndicatorHeight : 0
+
+        enabled: (mySpinBox.from < mySpinBox.to) ? mySpinBox.value < mySpinBox.to : mySpinBox.value > mySpinBox.to
     }
 
     down.indicator: SpinBoxIndicator {
@@ -128,6 +129,8 @@ T.SpinBox {
         y: spinBoxIndicatorUp.y + spinBoxIndicatorUp.height
         width: spinBoxIndicatorVisible ? __spinBoxIndicatorWidth : 0
         height: spinBoxIndicatorVisible ? __spinBoxIndicatorHeight : 0
+
+        enabled: (mySpinBox.from < mySpinBox.to) ? mySpinBox.value > mySpinBox.from : mySpinBox.value < mySpinBox.from
     }
 
     contentItem: SpinBoxInput {
@@ -171,12 +174,12 @@ T.SpinBox {
     }
 
     textFromValue: function (value, locale) {
-        return Number(value / factor).toLocaleString(locale, 'f',
-                                                     mySpinBox.decimals)
+        return Number(value / mySpinBox.factor).toLocaleString(locale, 'f',
+                                                               mySpinBox.decimals)
     }
 
     valueFromText: function (text, locale) {
-        return Number.fromLocaleString(locale, text) * factor
+        return Number.fromLocaleString(locale, text) * mySpinBox.factor
     }
 
     states: [
@@ -235,38 +238,6 @@ T.SpinBox {
         }
     ]
 
-    onActiveFocusChanged: {
-        if (mySpinBox.activeFocus)
-            // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason)
-            spinBoxInput.selectAll()
-
-        if (sliderPopup.opened && !mySpinBox.activeFocus)
-            sliderPopup.close()
-    }
-
-    onFocusChanged: {
-        // FIX: This is a temporary fix for QTBUG-74239
-        var currValue = mySpinBox.value
-
-        if (!spinBoxInput.acceptableInput)
-            mySpinBox.value = clamp(valueFromText(spinBoxInput.text,
-                                                  mySpinBox.locale),
-                                    mySpinBox.validator.bottom * factor,
-                                    mySpinBox.validator.top * factor)
-        else
-            mySpinBox.value = valueFromText(spinBoxInput.text, mySpinBox.locale)
-
-        if (spinBoxInput.text !== mySpinBox.displayText)
-            spinBoxInput.text = mySpinBox.displayText
-
-        if (mySpinBox.value !== currValue)
-            mySpinBox.valueModified()
-    }
-
-    onDisplayTextChanged: {
-        spinBoxInput.text = mySpinBox.displayText
-    }
-
     Timer {
         id: myTimer
         repeat: false
@@ -276,57 +247,56 @@ T.SpinBox {
     }
 
     onValueModified: myTimer.restart()
+    onFocusChanged: mySpinBox.setValueFromInput()
+    onDisplayTextChanged: spinBoxInput.text = mySpinBox.displayText
+    onActiveFocusChanged: {
+        if (mySpinBox.activeFocus)
+            // QTBUG-75862 && mySpinBox.focusReason === Qt.TabFocusReason)
+            spinBoxInput.selectAll()
+
+        if (sliderPopup.opened && !mySpinBox.activeFocus)
+            sliderPopup.close()
+    }
 
     Keys.onPressed: {
         if (event.key === Qt.Key_Up || event.key === Qt.Key_Down) {
             event.accepted = true
 
-            mySpinBox.stepSize = defaultStepSize
+            // Store current step size
+            var currStepSize = mySpinBox.stepSize
 
             if (event.modifiers & Qt.ControlModifier)
-                mySpinBox.stepSize = minStepSize
+                mySpinBox.stepSize = mySpinBox.minStepSize
 
             if (event.modifiers & Qt.ShiftModifier)
-                mySpinBox.stepSize = maxStepSize
+                mySpinBox.stepSize = mySpinBox.maxStepSize
 
+            // Check if value is in sync with text input, if not sync it!
             var val = mySpinBox.valueFromText(spinBoxInput.text,
                                               mySpinBox.locale)
             if (mySpinBox.value !== val)
                 mySpinBox.value = val
 
-            var curValue = mySpinBox.value
+            var currValue = mySpinBox.value
 
             if (event.key === Qt.Key_Up)
                 mySpinBox.increase()
             else
                 mySpinBox.decrease()
 
-            if (curValue !== mySpinBox.value)
+            if (currValue !== mySpinBox.value)
                 mySpinBox.valueModified()
+
+            // Reset step size
+            mySpinBox.stepSize = currStepSize
         }
 
         if (event.key === Qt.Key_Escape)
             mySpinBox.focus = false
 
         // FIX: This is a temporary fix for QTBUG-74239
-        if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
-            var currValue = mySpinBox.value
-
-            if (!spinBoxInput.spinBoxInput)
-                mySpinBox.value = clamp(valueFromText(spinBoxInput.text,
-                                                      mySpinBox.locale),
-                                        mySpinBox.validator.bottom * factor,
-                                        mySpinBox.validator.top * factor)
-            else
-                mySpinBox.value = valueFromText(spinBoxInput.text,
-                                                mySpinBox.locale)
-
-            if (spinBoxInput.text !== mySpinBox.displayText)
-                spinBoxInput.text = mySpinBox.displayText
-
-            if (mySpinBox.value !== currValue)
-                mySpinBox.valueModified()
-        }
+        if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
+            mySpinBox.setValueFromInput()
     }
 
     function clamp(v, lo, hi) {
@@ -335,4 +305,24 @@ T.SpinBox {
 
         return v
     }
+
+    function setValueFromInput() {
+        // FIX: This is a temporary fix for QTBUG-74239
+        var currValue = mySpinBox.value
+
+        if (!spinBoxInput.acceptableInput)
+            mySpinBox.value = clamp(valueFromText(spinBoxInput.text,
+                                                  mySpinBox.locale),
+                                    mySpinBox.validator.bottom * mySpinBox.factor,
+                                    mySpinBox.validator.top * mySpinBox.factor)
+        else
+            mySpinBox.value = valueFromText(spinBoxInput.text,
+                                            mySpinBox.locale)
+
+        if (spinBoxInput.text !== mySpinBox.displayText)
+            spinBoxInput.text = mySpinBox.displayText
+
+        if (mySpinBox.value !== currValue)
+            mySpinBox.valueModified()
+    }
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml
index f75b8b47fd..3f272860e9 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml
@@ -77,7 +77,7 @@ Rectangle {
             when: myControl.enabled && !(spinBoxIndicator.hover
                                          || myControl.hover)
                   && !spinBoxIndicator.pressed && !myControl.edit
-                  && !myControl.drag
+                  && !myControl.drag && spinBoxIndicator.enabled
             PropertyChanges {
                 target: spinBoxIndicator
                 color: StudioTheme.Values.themeControlBackground
@@ -87,7 +87,7 @@ Rectangle {
             name: "hovered"
             when: (spinBoxIndicator.hover || myControl.hover)
                   && !spinBoxIndicator.pressed && !myControl.edit
-                  && !myControl.drag
+                  && !myControl.drag && spinBoxIndicator.enabled
             PropertyChanges {
                 target: spinBoxIndicator
                 color: StudioTheme.Values.themeHoverHighlight
@@ -95,7 +95,7 @@ Rectangle {
         },
         State {
             name: "pressed"
-            when: spinBoxIndicator.pressed
+            when: spinBoxIndicator.pressed && spinBoxIndicator.enabled
             PropertyChanges {
                 target: spinBoxIndicator
                 color: StudioTheme.Values.themeInteraction
@@ -103,7 +103,7 @@ Rectangle {
         },
         State {
             name: "edit"
-            when: myControl.edit
+            when: myControl.edit && spinBoxIndicator.enabled
             PropertyChanges {
                 target: spinBoxIndicator
                 color: StudioTheme.Values.themeFocusEdit
@@ -111,7 +111,7 @@ Rectangle {
         },
         State {
             name: "drag"
-            when: myControl.drag
+            when: myControl.drag && spinBoxIndicator.enabled
             PropertyChanges {
                 target: spinBoxIndicator
                 color: StudioTheme.Values.themeFocusDrag
@@ -119,7 +119,7 @@ Rectangle {
         },
         State {
             name: "disabled"
-            when: !myControl.enabled
+            when: !myControl.enabled || !spinBoxIndicator.enabled
             PropertyChanges {
                 target: spinBoxIndicator
                 color: StudioTheme.Values.themeControlBackgroundDisabled
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml
index e2f718176e..50b4a068aa 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml
@@ -91,10 +91,10 @@ TextInput {
             }
         }
         onTranslationChanged: {
-            var curValue = myControl.value
+            var currValue = myControl.value
             myControl.value = initialValue + translation.x
 
-            if (curValue !== myControl.value)
+            if (currValue !== myControl.value)
                 myControl.valueModified()
         }
     }
@@ -128,10 +128,10 @@ TextInput {
             if (myControl.value !== val)
                 myControl.value = val
 
-            var curValue = myControl.value
+            var currValue = myControl.value
             myControl.value += wheel.angleDelta.y / 120
 
-            if (curValue !== myControl.value)
+            if (currValue !== myControl.value)
                 myControl.valueModified()
         }
     }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml
index 7432d00bb0..6aaa71c7e8 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml
@@ -38,9 +38,9 @@ TextField {
 
     T.Popup {
         id: popup
-        x: relativePopupX
+        x: myTextField.relativePopupX
         y: myTextField.height - StudioTheme.Values.border
-        width: popupWidth
+        width: myTextField.popupWidth
         height: scrollView.height
         background: Rectangle {
             color: StudioTheme.Values.themeFocusEdit
@@ -128,12 +128,8 @@ TextField {
     }
 
     Keys.onPressed: {
-        if (event.key === Qt.Key_Escape) {
-            if (popup.opened)
-                popup.close()
-            else
-                myTextField.focus = false
-        }
+        if (event.key === Qt.Key_Escape)
+            popup.opened ? popup.close() : myTextField.focus = false
 
         if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
                 && !popup.opened) {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir
index 02acf99dff..ee876cc935 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir
@@ -13,6 +13,10 @@ ItemDelegate 1.0 ItemDelegate.qml
 Menu 1.0 Menu.qml
 MenuItem 1.0 MenuItem.qml
 MenuSeparator 1.0 MenuSeparator.qml
+RealSliderPopup 1.0 RealSliderPopup.qml
+RealSpinBox 1.0 RealSpinBox.qml
+RealSpinBoxIndicator 1.0 RealSpinBoxIndicator.qml
+RealSpinBoxInput 1.0 RealSpinBoxInput.qml
 ScrollBar 1.0 ScrollBar.qml
 ScrollView 1.0 ScrollView.qml
 SecondColumnLayout 1.0 SecondColumnLayout.qml
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
index 81307a57b6..b21f94daf8 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
@@ -47,10 +47,10 @@ QtObject {
     property real sliderHeight: values.height / 2 * 1.5 // TODO:Have a look at -> sliderAreaHeight: Data.Values.height/2*1.5
 
     property real sliderControlSize: 12
-    property real sliderControlSizeMulti: sliderControlSize * scaleFactor
+    property real sliderControlSizeMulti: values.sliderControlSize * values.scaleFactor
 
     property real spinControlIconSize: 8
-    property real spinControlIconSizeMulti: spinControlIconSize * scaleFactor
+    property real spinControlIconSizeMulti: values.spinControlIconSize * values.scaleFactor
 
     property real sliderTrackHeight: values.height / 4
     property real sliderHandleHeight: values.sliderTrackHeight * 2
@@ -62,18 +62,18 @@ QtObject {
     property real sliderPointerWidth: Math.round(7 * values.scaleFactor)
     property real sliderPointerHeight: Math.round(2 * values.scaleFactor)
 
-    property real checkBoxSpacing: 6 // TODO Does look strange with scale factor applied
+    property real checkBoxSpacing: Math.round(6 * values.scaleFactor)
 
     property real columnWidth: 225 + (175 * (values.scaleFactor * 2))
 
     property real marginTopBottom: 4
     property real border: 1
 
-    property real maxComboBoxPopupHeight: 300
-    property real maxTextAreaPopupHeight: 150
+    property real maxComboBoxPopupHeight: Math.round(300 * values.scaleFactor)
+    property real maxTextAreaPopupHeight: Math.round(150 * values.scaleFactor)
 
-    property real contextMenuLabelSpacing: 30
-    property real contextMenuHorizontalPadding: 6
+    property real contextMenuLabelSpacing: Math.round(30 * values.scaleFactor)
+    property real contextMenuHorizontalPadding: Math.round(6 * values.scaleFactor)
 
     property real inputHorizontalPadding: Math.round(4 * values.scaleFactor)
 
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir
index b768fe63a2..b768fe63a2 100644..100755
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir