From 527f8a2b59e7ac3d81a45b80242bf0627641d24d Mon Sep 17 00:00:00 2001 From: Wayne Chen Date: Wed, 28 Nov 2018 15:38:37 -0800 Subject: [PATCH] UI feedback + new overlay position update --- .../qml/LoginDialog/CompleteProfileBody.qml | 6 +- .../qml/LoginDialog/LinkAccountBody.qml | 129 +++++++----------- .../resources/qml/LoginDialog/SignUpBody.qml | 103 +++++++------- .../qml/LoginDialog/UsernameCollisionBody.qml | 3 +- .../resources/qml/OverlayLoginDialog.qml | 2 +- interface/src/Application.cpp | 3 + interface/src/ui/LoginDialog.cpp | 24 +--- 7 files changed, 109 insertions(+), 161 deletions(-) diff --git a/interface/resources/qml/LoginDialog/CompleteProfileBody.qml b/interface/resources/qml/LoginDialog/CompleteProfileBody.qml index 3368c7abfe..89ed567752 100644 --- a/interface/resources/qml/LoginDialog/CompleteProfileBody.qml +++ b/interface/resources/qml/LoginDialog/CompleteProfileBody.qml @@ -29,10 +29,12 @@ Item { QtObject { id: d readonly property int minWidth: 480 - readonly property int minWidthButton: !root.isTablet ? 256 : 174 + // readonly property int minWidthButton: !root.isTablet ? 256 : 174 + readonly property int minWidthButton: 36 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: !root.isTablet ? 56 : 42 + readonly property int minHeightButton: 36 property int maxHeight: root.isTablet ? 720 : root.height function resize() { diff --git a/interface/resources/qml/LoginDialog/LinkAccountBody.qml b/interface/resources/qml/LoginDialog/LinkAccountBody.qml index 6b60b46b13..79ec2c5bbc 100644 --- a/interface/resources/qml/LoginDialog/LinkAccountBody.qml +++ b/interface/resources/qml/LoginDialog/LinkAccountBody.qml @@ -26,14 +26,14 @@ Item { property int textFieldHeight: 31 property string fontFamily: "Raleway" property int fontSize: 15 + // property int textFieldFontSize: !root.isTablet ? !root.isOverlay : hifi.fontSizes.textFieldInput ? hifi.fontSizes.textFieldInput : 18 + property int textFieldFontSize: 18 property bool fontBold: true property bool keyboardEnabled: false property bool keyboardRaised: false property bool punctuationMode: false - onKeyboardRaisedChanged: d.resize(); - property bool withSteam: false property bool withOculus: false property string errorString: errorString @@ -44,23 +44,22 @@ Item { 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: !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 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)) - + (keyboardEnabled && keyboardRaised ? (200 + 2 * hifi.dimensions.contentSpacing.y) : hifi.dimensions.contentSpacing.y); + parent.height = root.height = Math.max(d.minHeight, Math.min(d.maxHeight, targetHeight)) + hifi.dimensions.contentSpacing.y; } } @@ -72,19 +71,13 @@ Item { function init() { // going to/from sign in/up dialog. loginDialog.isLogIn = true; - loginErrorMessage.visible = (linkAccountBody.errorString !== ""); - if (linkAccountBody.errorString !== "") { - loginErrorMessage.text = linkAccountBody.errorString; - errorContainer.anchors.bottom = emailField.top; - errorContainer.anchors.left = emailField.left; - } + loginErrorMessage.text = linkAccountBody.errorString; + loginErrorMessage.visible = (linkAccountBody.errorString !== ""); loginButton.text = "Log In"; loginButton.color = hifi.buttons.blue; emailField.placeholderText = "Username or Email"; var savedUsername = Settings.getValue("keepMeLoggedIn/savedUsername", ""); emailField.text = keepMeLoggedInCheckbox.checked ? savedUsername === "Unknown user" ? "" : savedUsername : ""; - emailField.anchors.top = loginContainer.top; - emailField.anchors.topMargin = !root.isTablet ? 0.2 * root.height : 0.24 * root.height; loginContainer.visible = true; } @@ -108,7 +101,7 @@ Item { height: banner.height anchors { top: parent.top - topMargin: 85 + topMargin: 0.03 * parent.height } Image { id: banner @@ -126,14 +119,13 @@ Item { top: bannerContainer.bottom topMargin: 1.5 * hifi.dimensions.contentSpacing.y } - Item { id: errorContainer width: loginErrorMessageTextMetrics.width height: loginErrorMessageTextMetrics.height anchors { bottom: emailField.top; - bottomMargin: 2; + bottomMargin: hifi.dimensions.contentSpacing.y; left: emailField.left; } TextMetrics { @@ -145,7 +137,7 @@ Item { id: loginErrorMessage; color: "red"; font.family: linkAccountBody.fontFamily - font.pixelSize: 12 + font.pixelSize: linkAccountBody.textFieldFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter text: "" @@ -157,9 +149,10 @@ Item { id: emailField width: banner.width height: linkAccountBody.textFieldHeight - font.family: "Fira Sans" + font.pixelSize: linkAccountBody.textFieldFontSize anchors { top: parent.top + topMargin: 0.2 * root.height left: parent.left leftMargin: (parent.width - emailField.width) / 2 } @@ -194,7 +187,7 @@ Item { id: passwordField width: banner.width height: linkAccountBody.textFieldHeight - font.family: "Fira Sans" + font.pixelSize: linkAccountBody.textFieldFontSize placeholderText: "Password" activeFocusOnPress: true echoMode: passwordFieldMouseArea.showPassword ? TextInput.Normal : TextInput.Password @@ -306,30 +299,25 @@ Item { linkAccountBody.login() } } - Item { - id: cantAccessContainer - width: parent.width - height: emailField.height + HifiStylesUit.ShortcutText { + id: cantAccessText + z: 10 anchors { top: loginButton.bottom topMargin: hifi.dimensions.contentSpacing.y + left: emailField.left } - HifiStylesUit.ShortcutText { - id: cantAccessText - z: 10 - anchors.centerIn: parent - font.family: linkAccountBody.fontFamily - font.pixelSize: 18 + font.family: linkAccountBody.fontFamily + font.pixelSize: 18 - text: " Can't access your account?" + text: " Can't access your account?" - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - linkColor: hifi.colors.blueAccent - onLinkActivated: { - Tablet.playSound(TabletEnums.ButtonClick); - loginDialog.openUrl(link) - } + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + linkColor: hifi.colors.blueAccent + onLinkActivated: { + Tablet.playSound(TabletEnums.ButtonClick); + loginDialog.openUrl(link) } } HifiControlsUit.Button { @@ -357,8 +345,6 @@ Item { loginDialog.loginThroughSteam(); } - print("withSteam " + linkAccountBody.withSteam); - print("withOculus " + linkAccountBody.withOculus); bodyLoader.setSource("LoggingInBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "withSteam": linkAccountBody.withSteam, "withOculus": linkAccountBody.withOculus, "fromBody": "LinkAccountBody" }); } @@ -379,7 +365,6 @@ Item { id: signUpContainer width: emailField.width height: emailField.height - anchors { left: emailField.left bottom: parent.bottom @@ -425,48 +410,36 @@ Item { } } } - Item { - id: dismissTextContainer - width: dismissText.width - height: dismissText.height + TextMetrics { + id: dismissButtonTextMetrics + font: loginErrorMessage.font + text: dismissButton.text + } + HifiControlsUit.Button { + id: dismissButton + width: dismissButtonTextMetrics.width + height: d.minHeightButton anchors { bottom: parent.bottom right: parent.right margins: 3 * hifi.dimensions.contentSpacing.y } - visible: loginDialog.getLoginDialogPoppedUp() - Text { - id: dismissText - text: qsTr("No thanks, take me in-world! >") - - lineHeight: 1 - color: "white" - font.family: linkAccountBody.fontFamily - font.pixelSize: 20 - font.bold: linkAccountBody.fontBold - lineHeightMode: Text.ProportionalHeight - horizontalAlignment: Text.AlignHCenter - } - MouseArea { - id: dismissMouseArea - anchors.fill: parent - acceptedButtons: Qt.LeftButton - hoverEnabled: true - onEntered: { - Tablet.playSound(TabletEnums.ButtonHover); - } - onClicked: { - Tablet.playSound(TabletEnums.ButtonClick); - if (loginDialog.getLoginDialogPoppedUp()) { - console.log("[ENCOURAGELOGINDIALOG]: user dismissed login screen") - var data = { - "action": "user dismissed login screen" - }; - UserActivityLogger.logAction("encourageLoginDialog", data); - loginDialog.dismissLoginDialog(); - } - root.tryDestroy(); + color: hifi.buttons.noneBorderlessWhite + text: qsTr("No thanks, take me in-world! >") + fontCapitalization: Font.MixedCase + fontFamily: linkAccountBody.fontFamily + fontSize: linkAccountBody.fontSize + fontBold: linkAccountBody.fontBold + onClicked: { + if (loginDialog.getLoginDialogPoppedUp()) { + console.log("[ENCOURAGELOGINDIALOG]: user dismissed login screen") + var data = { + "action": "user dismissed login screen" + }; + UserActivityLogger.logAction("encourageLoginDialog", data); + loginDialog.dismissLoginDialog(); } + root.tryDestroy(); } } } diff --git a/interface/resources/qml/LoginDialog/SignUpBody.qml b/interface/resources/qml/LoginDialog/SignUpBody.qml index 21677327fd..54fd7f1c1b 100644 --- a/interface/resources/qml/LoginDialog/SignUpBody.qml +++ b/interface/resources/qml/LoginDialog/SignUpBody.qml @@ -1,5 +1,5 @@ // -// SignInBody.qml +// signUpBody.qml // // Created by Stephen Birarda on 7 Dec 2016 // Copyright 2016 High Fidelity, Inc. @@ -18,13 +18,15 @@ import stylesUit 1.0 as HifiStylesUit import TabletScriptingInterface 1.0 Item { - id: signInBody + id: signUpBody clip: true height: root.height width: root.width property int textFieldHeight: 31 property string fontFamily: "Raleway" property int fontSize: 15 + // property int textFieldFontSize: !root.isTablet ? !root.isOverlay : hifi.fontSizes.textFieldInput ? hifi.fontSizes.textFieldInput : 18 + property int textFieldFontSize: 18 property bool fontBold: true property bool keyboardEnabled: false @@ -41,7 +43,8 @@ Item { 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: !root.isTablet ? 56 : 42 + readonly property int minHeightButton: 36 property int maxHeight: root.isTablet ? 720 : root.height function resize() { @@ -70,14 +73,13 @@ Item { function init() { // going to/from sign in/up dialog. loginDialog.isLogIn = false; - loginErrorMessage.visible = (signInBody.errorString !== ""); - if (signInBody.errorString !== "") { - loginErrorMessage.text = signInBody.errorString; + loginErrorMessage.visible = (signUpBody.errorString !== ""); + if (signUpBody.errorString !== "") { + loginErrorMessage.text = signUpBody.errorString; errorContainer.anchors.bottom = usernameField.top; + errorContainer.anchors.bottomMargin = hifi.dimensions.contentSpacing.y; errorContainer.anchors.left = usernameField.left; } - loginButtonAtSignIn.text = "Sign Up"; - loginButtonAtSignIn.color = hifi.buttons.blue; emailField.placeholderText = "Email"; emailField.text = ""; emailField.anchors.top = usernameField.bottom; @@ -144,8 +146,8 @@ Item { Text { id: loginErrorMessage; color: "red"; - font.family: signInBody.fontFamily - font.pixelSize: 12 + font.family: signUpBody.fontFamily + font.pixelSize: 18 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter text: "" @@ -156,9 +158,9 @@ Item { HifiControlsUit.TextField { id: usernameField width: banner.width - height: signInBody.textFieldHeight - font.family: "Fira Sans" + height: signUpBody.textFieldHeight placeholderText: "Username" + font.pixelSize: signUpBody.textFieldFontSize anchors { top: parent.top topMargin: 0.2 * parent.height @@ -189,7 +191,7 @@ Item { if (keepMeLoggedInCheckbox.checked) { Settings.setValue("keepMeLoggedIn/savedUsername", usernameField.text); } - signInBody.login(); + signUpBody.login(); break; } } @@ -202,14 +204,14 @@ Item { HifiControlsUit.TextField { id: emailField width: banner.width - height: signInBody.textFieldHeight - font.family: "Fira Sans" + height: signUpBody.textFieldHeight anchors { top: parent.top left: parent.left leftMargin: (parent.width - emailField.width) / 2 } placeholderText: "Username or Email" + font.pixelSize: signUpBody.textFieldFontSize activeFocusOnPress: true Keys.onPressed: { switch (event.key) { @@ -233,7 +235,7 @@ Item { if (keepMeLoggedInCheckbox.checked) { Settings.setValue("keepMeLoggedIn/savedUsername", usernameField.text); } - signInBody.login(); + signUpBody.login(); break; } } @@ -245,9 +247,9 @@ Item { HifiControlsUit.TextField { id: passwordField width: banner.width - height: signInBody.textFieldHeight - font.family: "Fira Sans" + height: signUpBody.textFieldHeight placeholderText: "Password" + font.pixelSize: signUpBody.textFieldFontSize activeFocusOnPress: true echoMode: passwordFieldMouseArea.showPassword ? TextInput.Normal : TextInput.Password anchors { @@ -318,7 +320,7 @@ Item { if (keepMeLoggedInCheckbox.checked) { Settings.setValue("keepMeLoggedIn/savedUsername", usernameField.text); } - signInBody.login(); + signUpBody.login(); break; } } @@ -328,7 +330,7 @@ Item { checked: Settings.getValue("keepMeLoggedIn", false); text: qsTr("Keep Me Logged In"); boxSize: 18; - labelFontFamily: signInBody.fontFamily + labelFontFamily: signUpBody.fontFamily labelFontSize: 18; color: hifi.colors.white; anchors { @@ -350,9 +352,15 @@ Item { Settings.setValue("keepMeLoggedIn", checked); } } - Item { - id: cancelContainer - width: cancelText.width + + TextMetrics { + id: cancelButtonTextMetrics + font: loginErrorMessage.font + text: cancelButton.text + } + HifiControlsUit.Button { + id: cancelButton + width: 1.2 * cancelButtonTextMetrics.width height: d.minHeightButton anchors { top: keepMeLoggedInCheckbox.bottom @@ -360,48 +368,31 @@ Item { left: parent.left leftMargin: (parent.width - passwordField.width) / 2 } - Text { - id: cancelText - anchors.centerIn: parent - text: qsTr("Cancel"); - - lineHeight: 1 - color: "white" - font.family: signInBody.fontFamily - font.pixelSize: signInBody.fontSize - font.capitalization: Font.AllUppercase; - font.bold: signInBody.fontBold - lineHeightMode: Text.ProportionalHeight - } - MouseArea { - id: cancelArea - anchors.fill: parent - acceptedButtons: Qt.LeftButton - hoverEnabled: true - onEntered: { - Tablet.playSound(TabletEnums.ButtonHover); - } - onClicked: { - Tablet.playSound(TabletEnums.ButtonClick); - bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); - } + color: hifi.buttons.noneBorderlessWhite + text: qsTr("CANCEL") + fontFamily: signUpBody.fontFamily + fontSize: signUpBody.fontSize + fontBold: signUpBody.fontBold + onClicked: { + bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); } } HifiControlsUit.Button { - id: loginButtonAtSignIn + id: signUpButton width: d.minWidthButton height: d.minHeightButton - text: qsTr("Log In") - fontFamily: signInBody.fontFamily - fontSize: signInBody.fontSize - fontBold: signInBody.fontBold + color: hifi.buttons.blue + text: qsTr("Sign Up") + fontFamily: signUpBody.fontFamily + fontSize: signUpBody.fontSize + fontBold: signUpBody.fontBold anchors { - top: cancelContainer.top + top: cancelButton.top right: passwordField.right } onClicked: { - signInBody.login() + signUpBody.login() } } } @@ -426,7 +417,7 @@ Item { case Qt.Key_Return: event.accepted = true; Settings.setValue("keepMeLoggedIn/savedUsername", usernameField.text); - signInBody.login(); + signUpBody.login(); break; } } diff --git a/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml b/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml index 027667d7d9..2771deaf05 100644 --- a/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml +++ b/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml @@ -45,7 +45,8 @@ Item { 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: !root.isTablet ? 56 : 42 + readonly property int minHeightButton: 36 property int maxHeight: root.isTablet ? 720 : root.height function resize() { diff --git a/interface/resources/qml/OverlayLoginDialog.qml b/interface/resources/qml/OverlayLoginDialog.qml index 0f8420f137..566360972f 100644 --- a/interface/resources/qml/OverlayLoginDialog.qml +++ b/interface/resources/qml/OverlayLoginDialog.qml @@ -121,6 +121,6 @@ FocusScope { Component.onCompleted: { keyboardTimer.start(); - bodyLoader.setSource("LoginDialog/LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); + bodyLoader.setSource("LoginDialog/LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": ""}); } } diff --git a/interface/src/Application.cpp b/interface/src/Application.cpp index 075d4ca294..64f5982dfe 100644 --- a/interface/src/Application.cpp +++ b/interface/src/Application.cpp @@ -5311,6 +5311,8 @@ void Application::resumeAfterLoginDialogActionTaken() { toolbar->writeProperty("visible", true); } + updateSystemTabletMode(); + getMyAvatar()->setEnableMeshVisible(true); const auto& nodeList = DependencyManager::get(); @@ -8665,6 +8667,7 @@ void Application::updateLoginDialogOverlayPosition() { auto overlayPositionVec = vec3FromVariant(overlayPosition.value); auto cameraPositionVec = _myCamera.getPosition(); auto cameraOrientation = _myCamera.getOrientation(); + cameraOrientation = cancelOutRollAndPitch(cameraOrientation); auto headLookVec = (cameraOrientation * Vectors::FRONT); auto overlayToHeadVec = overlayPositionVec - cameraPositionVec; auto pointAngle = (glm::acos(glm::dot(glm::normalize(overlayToHeadVec), glm::normalize(headLookVec))) * 180.0f / PI); diff --git a/interface/src/ui/LoginDialog.cpp b/interface/src/ui/LoginDialog.cpp index 9031ecf85b..54a4680fcd 100644 --- a/interface/src/ui/LoginDialog.cpp +++ b/interface/src/ui/LoginDialog.cpp @@ -193,29 +193,7 @@ void LoginDialog::createAccountFromSteam(QString username) { } void LoginDialog::openUrl(const QString& url) const { - auto tablet = dynamic_cast(DependencyManager::get()->getTablet("com.highfidelity.interface.tablet.system")); - auto hmd = DependencyManager::get(); - auto offscreenUi = DependencyManager::get(); - - if (tablet->getToolbarMode()) { - offscreenUi->load("Browser.qml", [=](QQmlContext* context, QObject* newObject) { - newObject->setProperty("url", url); - }); - if (!qApp->getLoginDialogPoppedUp()) { - LoginDialog::hide(); - } - } else { - if (!hmd->getShouldShowTablet() && !qApp->isHMDMode()) { - offscreenUi->load("Browser.qml", [=](QQmlContext* context, QObject* newObject) { - newObject->setProperty("url", url); - }); - if (!qApp->getLoginDialogPoppedUp()) { - LoginDialog::hide(); - } - } else { - tablet->gotoWebScreen(url); - } - } + QDesktopServices::openUrl(QUrl(url)); } void LoginDialog::linkCompleted(QNetworkReply* reply) {