Mirrors/overte-AleziaKurdis
3
0
Fork 0
mirror of https://github.com/AleziaKurdis/overte.git synced 2025-04-07 13:12:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

add spinner/design updates/fix steam link

Browse source
This commit is contained in:
Wayne Chen 2018-12-07 15:17:33 -08:00
parent a2572d5710
commit 23d3b96446
13 changed files with 239 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -63,7 +63,7 @@ FocusScope {
id: opaqueRect
height: parent.height
width: parent.width
opacity: 0.5
opacity: 0.65
color: "black"
}

140
interface/resources/qml/LoginDialog/CantAccessBody.qml
View file

@ -1,140 +0,0 @@
//
// CantAccessBody.qml
//
// Created by Wayne Chen on 11/28/18
// 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 Hifi 1.0
import QtQuick 2.4
import controlsUit 1.0 as HifiControlsUit
import stylesUit 1.0 as HifiStylesUit
Item {
id: cantAccessBody
clip: true
width: root.width
height: root.height
property int textFieldHeight: 31
property string fontFamily: "Raleway"
property int fontSize: 15
property int textFontSize: 24
property bool fontBold: true
QtObject {
id: d
readonly property int minWidth: 480
readonly property int minWidthButton: !root.isTablet ? 256 : 174
property int maxWidth: root.isTablet ? 1280 : root.width
readonly property int minHeight: 120
// readonly property int minHeightButton: !root.isTablet ? 56 : 42
readonly property int minHeightButton: 36
property int maxHeight: root.isTablet ? 720 : root.height
function resize() {
maxWidth = root.isTablet ? 1280 : root.width;
maxHeight = root.isTablet ? 720 : root.height;
var targetWidth = Math.max(titleWidth, mainContainer.width);
var targetHeight = hifi.dimensions.contentSpacing.y + mainContainer.height + 4 * hifi.dimensions.contentSpacing.y;
var newWidth = Math.max(d.minWidth, Math.min(d.maxWidth, targetWidth));
if (!isNaN(newWidth)) {
parent.width = root.width = newWidth;
}
parent.height = root.height = Math.max(d.minHeight, Math.min(d.maxHeight, targetHeight)) + hifi.dimensions.contentSpacing.y;
}
}
Item {
id: mainContainer
anchors.fill: parent
onHeightChanged: d.resize(); onWidthChanged: d.resize();
Item {
id: textContainer
width: parent.width
height: 0.45 * parent.height
anchors {
top: parent.top
topMargin: bannerContainer.height + 0.25 * parent.height
left: parent.left
}
TextMetrics {
id: titleTextMetrics
font: titleText.font
text: titleText.text
}
Text {
id: titleText
anchors {
top: parent.top
topMargin: 0.2 * parent.height
left: parent.left
leftMargin: (parent.width - titleTextMetrics.width) / 2
}
text: qsTr("Can't Access Account")
font.pixelSize: cantAccessBody.textFontSize + 10
font.bold: cantAccessBody.fontBold
color: "white"
lineHeight: 2
lineHeightMode: Text.ProportionalHeight
horizontalAlignment: Text.AlignHCenter
}
TextMetrics {
id: bodyTextMetrics
font: bodyText.font
text: bodyText.text
}
Text {
id: bodyText
anchors {
top: titleText.bottom
topMargin: hifi.dimensions.contentSpacing.y
left: parent.left
}
text: qsTr("Please navigate to your default browser to recover your account.\nIf you are in a VR headset, please take it off.")
font.pixelSize: cantAccessBody.textFontSize
color: "white"
wrapMode: Text.WordWrap
lineHeight: 1
lineHeightMode: Text.ProportionalHeight
horizontalAlignment: Text.AlignHCenter
Component.onCompleted: {
bodyText.text = root.isTablet ? qsTr("Please navigate to your default browser\nto recover your account.\nIf you are in a VR headset, please take it off.") :
qsTr("Please navigate to your default browser to recover your account.\nIf you are in a VR headset,\nplease take it off.");
bodyTextMetrics.text = bodyText.text;
bodyText
bodyText.anchors.leftMargin = (parent.width - bodyTextMetrics.width) / 2;
}
}
}
HifiControlsUit.Button {
id: okButton
height: d.minHeightButton
anchors {
bottom: parent.bottom
right: parent.right
margins: 3 * hifi.dimensions.contentSpacing.y
}
text: qsTr("OK")
fontFamily: cantAccessBody.fontFamily
fontSize: cantAccessBody.fontSize
fontBold: cantAccessBody.fontBold
onClicked: {
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": ""});
}
}
}
Component.onCompleted: {
d.resize();
}
}

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

