mirror of
https://github.com/JulianGro/overte.git
synced 2025-05-07 12:39:55 +02:00
Still trying get QML gridLayouts to work
This commit is contained in:
RebeccaStankus
parent
b1fd6050c7
commit
94e71e1bdd
3 changed files with 89 additions and 92 deletions
|
|
@ -20,6 +20,7 @@ Rectangle {
|
||||||
id: root
|
id: root
|
||||||
color: simplifiedUI.colors.white
|
color: simplifiedUI.colors.white
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
property bool landscapeOrientation: root.width > root.height
|
||||||
|
|
||||||
SimplifiedConstants.SimplifiedConstants {
|
SimplifiedConstants.SimplifiedConstants {
|
||||||
id: simplifiedUI
|
id: simplifiedUI
|
||||||
|
|
@ -56,55 +57,59 @@ Rectangle {
|
||||||
id: tempAvatarPageContainer
|
id: tempAvatarPageContainer
|
||||||
visible: true
|
visible: true
|
||||||
|
|
||||||
SimplifiedControls.VerticalScrollBar {
|
|
||||||
parent: tempAvatarPageContainer
|
|
||||||
}
|
|
||||||
|
|
||||||
GridLayout {
|
GridLayout {
|
||||||
id: tempAvatarPageGrid
|
id: tempAvatarPageGrid
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.leftMargin: 180
|
anchors.leftMargin: 50
|
||||||
anchors.topMargin: 50
|
anchors.topMargin: 50
|
||||||
anchors.rightMargin: 100
|
anchors.rightMargin: 100
|
||||||
columns: root.width > root.height ? 2 : 1
|
columns: landscapeOrientation ? 2 : 1
|
||||||
rows: root.width > root.height ? 1 : 2
|
rows: landscapeOrientation ? 1 : 2
|
||||||
flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
|
|
||||||
|
Item {
|
||||||
|
id: tempAvatarImageContainer
|
||||||
|
Layout.preferredWidth: tempAvatarImage.width
|
||||||
|
Layout.preferredHeight: tempAvatarImage.height
|
||||||
|
|
||||||
|
Image {
|
||||||
|
id: tempAvatarImage
|
||||||
|
width: landscapeOrientation ? 428 : 320
|
||||||
|
height: landscapeOrientation ? 800 : 598
|
||||||
|
source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/" +
|
||||||
|
MyAvatar.skeletonModelURL.substring(MyAvatar.skeletonModelURL.indexOf("simplifiedAvatar"), MyAvatar.skeletonModelURL.lastIndexOf("/")) + ".png"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: textAndQRContainer
|
id: textAndQRContainer
|
||||||
Layout.preferredWidth: 550
|
Layout.preferredWidth: 680
|
||||||
Layout.preferredHeight: 670
|
Layout.preferredHeight: childrenRect.height
|
||||||
Layout.minimumWidth: 200
|
Layout.topMargin: landscapeOrientation ? 130 : 0
|
||||||
Layout.maximumWidth: 800
|
|
||||||
Layout.topMargin: 130
|
|
||||||
|
|
||||||
HifiStylesUit.RalewayBold {
|
HifiStylesUit.RalewayBold {
|
||||||
id: headerText
|
id: headerText
|
||||||
text: "We know this isn't you..."
|
text: "We know this isn't you..."
|
||||||
color: simplifiedUI.colors.text.darkGray
|
color: simplifiedUI.colors.text.black
|
||||||
size: 48
|
size: 48
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
height: 60
|
anchors.right: parent.right
|
||||||
width: 550
|
|
||||||
}
|
}
|
||||||
|
|
||||||
HifiStylesUit.RalewayRegular {
|
HifiStylesUit.RalewayRegular {
|
||||||
id: descriptionText
|
id: descriptionText
|
||||||
anchors.top: headerText.bottom
|
anchors.top: headerText.bottom
|
||||||
anchors.topMargin: 30
|
anchors.topMargin: 10
|
||||||
text: "but, we've given you this <b>temporary avatar</b> to use
|
text: "but, we've given you this <b>temporary avatar</b> to use
|
||||||
for today. If you see this avatar in-world, walk up and
|
for today. If you see this avatar in-world, walk up and
|
||||||
say hello to other new users!<br></br><br></br>
|
say hello to other new users!<br></br><br></br>
|
||||||
<b>We want you to be you</b> so we've built an Avatar Creator
|
<b>We want you to be you</b> so we've built an Avatar Creator
|
||||||
App that's as easy as taking a selfie and picking your
|
App that's as easy as taking a selfie and picking your
|
||||||
outfits! Available now on iOS and Android Platforms."
|
outfits! Available now on iOS and Android Platforms."
|
||||||
color: simplifiedUI.colors.text.darkGray
|
color: simplifiedUI.colors.text.black
|
||||||
size: 22
|
size: 22
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
height: 180
|
|
||||||
width: 550
|
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -112,7 +117,8 @@ Rectangle {
|
||||||
id: qrAndInstructionsContainer
|
id: qrAndInstructionsContainer
|
||||||
anchors.top: descriptionText.bottom
|
anchors.top: descriptionText.bottom
|
||||||
height: avatarAppQRCodeImage.height
|
height: avatarAppQRCodeImage.height
|
||||||
width: parent.width
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
anchors.topMargin: 50
|
anchors.topMargin: 50
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
|
|
@ -130,7 +136,7 @@ Rectangle {
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.leftMargin: 30
|
anchors.leftMargin: 30
|
||||||
text: "Use your mobile phone to scan this QR code."
|
text: "Use your mobile phone to scan this QR code."
|
||||||
color: simplifiedUI.colors.text.darkGray
|
color: simplifiedUI.colors.text.black
|
||||||
size: 22
|
size: 22
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
}
|
}
|
||||||
|
|
@ -141,7 +147,7 @@ Rectangle {
|
||||||
anchors.topMargin: 50
|
anchors.topMargin: 50
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
horizontalAlignment: Text.AlignRight
|
horizontalAlignment: Text.AlignLeft
|
||||||
text: "Continue >"
|
text: "Continue >"
|
||||||
color: simplifiedUI.colors.text.lightBlue
|
color: simplifiedUI.colors.text.lightBlue
|
||||||
opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
|
opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
|
||||||
|
|
@ -162,22 +168,10 @@ Rectangle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Item {
|
SimplifiedControls.VerticalScrollBar {
|
||||||
id: tempAvatarImageContainer
|
parent: tempAvatarPageContainer
|
||||||
Layout.leftMargin: 30
|
|
||||||
Layout.preferredWidth: tempAvatarImage.width
|
|
||||||
Layout.preferredHeight: tempAvatarImage.height
|
|
||||||
|
|
||||||
Image {
|
|
||||||
id: tempAvatarImage
|
|
||||||
width: root.width > root.height ? 428 : 320
|
|
||||||
height: root.width > root.height ? 800 : 598
|
|
||||||
source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/" +
|
|
||||||
MyAvatar.skeletonModelURL.substring(MyAvatar.skeletonModelURL.indexOf("simplifiedAvatar"), MyAvatar.skeletonModelURL.lastIndexOf("/")) + ".png"
|
|
||||||
}
|
|
||||||
// TODO move this to be above the rest of the grid layout stuff in landscape mode
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -200,7 +194,7 @@ Rectangle {
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
height: 100
|
height: 100
|
||||||
width: 850
|
width: 850
|
||||||
color: simplifiedUI.colors.darkGray
|
color: simplifiedUI.colors.text.black
|
||||||
size: 36
|
size: 36
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
}
|
}
|
||||||
|
|
@ -211,9 +205,10 @@ Rectangle {
|
||||||
anchors.topMargin: 60
|
anchors.topMargin: 60
|
||||||
anchors.bottomMargin: 80
|
anchors.bottomMargin: 80
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
columns: 2
|
|
||||||
columnSpacing: 50
|
columnSpacing: 50
|
||||||
rowSpacing: 40
|
rowSpacing: 40
|
||||||
|
columns: 2
|
||||||
|
rows: 2
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
Layout.preferredWidth: 360
|
Layout.preferredWidth: 360
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@ Rectangle {
|
||||||
id: root
|
id: root
|
||||||
color: simplifiedUI.colors.white
|
color: simplifiedUI.colors.white
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
property bool landscapeOrientation: root.width > root.height
|
||||||
|
|
||||||
SimplifiedConstants.SimplifiedConstants {
|
SimplifiedConstants.SimplifiedConstants {
|
||||||
id: simplifiedUI
|
id: simplifiedUI
|
||||||
|
|
@ -51,28 +52,39 @@ Rectangle {
|
||||||
GridLayout {
|
GridLayout {
|
||||||
id: tempAvatarPageGrid
|
id: tempAvatarPageGrid
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.leftMargin: 180
|
anchors.leftMargin: 50
|
||||||
anchors.bottomMargin: 50
|
anchors.bottomMargin: 50
|
||||||
anchors.rightMargin: 100
|
anchors.rightMargin: 50
|
||||||
columns: 2
|
columns: landscapeOrientation ? 2 : 1
|
||||||
|
rows: landscapeOrientation ? 1 : 2
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: heroImageContainer
|
||||||
|
Layout.preferredWidth: heroImage.width
|
||||||
|
Layout.preferredHeight: heroImage.height
|
||||||
|
|
||||||
|
Image {
|
||||||
|
id: heroImage
|
||||||
|
width: 428
|
||||||
|
height: 800
|
||||||
|
source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/hero.png"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: textAndQRContainer
|
id: textAndQRContainer
|
||||||
Layout.preferredWidth: 650
|
Layout.preferredWidth: 720
|
||||||
Layout.preferredHeight: 670
|
Layout.preferredHeight: childrenRect.height
|
||||||
Layout.minimumWidth: 200
|
Layout.topMargin: 150
|
||||||
Layout.maximumWidth: 800
|
|
||||||
Layout.topMargin: 180
|
|
||||||
|
|
||||||
HifiStylesUit.RalewayBold {
|
HifiStylesUit.RalewayBold {
|
||||||
id: headerText
|
id: headerText
|
||||||
text: "Stand out from the crowd!"
|
text: "Stand out from the crowd!"
|
||||||
color: simplifiedUI.colors.darkGray
|
color: simplifiedUI.colors.text.black
|
||||||
size: 48
|
size: 48
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
height: 60
|
|
||||||
}
|
}
|
||||||
|
|
||||||
HifiStylesUit.RalewayRegular {
|
HifiStylesUit.RalewayRegular {
|
||||||
|
|
@ -81,10 +93,9 @@ Rectangle {
|
||||||
anchors.top: headerText.bottom
|
anchors.top: headerText.bottom
|
||||||
anchors.topMargin: 10
|
anchors.topMargin: 10
|
||||||
text: "You can create and upload custom avatars from our Avatar Creator App. It's as easy as taking a selfie. Available now on iOS and Android Platforms."
|
text: "You can create and upload custom avatars from our Avatar Creator App. It's as easy as taking a selfie. Available now on iOS and Android Platforms."
|
||||||
color: simplifiedUI.colors.darkGray
|
color: simplifiedUI.colors.text.black
|
||||||
size: 24
|
size: 24
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
height: 80
|
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -92,40 +103,42 @@ Rectangle {
|
||||||
id: qrAndInstructionsContainer
|
id: qrAndInstructionsContainer
|
||||||
anchors.top: descriptionText.bottom
|
anchors.top: descriptionText.bottom
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
height: avatarAppQRCodeImage.height + instructionText.height + 50
|
height: avatarAppQRCodeImage.height
|
||||||
width: descriptionText.width
|
width: parent.width
|
||||||
anchors.topMargin: 60
|
anchors.topMargin: 150
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: avatarAppQRCodeImage
|
id: avatarAppQRCodeImage
|
||||||
anchors.horizontalCenter: instructionText.horizontalCenter
|
anchors.left: parent.left
|
||||||
source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/qrCode.jpg"
|
source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/qrCode.jpg"
|
||||||
height: 220
|
height: 180
|
||||||
width: 220
|
width: 180
|
||||||
}
|
}
|
||||||
|
|
||||||
HifiStylesUit.RalewayBold {
|
HifiStylesUit.RalewayBold {
|
||||||
id: instructionText
|
id: instructionText
|
||||||
anchors.left: parent.left
|
anchors.left: avatarAppQRCodeImage.right
|
||||||
anchors.topMargin: 10
|
anchors.leftMargin: 20
|
||||||
width: 515
|
anchors.verticalCenter: avatarAppQRCodeImage.verticalCenter
|
||||||
|
anchors.right: parent.right
|
||||||
anchors.top: avatarAppQRCodeImage.bottom
|
anchors.top: avatarAppQRCodeImage.bottom
|
||||||
text: "Use your mobile phone to scan this QR code."
|
text: "Use your mobile phone to scan this QR code."
|
||||||
color: simplifiedUI.colors.darkGray
|
color: simplifiedUI.colors.text.black
|
||||||
size: 24
|
size: 24
|
||||||
height: 30
|
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
HifiStylesUit.RalewayBold {
|
HifiStylesUit.RalewayBold {
|
||||||
anchors.top: qrAndInstructionsContainer.bottom
|
anchors.top: qrAndInstructionsContainer.bottom
|
||||||
anchors.topMargin: 50
|
anchors.topMargin: 150
|
||||||
anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter
|
anchors.left: parent.left
|
||||||
text: "No thanks, I'll keep using my default avatar."
|
anchors.right: parent.right
|
||||||
|
horizontalAlignment: Text.AlignLeft
|
||||||
|
text: "Continue >"
|
||||||
color: simplifiedUI.colors.text.lightBlue
|
color: simplifiedUI.colors.text.lightBlue
|
||||||
opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
|
opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
|
||||||
size: 14
|
size: 36
|
||||||
z: 1
|
z: 1
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
|
|
||||||
|
|
@ -144,21 +157,6 @@ Rectangle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
|
||||||
id: heroImageContainer
|
|
||||||
Layout.leftMargin: 30
|
|
||||||
Layout.preferredWidth: heroImage.width
|
|
||||||
Layout.preferredHeight: heroImage.height
|
|
||||||
|
|
||||||
Image {
|
|
||||||
id: heroImage
|
|
||||||
width: 428
|
|
||||||
height: 800
|
|
||||||
source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/hero.png"
|
|
||||||
}
|
|
||||||
// TODO move this to be above the rest of the grid layout stuff in landscape mode
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
SimplifiedControls.VerticalScrollBar {
|
SimplifiedControls.VerticalScrollBar {
|
||||||
|
|
|
||||||
|
|
@ -436,21 +436,25 @@ function displaySecondLaunchWindow() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeInitialLaunchWindow() {
|
function closeInitialLaunchWindow() {
|
||||||
initialLaunchWindow.fromQml.disconnect(onMessageFromInitialLaunchWindow);
|
if (initialLaunchWindow) {
|
||||||
var homeLocation = LocationBookmarks.getAddress("hqhome");
|
initialLaunchWindow.fromQml.disconnect(onMessageFromInitialLaunchWindow);
|
||||||
if (homeLocation) {
|
var homeLocation = LocationBookmarks.getAddress("hqhome");
|
||||||
Window.location = homeLocation;
|
if (homeLocation) {
|
||||||
|
Window.location = homeLocation;
|
||||||
|
}
|
||||||
|
initialLaunchWindow.close();
|
||||||
}
|
}
|
||||||
initialLaunchWindow.close();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeSecondLaunchWindow() {
|
function closeSecondLaunchWindow() {
|
||||||
secondLaunchWindow.fromQml.disconnect(onMessageFromSecondLaunchWindow);
|
if (secondLaunchWindow) {
|
||||||
var homeLocation = LocationBookmarks.getAddress("hqhome");
|
secondLaunchWindow.fromQml.disconnect(onMessageFromSecondLaunchWindow);
|
||||||
if (homeLocation) {
|
var homeLocation = LocationBookmarks.getAddress("hqhome");
|
||||||
Window.location = homeLocation;
|
if (homeLocation) {
|
||||||
|
Window.location = homeLocation;
|
||||||
|
}
|
||||||
|
secondLaunchWindow.close();
|
||||||
}
|
}
|
||||||
secondLaunchWindow.close();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var INITIAL_LAUNCH_WINDOW_MESSAGE_SOURCE = "InitialLaunchWindow.qml";
|
var INITIAL_LAUNCH_WINDOW_MESSAGE_SOURCE = "InitialLaunchWindow.qml";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue