diff --git a/interface/resources/qml/LoginDialog.qml b/interface/resources/qml/LoginDialog.qml index 380fcc38be..0f3db48925 100644 --- a/interface/resources/qml/LoginDialog.qml +++ b/interface/resources/qml/LoginDialog.qml @@ -63,7 +63,7 @@ FocusScope { id: opaqueRect height: parent.height width: parent.width - opacity: 0.5 + opacity: 0.65 color: "black" } diff --git a/interface/resources/qml/LoginDialog/CantAccessBody.qml b/interface/resources/qml/LoginDialog/CantAccessBody.qml deleted file mode 100644 index 71e0a90536..0000000000 --- a/interface/resources/qml/LoginDialog/CantAccessBody.qml +++ /dev/null @@ -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(); - } -} diff --git a/interface/resources/qml/LoginDialog/CompleteProfileBody.qml b/interface/resources/qml/LoginDialog/CompleteProfileBody.qml index b5fd6638c4..0a5500dfed 100644 --- a/interface/resources/qml/LoginDialog/CompleteProfileBody.qml +++ b/interface/resources/qml/LoginDialog/CompleteProfileBody.qml @@ -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; diff --git a/interface/resources/qml/LoginDialog/LinkAccountBody.qml b/interface/resources/qml/LoginDialog/LinkAccountBody.qml index b3bcf2e86d..865470c481 100644 --- a/interface/resources/qml/LoginDialog/LinkAccountBody.qml +++ b/interface/resources/qml/LoginDialog/LinkAccountBody.qml @@ -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: { diff --git a/interface/resources/qml/LoginDialog/LoggingInBody.qml b/interface/resources/qml/LoginDialog/LoggingInBody.qml index 9841e0eccd..5239195793 100644 --- a/interface/resources/qml/LoginDialog/LoggingInBody.qml +++ b/interface/resources/qml/LoginDialog/LoggingInBody.qml @@ -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; diff --git a/interface/resources/qml/LoginDialog/LoginDialogLightbox.qml b/interface/resources/qml/LoginDialog/LoginDialogLightbox.qml new file mode 100644 index 0000000000..8995ecd261 --- /dev/null +++ b/interface/resources/qml/LoginDialog/LoginDialogLightbox.qml @@ -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." + + "

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 + // +} diff --git a/interface/resources/qml/LoginDialog/SignUpBody.qml b/interface/resources/qml/LoginDialog/SignUpBody.qml index c961920223..12eadbe651 100644 --- a/interface/resources/qml/LoginDialog/SignUpBody.qml +++ b/interface/resources/qml/LoginDialog/SignUpBody.qml @@ -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; } } diff --git a/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml b/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml index d0e4e5997b..621bcbc484 100644 --- a/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml +++ b/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml @@ -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; diff --git a/interface/resources/qml/LoginDialog/images/loader-snake-256.gif b/interface/resources/qml/LoginDialog/images/loader-snake-256.gif new file mode 100644 index 0000000000..ebcbf54bd7 Binary files /dev/null and b/interface/resources/qml/LoginDialog/images/loader-snake-256.gif differ diff --git a/interface/resources/qml/LoginDialog/images/loader-snake-298-b.gif b/interface/resources/qml/LoginDialog/images/loader-snake-298-b.gif deleted file mode 100644 index d6a475fd1c..0000000000 Binary files a/interface/resources/qml/LoginDialog/images/loader-snake-298-b.gif and /dev/null differ diff --git a/interface/resources/qml/OverlayLoginDialog.qml b/interface/resources/qml/OverlayLoginDialog.qml index 4f76fd10c8..3de3f68942 100644 --- a/interface/resources/qml/OverlayLoginDialog.qml +++ b/interface/resources/qml/OverlayLoginDialog.qml @@ -64,7 +64,7 @@ FocusScope { id: opaqueRect height: parent.height width: parent.width - opacity: 0.5 + opacity: 0.65 color: "black" } diff --git a/interface/resources/qml/controlsUit/Button.qml b/interface/resources/qml/controlsUit/Button.qml index 726cc7b806..c5c879a24c 100644 --- a/interface/resources/qml/controlsUit/Button.qml +++ b/interface/resources/qml/controlsUit/Button.qml @@ -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 diff --git a/interface/resources/qml/dialogs/TabletLoginDialog.qml b/interface/resources/qml/dialogs/TabletLoginDialog.qml index 3c998890ca..f57499d66c 100644 --- a/interface/resources/qml/dialogs/TabletLoginDialog.qml +++ b/interface/resources/qml/dialogs/TabletLoginDialog.qml @@ -120,7 +120,7 @@ FocusScope { id: opaqueRect height: parent.height width: parent.width - opacity: 0.5 + opacity: 0.65 color: "black" }