From 56656a9079594799fb7bcbf16e80ba5f0e541bc8 Mon Sep 17 00:00:00 2001 From: Wayne Chen Date: Tue, 23 Oct 2018 10:46:19 -0700 Subject: [PATCH] adding button font modularity/using cairo --- .../qml/LoginDialog/LinkAccountBody.qml | 60 ++-- .../qml/LoginDialog/LoggingInDialog.qml | 9 - .../resources/qml/LoginDialog/SignUpBody.qml | 280 ------------------ .../resources/qml/controlsUit/Button.qml | 13 +- 4 files changed, 40 insertions(+), 322 deletions(-) delete mode 100644 interface/resources/qml/LoginDialog/LoggingInDialog.qml delete mode 100644 interface/resources/qml/LoginDialog/SignUpBody.qml diff --git a/interface/resources/qml/LoginDialog/LinkAccountBody.qml b/interface/resources/qml/LoginDialog/LinkAccountBody.qml index 570aea9635..9ee81adadf 100644 --- a/interface/resources/qml/LoginDialog/LinkAccountBody.qml +++ b/interface/resources/qml/LoginDialog/LinkAccountBody.qml @@ -16,6 +16,8 @@ import QtQuick.Controls.Styles 1.4 as OriginalStyles import controlsUit 1.0 as HifiControlsUit import stylesUit 1.0 as HifiStylesUit +import TabletScriptingInterface 1.0 + Item { id: linkAccountBody clip: true @@ -71,7 +73,7 @@ Item { function toggleLoggingIn(loggedIn) { // For the process of logging in. if (linkAccountBody.withSteam) { - + loginContainer.visible = false; } else { @@ -85,11 +87,15 @@ Item { usernameField.visible = !isLogIn; cantAccessContainer.visible = isLogIn; if (isLogIn) { + loginButtonAtSignIn.text = "Log In"; + loginButtonAtSignIn.color = hifi.buttons.black; emailField.placeholderText = "Username or Email"; emailField.anchors.top = loginContainer.top; emailField.anchors.topMargin = !root.isTablet ? 0.2 * root.pane.height : 0.24 * root.pane.height; cantAccessContainer.anchors.topMargin = !root.isTablet ? 3.5 * hifi.dimensions.contentSpacing.y : hifi.dimensions.contentSpacing.y; } else { + loginButtonAtSignIn.text = "Sign Up"; + loginButtonAtSignIn.color = hifi.buttons.blue; emailField.placeholderText = "Email"; emailField.anchors.top = usernameField.bottom; emailField.anchors.topMargin = 1.5 * hifi.dimensions.contentSpacing.y; @@ -124,7 +130,7 @@ Item { id: topOpaqueRect height: parent.height width: parent.width - opacity: 0.7 + opacity: 0.9 color: "black" visible: false } @@ -156,7 +162,8 @@ Item { HifiControlsUit.TextField { id: usernameField - width: 0.254 * parent.width + width: banner.width + font.family: "Cairo" placeholderText: "Username" anchors { top: parent.top @@ -169,7 +176,8 @@ Item { HifiControlsUit.TextField { id: emailField - width: 0.254 * parent.width + width: banner.width + font.family: "Cairo" text: Settings.getValue("wallet/savedUsername", ""); anchors { top: parent.top @@ -188,7 +196,8 @@ Item { } HifiControlsUit.TextField { id: passwordField - width: 0.254 * parent.width + width: banner.width + font.family: "Cairo" placeholderText: "Password" activeFocusOnPress: true echoMode: passwordFieldMouseArea.showPassword ? TextInput.Normal : TextInput.Password @@ -247,6 +256,7 @@ Item { checked: !Settings.getValue("wallet/autoLogout", false); text: qsTr("Keep Me Logged In") boxSize: 18; + labelFontFamily: "Cairo" labelFontSize: 18; color: hifi.colors.white; anchors { @@ -283,8 +293,9 @@ Item { lineHeight: 1 color: "white" - font.family: "Raleway" + font.family: "Cairo" font.pixelSize: 24 + font.capitalization: Font.AllUppercase; font.bold: true lineHeightMode: Text.ProportionalHeight } @@ -302,11 +313,9 @@ Item { width: d.minWidthButton height: d.minHeightButton text: qsTr("Log In") + fontFamily: "Cairo" fontSize: signUpButton.fontSize - // background: Rectangle { - // radius: hifi.buttons.radius - // - // } + fontBold: true anchors { top: cancelContainer.top right: passwordField.right @@ -329,6 +338,7 @@ Item { id: cantAccessText z: 10 anchors.centerIn: parent + font.family: "Cairo" font.pixelSize: 14 text: " Can't access your account?" @@ -354,13 +364,13 @@ Item { width: 0.48 * parent.width anchors.centerIn: parent anchors { - top: bannerContainer.bottom + top: banner.bottom topMargin: 0.1 * parent.height } wrapMode: Text.WordWrap lineHeight: 1 color: "white" - font.family: "Raleway" + font.family: "Cairo" font.pixelSize: 48 font.bold: true lineHeightMode: Text.ProportionalHeight @@ -373,7 +383,9 @@ Item { width: d.minWidthButton height: d.minHeightButton color: hifi.buttons.blue + fontFamily: "Cairo" fontSize: 21 + fontBold: true anchors { bottom: parent.bottom bottomMargin: 0.1 * parent.height @@ -398,7 +410,7 @@ Item { id: bottomOpaqueRect height: parent.height width: parent.width - opacity: 0.7 + opacity: 0.9 color: "black" } Item { @@ -412,11 +424,9 @@ Item { width: signUpButton.width height: signUpButton.height text: qsTr("Log In") + fontFamily: "Cairo" fontSize: signUpButton.fontSize - // background: Rectangle { - // radius: hifi.buttons.radius - // - // } + fontBold: true anchors { top: parent.top topMargin: 0.245 * parent.height @@ -442,11 +452,6 @@ Item { leftMargin: (parent.width - steamLoginButton.width) / 2 } - enabled: root.hasPermissionToRezThis && - MyAvatar.skeletonModelURL !== root.itemHref && - !root.wornEntityID && - root.valid; - onHoveredChanged: { if (hovered) { Tablet.playSound(TabletEnums.ButtonHover); @@ -514,16 +519,18 @@ Item { font: steamIconLabel.font; text: steamIconLabel.text; } - HifiStylesUit.RalewayBold { + Text { id: steamIconLabel; text: "Steam Log In" anchors.verticalCenter: parent.verticalCenter; width: steamIconLabelTextMetrics.width; x: parent.width/2 - steamIconLabelTextMetrics.width/2 + steamIcon.width/2; - size: signUpButton.fontSize; font.capitalization: Font.AllUppercase; verticalAlignment: Text.AlignVCenter; horizontalAlignment: Text.AlignHCenter; + font.family: "Cairo" + font.pixelSize: signUpButton.fontSize; + font.bold: true color: enabled ? hifi.buttons.textColor[control.color] : hifi.buttons.disabledTextColor[control.colorScheme] } @@ -546,7 +553,7 @@ Item { lineHeight: 1 color: "white" - font.family: "Raleway" + font.family: "Cairo" font.pixelSize: 24 font.bold: true lineHeightMode: Text.ProportionalHeight @@ -605,14 +612,11 @@ Item { UserActivityLogger.logAction("encourageLoginDialog", data); Settings.setValue("loginDialogPoppedUp", false); } - flavorText.visible = true - mainTextContainer.visible = true toggleLoading(false) } onHandleLinkCompleted: { console.log("Link Succeeded") - bodyLoader.setSource("WelcomeBody.qml", { "welcomeBack" : true }) bodyLoader.item.width = root.pane.width bodyLoader.item.height = root.pane.height } diff --git a/interface/resources/qml/LoginDialog/LoggingInDialog.qml b/interface/resources/qml/LoginDialog/LoggingInDialog.qml deleted file mode 100644 index e00f1178b1..0000000000 --- a/interface/resources/qml/LoginDialog/LoggingInDialog.qml +++ /dev/null @@ -1,9 +0,0 @@ -// -// LoggingInDialog.qml -// -// Created by Wayne Chen -// 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 -// diff --git a/interface/resources/qml/LoginDialog/SignUpBody.qml b/interface/resources/qml/LoginDialog/SignUpBody.qml deleted file mode 100644 index 107fa8348f..0000000000 --- a/interface/resources/qml/LoginDialog/SignUpBody.qml +++ /dev/null @@ -1,280 +0,0 @@ -// -// SignUpBody.qml -// -// Created by Wayne Chen on Oct 18 2018 -// Copyright 2016 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.7 -import QtQuick.Controls 1.4 - -import controlsUit 1.0 -import stylesUit 1.0 - -Item { - id: signupBody - clip: true - height: root.pane.height - width: root.pane.width - - function signup() { - mainTextContainer.visible = false - toggleLoading(true) - loginDialog.signup(emailField.text, usernameField.text, passwordField.text) - } - - property bool keyboardEnabled: false - property bool keyboardRaised: false - property bool punctuationMode: false - - onKeyboardRaisedChanged: d.resize(); - - QtObject { - id: d - readonly property int minWidth: 480 - readonly property int maxWidth: 1280 - readonly property int minHeight: 120 - readonly property int maxHeight: 720 - - function resize() { - var targetWidth = Math.max(titleWidth, form.contentWidth); - var targetHeight = hifi.dimensions.contentSpacing.y + mainTextContainer.height + - 4 * hifi.dimensions.contentSpacing.y + form.height; - - parent.width = root.width = Math.max(d.minWidth, Math.min(d.maxWidth, targetWidth)); - parent.height = root.height = Math.max(d.minHeight, Math.min(d.maxHeight, targetHeight)) - + (keyboardEnabled && keyboardRaised ? (200 + 2 * hifi.dimensions.contentSpacing.y) : 0); - } - } - - function toggleLoading(isLoading) { - linkAccountSpinner.visible = isLoading - form.visible = !isLoading - - leftButton.visible = !isLoading - buttons.visible = !isLoading - } - - BusyIndicator { - id: linkAccountSpinner - - anchors { - top: parent.top - horizontalCenter: parent.horizontalCenter - topMargin: hifi.dimensions.contentSpacing.y - } - - visible: false - running: true - - width: 48 - height: 48 - } - - ShortcutText { - id: mainTextContainer - anchors { - top: parent.top - left: parent.left - margins: 0 - topMargin: hifi.dimensions.contentSpacing.y - } - - visible: false - - text: qsTr("There was an unknown error while creating your account.") - wrapMode: Text.WordWrap - color: hifi.colors.redAccent - horizontalAlignment: Text.AlignLeft - } - - Column { - id: form - width: parent.width - onHeightChanged: d.resize(); onWidthChanged: d.resize(); - - anchors { - top: mainTextContainer.bottom - topMargin: 2 * hifi.dimensions.contentSpacing.y - } - spacing: 2 * hifi.dimensions.contentSpacing.y - - TextField { - id: emailField - width: parent.width - label: "Email" - activeFocusOnPress: true - onFocusChanged: { - root.text = ""; - } - } - - TextField { - id: usernameField - width: parent.width - label: "Username" - activeFocusOnPress: true - - ShortcutText { - anchors { - verticalCenter: parent.textFieldLabel.verticalCenter - left: parent.textFieldLabel.right - leftMargin: 10 - } - - text: qsTr("No spaces / special chars.") - - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - - color: hifi.colors.blueAccent - onFocusChanged: { - root.text = ""; - } - } - } - - TextField { - id: passwordField - width: parent.width - label: "Password" - echoMode: TextInput.Password - activeFocusOnPress: true - - ShortcutText { - anchors { - verticalCenter: parent.textFieldLabel.verticalCenter - left: parent.textFieldLabel.right - leftMargin: 10 - } - - text: qsTr("At least 6 characters") - - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - - color: hifi.colors.blueAccent - } - - onFocusChanged: { - root.text = ""; - root.isPassword = focus - } - - Keys.onReturnPressed: signupBody.signup() - } - - Row { - id: leftButton - anchors.horizontalCenter: parent.horizontalCenter - - spacing: hifi.dimensions.contentSpacing.x - onHeightChanged: d.resize(); onWidthChanged: d.resize(); - - Button { - anchors.verticalCenter: parent.verticalCenter - - text: qsTr("Existing User") - - onClicked: { - bodyLoader.setSource("LinkAccountBody.qml") - if (!root.isTablet) { - bodyLoader.item.width = root.pane.width - bodyLoader.item.height = root.pane.height - } - } - } - } - - Row { - id: buttons - anchors.horizontalCenter: parent.horizontalCenter - spacing: hifi.dimensions.contentSpacing.x - onHeightChanged: d.resize(); onWidthChanged: d.resize(); - - Button { - id: linkAccountButton - anchors.verticalCenter: parent.verticalCenter - width: 200 - - text: qsTr("Sign Up") - color: hifi.buttons.blue - - onClicked: signupBody.signup() - } - - Button { - anchors.verticalCenter: parent.verticalCenter - - text: qsTr("Cancel") - - onClicked: root.tryDestroy() - } - } - } - - Component.onCompleted: { - root.title = qsTr("Create an Account") - root.iconText = "<" - //dont rise local keyboard - keyboardEnabled = !root.isTablet && HMD.active; - //but rise Tablet's one instead for Tablet interface - if (root.isTablet) { - root.keyboardEnabled = HMD.active; - root.keyboardRaised = Qt.binding( function() { return keyboardRaised; }) - } - d.resize(); - - emailField.forceActiveFocus(); - } - - Connections { - target: loginDialog - onHandleSignupCompleted: { - console.log("Sign Up Succeeded"); - - // now that we have an account, login with that username and password - loginDialog.login(usernameField.text, passwordField.text) - } - onHandleSignupFailed: { - console.log("Sign Up Failed") - toggleLoading(false) - - mainTextContainer.text = errorString - mainTextContainer.visible = true - - d.resize(); - } - onHandleLoginCompleted: { - bodyLoader.setSource("WelcomeBody.qml", { "welcomeBack": false }) - bodyLoader.item.width = root.pane.width - bodyLoader.item.height = root.pane.height - } - onHandleLoginFailed: { - // we failed to login, show the LoginDialog so the user will try again - bodyLoader.setSource("LinkAccountBody.qml", { "failAfterSignUp": true }) - if (!root.isTablet) { - bodyLoader.item.width = root.pane.width - bodyLoader.item.height = root.pane.height - } - } - } - - Keys.onPressed: { - if (!visible) { - return - } - - switch (event.key) { - case Qt.Key_Enter: - case Qt.Key_Return: - event.accepted = true - signupBody.signup() - break - } - } -} diff --git a/interface/resources/qml/controlsUit/Button.qml b/interface/resources/qml/controlsUit/Button.qml index 6ea7ce4b4c..2fd98e04a6 100644 --- a/interface/resources/qml/controlsUit/Button.qml +++ b/interface/resources/qml/controlsUit/Button.qml @@ -19,7 +19,9 @@ Original.Button { property int color: 0 property int colorScheme: hifi.colorSchemes.light + property string fontFamily: "Raleway" property int fontSize: hifi.fontSizes.buttonLabel + property bool fontBold: true property int radius: hifi.buttons.radius property alias implicitTextWidth: buttonText.implicitWidth property string buttonGlyph: ""; @@ -35,13 +37,13 @@ Original.Button { Tablet.playSound(TabletEnums.ButtonHover); } } - + onFocusChanged: { if (focus) { Tablet.playSound(TabletEnums.ButtonHover); } } - + onClicked: { Tablet.playSound(TabletEnums.ButtonClick); } @@ -106,17 +108,18 @@ Original.Button { horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter; } - RalewayBold { + Text { id: buttonText; anchors.centerIn: parent; font.capitalization: control.fontCapitalization color: enabled ? hifi.buttons.textColor[control.color] : hifi.buttons.disabledTextColor[control.colorScheme] - size: control.fontSize + font.family: control.fontFamily + font.pixelSize: control.fontSize + font.bold: control.fontBold verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter text: control.text } } } -