Completed FirstTimeUseScreen with Final UX Look (#812)

* Forced Project Manager window to 1200x800 * Final look for FirstTimeUseScreen, essentially complete * Remove margins on screens * Added License info for image
2021-05-19 12:48:55 -07:00
parent 6a108c0515
commit 25e811ff6c
11 changed files with 101 additions and 111 deletions
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7088e902885d98953f6a1715efab319c063a4ab8918fd0e810251c8ed82b8514
+size 542983
@@ -0,0 +1,4 @@
+SPDX-FileCopyrightText: Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, 
+SPDX-FileCopyrightText: modify, distribute, perform, and use photos from Unsplash for free, including for commercial 
+SPDX-FileCopyrightText: purposes, without permission from or attributing the photographer or Unsplash. This license does 
+SPDX-FileCopyrightText: not include the right to compile photos from Unsplash to replicate a similar or competing service.
@@ -12,18 +12,64 @@

 #include <FirstTimeUseScreen.h>

-#include <Source/ui_FirstTimeUseScreen.h>
+#include <QVBoxLayout>
+#include <QHBoxLayout>
+#include <QLabel>
+#include <QPushButton>
+#include <QIcon>
+#include <QSpacerItem>

 namespace O3DE::ProjectManager
 {
+    inline constexpr static int s_contentMargins = 80;
+    inline constexpr static int s_buttonSpacing = 30;
+    inline constexpr static int s_iconSize = 24;
+    inline constexpr static int s_spacerSize = 20;
+    inline constexpr static int s_boxButtonWidth = 210;
+    inline constexpr static int s_boxButtonHeight = 280;
+
    FirstTimeUseScreen::FirstTimeUseScreen(QWidget* parent)
        : ScreenWidget(parent)
-        , m_ui(new Ui::FirstTimeUseClass())
    {
-        m_ui->setupUi(this);
+        QVBoxLayout* vLayout = new QVBoxLayout();
+        setLayout(vLayout);
+        vLayout->setContentsMargins(s_contentMargins, s_contentMargins, s_contentMargins, s_contentMargins);

-        connect(m_ui->createProjectButton, &QPushButton::pressed, this, &FirstTimeUseScreen::HandleNewProjectButton);
-        connect(m_ui->openProjectButton, &QPushButton::pressed, this, &FirstTimeUseScreen::HandleOpenProjectButton);
+        QLabel* titleLabel = new QLabel(this);
+        titleLabel->setText(tr("Ready. Set. Create!"));
+        titleLabel->setStyleSheet("font-size: 60px");
+        vLayout->addWidget(titleLabel);
+
+        QLabel* introLabel = new QLabel(this);
+        introLabel->setTextFormat(Qt::AutoText);
+        introLabel->setText(tr("<html><head/><body><p>Welcome to O3DE! Start something new by creating a project. Not sure what to create? </p><p>Explore what\342\200\231s available by downloading our sample project.</p></body></html>"));
+        introLabel->setStyleSheet("font-size: 14px");
+        vLayout->addWidget(introLabel);
+
+        QHBoxLayout* buttonLayout = new QHBoxLayout();
+        buttonLayout->setSpacing(s_buttonSpacing);
+
+        m_createProjectButton = CreateLargeBoxButton(QIcon(":/Resources/Add.svg"), tr("Create Project"), this);
+        m_createProjectButton->setIconSize(QSize(s_iconSize, s_iconSize));
+        buttonLayout->addWidget(m_createProjectButton);
+
+        m_addProjectButton = CreateLargeBoxButton(QIcon(":/Resources/Select_Folder.svg"), tr("Add a Project"), this);
+        m_addProjectButton->setIconSize(QSize(s_iconSize, s_iconSize));
+        buttonLayout->addWidget(m_addProjectButton);
+
+        QSpacerItem* buttonSpacer = new QSpacerItem(s_spacerSize, s_spacerSize, QSizePolicy::Expanding, QSizePolicy::Minimum);
+        buttonLayout->addItem(buttonSpacer);
+
+        vLayout->addItem(buttonLayout);
+
+        QSpacerItem* verticalSpacer = new QSpacerItem(s_spacerSize, s_spacerSize, QSizePolicy::Minimum, QSizePolicy::Expanding);
+        vLayout->addItem(verticalSpacer);
+
+        // Using border-image allows for scaling options background-image does not support
+        setStyleSheet("O3DE--ProjectManager--ScreenWidget { border-image: url(:/Resources/Backgrounds/FirstTimeBackgroundImage.jpg) repeat repeat; }");
+
+        connect(m_createProjectButton, &QPushButton::pressed, this, &FirstTimeUseScreen::HandleNewProjectButton);
+        connect(m_addProjectButton, &QPushButton::pressed, this, &FirstTimeUseScreen::HandleAddProjectButton);
    }

    ProjectManagerScreen FirstTimeUseScreen::GetScreenEnum()
@@ -36,9 +82,21 @@ namespace O3DE::ProjectManager
        emit ResetScreenRequest(ProjectManagerScreen::NewProjectSettingsCore);
        emit ChangeScreenRequest(ProjectManagerScreen::NewProjectSettingsCore);
    }
-    void FirstTimeUseScreen::HandleOpenProjectButton()
+    void FirstTimeUseScreen::HandleAddProjectButton()
    {
        emit ChangeScreenRequest(ProjectManagerScreen::ProjectsHome);
    }

+    QPushButton* FirstTimeUseScreen::CreateLargeBoxButton(const QIcon& icon, const QString& text, QWidget* parent)
+    {
+        QPushButton* largeBoxButton = new QPushButton(icon, text, parent);
+
+        largeBoxButton->setFixedSize(s_boxButtonWidth, s_boxButtonHeight);
+        largeBoxButton->setFlat(true);
+        largeBoxButton->setFocusPolicy(Qt::FocusPolicy::NoFocus);
+        largeBoxButton->setStyleSheet("QPushButton { font-size: 14px; background-color: rgba(0, 0, 0, 191); }");
+
+        return largeBoxButton;
+    }
+
 } // namespace O3DE::ProjectManager
