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

Merge branch 'master' of github.com:highfidelity/hifi into no-url-logging

Browse source
This commit is contained in:
Zach Fox 2018-11-08 09:57:10 -08:00
commit 1ab1cb95d8
343 changed files with 5654 additions and 7477 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assignment-client/src/Agent.cpp
View file

@ -216,7 +216,7 @@ void Agent::requestScript() {
}
// make sure this is not a script request for the file scheme
if (scriptURL.scheme() == URL_SCHEME_FILE) {
if (scriptURL.scheme() == HIFI_URL_SCHEME_FILE) {
qWarning() << "Cannot load script for Agent from local filesystem.";
scriptRequestFinished();
return;

4
interface/resources/QtWebEngine/UIDelegates/Menu.qml
View file

@ -1,7 +1,7 @@
import QtQuick 2.5
import "../../qml/controls-uit"
import "../../qml/styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: menu

4
interface/resources/QtWebEngine/UIDelegates/MenuItem.qml
View file

@ -1,7 +1,7 @@
import QtQuick 2.5
import "../../qml/controls-uit"
import "../../qml/styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: root

4
interface/resources/QtWebEngine/UIDelegates/PromptDialog.qml
View file

@ -1,7 +1,7 @@
import QtQuick 2.5
import "../../qml/controls-uit"
import "../../qml/styles-uit"
import controlsUit 1.0
import stylesUit 1.0
import "../../qml/dialogs"
QtObject {

4
interface/resources/qml/AudioScopeUI.qml
View file

@ -10,8 +10,8 @@
import QtQuick 2.5
import QtQuick.Controls 1.4
import "styles-uit"
import "controls-uit" as HifiControlsUit
import stylesUit 1.0
import controlsUit 1.0 as HifiControlsUit
Item {
id: root

4
interface/resources/qml/Browser.qml
View file

@ -2,9 +2,9 @@ import QtQuick 2.5
import QtWebChannel 1.0
import QtWebEngine 1.5
import "controls-uit"
import controlsUit 1.0
import "styles" as HifiStyles
import "styles-uit"
import stylesUit 1.0
import "windows"
ScrollingWindow {

4
interface/resources/qml/CurrentAPI.qml
View file

@ -10,8 +10,8 @@
import QtQuick 2.5
import QtQuick.Controls 1.4
import "styles-uit"
import "controls-uit" as HifiControls
import stylesUit 1.0
import controlsUit 1.0 as HifiControls
Item {
id: root

2
interface/resources/qml/InfoView.qml
View file

@ -11,7 +11,7 @@
import QtQuick 2.5
import Hifi 1.0 as Hifi
import "controls-uit"
import controlsUit 1.0
import "windows" as Windows
Windows.ScrollingWindow {

4
interface/resources/qml/InteractiveWindow.qml
View file

@ -12,9 +12,9 @@ import QtQuick 2.3
import "windows" as Windows
import "controls"
import "controls-uit" as Controls
import controlsUit 1.0 as Controls
import "styles"
import "styles-uit"
import stylesUit 1.0
Windows.Window {
id: root;

4
interface/resources/qml/LoginDialog.qml
View file

@ -11,8 +11,8 @@
import Hifi 1.0
import QtQuick 2.4
import "controls-uit"
import "styles-uit"
import controlsUit 1.0
import stylesUit 1.0
import "windows"
import "LoginDialog"

4
interface/resources/qml/LoginDialog/+android/LinkAccountBody.qml
View file

@ -13,8 +13,8 @@ import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4 as OriginalStyles
import "../../controls-uit"
import "../../styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: linkAccountBody

4
interface/resources/qml/LoginDialog/+android/SignUpBody.qml
View file

@ -13,8 +13,8 @@ import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4 as OriginalStyles
import "../../controls-uit"
import "../../styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: signupBody

4
interface/resources/qml/LoginDialog/CompleteProfileBody.qml
View file

@ -12,8 +12,8 @@ import Hifi 1.0
import QtQuick 2.4
import QtQuick.Controls.Styles 1.4 as OriginalStyles
import "../controls-uit"
import "../styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: completeProfileBody

5
interface/resources/qml/LoginDialog/LinkAccountBody.qml
View file

@ -13,8 +13,9 @@ import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4 as OriginalStyles
import "../controls-uit"
import "../styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: linkAccountBody
clip: true

4
interface/resources/qml/LoginDialog/SignInBody.qml
View file

@ -12,8 +12,8 @@ import Hifi 1.0
import QtQuick 2.7
import QtQuick.Controls.Styles 1.4 as OriginalStyles
import "../controls-uit"
import "../styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: signInBody

4
interface/resources/qml/LoginDialog/SignUpBody.qml
View file

@ -12,8 +12,8 @@ import Hifi 1.0
import QtQuick 2.7
import QtQuick.Controls 1.4
import "../controls-uit"
import "../styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: signupBody

4
interface/resources/qml/LoginDialog/UsernameCollisionBody.qml
View file

@ -12,8 +12,8 @@ import Hifi 1.0
import QtQuick 2.4
import QtQuick.Controls 1.4
import "../controls-uit"
import "../styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: usernameCollisionBody

4
interface/resources/qml/LoginDialog/WelcomeBody.qml
View file

@ -11,8 +11,8 @@
import Hifi 1.0
import QtQuick 2.4
import "../controls-uit"
import "../styles-uit"
import controlsUit 1.0
import stylesUit 1.0
Item {
id: welcomeBody

4
interface/resources/qml/QmlWebWindow.qml
View file

@ -13,8 +13,8 @@ import QtWebEngine 1.1
import QtWebChannel 1.0
import "windows" as Windows
import "controls-uit" as Controls
import "styles-uit"
import controlsUit 1.0 as Controls
import stylesUit 1.0
Windows.ScrollingWindow {
id: root

4
interface/resources/qml/QmlWindow.qml
View file

@ -2,9 +2,9 @@ import QtQuick 2.3
import "windows" as Windows
import "controls"
import "controls-uit" as Controls
import controlsUit 1.0 as Controls
import "styles"
import "styles-uit"
import stylesUit 1.0
Windows.Window {
id: root

4
interface/resources/qml/TabletBrowser.qml
View file

@ -3,9 +3,9 @@ import QtWebChannel 1.0
import QtWebEngine 1.5
import "controls"
import "controls-uit" as HifiControls
import controlsUit 1.0 as HifiControls
import "styles" as HifiStyles
import "styles-uit"
import stylesUit 1.0
import "windows"
Item {

4
interface/resources/qml/UpdateDialog.qml
View file

@ -4,9 +4,9 @@ import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3
import QtGraphicalEffects 1.0
import "controls-uit"
import controlsUit 1.0
import "styles" as HifiStyles
import "styles-uit"
import stylesUit 1.0
import "windows"
ScrollingWindow {

172
interface/resources/qml/controls-uit/AttachmentsTable.qml
View file

@ -1,170 +1,4 @@
//
// AttachmentsTable.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 controlsUit 1.0
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.XmlListModel 2.0
import "../styles-uit"
import "../controls-uit" as HifiControls
import "../windows"
import "../hifi/models"
TableView {
id: tableView
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
model: S3Model{}
Rectangle {
anchors.fill: parent
visible: tableView.model.status !== XmlListModel.Ready
color: hifi.colors.darkGray0
BusyIndicator {
anchors.centerIn: parent
width: 48; height: 48
running: true
}
}
headerDelegate: Rectangle {
height: hifi.dimensions.tableHeaderHeight
color: hifi.colors.darkGray
border.width: 0.5
border.color: hifi.colors.baseGrayHighlight
RalewayRegular {
id: textHeader
size: hifi.fontSizes.tableHeading
color: hifi.colors.lightGrayText
text: styleData.value
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
}
}
// Use rectangle to draw border with rounded corners.
Rectangle {
color: "#00000000"
anchors { fill: parent; margins: -2 }
radius: hifi.dimensions.borderRadius
border.color: hifi.colors.baseGrayHighlight
border.width: 3
}
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: parent.isLightColorScheme ? hifi.colors.tableRowLightEven : hifi.colors.tableRowDarkEven
alternateBackgroundColor: parent.isLightColorScheme ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
handle: Item {
id: scrollbarHandle
implicitWidth: 6
Rectangle {
anchors {
fill: parent
leftMargin: 2 // Move it right
rightMargin: -2 // ""
topMargin: 3 // Shrink vertically
bottomMargin: 3 // ""
}
radius: 3
color: hifi.colors.tableScrollHandleDark
}
}
scrollBarBackground: Item {
implicitWidth: 10
Rectangle {
anchors {
fill: parent
margins: -1 // Expand
}
color: hifi.colors.baseGrayHighlight
}
Rectangle {
anchors {
fill: parent
margins: 1 // Shrink
}
radius: 4
color: hifi.colors.tableScrollBackgroundDark
}
}
incrementControl: Item {
visible: false
}
decrementControl: Item {
visible: false
}
}
rowDelegate: Rectangle {
height: 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)
}
itemDelegate: Item {
anchors {
left: parent ? parent.left : undefined
leftMargin: hifi.dimensions.tablePadding
right: parent ? parent.right : undefined
rightMargin: hifi.dimensions.tablePadding
}
FiraSansSemiBold {
id: textItem
text: styleData.value
size: hifi.fontSizes.tableText
color: colorScheme == hifi.colorSchemes.light
? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
: (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
}
}
TableViewColumn {
role: "name"
title: "NAME"
width: parent.width *0.3
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "size"
title: "SIZE"
width: parent.width *0.2
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "modified"
title: "LAST MODIFIED"
width: parent.width *0.5
horizontalAlignment: Text.AlignHCenter
}
}
AttachmentsTable {
}

40
interface/resources/qml/controls-uit/BaseWebView.qml
View file

@ -1,38 +1,4 @@
//
// WebView.qml
//
// Created by Bradley Austin Davis on 12 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 controlsUit 1.0
import QtQuick 2.7
import QtWebEngine 1.5
WebEngineView {
id: root
Component.onCompleted: {
console.log("Connecting JS messaging to Hifi Logging")
// Ensure the JS from the web-engine makes it to our logging
root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
console.log("Web Window JS message: " + sourceID + " " + lineNumber + " " + message);
});
}
onLoadingChanged: {
// Required to support clicking on "hifi://" links
if (WebEngineView.LoadStartedStatus == loadRequest.status) {
var url = loadRequest.url.toString();
if (urlHandler.canHandleUrl(url)) {
if (urlHandler.handleUrl(url)) {
root.stop();
}
}
}
}
WebSpinner { }
}
BaseWebView {
}

122
interface/resources/qml/controls-uit/Button.qml
View file

@ -1,122 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.7
import QtQuick.Controls 2.3 as Original
import TabletScriptingInterface 1.0
import "../styles-uit"
Original.Button {
id: control;
property int color: 0
property int colorScheme: hifi.colorSchemes.light
property int fontSize: hifi.fontSizes.buttonLabel
property int radius: hifi.buttons.radius
property alias implicitTextWidth: buttonText.implicitWidth
property string buttonGlyph: "";
property int fontCapitalization: Font.AllUppercase
width: hifi.dimensions.buttonWidth
height: hifi.dimensions.controlLineHeight
HifiConstants { id: hifi }
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onFocusChanged: {
if (focus) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
background: Rectangle {
radius: control.radius
border.width: (control.color === hifi.buttons.none ||
(control.color === hifi.buttons.noneBorderless && control.hovered) ||
(control.color === hifi.buttons.noneBorderlessWhite && control.hovered) ||
(control.color === hifi.buttons.noneBorderlessGray && control.hovered)) ? 1 : 0;
border.color: control.color === hifi.buttons.noneBorderless ? hifi.colors.blueHighlight :
(control.color === hifi.buttons.noneBorderlessGray ? hifi.colors.baseGray : hifi.colors.white);
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]
}
}
}
}
}
contentItem: Item {
HiFiGlyphs {
id: buttonGlyph;
visible: control.buttonGlyph !== "";
text: control.buttonGlyph === "" ? hifi.glyphs.question : control.buttonGlyph;
// Size
size: 34;
// Anchors
anchors.right: buttonText.left;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
// Style
color: enabled ? hifi.buttons.textColor[control.color]
: hifi.buttons.disabledTextColor[control.colorScheme];
// Alignment
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
}
RalewayBold {
id: buttonText;
anchors.centerIn: parent;
font.capitalization: control.fontCapitalization
color: enabled ? hifi.buttons.textColor[control.color]
: hifi.buttons.disabledTextColor[control.colorScheme]
size: control.fontSize
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: control.text
}
}
Button {
}

121
interface/resources/qml/controls-uit/CheckBox.qml
View file

@ -1,121 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.2
import QtQuick.Controls 2.2 as Original
import "../styles-uit"
import TabletScriptingInterface 1.0
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
property string labelFontFamily: "Raleway"
property int labelFontSize: 14;
property int labelFontWeight: Font.DemiBold;
focusPolicy: Qt.ClickFocus
hoverEnabled: true
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
indicator: Rectangle {
id: box
implicitWidth: boxSize
implicitHeight: boxSize
radius: boxRadius
y: parent.height / 2 - height / 2
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
}
}
contentItem: Label {
text: checkBox.text
color: checkBox.color
font.family: checkBox.labelFontFamily;
font.pixelSize: checkBox.labelFontSize;
font.weight: checkBox.labelFontWeight;
x: 2
verticalAlignment: Text.AlignVCenter
wrapMode: checkBox.wrap ? Text.Wrap : Text.NoWrap
elide: checkBox.wrap ? Text.ElideNone : Text.ElideRight
enabled: checkBox.enabled
leftPadding: checkBox.indicator.width + checkBox.spacing
}
CheckBox {
}

127
interface/resources/qml/controls-uit/CheckBoxQQC2.qml
View file

@ -1,125 +1,4 @@
//
// CheckBox2.qml
//
// Created by Vlad Stelmahovsky on 10 Aug 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.7
import QtQuick.Controls 2.2
import "../styles-uit"
import "../controls-uit" as HiFiControls
import TabletScriptingInterface 1.0
CheckBox {
id: checkBox
HifiConstants { id: hifi; }
padding: 0
leftPadding: 0
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 bool isRound: false
property int boxSize: 14
property int boxRadius: isRound ? boxSize : 3
property bool wrap: true;
readonly property int checkSize: Math.max(boxSize - 8, 10)
readonly property int checkRadius: isRound ? checkSize / 2 : 2
focusPolicy: Qt.ClickFocus
hoverEnabled: true
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
indicator: Rectangle {
id: box
implicitWidth: boxSize
implicitHeight: boxSize
radius: boxRadius
x: checkBox.leftPadding
y: parent.height / 2 - height / 2
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
}
}
contentItem: Text {
id: root
font.pixelSize: hifi.fontSizes.inputLabel
font.family: "Raleway"
font.weight: Font.DemiBold
text: checkBox.text
color: checkBox.color
x: 2
wrapMode: checkBox.wrap ? Text.Wrap : Text.NoWrap
elide: checkBox.wrap ? Text.ElideNone : Text.ElideRight
enabled: checkBox.enabled
verticalAlignment: Text.AlignVCenter
leftPadding: checkBox.indicator.width + checkBox.spacing
}
}
import controlsUit 1.0
CheckBoxQQC2 {
}

191
interface/resources/qml/controls-uit/ComboBox.qml
View file

@ -1,191 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.7
import QtQuick.Controls 2.2
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 currentHighLightedIndex: 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
ComboBox {
id: comboBox
anchors.fill: parent
hoverEnabled: true
visible: true
height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control.
function previousItem() { root.currentHighLightedIndex = (root.currentHighLightedIndex + comboBox.count - 1) % comboBox.count; }
function nextItem() { root.currentHighLightedIndex = (root.currentHighLightedIndex + comboBox.count + 1) % comboBox.count; }
function selectCurrentItem() { root.currentIndex = root.currentHighLightedIndex; close(); /*hideList();*/ }
function selectSpecificItem(index) { root.currentIndex = index; close();/*hideList();*/ }
Keys.onUpPressed: previousItem();
Keys.onDownPressed: nextItem();
Keys.onSpacePressed: selectCurrentItem();
Keys.onRightPressed: selectCurrentItem();
Keys.onReturnPressed: selectCurrentItem();
background: Rectangle {
gradient: Gradient {
GradientStop {
position: 0.2
color: comboBox.popup.visible
? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark)
: (isLightColorScheme ? hifi.colors.dropDownLightStart : hifi.colors.dropDownDarkStart)
}
GradientStop {
position: 1.0
color: comboBox.popup.visible
? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark)
: (isLightColorScheme ? hifi.colors.dropDownLightFinish : hifi.colors.dropDownDarkFinish)
}
}
}
indicator: Item {
id: dropIcon
anchors { right: parent.right; verticalCenter: parent.verticalCenter }
height: root.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: comboBox.hovered || comboBox.popup.visible ? hifi.colors.baseGray : (isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText)
}
}
contentItem: FiraSansSemiBold {
id: textField
anchors {
left: parent.left
leftMargin: hifi.dimensions.textPadding
verticalCenter: parent.verticalCenter
}
size: hifi.fontSizes.textFieldInput
text: comboBox.displayText ? comboBox.displayText : comboBox.currentText
elide: Text.ElideRight
color: comboBox.hovered || comboBox.popup.visible ? hifi.colors.baseGray : (isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText )
}
delegate: ItemDelegate {
id: itemDelegate
hoverEnabled: true
width: root.width + 4
height: popupText.implicitHeight * 1.4
highlighted: root.currentHighLightedIndex == index
onHoveredChanged: {
if (hovered) {
root.currentHighLightedIndex = index
}
}
background: Rectangle {
color: itemDelegate.highlighted ? hifi.colors.primaryHighlight
: (isLightColorScheme ? hifi.colors.dropDownPressedLight
: hifi.colors.dropDownPressedDark)
}
contentItem: FiraSansSemiBold {
id: popupText
anchors.left: parent.left
anchors.leftMargin: hifi.dimensions.textPadding
anchors.verticalCenter: parent.verticalCenter
text: comboBox.model[index] ? comboBox.model[index]
: (comboBox.model.get && comboBox.model.get(index).text ?
comboBox.model.get(index).text : "")
size: hifi.fontSizes.textFieldInput
color: hifi.colors.baseGray
}
}
popup: Popup {
y: comboBox.height - 1
width: comboBox.width
implicitHeight: listView.contentHeight > dropdownHeight ? dropdownHeight
: listView.contentHeight
padding: 0
topPadding: 1
onClosed: {
root.accepted()
}
contentItem: ListView {
id: listView
clip: true
model: comboBox.popup.visible ? comboBox.delegateModel : null
currentIndex: root.currentHighLightedIndex
delegate: comboBox.delegate
ScrollBar.vertical: HifiControls.ScrollBar {
id: scrollbar
parent: listView
policy: ScrollBar.AsNeeded
visible: size < 1.0
}
}
background: Rectangle {
color: hifi.colors.baseGray
}
}
}
function textAt(index) {
return comboBox.textAt(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");
}
ComboBox {
}

138
interface/resources/qml/controls-uit/ContentSection.qml
View file

@ -1,138 +1,4 @@
//
// 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 controlsUit 1.0
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
}
}
ContentSection {
}

333
interface/resources/qml/controls-uit/FilterBar.qml
View file

@ -1,333 +1,4 @@
//
// FilterBar.qml
//
// Created by Zach Fox on 17 Feb 2018-03-12
// Copyright 2018 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 controlsUit 1.0
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import "../styles-uit"
import "../controls-uit" as HifiControls
Item {
id: root;
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
readonly property bool isFaintGrayColorScheme: colorScheme == hifi.colorSchemes.faintGray
property bool error: false;
property alias textFieldHeight: textField.height;
property string placeholderText;
property alias dropdownHeight: dropdownContainer.height;
property alias text: textField.text;
property alias primaryFilterChoices: filterBarModel;
property int primaryFilter_index: -1;
property string primaryFilter_filterName: "";
property string primaryFilter_displayName: "";
signal accepted;
onPrimaryFilter_indexChanged: {
if (primaryFilter_index === -1) {
primaryFilter_filterName = "";
primaryFilter_displayName = "";
} else {
primaryFilter_filterName = filterBarModel.get(primaryFilter_index).filterName;
primaryFilter_displayName = filterBarModel.get(primaryFilter_index).displayName;
}
}
TextField {
id: textField;
anchors.top: parent.top;
anchors.right: parent.right;
anchors.left: parent.left;
font.family: "Fira Sans"
font.pixelSize: hifi.fontSizes.textFieldInput;
placeholderText: root.primaryFilter_index === -1 ? root.placeholderText : "";
TextMetrics {
id: primaryFilterTextMetrics;
font.family: "FiraSans Regular";
font.pixelSize: hifi.fontSizes.textFieldInput;
font.capitalization: Font.AllUppercase;
text: root.primaryFilter_displayName;
}
// workaround for https://bugreports.qt.io/browse/QTBUG-49297
Keys.onPressed: {
switch (event.key) {
case Qt.Key_Return:
case Qt.Key_Enter:
event.accepted = true;
// emit accepted signal manually
if (acceptableInput) {
root.accepted();
root.forceActiveFocus();
}
break;
case Qt.Key_Backspace:
if (textField.text === "") {
primaryFilter_index = -1;
}
break;
}
}
onAccepted: {
root.forceActiveFocus();
}
onActiveFocusChanged: {
if (!activeFocus) {
dropdownContainer.visible = false;
}
}
color: {
if (isLightColorScheme) {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.lightGray
}
} else if (isFaintGrayColorScheme) {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.lightGray
}
} else {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.lightGrayText
}
}
}
background: Rectangle {
id: mainFilterBarRectangle;
color: {
if (isLightColorScheme) {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.textFieldLightBackground
}
} else if (isFaintGrayColorScheme) {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.faintGray50
}
} else {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.baseGrayShadow
}
}
}
border.color: textField.error ? hifi.colors.redHighlight :
(textField.activeFocus ? hifi.colors.primaryHighlight : (isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray))
border.width: 1
radius: 4
Item {
id: searchButtonContainer;
anchors.left: parent.left;
anchors.verticalCenter: parent.verticalCenter;
height: parent.height;
width: 42;
// Search icon
HiFiGlyphs {
id: searchIcon;
text: hifi.glyphs.search
color: textField.color
size: 40;
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: paintedWidth;
}
// Carat
HiFiGlyphs {
text: hifi.glyphs.caratDn;
color: textField.color;
size: 40;
anchors.left: parent.left;
anchors.leftMargin: 15;
width: paintedWidth;
}
MouseArea {
anchors.fill: parent;
onClicked: {
textField.forceActiveFocus();
dropdownContainer.visible = !dropdownContainer.visible;
}
}
}
Rectangle {
z: 999;
id: primaryFilterContainer;
color: textField.activeFocus ? hifi.colors.faintGray : hifi.colors.white;
width: primaryFilterTextMetrics.tightBoundingRect.width + 14;
height: parent.height - 8;
anchors.verticalCenter: parent.verticalCenter;
anchors.left: searchButtonContainer.right;
anchors.leftMargin: 4;
visible: primaryFilterText.text !== "";
radius: height/2;
FiraSansRegular {
id: primaryFilterText;
text: root.primaryFilter_displayName;
anchors.fill: parent;
color: textField.activeFocus ? hifi.colors.black : hifi.colors.lightGray;
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
size: hifi.fontSizes.textFieldInput;
font.capitalization: Font.AllUppercase;
}
MouseArea {
anchors.fill: parent;
onClicked: {
textField.forceActiveFocus();
}
}
}
// "Clear" button
HiFiGlyphs {
text: hifi.glyphs.error
color: textField.color
size: 40
anchors.right: parent.right
anchors.rightMargin: hifi.dimensions.textPadding - 2
anchors.verticalCenter: parent.verticalCenter
visible: root.text !== "" || root.primaryFilter_index !== -1;
MouseArea {
anchors.fill: parent;
onClicked: {
root.text = "";
root.primaryFilter_index = -1;
dropdownContainer.visible = false;
textField.forceActiveFocus();
}
}
}
}
selectedTextColor: hifi.colors.black
selectionColor: hifi.colors.primaryHighlight
leftPadding: 44 + (root.primaryFilter_index === -1 ? 0 : primaryFilterTextMetrics.tightBoundingRect.width + 20);
rightPadding: 44;
}
Rectangle {
id: dropdownContainer;
visible: false;
height: 50 * filterBarModel.count;
width: parent.width;
anchors.top: textField.bottom;
anchors.left: parent.left;
anchors.right: parent.right;
color: hifi.colors.white;
ListModel {
id: filterBarModel;
}
ListView {
id: dropdownListView;
interactive: false;
anchors.fill: parent;
model: filterBarModel;
delegate: Item {
width: parent.width;
height: 50;
Rectangle {
id: dropDownButton;
color: hifi.colors.white;
width: parent.width;
height: 50;
visible: true;
RalewaySemiBold {
id: dropDownButtonText;
text: model.displayName;
anchors.fill: parent;
anchors.topMargin: 2;
anchors.leftMargin: 12;
color: hifi.colors.baseGray;
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
size: 18;
}
MouseArea {
anchors.fill: parent;
hoverEnabled: true;
propagateComposedEvents: false;
onEntered: {
dropDownButton.color = hifi.colors.blueHighlight;
}
onExited: {
dropDownButton.color = hifi.colors.white;
}
onClicked: {
textField.forceActiveFocus();
root.primaryFilter_index = index;
dropdownContainer.visible = false;
}
}
}
Rectangle {
height: 2;
width: parent.width;
color: hifi.colors.lightGray;
visible: model.separator
}
}
}
}
DropShadow {
anchors.fill: dropdownContainer;
horizontalOffset: 0;
verticalOffset: 4;
radius: 4.0;
samples: 9
color: Qt.rgba(0, 0, 0, 0.25);
source: dropdownContainer;
visible: dropdownContainer.visible;
}
function changeFilterByDisplayName(name) {
for (var i = 0; i < filterBarModel.count; i++) {
if (filterBarModel.get(i).displayName === name) {
root.primaryFilter_index = i;
return;
}
}
console.log("Passed displayName not found in filterBarModel! primaryFilter unchanged.");
}
FilterBar {
}

