From 5a3f74d51bc8861e14cf054c8e98f566eb86874a Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 2 Mar 2016 09:53:10 +1300 Subject: [PATCH] Style drop-down combo box for Developer > Graphics... --- .../resources/qml/controls-uit/ComboBox.qml | 98 +++++++++++++++++++ .../preferences/ComboBoxPreference.qml | 43 ++++---- .../qml/styles-uit/HifiConstants.qml | 6 ++ 3 files changed, 128 insertions(+), 19 deletions(-) create mode 100644 interface/resources/qml/controls-uit/ComboBox.qml diff --git a/interface/resources/qml/controls-uit/ComboBox.qml b/interface/resources/qml/controls-uit/ComboBox.qml new file mode 100644 index 0000000000..dcac1264ec --- /dev/null +++ b/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 != "" + } +} diff --git a/interface/resources/qml/dialogs/preferences/ComboBoxPreference.qml b/interface/resources/qml/dialogs/preferences/ComboBoxPreference.qml index 9f323ace63..be5c017bbd 100644 --- a/interface/resources/qml/dialogs/preferences/ComboBoxPreference.qml +++ b/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 } } diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml index d74ba48f29..5e377d9e91 100644 --- a/interface/resources/qml/styles-uit/HifiConstants.qml +++ b/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 {