@@ -15,10 +15,8 @@
 #include <ScreenWidget.h>
 #endif

-namespace Ui
-{
-    class FirstTimeUseClass;
-}
+QT_FORWARD_DECLARE_CLASS(QIcon)
+QT_FORWARD_DECLARE_CLASS(QPushButton)

 namespace O3DE::ProjectManager
 {
@@ -32,10 +30,13 @@ namespace O3DE::ProjectManager

    protected slots:
        void HandleNewProjectButton();
-        void HandleOpenProjectButton();
+        void HandleAddProjectButton();

    private:
-        QScopedPointer<Ui::FirstTimeUseClass> m_ui;
+        QPushButton* CreateLargeBoxButton(const QIcon& icon, const QString& text, QWidget* parent = nullptr);
+
+        QPushButton* m_createProjectButton;
+        QPushButton* m_addProjectButton;
    };

 } // namespace O3DE::ProjectManager
@@ -1,93 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<ui version="4.0">
- <class>FirstTimeUseClass</class>
- <widget class="QWidget" name="FirstTimeUseClass">
-  <property name="geometry">
-   <rect>
-    <x>0</x>
-    <y>0</y>
-    <width>881</width>
-    <height>555</height>
-   </rect>
-  </property>
-  <property name="windowTitle">
-   <string>Form</string>
-  </property>
-  <layout class="QVBoxLayout" name="verticalLayout_2">
-   <item>
-    <layout class="QVBoxLayout" name="verticalLayout_5">
-     <item>
-      <widget class="QLabel" name="label">
-       <property name="font">
-        <font>
-         <pointsize>30</pointsize>
-        </font>
-       </property>
-       <property name="text">
-        <string>READY. SET. CREATE!</string>
-       </property>
-      </widget>
-     </item>
-     <item>
-      <widget class="QLabel" name="label_2">
-       <property name="text">
-        <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;Welcome to O3DE! Start something new by creating a project. Not sure what to create? &lt;/p&gt;&lt;p&gt;Explore what’s available by downloading our sample project.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
-       </property>
-       <property name="textFormat">
-        <enum>Qt::AutoText</enum>
-       </property>
-      </widget>
-     </item>
-    </layout>
-   </item>
-   <item>
-    <layout class="QHBoxLayout" name="horizontalLayout_7">
-     <item>
-      <widget class="QPushButton" name="createProjectButton">
-       <property name="sizePolicy">
-        <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
-         <horstretch>0</horstretch>
-         <verstretch>0</verstretch>
-        </sizepolicy>
-       </property>
-       <property name="text">
-        <string>Create Project</string>
-       </property>
-       <property name="icon">
-        <iconset resource="../project_manager.qrc">
-         <normaloff>:/Resources/Add.svg</normaloff>:/Resources/Add.svg</iconset>
-       </property>
-       <property name="iconSize">
-        <size>
-         <width>16</width>
-         <height>16</height>
-        </size>
-       </property>
-      </widget>
-     </item>
-     <item>
-      <widget class="QPushButton" name="openProjectButton">
-       <property name="sizePolicy">
-        <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
-         <horstretch>0</horstretch>
-         <verstretch>0</verstretch>
-        </sizepolicy>
-       </property>
-       <property name="text">
-        <string>Open a Project</string>
-       </property>
-       <property name="icon">
-        <iconset resource="../project_manager.qrc">
-         <normaloff>:/Resources/Select_Folder.svg</normaloff>:/Resources/Select_Folder.svg</iconset>
-       </property>
-      </widget>
-     </item>
-    </layout>
-   </item>
-  </layout>
- </widget>
- <resources>
-  <include location="../project_manager.qrc"/>
- </resources>
- <connections/>
-</ui>
@@ -27,6 +27,12 @@ namespace O3DE::ProjectManager
        , m_ui(new Ui::ProjectManagerWindowClass())
    {
        m_ui->setupUi(this);
+        QLayout* layout = m_ui->centralWidget->layout();
+        layout->setMargin(0);
+        layout->setSpacing(0);
+        layout->setContentsMargins(0, 0, 0, 0);
+
+        setFixedSize(this->geometry().width(), this->geometry().height());

        m_pythonBindings = AZStd::make_unique<PythonBindings>(engineRootPath);

@@ -6,10 +6,16 @@
   <rect>
    <x>0</x>
    <y>0</y>
-    <width>800</width>
-    <height>600</height>
+    <width>1200</width>
+    <height>800</height>
   </rect>
  </property>
+  <property name="sizePolicy">
+   <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+    <horstretch>0</horstretch>
+    <verstretch>0</verstretch>
+   </sizepolicy>
+  </property>
  <property name="windowTitle">
   <string>O3DE Project Manager</string>
  </property>
@@ -21,7 +27,7 @@
    <rect>
     <x>0</x>
     <y>0</y>
-     <width>800</width>
+     <width>1200</width>
     <height>36</height>
    </rect>
   </property>
@@ -15,18 +15,20 @@
 #include <ScreenDefs.h>

 #include <QWidget>
+#include <QStyleOption>
+#include <QPainter>
 #endif

 namespace O3DE::ProjectManager
 {
    class ScreenWidget
-        : public QWidget
+        : public QFrame
    {
        Q_OBJECT

    public:
        explicit ScreenWidget(QWidget* parent = nullptr)
-            : QWidget(parent)
+            : QFrame(parent)
        {
        }
        ~ScreenWidget() = default;
@@ -22,6 +22,9 @@ namespace O3DE::ProjectManager
        : QWidget(parent)
    {
        QVBoxLayout* vLayout = new QVBoxLayout();
+        vLayout->setMargin(0);
+        vLayout->setSpacing(0);
+        vLayout->setContentsMargins(0, 0, 0, 0);
        setLayout(vLayout);

        m_screenStack = new QStackedWidget();
@@ -9,5 +9,6 @@
        <file>Resources/iOS.svg</file>
        <file>Resources/Linux.svg</file>
        <file>Resources/macOS.svg</file>
+        <file>Resources/Backgrounds/FirstTimeBackgroundImage.jpg</file>
    </qresource>
 </RCC>
@@ -22,7 +22,6 @@ set(FILES
    Source/EngineInfo.cpp
    Source/FirstTimeUseScreen.h
    Source/FirstTimeUseScreen.cpp
-    Source/FirstTimeUseScreen.ui
    Source/ProjectManagerWindow.h
    Source/ProjectManagerWindow.cpp
    Source/ProjectTemplateInfo.h