91
interface/resources/qml/controls-uit/GlyphButton.qml
View file

@ -1,91 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.7
import QtQuick.Controls 2.2 as Original
import TabletScriptingInterface 1.0
import "../styles-uit"
Original.Button {
id: control
property int color: 0
property int colorScheme: hifi.colorSchemes.light
property string glyph: ""
property int size: 32
width: 120
height: 28
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onFocusChanged: {
if (focus) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
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 if (!control.hovered && control.focus) {
hifi.buttons.focusedColor[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 if (!control.hovered && control.focus) {
hifi.buttons.focusedColor[control.color]
} else {
hifi.buttons.colorFinish[control.color]
}
}
}
}
}
contentItem: HiFiGlyphs {
color: enabled ? hifi.buttons.textColor[control.color]
: hifi.buttons.disabledTextColor[control.colorScheme]
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: control.glyph
size: control.size
}
GlyphButton {
}

18
interface/resources/qml/controls-uit/HorizontalRule.qml
View file

@ -1,18 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.5
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: hifi.colors.lightGray
HorizontalRule {
}

21
interface/resources/qml/controls-uit/HorizontalSpacer.qml
View file

@ -1,21 +1,4 @@
//
// 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 controlsUit 1.0
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
HorizontalSpacer {
}

63
interface/resources/qml/controls-uit/ImageMessageBox.qml
View file

@ -1,63 +1,4 @@
//
// ImageMessageBox.qml
//
// Created by Dante Ruiz on 7/5/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 "../styles-uit"
Item {
id: imageBox
visible: false
anchors.fill: parent
property alias source: image.source
property alias imageWidth: image.width
property alias imageHeight: image.height
Rectangle {
anchors.fill: parent
color: "black"
opacity: 0.3
}
Image {
id: image
anchors.centerIn: parent
HiFiGlyphs {
id: closeGlyphButton
text: hifi.glyphs.close
size: 25
anchors {
top: parent.top
topMargin: 15
right: parent.right
rightMargin: 15
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.text = hifi.glyphs.closeInverted;
}
onExited: {
parent.text = hifi.glyphs.close;
}
onClicked: {
imageBox.visible = false;
}
}
}
}
import controlsUit 1.0
ImageMessageBox {
}

185
interface/resources/qml/controls-uit/Key.qml
View file

