Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-20 03:24:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Style slider controls

Browse source
This commit is contained in:
David Rowe 2016-03-02 09:24:57 +13:00
parent ddc5e952f1
commit a309a2e08f
3 changed files with 127 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
interface/resources/qml/controls-uit/Slider.qml Normal file
View file

@ -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 != ""
}
}

23
interface/resources/qml/dialogs/preferences/SliderPreference.qml
View file

@ -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
}
}

11
interface/resources/qml/styles-uit/HifiConstants.qml
View file

@ -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