Working on simplifying new dialog creation

interface/resources/qml/AddressBarDialog.qml

@@ -4,8 +4,9 @@ import QtQuick.Controls 1.2
 import QtQuick.Window 2.2
 import QtQuick.Controls.Styles 1.3
 
-AddressBarDialog {
+CustomDialog {
-    id: addressBarDialog
+    id: dialog
+    title: "Go to..."
     objectName: "AddressBarDialog"
     SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
     height: 128
@@ -14,70 +15,56 @@ AddressBarDialog {
     onVisibleChanged: {
         if (!visible) {
             reset();
-        } else {
-            addressLine.focus = true
-            addressLine.forceActiveFocus()
         }
     }
 
-    Component.onCompleted: {
-        addressLine.focus = true
-        addressLine.forceActiveFocus()
-    }
-
     function reset() {
         addressLine.text = ""
         goButton.source = "../images/address-bar-submit.svg"
     }
 
-    CustomDialog {
+    AddressBarDialog {
-        id: dialog
+        id: addressBarDialog
-        anchors.fill: parent
-        title: "Go to..."
 
         // The client area
-        Item {
+        anchors.fill: parent
-            id: item1
+        anchors.margins: parent.margins
-            anchors.fill: parent
+        anchors.topMargin: parent.topMargin
-            anchors.margins: parent.margins
-            anchors.topMargin: parent.topMargin
 
-            CustomBorder {
+        CustomBorder {
-                height: 64
+            height: 64
-                anchors.left: parent.left
+            anchors.left: parent.left
-                anchors.leftMargin: 0
+            anchors.leftMargin: 0
-                anchors.right: goButton.left
+            anchors.right: goButton.left
-                anchors.rightMargin: 8
+            anchors.rightMargin: 8
-                anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter: parent.verticalCenter
-                CustomTextInput {
+            CustomTextInput {
-                    id: addressLine
+                id: addressLine
-                    anchors.fill: parent
+                anchors.fill: parent
-                    helperText: "domain, location, @user, /x,y,z"
+                helperText: "domain, location, @user, /x,y,z"
-                    anchors.margins: 8
+                anchors.margins: 8
-                    onAccepted: {
+                onAccepted: {
-                        addressBarDialog.loadAddress(addressLine.text)
+                    addressBarDialog.loadAddress(addressLine.text)
-                    }
                 }
             }
+        }
 
-            Image {
+        Image {
-                id: goButton
+            id: goButton
-                width: 32
+            width: 32
-                height: 32
+            height: 32
-                anchors.right: parent.right
+            anchors.right: parent.right
-                anchors.rightMargin: 8
+            anchors.rightMargin: 8
-                source: "../images/address-bar-submit.svg"
+            source: "../images/address-bar-submit.svg"
-                anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter: parent.verticalCenter
 
-                MouseArea {
+            MouseArea {
-                    anchors.fill: parent
+                anchors.fill: parent
-                    onClicked: {
+                onClicked: {
-                        parent.source = "../images/address-bar-submit-active.svg"
+                    parent.source = "../images/address-bar-submit-active.svg"
-                        addressBarDialog.loadAddress(addressLine.text)
+                    addressBarDialog.loadAddress(addressLine.text)
-                    }
                 }
             }
-
         }
     }
 }

interface/resources/qml/CustomDialog.qml

@@ -7,10 +7,34 @@ import "hifiConstants.js" as HifiConstants
 
 Item {
     SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
-
     id: dialog
     width: 256
     height: 256
+    scale: 0.0
+    enabled: false
+    visible: false
+    
+    onEnabledChanged: {
+        scale = enabled ? 1.0 : 0.0
+    }
+    
+    onScaleChanged: {
+        visible = (scale != 0.0);
+    }
+    
+    Component.onCompleted: {
+        scale = 1.0
+    }
+
+    Behavior on scale {
+        NumberAnimation {
+            //This specifies how long the animation takes
+            duration: 400
+            //This selects an easing curve to interpolate with, the default is Easing.Linear
+            easing.type: Easing.InOutBounce
+        }
+    }
+
     property int topMargin: dialog.height - clientBorder.height + 8
     property int margins: 8
     property string title
@@ -54,11 +78,11 @@ Item {
                 anchors.top: parent.top
                 anchors.rightMargin: 4
                 drag {
-                    target: dialog.parent
+                    target: dialog
                     minimumX: 0
                     minimumY: 0
-                    maximumX: dialog.parent.parent.width - dialog.parent.width
+                    maximumX: dialog.parent.width - dialog.width
-                    maximumY: dialog.parent.parent.height - dialog.parent.height
+                    maximumY: dialog.parent.height - dialog.height
                 }
             }
             Image {
@@ -73,11 +97,10 @@ Item {
                 MouseArea {
                     anchors.fill: parent
                     onClicked: {
-                        dialog.parent.destroy()
+                        dialog.destroy()
                     }
                 }
             }
-
         } // header border
 
         CustomBorder {

interface/resources/qml/LoginDialog.qml

@@ -5,9 +5,9 @@ import QtQuick.Window 2.2
 import QtQuick.Controls.Styles 1.3
 import "hifiConstants.js" as HifiConstants
 
-LoginDialog {
+CustomDialog {
+    title: "Login"
     SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
-    id: loginDialog
     objectName: "LoginDialog"
     height: 512
     width: 384
@@ -15,8 +15,6 @@ LoginDialog {
     onVisibleChanged: {
         if (!visible) {
             reset()
-        } else {
-            username.forceActiveFocus()
         }
     }
 
@@ -26,163 +24,159 @@ LoginDialog {
         loginDialog.statusText = ""
     }
 
-    CustomDialog {
+    LoginDialog {
+        id: loginDialog
         anchors.fill: parent
-        title: "Login"
+        anchors.margins: parent.margins
-        Item {
+        anchors.topMargin: parent.topMargin
-            id: item1
+        Column {
-            anchors.fill: parent
+            anchors.topMargin: 8
-            anchors.margins: parent.margins
+            anchors.right: parent.right
-            anchors.topMargin: parent.topMargin
+            anchors.rightMargin: 0
-            Column {
+            anchors.left: parent.left
-                anchors.topMargin: 8
+            anchors.top: parent.top
-                anchors.right: parent.right
+            spacing: 8
-                anchors.rightMargin: 0
-                anchors.left: parent.left
-                anchors.top: parent.top
-                spacing: 8
 
-                Image {
+            Image {
-                    height: 64
+                height: 64
-                    anchors.horizontalCenter: parent.horizontalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
-                    width: 64
+                width: 64
-                    source: "../images/hifi-logo.svg"
+                source: "../images/hifi-logo.svg"
-                }
+            }
 
-                CustomBorder {
+            CustomBorder {
-                    width: 304
+                width: 304
-                    height: 64
+                height: 64
-                    anchors.horizontalCenter: parent.horizontalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
-                    CustomTextInput {
+                CustomTextInput {
-                        id: username
+                    id: username
-                        anchors.fill: parent
+                    anchors.fill: parent
-                        helperText: "Username or Email"
+                    helperText: "Username or Email"
-                        anchors.margins: 8
+                    anchors.margins: 8
-                        KeyNavigation.tab: password
+                    KeyNavigation.tab: password
-                        KeyNavigation.backtab: password
+                    KeyNavigation.backtab: password
-                        onAccepted: {
+                    onAccepted: {
-                            password.forceActiveFocus()
+                        password.forceActiveFocus()
-                        }
                     }
                 }
-
-                CustomBorder {
-                    width: 304
-                    height: 64
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    CustomTextInput {
-                        id: password
-                        anchors.fill: parent
-                        echoMode: TextInput.Password
-                        helperText: "Password"
-                        anchors.margins: 8
-                        KeyNavigation.tab: username
-                        KeyNavigation.backtab: username
-                        onAccepted: {
-                            if (username.text == "") {
-                                username.forceActiveFocus()
-                            } else {
-                                loginDialog.login(username.text, password.text)
-                            }
-                        }
-                        onFocusChanged: {
-                            if (password.focus) {
-                                password.selectAll()
-                            }
-                        }
-                    }
-                }
-
-                CustomText {
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    textFormat: Text.StyledText
-                    width: parent.width
-                    height: 96
-                    wrapMode: Text.WordWrap
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-                    text: loginDialog.statusText
-                }
             }
 
-            Column {
+            CustomBorder {
-                anchors.bottomMargin: 5
+                width: 304
-                anchors.right: parent.right
+                height: 64
-                anchors.rightMargin: 0
+                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.left: parent.left
+                CustomTextInput {
-                anchors.bottom: parent.bottom
+                    id: password
-
+                    anchors.fill: parent
-                Rectangle {
+                    echoMode: TextInput.Password
-                    width: 192
+                    helperText: "Password"
-                    height: 64
+                    anchors.margins: 8
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    KeyNavigation.tab: username
-                    color: HifiConstants.color
+                    KeyNavigation.backtab: username
-                    border.width: 0
+                    onAccepted: {
-                    radius: 10
+                        if (username.text == "") {
-
+                            username.forceActiveFocus()
-                    MouseArea {
+                        } else {
-                        anchors.bottom: parent.bottom
-                        anchors.bottomMargin: 0
-                        anchors.top: parent.top
-                        anchors.right: parent.right
-                        anchors.left: parent.left
-                        onClicked: {
                             loginDialog.login(username.text, password.text)
                         }
                     }
-
+                    onFocusChanged: {
-                    Row {
+                        if (password.focus) {
-                        anchors.centerIn: parent
+                            password.selectAll()
-                        anchors.verticalCenter: parent.verticalCenter
-                        spacing: 8
-                        Image {
-                            id: loginIcon
-                            height: 32
-                            width: 32
-                            source: "../images/login.svg"
-                        }
-                        CustomText {
-                            text: "Login"
-                            color: "white"
-                            width: 64
-                            height: parent.height
-                        }
-                    }
-
-                }
-
-                CustomText {
-                    width: parent.width
-                    height: 24
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    text:"Create Account"
-                    font.pointSize: 12
-                    font.bold: true
-                    color: HifiConstants.color
-
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            loginDialog.openUrl(loginDialog.rootUrl + "/signup")
                         }
                     }
                 }
+            }
 
-                CustomText {
+            CustomText {
-                    width: parent.width
+                anchors.horizontalCenter: parent.horizontalCenter
-                    height: 24
+                textFormat: Text.StyledText
-                    horizontalAlignment: Text.AlignHCenter
+                width: parent.width
-                    verticalAlignment: Text.AlignVCenter
+                height: 96
-                    font.pointSize: 12
+                wrapMode: Text.WordWrap
-                    text: "Recover Password"
+                verticalAlignment: Text.AlignVCenter
-                    color: HifiConstants.color
+                horizontalAlignment: Text.AlignHCenter
+                text: loginDialog.statusText
+            }
+        }
 
-                    MouseArea {
+        Column {
-                        anchors.fill: parent
+            anchors.bottomMargin: 5
-                        onClicked: {
+            anchors.right: parent.right
-                            loginDialog.openUrl(loginDialog.rootUrl + "/users/password/new")
+            anchors.rightMargin: 0
-                        }
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+
+            Rectangle {
+                width: 192
+                height: 64
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: HifiConstants.color
+                border.width: 0
+                radius: 10
+
+                MouseArea {
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 0
+                    anchors.top: parent.top
+                    anchors.right: parent.right
+                    anchors.left: parent.left
+                    onClicked: {
+                        loginDialog.login(username.text, password.text)
+                    }
+                }
+
+                Row {
+                    anchors.centerIn: parent
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: 8
+                    Image {
+                        id: loginIcon
+                        height: 32
+                        width: 32
+                        source: "../images/login.svg"
+                    }
+                    CustomText {
+                        text: "Login"
+                        color: "white"
+                        width: 64
+                        height: parent.height
+                    }
+                }
+
+            }
+
+            CustomText {
+                width: parent.width
+                height: 24
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                text:"Create Account"
+                font.pointSize: 12
+                font.bold: true
+                color: HifiConstants.color
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        loginDialog.openUrl(loginDialog.rootUrl + "/signup")
+                    }
+                }
+            }
+
+            CustomText {
+                width: parent.width
+                height: 24
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                font.pointSize: 12
+                text: "Recover Password"
+                color: HifiConstants.color
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        loginDialog.openUrl(loginDialog.rootUrl + "/users/password/new")
                     }
                 }
             }

interface/src/ui/AddressBarDialog.cpp

@@ -17,17 +17,15 @@
 
 QML_DIALOG_DEF(AddressBarDialog)
 
-AddressBarDialog::AddressBarDialog(QQuickItem *parent) : QQuickItem(parent) {
+AddressBarDialog::AddressBarDialog(QQuickItem *parent) : OffscreenQmlDialog(parent) {
     auto addressManager = DependencyManager::get<AddressManager>();
     connect(addressManager.data(), &AddressManager::lookupResultIsOffline, this, &AddressBarDialog::displayAddressOfflineMessage);
     connect(addressManager.data(), &AddressManager::lookupResultIsNotFound, this, &AddressBarDialog::displayAddressNotFoundMessage);
     connect(addressManager.data(), &AddressManager::lookupResultsFinished, this, &AddressBarDialog::hide);
 }
 
-
 void AddressBarDialog::hide() {
-    setEnabled(false);
+    ((QQuickItem *)parent())->setEnabled(false);
-    setVisible(false);
 }
 
 void AddressBarDialog::loadAddress(const QString & address) {

interface/src/ui/AddressBarDialog.h

@@ -8,15 +8,13 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
+#pragma once
 #ifndef hifi_AddressBarDialog_h
 #define hifi_AddressBarDialog_h
 
-#pragma once
+#include <OffscreenQmlDialog.h>
-#include <QQuickItem>
 
-#include "OffscreenUi.h"
+class AddressBarDialog : public OffscreenQmlDialog
-
-class AddressBarDialog : public QQuickItem
 {
     Q_OBJECT
     QML_DIALOG_DECL

interface/src/ui/LoginDialog.cpp

@@ -17,7 +17,7 @@
 
 QML_DIALOG_DEF(LoginDialog)
 
-LoginDialog::LoginDialog(QQuickItem *parent) : QQuickItem(parent), _rootUrl(NetworkingConstants::METAVERSE_SERVER_URL.toString()) {
+LoginDialog::LoginDialog(QQuickItem *parent) : OffscreenQmlDialog(parent), _rootUrl(NetworkingConstants::METAVERSE_SERVER_URL.toString()) {
     connect(&AccountManager::getInstance(), &AccountManager::loginComplete,
         this, &LoginDialog::handleLoginCompleted);
     connect(&AccountManager::getInstance(), &AccountManager::loginFailed,
@@ -42,8 +42,7 @@ void LoginDialog::toggleAction() {
 }
 
 void LoginDialog::handleLoginCompleted(const QUrl& authURL) {
-    setEnabled(false);
+    hide();
-    setVisible(false);
 }
 
 void LoginDialog::handleLoginFailed() {

interface/src/ui/LoginDialog.h

@@ -8,15 +8,13 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
+#pragma once
 #ifndef hifi_LoginDialog_h
 #define hifi_LoginDialog_h
 
-#pragma once
+#include <OffscreenQmlDialog.h>
-#include <QQuickItem>
 
-#include "OffscreenUi.h"
+class LoginDialog : public OffscreenQmlDialog
-
-class LoginDialog : public QQuickItem
 {
     Q_OBJECT
     QML_DIALOG_DECL

libraries/render-utils/src/OffscreenQmlDialog.cpp

@@ -0,0 +1,18 @@
+//
+//  OffscreenQmlDialog.cpp
+//
+//  Created by Bradley Austin Davis on 2015/04/14
+//  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
+//
+
+#include "OffscreenQmlDialog.h"
+
+OffscreenQmlDialog::OffscreenQmlDialog(QQuickItem *parent)
+  : QQuickItem(parent) { }
+
+void OffscreenQmlDialog::hide() {
+    ((QQuickItem *)parent())->setEnabled(false);
+}

libraries/render-utils/src/OffscreenQmlDialog.h

@@ -0,0 +1,56 @@
+//
+//  OffscreenQmlDialog.h
+//
+//  Created by Bradley Austin Davis on 2015/04/14
+//  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
+//
+
+#pragma once
+#ifndef hifi_OffscreenQmlDialog_h
+#define hifi_OffscreenQmlDialog_h
+
+#include <QQuickItem>
+#include "OffscreenUi.h"
+
+#define QML_DIALOG_DECL \
+private: \
+    static const QString NAME; \
+    static const QUrl QML; \
+public: \
+    static void registerType(); \
+    static void show(); \
+    static void toggle(); \
+private:
+
+#define QML_DIALOG_DEF(x) \
+    const QUrl x::QML = QUrl(#x ".qml"); \
+    const QString x::NAME = #x; \
+    \
+    void x::registerType() { \
+        qmlRegisterType<x>("Hifi", 1, 0, NAME.toLocal8Bit().constData()); \
+    } \
+    \
+    void x::show() { \
+        auto offscreenUi = DependencyManager::get<OffscreenUi>(); \
+        offscreenUi->show(QML, NAME); \
+    } \
+    \
+    void x::toggle() { \
+        auto offscreenUi = DependencyManager::get<OffscreenUi>(); \
+        offscreenUi->toggle(QML, NAME); \
+    }
+
+class OffscreenQmlDialog : public QQuickItem
+{
+    Q_OBJECT
+public:
+    OffscreenQmlDialog(QQuickItem *parent = 0);
+
+protected:
+    void hide();
+};
+
+#endif

libraries/render-utils/src/OffscreenUi.h

@@ -33,34 +33,6 @@
 #include "FboCache.h"
 #include "OffscreenGlCanvas.h"
 
-#define QML_DIALOG_DECL \
-private: \
-    static const QString NAME; \
-    static const QUrl QML; \
-public: \
-    static void registerType(); \
-    static void show(); \
-    static void toggle(); \
-private:
-
-#define QML_DIALOG_DEF(x) \
-    const QUrl x::QML = QUrl(#x ".qml"); \
-    const QString x::NAME = #x; \
-    \
-    void x::registerType() { \
-        qmlRegisterType<x>("Hifi", 1, 0, NAME.toLocal8Bit().constData()); \
-    } \
-    \
-    void x::show() { \
-        auto offscreenUi = DependencyManager::get<OffscreenUi>(); \
-        offscreenUi->show(QML, NAME); \
-    } \
-    \
-    void x::toggle() { \
-        auto offscreenUi = DependencyManager::get<OffscreenUi>(); \
-        offscreenUi->toggle(QML, NAME); \
-    } 
-
 
 class OffscreenUi : public OffscreenGlCanvas, public Dependency {
     Q_OBJECT
@@ -133,4 +105,4 @@ private:
     MouseTranslator _mouseTranslator{ [](const QPointF & p) { return p;  } };
 };
 
-#endif
+#endif