@ -1,185 +1,4 @@
import QtQuick 2.0
import TabletScriptingInterface 1.0
import controlsUit 1.0
Item {
id: keyItem
width: 45
height: 50
property int contentPadding: 4
property string glyph: "a"
property bool toggle: false // does this button have the toggle behaivor?
property bool toggled: false // is this button currently toggled?
property alias mouseArea: mouseArea1
property alias fontFamily: letter.font.family;
property alias fontPixelSize: letter.font.pixelSize
property alias verticalAlignment: letter.verticalAlignment
property alias letterAnchors: letter.anchors
function resetToggledMode(mode) {
toggled = mode;
if (toggled) {
state = "mouseDepressed";
} else {
state = "";
}
}
MouseArea {
id: mouseArea1
width: 36
anchors.fill: parent
hoverEnabled: true
onCanceled: {
if (toggled) {
keyItem.state = "mouseDepressed";
} else {
keyItem.state = "";
}
}
onContainsMouseChanged: {
if (containsMouse) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onDoubleClicked: {
mouse.accepted = true;
}
property var _HAPTIC_STRENGTH: 0.1;
property var _HAPTIC_DURATION: 3.0;
property var leftHand: 0;
property var rightHand: 1;
onEntered: {
keyItem.state = "mouseOver";
var globalPosition = keyItem.mapToGlobal(mouseArea1.mouseX, mouseArea1.mouseY);
var pointerID = Web3DOverlay.deviceIdByTouchPoint(globalPosition.x, globalPosition.y);
if (Pointers.isLeftHand(pointerID)) {
Controller.triggerHapticPulse(_HAPTIC_STRENGTH, _HAPTIC_DURATION, leftHand);
} else if (Pointers.isRightHand(pointerID)) {
Controller.triggerHapticPulse(_HAPTIC_STRENGTH, _HAPTIC_DURATION, rightHand);
}
}
onExited: {
if (toggled) {
keyItem.state = "mouseDepressed";
} else {
keyItem.state = "";
}
}
onPressed: {
keyItem.state = "mouseClicked";
mouse.accepted = true;
}
onReleased: {
if (containsMouse) {
Tablet.playSound(TabletEnums.ButtonClick);
webEntity.synthesizeKeyPress(glyph);
webEntity.synthesizeKeyPress(glyph, mirrorText);
if (toggle) {
toggled = !toggled;
}
keyItem.state = "mouseOver";
} else {
if (toggled) {
keyItem.state = "mouseDepressed";
} else {
keyItem.state = "";
}
}
mouse.accepted = true;
}
}
Rectangle {
id: roundedRect
width: 30
color: "#121212"
radius: 2
border.color: "#00000000"
anchors.fill: parent
anchors.margins: contentPadding
}
Text {
id: letter
y: 6
width: 50
color: "#ffffff"
text: glyph
style: Text.Normal
font.family: "Tahoma"
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 8
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 28
}
states: [
State {
name: "mouseOver"
PropertyChanges {
target: roundedRect
color: "#121212"
radius: 3
border.width: 2
border.color: "#00b4ef"
}
PropertyChanges {
target: letter
color: "#00b4ef"
style: Text.Normal
}
},
State {
name: "mouseClicked"
PropertyChanges {
target: roundedRect
color: "#1080b8"
border.width: 2
border.color: "#00b4ef"
}
PropertyChanges {
target: letter
color: "#121212"
styleColor: "#00000000"
style: Text.Normal
}
},
State {
name: "mouseDepressed"
PropertyChanges {
target: roundedRect
color: "#0578b1"
border.width: 0
}
PropertyChanges {
target: letter
color: "#121212"
styleColor: "#00000000"
style: Text.Normal
}
}
]
Key {
}

354
interface/resources/qml/controls-uit/Keyboard.qml
View file

@ -1,354 +1,4 @@
//
// FileDialog.qml
//
// Created by Anthony Thibault on 31 Oct 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 controlsUit 1.0
import QtQuick 2.7
import QtGraphicalEffects 1.0
import "."
Rectangle {
id: keyboardBase
objectName: "keyboard"
anchors.left: parent.left
anchors.right: parent.right
color: "#252525"
property bool raised: false
property bool numeric: false
readonly property int keyboardRowHeight: 50
readonly property int keyboardWidth: 480
readonly property int keyboardHeight: 200
readonly property int mirrorTextHeight: keyboardRowHeight
property bool password: false
property alias mirroredText: mirrorText.text
property bool showMirrorText: true
readonly property int raisedHeight: keyboardHeight + (showMirrorText ? keyboardRowHeight : 0)
height: enabled && raised ? raisedHeight : 0
visible: enabled && raised
property bool shiftMode: false
property bool numericShiftMode: false
onRaisedChanged: {
mirroredText = "";
}
function resetShiftMode(mode) {
shiftMode = mode;
shiftKey.resetToggledMode(mode);
}
function toUpper(str) {
if (str === ",") {
return "<";
} else if (str === ".") {
return ">";
} else if (str === "/") {
return "?";
} else if (str === "-") {
return "_";
} else {
return str.toUpperCase(str);
}
}
function toLower(str) {
if (str === "<") {
return ",";
} else if (str === ">") {
return ".";
} else if (str === "?") {
return "/";
} else if (str === "_") {
return "-";
} else {
return str.toLowerCase(str);
}
}
function forEachKey(func) {
var i, j;
for (i = 0; i < columnAlpha.children.length; i++) {
var row = columnAlpha.children[i];
for (j = 0; j < row.children.length; j++) {
var key = row.children[j];
func(key);
}
}
}
onShiftModeChanged: {
forEachKey(function (key) {
if (/[a-z-_]/i.test(key.glyph)) {
if (shiftMode) {
key.glyph = keyboardBase.toUpper(key.glyph);
} else {
key.glyph = keyboardBase.toLower(key.glyph);
}
}
});
}
function alphaKeyClickedHandler(mouseArea) {
// reset shift mode to false after first keypress
if (shiftMode) {
resetShiftMode(false);
}
}
Component.onCompleted: {
// hook up callbacks to every ascii key
forEachKey(function (key) {
if (/^[a-z]+$/i.test(key.glyph)) {
key.mouseArea.onClicked.connect(alphaKeyClickedHandler);
}
});
}
Rectangle {
height: showMirrorText ? mirrorTextHeight : 0
width: keyboardWidth
color: "#252525"
anchors.horizontalCenter: parent.horizontalCenter
TextInput {
id: mirrorText
visible: showMirrorText
font.family: "Fira Sans"
font.pixelSize: 20
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: "#00B4EF";
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
wrapMode: Text.WordWrap
readOnly: false // we need this to allow control to accept QKeyEvent
selectByMouse: false
echoMode: password ? TextInput.Password : TextInput.Normal
Keys.onPressed: {
if (event.key == Qt.Key_Return || event.key == Qt.Key_Space) {
mirrorText.text = "";
event.accepted = true;
}
}
MouseArea { // ... and we need this mouse area to prevent mirrorText from getting mouse events to ensure it will never get focus
anchors.fill: parent
}
}
}
Rectangle {
id: keyboardRect
y: showMirrorText ? mirrorTextHeight : 0
width: keyboardWidth
height: keyboardHeight
color: "#252525"
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
Column {
id: columnAlpha
width: keyboardWidth
height: keyboardHeight
visible: !numeric
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key { width: 43; glyph: "q"; }
Key { width: 43; glyph: "w"; }
Key { width: 43; glyph: "e"; }
Key { width: 43; glyph: "r"; }
Key { width: 43; glyph: "t"; }
Key { width: 43; glyph: "y"; }
Key { width: 43; glyph: "u"; }
Key { width: 43; glyph: "i"; }
Key { width: 43; glyph: "o"; }
Key { width: 43; glyph: "p"; }
Key { width: 43; glyph: "←"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 20
Key { width: 43; glyph: "a"; }
Key { width: 43; glyph: "s"; }
Key { width: 43; glyph: "d"; }
Key { width: 43; glyph: "f"; }
Key { width: 43; glyph: "g"; }
Key { width: 43; glyph: "h"; }
Key { width: 43; glyph: "j"; }
Key { width: 43; glyph: "k"; }
Key { width: 43; glyph: "l"; }
Key { width: 70; glyph: "⏎"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key {
id: shiftKey
width: 43
glyph: "⇪"
toggle: true
onToggledChanged: shiftMode = toggled
}
Key { width: 43; glyph: "z"; }
Key { width: 43; glyph: "x"; }
Key { width: 43; glyph: "c"; }
Key { width: 43; glyph: "v"; }
Key { width: 43; glyph: "b"; }
Key { width: 43; glyph: "n"; }
Key { width: 43; glyph: "m"; }
Key { width: 43; glyph: "-"; }
Key { width: 43; glyph: "/"; }
Key { width: 43; glyph: "?"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key {
width: 70
glyph: "123"
mouseArea.onClicked: keyboardBase.parent.punctuationMode = true
}
Key { width: 231; glyph: " "; }
Key { width: 43; glyph: ","; }
Key { width: 43; glyph: "."; }
Key {
fontFamily: "hifi-glyphs";
fontPixelSize: 48;
letterAnchors.topMargin: -4;
verticalAlignment: Text.AlignVCenter;
width: 86; glyph: "\ue02b";
}
}
}
Column {
id: columnNumeric
width: keyboardWidth
height: keyboardHeight
visible: numeric
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key { width: 43; glyph: "1"; }
Key { width: 43; glyph: "2"; }
Key { width: 43; glyph: "3"; }
Key { width: 43; glyph: "4"; }
Key { width: 43; glyph: "5"; }
Key { width: 43; glyph: "6"; }
Key { width: 43; glyph: "7"; }
Key { width: 43; glyph: "8"; }
Key { width: 43; glyph: "9"; }
Key { width: 43; glyph: "0"; }
Key { width: 43; glyph: "←"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key { width: 43; glyph: "!"; }
Key { width: 43; glyph: "@"; }
Key { width: 43; glyph: "#"; }
Key { width: 43; glyph: "$"; }
Key { width: 43; glyph: "%"; }
Key { width: 43; glyph: "^"; }
Key { width: 43; glyph: "&"; }
Key { width: 43; glyph: "*"; }
Key { width: 43; glyph: "("; }
Key { width: 43; glyph: ")"; }
Key { width: 43; glyph: "⏎"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key {
id: numericShiftKey
width: 43
glyph: "\u21E8"
toggle: true
onToggledChanged: numericShiftMode = toggled
}
Key { width: 43; glyph: numericShiftMode ? "`" : "+"; }
Key { width: 43; glyph: numericShiftMode ? "~" : "-"; }
Key { width: 43; glyph: numericShiftMode ? "\u00A3" : "="; }
Key { width: 43; glyph: numericShiftMode ? "\u20AC" : ";"; }
Key { width: 43; glyph: numericShiftMode ? "\u00A5" : ":"; }
Key { width: 43; glyph: numericShiftMode ? "<" : "'"; }
Key { width: 43; glyph: numericShiftMode ? ">" : "\""; }
Key { width: 43; glyph: numericShiftMode ? "[" : "{"; }
Key { width: 43; glyph: numericShiftMode ? "]" : "}"; }
Key { width: 43; glyph: numericShiftMode ? "\\" : "|"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key {
width: 70
glyph: "abc"
mouseArea.onClicked: keyboardBase.parent.punctuationMode = false
}
Key { width: 231; glyph: " "; }
Key { width: 43; glyph: ","; }
Key { width: 43; glyph: "."; }
Key {
fontFamily: "hifi-glyphs";
fontPixelSize: 48;
letterAnchors.topMargin: -4;
verticalAlignment: Text.AlignVCenter;
width: 86; glyph: "\ue02b";
}
}
}
}
Keyboard {
}

35
interface/resources/qml/controls-uit/Label.qml
View file

@ -1,35 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.7
import "../styles-uit"
RalewaySemiBold {
HifiConstants { id: hifi }
property int colorScheme: hifi.colorSchemes.light
size: hifi.fontSizes.inputLabel
color: {
if (colorScheme === hifi.colorSchemes.dark) {
if (enabled) {
hifi.colors.lightGrayText
} else {
hifi.colors.baseGrayHighlight
}
} else {
if (enabled) {
hifi.colors.lightGray
} else {
hifi.colors.lightGrayText
}
}
}
Label {
}

41
interface/resources/qml/controls-uit/QueuedButton.qml
View file

@ -1,41 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.5
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
QueuedButton {
}

93
interface/resources/qml/controls-uit/RadioButton.qml
View file

@ -1,93 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.5
import QtQuick.Controls 2.2 as Original
import "../styles-uit"
import "../controls-uit" as HifiControls
import TabletScriptingInterface 1.0
Original.RadioButton {
id: radioButton
HifiConstants { id: hifi }
hoverEnabled: true
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
property real letterSpacing: 1
property int fontSize: hifi.fontSizes.inputLabel
property int boxSize: defaultBoxSize
property real scaleFactor: boxSize / defaultBoxSize
readonly property int defaultBoxSize: 14
readonly property int boxRadius: 3 * scaleFactor
readonly property int checkSize: 10 * scaleFactor
readonly property int checkRadius: 2 * scaleFactor
readonly property int indicatorRadius: 7 * scaleFactor
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
indicator: Rectangle {
id: box
width: boxSize
height: boxSize
radius: indicatorRadius
x: radioButton.leftPadding
y: parent.height / 2 - height / 2
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: indicatorRadius
anchors.centerIn: parent
color: "#00B4EF"
border.width: 1
border.color: "#36CDFF"
visible: checked && !pressed || !checked && pressed
}
}
contentItem: RalewaySemiBold {
text: radioButton.text
size: radioButton.fontSize
font.letterSpacing: letterSpacing
color: isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
leftPadding: radioButton.indicator.width + radioButton.spacing
}
RadioButton {
}

39
interface/resources/qml/controls-uit/ScrollBar.qml
View file

@ -1,41 +1,4 @@
//
// ScrollBar.qml
//
// Created by Vlad Stelmahovsky on 27 Nov 2017
// 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.7
import QtQuick.Controls 2.2
import "../styles-uit"
import controlsUit 1.0
ScrollBar {
visible: size < 1.0
HifiConstants { id: hifi }
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
background: Item {
implicitWidth: hifi.dimensions.scrollbarBackgroundWidth
Rectangle {
anchors { fill: parent; topMargin: 3; bottomMargin: 3 }
radius: hifi.dimensions.scrollbarHandleWidth/2
color: isLightColorScheme ? hifi.colors.tableScrollBackgroundLight
: hifi.colors.tableScrollBackgroundDark
}
}
contentItem: Item {
implicitWidth: hifi.dimensions.scrollbarHandleWidth
Rectangle {
anchors { fill: parent; topMargin: 1; bottomMargin: 1 }
radius: hifi.dimensions.scrollbarHandleWidth/2
color: isLightColorScheme ? hifi.colors.tableScrollHandleLight : hifi.colors.tableScrollHandleDark
}
}
}

44
interface/resources/qml/controls-uit/Separator.qml
View file

@ -1,44 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.5
import "../styles-uit"
Item {
property int colorScheme: 0;
readonly property var topColor: [ hifi.colors.baseGrayShadow, hifi.colors.faintGray, "#89858C" ];
readonly property var bottomColor: [ hifi.colors.baseGrayHighlight, hifi.colors.faintGray, "#89858C" ];
// Size
height: colorScheme === 0 ? 2 : 1;
Rectangle {
// Size
width: parent.width;
height: 1;
// Anchors
anchors.left: parent.left;
anchors.bottom: parent.bottom;
// Style
color: topColor[colorScheme];
}
Rectangle {
visible: colorScheme === 0;
// Size
width: parent.width;
height: 1;
// Anchors
anchors.left: parent.left;
anchors.bottom: parent.bottom;
anchors.bottomMargin: -height;
// Style
color: bottomColor[colorScheme];
}
Separator {
}

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

@ -1,98 +1,4 @@
//
// 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.7
import QtQuick.Controls 2.2
import "../styles-uit"
import "../controls-uit" as HifiControls
import controlsUit 1.0
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)
property alias minimumValue: slider.from
property alias maximumValue: slider.to
property alias step: slider.stepSize
property bool tickmarksEnabled: false
height: hifi.fontSizes.textFieldInput + 14 // Match height of TextField control.
y: sliderLabel.visible ? sliderLabel.height + sliderLabel.anchors.bottomMargin : 0
background: Rectangle {
x: slider.leftPadding
y: slider.topPadding + slider.availableHeight / 2 - height / 2
implicitWidth: 50
implicitHeight: hifi.dimensions.sliderGrooveHeight
width: slider.availableWidth
height: implicitHeight
radius: height / 2
color: isLightColorScheme ? hifi.colors.sliderGutterLight : hifi.colors.sliderGutterDark
Rectangle {
width: slider.visualPosition * parent.width
height: parent.height
radius: height / 2
gradient: Gradient {
GradientStop { position: 0.0; color: hifi.colors.blueAccent }
GradientStop { position: 1.0; color: hifi.colors.primaryHighlight }
}
}
}
handle: Rectangle {
x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
y: slider.topPadding + slider.availableHeight / 2 - height / 2
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 != ""
}
}
}

183
interface/resources/qml/controls-uit/SpinBox.qml
View file

@ -1,185 +1,4 @@
//
// 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.7
import QtQuick.Controls 2.2
import "../styles-uit"
import "../controls-uit" as HifiControls
import controlsUit 1.0
SpinBox {
id: spinBox
HifiConstants {
id: hifi
}
inputMethodHints: Qt.ImhFormattedNumbersOnly
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme === hifi.colorSchemes.light
property string label: ""
property string suffix: ""
property string labelInside: ""
property color colorLabelInside: hifi.colors.white
property color backgroundColor: isLightColorScheme
? (spinBox.activeFocus ? hifi.colors.white : hifi.colors.lightGray)
: (spinBox.activeFocus ? hifi.colors.black : hifi.colors.baseGrayShadow)
property real controlHeight: height + (spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0)
property int decimals: 2;
property real factor: Math.pow(10, decimals)
property real minimumValue: 0.0
property real maximumValue: 0.0
property real realValue: 0.0
property real realFrom: minimumValue
property real realTo: maximumValue
property real realStepSize: 1.0
signal editingFinished()
implicitHeight: height
implicitWidth: width
editable: true
padding: 0
leftPadding: 0
rightPadding: padding + (up.indicator ? up.indicator.width : 0)
topPadding: 0
bottomPadding: 0
locale: Qt.locale("en_US")
onValueModified: realValue = value/factor
onValueChanged: realValue = value/factor
onRealValueChanged: {
var newValue = Math.round(realValue*factor);
if(value != newValue) {
value = newValue;
}
}
stepSize: realStepSize*factor
to : realTo*factor
from : realFrom*factor
font.family: "Fira Sans SemiBold"
font.pixelSize: hifi.fontSizes.textFieldInput
height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control.
y: spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0
background: Rectangle {
color: backgroundColor
border.color: spinBoxLabelInside.visible ? spinBoxLabelInside.color : hifi.colors.primaryHighlight
border.width: spinBox.activeFocus ? spinBoxLabelInside.visible ? 2 : 1 : 0
}
validator: DoubleValidator {
bottom: Math.min(spinBox.from, spinBox.to)
top: Math.max(spinBox.from, spinBox.to)
}
textFromValue: function(value, locale) {
return parseFloat(value/factor).toFixed(decimals);
}
valueFromText: function(text, locale) {
return Number.fromLocaleString(locale, text)*factor;
}
contentItem: TextInput {
z: 2
color: 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
text: spinBox.textFromValue(spinBox.value, spinBox.locale) + suffix
inputMethodHints: spinBox.inputMethodHints
validator: spinBox.validator
verticalAlignment: Qt.AlignVCenter
leftPadding: spinBoxLabelInside.visible ? 30 : hifi.dimensions.textPadding
//rightPadding: hifi.dimensions.spinnerSize
width: spinBox.width - hifi.dimensions.spinnerSize
onEditingFinished: spinBox.editingFinished()
}
up.indicator: Item {
x: spinBox.width - implicitWidth - 5
y: 1
clip: true
implicitHeight: spinBox.implicitHeight/2
implicitWidth: spinBox.implicitHeight/2
HiFiGlyphs {
anchors.centerIn: parent
text: hifi.glyphs.caratUp
size: hifi.dimensions.spinnerSize
color: spinBox.up.pressed || spinBox.up.hovered ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
}
}
up.onPressedChanged: {
if(value) {
spinBox.forceActiveFocus();
}
}
down.indicator: Item {
x: spinBox.width - implicitWidth - 5
y: spinBox.implicitHeight/2
clip: true
implicitHeight: spinBox.implicitHeight/2
implicitWidth: spinBox.implicitHeight/2
HiFiGlyphs {
anchors.centerIn: parent
text: hifi.glyphs.caratDn
size: hifi.dimensions.spinnerSize
color: spinBox.down.pressed || spinBox.down.hovered ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
}
}
down.onPressedChanged: {
if(value) {
spinBox.forceActiveFocus();
}
}
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
acceptedButtons: Qt.NoButton
onWheel: {
if (wheel.angleDelta.y > 0)
value += stepSize
else
value -= stepSize
}
}
}

160
interface/resources/qml/controls-uit/Switch.qml
View file

@ -1,160 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.7
import QtQuick.Controls 2.2 as Original
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;
focusPolicy: Qt.ClickFocus
anchors.top: rootSwitch.top;
anchors.left: rootSwitch.left;
anchors.leftMargin: rootSwitch.width/2 - rootSwitch.switchWidth/2;
onCheckedChanged: rootSwitch.onCheckedChanged();
onClicked: rootSwitch.clicked();
hoverEnabled: true
topPadding: 3;
leftPadding: 3;
rightPadding: 3;
bottomPadding: 3;
onHoveredChanged: {
if (hovered) {
switchHandle.color = hifi.colors.blueHighlight;
} else {
switchHandle.color = hifi.colors.lightGray;
}
}
background: Rectangle {
color: "#252525";
implicitWidth: rootSwitch.switchWidth;
implicitHeight: rootSwitch.height;
radius: rootSwitch.switchRadius;
}
indicator: Rectangle {
id: switchHandle;
implicitWidth: rootSwitch.height - originalSwitch.topPadding - originalSwitch.bottomPadding;
implicitHeight: implicitWidth;
radius: implicitWidth/2;
border.color: hifi.colors.lightGrayText;
color: hifi.colors.lightGray;
//x: originalSwitch.leftPadding
x: Math.max(0, Math.min(parent.width - width, originalSwitch.visualPosition * parent.width - (width / 2)))
y: parent.height / 2 - height / 2
Behavior on x {
enabled: !originalSwitch.down
SmoothedAnimation { velocity: 200 }
}
}
}
// 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;
}
}
}
Switch {
}

165
interface/resources/qml/controls-uit/Table.qml
View file

@ -1,165 +1,4 @@
//
// 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 controlsUit 1.0
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.3 as QQC2
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
readonly property real headerSpacing: 3 //spacing between sort indicator and table header title
property var titlePaintedPos: [] // storing extra data position behind painted
// title text and sort indicatorin table's header
signal titlePaintedPosSignal(int column) //signal that extradata position gets changed
model: ListModel { }
Component.onCompleted: {
if (flickableItem !== null && flickableItem !== undefined) {
tableView.flickableItem.QQC2.ScrollBar.vertical = scrollbar
}
}
QQC2.ScrollBar {
id: scrollbar
parent: tableView.flickableItem
policy: QQC2.ScrollBar.AsNeeded
orientation: Qt.Vertical
visible: size < 1.0
topPadding: tableView.headerVisible ? hifi.dimensions.tableHeaderHeight + 1 : 1
anchors.top: tableView.top
anchors.left: tableView.right
anchors.bottom: tableView.bottom
background: Item {
implicitWidth: hifi.dimensions.scrollbarBackgroundWidth
Rectangle {
anchors {
fill: parent;
topMargin: tableView.headerVisible ? hifi.dimensions.tableHeaderHeight : 0
}
color: isLightColorScheme ? hifi.colors.tableScrollBackgroundLight
: hifi.colors.tableScrollBackgroundDark
}
}
contentItem: Item {
implicitWidth: hifi.dimensions.scrollbarHandleWidth
Rectangle {
anchors.fill: parent
radius: (width - 4)/2
color: isLightColorScheme ? hifi.colors.tableScrollHandleLight : hifi.colors.tableScrollHandleDark
}
}
}
headerVisible: false
headerDelegate: Rectangle {
height: hifi.dimensions.tableHeaderHeight
color: isLightColorScheme ? hifi.colors.tableBackgroundLight : hifi.colors.tableBackgroundDark
RalewayRegular {
id: titleText
x: centerHeaderText ? (parent.width - paintedWidth -
((sortIndicatorVisible &&
sortIndicatorColumn === styleData.column) ?
(titleSort.paintedWidth / 5 + tableView.headerSpacing) : 0)) / 2 :
hifi.dimensions.tablePadding
text: styleData.value
size: hifi.fontSizes.tableHeading
font.capitalization: Font.AllUppercase
color: hifi.colors.baseGrayHighlight
horizontalAlignment: (centerHeaderText ? Text.AlignHCenter : Text.AlignLeft)
anchors.verticalCenter: parent.verticalCenter
}
//actual image of sort indicator in glyph font only 20% of real font size
//i.e. if the charachter size set to 60 pixels, actual image is 12 pixels
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.verticalCenter: titleText.verticalCenter
anchors.left: titleText.right
anchors.leftMargin: -(hifi.fontSizes.tableHeadingIcon / 2.5) + tableView.headerSpacing
visible: sortIndicatorVisible && sortIndicatorColumn === styleData.column
onXChanged: {
titlePaintedPos[styleData.column] = titleText.x + titleText.paintedWidth +
paintedWidth / 5 + tableView.headerSpacing*2
titlePaintedPosSignal(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.ScrollBarAlwaysOff
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
}
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)
}
Table {
}

138
interface/resources/qml/controls-uit/TabletContentSection.qml
View file

@ -1,138 +1,4 @@
//
// ContentSection.qml
//
// Created by Dante Ruiz on 13 Feb 2017
// 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 controlsUit 1.0
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: 480
height: 1
color: hifi.colors.baseGrayShadow
x: -hifi.dimensions.contentMargin.x
}
Rectangle {
width: 480
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: false
width: 480
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
}
}
TabletContentSection {
}

