mirror of
https://github.com/overte-org/overte.git
synced 2025-04-14 03:07:05 +02:00
Cleaning up qml
This commit is contained in:
Brad Davis
parent
3ba0df5201
commit
d2ff89aaec
28 changed files with 325 additions and 334 deletions
|
|
@ -1,10 +1,8 @@
|
|||
import Hifi 1.0
|
||||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import "controls"
|
||||
|
||||
CustomDialog {
|
||||
Dialog {
|
||||
title: "Go to..."
|
||||
objectName: "AddressBarDialog"
|
||||
height: 128
|
||||
|
|
@ -36,14 +34,14 @@ CustomDialog {
|
|||
anchors.margins: parent.margins
|
||||
anchors.topMargin: parent.topMargin
|
||||
|
||||
CustomBorder {
|
||||
Border {
|
||||
height: 64
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
anchors.right: goButton.left
|
||||
anchors.rightMargin: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
CustomTextInput {
|
||||
TextInput {
|
||||
id: addressLine
|
||||
anchors.fill: parent
|
||||
helperText: "domain, location, @user, /x,y,z"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Dialogs 1.2
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import QtWebKit 3.0
|
||||
import "controls"
|
||||
|
||||
CustomDialog {
|
||||
title: "Test Dlg"
|
||||
Dialog {
|
||||
title: "Browser Window"
|
||||
id: testDialog
|
||||
objectName: "Browser"
|
||||
width: 1280
|
||||
|
|
@ -18,7 +16,6 @@ CustomDialog {
|
|||
anchors.fill: parent
|
||||
anchors.margins: parent.margins
|
||||
anchors.topMargin: parent.topMargin
|
||||
|
||||
|
||||
ScrollView {
|
||||
anchors.fill: parent
|
||||
|
|
@ -30,16 +27,4 @@ CustomDialog {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.3
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
|
||||
Button {
|
||||
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
|
||||
text: "Text"
|
||||
style: ButtonStyle {
|
||||
padding {
|
||||
top: 8
|
||||
left: 12
|
||||
right: 12
|
||||
bottom: 8
|
||||
}
|
||||
background: CustomBorder {
|
||||
anchors.fill: parent
|
||||
}
|
||||
label: CustomText {
|
||||
renderType: Text.NativeRendering
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: control.text
|
||||
color: control.enabled ? myPalette.text : myPalette.dark
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
|
||||
TextArea {
|
||||
font.family: "Helvetica"
|
||||
font.pointSize: 18
|
||||
backgroundVisible: false
|
||||
readOnly: true
|
||||
}
|
||||
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import QtQuick 1.0
|
||||
|
||||
Image {
|
||||
id: icon
|
||||
width: 64
|
||||
height: 64
|
||||
source: "file.svg"
|
||||
}
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
import Hifi 1.0
|
||||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import "hifiConstants.js" as HifiConstants
|
||||
import "controls"
|
||||
|
||||
CustomDialog {
|
||||
Dialog {
|
||||
title: "Login"
|
||||
HifiPalette { id: hifiPalette }
|
||||
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
|
||||
objectName: "LoginDialog"
|
||||
height: 512
|
||||
|
|
@ -50,11 +49,11 @@ CustomDialog {
|
|||
source: "../images/hifi-logo.svg"
|
||||
}
|
||||
|
||||
CustomBorder {
|
||||
Border {
|
||||
width: 304
|
||||
height: 64
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
CustomTextInput {
|
||||
TextInput {
|
||||
id: username
|
||||
anchors.fill: parent
|
||||
helperText: "Username or Email"
|
||||
|
|
@ -67,11 +66,11 @@ CustomDialog {
|
|||
}
|
||||
}
|
||||
|
||||
CustomBorder {
|
||||
Border {
|
||||
width: 304
|
||||
height: 64
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
CustomTextInput {
|
||||
TextInput {
|
||||
id: password
|
||||
anchors.fill: parent
|
||||
echoMode: TextInput.Password
|
||||
|
|
@ -94,7 +93,7 @@ CustomDialog {
|
|||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Text {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
textFormat: Text.StyledText
|
||||
width: parent.width
|
||||
|
|
@ -117,7 +116,7 @@ CustomDialog {
|
|||
width: 192
|
||||
height: 64
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: HifiConstants.color
|
||||
color: hifiPalette.hifiBlue
|
||||
border.width: 0
|
||||
radius: 10
|
||||
|
||||
|
|
@ -142,7 +141,7 @@ CustomDialog {
|
|||
width: 32
|
||||
source: "../images/login.svg"
|
||||
}
|
||||
CustomText {
|
||||
Text {
|
||||
text: "Login"
|
||||
color: "white"
|
||||
width: 64
|
||||
|
|
@ -152,7 +151,7 @@ CustomDialog {
|
|||
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Text {
|
||||
width: parent.width
|
||||
height: 24
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
|
@ -160,7 +159,7 @@ CustomDialog {
|
|||
text:"Create Account"
|
||||
font.pointSize: 12
|
||||
font.bold: true
|
||||
color: HifiConstants.color
|
||||
color: hifiPalette.hifiBlue
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
|
|
@ -170,14 +169,14 @@ CustomDialog {
|
|||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Text {
|
||||
width: parent.width
|
||||
height: 24
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pointSize: 12
|
||||
text: "Recover Password"
|
||||
color: HifiConstants.color
|
||||
color: hifiPalette.hifiBlue
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
import Hifi 1.0
|
||||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Dialogs 1.2
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import QtWebKit 3.0
|
||||
import "controls"
|
||||
|
||||
CustomDialog {
|
||||
Dialog {
|
||||
title: "Test Dlg"
|
||||
id: testDialog
|
||||
objectName: "Browser"
|
||||
|
|
|
|||
12
interface/resources/qml/MenuTest.qml
Normal file
12
interface/resources/qml/MenuTest.qml
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import QtQuick 2.4
|
||||
import QtQuick.Controls 1.3
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "red"
|
||||
}
|
||||
}
|
||||
|
|
@ -43,8 +43,9 @@ import QtQuick 2.2
|
|||
import QtQuick.Controls 1.2
|
||||
import QtQuick.Window 2.1
|
||||
import QtQuick.Dialogs 1.2
|
||||
import "controls"
|
||||
|
||||
CustomDialog {
|
||||
Dialog {
|
||||
id: root
|
||||
property real spacing: 8
|
||||
property real outerSpacing: 16
|
||||
|
|
@ -179,115 +180,115 @@ CustomDialog {
|
|||
spacing: root.spacing
|
||||
layoutDirection: Qt.RightToLeft
|
||||
width: parent.width
|
||||
CustomButton {
|
||||
Button {
|
||||
id: okButton
|
||||
text: qsTr("OK")
|
||||
onClicked: content.click(StandardButton.Ok)
|
||||
visible: content.standardButtons & StandardButton.Ok
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: openButton
|
||||
text: qsTr("Open")
|
||||
onClicked: content.click(StandardButton.Open)
|
||||
visible: content.standardButtons & StandardButton.Open
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: saveButton
|
||||
text: qsTr("Save")
|
||||
onClicked: content.click(StandardButton.Save)
|
||||
visible: content.standardButtons & StandardButton.Save
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: saveAllButton
|
||||
text: qsTr("Save All")
|
||||
onClicked: content.click(StandardButton.SaveAll)
|
||||
visible: content.standardButtons & StandardButton.SaveAll
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: retryButton
|
||||
text: qsTr("Retry")
|
||||
onClicked: content.click(StandardButton.Retry)
|
||||
visible: content.standardButtons & StandardButton.Retry
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: ignoreButton
|
||||
text: qsTr("Ignore")
|
||||
onClicked: content.click(StandardButton.Ignore)
|
||||
visible: content.standardButtons & StandardButton.Ignore
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: applyButton
|
||||
text: qsTr("Apply")
|
||||
onClicked: content.click(StandardButton.Apply)
|
||||
visible: content.standardButtons & StandardButton.Apply
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: yesButton
|
||||
text: qsTr("Yes")
|
||||
onClicked: content.click(StandardButton.Yes)
|
||||
visible: content.standardButtons & StandardButton.Yes
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: yesAllButton
|
||||
text: qsTr("Yes to All")
|
||||
onClicked: content.click(StandardButton.YesToAll)
|
||||
visible: content.standardButtons & StandardButton.YesToAll
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: noButton
|
||||
text: qsTr("No")
|
||||
onClicked: content.click(StandardButton.No)
|
||||
visible: content.standardButtons & StandardButton.No
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: noAllButton
|
||||
text: qsTr("No to All")
|
||||
onClicked: content.click(StandardButton.NoToAll)
|
||||
visible: content.standardButtons & StandardButton.NoToAll
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: discardButton
|
||||
text: qsTr("Discard")
|
||||
onClicked: content.click(StandardButton.Discard)
|
||||
visible: content.standardButtons & StandardButton.Discard
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: resetButton
|
||||
text: qsTr("Reset")
|
||||
onClicked: content.click(StandardButton.Reset)
|
||||
visible: content.standardButtons & StandardButton.Reset
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: restoreDefaultsButton
|
||||
text: qsTr("Restore Defaults")
|
||||
onClicked: content.click(StandardButton.RestoreDefaults)
|
||||
visible: content.standardButtons & StandardButton.RestoreDefaults
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: cancelButton
|
||||
text: qsTr("Cancel")
|
||||
onClicked: content.click(StandardButton.Cancel)
|
||||
visible: content.standardButtons & StandardButton.Cancel
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: abortButton
|
||||
text: qsTr("Abort")
|
||||
onClicked: content.click(StandardButton.Abort)
|
||||
visible: content.standardButtons & StandardButton.Abort
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: closeButton
|
||||
text: qsTr("Close")
|
||||
onClicked: content.click(StandardButton.Close)
|
||||
visible: content.standardButtons & StandardButton.Close
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: moreButton
|
||||
text: qsTr("Show Details...")
|
||||
onClicked: content.state = (content.state === "" ? "expanded" : "")
|
||||
visible: content.detailedText.length > 0
|
||||
}
|
||||
CustomButton {
|
||||
Button {
|
||||
id: helpButton
|
||||
text: qsTr("Help")
|
||||
onClicked: content.click(StandardButton.Help)
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Dialogs 1.2
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
|
||||
Rectangle {
|
||||
color: "teal"
|
||||
|
|
@ -150,87 +147,4 @@ Rectangle {
|
|||
Rectangle { height: parent.height; width: 16; color: spd.highlightedText}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
CustomDialog {
|
||||
title: "Test Dlg"
|
||||
anchors.fill: parent
|
||||
|
||||
Rectangle {
|
||||
property int d: 100
|
||||
id: square
|
||||
objectName: "testRect"
|
||||
width: d
|
||||
height: d
|
||||
anchors.centerIn: parent
|
||||
color: "red"
|
||||
NumberAnimation on rotation { from: 0; to: 360; duration: 2000; loops: Animation.Infinite; }
|
||||
}
|
||||
|
||||
|
||||
CustomTextEdit {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
clip: true
|
||||
text: "test edit"
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: parent.titleSize + 12
|
||||
}
|
||||
|
||||
CustomButton {
|
||||
x: 128
|
||||
y: 192
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 12
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
onClicked: {
|
||||
console.log("Click");
|
||||
if (square.visible) {
|
||||
square.visible = false
|
||||
} else {
|
||||
square.visible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomButton {
|
||||
id: customButton2
|
||||
y: 192
|
||||
text: "Close"
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 12
|
||||
onClicked: {
|
||||
onClicked: testDialog.x == 0 ? testDialog.x = 200 : testDialog.x = 0
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onPressed: {
|
||||
console.log("Key " + event.key);
|
||||
switch (event.key) {
|
||||
case Qt.Key_Q:
|
||||
if (Qt.ControlModifier == event.modifiers) {
|
||||
event.accepted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import Hifi 1.0
|
||||
import QtQuick 2.3
|
||||
|
||||
// This is our primary 'window' object to which all dialogs and controls will
|
||||
// be childed.
|
||||
Root {
|
||||
id: root
|
||||
width: 1280
|
||||
height: 720
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Dialogs 1.2
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import "controls"
|
||||
|
||||
CustomDialog {
|
||||
Dialog {
|
||||
title: "Test Dialog"
|
||||
id: testDialog
|
||||
objectName: "TestDialog"
|
||||
|
|
@ -37,7 +36,7 @@ CustomDialog {
|
|||
}
|
||||
|
||||
|
||||
CustomTextEdit {
|
||||
TextEdit {
|
||||
id: edit
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
|
|
@ -49,7 +48,7 @@ CustomDialog {
|
|||
anchors.topMargin: 12
|
||||
}
|
||||
|
||||
CustomButton {
|
||||
Button {
|
||||
x: 128
|
||||
y: 192
|
||||
text: "Test"
|
||||
|
|
@ -68,7 +67,7 @@ CustomDialog {
|
|||
}
|
||||
}
|
||||
|
||||
CustomButton {
|
||||
Button {
|
||||
id: customButton2
|
||||
y: 192
|
||||
text: "Move"
|
||||
|
|
@ -92,15 +91,4 @@ CustomDialog {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,12 +1,26 @@
|
|||
import Hifi 1.0
|
||||
import QtQuick 2.3
|
||||
// Import local folder last so that our own control customizations override
|
||||
// the built in ones
|
||||
import "controls"
|
||||
|
||||
Root {
|
||||
id: root
|
||||
width: 1280
|
||||
height: 720
|
||||
anchors.fill: parent
|
||||
|
||||
CustomButton {
|
||||
onWidthChanged: {
|
||||
console.log("Root width: " + width)
|
||||
}
|
||||
onHeightChanged: {
|
||||
console.log("Root height: " + height)
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
console.log("Completed root")
|
||||
root.forceActiveFocus()
|
||||
}
|
||||
|
||||
Button {
|
||||
id: messageBox
|
||||
anchors.right: createDialog.left
|
||||
anchors.rightMargin: 24
|
||||
|
|
@ -20,7 +34,7 @@ Root {
|
|||
}
|
||||
}
|
||||
|
||||
CustomButton {
|
||||
Button {
|
||||
id: createDialog
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 24
|
||||
|
|
@ -28,8 +42,12 @@ Root {
|
|||
anchors.bottomMargin: 24
|
||||
text: "Create"
|
||||
onClicked: {
|
||||
root.loadChild("TestDialog.qml");
|
||||
root.loadChild("MenuTest.qml");
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onPressed: {
|
||||
console.log(event.key);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
10
interface/resources/qml/controls/Button.qml
Normal file
10
interface/resources/qml/controls/Button.qml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.3 as Original
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import "."
|
||||
import "../styles"
|
||||
|
||||
Original.Button {
|
||||
style: ButtonStyle {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +1,78 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.2
|
||||
import QtQuick.Window 2.2
|
||||
import QtQuick.Dialogs 1.2
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import "hifiConstants.js" as HifiConstants
|
||||
import "."
|
||||
import "../styles"
|
||||
|
||||
/*
|
||||
* FIXME Need to create a client property here so that objects can be
|
||||
* placed in it without having to think about positioning within the outer
|
||||
* window.
|
||||
*
|
||||
* Examine the QML ApplicationWindow.qml source for how it does this
|
||||
*
|
||||
*/
|
||||
Item {
|
||||
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
|
||||
id: dialog
|
||||
width: 256
|
||||
height: 256
|
||||
scale: 0.0
|
||||
enabled: false
|
||||
id: root
|
||||
|
||||
HifiPalette { id: hifiPalette }
|
||||
SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
|
||||
|
||||
property int animationDuration: 400
|
||||
property bool destroyOnInvisible: false
|
||||
property bool destroyOnCloseButton: true
|
||||
property bool resizable: false
|
||||
property int minX: 256
|
||||
property int minY: 256
|
||||
clip: true
|
||||
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
|
||||
enabled: false
|
||||
scale: 0.0
|
||||
|
||||
/*
|
||||
* Support for animating the dialog in and out.
|
||||
*/
|
||||
|
||||
// The offscreen UI will enable an object, rather than manipulating it's
|
||||
// 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.
|
||||
onEnabledChanged: {
|
||||
scale = enabled ? 1.0 : 0.0
|
||||
}
|
||||
|
||||
|
||||
// The actual animator
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: root.animationDuration
|
||||
easing.type: Easing.InOutBounce
|
||||
}
|
||||
}
|
||||
|
||||
// We remove any load the dialog might have on the QML by toggling it's
|
||||
// visibility based on the state of the animated property
|
||||
onScaleChanged: {
|
||||
visible = (scale != 0.0);
|
||||
}
|
||||
|
||||
// Some dialogs should be destroyed when they become invisible, so handle that
|
||||
onVisibleChanged: {
|
||||
if (!visible && destroyOnInvisible) {
|
||||
console.log("Destroying closed component");
|
||||
destroy();
|
||||
}
|
||||
}
|
||||
|
||||
// our close function performs the same way as the OffscreenUI class:
|
||||
// don't do anything but manipulate the enabled flag and let the other
|
||||
// mechanisms decide if the window should be destoryed after the close
|
||||
// animation completes
|
||||
function close() {
|
||||
if (destroyOnCloseButton) {
|
||||
destroyOnInvisible = true
|
||||
|
|
@ -42,102 +80,14 @@ Item {
|
|||
enabled = false;
|
||||
}
|
||||
|
||||
/*
|
||||
* Resize support
|
||||
*/
|
||||
function deltaSize(dx, dy) {
|
||||
width = Math.max(width + dx, minX)
|
||||
height = Math.max(height + dy, minY)
|
||||
}
|
||||
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
//This specifies how long the animation takes
|
||||
duration: dialog.animationDuration
|
||||
//This selects an easing curve to interpolate with, the default is Easing.Linear
|
||||
easing.type: Easing.InOutBounce
|
||||
}
|
||||
}
|
||||
|
||||
property int topMargin: dialog.height - clientBorder.height + 8
|
||||
property int margins: 8
|
||||
property string title
|
||||
property int titleSize: titleBorder.height + 12
|
||||
property string frameColor: HifiConstants.color
|
||||
property string backgroundColor: myPalette.window
|
||||
property string headerBackgroundColor: myPalette.dark
|
||||
|
||||
CustomBorder {
|
||||
id: windowBorder
|
||||
anchors.fill: parent
|
||||
border.color: dialog.frameColor
|
||||
color: dialog.backgroundColor
|
||||
|
||||
CustomBorder {
|
||||
id: titleBorder
|
||||
height: 48
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
border.color: dialog.frameColor
|
||||
color: dialog.headerBackgroundColor
|
||||
|
||||
CustomText {
|
||||
id: titleText
|
||||
color: "white"
|
||||
text: dialog.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: dialog
|
||||
minimumX: 0
|
||||
minimumY: 0
|
||||
maximumX: dialog.parent ? dialog.parent.width - dialog.width : 0
|
||||
maximumY: dialog.parent ? dialog.parent.height - dialog.height : 0
|
||||
}
|
||||
}
|
||||
Image {
|
||||
id: closeButton
|
||||
x: 360
|
||||
height: 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 16
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
source: "../styles/close.svg"
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
dialog.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
} // header border
|
||||
|
||||
CustomBorder {
|
||||
id: clientBorder
|
||||
border.color: dialog.frameColor
|
||||
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
|
||||
|
||||
MouseArea {
|
||||
id: sizeDrag
|
||||
property int startX
|
||||
|
|
@ -152,11 +102,91 @@ Item {
|
|||
startY = mouseY
|
||||
}
|
||||
onPositionChanged: {
|
||||
if (pressed && dialog.resizable) {
|
||||
dialog.deltaSize((mouseX - startX), (mouseY - startY))
|
||||
if (pressed && root.resizable) {
|
||||
root.deltaSize((mouseX - startX), (mouseY - startY))
|
||||
startX = mouseX
|
||||
startY = mouseY
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Window decorations, with a title bar and frames
|
||||
*/
|
||||
Border {
|
||||
id: windowBorder
|
||||
anchors.fill: parent
|
||||
border.color: root.frameColor
|
||||
color: root.backgroundColor
|
||||
|
||||
Border {
|
||||
id: titleBorder
|
||||
height: 48
|
||||
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.verticalCenter: parent.verticalCenter
|
||||
width: 16
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
source: "../../styles/close.svg"
|
||||
MouseArea {
|
||||
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
|
||||
|
||||
}
|
||||
9
interface/resources/qml/controls/MenuButton.qml
Normal file
9
interface/resources/qml/controls/MenuButton.qml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick.Controls 1.3 as Original
|
||||
import QtQuick.Controls.Styles 1.3
|
||||
import "../styles"
|
||||
|
||||
Original.Button {
|
||||
style: MenuButtonStyle {
|
||||
}
|
||||
}
|
||||
2
interface/resources/qml/controls/README.md
Normal file
2
interface/resources/qml/controls/README.md
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
These are our own custom controls with the same names as existing controls, but
|
||||
customized for readability / usability in VR.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick 2.3 as Original
|
||||
|
||||
TextEdit {
|
||||
Original.Text {
|
||||
font.family: "Helvetica"
|
||||
font.pointSize: 18
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import QtQuick 2.3
|
||||
import QtQuick 2.3 as Original
|
||||
|
||||
Text {
|
||||
Original.TextArea {
|
||||
font.family: "Helvetica"
|
||||
font.pointSize: 18
|
||||
}
|
||||
7
interface/resources/qml/controls/TextEdit.qml
Normal file
7
interface/resources/qml/controls/TextEdit.qml
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import QtQuick 2.3 as Original
|
||||
|
||||
Original.TextEdit {
|
||||
font.family: "Helvetica"
|
||||
font.pointSize: 18
|
||||
}
|
||||
|
||||
|
|
@ -3,7 +3,7 @@ import QtQuick.Controls 1.2
|
|||
|
||||
TextInput {
|
||||
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
|
||||
property string helperText: ""
|
||||
property string helperText
|
||||
font.family: "Helvetica"
|
||||
font.pointSize: 18
|
||||
width: 256
|
||||
|
|
@ -24,7 +24,7 @@ TextInput {
|
|||
id: helperText
|
||||
anchors.fill: parent
|
||||
font.pointSize: parent.font.pointSize
|
||||
font.family: "Helvetica"
|
||||
font.family: parent.font.family
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
text: parent.helperText
|
||||
color: myPalette.dark
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
var color = "#0e7077"
|
||||
var Colors = {
|
||||
hifiBlue: "#0e7077"
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import QtQuick 2.3
|
||||
|
||||
|
||||
Rectangle {
|
||||
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
|
||||
property int margin: 5
|
||||
24
interface/resources/qml/styles/ButtonStyle.qml
Normal file
24
interface/resources/qml/styles/ButtonStyle.qml
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import QtQuick 2.4 as Original
|
||||
import QtQuick.Controls.Styles 1.3 as OriginalStyles
|
||||
import "."
|
||||
import "../controls"
|
||||
|
||||
OriginalStyles.ButtonStyle {
|
||||
Original.SystemPalette { id: myPalette; colorGroup: Original.SystemPalette.Active }
|
||||
padding {
|
||||
top: 8
|
||||
left: 12
|
||||
right: 12
|
||||
bottom: 8
|
||||
}
|
||||
background: Border {
|
||||
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
|
||||
}
|
||||
}
|
||||
5
interface/resources/qml/styles/HifiPalette.qml
Normal file
5
interface/resources/qml/styles/HifiPalette.qml
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import QtQuick 2.4
|
||||
|
||||
QtObject {
|
||||
property string hifiBlue: "#0e7077"
|
||||
}
|
||||
15
interface/resources/qml/styles/IconButtonStyle.qml
Normal file
15
interface/resources/qml/styles/IconButtonStyle.qml
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
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"
|
||||
}
|
||||
}
|
||||
24
interface/resources/qml/styles/MenuButtonStyle.qml
Normal file
24
interface/resources/qml/styles/MenuButtonStyle.qml
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import "../controls"
|
||||
import "."
|
||||
|
||||
ButtonStyle {
|
||||
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
|
||||
padding {
|
||||
top: 8
|
||||
left: 12
|
||||
right: 12
|
||||
bottom: 8
|
||||
}
|
||||
background: Border {
|
||||
anchors.fill: parent
|
||||
color: "#00000000"
|
||||
borderColor: "red"
|
||||
}
|
||||
label: Text {
|
||||
renderType: Text.NativeRendering
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: control.text
|
||||
color: control.enabled ? myPalette.text : myPalette.dark
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue