From a309a2e08f7fe09bf70bbe2faffe3f515c78b15b Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 2 Mar 2016 09:24:57 +1300 Subject: [PATCH] Style slider controls --- .../resources/qml/controls-uit/Slider.qml | 98 +++++++++++++++++++ .../dialogs/preferences/SliderPreference.qml | 23 ++++- .../qml/styles-uit/HifiConstants.qml | 11 +++ 3 files changed, 127 insertions(+), 5 deletions(-) create mode 100644 interface/resources/qml/controls-uit/Slider.qml diff --git a/interface/resources/qml/controls-uit/Slider.qml b/interface/resources/qml/controls-uit/Slider.qml new file mode 100644 index 0000000000..ea4058f2be --- /dev/null +++ b/interface/resources/qml/controls-uit/Slider.qml @@ -0,0 +1,98 @@ +// +// Slider.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 + +Slider { + id: slider + + property int colorScheme: hifi.colorSchemes.light + readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light + property string label: "" + property real controlHeight: height + (sliderLabel.visible ? sliderLabel.height : 0) + + height: hifi.fontSizes.textFieldInput + 14 // Match height of TextField control. + y: sliderLabel.visible ? sliderLabel.height : 0 + + style: SliderStyle { + + groove: Rectangle { + implicitWidth: 50 + implicitHeight: hifi.dimensions.sliderGrooveHeight + radius: height / 2 + color: isLightColorScheme ? hifi.colors.sliderGutterLight : hifi.colors.sliderGutterDark + + Rectangle { + width: parent.height - 2 + height: slider.value * slider.width - 1 + radius: height / 2 + anchors { + top: parent.top + topMargin: width + 1 + left: parent.left + leftMargin: 1 + } + transformOrigin: Item.TopLeft + rotation: -90 + gradient: Gradient { + GradientStop { position: 0.0; color: hifi.colors.blueAccent } + GradientStop { position: 1.0; color: hifi.colors.primaryHighlight } + } + } + } + + handle: Rectangle { + implicitWidth: hifi.dimensions.sliderHandleSize + implicitHeight: hifi.dimensions.sliderHandleSize + radius: height / 2 + border.width: 1 + border.color: isLightColorScheme ? hifi.colors.sliderBorderLight : hifi.colors.sliderBorderDark + gradient: Gradient { + GradientStop { + position: 0.0 + color: pressed || hovered + ? (isLightColorScheme ? hifi.colors.sliderDarkStart : hifi.colors.sliderLightStart ) + : (isLightColorScheme ? hifi.colors.sliderLightStart : hifi.colors.sliderDarkStart ) + } + GradientStop { + position: 1.0 + color: pressed || hovered + ? (isLightColorScheme ? hifi.colors.sliderDarkFinish : hifi.colors.sliderLightFinish ) + : (isLightColorScheme ? hifi.colors.sliderLightFinish : hifi.colors.sliderDarkFinish ) + } + } + + Rectangle { + height: parent.height - 2 + width: height + radius: height / 2 + anchors.centerIn: parent + color: hifi.colors.transparent + border.width: 1 + border.color: hifi.colors.black + } + } + } + + HifiControls.Label { + id: sliderLabel + text: slider.label + colorScheme: slider.colorScheme + anchors.left: parent.left + anchors.bottom: parent.top + anchors.bottomMargin: 2 + visible: label != "" + } +} diff --git a/interface/resources/qml/dialogs/preferences/SliderPreference.qml b/interface/resources/qml/dialogs/preferences/SliderPreference.qml index 0865b49dd0..57042a653a 100644 --- a/interface/resources/qml/dialogs/preferences/SliderPreference.qml +++ b/interface/resources/qml/dialogs/preferences/SliderPreference.qml @@ -1,10 +1,22 @@ +// +// 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 "../../dialogs" +import "../../controls-uit" Preference { id: root property alias slider: slider - height: slider.height + height: slider.controlHeight Component.onCompleted: { slider.value = preference.value; @@ -15,9 +27,9 @@ Preference { preference.save(); } - Text { - text: root.label - color: enabled ? "black" : "gray" + Label { + text: root.label + ":" + colorScheme: hifi.colorSchemes.dark anchors.verticalCenter: slider.verticalCenter } @@ -26,5 +38,6 @@ Preference { value: preference.value width: 130 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 26899686f1..d74ba48f29 100644 --- a/interface/resources/qml/styles-uit/HifiConstants.qml +++ b/interface/resources/qml/styles-uit/HifiConstants.qml @@ -54,6 +54,7 @@ Item { readonly property color white50: "#80ffffff" readonly property color white30: "#4dffffff" readonly property color white25: "#40ffffff" + readonly property color transparent: "#00ffffff" // Control specific colors readonly property color tableRowLightOdd: white50 @@ -68,6 +69,14 @@ Item { readonly property color checkboxDarkFinish: "#6b6a6b" readonly property color checkboxChecked: primaryHighlight readonly property color checkboxCheckedBorder: "#36cdff" + readonly property color sliderGutterLight: "#d4d4d4" + readonly property color sliderGutterDark: "#252525" + readonly property color sliderBorderLight: "#afafaf" + readonly property color sliderBorderDark: "#7d7d7d" + readonly property color sliderLightStart: "#ffffff" + readonly property color sliderLightFinish: "#afafaf" + readonly property color sliderDarkStart: "#7d7d7d" + readonly property color sliderDarkFinish: "#6b6a6b" } Item { @@ -84,6 +93,8 @@ 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 sliderHandleSize: 18 + readonly property real sliderGrooveHeight: 8 readonly property real spinnerSize: 20 readonly property real tablePadding: 12 readonly property real tableRowHeight: largeScreen ? 26 : 23