34
interface/resources/qml/controls-uit/TabletHeader.qml
View file

@ -1,34 +1,4 @@
//
// TabletHeader.qml
//
// Created by David Rowe on 11 Mar 2017.
// Copyright 2017 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 controlsUit 1.0
import QtQuick 2.5
import "../styles-uit"
Rectangle {
property string title: ""
HifiConstants { id: hifi }
height: hifi.dimensions.tabletMenuHeader
z: 100
color: hifi.colors.darkGray
RalewayBold {
text: title
size: 26
color: hifi.colors.white
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: hifi.dimensions.contentMargin.x
}
TabletHeader {
}

65
interface/resources/qml/controls-uit/TextAction.qml
View file

@ -1,65 +1,4 @@
//
// TextField.qml
//
// Created by David Rowe on 21 Apr 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 controlsUit 1.0
import QtQuick 2.5
import "../styles-uit"
import "../controls-uit" as HifiControls
Item {
property string icon: ""
property int iconSize: 30
property string text: ""
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
signal clicked()
height: Math.max(glyph.visible ? glyph.height - 4 : 0, string.visible ? string.height : 0)
width: glyph.width + string.anchors.leftMargin + string.width
HiFiGlyphs {
id: glyph
anchors.left: parent.left
anchors.top: parent.top
anchors.topMargin: -2
text: parent.icon
size: parent.iconSize
color: isLightColorScheme
? (mouseArea.containsMouse ? hifi.colors.baseGrayHighlight : hifi.colors.lightGray)
: (mouseArea.containsMouse ? hifi.colors.faintGray : hifi.colors.lightGrayText)
visible: text !== ""
width: visible ? implicitWidth : 0
}
RalewaySemiBold {
id: string
anchors {
left: glyph.visible ? glyph.right : parent.left
leftMargin: visible && glyph.visible ? hifi.dimensions.contentSpacing.x : 0
verticalCenter: glyph.visible ? glyph.verticalCenter : undefined
}
text: parent.text
size: hifi.fontSizes.inputLabel
color: isLightColorScheme
? (mouseArea.containsMouse ? hifi.colors.baseGrayHighlight : hifi.colors.lightGray)
: (mouseArea.containsMouse ? hifi.colors.faintGray : hifi.colors.lightGrayText)
font.underline: true;
visible: text !== ""
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: parent.clicked()
}
TextAction {
}

21
interface/resources/qml/controls-uit/TextEdit.qml
View file

@ -1,23 +1,4 @@
//
// TextEdit.qml
//
// Created by Bradley Austin Davis on 24 Apr 2015
// Copyright 2015 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"
import controlsUit 1.0
TextEdit {
property real size: 32
font.family: "Raleway"
font.weight: Font.DemiBold
font.pointSize: size
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
}

178
interface/resources/qml/controls-uit/TextField.qml
View file

@ -1,180 +1,4 @@
//
// TextField.qml
//
// Created by David Rowe on 17 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
import controlsUit 1.0
TextField {
id: textField
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
readonly property bool isFaintGrayColorScheme: colorScheme == hifi.colorSchemes.faintGray
property bool isSearchField: false
property string label: ""
property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height + 1 : 0)
property bool hasDefocusedBorder: true;
property bool hasRoundedBorder: false
property int roundedBorderRadius: 4
property bool error: false;
property bool hasClearButton: false;
property string leftPermanentGlyph: "";
property string centerPlaceholderGlyph: "";
placeholderText: textField.placeholderText
font.family: "Fira Sans"
font.pixelSize: hifi.fontSizes.textFieldInput
height: implicitHeight + 3 // Make surrounding box higher so that highlight is vertically centered.
property alias textFieldLabel: textFieldLabel
y: textFieldLabel.visible ? textFieldLabel.height + textFieldLabel.anchors.bottomMargin : 0
// workaround for https://bugreports.qt.io/browse/QTBUG-49297
Keys.onPressed: {
switch (event.key) {
case Qt.Key_Return:
case Qt.Key_Enter:
event.accepted = true;
// emit accepted signal manually
if (acceptableInput) {
accepted();
}
}
}
style: TextFieldStyle {
id: style;
textColor: {
if (isLightColorScheme) {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.lightGray
}
} else if (isFaintGrayColorScheme) {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.lightGray
}
} else {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.lightGrayText
}
}
}
background: Rectangle {
color: {
if (isLightColorScheme) {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.textFieldLightBackground
}
} else if (isFaintGrayColorScheme) {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.faintGray50
}
} else {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.baseGrayShadow
}
}
}
border.color: textField.error ? hifi.colors.redHighlight :
(textField.activeFocus ? hifi.colors.primaryHighlight : (hasDefocusedBorder ? (isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray) : color))
border.width: textField.activeFocus || hasRoundedBorder || textField.error ? 1 : 0
radius: isSearchField ? textField.height / 2 : (hasRoundedBorder ? roundedBorderRadius : 0)
HiFiGlyphs {
text: textField.leftPermanentGlyph;
color: textColor;
size: hifi.fontSizes.textFieldSearchIcon;
anchors.left: parent.left;
anchors.verticalCenter: parent.verticalCenter;
anchors.leftMargin: hifi.dimensions.textPadding - 2;
visible: text;
}
HiFiGlyphs {
text: textField.centerPlaceholderGlyph;
color: textColor;
size: parent.height;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter;
visible: text && !textField.focus && textField.text === "";
}
HiFiGlyphs {
text: hifi.glyphs.search
color: textColor
size: hifi.fontSizes.textFieldSearchIcon
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: hifi.dimensions.textPadding - 2
visible: isSearchField
}
HiFiGlyphs {
text: hifi.glyphs.error
color: textColor
size: 40
anchors.right: parent.right
anchors.rightMargin: hifi.dimensions.textPadding - 2
anchors.verticalCenter: parent.verticalCenter
visible: hasClearButton && textField.text !== "";
MouseArea {
anchors.fill: parent;
onClicked: {
textField.text = "";
}
}
}
}
placeholderTextColor: isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray
selectedTextColor: hifi.colors.black
selectionColor: hifi.colors.primaryHighlight
padding.left: hasRoundedBorder ? textField.height / 2 : ((isSearchField || textField.leftPermanentGlyph !== "") ? textField.height - 2 : 0) + hifi.dimensions.textPadding
padding.right: (hasClearButton ? textField.height - 2 : 0) + hifi.dimensions.textPadding
}
HifiControls.Label {
id: textFieldLabel
text: textField.label
colorScheme: textField.colorScheme
anchors.left: parent.left
Binding on anchors.right {
when: textField.right
value: textField.right
}
Binding on wrapMode {
when: textField.right
value: Text.WordWrap
}
anchors.bottom: parent.top
anchors.bottomMargin: 3
visible: label != ""
}
}

53
interface/resources/qml/controls-uit/ToolTip.qml
View file

@ -1,51 +1,4 @@
//
// ToolTip.qml
//
// Created by Clement on 9/12/17
// 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 controlsUit 1.0
import QtQuick 2.5
Item {
property string toolTip
property bool showToolTip: false
Rectangle {
id: toolTipRectangle
anchors.right: parent.right
width: toolTipText.width + 4
height: toolTipText.height + 4
opacity: (toolTip != "" && showToolTip) ? 1 : 0
color: "#ffffaa"
border.color: "#0a0a0a"
Text {
id: toolTipText
text: toolTip
color: "black"
anchors.centerIn: parent
}
Behavior on opacity {
PropertyAnimation {
easing.type: Easing.InOutQuad
duration: 250
}
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
onEntered: showTimer.start()
onExited: { showToolTip = false; showTimer.stop(); }
hoverEnabled: true
}
Timer {
id: showTimer
interval: 250
onTriggered: { showToolTip = true; }
}
}
ToolTip {
}

205
interface/resources/qml/controls-uit/Tree.qml
View file

@ -1,205 +1,4 @@
//
// Tree.qml
//
// Created by David Rowe on 17 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 controlsUit 1.0
import QtQml.Models 2.2
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.2 as QQC2
import "../styles-uit"
TreeView {
id: treeView
property var treeModel: ListModel { }
property bool centerHeaderText: false
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
property var modifyEl: function(index, data) { return false; }
model: treeModel
selection: ItemSelectionModel {
id: selectionModel
model: treeModel
}
anchors { left: parent.left; right: parent.right }
headerVisible: false
Component.onCompleted: {
if (flickableItem !== null && flickableItem !== undefined) {
treeView.flickableItem.QQC2.ScrollBar.vertical = scrollbar
}
}
QQC2.ScrollBar {
id: scrollbar
parent: treeView.flickableItem
policy: QQC2.ScrollBar.AsNeeded
orientation: Qt.Vertical
visible: size < 1.0
topPadding: treeView.headerVisible ? hifi.dimensions.tableHeaderHeight + 1 : 1
anchors.top: treeView.top
anchors.left: treeView.right
anchors.bottom: treeView.bottom
background: Item {
implicitWidth: hifi.dimensions.scrollbarBackgroundWidth
Rectangle {
anchors {
fill: parent;
topMargin: treeView.headerVisible ? hifi.dimensions.tableHeaderHeight: 0
}
color: isLightColorScheme ? hifi.colors.tableScrollBackgroundLight
: hifi.colors.tableScrollBackgroundDark
}
}
contentItem: Item {
implicitWidth: hifi.dimensions.scrollbarHandleWidth
Rectangle {
anchors.fill: parent
radius: (width - 4)/2
color: isLightColorScheme ? hifi.colors.tableScrollHandleLight : hifi.colors.tableScrollHandleDark
}
}
}
// Use rectangle to draw border with rounded corners.
frameVisible: false
Rectangle {
color: "#00000000"
anchors.fill: parent
radius: hifi.dimensions.borderRadius
border.color: isLightColorScheme ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight
border.width: 2
anchors.margins: -2
}
anchors.margins: 2 // Shrink TreeView to lie within border.
backgroundVisible: true
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
style: TreeViewStyle {
// Needed in order for rows to keep displaying rows after end of table entries.
backgroundColor: parent.isLightColorScheme ? hifi.colors.tableRowLightEven : hifi.colors.tableRowDarkEven
alternateBackgroundColor: parent.isLightColorScheme ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
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)
elide: Text.ElideRight
anchors {
left: parent.left
leftMargin: hifi.dimensions.tablePadding
right: sortIndicatorVisible && sortIndicatorColumn === styleData.column ? titleSort.left : parent.right
rightMargin: hifi.dimensions.tablePadding
verticalCenter: parent.verticalCenter
}
}
HiFiGlyphs {
id: titleSort
text: sortIndicatorOrder == Qt.AscendingOrder ? hifi.glyphs.caratUp : hifi.glyphs.caratDn
color: isLightColorScheme ? hifi.colors.darkGray : hifi.colors.baseGrayHighlight
opacity: 0.6;
size: hifi.fontSizes.tableHeadingIcon
anchors {
right: parent.right
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
}
}
branchDelegate: HiFiGlyphs {
text: styleData.isExpanded ? hifi.glyphs.caratDn : hifi.glyphs.caratR
size: hifi.fontSizes.carat
color: colorScheme == hifi.colorSchemes.light
? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
: (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
anchors {
left: parent ? parent.left : undefined
leftMargin: hifi.dimensions.tablePadding / 2
}
}
}
rowDelegate: Rectangle {
height: hifi.dimensions.tableRowHeight
color: styleData.selected
? hifi.colors.primaryHighlight
: treeView.isLightColorScheme
? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd)
: (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd)
}
itemDelegate: FiraSansSemiBold {
anchors {
left: parent ? parent.left : undefined
leftMargin: (2 + styleData.depth) * hifi.dimensions.tablePadding
right: parent ? parent.right : undefined
rightMargin: hifi.dimensions.tablePadding
verticalCenter: parent ? parent.verticalCenter : undefined
}
text: styleData.value
size: hifi.fontSizes.tableText
color: colorScheme == hifi.colorSchemes.light
? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
: (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
elide: Text.ElideRight
}
Item {
id: unfocusHelper
visible: false
}
onDoubleClicked: isExpanded(index) ? collapse(index) : expand(index)
Tree {
}

21
interface/resources/qml/controls-uit/VerticalSpacer.qml
View file

@ -1,21 +1,4 @@
//
// 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 controlsUit 1.0
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
VerticalSpacer {
}

40
interface/resources/qml/controls-uit/WebGlyphButton.qml
View file

@ -1,40 +1,4 @@
//
// GlyphButton.qml
//
// Created by Vlad Stelmahovsky on 2017-06-21
// 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 controlsUit 1.0
import QtQuick 2.5
import QtQuick.Controls 2.2 as Original
import "../styles-uit"
Original.Button {
id: control
property int colorScheme: hifi.colorSchemes.light
property string glyph: ""
property int size: 32
//colors
readonly property color normalColor: "#AFAFAF"
readonly property color hoverColor: "#00B4EF"
readonly property color clickedColor: "#FFFFFF"
readonly property color disabledColor: "#575757"
background: Item {}
contentItem: HiFiGlyphs {
color: control.enabled ? (control.pressed ? control.clickedColor :
(control.hovered ? control.hoverColor : control.normalColor)) :
control.disabledColor
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: control.glyph
size: control.size
}
WebGlyphButton {
}

24
interface/resources/qml/controls-uit/WebSpinner.qml
View file

@ -1,24 +1,4 @@
//
// WebSpinner.qml
//
// Created by David Rowe on 23 May 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 controlsUit 1.0
import QtQuick 2.5
import QtWebEngine 1.5
AnimatedImage {
property WebEngineView webview: parent
source: "../../icons/loader-snake-64-w.gif"
visible: webview.loading && /^(http.*|)$/i.test(webview.url.toString())
playing: visible
z: 10000
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
WebSpinner {
}

21
interface/resources/qml/controls-uit/WebView.qml
View file

@ -1,21 +1,4 @@
//
// WebView.qml
//
// Created by Bradley Austin Davis on 12 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 controlsUit 1.0
import QtQuick 2.5
import "."
BaseWebView {
onNewViewRequested: {
// Load dialog via OffscreenUi so that JavaScript EventBridge is available.
var browser = OffscreenUi.load("Browser.qml");
request.openIn(browser.webView);
browser.webView.forceActiveFocus();
}
WebView {
}

1
interface/resources/qml/controls-uit/readme.txt Normal file
View file

@ -0,0 +1 @@
this folder exists purely for compatibility reasons and might be deleted in future! please consider using 'import controlsUit 1.0' instead of including this folder

1
interface/resources/qml/controls/Button.qml
View file

@ -3,7 +3,6 @@ import QtQuick.Controls 2.2 as Original
import "."
import "../styles"
import "../controls-uit"
Original.Button {
id: control

2
interface/resources/qml/controls/FlickableWebViewCore.qml
View file

@ -4,7 +4,7 @@ import QtWebChannel 1.0
import QtQuick.Controls 2.2
import "../styles-uit" as StylesUIt
import stylesUit 1.0 as StylesUIt
Item {
id: flick

2
interface/resources/qml/controls/TabletWebButton.qml
View file

@ -10,7 +10,7 @@
import Hifi 1.0
import QtQuick 2.4
import "../styles-uit"
import stylesUit 1.0
Rectangle {
property alias text: label.text

2
interface/resources/qml/controls/TabletWebScreen.qml
View file

@ -1,5 +1,5 @@
import QtQuick 2.7
import "../controls-uit" as HiFiControls
import controlsUit 1.0 as HiFiControls
Item {
id: root

4
interface/resources/qml/controls/TabletWebView.qml
View file

@ -1,8 +1,8 @@
import QtQuick 2.7
import QtWebEngine 1.5
import "../controls-uit" as HiFiControls
import controlsUit 1.0 as HiFiControls
import "../styles" as HifiStyles
import "../styles-uit"
import stylesUit 1.0
Item {
id: root

2
interface/resources/qml/controls/WebView.qml
View file

@ -1,5 +1,5 @@
import QtQuick 2.7
import "../controls-uit" as HiFiControls
import controlsUit 1.0 as HiFiControls
Item {
width: parent !== null ? parent.width : undefined

6
interface/resources/qml/controls-uit/+android/ImageButton.qml → interface/resources/qml/controlsUit/+android/ImageButton.qml
View file

@ -1,6 +1,6 @@
//
// ImageButton.qml
// interface/resources/qml/controls-uit
// interface/resources/qml/controlsUit
//
// Created by Gabriel Calero & Cristian Duarte on 12 Oct 2017
// Copyright 2017 High Fidelity, Inc.
@ -11,7 +11,7 @@
import QtQuick 2.5
import QtQuick.Layouts 1.3
import "../styles-uit" as HifiStyles
import "../stylesUit" as HifiStyles
Item {
id: button
@ -79,4 +79,4 @@ Item {
}
}
]
}
}

170
interface/resources/qml/controlsUit/AttachmentsTable.qml Normal file
View file

@ -0,0 +1,170 @@
//
// AttachmentsTable.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 QtQuick.XmlListModel 2.0
import "../stylesUit"
import "." as HifiControls
import "../windows"
import "../hifi/models"
TableView {
id: tableView
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
model: S3Model{}
Rectangle {
anchors.fill: parent
visible: tableView.model.status !== XmlListModel.Ready
color: hifi.colors.darkGray0
BusyIndicator {
anchors.centerIn: parent
width: 48; height: 48
running: true
}
}
headerDelegate: Rectangle {
height: hifi.dimensions.tableHeaderHeight
color: hifi.colors.darkGray
border.width: 0.5
border.color: hifi.colors.baseGrayHighlight
RalewayRegular {
id: textHeader
size: hifi.fontSizes.tableHeading
color: hifi.colors.lightGrayText
text: styleData.value
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
}
}
// Use rectangle to draw border with rounded corners.
Rectangle {
color: "#00000000"
anchors { fill: parent; margins: -2 }
radius: hifi.dimensions.borderRadius
border.color: hifi.colors.baseGrayHighlight
border.width: 3
}
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: parent.isLightColorScheme ? hifi.colors.tableRowLightEven : hifi.colors.tableRowDarkEven
alternateBackgroundColor: parent.isLightColorScheme ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
handle: Item {
id: scrollbarHandle
implicitWidth: 6
Rectangle {
anchors {
fill: parent
leftMargin: 2 // Move it right
rightMargin: -2 // ""
topMargin: 3 // Shrink vertically
bottomMargin: 3 // ""
}
radius: 3
color: hifi.colors.tableScrollHandleDark
}
}
scrollBarBackground: Item {
implicitWidth: 10
Rectangle {
anchors {
fill: parent
margins: -1 // Expand
}
color: hifi.colors.baseGrayHighlight
}
Rectangle {
anchors {
fill: parent
margins: 1 // Shrink
}
radius: 4
color: hifi.colors.tableScrollBackgroundDark
}
}
incrementControl: Item {
visible: false
}
decrementControl: Item {
visible: false
}
}
rowDelegate: Rectangle {
height: 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)
}
itemDelegate: Item {
anchors {
left: parent ? parent.left : undefined
leftMargin: hifi.dimensions.tablePadding
right: parent ? parent.right : undefined
rightMargin: hifi.dimensions.tablePadding
}
FiraSansSemiBold {
id: textItem
text: styleData.value
size: hifi.fontSizes.tableText
color: colorScheme == hifi.colorSchemes.light
? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
: (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
}
}
TableViewColumn {
role: "name"
title: "NAME"
width: parent.width *0.3
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "size"
title: "SIZE"
width: parent.width *0.2
horizontalAlignment: Text.AlignHCenter
}
TableViewColumn {
role: "modified"
title: "LAST MODIFIED"
width: parent.width *0.5
horizontalAlignment: Text.AlignHCenter
}
}

38
interface/resources/qml/controlsUit/BaseWebView.qml Normal file
View file

@ -0,0 +1,38 @@
//
// WebView.qml
//
// Created by Bradley Austin Davis on 12 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.7
import QtWebEngine 1.5
WebEngineView {
id: root
Component.onCompleted: {
console.log("Connecting JS messaging to Hifi Logging")
// Ensure the JS from the web-engine makes it to our logging
root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
console.log("Web Window JS message: " + sourceID + " " + lineNumber + " " + message);
});
}
onLoadingChanged: {
// Required to support clicking on "hifi://" links
if (WebEngineView.LoadStartedStatus == loadRequest.status) {
var url = loadRequest.url.toString();
if (urlHandler.canHandleUrl(url)) {
if (urlHandler.handleUrl(url)) {
root.stop();
}
}
}
}
WebSpinner { }
}

122
interface/resources/qml/controlsUit/Button.qml Normal file
View file

@ -0,0 +1,122 @@
//
// 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.7
import QtQuick.Controls 2.3 as Original
import TabletScriptingInterface 1.0
import "../stylesUit"
Original.Button {
id: control;
property int color: 0
property int colorScheme: hifi.colorSchemes.light
property int fontSize: hifi.fontSizes.buttonLabel
property int radius: hifi.buttons.radius
property alias implicitTextWidth: buttonText.implicitWidth
property string buttonGlyph: "";
property int fontCapitalization: Font.AllUppercase
width: hifi.dimensions.buttonWidth
height: hifi.dimensions.controlLineHeight
HifiConstants { id: hifi }
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onFocusChanged: {
if (focus) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
background: Rectangle {
radius: control.radius
border.width: (control.color === hifi.buttons.none ||
(control.color === hifi.buttons.noneBorderless && control.hovered) ||
(control.color === hifi.buttons.noneBorderlessWhite && control.hovered) ||
(control.color === hifi.buttons.noneBorderlessGray && control.hovered)) ? 1 : 0;
border.color: control.color === hifi.buttons.noneBorderless ? hifi.colors.blueHighlight :
(control.color === hifi.buttons.noneBorderlessGray ? hifi.colors.baseGray : hifi.colors.white);
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]
}
}
}
}
}
contentItem: Item {
HiFiGlyphs {
id: buttonGlyph;
visible: control.buttonGlyph !== "";
text: control.buttonGlyph === "" ? hifi.glyphs.question : control.buttonGlyph;
// Size
size: 34;
// Anchors
anchors.right: buttonText.left;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
// Style
color: enabled ? hifi.buttons.textColor[control.color]
: hifi.buttons.disabledTextColor[control.colorScheme];
// Alignment
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
}
RalewayBold {
id: buttonText;
anchors.centerIn: parent;
font.capitalization: control.fontCapitalization
color: enabled ? hifi.buttons.textColor[control.color]
: hifi.buttons.disabledTextColor[control.colorScheme]
size: control.fontSize
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: control.text
}
}
}

121
interface/resources/qml/controlsUit/CheckBox.qml Normal file
View file

@ -0,0 +1,121 @@
//
// 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.2
import QtQuick.Controls 2.2 as Original
import "../stylesUit"
import TabletScriptingInterface 1.0
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
property string labelFontFamily: "Raleway"
property int labelFontSize: 14;
property int labelFontWeight: Font.DemiBold;
focusPolicy: Qt.ClickFocus
hoverEnabled: true
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
indicator: Rectangle {
id: box
implicitWidth: boxSize
implicitHeight: boxSize
radius: boxRadius
y: parent.height / 2 - height / 2
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
}
}
contentItem: Label {
text: checkBox.text
color: checkBox.color
font.family: checkBox.labelFontFamily;
font.pixelSize: checkBox.labelFontSize;
font.weight: checkBox.labelFontWeight;
x: 2
verticalAlignment: Text.AlignVCenter
wrapMode: checkBox.wrap ? Text.Wrap : Text.NoWrap
elide: checkBox.wrap ? Text.ElideNone : Text.ElideRight
enabled: checkBox.enabled
leftPadding: checkBox.indicator.width + checkBox.spacing
}
}

125
interface/resources/qml/controlsUit/CheckBoxQQC2.qml Normal file
View file

@ -0,0 +1,125 @@
//
// CheckBox2.qml
//
// Created by Vlad Stelmahovsky on 10 Aug 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.7
import QtQuick.Controls 2.2
import "../stylesUit"
import "." as HiFiControls
import TabletScriptingInterface 1.0
CheckBox {
id: checkBox
HifiConstants { id: hifi; }
padding: 0
leftPadding: 0
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 bool isRound: false
property int boxSize: 14
property int boxRadius: isRound ? boxSize : 3
property bool wrap: true;
readonly property int checkSize: Math.max(boxSize - 8, 10)
readonly property int checkRadius: isRound ? checkSize / 2 : 2
focusPolicy: Qt.ClickFocus
hoverEnabled: true
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
indicator: Rectangle {
id: box
implicitWidth: boxSize
implicitHeight: boxSize
radius: boxRadius
x: checkBox.leftPadding
y: parent.height / 2 - height / 2
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
}
}
contentItem: Text {
id: root
font.pixelSize: hifi.fontSizes.inputLabel
font.family: "Raleway"
font.weight: Font.DemiBold
text: checkBox.text
color: checkBox.color
x: 2
wrapMode: checkBox.wrap ? Text.Wrap : Text.NoWrap
elide: checkBox.wrap ? Text.ElideNone : Text.ElideRight
enabled: checkBox.enabled
verticalAlignment: Text.AlignVCenter
leftPadding: checkBox.indicator.width + checkBox.spacing
}
}

191
interface/resources/qml/controlsUit/ComboBox.qml Normal file
View file

@ -0,0 +1,191 @@
//
// 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.7
import QtQuick.Controls 2.2
import "../stylesUit"
import "." 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 currentHighLightedIndex: 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
ComboBox {
id: comboBox
anchors.fill: parent
hoverEnabled: true
visible: true
height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control.
function previousItem() { root.currentHighLightedIndex = (root.currentHighLightedIndex + comboBox.count - 1) % comboBox.count; }
function nextItem() { root.currentHighLightedIndex = (root.currentHighLightedIndex + comboBox.count + 1) % comboBox.count; }
function selectCurrentItem() { root.currentIndex = root.currentHighLightedIndex; close(); /*hideList();*/ }
function selectSpecificItem(index) { root.currentIndex = index; close();/*hideList();*/ }
Keys.onUpPressed: previousItem();
Keys.onDownPressed: nextItem();
Keys.onSpacePressed: selectCurrentItem();
Keys.onRightPressed: selectCurrentItem();
Keys.onReturnPressed: selectCurrentItem();
background: Rectangle {
gradient: Gradient {
GradientStop {
position: 0.2
color: comboBox.popup.visible
? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark)
: (isLightColorScheme ? hifi.colors.dropDownLightStart : hifi.colors.dropDownDarkStart)
}
GradientStop {
position: 1.0
color: comboBox.popup.visible
? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark)
: (isLightColorScheme ? hifi.colors.dropDownLightFinish : hifi.colors.dropDownDarkFinish)
}
}
}
indicator: Item {
id: dropIcon
anchors { right: parent.right; verticalCenter: parent.verticalCenter }
height: root.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: comboBox.hovered || comboBox.popup.visible ? hifi.colors.baseGray : (isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText)
}
}
contentItem: FiraSansSemiBold {
id: textField
anchors {
left: parent.left
leftMargin: hifi.dimensions.textPadding
verticalCenter: parent.verticalCenter
}
size: hifi.fontSizes.textFieldInput
text: comboBox.displayText ? comboBox.displayText : comboBox.currentText
elide: Text.ElideRight
color: comboBox.hovered || comboBox.popup.visible ? hifi.colors.baseGray : (isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText )
}
delegate: ItemDelegate {
id: itemDelegate
hoverEnabled: true
width: root.width + 4
height: popupText.implicitHeight * 1.4
highlighted: root.currentHighLightedIndex == index
onHoveredChanged: {
if (hovered) {
root.currentHighLightedIndex = index
}
}
background: Rectangle {
color: itemDelegate.highlighted ? hifi.colors.primaryHighlight
: (isLightColorScheme ? hifi.colors.dropDownPressedLight
: hifi.colors.dropDownPressedDark)
}
contentItem: FiraSansSemiBold {
id: popupText
anchors.left: parent.left
anchors.leftMargin: hifi.dimensions.textPadding
anchors.verticalCenter: parent.verticalCenter
text: comboBox.model[index] ? comboBox.model[index]
: (comboBox.model.get && comboBox.model.get(index).text ?
comboBox.model.get(index).text : "")
size: hifi.fontSizes.textFieldInput
color: hifi.colors.baseGray
}
}
popup: Popup {
y: comboBox.height - 1
width: comboBox.width
implicitHeight: listView.contentHeight > dropdownHeight ? dropdownHeight
: listView.contentHeight
padding: 0
topPadding: 1
onClosed: {
root.accepted()
}
contentItem: ListView {
id: listView
clip: true
model: comboBox.popup.visible ? comboBox.delegateModel : null
currentIndex: root.currentHighLightedIndex
delegate: comboBox.delegate
ScrollBar.vertical: HifiControls.ScrollBar {
id: scrollbar
parent: listView
policy: ScrollBar.AsNeeded
visible: size < 1.0
}
}
background: Rectangle {
color: hifi.colors.baseGray
}
}
}
function textAt(index) {
return comboBox.textAt(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");
}
}

138
interface/resources/qml/controlsUit/ContentSection.qml Normal file
View 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 "../stylesUit"
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
}
}
}

333
interface/resources/qml/controlsUit/FilterBar.qml Normal file
View file

