more wip

interface/resources/qml/LoginDialog/UsernameCollisionBody.qml

@@ -12,14 +12,17 @@ import Hifi 1.0
 import QtQuick 2.4
 import QtQuick.Controls 1.4
 
-import controlsUit 1.0
+import controlsUit 1.0 as HifiControlsUit
-import stylesUit 1.0
+import stylesUit 1.0 as HifiStylesUit
 
 Item {
     id: usernameCollisionBody
     clip: true
     width: root.pane.width
     height: root.pane.height
+    readonly property string fontFamily: "Cairo"
+    readonly property int fontSize: 24
+    readonly property bool fontBold: true
 
     function create() {
         mainTextContainer.visible = false
@@ -36,98 +39,164 @@ Item {
     QtObject {
         id: d
         readonly property int minWidth: 480
-        readonly property int maxWidth: 1280
+        readonly property int minWidthButton: !root.isTablet ? 256 : 174
+        property int maxWidth: root.isTablet ? 1280 : Window.innerWidth
         readonly property int minHeight: 120
-        readonly property int maxHeight: 720
+        readonly property int minHeightButton: !root.isTablet ? 56 : 42
+        property int maxHeight: root.isTablet ? 720 : Window.innerHeight
 
         function resize() {
-            var targetWidth = Math.max(titleWidth, mainTextContainer.contentWidth)
+            maxWidth = root.isTablet ? 1280 : Window.innerWidth;
+            maxHeight = root.isTablet ? 720 : Window.innerHeight;
+            var targetWidth = Math.max(Math.max(titleWidth, mainTextContainer.contentWidth), mainContainer.width)
             var targetHeight =  mainTextContainer.height +
                                 hifi.dimensions.contentSpacing.y + textField.height +
                                 hifi.dimensions.contentSpacing.y + buttons.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))
+            parent.height = root.height = Math.max(Math.max(d.minHeight, Math.min(d.maxHeight, targetHeight)), mainContainer.height)
                     + (keyboardEnabled && keyboardRaised ? (200 + 2 * hifi.dimensions.contentSpacing.y) : hifi.dimensions.contentSpacing.y)
         }
     }
 
-    ShortcutText {
+    Item {
-        id: mainTextContainer
+        id: mainContainer
-        anchors {
+        width: root.pane.width
-            top: parent.top
+        height: root.pane.height
-            left: parent.left
-            margins: 0
-            topMargin: hifi.dimensions.contentSpacing.y
-        }
-
-        text: qsTr("Your Steam username is not available.")
-        wrapMode: Text.WordWrap
-        color: hifi.colors.redAccent
-        lineHeight: 1
-        lineHeightMode: Text.ProportionalHeight
-        horizontalAlignment: Text.AlignHCenter
-    }
-
-
-    TextField {
-        id: textField
-        anchors {
-            top: mainTextContainer.bottom
-            left: parent.left
-            margins: 0
-            topMargin: hifi.dimensions.contentSpacing.y
-        }
-        width: parent.width
-
-        placeholderText: "Choose your own"
-    }
-
-    // Override ScrollingWindow's keyboard that would be at very bottom of dialog.
-    Keyboard {
-        raised: keyboardEnabled && keyboardRaised
-        numeric: punctuationMode
-        anchors {
-            left: parent.left
-            right: parent.right
-            bottom: buttons.top
-            bottomMargin: keyboardRaised ? 2 * hifi.dimensions.contentSpacing.y : 0
-        }
-    }
-
-    Row {
-        id: buttons
-        anchors {
-            bottom: parent.bottom
-            right: parent.right
-            margins: 0
-            bottomMargin: hifi.dimensions.contentSpacing.y
-        }
-        spacing: hifi.dimensions.contentSpacing.x
         onHeightChanged: d.resize(); onWidthChanged: d.resize();
 
-        Button {
+        Rectangle {
-            anchors.verticalCenter: parent.verticalCenter
+            id: opaqueRect
-            width: 200
+            height: parent.height
-
+            width: parent.width
-            text: qsTr("Create your profile")
+            opacity: 0.9
-            color: hifi.buttons.blue
+            color: "black"
-
-            onClicked: usernameCollisionBody.create()
         }
 
-        Button {
+        Item {
-            anchors.verticalCenter: parent.verticalCenter
+            id: bannerContainer
+            width: parent.width
+            height: banner.height
+            anchors {
+                top: parent.top
+                topMargin: 85
+            }
+            Image {
+                id: banner
+                anchors.centerIn: parent
+                source: "../../images/high-fidelity-banner.svg"
+                horizontalAlignment: Image.AlignHCenter
+            }
+        }
 
-            text: qsTr("Cancel")
+        TextMetrics {
+            id: mainTextContainerTextMetrics
+            font: mainTextContainer.font
+            text: mainTextContainer.text
+        }
 
-            onClicked: root.tryDestroy()
+        Text {
+            id: mainTextContainer
+            anchors {
+                top: parent.top
+                left: parent.left
+                leftMargin: (parent.width - mainTextContainer.width) / 2
+                topMargin: parent.height/2 - buttons.anchors.topMargin - textField.height - mainTextContainerTextMetrics.height
+            }
+
+            font.family: usernameCollisionBody.fontFamily
+            font.pixelSize: usernameCollisionBody.fontSize - 10
+            font.bold: usernameCollisionBody.fontBold
+            text: qsTr("Your Steam username is not available.")
+            wrapMode: Text.WordWrap
+            color: hifi.colors.redAccent
+            lineHeight: 1
+            lineHeightMode: Text.ProportionalHeight
+            horizontalAlignment: Text.AlignHCenter
+        }
+
+
+        HifiControlsUit.TextField {
+            id: textField
+            anchors {
+                top: mainTextContainer.bottom
+                left: parent.left
+                leftMargin: (parent.width - width) / 2
+                topMargin: hifi.dimensions.contentSpacing.y
+            }
+            font.family: usernameCollisionBody.fontFamily
+            font.pixelSize: usernameCollisionBody.fontSize - 10
+            font.bold: usernameCollisionBody.fontBold
+            width: banner.width
+
+            placeholderText: "Choose your own"
+
+            Keys.onPressed: {
+                if (!visible) {
+                    return;
+                }
+
+                switch (event.key) {
+                    case Qt.Key_Enter:
+                    case Qt.Key_Return:
+                        event.accepted = true;
+                        usernameCollisionBody.create();
+                        break;
+                }
+            }
+        }
+
+        // Override ScrollingWindow's keyboard that would be at very bottom of dialog.
+        HifiControlsUit.Keyboard {
+            raised: keyboardEnabled && keyboardRaised
+            numeric: punctuationMode
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: buttons.top
+                bottomMargin: keyboardRaised ? 2 * hifi.dimensions.contentSpacing.y : 0
+            }
+        }
+        Row {
+            id: buttons
+            anchors {
+                top: textField.bottom
+                topMargin: 5 * hifi.dimensions.contentSpacing.y
+                horizontalCenter: parent.horizontalCenter
+                margins: 0
+            }
+            spacing: hifi.dimensions.contentSpacing.x
+            onHeightChanged: d.resize(); onWidthChanged: d.resize();
+            HifiControlsUit.Button {
+                id: profileButton
+                anchors.verticalCenter: parent.verticalCenter
+                width: 256
+
+                text: qsTr("Create your profile")
+                color: hifi.buttons.blue
+
+                fontFamily: usernameCollisionBody.fontFamily
+                fontSize: usernameCollisionBody.fontSize
+                fontBold: usernameCollisionBody.fontBold
+                onClicked: {
+                    usernameCollisionBody.create()
+                }
+            }
+            HifiControlsUit.Button {
+                id: cancelButton
+                anchors.verticalCenter: parent.verticalCenter
+                text: qsTr("Cancel")
+                fontFamily: usernameCollisionBody.fontFamily
+                fontSize: usernameCollisionBody.fontSize
+                fontBold: usernameCollisionBody.fontBold
+                onClicked: {
+                    bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
+                }
+            }
         }
     }
 
     Component.onCompleted: {
-        root.title = qsTr("Complete Your Profile")
-        root.iconText = "<"
         //dont rise local keyboard
         keyboardEnabled = !root.isTablet && HMD.active;
         //but rise Tablet's one instead for Tablet interface
@@ -155,26 +224,11 @@ Item {
         onHandleLoginCompleted: {
             console.log("Login Succeeded")
 
-            bodyLoader.setSource("WelcomeBody.qml", { "welcomeBack" : false })
-            bodyLoader.item.width = root.pane.width
-            bodyLoader.item.height = root.pane.height
         }
+
         onHandleLoginFailed: {
             console.log("Login Failed")
         }
     }
 
-    Keys.onPressed: {
-        if (!visible) {
-            return
-        }
-
-        switch (event.key) {
-            case Qt.Key_Enter:
-            case Qt.Key_Return:
-                event.accepted = true
-                usernameCollisionBody.create()
-                break
-        }
-    }
 }

interface/resources/qml/LoginDialog/WelcomeBody.qml

@@ -1,90 +0,0 @@
-//
-//  WelcomeBody.qml
-//
-//  Created by Clement on 7/18/16
-//  Copyright 2015 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.4
-
-import controlsUit 1.0
-import stylesUit 1.0
-
-Item {
-    id: welcomeBody
-    clip: true
-    width: root.pane.width
-    height: root.pane.height
-
-    property bool welcomeBack: false
-
-    function setTitle() {
-        root.title = (welcomeBack ? qsTr("Welcome back <b>") : qsTr("Welcome <b>")) + Account.username + qsTr("</b>!")
-        root.iconText = ""
-        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, mainTextContainer.contentWidth)
-            var targetHeight = mainTextContainer.height + 3 * hifi.dimensions.contentSpacing.y + buttons.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))
-        }
-    }
-
-    InfoItem {
-        id: mainTextContainer
-        anchors {
-            top: parent.top
-            horizontalCenter: parent.horizontalCenter
-            margins: 0
-            topMargin: hifi.dimensions.contentSpacing.y
-        }
-
-        text: qsTr("You are now signed into High Fidelity")
-        wrapMode: Text.WordWrap
-        color: hifi.colors.baseGrayHighlight
-        lineHeight: 2
-        lineHeightMode: Text.ProportionalHeight
-        horizontalAlignment: Text.AlignHCenter
-    }
-
-    Row {
-        id: buttons
-        anchors {
-            top: mainTextContainer.bottom
-            horizontalCenter: parent.horizontalCenter
-            margins: 0
-            topMargin: 2 * hifi.dimensions.contentSpacing.y
-        }
-        spacing: hifi.dimensions.contentSpacing.x
-        onHeightChanged: d.resize(); onWidthChanged: d.resize();
-
-        Button {
-            anchors.verticalCenter: parent.verticalCenter
-
-            text: qsTr("Close");
-
-            onClicked: root.tryDestroy()
-        }
-    }
-
-    Component.onCompleted: welcomeBody.setTitle()
-
-    Connections {
-        target: Account
-        onUsernameChanged: welcomeBody.setTitle()
-    }
-}