mirror of
https://github.com/overte-org/overte.git
synced 2025-04-08 08:14:48 +02:00
Backporting visual work from branch
This commit is contained in:
parent
3032b1fb67
commit
0b1df891af
27 changed files with 466 additions and 246 deletions
|
@ -5,9 +5,8 @@ import "controls"
|
|||
import "styles"
|
||||
|
||||
Dialog {
|
||||
HifiConstants { id: hifi }
|
||||
title: "Login"
|
||||
HifiPalette { id: hifiPalette }
|
||||
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
|
||||
objectName: "LoginDialog"
|
||||
height: 512
|
||||
width: 384
|
||||
|
@ -117,7 +116,7 @@ Dialog {
|
|||
width: 192
|
||||
height: 64
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: hifiPalette.hifiBlue
|
||||
color: hifi.colors.hifiBlue
|
||||
border.width: 0
|
||||
radius: 10
|
||||
|
||||
|
@ -160,7 +159,7 @@ Dialog {
|
|||
text:"Create Account"
|
||||
font.pointSize: 12
|
||||
font.bold: true
|
||||
color: hifiPalette.hifiBlue
|
||||
color: hifi.colors.hifiBlue
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
|
@ -177,7 +176,7 @@ Dialog {
|
|||
verticalAlignment: Text.AlignVCenter
|
||||
font.pointSize: 12
|
||||
text: "Recover Password"
|
||||
color: hifiPalette.hifiBlue
|
||||
color: hifi.colors.hifiBlue
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
|
|
|
@ -18,8 +18,6 @@ Dialog {
|
|||
onImplicitHeightChanged: root.height = implicitHeight
|
||||
onImplicitWidthChanged: root.width = implicitWidth
|
||||
|
||||
SystemPalette { id: palette }
|
||||
|
||||
function calculateImplicitWidth() {
|
||||
if (buttons.visibleChildren.length < 2)
|
||||
return;
|
||||
|
|
|
@ -7,12 +7,19 @@ import "styles"
|
|||
|
||||
Hifi.VrMenu {
|
||||
id: root
|
||||
HifiConstants { id: hifi }
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
objectName: "VrMenu"
|
||||
|
||||
enabled: false
|
||||
opacity: 0.0
|
||||
|
||||
property int animationDuration: 200
|
||||
HifiPalette { id: hifiPalette }
|
||||
property var models: []
|
||||
property var columns: []
|
||||
|
||||
z: 10000
|
||||
|
||||
onEnabledChanged: {
|
||||
|
@ -22,7 +29,7 @@ Hifi.VrMenu {
|
|||
opacity = enabled ? 1.0 : 0.0
|
||||
if (enabled) {
|
||||
forceActiveFocus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The actual animator
|
||||
|
@ -41,10 +48,6 @@ Hifi.VrMenu {
|
|||
if (!visible) reset();
|
||||
}
|
||||
|
||||
|
||||
property var models: []
|
||||
property var columns: []
|
||||
|
||||
property var menuBuilder: Component {
|
||||
Border {
|
||||
Component.onCompleted: {
|
||||
|
@ -58,10 +61,20 @@ Hifi.VrMenu {
|
|||
y = lastMousePosition.y - height / 2;
|
||||
}
|
||||
}
|
||||
SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
|
||||
border.color: hifiPalette.hifiBlue
|
||||
color: sysPalette.window
|
||||
border.color: hifi.colors.hifiBlue
|
||||
color: hifi.colors.window
|
||||
property int menuDepth
|
||||
/*
|
||||
MouseArea {
|
||||
// Rectangle { anchors.fill: parent; color: "#7f0000FF"; visible: enabled }
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
while (parent.menuDepth != root.models.length - 1) {
|
||||
root.popColumn()
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
ListView {
|
||||
spacing: 6
|
||||
|
@ -71,12 +84,11 @@ Hifi.VrMenu {
|
|||
anchors.margins: outerMargin
|
||||
id: listView
|
||||
height: root.height
|
||||
currentIndex: -1
|
||||
|
||||
onCountChanged: {
|
||||
recalculateSize()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function recalculateSize() {
|
||||
var newHeight = 0
|
||||
var newWidth = minWidth;
|
||||
|
@ -87,11 +99,11 @@ Hifi.VrMenu {
|
|||
parent.height = newHeight + outerMargin * 2;
|
||||
parent.width = newWidth + outerMargin * 2
|
||||
}
|
||||
|
||||
|
||||
highlight: Rectangle {
|
||||
width: listView.minWidth - 32;
|
||||
height: 32
|
||||
color: sysPalette.highlight
|
||||
color: hifi.colors.hifiBlue
|
||||
y: (listView.currentItem) ? listView.currentItem.y : 0;
|
||||
x: 32
|
||||
Behavior on y {
|
||||
|
@ -101,10 +113,8 @@ Hifi.VrMenu {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
property int columnIndex: root.models.length - 1
|
||||
model: root.models[columnIndex]
|
||||
model: root.models[menuDepth]
|
||||
delegate: Loader {
|
||||
id: loader
|
||||
sourceComponent: root.itemBuilder
|
||||
|
@ -120,12 +130,6 @@ Hifi.VrMenu {
|
|||
value: modelData
|
||||
when: loader.status == Loader.Ready
|
||||
}
|
||||
Binding {
|
||||
target: loader.item
|
||||
property: "listViewIndex"
|
||||
value: index
|
||||
when: loader.status == Loader.Ready
|
||||
}
|
||||
Binding {
|
||||
target: loader.item
|
||||
property: "listView"
|
||||
|
@ -133,26 +137,24 @@ Hifi.VrMenu {
|
|||
when: loader.status == Loader.Ready
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
property var itemBuilder: Component {
|
||||
Text {
|
||||
SystemPalette { id: sp; colorGroup: SystemPalette.Active }
|
||||
id: thisText
|
||||
x: 32
|
||||
property var source
|
||||
property var root
|
||||
property var listViewIndex
|
||||
property var listView
|
||||
text: typedText()
|
||||
height: implicitHeight
|
||||
width: implicitWidth
|
||||
color: source.enabled ? "black" : "gray"
|
||||
|
||||
color: source.enabled ? hifi.colors.text : hifi.colors.disabledText
|
||||
enabled: source.enabled
|
||||
|
||||
|
||||
onImplicitWidthChanged: {
|
||||
if (listView) {
|
||||
listView.minWidth = Math.max(listView.minWidth, implicitWidth + 64);
|
||||
|
@ -163,15 +165,27 @@ Hifi.VrMenu {
|
|||
FontAwesome {
|
||||
visible: source.type == 1 && source.checkable
|
||||
x: -32
|
||||
text: (source.type == 1 && source.checked) ? "\uF05D" : "\uF10C"
|
||||
text: checkText();
|
||||
color: parent.color
|
||||
function checkText() {
|
||||
if (source.type != 1) {
|
||||
return;
|
||||
}
|
||||
// FIXME this works for native QML menus but I don't think it will
|
||||
// for proxied QML menus
|
||||
if (source.exclusiveGroup) {
|
||||
return source.checked ? "\uF05D" : "\uF10C"
|
||||
}
|
||||
return source.checked ? "\uF046" : "\uF096"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
FontAwesome {
|
||||
visible: source.type == 2
|
||||
x: listView.width - 64
|
||||
x: listView.width - 32 - (hifi.layout.spacing * 2)
|
||||
text: "\uF0DA"
|
||||
color: parent.color
|
||||
}
|
||||
|
||||
|
||||
function typedText() {
|
||||
switch(source.type) {
|
||||
|
@ -200,38 +214,53 @@ Hifi.VrMenu {
|
|||
interval: 1000
|
||||
onTriggered: parent.select();
|
||||
}
|
||||
onEntered: {
|
||||
if (source.type == 2 && enabled) {
|
||||
timer.start()
|
||||
}
|
||||
}
|
||||
onExited: {
|
||||
timer.stop()
|
||||
}
|
||||
/*
|
||||
* Uncomment below to have menus auto-popup
|
||||
*
|
||||
* FIXME if we enabled timer based menu popup, either the timer has
|
||||
* to be very very short or after auto popup there has to be a small
|
||||
* amount of time, or a test if the mouse has moved before a click
|
||||
* will be accepted, otherwise it's too easy to accidently click on
|
||||
* something immediately after the auto-popup appears underneath your
|
||||
* cursor
|
||||
*
|
||||
*/
|
||||
//onEntered: {
|
||||
// if (source.type == 2 && enabled) {
|
||||
// timer.start()
|
||||
// }
|
||||
//}
|
||||
//onExited: {
|
||||
// timer.stop()
|
||||
//}
|
||||
onClicked: {
|
||||
select();
|
||||
}
|
||||
function select() {
|
||||
timer.stop();
|
||||
listView.currentIndex = listViewIndex
|
||||
parent.root.selectItem(parent.source);
|
||||
var popped = false;
|
||||
while (columns.length - 1 > listView.parent.menuDepth) {
|
||||
popColumn();
|
||||
popped = true;
|
||||
}
|
||||
|
||||
if (!popped || source.type != 1) {
|
||||
parent.root.selectItem(parent.source);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function lastColumn() {
|
||||
return columns[root.columns.length - 1];
|
||||
}
|
||||
|
||||
|
||||
function pushColumn(items) {
|
||||
models.push(items)
|
||||
if (columns.length) {
|
||||
var oldColumn = lastColumn();
|
||||
oldColumn.enabled = false;
|
||||
oldColumn.opacity = 0.5;
|
||||
//oldColumn.enabled = false
|
||||
}
|
||||
var newColumn = menuBuilder.createObject(root);
|
||||
columns.push(newColumn);
|
||||
|
|
|
@ -5,6 +5,5 @@ import "."
|
|||
import "../styles"
|
||||
|
||||
Original.Button {
|
||||
style: ButtonStyle {
|
||||
}
|
||||
style: ButtonStyle { }
|
||||
}
|
||||
|
|
16
interface/resources/qml/controls/CheckBox.qml
Normal file
16
interface/resources/qml/controls/CheckBox.qml
Normal file
|
@ -0,0 +1,16 @@
|
|||
import QtQuick.Controls 1.3 as Original
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import "../styles"
|
||||
import "."
|
||||
Original.CheckBox {
|
||||
text: "Check Box"
|
||||
style: CheckBoxStyle {
|
||||
indicator: FontAwesome {
|
||||
text: control.checked ? "\uf046" : "\uf096"
|
||||
}
|
||||
label: Text {
|
||||
text: control.text
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -11,28 +11,21 @@ import "../styles"
|
|||
* Examine the QML ApplicationWindow.qml source for how it does this
|
||||
*
|
||||
*/
|
||||
Item {
|
||||
DialogBase {
|
||||
id: root
|
||||
|
||||
HifiPalette { id: hifiPalette }
|
||||
SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
|
||||
HifiConstants { id: hifi }
|
||||
// FIXME better placement via a window manager
|
||||
x: parent ? parent.width / 2 - width / 2 : 0
|
||||
y: parent ? parent.height / 2 - height / 2 : 0
|
||||
|
||||
property int animationDuration: 400
|
||||
property bool destroyOnInvisible: false
|
||||
property bool destroyOnCloseButton: true
|
||||
property bool resizable: false
|
||||
|
||||
property int animationDuration: hifi.effects.fadeInDuration
|
||||
property int minX: 256
|
||||
property int minY: 256
|
||||
property int topMargin: root.height - clientBorder.height + 8
|
||||
property int margins: 8
|
||||
property string title
|
||||
property int titleSize: titleBorder.height + 12
|
||||
property string frameColor: hifiPalette.hifiBlue
|
||||
property string backgroundColor: sysPalette.window
|
||||
property string headerBackgroundColor: sysPalette.dark
|
||||
clip: true
|
||||
readonly property int topMargin: root.height - clientBorder.height + hifi.layout.spacing
|
||||
|
||||
/*
|
||||
* Support for animating the dialog in and out.
|
||||
|
@ -44,7 +37,8 @@ Item {
|
|||
// visibility, so that we can do animations in both directions. Because
|
||||
// visibility and enabled are boolean flags, they cannot be animated. So when
|
||||
// enabled is change, we modify a property that can be animated, like scale or
|
||||
// opacity.
|
||||
// opacity, and then when the target animation value is reached, we can
|
||||
// modify the visibility
|
||||
onEnabledChanged: {
|
||||
scale = enabled ? 1.0 : 0.0
|
||||
}
|
||||
|
@ -57,13 +51,13 @@ Item {
|
|||
}
|
||||
}
|
||||
|
||||
// We remove any load the dialog might have on the QML by toggling it's
|
||||
// visibility based on the state of the animated property
|
||||
// Once we're scaled to 0, disable the dialog's visibility
|
||||
onScaleChanged: {
|
||||
visible = (scale != 0.0);
|
||||
}
|
||||
|
||||
// Some dialogs should be destroyed when they become invisible, so handle that
|
||||
|
||||
// Some dialogs should be destroyed when they become invisible,
|
||||
// so handle that
|
||||
onVisibleChanged: {
|
||||
if (!visible && destroyOnInvisible) {
|
||||
destroy();
|
||||
|
@ -91,6 +85,7 @@ Item {
|
|||
|
||||
MouseArea {
|
||||
id: sizeDrag
|
||||
enabled: root.resizable
|
||||
property int startX
|
||||
property int startY
|
||||
anchors.right: parent.right
|
||||
|
@ -103,7 +98,7 @@ Item {
|
|||
startY = mouseY
|
||||
}
|
||||
onPositionChanged: {
|
||||
if (pressed && root.resizable) {
|
||||
if (pressed) {
|
||||
root.deltaSize((mouseX - startX), (mouseY - startY))
|
||||
startX = mouseX
|
||||
startY = mouseY
|
||||
|
@ -111,83 +106,41 @@ Item {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Window decorations, with a title bar and frames
|
||||
*/
|
||||
Border {
|
||||
id: windowBorder
|
||||
anchors.fill: parent
|
||||
border.color: root.frameColor
|
||||
color: root.backgroundColor
|
||||
MouseArea {
|
||||
id: titleDrag
|
||||
x: root.titleX
|
||||
y: root.titleY
|
||||
width: root.titleWidth
|
||||
height: root.titleHeight
|
||||
|
||||
Border {
|
||||
id: titleBorder
|
||||
height: 48
|
||||
drag {
|
||||
target: root
|
||||
minimumX: 0
|
||||
minimumY: 0
|
||||
maximumX: root.parent ? root.parent.width - root.width : 0
|
||||
maximumY: root.parent ? root.parent.height - root.height : 0
|
||||
}
|
||||
|
||||
Row {
|
||||
id: windowControls
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
border.color: root.frameColor
|
||||
color: root.headerBackgroundColor
|
||||
|
||||
Text {
|
||||
id: titleText
|
||||
// FIXME move all constant colors to our own palette class HifiPalette
|
||||
color: "white"
|
||||
text: root.title
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: titleDrag
|
||||
anchors.right: closeButton.left
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.rightMargin: 4
|
||||
drag {
|
||||
target: root
|
||||
minimumX: 0
|
||||
minimumY: 0
|
||||
maximumX: root.parent ? root.parent.width - root.width : 0
|
||||
maximumY: root.parent ? root.parent.height - root.height : 0
|
||||
}
|
||||
}
|
||||
Image {
|
||||
id: closeButton
|
||||
x: 360
|
||||
height: 16
|
||||
anchors.rightMargin: hifi.layout.spacing
|
||||
FontAwesome {
|
||||
id: icon
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 16
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
source: "../../styles/close.svg"
|
||||
size: root.titleHeight - hifi.layout.spacing * 2
|
||||
color: "red"
|
||||
text: "\uf00d"
|
||||
MouseArea {
|
||||
anchors.margins: hifi.layout.spacing / 2
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
root.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
} // header border
|
||||
|
||||
Border {
|
||||
id: clientBorder
|
||||
border.color: root.frameColor
|
||||
// FIXME move all constant colors to our own palette class HifiPalette
|
||||
color: "#00000000"
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 0
|
||||
anchors.top: titleBorder.bottom
|
||||
anchors.topMargin: -titleBorder.border.width
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
clip: true
|
||||
} // client border
|
||||
} // window border
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
74
interface/resources/qml/controls/DialogBase.qml
Normal file
74
interface/resources/qml/controls/DialogBase.qml
Normal file
|
@ -0,0 +1,74 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import "."
|
||||
import "../styles"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
HifiConstants { id: hifi }
|
||||
implicitHeight: 512
|
||||
implicitWidth: 512
|
||||
property string title
|
||||
property int titleSize: titleBorder.height + 12
|
||||
property string frameColor: hifi.colors.hifiBlue
|
||||
property string backgroundColor: hifi.colors.dialogBackground
|
||||
property bool active: false
|
||||
|
||||
property alias titleBorder: titleBorder
|
||||
readonly property alias titleX: titleBorder.x
|
||||
readonly property alias titleY: titleBorder.y
|
||||
readonly property alias titleWidth: titleBorder.width
|
||||
readonly property alias titleHeight: titleBorder.height
|
||||
|
||||
property alias clientBorder: clientBorder
|
||||
readonly property real clientX: clientBorder.x + hifi.styles.borderWidth
|
||||
readonly property real clientY: clientBorder.y + hifi.styles.borderWidth
|
||||
readonly property real clientWidth: clientBorder.width - hifi.styles.borderWidth * 2
|
||||
readonly property real clientHeight: clientBorder.height - hifi.styles.borderWidth * 2
|
||||
|
||||
/*
|
||||
* Window decorations, with a title bar and frames
|
||||
*/
|
||||
Border {
|
||||
id: windowBorder
|
||||
anchors.fill: parent
|
||||
border.color: root.frameColor
|
||||
color: "#00000000"
|
||||
|
||||
Border {
|
||||
id: titleBorder
|
||||
height: hifi.layout.windowTitleHeight
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
border.color: root.frameColor
|
||||
clip: true
|
||||
color: root.active ?
|
||||
hifi.colors.activeWindow.headerBackground :
|
||||
hifi.colors.inactiveWindow.headerBackground
|
||||
|
||||
Text {
|
||||
id: titleText
|
||||
color: root.active ?
|
||||
hifi.colors.activeWindow.headerText :
|
||||
hifi.colors.inactiveWindow.headerText
|
||||
text: root.title
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
anchors.fill: parent
|
||||
}
|
||||
} // header border
|
||||
|
||||
Border {
|
||||
id: clientBorder
|
||||
border.color: root.frameColor
|
||||
color: root.backgroundColor
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.top: titleBorder.bottom
|
||||
anchors.topMargin: -titleBorder.border.width
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
clip: true
|
||||
} // client border
|
||||
} // window border
|
||||
|
||||
}
|
|
@ -8,9 +8,9 @@ Text {
|
|||
property int size: 32
|
||||
width: size
|
||||
height: size
|
||||
font.pixelSize: size
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
font.family: iconFont.name
|
||||
font.pointSize: 18
|
||||
}
|
||||
|
||||
|
|
|
@ -1,24 +0,0 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.3
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
|
||||
Button {
|
||||
text: "Text"
|
||||
style: ButtonStyle {
|
||||
background: Item { anchors.fill: parent }
|
||||
label: Text {
|
||||
id: icon
|
||||
width: height
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
renderType: Text.NativeRendering
|
||||
font.family: iconFont.name
|
||||
font.pointSize: 18
|
||||
property alias unicode: icon.text
|
||||
FontLoader { id: iconFont; source: "/fonts/fontawesome-webfont.ttf"; }
|
||||
text: control.text
|
||||
color: control.enabled ? "white" : "dimgray"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.3 as Original
|
||||
import "../styles"
|
||||
import "../controls"
|
||||
|
8
interface/resources/qml/controls/Slider.qml
Normal file
8
interface/resources/qml/controls/Slider.qml
Normal file
|
@ -0,0 +1,8 @@
|
|||
import QtQuick.Controls 1.3 as Original
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
|
||||
import "../styles"
|
||||
import "."
|
||||
|
||||
Original.Slider {
|
||||
}
|
11
interface/resources/qml/controls/Spacer.qml
Normal file
11
interface/resources/qml/controls/Spacer.qml
Normal file
|
@ -0,0 +1,11 @@
|
|||
import QtQuick 2.4
|
||||
import "../styles"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
HifiConstants { id: hifi }
|
||||
property real size: hifi.layout.spacing
|
||||
property real multiplier: 1.0
|
||||
height: size * multiplier
|
||||
width: size * multiplier
|
||||
}
|
15
interface/resources/qml/controls/SpinBox.qml
Normal file
15
interface/resources/qml/controls/SpinBox.qml
Normal file
|
@ -0,0 +1,15 @@
|
|||
|
||||
import QtQuick.Controls 1.3 as Original
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
|
||||
import "../styles"
|
||||
import "."
|
||||
|
||||
Original.SpinBox {
|
||||
style: SpinBoxStyle {
|
||||
HifiConstants { id: hifi }
|
||||
font.family: hifi.fonts.fontFamily
|
||||
font.pointSize: hifi.fonts.fontSize
|
||||
}
|
||||
|
||||
}
|
|
@ -1,7 +1,9 @@
|
|||
import QtQuick 2.3 as Original
|
||||
import "../styles"
|
||||
|
||||
Original.Text {
|
||||
font.family: "Helvetica"
|
||||
font.pointSize: 18
|
||||
HifiConstants { id: hifi }
|
||||
font.family: hifi.fonts.fontFamily
|
||||
font.pointSize: hifi.fonts.fontSize
|
||||
}
|
||||
|
||||
|
|
24
interface/resources/qml/controls/TextAndSlider.qml
Normal file
24
interface/resources/qml/controls/TextAndSlider.qml
Normal file
|
@ -0,0 +1,24 @@
|
|||
import QtQuick 2.3 as Original
|
||||
import "../styles"
|
||||
import "."
|
||||
|
||||
Original.Item {
|
||||
property alias text: label.text
|
||||
property alias value: slider.value
|
||||
|
||||
Text {
|
||||
id: label
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
verticalAlignment: Original.Text.AlignVCenter
|
||||
}
|
||||
|
||||
Slider {
|
||||
id: slider
|
||||
width: 120
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
}
|
||||
}
|
26
interface/resources/qml/controls/TextAndSpinBox.qml
Normal file
26
interface/resources/qml/controls/TextAndSpinBox.qml
Normal file
|
@ -0,0 +1,26 @@
|
|||
import QtQuick 2.3 as Original
|
||||
import "../styles"
|
||||
import "."
|
||||
|
||||
Original.Item {
|
||||
property alias text: label.text
|
||||
property alias value: spinBox.value
|
||||
|
||||
Text {
|
||||
id: label
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
verticalAlignment: Original.Text.AlignVCenter
|
||||
text: "Minimum HMD FPS"
|
||||
}
|
||||
SpinBox {
|
||||
id: spinBox
|
||||
width: 120
|
||||
maximumValue: 240
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
}
|
||||
|
||||
}
|
|
@ -1,7 +1,9 @@
|
|||
import QtQuick 2.3 as Original
|
||||
import QtQuick.Controls 2.3 as Original
|
||||
import "../styles"
|
||||
|
||||
Original.TextArea {
|
||||
font.family: "Helvetica"
|
||||
font.pointSize: 18
|
||||
HifiConstants { id: hifi }
|
||||
font.family: hifi.fonts.fontFamily
|
||||
font.pointSize: hifi.fonts.fontSize
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
import QtQuick 2.3 as Original
|
||||
import "../styles"
|
||||
|
||||
Original.TextEdit {
|
||||
font.family: "Helvetica"
|
||||
font.pointSize: 18
|
||||
HifiConstants { id: hifi }
|
||||
font.family: hifi.fonts.fontFamily
|
||||
font.pointSize: hifi.fonts.fontSize
|
||||
}
|
||||
|
||||
|
|
9
interface/resources/qml/controls/TextHeader.qml
Normal file
9
interface/resources/qml/controls/TextHeader.qml
Normal file
|
@ -0,0 +1,9 @@
|
|||
import "."
|
||||
import "../styles"
|
||||
|
||||
Text {
|
||||
HifiConstants { id: hifi }
|
||||
color: hifi.colors.hifiBlue
|
||||
font.pointSize: hifi.fonts.headerPointSize
|
||||
font.bold: true
|
||||
}
|
|
@ -1,34 +1,36 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import QtQuick 2.3 as Original
|
||||
import "../styles"
|
||||
import "."
|
||||
|
||||
TextInput {
|
||||
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
|
||||
Original.TextInput {
|
||||
id: root
|
||||
HifiConstants { id: hifi }
|
||||
property string helperText
|
||||
font.family: "Helvetica"
|
||||
font.pointSize: 18
|
||||
width: 256
|
||||
height: 64
|
||||
color: myPalette.text
|
||||
height: hifi.layout.rowHeight
|
||||
clip: true
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
color: hifi.colors.text
|
||||
verticalAlignment: Original.TextInput.AlignVCenter
|
||||
font.family: hifi.fonts.fontFamily
|
||||
font.pointSize: hifi.fonts.fontSize
|
||||
|
||||
onTextChanged: {
|
||||
if (text == "") {
|
||||
helperText.visible = true;
|
||||
} else {
|
||||
helperText.visible = false;
|
||||
}
|
||||
|
||||
Original.Rectangle {
|
||||
// Render the rectangle as background
|
||||
z: -1
|
||||
anchors.fill: parent
|
||||
color: hifi.colors.inputBackground
|
||||
}
|
||||
|
||||
Text {
|
||||
id: helperText
|
||||
anchors.fill: parent
|
||||
font.pointSize: parent.font.pointSize
|
||||
font.family: parent.font.family
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
text: parent.helperText
|
||||
color: myPalette.dark
|
||||
clip: true
|
||||
verticalAlignment: parent.verticalAlignment
|
||||
horizontalAlignment: parent.horizontalAlignment
|
||||
text: root.helperText
|
||||
color: hifi.colors.hintText
|
||||
visible: !root.text
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
40
interface/resources/qml/controls/TextInputAndButton.qml
Normal file
40
interface/resources/qml/controls/TextInputAndButton.qml
Normal file
|
@ -0,0 +1,40 @@
|
|||
import QtQuick 2.3 as Original
|
||||
import "../styles"
|
||||
import "."
|
||||
|
||||
Original.Item {
|
||||
id: root
|
||||
HifiConstants { id: hifi }
|
||||
height: hifi.layout.rowHeight
|
||||
property string text
|
||||
property string helperText
|
||||
property string buttonText
|
||||
property int buttonWidth: 0
|
||||
property alias input: input
|
||||
property alias button: button
|
||||
signal clicked()
|
||||
|
||||
TextInput {
|
||||
id: input
|
||||
text: root.text
|
||||
helperText: root.helperText
|
||||
anchors.left: parent.left
|
||||
anchors.right: button.left
|
||||
anchors.rightMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.top: parent.top
|
||||
}
|
||||
|
||||
Button {
|
||||
id: button
|
||||
clip: true
|
||||
width: root.buttonWidth ? root.buttonWidth : implicitWidth
|
||||
text: root.buttonText
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.top: parent.top
|
||||
onClicked: root.clicked()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
import QtQuick 2.3
|
||||
|
||||
Rectangle {
|
||||
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
|
||||
property int margin: 5
|
||||
color: myPalette.window
|
||||
border.color: myPalette.dark
|
||||
border.width: 5
|
||||
radius: border.width * 2
|
||||
HifiConstants { id: hifi }
|
||||
implicitHeight: 64
|
||||
implicitWidth: 64
|
||||
color: hifi.colors.window
|
||||
border.color: hifi.colors.hifiBlue
|
||||
border.width: hifi.styles.borderWidth
|
||||
radius: hifi.styles.borderRadius
|
||||
}
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@ import "."
|
|||
import "../controls"
|
||||
|
||||
OriginalStyles.ButtonStyle {
|
||||
Original.SystemPalette { id: myPalette; colorGroup: Original.SystemPalette.Active }
|
||||
HifiConstants { id: hifi }
|
||||
padding {
|
||||
top: 8
|
||||
left: 12
|
||||
|
@ -15,10 +15,9 @@ OriginalStyles.ButtonStyle {
|
|||
anchors.fill: parent
|
||||
}
|
||||
label: Text {
|
||||
renderType: Original.Text.NativeRendering
|
||||
verticalAlignment: Original.Text.AlignVCenter
|
||||
horizontalAlignment: Original.Text.AlignHCenter
|
||||
text: control.text
|
||||
color: control.enabled ? myPalette.text : myPalette.dark
|
||||
color: control.enabled ? hifi.colors.text : hifi.colors.disabledText
|
||||
}
|
||||
}
|
||||
|
|
61
interface/resources/qml/styles/HifiConstants.qml
Normal file
61
interface/resources/qml/styles/HifiConstants.qml
Normal file
|
@ -0,0 +1,61 @@
|
|||
import QtQuick 2.4
|
||||
|
||||
Item {
|
||||
SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
|
||||
readonly property alias colors: colors
|
||||
readonly property alias layout: layout
|
||||
readonly property alias fonts: fonts
|
||||
readonly property alias styles: styles
|
||||
readonly property alias effects: effects
|
||||
|
||||
Item {
|
||||
id: colors
|
||||
readonly property color hifiBlue: "#0e7077"
|
||||
readonly property color window: sysPalette.window
|
||||
readonly property color dialogBackground: sysPalette.window
|
||||
//readonly property color dialogBackground: "#00000000"
|
||||
readonly property color inputBackground: "white"
|
||||
readonly property color background: sysPalette.dark
|
||||
readonly property color text: sysPalette.text
|
||||
readonly property color disabledText: "gray"
|
||||
readonly property color hintText: sysPalette.dark
|
||||
readonly property color light: sysPalette.light
|
||||
readonly property alias activeWindow: activeWindow
|
||||
readonly property alias inactiveWindow: inactiveWindow
|
||||
QtObject {
|
||||
id: activeWindow
|
||||
readonly property color headerBackground: "white"
|
||||
readonly property color headerText: "black"
|
||||
}
|
||||
QtObject {
|
||||
id: inactiveWindow
|
||||
readonly property color headerBackground: "gray"
|
||||
readonly property color headerText: "black"
|
||||
}
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: fonts
|
||||
readonly property real headerPointSize: 24
|
||||
readonly property string fontFamily: "Helvetica"
|
||||
readonly property real fontSize: 18
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: layout
|
||||
property int spacing: 8
|
||||
property int rowHeight: 40
|
||||
property int windowTitleHeight: 48
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: styles
|
||||
readonly property int borderWidth: 5
|
||||
readonly property int borderRadius: borderWidth * 2
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: effects
|
||||
readonly property int fadeInDuration: 400
|
||||
}
|
||||
}
|
|
@ -1,5 +1,11 @@
|
|||
import QtQuick 2.4
|
||||
|
||||
QtObject {
|
||||
Item {
|
||||
property string hifiBlue: "#0e7077"
|
||||
}
|
||||
property alias colors: colorsObj
|
||||
|
||||
Item {
|
||||
id: colorsObj
|
||||
property string hifiRed: "red"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,15 +1,10 @@
|
|||
ButtonStyle {
|
||||
background: Item { anchors.fill: parent }
|
||||
label: Text {
|
||||
label: FontAwesome {
|
||||
id: icon
|
||||
width: height
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
renderType: Text.NativeRendering
|
||||
font.family: iconFont.name
|
||||
font.pointSize: 18
|
||||
property alias unicode: icon.text
|
||||
FontLoader { id: iconFont; source: "../../fonts/fontawesome-webfont.ttf"; }
|
||||
property alias unicode: text
|
||||
text: control.text
|
||||
color: control.enabled ? "white" : "dimgray"
|
||||
color: control.enabled ? hifi.colors.text : hifi.colors.disabledText
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,22 +0,0 @@
|
|||
import QtQuick 2.4
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import "../controls"
|
||||
import "."
|
||||
|
||||
ButtonStyle {
|
||||
HifiPalette { id: hifiPalette }
|
||||
padding {
|
||||
top: 2
|
||||
left: 4
|
||||
right: 4
|
||||
bottom: 2
|
||||
}
|
||||
background: Item {}
|
||||
label: Text {
|
||||
renderType: Text.NativeRendering
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: control.text
|
||||
color: control.enabled ? "yellow" : "brown"
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue