Add Graphik font and debuggable screens to qt launcher

launchers/qt/resources/qml/HFBase/CreateAccountBase.qml

@@ -21,16 +21,12 @@ Item {
         rotation: 180
     }
 
-    Text {
+    HFTextHeader {
         id: title
         width: 481
         height: 27
-        font.family: "Graphik"
-        font.bold: true
-        font.pixelSize: 29
         lineHeight: 35
         lineHeightMode: Text.FixedHeight
-        color: "#FFFFFF"
         text: root.titleText
         anchors {
             top: root.top
@@ -40,14 +36,12 @@ Item {
         }
     }
 
-    Text {
+    HFTextRegular {
         id: instruction
         width: 425
         height: 22
-        font.family: "Graphik"
+
-        font.pixelSize: 14
+        text: "Use the email address that you registered with."
-        color: "#C4C4C4"
-        text: "Use the email address that you regisetered with. " + LauncherState.lastSignupError
         anchors {
             left: root.left
             leftMargin: root.marginLeft
@@ -60,10 +54,7 @@ Item {
         id: email
         width: 430
         height: 50
-        font.family: "Graphik"
-        font.pixelSize: 18
         placeholderText: "Email Address"
-        color: "#7e8c81"
         seperatorColor: Qt.rgba(1, 1, 1, 0.3)
         anchors {
             top: instruction.bottom
@@ -77,10 +68,7 @@ Item {
         id: username
         width: 430
         height: 50
-        font.family: "Graphik"
-        font.pixelSize: 18
         placeholderText: root.usernamePlaceholder
-        color: "#7e8c81"
         seperatorColor: Qt.rgba(1, 1, 1, 0.3)
         anchors {
             top: email.bottom
@@ -94,10 +82,7 @@ Item {
         id: passwordField
         width: 430
         height: 50
-        font.family: "Graphik"
-        font.pixelSize: 18
         placeholderText: root.passwordPlaceholder
-        color: "#7e8c81"
         seperatorColor: Qt.rgba(1, 1, 1, 0.3)
         togglePasswordField: true
         echoMode: TextInput.Password
@@ -110,12 +95,14 @@ Item {
     }
 
 
-    Text {
+    HFTextRegular {
         id: displayNameText
-        text: "You can change this at anytime from you Profile"
+
-        font.family: "Graphik"
+        text: "This is the display name other people see in world, it can be changed at anytime, from your profile."
-        font.pixelSize: 10
+        wrapMode: Text.Wrap
-        color: "#C4C4C4"
+
+        width: 430
+
         anchors {
             top: passwordField.bottom
             left: root.left
@@ -128,10 +115,7 @@ Item {
         id: displayName
         width: 430
         height: 50
-        font.family: "Graphik"
-        font.pixelSize: 18
         placeholderText: "Display Name"
-        color: "#7e8c81"
         seperatorColor: Qt.rgba(1, 1, 1, 0.3)
         anchors {
             top: displayNameText.bottom
@@ -146,8 +130,6 @@ Item {
         width: 134
         height: 50
 
-        font.family: "Graphik"
-        font.pixelSize: 14
         text: "NEXT"
 
         anchors {

launchers/qt/resources/qml/HFBase/LoginBase.qml

@@ -15,14 +15,11 @@ Item {
         transformOrigin: Item.Center
         rotation: 0
     }
-    Text {
+    HFTextHeader {
         id: title
         width: 325
         height: 26
-        font.family: "Graphik"
-        font.pixelSize: 28
         font.bold: true
-        color: "#FFFFFF"
         text: "Please Log in"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
@@ -33,15 +30,14 @@ Item {
         }
     }
 
-    Text {
+    HFTextRegular {
         id: instruction
         width: 425
         height: 22
-        font.family: "Graphik"
+
-        font.pixelSize: 14
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
-        color: "#C4C4C4"
+
         visible: LauncherState.lastLoginErrorMessage.length == 0
         text: "Use the account credentials you created at sign-up"
         anchors {
@@ -52,15 +48,16 @@ Item {
         }
     }
 
-    Text {
+    HFTextRegular {
         id: error
         width: 425
         height: 22
-        font.family: "Graphik"
+
-        font.pixelSize: 14
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
+
         color: "#FF9999"
+
         visible: LauncherState.lastLoginErrorMessage.length > 0
         text: LauncherState.lastLoginErrorMessage
         anchors {
@@ -75,10 +72,9 @@ Item {
         id: username
         width: 353
         height: 50
-        font.family: "Graphik"
+
-        font.pixelSize: 18
         placeholderText: "Username"
-        color: "#7E8C81"
+
         seperatorColor: Qt.rgba(1, 1, 1, 0.3)
         anchors {
             top: error.bottom
@@ -91,10 +87,7 @@ Item {
         id: password
         width: 353
         height: 50
-        font.family: "Graphik"
-        font.pixelSize: 18
         placeholderText: "Password"
-        color: "#7E8C81"
         togglePasswordField: true
         echoMode: TextInput.Password
         seperatorColor: Qt.rgba(1, 1, 1, 0.3)
@@ -106,12 +99,10 @@ Item {
     }
 
 
-    Text {
+    HFTextRegular {
         id: displayText
 
-        text: "You can change this at anytime from your profile"
+        text: "You can change this at anytime from your profile."
-        color: "#C4C4C4"
-        font.pixelSize: 14
 
         anchors {
             top: password.bottom
@@ -124,10 +115,7 @@ Item {
         id: displayName
         width: 353
         height: 50
-        font.family: "Graphik"
-        font.pixelSize: 18
         placeholderText: "Display name"
-        color: "#7E8C81"
         seperatorColor: Qt.rgba(1, 1, 1, 0.3)
         anchors {
             top: displayText.bottom
@@ -141,8 +129,6 @@ Item {
         width: 110
         height: 50
 
-        font.family: "Graphik"
-        font.pixelSize: 18
         text: "NEXT"
 
         anchors {

launchers/qt/resources/qml/HFControls/HFButton.qml

@@ -9,6 +9,10 @@ Button {
     property int backgroundOpacity: 1
     property int backgroundRadius: 1
     property int backgroundWidth: 2
+
+    font.family: "Graphik Semibold"
+    font.pointSize: 12
+
     background: Rectangle {
         implicitWidth: 100
         implicitHeight: 40

launchers/qt/resources/qml/HFControls/HFTextField.qml

@@ -3,15 +3,18 @@ import QtQuick.Controls 2.1
 
 TextField {
     id: control
-    //color: "#000000"
+
-    font.family: "Graphik Medium"
+    font.family: "Graphik Regular"
-    font.pixelSize: 22
+    font.pointSize: 10.5
+    color: "#7e8c81"
+
     property bool togglePasswordField: false
     verticalAlignment: TextInput.AlignVCenter
     horizontalAlignment: TextInput.AlignLeft
     placeholderText: "PlaceHolder"
     property string seperatorColor: "#FFFFFF"
     selectByMouse: true
+
     background: Item {
         anchors.fill: parent
         Rectangle {
@@ -24,8 +27,9 @@ TextField {
                 visible: control.togglePasswordField
                 source: (control.echoMode == TextInput.Password) ? PathUtils.resourcePath("images/showPass.png") :
                     PathUtils.resourcePath("images/hidePass.png");
-                width: 21
+                fillMode: Image.PreserveAspectFit 
-                height: 14
+                width: 24
+                smooth: true
                 anchors {
                     top: parent.top
                     topMargin: 18

launchers/qt/resources/qml/SplashScreen.qml

@@ -18,8 +18,8 @@ Item {
 
     Image {
         anchors.centerIn: parent
-        width: 225
+        width: 240
-        height: 205
+        height: 180
         source: PathUtils.resourcePath("images/hifi_logo_large@2x.png");
     }
 

launchers/qt/resources/qml/root.qml

@@ -71,10 +71,16 @@ Item {
 
         font.pixelSize: 12
 
-        anchors.right: root.right
+        anchors {
-        anchors.bottom: root.bottom
+            leftMargin: 10
+            rightMargin: 10
+            bottomMargin: 10
 
-        color: "#FFFFFF"
+            right: root.right
+            bottom: root.bottom
+        }
+
+        color: "#777"
         text: "v." + LauncherState.buildVersion;
 
         states: [

launchers/qt/src/Launcher.cpp

@@ -3,6 +3,7 @@
 #include <QResource>
 #include <QFileInfo>
 #include <QQmlContext>
+#include <QFontDatabase>
 
 #include "LauncherWindow.h"
 #include "LauncherState.h"
@@ -10,11 +11,19 @@
 
 Launcher::Launcher(int& argc, char**argv) : QGuiApplication(argc, argv) {
     _launcherState = std::make_shared<LauncherState>();
+
     _launcherWindow = std::make_unique<LauncherWindow>();
     _launcherWindow->rootContext()->setContextProperty("LauncherState", _launcherState.get());
     _launcherWindow->rootContext()->setContextProperty("PathUtils", new PathUtils());
     _launcherWindow->setFlags(Qt::FramelessWindowHint | Qt::Window);
+    _launcherWindow->setLauncherStatePtr(_launcherState);
+
     LauncherState::declareQML();
+
+    QFontDatabase::addApplicationFont(PathUtils::fontPath("Graphik-Regular.ttf"));
+    QFontDatabase::addApplicationFont(PathUtils::fontPath("Graphik-Medium.ttf"));
+    QFontDatabase::addApplicationFont(PathUtils::fontPath("Graphik-Semibold.ttf"));
+
     _launcherWindow->setSource(QUrl(PathUtils::resourcePath("qml/root.qml")));
     _launcherWindow->setResizeMode(QQuickView::SizeRootObjectToView);
     _launcherWindow->show();

launchers/qt/src/LauncherState.cpp

@@ -33,6 +33,34 @@ const QString configHomeLocationKey { "homeLocation" };
 const QString configLoggedInKey{ "loggedIn" };
 const QString configLauncherPathKey{ "launcherPath" };
 
+void LauncherState::toggleDebugState() {
+    _isDebuggingScreens = !_isDebuggingScreens;
+
+    UIState updatedUIState = getUIState();
+    if (_uiState != updatedUIState) {
+        emit uiStateChanged();
+        emit updateSourceUrl(PathUtils::resourcePath(getCurrentUISource()));
+        _uiState = getUIState();
+    }
+}
+void LauncherState::gotoNextDebugScreen() {
+    if (_currentDebugScreen < (UIState::UI_STATE_NUM - 1)) {
+        _currentDebugScreen = (UIState)(_currentDebugScreen + 1);
+        UIState updatedUIState = getUIState();
+        emit uiStateChanged();
+        emit updateSourceUrl(PathUtils::resourcePath(getCurrentUISource()));
+        _uiState = getUIState();
+    }
+}
+void LauncherState::gotoPreviousDebugScreen() {
+    if (_currentDebugScreen > 0) {
+        _currentDebugScreen = (UIState)(_currentDebugScreen - 1);
+        emit uiStateChanged();
+        emit updateSourceUrl(PathUtils::resourcePath(getCurrentUISource()));
+        _uiState = getUIState();
+    }
+}
+
 QString LauncherState::getContentCachePath() const {
     return _launcherDirectory.filePath("cache");
 }
@@ -116,35 +144,39 @@ void LauncherState::declareQML() {
 }
 
 LauncherState::UIState LauncherState::getUIState() const {
+    if (_isDebuggingScreens) {
+        return _currentDebugScreen;
+    }
+
     switch (_applicationState) {
         case ApplicationState::Init:
         case ApplicationState::RequestingBuilds:
         case ApplicationState::GettingCurrentClientVersion:
-            return SPLASH_SCREEN;
+            return UIState::SplashScreen;
         case ApplicationState::WaitingForLogin:
         case ApplicationState::RequestingLogin:
-            return LOGIN_SCREEN;
+            return UIState::LoginScreen;
         case ApplicationState::WaitingForSignup:
         case ApplicationState::RequestingSignup:
-            return SIGNUP_SCREEN;
+            return UIState::SignupScreen;
         case ApplicationState::DownloadingClient:
         case ApplicationState::InstallingClient:
         case ApplicationState::DownloadingContentCache:
         case ApplicationState::InstallingContentCache:
-            return DOWNLOAD_SCREEN;
+            return UIState::DownloadScreen;
         case ApplicationState::LaunchingHighFidelity:
-            return DOWNLOAD_FINSISHED;
+            return UIState::DownloadFinishedScreen;
         case ApplicationState::UnexpectedError:
 #ifdef BREAK_ON_ERROR
             __debugbreak();
 #endif
-            return ERROR_SCREEN;
+            return UIState::ErrorScreen;
         default:
             qDebug() << "FATAL: No UI for" << _applicationState;
 #ifdef BREAK_ON_ERROR
             __debugbreak();
 #endif
-            return ERROR_SCREEN;
+            return UIState::ErrorScreen;
     }
 }
 

launchers/qt/src/LauncherState.h

@@ -33,13 +33,13 @@ public:
     ~LauncherState() = default;
 
     enum UIState {
-        SPLASH_SCREEN = 0,
+        SplashScreen = 0,
-        SIGNUP_SCREEN,
+        SignupScreen,
-        LOGIN_SCREEN,
+        LoginScreen,
-        DISPLAY_NAME_SCREEN,
+        DownloadScreen,
-        DOWNLOAD_SCREEN,
+        DownloadFinishedScreen,
-        DOWNLOAD_FINSISHED,
+        ErrorScreen,
-        ERROR_SCREEN,
+
         UI_STATE_NUM
     };
 
@@ -66,9 +66,15 @@ public:
         InstallingLauncher,
         InstallingContentCache,
 
-        LaunchingHighFidelity
+        LaunchingHighFidelity,
     };
 
+    bool _isDebuggingScreens{ false };
+    UIState _currentDebugScreen{ UIState::SplashScreen };
+    void toggleDebugState();
+    void gotoNextDebugScreen();
+    void gotoPreviousDebugScreen();
+
     Q_ENUM(UIState);
     Q_ENUM(ApplicationState)
 
@@ -159,7 +165,7 @@ private:
 
     // Application State
     ApplicationState _applicationState { ApplicationState::Init };
-    UIState _uiState { UIState::SPLASH_SCREEN };
+    UIState _uiState { UIState::SplashScreen };
     LoginToken _loginResponse;
     SignupRequest::Error _lastSignupError{ SignupRequest::Error::None };
     QString _lastLoginErrorMessage{ "" };

launchers/qt/src/LauncherWindow.cpp

@@ -9,6 +9,12 @@ void LauncherWindow::keyPressEvent(QKeyEvent* event) {
     if (!event->isAccepted()) {
         if (event->key() == Qt::Key_Escape) {
             exit(0);
+        } else if (event->key() == Qt::Key_Up) {
+            _launcherState->toggleDebugState();
+        } else if (event->key() == Qt::Key_Left) {
+            _launcherState->gotoPreviousDebugScreen();
+        } else if (event->key() == Qt::Key_Right) {
+            _launcherState->gotoNextDebugScreen();
         }
     }
 }

launchers/qt/src/LauncherWindow.h

@@ -12,6 +12,7 @@ public:
     void mouseReleaseEvent(QMouseEvent* event) override;
     void mouseMoveEvent(QMouseEvent* event) override;
     void setLauncherStatePtr(std::shared_ptr<LauncherState> launcherState) { _launcherState = launcherState; }
+
 private:
     bool _drag { false };
     QPoint _previousMousePos;

launchers/qt/src/PathUtils.cpp

@@ -10,3 +10,11 @@ QUrl PathUtils::resourcePath(const QString& source) {
     return QUrl(filePath);
 #endif
 }
+
+QString PathUtils::fontPath(const QString& fontName) {
+#ifdef HIFI_USE_LOCAL_FILE
+    return resourcePath("/fonts/" + fontName).toString(QUrl::PreferLocalFile);
+#else
+    return ":/fonts/" + fontName;
+#endif
+}

launchers/qt/src/PathUtils.h

@@ -10,4 +10,5 @@ public:
     PathUtils() = default;
     ~PathUtils() = default;
     Q_INVOKABLE static QUrl resourcePath(const QString& source);
+    QString static fontPath(const QString& fontName);
 };