From afc2f374e54feafc6386dfe978b17f34ef281d69 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Thu, 4 Jun 2015 13:20:48 -0700 Subject: [PATCH] New login dialog background with circular and rectangular variations Developer menu item toggles between the two. --- interface/resources/images/login-circle.svg | 3 + interface/resources/images/login-close.svg | 55 ++++ .../resources/images/login-rectangle.svg | 3 + interface/resources/qml/ErrorDialog.qml | 5 +- interface/resources/qml/LoginDialog.qml | 253 ++++++------------ interface/src/Menu.cpp | 15 ++ interface/src/Menu.h | 2 + interface/src/ui/DialogsManager.cpp | 4 + interface/src/ui/DialogsManager.h | 4 + interface/src/ui/LoginDialog.cpp | 37 ++- interface/src/ui/LoginDialog.h | 11 + 11 files changed, 219 insertions(+), 173 deletions(-) create mode 100644 interface/resources/images/login-circle.svg create mode 100644 interface/resources/images/login-close.svg create mode 100644 interface/resources/images/login-rectangle.svg diff --git a/interface/resources/images/login-circle.svg b/interface/resources/images/login-circle.svg new file mode 100644 index 0000000000..8a98902e6b --- /dev/null +++ b/interface/resources/images/login-circle.svg @@ -0,0 +1,3 @@ + + +2015-06-02 19:43ZCanvas 1Login Circle diff --git a/interface/resources/images/login-close.svg b/interface/resources/images/login-close.svg new file mode 100644 index 0000000000..88ca90b96f --- /dev/null +++ b/interface/resources/images/login-close.svg @@ -0,0 +1,55 @@ + +image/svg+xml \ No newline at end of file diff --git a/interface/resources/images/login-rectangle.svg b/interface/resources/images/login-rectangle.svg new file mode 100644 index 0000000000..774baf8193 --- /dev/null +++ b/interface/resources/images/login-rectangle.svg @@ -0,0 +1,3 @@ + + +2015-06-02 19:42ZCanvas 1Login2 diff --git a/interface/resources/qml/ErrorDialog.qml b/interface/resources/qml/ErrorDialog.qml index c3639f5f3c..51befb12a7 100644 --- a/interface/resources/qml/ErrorDialog.qml +++ b/interface/resources/qml/ErrorDialog.qml @@ -8,7 +8,7 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -import Hifi 1.0 as Hifi +import Hifi 1.0 import QtQuick 2.4 import "controls" import "styles" @@ -35,7 +35,7 @@ Dialog { x: parent ? parent.width / 2 - width / 2 : 0 y: parent ? parent.height / 2 - height / 2 : 0 - Hifi.ErrorDialog { + ErrorDialog { id: content implicitWidth: box.width @@ -88,6 +88,7 @@ Dialog { } MouseArea { anchors.fill: parent + cursorShape: "PointingHandCursor" onClicked: { content.accept(); } diff --git a/interface/resources/qml/LoginDialog.qml b/interface/resources/qml/LoginDialog.qml index 0c02c0af64..6db56d21bf 100644 --- a/interface/resources/qml/LoginDialog.qml +++ b/interface/resources/qml/LoginDialog.qml @@ -1,198 +1,119 @@ +// +// LoginDialog.qml +// +// Created by David Rowe on 3 Jun 2015 +// 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.3 -import QtQuick.Controls.Styles 1.3 +import QtQuick 2.4 +import QtQuick.Controls 1.3 // TODO: Needed? import "controls" import "styles" -DialogOld { +Dialog { + id: root HifiConstants { id: hifi } - title: "Login" + objectName: "LoginDialog" - height: 512 - width: 384 - onVisibleChanged: { - if (!visible) { - reset() - } - } + property bool destroyOnInvisible: false - onEnabledChanged: { - if (enabled) { - username.forceActiveFocus(); - } - } + implicitWidth: loginDialog.implicitWidth + implicitHeight: loginDialog.implicitHeight - function reset() { - username.text = "" - password.text = "" - loginDialog.statusText = "" + x: parent ? parent.width / 2 - width / 2 : 0 + y: parent ? parent.height / 2 - height / 2 : 0 + property int maximumX: parent ? parent.width - width : 0 + property int maximumY: parent ? parent.height - height : 0 + + function isCircular() { + return loginDialog.dialogFormat == "circular" } LoginDialog { id: loginDialog - anchors.fill: parent - anchors.margins: parent.margins - anchors.topMargin: parent.topMargin - Column { - anchors.topMargin: 8 - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: parent.left - anchors.top: parent.top - spacing: 8 - Image { - height: 64 - anchors.horizontalCenter: parent.horizontalCenter - width: 64 - source: "../images/hifi-logo.svg" + implicitWidth: isCircular() ? circularBackground.width : rectangularBackground.width + implicitHeight: isCircular() ? circularBackground.height : rectangularBackground.height + + Image { + id: circularBackground + visible: isCircular() + + source: "../images/login-circle.svg" + width: 500 + height: 500 + } + + Image { + id: rectangularBackground + visible: !isCircular() + + source: "../images/login-rectangle.svg" + width: 400 + height: 400 + } + + Text { + id: closeText + visible: isCircular() + + text: "Close" + font.pixelSize: hifi.fonts.pixelSize * 0.8 + font.weight: Font.Bold + color: "#175d74" + + anchors { + horizontalCenter: circularBackground.horizontalCenter + bottom: circularBackground.bottom + bottomMargin: hifi.layout.spacing * 4 } - Border { - width: 304 - height: 64 - anchors.horizontalCenter: parent.horizontalCenter - TextInput { - id: username - anchors.fill: parent - helperText: "Username or Email" - anchors.margins: 8 - KeyNavigation.tab: password - KeyNavigation.backtab: password + MouseArea { + anchors.fill: parent + cursorShape: "PointingHandCursor" + onClicked: { + root.enabled = false } } - - Border { - width: 304 - height: 64 - anchors.horizontalCenter: parent.horizontalCenter - TextInput { - id: password - anchors.fill: parent - echoMode: TextInput.Password - helperText: "Password" - anchors.margins: 8 - KeyNavigation.tab: username - KeyNavigation.backtab: username - onFocusChanged: { - if (password.focus) { - password.selectAll() - } - } - } - } - - Text { - 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 { - anchors.bottomMargin: 5 - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: parent.left - anchors.bottom: parent.bottom + Image { + id: closeIcon + visible: !isCircular() - Rectangle { - width: 192 - height: 64 - anchors.horizontalCenter: parent.horizontalCenter - color: hifi.colors.hifiBlue - 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" - } - Text { - text: "Login" - color: "white" - width: 64 - height: parent.height - } - } + source: "../images/login-close.svg" + width: 20 + height: 20 + anchors { + top: rectangularBackground.top + right: rectangularBackground.right + topMargin: hifi.layout.spacing * 2 + rightMargin: hifi.layout.spacing * 2 } - Text { - width: parent.width - height: 24 - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - text:"Create Account" - font.pointSize: 12 - font.bold: true - color: hifi.colors.hifiBlue - - MouseArea { - anchors.fill: parent - onClicked: { - loginDialog.openUrl(loginDialog.rootUrl + "/signup") - } - } - } - - Text { - width: parent.width - height: 24 - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.pointSize: 12 - text: "Recover Password" - color: hifi.colors.hifiBlue - - MouseArea { - anchors.fill: parent - onClicked: { - loginDialog.openUrl(loginDialog.rootUrl + "/users/password/new") - } + MouseArea { + anchors.fill: parent + cursorShape: "PointingHandCursor" + onClicked: { + root.enabled = false } } } } + Keys.onPressed: { - switch(event.key) { - case Qt.Key_Enter: - case Qt.Key_Return: - if (username.activeFocus) { - event.accepted = true - password.forceActiveFocus() - } else if (password.activeFocus) { - event.accepted = true - if (username.text == "") { - username.forceActiveFocus() - } else { - loginDialog.login(username.text, password.text) - } - } - break; + switch (event.key) { + case Qt.Key_Escape: + case Qt.Key_Back: + enabled = false; + event.accepted = true + break } } } diff --git a/interface/src/Menu.cpp b/interface/src/Menu.cpp index 6242318170..b2b9553ea5 100644 --- a/interface/src/Menu.cpp +++ b/interface/src/Menu.cpp @@ -571,6 +571,21 @@ Menu::Menu() { addCheckableActionToQMenuAndActionHash(physicsOptionsMenu, MenuOption::PhysicsShowOwned); addCheckableActionToQMenuAndActionHash(physicsOptionsMenu, MenuOption::PhysicsShowHulls); + MenuWrapper* loginDialogFormatMenu = developerMenu->addMenu("Login Dialog"); + { + QActionGroup* dialogMenuFormatGroup = new QActionGroup(loginDialogFormatMenu); + + QAction* circularLoginDialog = addCheckableActionToQMenuAndActionHash(loginDialogFormatMenu, + MenuOption::LoginDialogCircular, 0, false, + dialogsManager.data(), SLOT(updateLoginDialogFormat())); + dialogMenuFormatGroup->addAction(circularLoginDialog); + + QAction* rectangularLoginDialog = addCheckableActionToQMenuAndActionHash(loginDialogFormatMenu, + MenuOption::LoginDialogRectangular, 0, true, + dialogsManager.data(), SLOT(updateLoginDialogFormat())); + dialogMenuFormatGroup->addAction(rectangularLoginDialog); + } + MenuWrapper* helpMenu = addMenu("Help"); addActionToQMenuAndActionHash(helpMenu, MenuOption::EditEntitiesHelp, 0, qApp, SLOT(showEditEntitiesHelp())); diff --git a/interface/src/Menu.h b/interface/src/Menu.h index 6107744abc..eb1bd94637 100644 --- a/interface/src/Menu.h +++ b/interface/src/Menu.h @@ -209,6 +209,8 @@ namespace MenuOption { const QString LoadRSSDKFile = "Load .rssdk file"; const QString LodTools = "LOD Tools"; const QString Login = "Login"; + const QString LoginDialogCircular = "Circular"; + const QString LoginDialogRectangular = "Rectangular"; const QString Log = "Log"; const QString LowVelocityFilter = "Low Velocity Filter"; const QString Mirror = "Mirror"; diff --git a/interface/src/ui/DialogsManager.cpp b/interface/src/ui/DialogsManager.cpp index 1170e3c3a6..705f55586c 100644 --- a/interface/src/ui/DialogsManager.cpp +++ b/interface/src/ui/DialogsManager.cpp @@ -50,6 +50,10 @@ void DialogsManager::showLoginDialog() { LoginDialog::show(); } +void DialogsManager::updateLoginDialogFormat() { + emit loginDialogFormatChanged(); +} + void DialogsManager::octreeStatsDetails() { if (!_octreeStatsDialog) { _octreeStatsDialog = new OctreeStatsDialog(qApp->getWindow(), qApp->getOcteeSceneStats()); diff --git a/interface/src/ui/DialogsManager.h b/interface/src/ui/DialogsManager.h index fc2dad072b..f7301f5444 100644 --- a/interface/src/ui/DialogsManager.h +++ b/interface/src/ui/DialogsManager.h @@ -47,11 +47,15 @@ public: QPointer getOctreeStatsDialog() const { return _octreeStatsDialog; } QPointer getPreferencesDialog() const { return _preferencesDialog; } +signals: + void loginDialogFormatChanged(); + public slots: void toggleAddressBar(); void toggleDiskCacheEditor(); void toggleLoginDialog(); void showLoginDialog(); + void updateLoginDialogFormat(); void octreeStatsDetails(); void cachesSizeDialog(); void editPreferences(); diff --git a/interface/src/ui/LoginDialog.cpp b/interface/src/ui/LoginDialog.cpp index b452f153f0..4ed338c7db 100644 --- a/interface/src/ui/LoginDialog.cpp +++ b/interface/src/ui/LoginDialog.cpp @@ -1,6 +1,6 @@ // -// // LoginDialog.cpp +// interface/src/ui // // Created by Bradley Austin Davis on 2015/04/14 // Copyright 2015 High Fidelity, Inc. @@ -8,20 +8,28 @@ // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // + #include "LoginDialog.h" -#include "DependencyManager.h" -#include "AccountManager.h" -#include "Menu.h" #include +#include "AccountManager.h" +#include "DependencyManager.h" +#include "Menu.h" + HIFI_QML_DEF(LoginDialog) -LoginDialog::LoginDialog(QQuickItem *parent) : OffscreenQmlDialog(parent), _rootUrl(NetworkingConstants::METAVERSE_SERVER_URL.toString()) { +LoginDialog::LoginDialog(QQuickItem *parent) : OffscreenQmlDialog(parent), + _dialogFormat("rectangular"), + _rootUrl(NetworkingConstants::METAVERSE_SERVER_URL.toString()) +{ connect(&AccountManager::getInstance(), &AccountManager::loginComplete, this, &LoginDialog::handleLoginCompleted); connect(&AccountManager::getInstance(), &AccountManager::loginFailed, this, &LoginDialog::handleLoginFailed); + + connect(DependencyManager::get().data(), &DialogsManager::loginDialogFormatChanged, + this, &LoginDialog::updateDialogFormat); } void LoginDialog::toggleAction() { @@ -51,6 +59,25 @@ void LoginDialog::handleLoginFailed() { setStatusText("Invalid username or password.< / font>"); } +void LoginDialog::setDialogFormat(const QString& dialogFormat) { + if (dialogFormat != _dialogFormat) { + _dialogFormat = dialogFormat; + emit dialogFormatChanged(); + } +} + +QString LoginDialog::dialogFormat() const { + return _dialogFormat; +} + +void LoginDialog::updateDialogFormat() { + if (Menu::getInstance()->isOptionChecked(MenuOption::LoginDialogCircular)) { + setDialogFormat("circular"); + } else { + setDialogFormat("rectangular"); + } +} + void LoginDialog::setStatusText(const QString& statusText) { if (statusText != _statusText) { _statusText = statusText; diff --git a/interface/src/ui/LoginDialog.h b/interface/src/ui/LoginDialog.h index e9ae0a1c16..5761914642 100644 --- a/interface/src/ui/LoginDialog.h +++ b/interface/src/ui/LoginDialog.h @@ -1,5 +1,6 @@ // // LoginDialog.h +// interface/src/ui // // Created by Bradley Austin Davis on 2015/04/14 // Copyright 2015 High Fidelity, Inc. @@ -9,9 +10,12 @@ // #pragma once + #ifndef hifi_LoginDialog_h #define hifi_LoginDialog_h +#include "DialogsManager.h" // Need before OffscreenQmlDialog.h in order to get gl.h and glew.h includes in correct order. + #include class LoginDialog : public OffscreenQmlDialog @@ -19,6 +23,7 @@ class LoginDialog : public OffscreenQmlDialog Q_OBJECT HIFI_QML_DECL + Q_PROPERTY(QString dialogFormat READ dialogFormat WRITE setDialogFormat NOTIFY dialogFormatChanged) Q_PROPERTY(QString statusText READ statusText WRITE setStatusText NOTIFY statusTextChanged) Q_PROPERTY(QString rootUrl READ rootUrl) @@ -27,12 +32,17 @@ public: LoginDialog(QQuickItem* parent = nullptr); + void setDialogFormat(const QString& dialogFormat); + QString dialogFormat() const; + void updateDialogFormat(); // protected? + void setStatusText(const QString& statusText); QString statusText() const; QString rootUrl() const; signals: + void dialogFormatChanged(); void statusTextChanged(); protected: @@ -42,6 +52,7 @@ protected: Q_INVOKABLE void login(const QString& username, const QString& password); Q_INVOKABLE void openUrl(const QString& url); private: + QString _dialogFormat; QString _statusText; const QString _rootUrl; };