@ -33,10 +33,10 @@ Item {
id: d
readonly property int minWidth: 480
readonly property int minWidthButton: !root.isTablet ? 256 : 174
property int maxWidth: root.isTablet ? 1280 : root.width
property int maxWidth: root.width
readonly property int minHeight: 120
readonly property int minHeightButton: 36
property int maxHeight: root.isTablet ? 720 : root.height
property int maxHeight: root.height
function resize() {
maxWidth = root.isTablet ? 1280 : root.width;

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

@ -13,6 +13,8 @@ import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4 as OriginalStyles
import "." as LoginDialog
import controlsUit 1.0 as HifiControlsUit
import stylesUit 1.0 as HifiStylesUit
import TabletScriptingInterface 1.0
@ -43,10 +45,10 @@ Item {
id: d
readonly property int minWidth: 480
readonly property int minWidthButton: !root.isTablet ? 256 : 174
property int maxWidth: root.isTablet ? 1280 : root.width
property int maxWidth: root.width
readonly property int minHeight: 120
readonly property int minHeightButton: 36
property int maxHeight: root.isTablet ? 720 : root.height
property int maxHeight: root.height
function resize() {
maxWidth = root.isTablet ? 1280 : root.width;
@ -96,16 +98,24 @@ Item {
height: root.height
onHeightChanged: d.resize(); onWidthChanged: d.resize();
LoginDialog.LoginDialogLightbox {
id: lightboxPopup;
visible: false;
anchors.fill: parent;
}
Item {
id: loginContainer
width: emailField.width
height: 0.45 * parent.height
height: errorContainer.height + emailField.height + passwordField.height + 5.5 * hifi.dimensions.contentSpacing.y +
keepMeLoggedInCheckbox.height + loginButton.height + cantAccessTextMetrics.height + continueButton.height
anchors {
top: parent.top
topMargin: root.bannerHeight + 0.25 * parent.height
left: parent.left
leftMargin: (parent.width - emailField.width) / 2
}
Item {
id: errorContainer
width: loginErrorMessageTextMetrics.width
@ -316,6 +326,11 @@ Item {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
TextMetrics {
id: cantAccessTextMetrics
font: cantAccessText.font
text: "Can't access your account?"
}
HifiStylesUit.ShortcutText {
id: cantAccessText
z: 10
@ -337,7 +352,14 @@ Item {
onLinkActivated: {
Tablet.playSound(TabletEnums.ButtonClick);
loginDialog.openUrl(link);
bodyLoader.setSource("CantAccessBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
lightboxPopup.titleText = "Can't Access Account";
lightboxPopup.bodyText = lightboxPopup.cantAccessBodyText;
lightboxPopup.button2text = "CLOSE";
lightboxPopup.button2method = function() {
lightboxPopup.visible = false;
}
lightboxPopup.visible = true;
// bodyLoader.setSource("CantAccessBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
}
}
HifiControlsUit.Button {
@ -355,6 +377,7 @@ Item {
fontSize: linkAccountBody.fontSize
fontBold: linkAccountBody.fontBold
buttonGlyph: hifi.glyphs.steamSquare
buttonGlyphSize: 24
buttonGlyphRightMargin: 10
onClicked: {
// if (loginDialog.isOculusStoreRunning()) {
@ -395,7 +418,7 @@ Item {
anchors {
left: loginContainer.left
top: loginContainer.bottom
topMargin: 0.05 * parent.height
topMargin: 0.15 * parent.height
}
TextMetrics {
id: signUpTextMetrics
@ -500,6 +523,9 @@ Item {
root.text = "";
d.resize();
init();
Qt.callLater(function() {
emailField.forceActiveFocus();
});
}
Keys.onPressed: {

33
interface/resources/qml/LoginDialog/LoggingInBody.qml
View file

@ -32,10 +32,10 @@ Item {
id: d
readonly property int minWidth: 480
readonly property int minWidthButton: !root.isTablet ? 256 : 174
property int maxWidth: root.isTablet ? 1280 : root.width
property int maxWidth: root.width
readonly property int minHeight: 120
readonly property int minHeightButton: !root.isTablet ? 56 : 42
property int maxHeight: root.isTablet ? 720 : root.height
readonly property int minHeightButton: 36
property int maxHeight: root.height
function resize() {
maxWidth = root.isTablet ? 1280 : root.width;
@ -68,7 +68,12 @@ Item {
function init() {
// For the process of logging in.
loggingInText.wrapMode = Text.NoWrap;
if (loggingInBody.withSteam) {
if (loggingInBody.linkSteam) {
loggingInText.centerIn = loggingInHeader;
loggingInText.text = "Linking to Steam";
loginDialog.linkSteam();
} else if (loggingInBody.withSteam) {
loggingInGlyph.visible = true;
loggingInText.text = "Logging in to Steam";
loggingInText.x = loggingInHeader.width/2 - loggingInTextMetrics.width/2 + loggingInGlyphTextMetrics.width/2;
@ -78,6 +83,7 @@ Item {
loggingInText.text = "Logging in to Oculus";
loggingInText.x = loggingInHeader.width/2 - loggingInTextMetrics.width/2 + loggingInGlyphTextMetrics.width/2;
} else {
loggingInText.centerIn = loggingInHeader;
loggingInText.text = "Logging in";
loggingInText.anchors.bottom = loggingInHeader.bottom;
loggingInText.anchors.bottomMargin = hifi.dimensions.contentSpacing.y;
@ -123,9 +129,11 @@ Item {
Item {
id: loggingInHeader
width: parent.width
height: 0.5 * parent.height
height: loggingInGlyph.height
anchors {
top: parent.top
topMargin: 0.4 * parent.height
left: parent.left
}
TextMetrics {
id: loggingInGlyphTextMetrics;
@ -138,12 +146,11 @@ Item {
// Color
color: "white";
// Size
size: 31;
size: 36;
// Anchors
anchors.right: loggingInText.left;
anchors.rightMargin: loggingInBody.loggingInGlyphRightMargin
anchors.bottom: parent.bottom;
anchors.bottomMargin: hifi.dimensions.contentSpacing.y
// Alignment
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
@ -158,13 +165,10 @@ Item {
Text {
id: loggingInText;
width: loggingInTextMetrics.width
anchors.bottom: parent.bottom;
anchors.bottomMargin: hifi.dimensions.contentSpacing.y
anchors.left: parent.left;
anchors.leftMargin: (parent.width - loggingInTextMetrics.width) / 2
anchors.verticalCenter: parent.verticalCenter
color: "white";
font.family: loggingInBody.fontFamily
font.pixelSize: loggingInBody.fontSize
font.pixelSize: 24
font.bold: loggingInBody.fontBold
wrapMode: Text.NoWrap
verticalAlignment: Text.AlignVCenter
@ -178,11 +182,12 @@ Item {
height: 0.5 * parent.height
anchors {
top: loggingInHeader.bottom
topMargin: 2 * hifi.dimensions.contentSpacing.y
}
AnimatedImage {
id: loggingInSpinner
source: "images/loader-snake-298-b.gif"
width: 128
source: "images/loader-snake-256.gif"
width: 64
height: width
anchors.left: parent.left;
anchors.leftMargin: (parent.width - width) / 2;

170
interface/resources/qml/LoginDialog/LoginDialogLightbox.qml Normal file
View file

@ -0,0 +1,170 @@
//
// LoginDialogLightbox.qml
// qml/LoginDialog
//
// LoginDialogLightbox
//
// Created by Wayne Chen on 2018-12-07
// 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 Hifi 1.0 as Hifi
import QtQuick 2.5
import QtGraphicalEffects 1.0
import stylesUit 1.0
import controlsUit 1.0 as HifiControlsUit
import "qrc:////qml//controls" as HifiControls
// references XXX from root context
Rectangle {
property string titleText;
property string bodyImageSource;
property string bodyText;
property string button1color: hifi.buttons.noneBorderlessGray;
property string button1text;
property var button1method;
property string button2color: hifi.buttons.blue;
property string button2text;
property var button2method;
property string buttonLayout: "leftright";
readonly property string cantAccessBodyText: "Please navigate to your default browser to recover your account." +
"<br><br>If you are in a VR headset, please take it off.";
id: root;
visible: false;
anchors.fill: parent;
color: Qt.rgba(0, 0, 0, 0.5);
z: 999;
HifiConstants { id: hifi; }
onVisibleChanged: {
if (!visible) {
resetLightbox();
}
}
// This object is always used in a popup.
// This MouseArea is used to prevent a user from being
// able to click on a button/mouseArea underneath the popup.
MouseArea {
anchors.fill: parent;
propagateComposedEvents: false;
hoverEnabled: true;
}
Rectangle {
anchors.centerIn: parent;
width: 376;
height: childrenRect.height + 30;
color: "white";
RalewaySemiBold {
id: titleText;
text: root.titleText;
anchors.top: parent.top;
anchors.topMargin: 30;
anchors.left: parent.left;
anchors.leftMargin: 30;
anchors.right: parent.right;
anchors.rightMargin: 30;
height: paintedHeight;
color: hifi.colors.black;
size: 24;
verticalAlignment: Text.AlignTop;
wrapMode: Text.WordWrap;
}
RalewayRegular {
id: bodyText;
text: root.bodyText;
anchors.top: root.bodyImageSource ? bodyImage.bottom : (root.titleText ? titleText.bottom : parent.top);
anchors.topMargin: root.bodyImageSource ? 20 : (root.titleText ? 20 : 30);
anchors.left: parent.left;
anchors.leftMargin: 30;
anchors.right: parent.right;
anchors.rightMargin: 30;
height: paintedHeight;
color: hifi.colors.black;
size: 20;
verticalAlignment: Text.AlignTop;
wrapMode: Text.WordWrap;
}
Item {
id: buttons;
anchors.top: bodyText.bottom;
anchors.topMargin: 30;
anchors.left: parent.left;
anchors.right: parent.right;
height: root.buttonLayout === "leftright" ? 70 : 150;
// Button 1
HifiControlsUit.Button {
id: button1;
color: root.button1color;
colorScheme: hifi.colorSchemes.light;
anchors.top: root.buttonLayout === "leftright" ? parent.top : parent.top;
anchors.left: parent.left;
anchors.leftMargin: root.buttonLayout === "leftright" ? 30 : 10;
anchors.right: root.buttonLayout === "leftright" ? undefined : parent.right;
anchors.rightMargin: root.buttonLayout === "leftright" ? undefined : 10;
width: root.buttonLayout === "leftright" ? (root.button2text ? parent.width/2 - anchors.leftMargin*2 : parent.width - anchors.leftMargin * 2) :
(undefined);
height: 40;
text: root.button1text;
onClicked: {
button1method();
}
visible: (root.button1text !== "");
}
// Button 2
HifiControlsUit.Button {
id: button2;
visible: root.button2text;
color: root.button2color;
colorScheme: hifi.colorSchemes.light;
anchors.top: root.buttonLayout === "leftright" ? parent.top : button1.bottom;
anchors.topMargin: root.buttonLayout === "leftright" ? undefined : 20;
anchors.left: root.buttonLayout === "leftright" ? undefined : parent.left;
anchors.leftMargin: root.buttonLayout === "leftright" ? undefined : 10;
anchors.right: parent.right;
anchors.rightMargin: root.buttonLayout === "leftright" ? 30 : 10;
width: root.buttonLayout === "leftright" ? parent.width/2 - anchors.rightMargin*2 : undefined;
height: 40;
text: root.button2text;
onClicked: {
button2method();
}
}
}
}
//
// FUNCTION DEFINITIONS START
//
signal sendToParent(var msg);
function resetLightbox() {
root.titleText = "";
root.bodyImageSource = "";
root.bodyText = "";
root.button1color = hifi.buttons.noneBorderlessGray;
root.button1text = "";
root.button1method = function() {};
root.button2color = hifi.buttons.blue;
root.button2text = "";
root.button2method = function() {};
root.buttonLayout = "leftright";
}
//
// FUNCTION DEFINITIONS END
//
}

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

@ -43,10 +43,10 @@ Item {
id: d
readonly property int minWidth: 480
readonly property int minWidthButton: !root.isTablet ? 256 : 174
property int maxWidth: root.isTablet ? 1280 : root.width
property int maxWidth: root.width
readonly property int minHeight: 120
readonly property int minHeightButton: 36
property int maxHeight: root.isTablet ? 720 : root.height
property int maxHeight: root.height
function resize() {
maxWidth = root.isTablet ? 1280 : root.width;
@ -222,7 +222,7 @@ Item {
id: passwordField
width: root.bannerWidth
height: signUpBody.textFieldHeight
placeholderText: "Password"
placeholderText: "Password (min. 6 characters)"
font.pixelSize: signUpBody.textFieldFontSize
styleRenderType: Text.QtRendering
activeFocusOnPress: true
@ -411,18 +411,19 @@ Item {
onHandleSignupFailed: {
console.log("Sign Up Failed")
var errorStringEdited = errorString.replace(/[\n\r]+/g, ' ');
loginErrorMessage.visible = (errorStringEdited !== "");
if (errorStringEdited !== "") {
if (errorString !== "") {
loginErrorMessage.visible = true;
var errorStringEdited = errorString.replace(/[\n\r]+/g, "\n");
loginErrorMessage.text = errorStringEdited;
loginErrorMessageTextMetrics.text = errorStringEdited;
if (loginErrorMessageTextMetrics.width > 350 && root.isTablet) {
loginErrorMessageTextMetrics.text = errorString;
if (loginErrorMessageTextMetrics.width > usernameField.width) {
loginErrorMessage.wrapMode = Text.WordWrap;
loginErrorMessage.verticalAlignment = Text.AlignLeft;
loginErrorMessage.horizontalAlignment = Text.AlignLeft;
errorContainer.height = 2 * loginErrorMessageTextMetrics.height;
errorContainer.height = (loginErrorMessageTextMetrics.width / usernameField.width) * loginErrorMessageTextMetrics.height;
}
errorContainer.anchors.bottom = usernameField.top;
errorContainer.anchors.bottomMargin = hifi.dimensions.contentSpacing.y;
errorContainer.anchors.left = usernameField.left;
}
}

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

@ -43,10 +43,10 @@ Item {
id: d
readonly property int minWidth: 480
readonly property int minWidthButton: !root.isTablet ? 256 : 174
property int maxWidth: root.isTablet ? 1280 : root.width
property int maxWidth: root.width
readonly property int minHeight: 120
readonly property int minHeightButton: 36
property int maxHeight: root.isTablet ? 720 : root.height
property int maxHeight: root.height
function resize() {
maxWidth = root.isTablet ? 1280 : root.width;

BIN
interface/resources/qml/LoginDialog/images/loader-snake-256.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
interface/resources/qml/LoginDialog/images/loader-snake-298-b.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 281 KiB

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

@ -64,7 +64,7 @@ FocusScope {
id: opaqueRect
height: parent.height
width: parent.width
opacity: 0.5
opacity: 0.65
color: "black"
}

3
interface/resources/qml/controlsUit/Button.qml
View file

@ -25,6 +25,7 @@ Original.Button {
property int radius: hifi.buttons.radius
property alias implicitTextWidth: buttonText.implicitWidth
property string buttonGlyph: "";
property int buttonGlyphSize: 34;
property int buttonGlyphRightMargin: 0;
property int fontCapitalization: Font.AllUppercase
@ -103,7 +104,7 @@ Original.Button {
visible: control.buttonGlyph !== "";
text: control.buttonGlyph === "" ? hifi.glyphs.question : control.buttonGlyph;
// Size
size: 34;
size: control.buttonGlyphSize;
// Anchors
anchors.right: buttonText.left;
anchors.rightMargin: control.buttonGlyphRightMargin

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

@ -120,7 +120,7 @@ FocusScope {
id: opaqueRect
height: parent.height
width: parent.width
opacity: 0.5
opacity: 0.65
color: "black"
}