Style spinbox control

interface/resources/qml/controls-uit/SpinBox.qml

@@ -0,0 +1,80 @@
+//
+//  SpinBox.qml
+//
+//  Created by David Rowe on 26 Feb 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+
+import "../styles-uit"
+import "../controls-uit" as HifiControls
+
+SpinBox {
+    id: spinBox
+    //HifiConstants { id: hifi }  // DJRTODO: Not needed?
+
+    property int colorScheme: hifi.colorSchemes.light
+    readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
+    property string label: ""
+    property real controlHeight: height + (spinBoxLabel.visible ? spinBoxLabel.height : 0)
+
+    FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
+    font.family: firaSansSemiBold.name
+    font.pixelSize: hifi.fontSizes.textFieldInput
+    height: hifi.fontSizes.textFieldInput + 14  // Match height of TextField control.
+
+    y: spinBoxLabel.visible ? spinBoxLabel.height : 0
+
+    style: SpinBoxStyle {
+        background: Rectangle {
+            color: isLightColorScheme
+                   ? (spinBox.focus ? hifi.colors.white : hifi.colors.lightGray)
+                   : (spinBox.focus ? hifi.colors.black : hifi.colors.baseGrayShadow)
+            border.color: hifi.colors.primaryHighlight
+            border.width: spinBox.focus ? 1 : 0
+        }
+
+        textColor: isLightColorScheme
+                   ? (spinBox.focus ? hifi.colors.black : hifi.colors.lightGray)
+                   : (spinBox.focus ? hifi.colors.white : hifi.colors.lightGrayText)
+        selectedTextColor: hifi.colors.black
+        selectionColor: hifi.colors.primaryHighlight
+
+        horizontalAlignment: Qt.AlignLeft
+        padding.left: hifi.dimensions.textPadding
+        padding.right: hifi.dimensions.spinnerSize
+
+        incrementControl: HiFiGlyphs {
+            id: incrementButton
+            text: hifi.glyphs.forward  // Adapt forward triangle to be upward triangle
+            rotation: -90
+            y: 2
+            size: hifi.dimensions.spinnerSize
+            color: styleData.upPressed ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
+        }
+
+        decrementControl: HiFiGlyphs {
+            text: hifi.glyphs.backward  // Adapt backward triangle to be downward triangle
+            rotation: -90
+            y: -2
+            size: hifi.dimensions.spinnerSize
+            color: styleData.downPressed ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
+        }
+    }
+
+    HifiControls.Label {
+        id: spinBoxLabel
+        text: spinBox.label
+        colorScheme: spinBox.colorScheme
+        anchors.left: parent.left
+        anchors.bottom: parent.top
+        anchors.bottomMargin: 4
+        visible: label != ""
+    }
+}

interface/resources/qml/dialogs/preferences/SpinBoxPreference.qml

@@ -1,10 +1,21 @@
+//
+//  SpinBoxPreference.qml
+//
+//  Created by Bradley Austin Davis on 18 Jan 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
 import QtQuick 2.5
-import QtQuick.Controls 1.4
+
+import "../../controls-uit"
 
 Preference {
     id: root
     property alias spinner: spinner
-    height: spinner.height
+    height: spinner.controlHeight
 
     Component.onCompleted: {
         spinner.value = preference.value;
@@ -15,9 +26,9 @@ Preference {
         preference.save();
     }
 
-    Text {
+    Label {
         text: root.label
-        color: root.enabled ? "black" : "gray"
+        colorScheme: hifi.colorSchemes.dark
         anchors.verticalCenter: spinner.verticalCenter
     }
 
@@ -28,5 +39,6 @@ Preference {
         maximumValue: preference.max
         width: 100
         anchors { right: parent.right }
+        colorScheme: hifi.colorSchemes.dark
     }
 }

interface/resources/qml/styles-uit/HifiConstants.qml

@@ -48,6 +48,7 @@ Item {
 
         // Other colors
         readonly property color white: "#ffffff"
+        readonly property color gray: "#808080"
         readonly property color black: "#000000"
         // Semitransparent
         readonly property color white50: "#80ffffff"
@@ -83,6 +84,7 @@ Item {
         readonly property vector2d contentMargin: Qt.vector2d(12, 24)
         readonly property vector2d contentSpacing: Qt.vector2d(8, 12)
         readonly property real textPadding: 8
+        readonly property real spinnerSize: 20
         readonly property real tablePadding: 12
         readonly property real tableRowHeight: largeScreen ? 26 : 23
         readonly property vector2d modalDialogMargin: Qt.vector2d(50, 30)
@@ -110,11 +112,13 @@ Item {
 
     Item {
         id: glyphs
+        readonly property string backward: "E"
         readonly property string close: "w"
         readonly property string closeInverted: "x"
         readonly property string closeSmall: "C"
         readonly property string disclosureCollapse: "Z"
         readonly property string disclosureExpand: "B"
+        readonly property string forward: "D"
         readonly property string pin: "y"
         readonly property string pinInverted: "z"
         readonly property string reloadSmall: "a"