UI feedback + new overlay position update

This commit is contained in:
Wayne Chen 2018-11-28 15:38:37 -08:00
parent d8a1c4e956
commit 527f8a2b59
7 changed files with 109 additions and 161 deletions

View file

@ -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() {

View file

@ -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: "<a href='https://highfidelity.com/users/password/new'> Can't access your account?</a>"
text: "<a href='https://highfidelity.com/users/password/new'> Can't access your account?</a>"
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();
}
}
}

View file

@ -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;
}
}

View file

@ -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() {

View file

@ -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": ""});
}
}

View file

@ -5311,6 +5311,8 @@ void Application::resumeAfterLoginDialogActionTaken() {
toolbar->writeProperty("visible", true);
}
updateSystemTabletMode();
getMyAvatar()->setEnableMeshVisible(true);
const auto& nodeList = DependencyManager::get<NodeList>();
@ -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);

View file

@ -193,29 +193,7 @@ void LoginDialog::createAccountFromSteam(QString username) {
}
void LoginDialog::openUrl(const QString& url) const {
auto tablet = dynamic_cast<TabletProxy*>(DependencyManager::get<TabletScriptingInterface>()->getTablet("com.highfidelity.interface.tablet.system"));
auto hmd = DependencyManager::get<HMDScriptingInterface>();
auto offscreenUi = DependencyManager::get<OffscreenUi>();
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) {