@ -0,0 +1,333 @@
//
// FilterBar.qml
//
// Created by Zach Fox on 17 Feb 2018-03-12
// Copyright 2018 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.9
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import "../stylesUit"
import "." as HifiControls
Item {
id: root;
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
readonly property bool isFaintGrayColorScheme: colorScheme == hifi.colorSchemes.faintGray
property bool error: false;
property alias textFieldHeight: textField.height;
property string placeholderText;
property alias dropdownHeight: dropdownContainer.height;
property alias text: textField.text;
property alias primaryFilterChoices: filterBarModel;
property int primaryFilter_index: -1;
property string primaryFilter_filterName: "";
property string primaryFilter_displayName: "";
signal accepted;
onPrimaryFilter_indexChanged: {
if (primaryFilter_index === -1) {
primaryFilter_filterName = "";
primaryFilter_displayName = "";
} else {
primaryFilter_filterName = filterBarModel.get(primaryFilter_index).filterName;
primaryFilter_displayName = filterBarModel.get(primaryFilter_index).displayName;
}
}
TextField {
id: textField;
anchors.top: parent.top;
anchors.right: parent.right;
anchors.left: parent.left;
font.family: "Fira Sans"
font.pixelSize: hifi.fontSizes.textFieldInput;
placeholderText: root.primaryFilter_index === -1 ? root.placeholderText : "";
TextMetrics {
id: primaryFilterTextMetrics;
font.family: "FiraSans Regular";
font.pixelSize: hifi.fontSizes.textFieldInput;
font.capitalization: Font.AllUppercase;
text: root.primaryFilter_displayName;
}
// workaround for https://bugreports.qt.io/browse/QTBUG-49297
Keys.onPressed: {
switch (event.key) {
case Qt.Key_Return:
case Qt.Key_Enter:
event.accepted = true;
// emit accepted signal manually
if (acceptableInput) {
root.accepted();
root.forceActiveFocus();
}
break;
case Qt.Key_Backspace:
if (textField.text === "") {
primaryFilter_index = -1;
}
break;
}
}
onAccepted: {
root.forceActiveFocus();
}
onActiveFocusChanged: {
if (!activeFocus) {
dropdownContainer.visible = false;
}
}
color: {
if (isLightColorScheme) {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.lightGray
}
} else if (isFaintGrayColorScheme) {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.lightGray
}
} else {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.lightGrayText
}
}
}
background: Rectangle {
id: mainFilterBarRectangle;
color: {
if (isLightColorScheme) {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.textFieldLightBackground
}
} else if (isFaintGrayColorScheme) {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.faintGray50
}
} else {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.baseGrayShadow
}
}
}
border.color: textField.error ? hifi.colors.redHighlight :
(textField.activeFocus ? hifi.colors.primaryHighlight : (isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray))
border.width: 1
radius: 4
Item {
id: searchButtonContainer;
anchors.left: parent.left;
anchors.verticalCenter: parent.verticalCenter;
height: parent.height;
width: 42;
// Search icon
HiFiGlyphs {
id: searchIcon;
text: hifi.glyphs.search
color: textField.color
size: 40;
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: paintedWidth;
}
// Carat
HiFiGlyphs {
text: hifi.glyphs.caratDn;
color: textField.color;
size: 40;
anchors.left: parent.left;
anchors.leftMargin: 15;
width: paintedWidth;
}
MouseArea {
anchors.fill: parent;
onClicked: {
textField.forceActiveFocus();
dropdownContainer.visible = !dropdownContainer.visible;
}
}
}
Rectangle {
z: 999;
id: primaryFilterContainer;
color: textField.activeFocus ? hifi.colors.faintGray : hifi.colors.white;
width: primaryFilterTextMetrics.tightBoundingRect.width + 14;
height: parent.height - 8;
anchors.verticalCenter: parent.verticalCenter;
anchors.left: searchButtonContainer.right;
anchors.leftMargin: 4;
visible: primaryFilterText.text !== "";
radius: height/2;
FiraSansRegular {
id: primaryFilterText;
text: root.primaryFilter_displayName;
anchors.fill: parent;
color: textField.activeFocus ? hifi.colors.black : hifi.colors.lightGray;
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
size: hifi.fontSizes.textFieldInput;
font.capitalization: Font.AllUppercase;
}
MouseArea {
anchors.fill: parent;
onClicked: {
textField.forceActiveFocus();
}
}
}
// "Clear" button
HiFiGlyphs {
text: hifi.glyphs.error
color: textField.color
size: 40
anchors.right: parent.right
anchors.rightMargin: hifi.dimensions.textPadding - 2
anchors.verticalCenter: parent.verticalCenter
visible: root.text !== "" || root.primaryFilter_index !== -1;
MouseArea {
anchors.fill: parent;
onClicked: {
root.text = "";
root.primaryFilter_index = -1;
dropdownContainer.visible = false;
textField.forceActiveFocus();
}
}
}
}
selectedTextColor: hifi.colors.black
selectionColor: hifi.colors.primaryHighlight
leftPadding: 44 + (root.primaryFilter_index === -1 ? 0 : primaryFilterTextMetrics.tightBoundingRect.width + 20);
rightPadding: 44;
}
Rectangle {
id: dropdownContainer;
visible: false;
height: 50 * filterBarModel.count;
width: parent.width;
anchors.top: textField.bottom;
anchors.left: parent.left;
anchors.right: parent.right;
color: hifi.colors.white;
ListModel {
id: filterBarModel;
}
ListView {
id: dropdownListView;
interactive: false;
anchors.fill: parent;
model: filterBarModel;
delegate: Item {
width: parent.width;
height: 50;
Rectangle {
id: dropDownButton;
color: hifi.colors.white;
width: parent.width;
height: 50;
visible: true;
RalewaySemiBold {
id: dropDownButtonText;
text: model.displayName;
anchors.fill: parent;
anchors.topMargin: 2;
anchors.leftMargin: 12;
color: hifi.colors.baseGray;
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
size: 18;
}
MouseArea {
anchors.fill: parent;
hoverEnabled: true;
propagateComposedEvents: false;
onEntered: {
dropDownButton.color = hifi.colors.blueHighlight;
}
onExited: {
dropDownButton.color = hifi.colors.white;
}
onClicked: {
textField.forceActiveFocus();
root.primaryFilter_index = index;
dropdownContainer.visible = false;
}
}
}
Rectangle {
height: 2;
width: parent.width;
color: hifi.colors.lightGray;
visible: model.separator
}
}
}
}
DropShadow {
anchors.fill: dropdownContainer;
horizontalOffset: 0;
verticalOffset: 4;
radius: 4.0;
samples: 9
color: Qt.rgba(0, 0, 0, 0.25);
source: dropdownContainer;
visible: dropdownContainer.visible;
}
function changeFilterByDisplayName(name) {
for (var i = 0; i < filterBarModel.count; i++) {
if (filterBarModel.get(i).displayName === name) {
root.primaryFilter_index = i;
return;
}
}
console.log("Passed displayName not found in filterBarModel! primaryFilter unchanged.");
}
}

91
interface/resources/qml/controlsUit/GlyphButton.qml Normal file
View file

@ -0,0 +1,91 @@
//
// 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.7
import QtQuick.Controls 2.2 as Original
import TabletScriptingInterface 1.0
import "../stylesUit"
Original.Button {
id: control
property int color: 0
property int colorScheme: hifi.colorSchemes.light
property string glyph: ""
property int size: 32
width: 120
height: 28
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onFocusChanged: {
if (focus) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
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 if (!control.hovered && control.focus) {
hifi.buttons.focusedColor[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 if (!control.hovered && control.focus) {
hifi.buttons.focusedColor[control.color]
} else {
hifi.buttons.colorFinish[control.color]
}
}
}
}
}
contentItem: HiFiGlyphs {
color: enabled ? hifi.buttons.textColor[control.color]
: hifi.buttons.disabledTextColor[control.colorScheme]
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: control.glyph
size: control.size
}
}

18
interface/resources/qml/controlsUit/HorizontalRule.qml Normal file
View file

@ -0,0 +1,18 @@
//
// 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
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: hifi.colors.lightGray
}

21
interface/resources/qml/controlsUit/HorizontalSpacer.qml Normal file
View file

@ -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 "../stylesUit"
Item {
id: root
property alias size: root.width
width: hifi.dimensions.controlInterlineHeight
height: 1 // Must be non-zero
}

63
interface/resources/qml/controlsUit/ImageMessageBox.qml Normal file
View file

@ -0,0 +1,63 @@
//
// ImageMessageBox.qml
//
// Created by Dante Ruiz on 7/5/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 "../stylesUit"
Item {
id: imageBox
visible: false
anchors.fill: parent
property alias source: image.source
property alias imageWidth: image.width
property alias imageHeight: image.height
Rectangle {
anchors.fill: parent
color: "black"
opacity: 0.3
}
Image {
id: image
anchors.centerIn: parent
HiFiGlyphs {
id: closeGlyphButton
text: hifi.glyphs.close
size: 25
anchors {
top: parent.top
topMargin: 15
right: parent.right
rightMargin: 15
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.text = hifi.glyphs.closeInverted;
}
onExited: {
parent.text = hifi.glyphs.close;
}
onClicked: {
imageBox.visible = false;
}
}
}
}
}

185
interface/resources/qml/controlsUit/Key.qml Normal file
View file

@ -0,0 +1,185 @@
import QtQuick 2.0
import TabletScriptingInterface 1.0
Item {
id: keyItem
width: 45
height: 50
property int contentPadding: 4
property string glyph: "a"
property bool toggle: false // does this button have the toggle behaivor?
property bool toggled: false // is this button currently toggled?
property alias mouseArea: mouseArea1
property alias fontFamily: letter.font.family;
property alias fontPixelSize: letter.font.pixelSize
property alias verticalAlignment: letter.verticalAlignment
property alias letterAnchors: letter.anchors
function resetToggledMode(mode) {
toggled = mode;
if (toggled) {
state = "mouseDepressed";
} else {
state = "";
}
}
MouseArea {
id: mouseArea1
width: 36
anchors.fill: parent
hoverEnabled: true
onCanceled: {
if (toggled) {
keyItem.state = "mouseDepressed";
} else {
keyItem.state = "";
}
}
onContainsMouseChanged: {
if (containsMouse) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
onDoubleClicked: {
mouse.accepted = true;
}
property var _HAPTIC_STRENGTH: 0.1;
property var _HAPTIC_DURATION: 3.0;
property var leftHand: 0;
property var rightHand: 1;
onEntered: {
keyItem.state = "mouseOver";
var globalPosition = keyItem.mapToGlobal(mouseArea1.mouseX, mouseArea1.mouseY);
var pointerID = Web3DOverlay.deviceIdByTouchPoint(globalPosition.x, globalPosition.y);
if (Pointers.isLeftHand(pointerID)) {
Controller.triggerHapticPulse(_HAPTIC_STRENGTH, _HAPTIC_DURATION, leftHand);
} else if (Pointers.isRightHand(pointerID)) {
Controller.triggerHapticPulse(_HAPTIC_STRENGTH, _HAPTIC_DURATION, rightHand);
}
}
onExited: {
if (toggled) {
keyItem.state = "mouseDepressed";
} else {
keyItem.state = "";
}
}
onPressed: {
keyItem.state = "mouseClicked";
mouse.accepted = true;
}
onReleased: {
if (containsMouse) {
Tablet.playSound(TabletEnums.ButtonClick);
webEntity.synthesizeKeyPress(glyph);
webEntity.synthesizeKeyPress(glyph, mirrorText);
if (toggle) {
toggled = !toggled;
}
keyItem.state = "mouseOver";
} else {
if (toggled) {
keyItem.state = "mouseDepressed";
} else {
keyItem.state = "";
}
}
mouse.accepted = true;
}
}
Rectangle {
id: roundedRect
width: 30
color: "#121212"
radius: 2
border.color: "#00000000"
anchors.fill: parent
anchors.margins: contentPadding
}
Text {
id: letter
y: 6
width: 50
color: "#ffffff"
text: glyph
style: Text.Normal
font.family: "Tahoma"
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 8
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 28
}
states: [
State {
name: "mouseOver"
PropertyChanges {
target: roundedRect
color: "#121212"
radius: 3
border.width: 2
border.color: "#00b4ef"
}
PropertyChanges {
target: letter
color: "#00b4ef"
style: Text.Normal
}
},
State {
name: "mouseClicked"
PropertyChanges {
target: roundedRect
color: "#1080b8"
border.width: 2
border.color: "#00b4ef"
}
PropertyChanges {
target: letter
color: "#121212"
styleColor: "#00000000"
style: Text.Normal
}
},
State {
name: "mouseDepressed"
PropertyChanges {
target: roundedRect
color: "#0578b1"
border.width: 0
}
PropertyChanges {
target: letter
color: "#121212"
styleColor: "#00000000"
style: Text.Normal
}
}
]
}

354
interface/resources/qml/controlsUit/Keyboard.qml Normal file
View file

@ -0,0 +1,354 @@
//
// FileDialog.qml
//
// Created by Anthony Thibault on 31 Oct 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.7
import QtGraphicalEffects 1.0
import "."
Rectangle {
id: keyboardBase
objectName: "keyboard"
anchors.left: parent.left
anchors.right: parent.right
color: "#252525"
property bool raised: false
property bool numeric: false
readonly property int keyboardRowHeight: 50
readonly property int keyboardWidth: 480
readonly property int keyboardHeight: 200
readonly property int mirrorTextHeight: keyboardRowHeight
property bool password: false
property alias mirroredText: mirrorText.text
property bool showMirrorText: true
readonly property int raisedHeight: keyboardHeight + (showMirrorText ? keyboardRowHeight : 0)
height: enabled && raised ? raisedHeight : 0
visible: enabled && raised
property bool shiftMode: false
property bool numericShiftMode: false
onRaisedChanged: {
mirroredText = "";
}
function resetShiftMode(mode) {
shiftMode = mode;
shiftKey.resetToggledMode(mode);
}
function toUpper(str) {
if (str === ",") {
return "<";
} else if (str === ".") {
return ">";
} else if (str === "/") {
return "?";
} else if (str === "-") {
return "_";
} else {
return str.toUpperCase(str);
}
}
function toLower(str) {
if (str === "<") {
return ",";
} else if (str === ">") {
return ".";
} else if (str === "?") {
return "/";
} else if (str === "_") {
return "-";
} else {
return str.toLowerCase(str);
}
}
function forEachKey(func) {
var i, j;
for (i = 0; i < columnAlpha.children.length; i++) {
var row = columnAlpha.children[i];
for (j = 0; j < row.children.length; j++) {
var key = row.children[j];
func(key);
}
}
}
onShiftModeChanged: {
forEachKey(function (key) {
if (/[a-z-_]/i.test(key.glyph)) {
if (shiftMode) {
key.glyph = keyboardBase.toUpper(key.glyph);
} else {
key.glyph = keyboardBase.toLower(key.glyph);
}
}
});
}
function alphaKeyClickedHandler(mouseArea) {
// reset shift mode to false after first keypress
if (shiftMode) {
resetShiftMode(false);
}
}
Component.onCompleted: {
// hook up callbacks to every ascii key
forEachKey(function (key) {
if (/^[a-z]+$/i.test(key.glyph)) {
key.mouseArea.onClicked.connect(alphaKeyClickedHandler);
}
});
}
Rectangle {
height: showMirrorText ? mirrorTextHeight : 0
width: keyboardWidth
color: "#252525"
anchors.horizontalCenter: parent.horizontalCenter
TextInput {
id: mirrorText
visible: showMirrorText
font.family: "Fira Sans"
font.pixelSize: 20
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: "#00B4EF";
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
wrapMode: Text.WordWrap
readOnly: false // we need this to allow control to accept QKeyEvent
selectByMouse: false
echoMode: password ? TextInput.Password : TextInput.Normal
Keys.onPressed: {
if (event.key == Qt.Key_Return || event.key == Qt.Key_Space) {
mirrorText.text = "";
event.accepted = true;
}
}
MouseArea { // ... and we need this mouse area to prevent mirrorText from getting mouse events to ensure it will never get focus
anchors.fill: parent
}
}
}
Rectangle {
id: keyboardRect
y: showMirrorText ? mirrorTextHeight : 0
width: keyboardWidth
height: keyboardHeight
color: "#252525"
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
Column {
id: columnAlpha
width: keyboardWidth
height: keyboardHeight
visible: !numeric
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key { width: 43; glyph: "q"; }
Key { width: 43; glyph: "w"; }
Key { width: 43; glyph: "e"; }
Key { width: 43; glyph: "r"; }
Key { width: 43; glyph: "t"; }
Key { width: 43; glyph: "y"; }
Key { width: 43; glyph: "u"; }
Key { width: 43; glyph: "i"; }
Key { width: 43; glyph: "o"; }
Key { width: 43; glyph: "p"; }
Key { width: 43; glyph: "←"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 20
Key { width: 43; glyph: "a"; }
Key { width: 43; glyph: "s"; }
Key { width: 43; glyph: "d"; }
Key { width: 43; glyph: "f"; }
Key { width: 43; glyph: "g"; }
Key { width: 43; glyph: "h"; }
Key { width: 43; glyph: "j"; }
Key { width: 43; glyph: "k"; }
Key { width: 43; glyph: "l"; }
Key { width: 70; glyph: "⏎"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key {
id: shiftKey
width: 43
glyph: "⇪"
toggle: true
onToggledChanged: shiftMode = toggled
}
Key { width: 43; glyph: "z"; }
Key { width: 43; glyph: "x"; }
Key { width: 43; glyph: "c"; }
Key { width: 43; glyph: "v"; }
Key { width: 43; glyph: "b"; }
Key { width: 43; glyph: "n"; }
Key { width: 43; glyph: "m"; }
Key { width: 43; glyph: "-"; }
Key { width: 43; glyph: "/"; }
Key { width: 43; glyph: "?"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key {
width: 70
glyph: "123"
mouseArea.onClicked: keyboardBase.parent.punctuationMode = true
}
Key { width: 231; glyph: " "; }
Key { width: 43; glyph: ","; }
Key { width: 43; glyph: "."; }
Key {
fontFamily: "hifi-glyphs";
fontPixelSize: 48;
letterAnchors.topMargin: -4;
verticalAlignment: Text.AlignVCenter;
width: 86; glyph: "\ue02b";
}
}
}
Column {
id: columnNumeric
width: keyboardWidth
height: keyboardHeight
visible: numeric
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key { width: 43; glyph: "1"; }
Key { width: 43; glyph: "2"; }
Key { width: 43; glyph: "3"; }
Key { width: 43; glyph: "4"; }
Key { width: 43; glyph: "5"; }
Key { width: 43; glyph: "6"; }
Key { width: 43; glyph: "7"; }
Key { width: 43; glyph: "8"; }
Key { width: 43; glyph: "9"; }
Key { width: 43; glyph: "0"; }
Key { width: 43; glyph: "←"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key { width: 43; glyph: "!"; }
Key { width: 43; glyph: "@"; }
Key { width: 43; glyph: "#"; }
Key { width: 43; glyph: "$"; }
Key { width: 43; glyph: "%"; }
Key { width: 43; glyph: "^"; }
Key { width: 43; glyph: "&"; }
Key { width: 43; glyph: "*"; }
Key { width: 43; glyph: "("; }
Key { width: 43; glyph: ")"; }
Key { width: 43; glyph: "⏎"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key {
id: numericShiftKey
width: 43
glyph: "\u21E8"
toggle: true
onToggledChanged: numericShiftMode = toggled
}
Key { width: 43; glyph: numericShiftMode ? "`" : "+"; }
Key { width: 43; glyph: numericShiftMode ? "~" : "-"; }
Key { width: 43; glyph: numericShiftMode ? "\u00A3" : "="; }
Key { width: 43; glyph: numericShiftMode ? "\u20AC" : ";"; }
Key { width: 43; glyph: numericShiftMode ? "\u00A5" : ":"; }
Key { width: 43; glyph: numericShiftMode ? "<" : "'"; }
Key { width: 43; glyph: numericShiftMode ? ">" : "\""; }
Key { width: 43; glyph: numericShiftMode ? "[" : "{"; }
Key { width: 43; glyph: numericShiftMode ? "]" : "}"; }
Key { width: 43; glyph: numericShiftMode ? "\\" : "|"; }
}
Row {
width: keyboardWidth
height: keyboardRowHeight
anchors.left: parent.left
anchors.leftMargin: 4
Key {
width: 70
glyph: "abc"
mouseArea.onClicked: keyboardBase.parent.punctuationMode = false
}
Key { width: 231; glyph: " "; }
Key { width: 43; glyph: ","; }
Key { width: 43; glyph: "."; }
Key {
fontFamily: "hifi-glyphs";
fontPixelSize: 48;
letterAnchors.topMargin: -4;
verticalAlignment: Text.AlignVCenter;
width: 86; glyph: "\ue02b";
}
}
}
}
}

35
interface/resources/qml/controlsUit/Label.qml Normal file
View file

@ -0,0 +1,35 @@
//
// 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.7
import "../stylesUit"
RalewaySemiBold {
HifiConstants { id: hifi }
property int colorScheme: hifi.colorSchemes.light
size: hifi.fontSizes.inputLabel
color: {
if (colorScheme === hifi.colorSchemes.dark) {
if (enabled) {
hifi.colors.lightGrayText
} else {
hifi.colors.baseGrayHighlight
}
} else {
if (enabled) {
hifi.colors.lightGray
} else {
hifi.colors.lightGrayText
}
}
}
}

41
interface/resources/qml/controlsUit/QueuedButton.qml Normal file
View file

@ -0,0 +1,41 @@
//
// 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 "../stylesUit"
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
}

93
interface/resources/qml/controlsUit/RadioButton.qml Normal file
View file

@ -0,0 +1,93 @@
//
// 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 2.2 as Original
import "../stylesUit"
import "." as HifiControls
import TabletScriptingInterface 1.0
Original.RadioButton {
id: radioButton
HifiConstants { id: hifi }
hoverEnabled: true
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
property real letterSpacing: 1
property int fontSize: hifi.fontSizes.inputLabel
property int boxSize: defaultBoxSize
property real scaleFactor: boxSize / defaultBoxSize
readonly property int defaultBoxSize: 14
readonly property int boxRadius: 3 * scaleFactor
readonly property int checkSize: 10 * scaleFactor
readonly property int checkRadius: 2 * scaleFactor
readonly property int indicatorRadius: 7 * scaleFactor
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
}
onHoveredChanged: {
if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover);
}
}
indicator: Rectangle {
id: box
width: boxSize
height: boxSize
radius: indicatorRadius
x: radioButton.leftPadding
y: parent.height / 2 - height / 2
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: indicatorRadius
anchors.centerIn: parent
color: "#00B4EF"
border.width: 1
border.color: "#36CDFF"
visible: checked && !pressed || !checked && pressed
}
}
contentItem: RalewaySemiBold {
text: radioButton.text
size: radioButton.fontSize
font.letterSpacing: letterSpacing
color: isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
leftPadding: radioButton.indicator.width + radioButton.spacing
}
}

