mirror of
https://github.com/lubosz/overte.git
synced 2025-08-07 17:41:12 +02:00
Duplicating the qml hif stuff to be able to use the same objects
This commit is contained in:
samcake
parent
b243475cc9
commit
2035940cc9
17 changed files with 1497 additions and 0 deletions
73
scripts/developer/utilities/lib/controls-uit/Button.qml
Normal file
73
scripts/developer/utilities/lib/controls-uit/Button.qml
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
//
|
||||||
|
// Button.qml
|
||||||
|
//
|
||||||
|
// Created by David Rowe on 16 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 as Original
|
||||||
|
import QtQuick.Controls.Styles 1.4
|
||||||
|
|
||||||
|
import "../styles-uit"
|
||||||
|
|
||||||
|
Original.Button {
|
||||||
|
property int color: 0
|
||||||
|
property int colorScheme: hifi.colorSchemes.light
|
||||||
|
|
||||||
|
width: 120
|
||||||
|
height: hifi.dimensions.controlLineHeight
|
||||||
|
|
||||||
|
HifiConstants { id: hifi }
|
||||||
|
|
||||||
|
style: ButtonStyle {
|
||||||
|
|
||||||
|
background: Rectangle {
|
||||||
|
radius: hifi.buttons.radius
|
||||||
|
|
||||||
|
gradient: Gradient {
|
||||||
|
GradientStop {
|
||||||
|
position: 0.2
|
||||||
|
color: {
|
||||||
|
if (!control.enabled) {
|
||||||
|
hifi.buttons.disabledColorStart[control.colorScheme]
|
||||||
|
} else if (control.pressed) {
|
||||||
|
hifi.buttons.pressedColor[control.color]
|
||||||
|
} else if (control.hovered) {
|
||||||
|
hifi.buttons.hoveredColor[control.color]
|
||||||
|
} else {
|
||||||
|
hifi.buttons.colorStart[control.color]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
GradientStop {
|
||||||
|
position: 1.0
|
||||||
|
color: {
|
||||||
|
if (!control.enabled) {
|
||||||
|
hifi.buttons.disabledColorFinish[control.colorScheme]
|
||||||
|
} else if (control.pressed) {
|
||||||
|
hifi.buttons.pressedColor[control.color]
|
||||||
|
} else if (control.hovered) {
|
||||||
|
hifi.buttons.hoveredColor[control.color]
|
||||||
|
} else {
|
||||||
|
hifi.buttons.colorFinish[control.color]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label: RalewayBold {
|
||||||
|
font.capitalization: Font.AllUppercase
|
||||||
|
color: enabled ? hifi.buttons.textColor[control.color]
|
||||||
|
: hifi.buttons.disabledTextColor[control.colorScheme]
|
||||||
|
size: hifi.fontSizes.buttonLabel
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
text: control.text
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
101
scripts/developer/utilities/lib/controls-uit/CheckBox.qml
Normal file
101
scripts/developer/utilities/lib/controls-uit/CheckBox.qml
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
//
|
||||||
|
// CheckBox.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 as Original
|
||||||
|
import QtQuick.Controls.Styles 1.4
|
||||||
|
|
||||||
|
import "../styles-uit"
|
||||||
|
|
||||||
|
Original.CheckBox {
|
||||||
|
id: checkBox
|
||||||
|
|
||||||
|
property int colorScheme: hifi.colorSchemes.light
|
||||||
|
property string color: hifi.colors.lightGrayText
|
||||||
|
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
|
||||||
|
property bool isRedCheck: false
|
||||||
|
property int boxSize: 14
|
||||||
|
property int boxRadius: 3
|
||||||
|
property bool wrap: true;
|
||||||
|
readonly property int checkSize: Math.max(boxSize - 8, 10)
|
||||||
|
readonly property int checkRadius: 2
|
||||||
|
activeFocusOnPress: true
|
||||||
|
|
||||||
|
style: CheckBoxStyle {
|
||||||
|
indicator: Rectangle {
|
||||||
|
id: box
|
||||||
|
width: boxSize
|
||||||
|
height: boxSize
|
||||||
|
radius: boxRadius
|
||||||
|
border.width: 1
|
||||||
|
border.color: pressed || hovered
|
||||||
|
? hifi.colors.checkboxCheckedBorder
|
||||||
|
: (checkBox.isLightColorScheme ? hifi.colors.checkboxLightFinish : hifi.colors.checkboxDarkFinish)
|
||||||
|
|
||||||
|
gradient: Gradient {
|
||||||
|
GradientStop {
|
||||||
|
position: 0.2
|
||||||
|
color: pressed || hovered
|
||||||
|
? (checkBox.isLightColorScheme ? hifi.colors.checkboxChecked : hifi.colors.checkboxLightStart)
|
||||||
|
: (checkBox.isLightColorScheme ? hifi.colors.checkboxLightStart : hifi.colors.checkboxDarkStart)
|
||||||
|
}
|
||||||
|
GradientStop {
|
||||||
|
position: 1.0
|
||||||
|
color: pressed || hovered
|
||||||
|
? (checkBox.isLightColorScheme ? hifi.colors.checkboxChecked : hifi.colors.checkboxLightFinish)
|
||||||
|
: (checkBox.isLightColorScheme ? hifi.colors.checkboxLightFinish : hifi.colors.checkboxDarkFinish)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
visible: pressed || hovered
|
||||||
|
anchors.centerIn: parent
|
||||||
|
id: innerBox
|
||||||
|
width: checkSize - 4
|
||||||
|
height: width
|
||||||
|
radius: checkRadius
|
||||||
|
color: hifi.colors.checkboxCheckedBorder
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: check
|
||||||
|
width: checkSize
|
||||||
|
height: checkSize
|
||||||
|
radius: checkRadius
|
||||||
|
anchors.centerIn: parent
|
||||||
|
color: isRedCheck ? hifi.colors.checkboxCheckedRed : hifi.colors.checkboxChecked
|
||||||
|
border.width: 2
|
||||||
|
border.color: isRedCheck? hifi.colors.checkboxCheckedBorderRed : hifi.colors.checkboxCheckedBorder
|
||||||
|
visible: checked && !pressed || !checked && pressed
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: disabledOverlay
|
||||||
|
visible: !enabled
|
||||||
|
width: boxSize
|
||||||
|
height: boxSize
|
||||||
|
radius: boxRadius
|
||||||
|
border.width: 1
|
||||||
|
border.color: hifi.colors.baseGrayHighlight
|
||||||
|
color: hifi.colors.baseGrayHighlight
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label: Label {
|
||||||
|
text: control.text
|
||||||
|
color: control.color
|
||||||
|
x: 2
|
||||||
|
wrapMode: checkBox.wrap ? Text.Wrap : Text.NoWrap
|
||||||
|
elide: checkBox.wrap ? Text.ElideNone : Text.ElideRight
|
||||||
|
enabled: checkBox.enabled
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
249
scripts/developer/utilities/lib/controls-uit/ComboBox.qml
Normal file
249
scripts/developer/utilities/lib/controls-uit/ComboBox.qml
Normal file
|
|
@ -0,0 +1,249 @@
|
||||||
|
//
|
||||||
|
// ComboBox.qml
|
||||||
|
//
|
||||||
|
// Created by Bradley Austin David on 27 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 "../styles-uit"
|
||||||
|
import "../controls-uit" as HifiControls
|
||||||
|
|
||||||
|
FocusScope {
|
||||||
|
id: root
|
||||||
|
HifiConstants { id: hifi }
|
||||||
|
|
||||||
|
property alias model: comboBox.model;
|
||||||
|
property alias editable: comboBox.editable
|
||||||
|
property alias comboBox: comboBox
|
||||||
|
readonly property alias currentText: comboBox.currentText;
|
||||||
|
property alias currentIndex: comboBox.currentIndex;
|
||||||
|
|
||||||
|
property int dropdownHeight: 480
|
||||||
|
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 + comboBoxLabel.anchors.bottomMargin : 0)
|
||||||
|
|
||||||
|
readonly property ComboBox control: comboBox
|
||||||
|
|
||||||
|
property bool isDesktop: true
|
||||||
|
|
||||||
|
signal accepted();
|
||||||
|
|
||||||
|
implicitHeight: comboBox.height;
|
||||||
|
focus: true
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: background
|
||||||
|
gradient: Gradient {
|
||||||
|
GradientStop {
|
||||||
|
position: 0.2
|
||||||
|
color: popup.visible
|
||||||
|
? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark)
|
||||||
|
: (isLightColorScheme ? hifi.colors.dropDownLightStart : hifi.colors.dropDownDarkStart)
|
||||||
|
}
|
||||||
|
GradientStop {
|
||||||
|
position: 1.0
|
||||||
|
color: popup.visible
|
||||||
|
? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark)
|
||||||
|
: (isLightColorScheme ? hifi.colors.dropDownLightFinish : hifi.colors.dropDownDarkFinish)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
anchors.fill: parent
|
||||||
|
}
|
||||||
|
|
||||||
|
SystemPalette { id: palette }
|
||||||
|
|
||||||
|
ComboBox {
|
||||||
|
id: comboBox
|
||||||
|
anchors.fill: parent
|
||||||
|
visible: false
|
||||||
|
height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control.
|
||||||
|
}
|
||||||
|
|
||||||
|
FiraSansSemiBold {
|
||||||
|
id: textField
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: hifi.dimensions.textPadding
|
||||||
|
right: dropIcon.left
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
size: hifi.fontSizes.textFieldInput
|
||||||
|
text: comboBox.currentText
|
||||||
|
elide: Text.ElideRight
|
||||||
|
color: controlHover.containsMouse || popup.visible ? hifi.colors.baseGray : (isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText )
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: dropIcon
|
||||||
|
anchors { right: parent.right; verticalCenter: parent.verticalCenter }
|
||||||
|
height: background.height
|
||||||
|
width: height
|
||||||
|
Rectangle {
|
||||||
|
width: 1
|
||||||
|
height: parent.height
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.left: parent.left
|
||||||
|
color: isLightColorScheme ? hifi.colors.faintGray : hifi.colors.baseGray
|
||||||
|
}
|
||||||
|
HiFiGlyphs {
|
||||||
|
anchors {
|
||||||
|
top: parent.top
|
||||||
|
topMargin: -11
|
||||||
|
horizontalCenter: parent.horizontalCenter
|
||||||
|
}
|
||||||
|
size: hifi.dimensions.spinnerSize
|
||||||
|
text: hifi.glyphs.caratDn
|
||||||
|
color: controlHover.containsMouse || popup.visible ? hifi.colors.baseGray : (isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: controlHover
|
||||||
|
hoverEnabled: true
|
||||||
|
anchors.fill: parent
|
||||||
|
onClicked: toggleList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleList() {
|
||||||
|
if (popup.visible) {
|
||||||
|
hideList();
|
||||||
|
} else {
|
||||||
|
showList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showList() {
|
||||||
|
var r;
|
||||||
|
if (isDesktop) {
|
||||||
|
r = desktop.mapFromItem(root, 0, 0, root.width, root.height);
|
||||||
|
} else {
|
||||||
|
r = mapFromItem(root, 0, 0, root.width, root.height);
|
||||||
|
}
|
||||||
|
var y = r.y + r.height;
|
||||||
|
var bottom = y + scrollView.height;
|
||||||
|
var height = isDesktop ? desktop.height : tabletRoot.height;
|
||||||
|
if (bottom > height) {
|
||||||
|
y -= bottom - height + 8;
|
||||||
|
}
|
||||||
|
scrollView.x = r.x;
|
||||||
|
scrollView.y = y;
|
||||||
|
popup.visible = true;
|
||||||
|
popup.forceActiveFocus();
|
||||||
|
listView.currentIndex = root.currentIndex;
|
||||||
|
scrollView.hoverEnabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideList() {
|
||||||
|
popup.visible = false;
|
||||||
|
scrollView.hoverEnabled = false;
|
||||||
|
root.accepted();
|
||||||
|
}
|
||||||
|
|
||||||
|
FocusScope {
|
||||||
|
id: popup
|
||||||
|
parent: isDesktop ? desktop : root
|
||||||
|
anchors.fill: parent
|
||||||
|
z: isDesktop ? desktop.zLevels.menu : 12
|
||||||
|
visible: false
|
||||||
|
focus: true
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
onClicked: hideList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function previousItem() { listView.currentIndex = (listView.currentIndex + listView.count - 1) % listView.count; }
|
||||||
|
function nextItem() { listView.currentIndex = (listView.currentIndex + listView.count + 1) % listView.count; }
|
||||||
|
function selectCurrentItem() { root.currentIndex = listView.currentIndex; hideList(); }
|
||||||
|
function selectSpecificItem(index) { root.currentIndex = index; hideList(); }
|
||||||
|
|
||||||
|
Keys.onUpPressed: previousItem();
|
||||||
|
Keys.onDownPressed: nextItem();
|
||||||
|
Keys.onSpacePressed: selectCurrentItem();
|
||||||
|
Keys.onRightPressed: selectCurrentItem();
|
||||||
|
Keys.onReturnPressed: selectCurrentItem();
|
||||||
|
Keys.onEscapePressed: hideList();
|
||||||
|
|
||||||
|
ScrollView {
|
||||||
|
id: scrollView
|
||||||
|
height: root.dropdownHeight
|
||||||
|
width: root.width + 4
|
||||||
|
property bool hoverEnabled: false;
|
||||||
|
|
||||||
|
style: ScrollViewStyle {
|
||||||
|
decrementControl: Item {
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
incrementControl: Item {
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
scrollBarBackground: Rectangle{
|
||||||
|
implicitWidth: 20
|
||||||
|
color: hifi.colors.baseGray
|
||||||
|
}
|
||||||
|
|
||||||
|
handle:
|
||||||
|
Rectangle {
|
||||||
|
implicitWidth: 16
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: 3
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
radius: 6
|
||||||
|
color: hifi.colors.lightGrayText
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ListView {
|
||||||
|
id: listView
|
||||||
|
height: textField.height * count * 1.4
|
||||||
|
model: root.model
|
||||||
|
delegate: Rectangle {
|
||||||
|
width: root.width + 4
|
||||||
|
height: popupText.implicitHeight * 1.4
|
||||||
|
color: (listView.currentIndex === index) ? hifi.colors.primaryHighlight :
|
||||||
|
(isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark)
|
||||||
|
FiraSansSemiBold {
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: hifi.dimensions.textPadding
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
id: popupText
|
||||||
|
text: listView.model[index] ? listView.model[index] : (listView.model.get && listView.model.get(index).text ? listView.model.get(index).text : "")
|
||||||
|
size: hifi.fontSizes.textFieldInput
|
||||||
|
color: hifi.colors.baseGray
|
||||||
|
}
|
||||||
|
MouseArea {
|
||||||
|
id: popupHover
|
||||||
|
anchors.fill: parent;
|
||||||
|
hoverEnabled: scrollView.hoverEnabled;
|
||||||
|
onEntered: listView.currentIndex = index;
|
||||||
|
onClicked: popup.selectSpecificItem(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
HifiControls.Label {
|
||||||
|
id: comboBoxLabel
|
||||||
|
text: root.label
|
||||||
|
colorScheme: root.colorScheme
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.bottom: parent.top
|
||||||
|
anchors.bottomMargin: 4
|
||||||
|
visible: label != ""
|
||||||
|
}
|
||||||
|
|
||||||
|
Component.onCompleted: {
|
||||||
|
isDesktop = (typeof desktop !== "undefined");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
//
|
||||||
|
// ConfigSlider.qml
|
||||||
|
// examples/utilities/tools/render
|
||||||
|
//
|
||||||
|
// Created by Zach Pomerantz on 2/8/2016
|
||||||
|
// Copyright 2016 High Fidelity, Inc.
|
||||||
|
//
|
||||||
|
// Distributed under the Apache License, Version 2.0.
|
||||||
|
// See the accompanying file LICENSE or https://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
|
//
|
||||||
|
|
||||||
|
import QtQuick 2.5
|
||||||
|
import QtQuick.Controls 1.4 as Original
|
||||||
|
import QtQuick.Controls.Styles 1.4
|
||||||
|
|
||||||
|
import "../styles-uit"
|
||||||
|
import "../controls-uit" as HifiControls
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: root
|
||||||
|
width: 400
|
||||||
|
height: 24
|
||||||
|
property bool integral: false
|
||||||
|
property var config
|
||||||
|
property string property
|
||||||
|
property alias label: labelControl.text
|
||||||
|
property alias min: sliderControl.minimumValue
|
||||||
|
property alias max: sliderControl.maximumValue
|
||||||
|
|
||||||
|
Component.onCompleted: {
|
||||||
|
// Binding favors qml value, so set it first
|
||||||
|
sliderControl.value = root.config[root.property];
|
||||||
|
bindingControl.when = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
HifiControls.Label {
|
||||||
|
id: labelControl
|
||||||
|
text: root.label
|
||||||
|
anchors.left: root.left
|
||||||
|
anchors.leftMargin: 8
|
||||||
|
anchors.top: root.top
|
||||||
|
anchors.topMargin: 7
|
||||||
|
}
|
||||||
|
|
||||||
|
HifiControls.Label {
|
||||||
|
id: labelValue
|
||||||
|
text: sliderControl.value.toFixed(root.integral ? 0 : 2)
|
||||||
|
anchors.left: root.left
|
||||||
|
anchors.leftMargin: 200
|
||||||
|
anchors.top: root.top
|
||||||
|
anchors.topMargin: 15
|
||||||
|
}
|
||||||
|
|
||||||
|
Binding {
|
||||||
|
id: bindingControl
|
||||||
|
target: root.config
|
||||||
|
property: root.property
|
||||||
|
value: sliderControl.value
|
||||||
|
when: false
|
||||||
|
}
|
||||||
|
|
||||||
|
HifiControls.Slider {
|
||||||
|
id: sliderControl
|
||||||
|
stepSize: root.integral ? 1.0 : 0.0
|
||||||
|
width: root.width-130
|
||||||
|
height: 20
|
||||||
|
anchors.right: root.right
|
||||||
|
anchors.rightMargin: 8
|
||||||
|
anchors.top: root.top
|
||||||
|
anchors.topMargin: 3
|
||||||
|
}
|
||||||
|
}
|
||||||
138
scripts/developer/utilities/lib/controls-uit/ContentSection.qml
Normal file
138
scripts/developer/utilities/lib/controls-uit/ContentSection.qml
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
//
|
||||||
|
// ContentSection.qml
|
||||||
|
//
|
||||||
|
// Created by David Rowe on 16 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 QtGraphicalEffects 1.0
|
||||||
|
|
||||||
|
import "../styles-uit"
|
||||||
|
|
||||||
|
Column {
|
||||||
|
property string name: "Content Section"
|
||||||
|
property bool isFirst: false
|
||||||
|
property bool isCollapsible: false // Set at creation.
|
||||||
|
property bool isCollapsed: false
|
||||||
|
|
||||||
|
spacing: 0 // Defer spacing decisions to individual controls.
|
||||||
|
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: hifi.dimensions.contentMargin.x
|
||||||
|
right: parent.right
|
||||||
|
rightMargin: hifi.dimensions.contentMargin.x
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleCollapsed() {
|
||||||
|
if (isCollapsible) {
|
||||||
|
isCollapsed = !isCollapsed;
|
||||||
|
for (var i = 1; i < children.length; i++) {
|
||||||
|
children[i].visible = !isCollapsed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: sectionName
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
height: leadingSpace.height + topBar.height + heading.height + bottomBar.height
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: leadingSpace
|
||||||
|
width: 1
|
||||||
|
height: isFirst ? 7 : 0
|
||||||
|
anchors.top: parent.top
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: topBar
|
||||||
|
visible: !isFirst
|
||||||
|
height: visible ? 2 : 0
|
||||||
|
anchors.top: leadingSpace.bottom
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: shadow
|
||||||
|
width: frame.width
|
||||||
|
height: 1
|
||||||
|
color: hifi.colors.baseGrayShadow
|
||||||
|
x: -hifi.dimensions.contentMargin.x
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
width: frame.width
|
||||||
|
height: 1
|
||||||
|
color: hifi.colors.baseGrayHighlight
|
||||||
|
x: -hifi.dimensions.contentMargin.x
|
||||||
|
anchors.top: shadow.bottom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: heading
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
top: topBar.bottom
|
||||||
|
}
|
||||||
|
height: isCollapsible ? 36 : 28
|
||||||
|
|
||||||
|
RalewayRegular {
|
||||||
|
id: title
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
top: parent.top
|
||||||
|
topMargin: 12
|
||||||
|
}
|
||||||
|
size: hifi.fontSizes.sectionName
|
||||||
|
font.capitalization: Font.AllUppercase
|
||||||
|
text: name
|
||||||
|
color: hifi.colors.lightGrayText
|
||||||
|
}
|
||||||
|
|
||||||
|
HiFiGlyphs {
|
||||||
|
anchors {
|
||||||
|
top: title.top
|
||||||
|
topMargin: -9
|
||||||
|
right: parent.right
|
||||||
|
rightMargin: -4
|
||||||
|
}
|
||||||
|
size: hifi.fontSizes.disclosureButton
|
||||||
|
text: isCollapsed ? hifi.glyphs.disclosureButtonExpand : hifi.glyphs.disclosureButtonCollapse
|
||||||
|
color: hifi.colors.lightGrayText
|
||||||
|
visible: isCollapsible
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
// Events are propogated so that any active control is defocused.
|
||||||
|
anchors.fill: parent
|
||||||
|
propagateComposedEvents: true
|
||||||
|
onPressed: {
|
||||||
|
toggleCollapsed();
|
||||||
|
mouse.accepted = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
LinearGradient {
|
||||||
|
id: bottomBar
|
||||||
|
visible: desktop.gradientsSupported && isCollapsible
|
||||||
|
width: frame.width
|
||||||
|
height: visible ? 4 : 0
|
||||||
|
x: -hifi.dimensions.contentMargin.x
|
||||||
|
anchors.top: heading.bottom
|
||||||
|
start: Qt.point(0, 0)
|
||||||
|
end: Qt.point(0, 4)
|
||||||
|
gradient: Gradient {
|
||||||
|
GradientStop { position: 0.0; color: hifi.colors.darkGray }
|
||||||
|
GradientStop { position: 1.0; color: hifi.colors.baseGray } // Equivalent of darkGray0 over baseGray background.
|
||||||
|
}
|
||||||
|
cached: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
78
scripts/developer/utilities/lib/controls-uit/GlyphButton.qml
Normal file
78
scripts/developer/utilities/lib/controls-uit/GlyphButton.qml
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
//
|
||||||
|
// GlyphButton.qml
|
||||||
|
//
|
||||||
|
// Created by Clement on 3/7/16
|
||||||
|
// 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 as Original
|
||||||
|
import QtQuick.Controls.Styles 1.4
|
||||||
|
|
||||||
|
import "../styles-uit"
|
||||||
|
|
||||||
|
Original.Button {
|
||||||
|
property int color: 0
|
||||||
|
property int colorScheme: hifi.colorSchemes.light
|
||||||
|
property string glyph: ""
|
||||||
|
property int size: 32
|
||||||
|
|
||||||
|
width: 120
|
||||||
|
height: 28
|
||||||
|
|
||||||
|
style: ButtonStyle {
|
||||||
|
|
||||||
|
background: Rectangle {
|
||||||
|
radius: hifi.buttons.radius
|
||||||
|
|
||||||
|
gradient: Gradient {
|
||||||
|
GradientStop {
|
||||||
|
position: 0.2
|
||||||
|
color: {
|
||||||
|
if (!control.enabled) {
|
||||||
|
hifi.buttons.disabledColorStart[control.colorScheme]
|
||||||
|
} else if (control.pressed) {
|
||||||
|
hifi.buttons.pressedColor[control.color]
|
||||||
|
} else if (control.hovered) {
|
||||||
|
hifi.buttons.hoveredColor[control.color]
|
||||||
|
} else {
|
||||||
|
hifi.buttons.colorStart[control.color]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
GradientStop {
|
||||||
|
position: 1.0
|
||||||
|
color: {
|
||||||
|
if (!control.enabled) {
|
||||||
|
hifi.buttons.disabledColorFinish[control.colorScheme]
|
||||||
|
} else if (control.pressed) {
|
||||||
|
hifi.buttons.pressedColor[control.color]
|
||||||
|
} else if (control.hovered) {
|
||||||
|
hifi.buttons.hoveredColor[control.color]
|
||||||
|
} else {
|
||||||
|
hifi.buttons.colorFinish[control.color]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label: HiFiGlyphs {
|
||||||
|
color: enabled ? hifi.buttons.textColor[control.color]
|
||||||
|
: hifi.buttons.disabledTextColor[control.colorScheme]
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
anchors {
|
||||||
|
// Tweak horizontal alignment so that it looks right.
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: -0.5
|
||||||
|
}
|
||||||
|
text: control.glyph
|
||||||
|
size: control.size
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
//
|
||||||
|
// HorizontalRule.qml
|
||||||
|
//
|
||||||
|
// Created by Clement on 7/18/16
|
||||||
|
// 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
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
height: 1
|
||||||
|
color: hifi.colors.lightGray
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
//
|
||||||
|
// HorizontalSpacer.qml
|
||||||
|
//
|
||||||
|
// Created by Clement on 7/18/16
|
||||||
|
// 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 "../styles-uit"
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: root
|
||||||
|
property alias size: root.width
|
||||||
|
|
||||||
|
width: hifi.dimensions.controlInterlineHeight
|
||||||
|
height: 1 // Must be non-zero
|
||||||
|
}
|
||||||
22
scripts/developer/utilities/lib/controls-uit/Label.qml
Normal file
22
scripts/developer/utilities/lib/controls-uit/Label.qml
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
//
|
||||||
|
// Label.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 "../styles-uit"
|
||||||
|
|
||||||
|
RalewaySemiBold {
|
||||||
|
HifiConstants { id: hifi }
|
||||||
|
property int colorScheme: hifi.colorSchemes.light
|
||||||
|
|
||||||
|
size: hifi.fontSizes.inputLabel
|
||||||
|
color: enabled ? (colorScheme == hifi.colorSchemes.light ? hifi.colors.lightGray : hifi.colors.lightGrayText)
|
||||||
|
: (colorScheme == hifi.colorSchemes.light ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
//
|
||||||
|
// QueuedButton.qml
|
||||||
|
// -- original Button.qml + signal timer workaround --ht
|
||||||
|
// Created by David Rowe on 16 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 as Original
|
||||||
|
import QtQuick.Controls.Styles 1.4
|
||||||
|
|
||||||
|
import "../styles-uit"
|
||||||
|
import "." as HifiControls
|
||||||
|
|
||||||
|
HifiControls.Button {
|
||||||
|
// FIXME: THIS WORKAROUND MIGRATED/CONSOLIDATED FROM RUNNINGSCRIPTS.QML
|
||||||
|
|
||||||
|
// For some reason trigginer an API that enters
|
||||||
|
// an internal event loop directly from the button clicked
|
||||||
|
// trigger below causes the appliction to behave oddly.
|
||||||
|
// Most likely because the button onClicked handling is never
|
||||||
|
// completed until the function returns.
|
||||||
|
// FIXME find a better way of handling the input dialogs that
|
||||||
|
// doesn't trigger this.
|
||||||
|
|
||||||
|
// NOTE: dialogs that need to use this workaround can connect via
|
||||||
|
// onQueuedClicked: ...
|
||||||
|
// instead of:
|
||||||
|
// onClicked: ...
|
||||||
|
|
||||||
|
signal clickedQueued()
|
||||||
|
Timer {
|
||||||
|
id: fromTimer
|
||||||
|
interval: 5
|
||||||
|
repeat: false
|
||||||
|
running: false
|
||||||
|
onTriggered: clickedQueued()
|
||||||
|
}
|
||||||
|
onClicked: fromTimer.running = true
|
||||||
|
}
|
||||||
71
scripts/developer/utilities/lib/controls-uit/RadioButton.qml
Normal file
71
scripts/developer/utilities/lib/controls-uit/RadioButton.qml
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
//
|
||||||
|
// RadioButton.qml
|
||||||
|
//
|
||||||
|
// Created by Cain Kilgore on 20th July 2017
|
||||||
|
// Copyright 2017 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 as Original
|
||||||
|
import QtQuick.Controls.Styles 1.4
|
||||||
|
|
||||||
|
import "../styles-uit"
|
||||||
|
import "../controls-uit" as HifiControls
|
||||||
|
|
||||||
|
Original.RadioButton {
|
||||||
|
id: radioButton
|
||||||
|
HifiConstants { id: hifi }
|
||||||
|
|
||||||
|
property int colorScheme: hifi.colorSchemes.light
|
||||||
|
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
|
||||||
|
|
||||||
|
readonly property int boxSize: 14
|
||||||
|
readonly property int boxRadius: 3
|
||||||
|
readonly property int checkSize: 10
|
||||||
|
readonly property int checkRadius: 2
|
||||||
|
|
||||||
|
style: RadioButtonStyle {
|
||||||
|
indicator: Rectangle {
|
||||||
|
id: box
|
||||||
|
width: boxSize
|
||||||
|
height: boxSize
|
||||||
|
radius: 7
|
||||||
|
gradient: Gradient {
|
||||||
|
GradientStop {
|
||||||
|
position: 0.2
|
||||||
|
color: pressed || hovered
|
||||||
|
? (radioButton.isLightColorScheme ? hifi.colors.checkboxDarkStart : hifi.colors.checkboxLightStart)
|
||||||
|
: (radioButton.isLightColorScheme ? hifi.colors.checkboxLightStart : hifi.colors.checkboxDarkStart)
|
||||||
|
}
|
||||||
|
GradientStop {
|
||||||
|
position: 1.0
|
||||||
|
color: pressed || hovered
|
||||||
|
? (radioButton.isLightColorScheme ? hifi.colors.checkboxDarkFinish : hifi.colors.checkboxLightFinish)
|
||||||
|
: (radioButton.isLightColorScheme ? hifi.colors.checkboxLightFinish : hifi.colors.checkboxDarkFinish)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: check
|
||||||
|
width: checkSize
|
||||||
|
height: checkSize
|
||||||
|
radius: 7
|
||||||
|
anchors.centerIn: parent
|
||||||
|
color: "#00B4EF"
|
||||||
|
border.width: 1
|
||||||
|
border.color: "#36CDFF"
|
||||||
|
visible: checked && !pressed || !checked && pressed
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label: RalewaySemiBold {
|
||||||
|
text: control.text
|
||||||
|
size: hifi.fontSizes.inputLabel
|
||||||
|
color: isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText
|
||||||
|
x: radioButton.boxSize / 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
38
scripts/developer/utilities/lib/controls-uit/Separator.qml
Normal file
38
scripts/developer/utilities/lib/controls-uit/Separator.qml
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
//
|
||||||
|
// Separator.qml
|
||||||
|
//
|
||||||
|
// Created by Zach Fox on 2017-06-06
|
||||||
|
// Copyright 2017 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 "../styles-uit"
|
||||||
|
|
||||||
|
Item {
|
||||||
|
// Size
|
||||||
|
height: 2;
|
||||||
|
Rectangle {
|
||||||
|
// Size
|
||||||
|
width: parent.width;
|
||||||
|
height: 1;
|
||||||
|
// Anchors
|
||||||
|
anchors.left: parent.left;
|
||||||
|
anchors.bottom: parent.bottom;
|
||||||
|
anchors.bottomMargin: height;
|
||||||
|
// Style
|
||||||
|
color: hifi.colors.baseGrayShadow;
|
||||||
|
}
|
||||||
|
Rectangle {
|
||||||
|
// Size
|
||||||
|
width: parent.width;
|
||||||
|
height: 1;
|
||||||
|
// Anchors
|
||||||
|
anchors.left: parent.left;
|
||||||
|
anchors.bottom: parent.bottom;
|
||||||
|
// Style
|
||||||
|
color: hifi.colors.baseGrayHighlight;
|
||||||
|
}
|
||||||
|
}
|
||||||
98
scripts/developer/utilities/lib/controls-uit/Slider.qml
Normal file
98
scripts/developer/utilities/lib/controls-uit/Slider.qml
Normal 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 + sliderLabel.anchors.bottomMargin : 0)
|
||||||
|
|
||||||
|
height: hifi.fontSizes.textFieldInput + 14 // Match height of TextField control.
|
||||||
|
y: sliderLabel.visible ? sliderLabel.height + sliderLabel.anchors.bottomMargin : 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.width * (slider.value - slider.minimumValue) / (slider.maximumValue - slider.minimumValue) - 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 != ""
|
||||||
|
}
|
||||||
|
}
|
||||||
117
scripts/developer/utilities/lib/controls-uit/SpinBox.qml
Normal file
117
scripts/developer/utilities/lib/controls-uit/SpinBox.qml
Normal file
|
|
@ -0,0 +1,117 @@
|
||||||
|
//
|
||||||
|
// 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
|
||||||
|
|
||||||
|
property int colorScheme: hifi.colorSchemes.light
|
||||||
|
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
|
||||||
|
property string label: ""
|
||||||
|
property string labelInside: ""
|
||||||
|
property color colorLabelInside: hifi.colors.white
|
||||||
|
property real controlHeight: height + (spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0)
|
||||||
|
|
||||||
|
FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
|
||||||
|
font.family: firaSansSemiBold.name
|
||||||
|
font.pixelSize: hifi.fontSizes.textFieldInput
|
||||||
|
height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control.
|
||||||
|
|
||||||
|
y: spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0
|
||||||
|
|
||||||
|
style: SpinBoxStyle {
|
||||||
|
id: spinStyle
|
||||||
|
background: Rectangle {
|
||||||
|
color: isLightColorScheme
|
||||||
|
? (spinBox.activeFocus ? hifi.colors.white : hifi.colors.lightGray)
|
||||||
|
: (spinBox.activeFocus ? hifi.colors.black : hifi.colors.baseGrayShadow)
|
||||||
|
border.color: spinBoxLabelInside.visible ? spinBoxLabelInside.color : hifi.colors.primaryHighlight
|
||||||
|
border.width: spinBox.activeFocus ? spinBoxLabelInside.visible ? 2 : 1 : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
textColor: isLightColorScheme
|
||||||
|
? (spinBox.activeFocus ? hifi.colors.black : hifi.colors.lightGray)
|
||||||
|
: (spinBox.activeFocus ? hifi.colors.white : hifi.colors.lightGrayText)
|
||||||
|
selectedTextColor: hifi.colors.black
|
||||||
|
selectionColor: hifi.colors.primaryHighlight
|
||||||
|
|
||||||
|
horizontalAlignment: Qt.AlignLeft
|
||||||
|
padding.left: spinBoxLabelInside.visible ? 30 : hifi.dimensions.textPadding
|
||||||
|
padding.right: hifi.dimensions.spinnerSize
|
||||||
|
padding.top: 0
|
||||||
|
|
||||||
|
incrementControl: HiFiGlyphs {
|
||||||
|
id: incrementButton
|
||||||
|
text: hifi.glyphs.caratUp
|
||||||
|
x: 10
|
||||||
|
y: 1
|
||||||
|
size: hifi.dimensions.spinnerSize
|
||||||
|
color: styleData.upPressed ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
|
||||||
|
}
|
||||||
|
|
||||||
|
decrementControl: HiFiGlyphs {
|
||||||
|
text: hifi.glyphs.caratDn
|
||||||
|
x: 10
|
||||||
|
y: -1
|
||||||
|
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 != ""
|
||||||
|
}
|
||||||
|
|
||||||
|
HifiControls.Label {
|
||||||
|
id: spinBoxLabelInside
|
||||||
|
text: spinBox.labelInside
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: 10
|
||||||
|
font.bold: true
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
color: spinBox.colorLabelInside
|
||||||
|
visible: spinBox.labelInside != ""
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
propagateComposedEvents: true
|
||||||
|
onWheel: {
|
||||||
|
if(spinBox.activeFocus)
|
||||||
|
wheel.accepted = false
|
||||||
|
else
|
||||||
|
wheel.accepted = true
|
||||||
|
}
|
||||||
|
onPressed: {
|
||||||
|
mouse.accepted = false
|
||||||
|
}
|
||||||
|
onReleased: {
|
||||||
|
mouse.accepted = false
|
||||||
|
}
|
||||||
|
onClicked: {
|
||||||
|
mouse.accepted = false
|
||||||
|
}
|
||||||
|
onDoubleClicked: {
|
||||||
|
mouse.accepted = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
156
scripts/developer/utilities/lib/controls-uit/Switch.qml
Normal file
156
scripts/developer/utilities/lib/controls-uit/Switch.qml
Normal file
|
|
@ -0,0 +1,156 @@
|
||||||
|
//
|
||||||
|
// Switch.qml
|
||||||
|
//
|
||||||
|
// Created by Zach Fox on 2017-06-06
|
||||||
|
// Copyright 2017 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 as Original
|
||||||
|
import QtQuick.Controls.Styles 1.4
|
||||||
|
|
||||||
|
import "../styles-uit"
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: rootSwitch;
|
||||||
|
|
||||||
|
property int colorScheme: hifi.colorSchemes.light;
|
||||||
|
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light;
|
||||||
|
property int switchWidth: 70;
|
||||||
|
readonly property int switchRadius: height/2;
|
||||||
|
property string labelTextOff: "";
|
||||||
|
property string labelGlyphOffText: "";
|
||||||
|
property int labelGlyphOffSize: 32;
|
||||||
|
property string labelTextOn: "";
|
||||||
|
property string labelGlyphOnText: "";
|
||||||
|
property int labelGlyphOnSize: 32;
|
||||||
|
property alias checked: originalSwitch.checked;
|
||||||
|
signal onCheckedChanged;
|
||||||
|
signal clicked;
|
||||||
|
|
||||||
|
Original.Switch {
|
||||||
|
id: originalSwitch;
|
||||||
|
activeFocusOnPress: true;
|
||||||
|
anchors.top: rootSwitch.top;
|
||||||
|
anchors.left: rootSwitch.left;
|
||||||
|
anchors.leftMargin: rootSwitch.width/2 - rootSwitch.switchWidth/2;
|
||||||
|
onCheckedChanged: rootSwitch.onCheckedChanged();
|
||||||
|
onClicked: rootSwitch.clicked();
|
||||||
|
|
||||||
|
style: SwitchStyle {
|
||||||
|
|
||||||
|
padding {
|
||||||
|
top: 3;
|
||||||
|
left: 3;
|
||||||
|
right: 3;
|
||||||
|
bottom: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
groove: Rectangle {
|
||||||
|
color: "#252525";
|
||||||
|
implicitWidth: rootSwitch.switchWidth;
|
||||||
|
implicitHeight: rootSwitch.height;
|
||||||
|
radius: rootSwitch.switchRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
handle: Rectangle {
|
||||||
|
id: switchHandle;
|
||||||
|
implicitWidth: rootSwitch.height - padding.top - padding.bottom;
|
||||||
|
implicitHeight: implicitWidth;
|
||||||
|
radius: implicitWidth/2;
|
||||||
|
border.color: hifi.colors.lightGrayText;
|
||||||
|
color: hifi.colors.lightGray;
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent;
|
||||||
|
hoverEnabled: true;
|
||||||
|
onEntered: parent.color = hifi.colors.blueHighlight;
|
||||||
|
onExited: parent.color = hifi.colors.lightGray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// OFF Label
|
||||||
|
Item {
|
||||||
|
anchors.right: originalSwitch.left;
|
||||||
|
anchors.rightMargin: 10;
|
||||||
|
anchors.top: rootSwitch.top;
|
||||||
|
height: rootSwitch.height;
|
||||||
|
|
||||||
|
RalewaySemiBold {
|
||||||
|
id: labelOff;
|
||||||
|
text: labelTextOff;
|
||||||
|
size: hifi.fontSizes.inputLabel;
|
||||||
|
color: originalSwitch.checked ? hifi.colors.lightGrayText : "#FFFFFF";
|
||||||
|
anchors.top: parent.top;
|
||||||
|
anchors.right: parent.right;
|
||||||
|
width: paintedWidth;
|
||||||
|
height: parent.height;
|
||||||
|
verticalAlignment: Text.AlignVCenter;
|
||||||
|
}
|
||||||
|
|
||||||
|
HiFiGlyphs {
|
||||||
|
id: labelGlyphOff;
|
||||||
|
text: labelGlyphOffText;
|
||||||
|
size: labelGlyphOffSize;
|
||||||
|
color: labelOff.color;
|
||||||
|
anchors.top: parent.top;
|
||||||
|
anchors.topMargin: 2;
|
||||||
|
anchors.right: labelOff.left;
|
||||||
|
anchors.rightMargin: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.top: parent.top;
|
||||||
|
anchors.bottom: parent.bottom;
|
||||||
|
anchors.left: labelGlyphOff.left;
|
||||||
|
anchors.right: labelOff.right;
|
||||||
|
onClicked: {
|
||||||
|
originalSwitch.checked = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ON Label
|
||||||
|
Item {
|
||||||
|
anchors.left: originalSwitch.right;
|
||||||
|
anchors.leftMargin: 10;
|
||||||
|
anchors.top: rootSwitch.top;
|
||||||
|
height: rootSwitch.height;
|
||||||
|
|
||||||
|
RalewaySemiBold {
|
||||||
|
id: labelOn;
|
||||||
|
text: labelTextOn;
|
||||||
|
size: hifi.fontSizes.inputLabel;
|
||||||
|
color: originalSwitch.checked ? "#FFFFFF" : hifi.colors.lightGrayText;
|
||||||
|
anchors.top: parent.top;
|
||||||
|
anchors.left: parent.left;
|
||||||
|
width: paintedWidth;
|
||||||
|
height: parent.height;
|
||||||
|
verticalAlignment: Text.AlignVCenter;
|
||||||
|
}
|
||||||
|
|
||||||
|
HiFiGlyphs {
|
||||||
|
id: labelGlyphOn;
|
||||||
|
text: labelGlyphOnText;
|
||||||
|
size: labelGlyphOnSize;
|
||||||
|
color: labelOn.color;
|
||||||
|
anchors.top: parent.top;
|
||||||
|
anchors.left: labelOn.right;
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.top: parent.top;
|
||||||
|
anchors.bottom: parent.bottom;
|
||||||
|
anchors.left: labelOn.left;
|
||||||
|
anchors.right: labelGlyphOn.right;
|
||||||
|
onClicked: {
|
||||||
|
originalSwitch.checked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
179
scripts/developer/utilities/lib/controls-uit/Table.qml
Normal file
179
scripts/developer/utilities/lib/controls-uit/Table.qml
Normal file
|
|
@ -0,0 +1,179 @@
|
||||||
|
//
|
||||||
|
// Table.qml
|
||||||
|
//
|
||||||
|
// Created by David Rowe on 18 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"
|
||||||
|
|
||||||
|
TableView {
|
||||||
|
id: tableView
|
||||||
|
|
||||||
|
property int colorScheme: hifi.colorSchemes.light
|
||||||
|
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
|
||||||
|
property bool expandSelectedRow: false
|
||||||
|
property bool centerHeaderText: false
|
||||||
|
|
||||||
|
model: ListModel { }
|
||||||
|
|
||||||
|
headerVisible: false
|
||||||
|
headerDelegate: Rectangle {
|
||||||
|
height: hifi.dimensions.tableHeaderHeight
|
||||||
|
color: isLightColorScheme ? hifi.colors.tableBackgroundLight : hifi.colors.tableBackgroundDark
|
||||||
|
|
||||||
|
RalewayRegular {
|
||||||
|
id: titleText
|
||||||
|
text: styleData.value
|
||||||
|
size: hifi.fontSizes.tableHeading
|
||||||
|
font.capitalization: Font.AllUppercase
|
||||||
|
color: hifi.colors.baseGrayHighlight
|
||||||
|
horizontalAlignment: (centerHeaderText ? Text.AlignHCenter : Text.AlignLeft)
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: hifi.dimensions.tablePadding
|
||||||
|
right: parent.right
|
||||||
|
rightMargin: hifi.dimensions.tablePadding
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
HiFiGlyphs {
|
||||||
|
id: titleSort
|
||||||
|
text: sortIndicatorOrder == Qt.AscendingOrder ? hifi.glyphs.caratUp : hifi.glyphs.caratDn
|
||||||
|
color: hifi.colors.darkGray
|
||||||
|
opacity: 0.6;
|
||||||
|
size: hifi.fontSizes.tableHeadingIcon
|
||||||
|
anchors {
|
||||||
|
left: titleText.right
|
||||||
|
leftMargin: -hifi.fontSizes.tableHeadingIcon / 3 - (centerHeaderText ? 5 : 0)
|
||||||
|
right: parent.right
|
||||||
|
rightMargin: hifi.dimensions.tablePadding
|
||||||
|
verticalCenter: titleText.verticalCenter
|
||||||
|
}
|
||||||
|
visible: sortIndicatorVisible && sortIndicatorColumn === styleData.column
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
width: 1
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
top: parent.top
|
||||||
|
topMargin: 1
|
||||||
|
bottom: parent.bottom
|
||||||
|
bottomMargin: 2
|
||||||
|
}
|
||||||
|
color: isLightColorScheme ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight
|
||||||
|
visible: styleData.column > 0
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
height: 1
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
bottom: parent.bottom
|
||||||
|
}
|
||||||
|
color: isLightColorScheme ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use rectangle to draw border with rounded corners.
|
||||||
|
frameVisible: false
|
||||||
|
Rectangle {
|
||||||
|
color: "#00000000"
|
||||||
|
anchors { fill: parent; margins: -2 }
|
||||||
|
border.color: isLightColorScheme ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight
|
||||||
|
border.width: 2
|
||||||
|
}
|
||||||
|
anchors.margins: 2 // Shrink TableView to lie within border.
|
||||||
|
|
||||||
|
backgroundVisible: true
|
||||||
|
|
||||||
|
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
|
||||||
|
verticalScrollBarPolicy: Qt.ScrollBarAsNeeded
|
||||||
|
|
||||||
|
style: TableViewStyle {
|
||||||
|
// Needed in order for rows to keep displaying rows after end of table entries.
|
||||||
|
backgroundColor: tableView.isLightColorScheme ? hifi.colors.tableBackgroundLight : hifi.colors.tableBackgroundDark
|
||||||
|
alternateBackgroundColor: tableView.isLightColorScheme ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
|
||||||
|
|
||||||
|
padding.top: headerVisible ? hifi.dimensions.tableHeaderHeight: 0
|
||||||
|
|
||||||
|
handle: Item {
|
||||||
|
id: scrollbarHandle
|
||||||
|
implicitWidth: hifi.dimensions.scrollbarHandleWidth
|
||||||
|
Rectangle {
|
||||||
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
topMargin: 3
|
||||||
|
bottomMargin: 3 // ""
|
||||||
|
leftMargin: 1 // Move it right
|
||||||
|
rightMargin: -1 // ""
|
||||||
|
}
|
||||||
|
radius: hifi.dimensions.scrollbarHandleWidth/2
|
||||||
|
color: isLightColorScheme ? hifi.colors.tableScrollHandleLight : hifi.colors.tableScrollHandleDark
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollBarBackground: Item {
|
||||||
|
implicitWidth: hifi.dimensions.scrollbarBackgroundWidth
|
||||||
|
Rectangle {
|
||||||
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: -1 // Expand
|
||||||
|
topMargin: -1
|
||||||
|
}
|
||||||
|
color: isLightColorScheme ? hifi.colors.tableScrollBackgroundLight : hifi.colors.tableScrollBackgroundDark
|
||||||
|
|
||||||
|
// Extend header color above scrollbar background
|
||||||
|
Rectangle {
|
||||||
|
anchors {
|
||||||
|
top: parent.top
|
||||||
|
topMargin: -hifi.dimensions.tableHeaderHeight
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
height: hifi.dimensions.tableHeaderHeight
|
||||||
|
color: tableView.isLightColorScheme ? hifi.colors.tableBackgroundLight : hifi.colors.tableBackgroundDark
|
||||||
|
visible: headerVisible
|
||||||
|
}
|
||||||
|
Rectangle {
|
||||||
|
// Extend header bottom border
|
||||||
|
anchors {
|
||||||
|
top: parent.top
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
height: 1
|
||||||
|
color: isLightColorScheme ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight
|
||||||
|
visible: headerVisible
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
incrementControl: Item {
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
|
||||||
|
decrementControl: Item {
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rowDelegate: Rectangle {
|
||||||
|
height: (styleData.selected && expandSelectedRow ? 1.8 : 1) * hifi.dimensions.tableRowHeight
|
||||||
|
color: styleData.selected
|
||||||
|
? hifi.colors.primaryHighlight
|
||||||
|
: tableView.isLightColorScheme
|
||||||
|
? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd)
|
||||||
|
: (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
//
|
||||||
|
// VerticalSpacer.qml
|
||||||
|
//
|
||||||
|
// Created by David Rowe on 16 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 "../styles-uit"
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: root
|
||||||
|
property alias size: root.height
|
||||||
|
|
||||||
|
width: 1 // Must be non-zero
|
||||||
|
height: hifi.dimensions.controlInterlineHeight
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue