Style drop-down combo box for Developer > Graphics...

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

@@ -0,0 +1,98 @@
+//
+//  ComboBox.qml
+//
+//  Created by David Rowe on 27 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
+
+// FIXME: Currently supports only the "Drop Down Box" case in the UI Toolkit doc;
+// Should either be made to also support the "Combo Box" case or drop-down and combo box should be separate controls.
+
+// FIXME: Style dropped-down items per UI Toolkit Drop Down Box.
+// http://stackoverflow.com/questions/27089779/qml-combobox-item-dropdownmenu-style/27217209#27217209
+
+ComboBox {
+    id: comboBox
+
+    property int colorScheme: hifi.colorSchemes.light
+    readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
+    property string label: ""
+    property real controlHeight: height + (comboBoxLabel.visible ? comboBoxLabel.height : 0)
+
+    height: hifi.fontSizes.textFieldInput + 14  // Match height of TextField control.
+
+    y: comboBoxLabel.visible ? comboBoxLabel.height : 0
+
+    style: ComboBoxStyle {
+        FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
+        font {
+            family: firaSansSemiBold.name
+            pixelSize: hifi.fontSizes.textFieldInput
+        }
+
+        background: Rectangle {
+            gradient: Gradient {
+                GradientStop {
+                    position: 0.2
+                    color: pressed
+                           ? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark)
+                           : (isLightColorScheme ? hifi.colors.dropDownLightStart : hifi.colors.dropDownDarkStart)
+                }
+                GradientStop {
+                    position: 1.0
+                    color: pressed
+                           ? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark)
+                           : (isLightColorScheme ? hifi.colors.dropDownLightFinish : hifi.colors.dropDownDarkFinish)
+                }
+            }
+
+            HiFiGlyphs {
+                text: hifi.glyphs.backward  // Adapt backward triangle to be downward triangle
+                rotation: -90
+                y: -2
+                size: hifi.dimensions.spinnerSize
+                color: pressed ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.baseGray
+                anchors {
+                    right: parent.right
+                    rightMargin: 3
+                    verticalCenter: parent.verticalCenter
+                }
+            }
+
+            Rectangle {
+                width: 1
+                height: parent.height
+                color: isLightColorScheme ? hifi.colors.faintGray : hifi.colors.baseGray
+                anchors {
+                    top: parent.top
+                    right: parent.right
+                    rightMargin: parent.height
+                }
+            }
+        }
+
+        textColor: pressed ? hifi.colors.baseGray : (isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText )
+        selectedTextColor: hifi.colors.baseGray
+        selectionColor: hifi.colors.primaryHighlight
+    }
+
+    HifiControls.Label {
+        id: comboBoxLabel
+        text: comboBox.label
+        colorScheme: comboBox.colorScheme
+        anchors.left: parent.left
+        anchors.bottom: parent.top
+        anchors.bottomMargin: 4
+        visible: label != ""
+    }
+}

interface/resources/qml/dialogs/preferences/ComboBoxPreference.qml

@@ -1,37 +1,42 @@
+//
+//  ComboBoxPreference.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 QtQuick.Controls.Styles 1.4
+
+import "../../controls-uit"
 
 Preference {
     id: root
-    property real spacing: 8
-    height: labelText.height + dataComboBox.height + spacing
+    property alias comboBox: comboBox
+    height: comboBox.controlHeight
 
     Component.onCompleted: {
-        dataComboBox.currentIndex = dataComboBox.find(preference.value);
+        comboBox.currentIndex = comboBox.find(preference.value);
     }
 
     function save() {
-        preference.value = dataComboBox.currentText;
+        preference.value = comboBox.currentText;
         preference.save();
     }
 
-    Text {
-        id: labelText
-        color: enabled ? "black" : "gray"
-        text: root.label
+    Label {
+        text: root.label + ":"
+        colorScheme: hifi.colorSchemes.dark
+        anchors.verticalCenter: comboBox.verticalCenter
     }
 
     ComboBox {
-        id: dataComboBox
+        id: comboBox
         model: preference.items
-        style: ComboBoxStyle { renderType: Text.QtRendering }
-        anchors {
-            top: labelText.bottom
-            left: parent.left
-            right: parent.right
-            topMargin: root.spacing
-            rightMargin: root.spacing
-        }
+        width: 150
+        anchors { right: parent.right }
+        colorScheme: hifi.colorSchemes.dark
     }
 }

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

@@ -77,6 +77,12 @@ Item {
         readonly property color sliderLightFinish: "#afafaf"
         readonly property color sliderDarkStart: "#7d7d7d"
         readonly property color sliderDarkFinish: "#6b6a6b"
+        readonly property color dropDownPressedLight: "#d4d4d4"
+        readonly property color dropDownPressedDark: "#afafaf"
+        readonly property color dropDownLightStart: "#ffffff"
+        readonly property color dropDownLightFinish: "#afafaf"
+        readonly property color dropDownDarkStart: "#7d7d7d"
+        readonly property color dropDownDarkFinish: "#6b6a6b"
     }
 
     Item {