41
interface/resources/qml/controlsUit/ScrollBar.qml Normal file
View file

@ -0,0 +1,41 @@
//
// ScrollBar.qml
//
// Created by Vlad Stelmahovsky on 27 Nov 2017
// 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.7
import QtQuick.Controls 2.2
import "../stylesUit"
ScrollBar {
visible: size < 1.0
HifiConstants { id: hifi }
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
background: Item {
implicitWidth: hifi.dimensions.scrollbarBackgroundWidth
Rectangle {
anchors { fill: parent; topMargin: 3; bottomMargin: 3 }
radius: hifi.dimensions.scrollbarHandleWidth/2
color: isLightColorScheme ? hifi.colors.tableScrollBackgroundLight
: hifi.colors.tableScrollBackgroundDark
}
}
contentItem: Item {
implicitWidth: hifi.dimensions.scrollbarHandleWidth
Rectangle {
anchors { fill: parent; topMargin: 1; bottomMargin: 1 }
radius: hifi.dimensions.scrollbarHandleWidth/2
color: isLightColorScheme ? hifi.colors.tableScrollHandleLight : hifi.colors.tableScrollHandleDark
}
}
}

44
interface/resources/qml/controlsUit/Separator.qml Normal file
View file

@ -0,0 +1,44 @@
//
// 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 "../stylesUit"
Item {
property int colorScheme: 0;
readonly property var topColor: [ hifi.colors.baseGrayShadow, hifi.colors.faintGray, "#89858C" ];
readonly property var bottomColor: [ hifi.colors.baseGrayHighlight, hifi.colors.faintGray, "#89858C" ];
// Size
height: colorScheme === 0 ? 2 : 1;
Rectangle {
// Size
width: parent.width;
height: 1;
// Anchors
anchors.left: parent.left;
anchors.bottom: parent.bottom;
// Style
color: topColor[colorScheme];
}
Rectangle {
visible: colorScheme === 0;
// Size
width: parent.width;
height: 1;
// Anchors
anchors.left: parent.left;
anchors.bottom: parent.bottom;
anchors.bottomMargin: -height;
// Style
color: bottomColor[colorScheme];
}
}

98
interface/resources/qml/controlsUit/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.7
import QtQuick.Controls 2.2
import "../stylesUit"
import "." 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)
property alias minimumValue: slider.from
property alias maximumValue: slider.to
property alias step: slider.stepSize
property bool tickmarksEnabled: false
height: hifi.fontSizes.textFieldInput + 14 // Match height of TextField control.
y: sliderLabel.visible ? sliderLabel.height + sliderLabel.anchors.bottomMargin : 0
background: Rectangle {
x: slider.leftPadding
y: slider.topPadding + slider.availableHeight / 2 - height / 2
implicitWidth: 50
implicitHeight: hifi.dimensions.sliderGrooveHeight
width: slider.availableWidth
height: implicitHeight
radius: height / 2
color: isLightColorScheme ? hifi.colors.sliderGutterLight : hifi.colors.sliderGutterDark
Rectangle {
width: slider.visualPosition * parent.width
height: parent.height
radius: height / 2
gradient: Gradient {
GradientStop { position: 0.0; color: hifi.colors.blueAccent }
GradientStop { position: 1.0; color: hifi.colors.primaryHighlight }
}
}
}
handle: Rectangle {
x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
y: slider.topPadding + slider.availableHeight / 2 - height / 2
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 != ""
}
}

185
interface/resources/qml/controlsUit/SpinBox.qml Normal file
View file

@ -0,0 +1,185 @@
//
// 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.7
import QtQuick.Controls 2.2
import "../stylesUit"
import "." as HifiControls
SpinBox {
id: spinBox
HifiConstants {
id: hifi
}
inputMethodHints: Qt.ImhFormattedNumbersOnly
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme === hifi.colorSchemes.light
property string label: ""
property string suffix: ""
property string labelInside: ""
property color colorLabelInside: hifi.colors.white
property color backgroundColor: isLightColorScheme
? (spinBox.activeFocus ? hifi.colors.white : hifi.colors.lightGray)
: (spinBox.activeFocus ? hifi.colors.black : hifi.colors.baseGrayShadow)
property real controlHeight: height + (spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0)
property int decimals: 2;
property real factor: Math.pow(10, decimals)
property real minimumValue: 0.0
property real maximumValue: 0.0
property real realValue: 0.0
property real realFrom: minimumValue
property real realTo: maximumValue
property real realStepSize: 1.0
signal editingFinished()
implicitHeight: height
implicitWidth: width
editable: true
padding: 0
leftPadding: 0
rightPadding: padding + (up.indicator ? up.indicator.width : 0)
topPadding: 0
bottomPadding: 0
locale: Qt.locale("en_US")
onValueModified: realValue = value/factor
onValueChanged: realValue = value/factor
onRealValueChanged: {
var newValue = Math.round(realValue*factor);
if(value != newValue) {
value = newValue;
}
}
stepSize: realStepSize*factor
to : realTo*factor
from : realFrom*factor
font.family: "Fira Sans SemiBold"
font.pixelSize: hifi.fontSizes.textFieldInput
height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control.
y: spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0
background: Rectangle {
color: backgroundColor
border.color: spinBoxLabelInside.visible ? spinBoxLabelInside.color : hifi.colors.primaryHighlight
border.width: spinBox.activeFocus ? spinBoxLabelInside.visible ? 2 : 1 : 0
}
validator: DoubleValidator {
bottom: Math.min(spinBox.from, spinBox.to)
top: Math.max(spinBox.from, spinBox.to)
}
textFromValue: function(value, locale) {
return parseFloat(value/factor).toFixed(decimals);
}
valueFromText: function(text, locale) {
return Number.fromLocaleString(locale, text)*factor;
}
contentItem: TextInput {
z: 2
color: 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
text: spinBox.textFromValue(spinBox.value, spinBox.locale) + suffix
inputMethodHints: spinBox.inputMethodHints
validator: spinBox.validator
verticalAlignment: Qt.AlignVCenter
leftPadding: spinBoxLabelInside.visible ? 30 : hifi.dimensions.textPadding
//rightPadding: hifi.dimensions.spinnerSize
width: spinBox.width - hifi.dimensions.spinnerSize
onEditingFinished: spinBox.editingFinished()
}
up.indicator: Item {
x: spinBox.width - implicitWidth - 5
y: 1
clip: true
implicitHeight: spinBox.implicitHeight/2
implicitWidth: spinBox.implicitHeight/2
HiFiGlyphs {
anchors.centerIn: parent
text: hifi.glyphs.caratUp
size: hifi.dimensions.spinnerSize
color: spinBox.up.pressed || spinBox.up.hovered ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
}
}
up.onPressedChanged: {
if(value) {
spinBox.forceActiveFocus();
}
}
down.indicator: Item {
x: spinBox.width - implicitWidth - 5
y: spinBox.implicitHeight/2
clip: true
implicitHeight: spinBox.implicitHeight/2
implicitWidth: spinBox.implicitHeight/2
HiFiGlyphs {
anchors.centerIn: parent
text: hifi.glyphs.caratDn
size: hifi.dimensions.spinnerSize
color: spinBox.down.pressed || spinBox.down.hovered ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
}
}
down.onPressedChanged: {
if(value) {
spinBox.forceActiveFocus();
}
}
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
acceptedButtons: Qt.NoButton
onWheel: {
if (wheel.angleDelta.y > 0)
value += stepSize
else
value -= stepSize
}
}
}

160
interface/resources/qml/controlsUit/Switch.qml Normal file
View file

@ -0,0 +1,160 @@
//
// 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.7
import QtQuick.Controls 2.2 as Original
import "../stylesUit"
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;
focusPolicy: Qt.ClickFocus
anchors.top: rootSwitch.top;
anchors.left: rootSwitch.left;
anchors.leftMargin: rootSwitch.width/2 - rootSwitch.switchWidth/2;
onCheckedChanged: rootSwitch.onCheckedChanged();
onClicked: rootSwitch.clicked();
hoverEnabled: true
topPadding: 3;
leftPadding: 3;
rightPadding: 3;
bottomPadding: 3;
onHoveredChanged: {
if (hovered) {
switchHandle.color = hifi.colors.blueHighlight;
} else {
switchHandle.color = hifi.colors.lightGray;
}
}
background: Rectangle {
color: "#252525";
implicitWidth: rootSwitch.switchWidth;
implicitHeight: rootSwitch.height;
radius: rootSwitch.switchRadius;
}
indicator: Rectangle {
id: switchHandle;
implicitWidth: rootSwitch.height - originalSwitch.topPadding - originalSwitch.bottomPadding;
implicitHeight: implicitWidth;
radius: implicitWidth/2;
border.color: hifi.colors.lightGrayText;
color: hifi.colors.lightGray;
//x: originalSwitch.leftPadding
x: Math.max(0, Math.min(parent.width - width, originalSwitch.visualPosition * parent.width - (width / 2)))
y: parent.height / 2 - height / 2
Behavior on x {
enabled: !originalSwitch.down
SmoothedAnimation { velocity: 200 }
}
}
}
// 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;
}
}
}
}

165
interface/resources/qml/controlsUit/Table.qml Normal file
View file

@ -0,0 +1,165 @@
//
// 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 QtQuick.Controls 2.3 as QQC2
import "../stylesUit"
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
readonly property real headerSpacing: 3 //spacing between sort indicator and table header title
property var titlePaintedPos: [] // storing extra data position behind painted
// title text and sort indicatorin table's header
signal titlePaintedPosSignal(int column) //signal that extradata position gets changed
model: ListModel { }
Component.onCompleted: {
if (flickableItem !== null && flickableItem !== undefined) {
tableView.flickableItem.QQC2.ScrollBar.vertical = scrollbar
}
}
QQC2.ScrollBar {
id: scrollbar
parent: tableView.flickableItem
policy: QQC2.ScrollBar.AsNeeded
orientation: Qt.Vertical
visible: size < 1.0
topPadding: tableView.headerVisible ? hifi.dimensions.tableHeaderHeight + 1 : 1
anchors.top: tableView.top
anchors.left: tableView.right
anchors.bottom: tableView.bottom
background: Item {
implicitWidth: hifi.dimensions.scrollbarBackgroundWidth
Rectangle {
anchors {
fill: parent;
topMargin: tableView.headerVisible ? hifi.dimensions.tableHeaderHeight : 0
}
color: isLightColorScheme ? hifi.colors.tableScrollBackgroundLight
: hifi.colors.tableScrollBackgroundDark
}
}
contentItem: Item {
implicitWidth: hifi.dimensions.scrollbarHandleWidth
Rectangle {
anchors.fill: parent
radius: (width - 4)/2
color: isLightColorScheme ? hifi.colors.tableScrollHandleLight : hifi.colors.tableScrollHandleDark
}
}
}
headerVisible: false
headerDelegate: Rectangle {
height: hifi.dimensions.tableHeaderHeight
color: isLightColorScheme ? hifi.colors.tableBackgroundLight : hifi.colors.tableBackgroundDark
RalewayRegular {
id: titleText
x: centerHeaderText ? (parent.width - paintedWidth -
((sortIndicatorVisible &&
sortIndicatorColumn === styleData.column) ?
(titleSort.paintedWidth / 5 + tableView.headerSpacing) : 0)) / 2 :
hifi.dimensions.tablePadding
text: styleData.value
size: hifi.fontSizes.tableHeading
font.capitalization: Font.AllUppercase
color: hifi.colors.baseGrayHighlight
horizontalAlignment: (centerHeaderText ? Text.AlignHCenter : Text.AlignLeft)
anchors.verticalCenter: parent.verticalCenter
}
//actual image of sort indicator in glyph font only 20% of real font size
//i.e. if the charachter size set to 60 pixels, actual image is 12 pixels
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.verticalCenter: titleText.verticalCenter
anchors.left: titleText.right
anchors.leftMargin: -(hifi.fontSizes.tableHeadingIcon / 2.5) + tableView.headerSpacing
visible: sortIndicatorVisible && sortIndicatorColumn === styleData.column
onXChanged: {
titlePaintedPos[styleData.column] = titleText.x + titleText.paintedWidth +
paintedWidth / 5 + tableView.headerSpacing*2
titlePaintedPosSignal(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.ScrollBarAlwaysOff
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
}
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)
}
}

