Update spinbox to new design. Add reusable UnderlineBackground Component for background of newly designed elements.

CURA-8688

resources/qml/SpinBox.qml

@@ -4,6 +4,8 @@
 import QtQuick 2.2
 import QtQuick.Controls 2.15
 
+import UM 1.5 as UM
+
 // This component extends the funtionality of QtControls 2.x Spinboxes to
 // - be able to contain fractional values
 // - hava a "prefix" and a "suffix". A validator is added that recognizes this pre-, suf-fix combo. When adding a custom
@@ -33,11 +35,15 @@ Item
     signal editingFinished()
     implicitWidth: spinBox.implicitWidth
     implicitHeight: spinBox.implicitHeight
+
     SpinBox
     {
         id: spinBox
         anchors.fill: base
         editable: base.editable
+        topPadding: 0
+        bottomPadding: 0
+        padding: UM.Theme.getSize("spinbox").height / 4
 
         // The stepSize of the SpinBox is intentionally set to be always `1`
         // As SpinBoxes can only contain integer values the `base.stepSize` is concidered the precision/resolution
@@ -65,11 +71,21 @@ Item
             base.value = value * base.stepSize;
         }
 
+        background: Item
+        {
+            // Makes space between buttons and textfield transparent
+            opacity: 0
+        }
+
+
+        //TextField should be swapped with UM.TextField when it is restyled
         contentItem: TextField
         {
             text: spinBox.textFromValue(spinBox.value, spinBox.locale)
+            color: enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("text_disabled")
+            background: UM.UnderlineBackground {}
+
             selectByMouse: base.editable
-            background: Item {}
             validator: base.validator
 
             onActiveFocusChanged:
@@ -80,5 +96,55 @@ Item
                 }
             }
         }
+
+        down.indicator: Rectangle
+        {
+            x: spinBox.mirrored ? parent.width - width : 0
+            height: parent.height
+            width: height
+
+            UM.UnderlineBackground {
+                color: spinBox.up.pressed ? spinBox.palette.mid : UM.Theme.getColor("detail_background")
+            }
+
+            // Minus icon
+            Rectangle
+            {
+                x: (parent.width - width) / 2
+                y: (parent.height - height) / 2
+                width: parent.width / 4
+                height: 2
+                color: enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("text_disabled")
+            }
+        }
+
+        up.indicator: Rectangle
+        {
+            x: spinBox.mirrored ? 0 : parent.width - width
+            height: parent.height
+            width: height
+
+            UM.UnderlineBackground {
+                color: spinBox.up.pressed ? spinBox.palette.mid : UM.Theme.getColor("detail_background")
+            }
+
+            // Plus Icon
+            Rectangle
+            {
+                x: (parent.width - width) / 2
+                y: (parent.height - height) / 2
+                width: parent.width / 3.5
+                height: 2
+                color: enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("text_disabled")
+            }
+            Rectangle
+            {
+                x: (parent.width - width) / 2
+                y: (parent.height - height) / 2
+                width: 2
+                height: parent.width / 3.5
+                color: enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("text_disabled")
+            }
+        }
     }
 }

resources/themes/cura-light/theme.json

@@ -184,6 +184,7 @@
         "primary_hover": [48, 182, 231, 255],
         "primary_text": [255, 255, 255, 255],
         "border": [127, 127, 127, 255],
+        "border_field": [180, 180, 180, 255],
         "text_selection": [156,195, 255, 127],
         "secondary": [240, 240, 240, 255],
         "secondary_shadow": [216, 216, 216, 255],
@@ -231,6 +232,7 @@
         "window_disabled_background": [0, 0, 0, 255],
 
         "text": [25, 25, 25, 255],
+        "text_disabled": [180, 180, 180, 255],
         "text_detail": [174, 174, 174, 128],
         "text_link": [25, 110, 240, 255],
         "text_inactive": [174, 174, 174, 255],
@@ -617,6 +619,8 @@
         "checkbox_radius": [0.25, 0.25],
         "checkbox_label_padding": [0.5, 0.5],
 
+        "spinbox": [6.0, 3.0],
+
         "tooltip": [20.0, 10.0],
         "tooltip_margins": [1.0, 1.0],
         "tooltip_arrow_margins": [2.0, 2.0],