adding button font modularity/using cairo

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 {
+                fontBold: true
-                //     radius: hifi.buttons.radius
-                //
-                // }
                 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: "<a href='https://highfidelity.com/users/password/new'> Can't access your account?</a>"
@@ -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 {
+                fontBold: true
-                //     radius: hifi.buttons.radius
-                //
-                // }
                 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
         }

interface/resources/qml/LoginDialog/LoggingInDialog.qml

@@ -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
-//

interface/resources/qml/LoginDialog/SignUpBody.qml

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

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