From c43e67e4a81f6f882dc9d9e806b20706904b924c Mon Sep 17 00:00:00 2001 From: Wayne Chen Date: Wed, 31 Oct 2018 16:57:03 -0700 Subject: [PATCH] adding tabbing between textfields --- .../qml/LoginDialog/CompleteProfileBody.qml | 8 +- .../qml/LoginDialog/LinkAccountBody.qml | 6 +- .../qml/LoginDialog/LoggingInBody.qml | 8 +- .../resources/qml/LoginDialog/SignInBody.qml | 73 +++++++++++++++---- .../qml/LoginDialog/UsernameCollisionBody.qml | 8 +- .../qml/dialogs/TabletLoginDialog.qml | 1 - 6 files changed, 72 insertions(+), 32 deletions(-) diff --git a/interface/resources/qml/LoginDialog/CompleteProfileBody.qml b/interface/resources/qml/LoginDialog/CompleteProfileBody.qml index b2e38a3518..1a380ecdad 100644 --- a/interface/resources/qml/LoginDialog/CompleteProfileBody.qml +++ b/interface/resources/qml/LoginDialog/CompleteProfileBody.qml @@ -29,14 +29,14 @@ Item { id: d readonly property int minWidth: 480 readonly property int minWidthButton: !root.isTablet ? 256 : 174 - property int maxWidth: root.isTablet ? 1280 : Window.innerWidth + property int maxWidth: root.isTablet ? 1280 : root.width readonly property int minHeight: 120 readonly property int minHeightButton: !root.isTablet ? 56 : 42 - property int maxHeight: root.isTablet ? 720 : Window.innerHeight + property int maxHeight: root.isTablet ? 720 : root.height function resize() { - maxWidth = root.isTablet ? 1280 : Window.innerWidth; - maxHeight = root.isTablet ? 720 : Window.innerHeight; + maxWidth = root.isTablet ? 1280 : root.width; + maxHeight = root.isTablet ? 720 : root.height; if (root.isTablet === false) { var targetWidth = Math.max(Math.max(titleWidth, Math.max(additionalTextContainer.contentWidth, termsContainer.contentWidth)), mainContainer.width) diff --git a/interface/resources/qml/LoginDialog/LinkAccountBody.qml b/interface/resources/qml/LoginDialog/LinkAccountBody.qml index 4e44bd5731..253a78b240 100644 --- a/interface/resources/qml/LoginDialog/LinkAccountBody.qml +++ b/interface/resources/qml/LoginDialog/LinkAccountBody.qml @@ -40,11 +40,9 @@ Item { id: d readonly property int minWidth: 480 readonly property int minWidthButton: !root.isTablet ? 256 : 174 - // property int maxWidth: root.isTablet ? 1280 : Window.innerWidth property int maxWidth: root.isTablet ? 1280 : root.width readonly property int minHeight: 120 readonly property int minHeightButton: !root.isTablet ? 56 : 42 - // property int maxHeight: root.isTablet ? 720 : Window.innerHeight property int maxHeight: root.isTablet ? 720 : root.height function resize() { @@ -130,9 +128,7 @@ Item { } wrapMode: Text.WordWrap lineHeight: 0.5 - // TODO change back to white when background is chosen - // color: "white" - color: "black" + color: "white" font.family: linkAccountBody.fontFamily font.pixelSize: !root.isTablet ? 2 * linkAccountBody.fontSize : linkAccountBody.fontSize font.bold: linkAccountBody.fontBold diff --git a/interface/resources/qml/LoginDialog/LoggingInBody.qml b/interface/resources/qml/LoginDialog/LoggingInBody.qml index d4b1517eed..ea3f7e90c6 100644 --- a/interface/resources/qml/LoginDialog/LoggingInBody.qml +++ b/interface/resources/qml/LoginDialog/LoggingInBody.qml @@ -31,14 +31,14 @@ Item { id: d readonly property int minWidth: 480 readonly property int minWidthButton: !root.isTablet ? 256 : 174 - property int maxWidth: root.isTablet ? 1280 : Window.innerWidth + property int maxWidth: root.isTablet ? 1280 : root.width readonly property int minHeight: 120 readonly property int minHeightButton: !root.isTablet ? 56 : 42 - property int maxHeight: root.isTablet ? 720 : Window.innerHeight + property int maxHeight: root.isTablet ? 720 : root.height function resize() { - maxWidth = root.isTablet ? 1280 : Window.innerWidth; - maxHeight = root.isTablet ? 720 : Window.innerHeight; + 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; diff --git a/interface/resources/qml/LoginDialog/SignInBody.qml b/interface/resources/qml/LoginDialog/SignInBody.qml index 7425d18b52..b9c175f15c 100644 --- a/interface/resources/qml/LoginDialog/SignInBody.qml +++ b/interface/resources/qml/LoginDialog/SignInBody.qml @@ -40,17 +40,13 @@ Item { id: d readonly property int minWidth: 480 readonly property int minWidthButton: !root.isTablet ? 256 : 174 - // property int maxWidth: root.isTablet ? 1280 : Window.innerWidth property int maxWidth: root.isTablet ? 1280 : root.width readonly property int minHeight: 120 readonly property int minHeightButton: !root.isTablet ? 56 : 42 - // property int maxHeight: root.isTablet ? 720 : Window.innerHeight property int maxHeight: root.isTablet ? 720 : root.height function resize() { - // maxWidth = root.isTablet ? 1280 : Window.innerWidth; maxWidth = root.isTablet ? 1280 : root.width; - // maxHeight = root.isTablet ? 720 : Window.innerHeight; maxHeight = root.isTablet ? 720 : root.height; var targetWidth = Math.max(titleWidth, mainContainer.width); var targetHeight = hifi.dimensions.contentSpacing.y + mainContainer.height + @@ -105,7 +101,6 @@ Item { passwordField.text = ""; } loginContainer.visible = true; - print(loginErrorMessage.visible); } Item { @@ -188,6 +183,25 @@ Item { } focus: !loginDialog.isLogIn visible: false + Keys.onPressed: { + if (!usernameField.visible) { + return; + } + switch (event.key) { + case Qt.Key_Tab: + event.accepted = true; + if (event.modifiers === Qt.ShiftModifier) { + passwordField.focus = true; + } else { + emailField.focus = true; + } + break; + case Qt.Key_Backtab: + event.accepted = true; + passwordField.focus = true; + break; + } + } } HifiControlsUit.TextField { @@ -204,6 +218,24 @@ Item { focus: loginDialog.isLogIn placeholderText: "Username or Email" activeFocusOnPress: true + Keys.onPressed: { + switch (event.key) { + case Qt.Key_Tab: + event.accepted = true; + if (event.modifiers === Qt.ShiftModifier) { + if (usernameField.visible) { + usernameField.focus = true; + break; + } + } + passwordField.focus = true; + break; + case Qt.Key_Backtab: + event.accepted = true; + usernameField.focus = true; + break; + } + } } HifiControlsUit.TextField { id: passwordField @@ -258,8 +290,23 @@ Item { } } } - Keys.onReturnPressed: { - signInBody.login() + Keys.onPressed: { + switch (event.key) { + case Qt.Key_Tab: + event.accepted = true; + if (event.modifiers === Qt.ShiftModifier) { + emailField.focus = true; + } else if (usernameField.visible) { + usernameField.focus = true; + } else { + emailField.focus = true; + } + break; + case Qt.Key_Backtab: + event.accepted = true; + emailField.focus = true; + break; + } } } HifiControlsUit.CheckBox { @@ -381,13 +428,11 @@ Item { } switch (event.key) { - case Qt.Key_Escape: - break - case Qt.Key_Enter: - case Qt.Key_Return: - event.accepted = true - signInBody.login() - break + case Qt.Key_Enter: + case Qt.Key_Return: + event.accepted = true; + signInBody.login(); + break; } } } diff --git a/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml b/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml index 0ba8102d46..a95afab220 100644 --- a/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml +++ b/interface/resources/qml/LoginDialog/UsernameCollisionBody.qml @@ -42,14 +42,14 @@ Item { id: d readonly property int minWidth: 480 readonly property int minWidthButton: !root.isTablet ? 256 : 174 - property int maxWidth: root.isTablet ? 1280 : Window.innerWidth + property int maxWidth: root.isTablet ? 1280 : root.width readonly property int minHeight: 120 readonly property int minHeightButton: !root.isTablet ? 56 : 42 - property int maxHeight: root.isTablet ? 720 : Window.innerHeight + property int maxHeight: root.isTablet ? 720 : root.height function resize() { - maxWidth = root.isTablet ? 1280 : Window.innerWidth; - maxHeight = root.isTablet ? 720 : Window.innerHeight; + maxWidth = root.isTablet ? 1280 : root.width; + maxHeight = root.isTablet ? 720 : root.height; var targetWidth = Math.max(titleWidth, mainContainer.width); var targetHeight = mainTextContainer.height + hifi.dimensions.contentSpacing.y + textField.height + diff --git a/interface/resources/qml/dialogs/TabletLoginDialog.qml b/interface/resources/qml/dialogs/TabletLoginDialog.qml index 841e4a306f..065fda8b63 100644 --- a/interface/resources/qml/dialogs/TabletLoginDialog.qml +++ b/interface/resources/qml/dialogs/TabletLoginDialog.qml @@ -34,7 +34,6 @@ FocusScope { property bool keyboardRaised: false property bool punctuationMode: false property bool isPassword: false - property alias text: loginKeyboard.mirroredText readonly property bool isTablet: true