138
interface/resources/qml/controlsUit/TabletContentSection.qml Normal file
View file

@ -0,0 +1,138 @@
//
// ContentSection.qml
//
// Created by Dante Ruiz on 13 Feb 2017
// 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 "../stylesUit"
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: 480
height: 1
color: hifi.colors.baseGrayShadow
x: -hifi.dimensions.contentMargin.x
}
Rectangle {
width: 480
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: false
width: 480
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
}
}
}

34
interface/resources/qml/controlsUit/TabletHeader.qml Normal file
View file

@ -0,0 +1,34 @@
//
// TabletHeader.qml
//
// Created by David Rowe on 11 Mar 2017.
// Copyright 2017 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 "../stylesUit"
Rectangle {
property string title: ""
HifiConstants { id: hifi }
height: hifi.dimensions.tabletMenuHeader
z: 100
color: hifi.colors.darkGray
RalewayBold {
text: title
size: 26
color: hifi.colors.white
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: hifi.dimensions.contentMargin.x
}
}

65
interface/resources/qml/controlsUit/TextAction.qml Normal file
View file

@ -0,0 +1,65 @@
//
// TextField.qml
//
// Created by David Rowe on 21 Apr 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 "../stylesUit"
import "." as HifiControls
Item {
property string icon: ""
property int iconSize: 30
property string text: ""
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
signal clicked()
height: Math.max(glyph.visible ? glyph.height - 4 : 0, string.visible ? string.height : 0)
width: glyph.width + string.anchors.leftMargin + string.width
HiFiGlyphs {
id: glyph
anchors.left: parent.left
anchors.top: parent.top
anchors.topMargin: -2
text: parent.icon
size: parent.iconSize
color: isLightColorScheme
? (mouseArea.containsMouse ? hifi.colors.baseGrayHighlight : hifi.colors.lightGray)
: (mouseArea.containsMouse ? hifi.colors.faintGray : hifi.colors.lightGrayText)
visible: text !== ""
width: visible ? implicitWidth : 0
}
RalewaySemiBold {
id: string
anchors {
left: glyph.visible ? glyph.right : parent.left
leftMargin: visible && glyph.visible ? hifi.dimensions.contentSpacing.x : 0
verticalCenter: glyph.visible ? glyph.verticalCenter : undefined
}
text: parent.text
size: hifi.fontSizes.inputLabel
color: isLightColorScheme
? (mouseArea.containsMouse ? hifi.colors.baseGrayHighlight : hifi.colors.lightGray)
: (mouseArea.containsMouse ? hifi.colors.faintGray : hifi.colors.lightGrayText)
font.underline: true;
visible: text !== ""
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: parent.clicked()
}
}

23
interface/resources/qml/controlsUit/TextEdit.qml Normal file
View file

@ -0,0 +1,23 @@
//
// TextEdit.qml
//
// Created by Bradley Austin Davis on 24 Apr 2015
// Copyright 2015 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 "../stylesUit"
TextEdit {
property real size: 32
font.family: "Raleway"
font.weight: Font.DemiBold
font.pointSize: size
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
}

180
interface/resources/qml/controlsUit/TextField.qml Normal file
View file

@ -0,0 +1,180 @@
//
// TextField.qml
//
// Created by David Rowe on 17 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 "../stylesUit"
import "." as HifiControls
TextField {
id: textField
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
readonly property bool isFaintGrayColorScheme: colorScheme == hifi.colorSchemes.faintGray
property bool isSearchField: false
property string label: ""
property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height + 1 : 0)
property bool hasDefocusedBorder: true;
property bool hasRoundedBorder: false
property int roundedBorderRadius: 4
property bool error: false;
property bool hasClearButton: false;
property string leftPermanentGlyph: "";
property string centerPlaceholderGlyph: "";
placeholderText: textField.placeholderText
font.family: "Fira Sans"
font.pixelSize: hifi.fontSizes.textFieldInput
height: implicitHeight + 3 // Make surrounding box higher so that highlight is vertically centered.
property alias textFieldLabel: textFieldLabel
y: textFieldLabel.visible ? textFieldLabel.height + textFieldLabel.anchors.bottomMargin : 0
// workaround for https://bugreports.qt.io/browse/QTBUG-49297
Keys.onPressed: {
switch (event.key) {
case Qt.Key_Return:
case Qt.Key_Enter:
event.accepted = true;
// emit accepted signal manually
if (acceptableInput) {
accepted();
}
}
}
style: TextFieldStyle {
id: style;
textColor: {
if (isLightColorScheme) {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.lightGray
}
} else if (isFaintGrayColorScheme) {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.lightGray
}
} else {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.lightGrayText
}
}
}
background: Rectangle {
color: {
if (isLightColorScheme) {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.textFieldLightBackground
}
} else if (isFaintGrayColorScheme) {
if (textField.activeFocus) {
hifi.colors.white
} else {
hifi.colors.faintGray50
}
} else {
if (textField.activeFocus) {
hifi.colors.black
} else {
hifi.colors.baseGrayShadow
}
}
}
border.color: textField.error ? hifi.colors.redHighlight :
(textField.activeFocus ? hifi.colors.primaryHighlight : (hasDefocusedBorder ? (isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray) : color))
border.width: textField.activeFocus || hasRoundedBorder || textField.error ? 1 : 0
radius: isSearchField ? textField.height / 2 : (hasRoundedBorder ? roundedBorderRadius : 0)
HiFiGlyphs {
text: textField.leftPermanentGlyph;
color: textColor;
size: hifi.fontSizes.textFieldSearchIcon;
anchors.left: parent.left;
anchors.verticalCenter: parent.verticalCenter;
anchors.leftMargin: hifi.dimensions.textPadding - 2;
visible: text;
}
HiFiGlyphs {
text: textField.centerPlaceholderGlyph;
color: textColor;
size: parent.height;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter;
visible: text && !textField.focus && textField.text === "";
}
HiFiGlyphs {
text: hifi.glyphs.search
color: textColor
size: hifi.fontSizes.textFieldSearchIcon
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: hifi.dimensions.textPadding - 2
visible: isSearchField
}
HiFiGlyphs {
text: hifi.glyphs.error
color: textColor
size: 40
anchors.right: parent.right
anchors.rightMargin: hifi.dimensions.textPadding - 2
anchors.verticalCenter: parent.verticalCenter
visible: hasClearButton && textField.text !== "";
MouseArea {
anchors.fill: parent;
onClicked: {
textField.text = "";
}
}
}
}
placeholderTextColor: isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray
selectedTextColor: hifi.colors.black
selectionColor: hifi.colors.primaryHighlight
padding.left: hasRoundedBorder ? textField.height / 2 : ((isSearchField || textField.leftPermanentGlyph !== "") ? textField.height - 2 : 0) + hifi.dimensions.textPadding
padding.right: (hasClearButton ? textField.height - 2 : 0) + hifi.dimensions.textPadding
}
HifiControls.Label {
id: textFieldLabel
text: textField.label
colorScheme: textField.colorScheme
anchors.left: parent.left
Binding on anchors.right {
when: textField.right
value: textField.right
}
Binding on wrapMode {
when: textField.right
value: Text.WordWrap
}
anchors.bottom: parent.top
anchors.bottomMargin: 3
visible: label != ""
}
}

51
interface/resources/qml/controlsUit/ToolTip.qml Normal file
View file

@ -0,0 +1,51 @@
//
// ToolTip.qml
//
// Created by Clement on 9/12/17
// 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
Item {
property string toolTip
property bool showToolTip: false
Rectangle {
id: toolTipRectangle
anchors.right: parent.right
width: toolTipText.width + 4
height: toolTipText.height + 4
opacity: (toolTip != "" && showToolTip) ? 1 : 0
color: "#ffffaa"
border.color: "#0a0a0a"
Text {
id: toolTipText
text: toolTip
color: "black"
anchors.centerIn: parent
}
Behavior on opacity {
PropertyAnimation {
easing.type: Easing.InOutQuad
duration: 250
}
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
onEntered: showTimer.start()
onExited: { showToolTip = false; showTimer.stop(); }
hoverEnabled: true
}
Timer {
id: showTimer
interval: 250
onTriggered: { showToolTip = true; }
}
}

205
interface/resources/qml/controlsUit/Tree.qml Normal file
View file

@ -0,0 +1,205 @@
//
// Tree.qml
//
// Created by David Rowe on 17 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 QtQml.Models 2.2
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.2 as QQC2
import "../stylesUit"
TreeView {
id: treeView
property var treeModel: ListModel { }
property bool centerHeaderText: false
property int colorScheme: hifi.colorSchemes.light
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
property var modifyEl: function(index, data) { return false; }
model: treeModel
selection: ItemSelectionModel {
id: selectionModel
model: treeModel
}
anchors { left: parent.left; right: parent.right }
headerVisible: false
Component.onCompleted: {
if (flickableItem !== null && flickableItem !== undefined) {
treeView.flickableItem.QQC2.ScrollBar.vertical = scrollbar
}
}
QQC2.ScrollBar {
id: scrollbar
parent: treeView.flickableItem
policy: QQC2.ScrollBar.AsNeeded
orientation: Qt.Vertical
visible: size < 1.0
topPadding: treeView.headerVisible ? hifi.dimensions.tableHeaderHeight + 1 : 1
anchors.top: treeView.top
anchors.left: treeView.right
anchors.bottom: treeView.bottom
background: Item {
implicitWidth: hifi.dimensions.scrollbarBackgroundWidth
Rectangle {
anchors {
fill: parent;
topMargin: treeView.headerVisible ? hifi.dimensions.tableHeaderHeight: 0
}
color: isLightColorScheme ? hifi.colors.tableScrollBackgroundLight
: hifi.colors.tableScrollBackgroundDark
}
}
contentItem: Item {
implicitWidth: hifi.dimensions.scrollbarHandleWidth
Rectangle {
anchors.fill: parent
radius: (width - 4)/2
color: isLightColorScheme ? hifi.colors.tableScrollHandleLight : hifi.colors.tableScrollHandleDark
}
}
}
// Use rectangle to draw border with rounded corners.
frameVisible: false
Rectangle {
color: "#00000000"
anchors.fill: parent
radius: hifi.dimensions.borderRadius
border.color: isLightColorScheme ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight
border.width: 2
anchors.margins: -2
}
anchors.margins: 2 // Shrink TreeView to lie within border.
backgroundVisible: true
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
style: TreeViewStyle {
// Needed in order for rows to keep displaying rows after end of table entries.
backgroundColor: parent.isLightColorScheme ? hifi.colors.tableRowLightEven : hifi.colors.tableRowDarkEven
alternateBackgroundColor: parent.isLightColorScheme ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
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)
elide: Text.ElideRight
anchors {
left: parent.left
leftMargin: hifi.dimensions.tablePadding
right: sortIndicatorVisible && sortIndicatorColumn === styleData.column ? titleSort.left : parent.right
rightMargin: hifi.dimensions.tablePadding
verticalCenter: parent.verticalCenter
}
}
HiFiGlyphs {
id: titleSort
text: sortIndicatorOrder == Qt.AscendingOrder ? hifi.glyphs.caratUp : hifi.glyphs.caratDn
color: isLightColorScheme ? hifi.colors.darkGray : hifi.colors.baseGrayHighlight
opacity: 0.6;
size: hifi.fontSizes.tableHeadingIcon
anchors {
right: parent.right
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
}
}
branchDelegate: HiFiGlyphs {
text: styleData.isExpanded ? hifi.glyphs.caratDn : hifi.glyphs.caratR
size: hifi.fontSizes.carat
color: colorScheme == hifi.colorSchemes.light
? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
: (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
anchors {
left: parent ? parent.left : undefined
leftMargin: hifi.dimensions.tablePadding / 2
}
}
}
rowDelegate: Rectangle {
height: hifi.dimensions.tableRowHeight
color: styleData.selected
? hifi.colors.primaryHighlight
: treeView.isLightColorScheme
? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd)
: (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd)
}
itemDelegate: FiraSansSemiBold {
anchors {
left: parent ? parent.left : undefined
leftMargin: (2 + styleData.depth) * hifi.dimensions.tablePadding
right: parent ? parent.right : undefined
rightMargin: hifi.dimensions.tablePadding
verticalCenter: parent ? parent.verticalCenter : undefined
}
text: styleData.value
size: hifi.fontSizes.tableText
color: colorScheme == hifi.colorSchemes.light
? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
: (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
elide: Text.ElideRight
}
Item {
id: unfocusHelper
visible: false
}
onDoubleClicked: isExpanded(index) ? collapse(index) : expand(index)
}

21
interface/resources/qml/controlsUit/VerticalSpacer.qml Normal file
View file

@ -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 "../stylesUit"
Item {
id: root
property alias size: root.height
width: 1 // Must be non-zero
height: hifi.dimensions.controlInterlineHeight
}

40
interface/resources/qml/controlsUit/WebGlyphButton.qml Normal file
View file

@ -0,0 +1,40 @@
//
// GlyphButton.qml
//
// Created by Vlad Stelmahovsky on 2017-06-21
// 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 2.2 as Original
import "../stylesUit"
Original.Button {
id: control
property int colorScheme: hifi.colorSchemes.light
property string glyph: ""
property int size: 32
//colors
readonly property color normalColor: "#AFAFAF"
readonly property color hoverColor: "#00B4EF"
readonly property color clickedColor: "#FFFFFF"
readonly property color disabledColor: "#575757"
background: Item {}
contentItem: HiFiGlyphs {
color: control.enabled ? (control.pressed ? control.clickedColor :
(control.hovered ? control.hoverColor : control.normalColor)) :
control.disabledColor
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: control.glyph
size: control.size
}
}

24
interface/resources/qml/controlsUit/WebSpinner.qml Normal file
View file

@ -0,0 +1,24 @@
//
// WebSpinner.qml
//
// Created by David Rowe on 23 May 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 QtWebEngine 1.5
AnimatedImage {
property WebEngineView webview: parent
source: "../../icons/loader-snake-64-w.gif"
visible: webview.loading && /^(http.*|)$/i.test(webview.url.toString())
playing: visible
z: 10000
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
}

21
interface/resources/qml/controlsUit/WebView.qml Normal file
View file

@ -0,0 +1,21 @@
//
// WebView.qml
//
// Created by Bradley Austin Davis on 12 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 "."
BaseWebView {
onNewViewRequested: {
// Load dialog via OffscreenUi so that JavaScript EventBridge is available.
var browser = OffscreenUi.load("Browser.qml");
request.openIn(browser.webView);
browser.webView.forceActiveFocus();
}
}

2
interface/resources/qml/controls-uit/qmldir → interface/resources/qml/controlsUit/qmldir
View file

@ -6,6 +6,7 @@ CheckBox 1.0 CheckBox.qml
CheckBoxQQC2 1.0 CheckBoxQQC2.qml
ComboBox 1.0 ComboBox.qml
ContentSection 1.0 ContentSection.qml
FilterBar 1.0 FilterBar.qml
GlyphButton 1.0 GlyphButton.qml
HorizontalRule 1.0 HorizontalRule.qml
HorizontalSpacer 1.0 HorizontalSpacer.qml
@ -15,6 +16,7 @@ Keyboard 1.0 Keyboard.qml
Label 1.0 Label.qml
QueuedButton 1.0 QueuedButton.qml
RadioButton 1.0 RadioButton.qml
ScrollBar 1.0 ScrollBar.qml
Separator 1.0 Separator.qml
Slider 1.0 Slider.qml
SpinBox 1.0 SpinBox.qml

2
interface/resources/qml/dialogs/AssetDialog.qml
View file

@ -11,7 +11,7 @@
import QtQuick 2.5
import Qt.labs.settings 1.0
import "../styles-uit"
import stylesUit 1.0
import "../windows"
import "assetDialog"

Some files were not shown because too many files have changed in this diff Show more