Implement container Card (o3de#11114)

It's a new style for card that is meant for "sections" in property
editors for grouping things.

To implement the underline in CardHeader a new internal widget was
introduced, a simple single-colored Rectangle. It wasn't feasible
to implement the underline with stylesheets because:
 * the color may change at runtime so it can't be explicitly set
   in the stylesheet
 * ::setStylesheet() would conflict with what's happening in
   Card::polish()

Container card header styling got partially decoupled from the Card
itself because CardHeader will be later used stand-alone (see o3de#10960).

Fixes: o3de#10958
Signed-off-by: Miłosz Kosobucki <milosz@kosobucki.pl>

Author: MiKom

Code/Framework/AzQtComponents/AzQtComponents/Components/Widgets/Card.cpp

@@ -25,6 +25,9 @@
 
 namespace AzQtComponents
 {
+
+    static QString g_containerCardClass = QStringLiteral("ContainerCard");
+
     static QPixmap ApplyAlphaToPixmap(const QPixmap& pixmap, float alpha)
     {
         QImage image = pixmap.toImage().convertToFormat(QImage::Format_ARGB32);
@@ -40,6 +43,12 @@ namespace AzQtComponents
         return QPixmap::fromImage(image);
     }
 
+    void Card::applyContainerStyle(Card* card)
+    {
+        Style::addClass(card, g_containerCardClass);
+        CardHeader::applyContainerStyle(card->header());
+    }
+
     Card::Card(QWidget* parent /* = nullptr */)
         // DO NOT SET THE PARENT OF THE CardHeader TO THIS!
         // It will cause a crash, because the this object is not initialized enough to be used as a parent object.

Code/Framework/AzQtComponents/AzQtComponents/Components/Widgets/Card.h

@@ -59,6 +59,8 @@ namespace AzQtComponents
             qreal disabledIconAlpha;    //!< Alpha value for disabled icons. Must be a value between 0.0 and 1.0.
         };
 
+        static void applyContainerStyle(Card* card);
+
         Card(QWidget* parent = nullptr);
 
         //! Sets the Primary Content Widget for this Card.

Code/Framework/AzQtComponents/AzQtComponents/Components/Widgets/Card.qss

@@ -112,6 +112,25 @@ AzQtComponents--Card[selected="true"][expanded="false"] > AzQtComponents--CardHe
     border-radius: 2px
 }
 
+AzQtComponents--Card[class~="ContainerCard"]
+{
+    border: none;
+    border-image: none;
+}
+
+AzQtComponents--Card[class~="ContainerCard"] > #contentContainer
+{
+    background-color: transparent;
+    border: none;
+}
+
+AzQtComponents--CardHeader[class~="ContainerCardHeader"]
+{
+    background-color: #333333;
+    border-radius: 0px;
+    border: none;
+}
+
 .primaryCardHeader
 {
     background-color: #333333;

Code/Framework/AzQtComponents/AzQtComponents/Components/Widgets/CardHeader.cpp

@@ -8,6 +8,7 @@
 
 #include <AzQtComponents/Components/Widgets/CardHeader.h>
 #include <AzQtComponents/Components/Widgets/CheckBox.h>
+#include <AzQtComponents/Components/Widgets/Internal/RectangleWidget.h>
 #include <AzQtComponents/Components/Style.h>
 #include <AzQtComponents/Components/StyleHelpers.h>
 
@@ -23,6 +24,8 @@
 
 namespace AzQtComponents
 {
+    static QString g_containerCardHeaderClass = QStringLiteral("ContainerCardHeader");
+
     namespace HeaderBarConstants
     {
         // names for widgets so they can be found in stylesheet
@@ -34,9 +37,15 @@ namespace AzQtComponents
         static const char* kContextMenuId = "ContextMenu";
         static const char* kContextMenuPlusIconId = "ContextMenuPlusIcon";
         static const char* khelpButtonId = "Help";
+        static const char* kUnderlineRectId = "UnderlineRectangle";
 
         static const char* kCardHeaderIconClassName = "CardHeaderIcon";
         static const char* kCardHeaderMenuClassName = "CardHeaderMenu";
+    } // namespace HeaderBarConstants
+
+    void CardHeader::applyContainerStyle(CardHeader* header)
+    {
+        Style::addClass(header, g_containerCardHeaderClass);
     }
 
     int CardHeader::s_iconSize = CardHeader::defaultIconSize();
@@ -112,6 +121,12 @@ namespace AzQtComponents
         m_mainLayout->setContentsMargins(0, 0, 0, 0);
         m_mainLayout->addWidget(m_backgroundFrame);
 
+        m_underlineWidget = new Internal::RectangleWidget(this);
+        m_underlineWidget->setObjectName(HeaderBarConstants::kUnderlineRectId);
+        m_underlineWidget->setFixedHeight(2);
+        setUnderlineColor(QColor());
+        m_mainLayout->addWidget(m_underlineWidget);
+
         StyleHelpers::repolishWhenPropertyChanges(this, &CardHeader::warningChanged);
         StyleHelpers::repolishWhenPropertyChanges(this, &CardHeader::readOnlyChanged);
         StyleHelpers::repolishWhenPropertyChanges(this, &CardHeader::contentModifiedChanged);
@@ -140,7 +155,7 @@ namespace AzQtComponents
         m_titleLabel->update();
     }
 
-    void CardHeader::setTitleProperty(const char *name, const QVariant &value)
+    void CardHeader::setTitleProperty(const char* name, const QVariant& value)
     {
         m_titleLabel->setProperty(name, value);
     }
@@ -179,7 +194,7 @@ namespace AzQtComponents
             m_warningLabel->setPixmap(m_warningIcon.pixmap(s_iconSize, s_iconSize));
         }
     }
-    
+
     void CardHeader::mockDisabledState(bool disabled)
     {
         m_iconLabel->setDisabled(disabled);
@@ -273,7 +288,7 @@ namespace AzQtComponents
 
     void CardHeader::mouseDoubleClickEvent(QMouseEvent* event)
     {
-        //allow double click to expand/contract
+        // allow double click to expand/contract
         if (event->button() == Qt::LeftButton && isExpandable())
         {
             bool expand = !isExpanded();
@@ -356,6 +371,14 @@ namespace AzQtComponents
         Style::addClass(m_contextMenuButton, HeaderBarConstants::kCardHeaderMenuClassName);
     }
 
+    void CardHeader::setUnderlineColor(const QColor& color)
+    {
+        m_underlineWidget->setColor(color);
+
+        const bool underlineVisible = color.isValid() && color.alpha() != 0;
+        m_underlineWidget->setVisible(underlineVisible);
+    }
+
 } // namespace AzQtComponents
 
 #include "Components/Widgets/moc_CardHeader.cpp"

Code/Framework/AzQtComponents/AzQtComponents/Components/Widgets/CardHeader.h

@@ -24,6 +24,11 @@ class QLabel;
 
 namespace AzQtComponents
 {
+    namespace Internal
+    {
+        class RectangleWidget;
+    }
+
     //! Header bar for Card widgets.
     //! Provides a bar with an expander arrow, a text title and a button to trigger a context menu.
     //! Also has an optional icon and help button. 
@@ -47,6 +52,8 @@ namespace AzQtComponents
             Plus        //!< Plus button, usually tied to add actions.
         };
 
+        static void applyContainerStyle(CardHeader* header);
+
         CardHeader(QWidget* parent = nullptr);
 
         //! Sets the Card Header title. Passing an empty string will hide the Card Header.
@@ -129,6 +136,10 @@ namespace AzQtComponents
         //! Sets the icon to be displayed for the context menu.
         void setContextMenuIcon(ContextMenuIcon iconType);
 
+        //! Sets the small solid color underline under the header. If color is
+        //! invalid or transparent, the underline will disappear completely.
+        void setUnderlineColor(const QColor& color);
+
     Q_SIGNALS:
         //! Triggered when the context menu button is clicked, or on a right click.
         void contextMenuRequested(const QPoint& position);
@@ -162,6 +173,7 @@ namespace AzQtComponents
         QLabel* m_warningLabel = nullptr;
         QPushButton* m_contextMenuButton = nullptr;
         QPushButton* m_helpButton = nullptr;
+        Internal::RectangleWidget* m_underlineWidget = nullptr;
         bool m_warning = false;
         bool m_readOnly = false;
         bool m_modified = false;

Code/Framework/AzQtComponents/AzQtComponents/Components/Widgets/Internal/RectangleWidget.cpp

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) Contributors to the Open 3D Engine Project.
+ * For complete copyright and license terms please see the LICENSE at the root of this distribution.
+ *
+ * SPDX-License-Identifier: Apache-2.0 OR MIT
+ *
+ */
+
+#include <AzQtComponents/Components/Widgets/Internal/RectangleWidget.h>
+
+#include <QPaintEvent>
+#include <QPainter>
+#include <QWidget>
+
+namespace AzQtComponents::Internal
+{
+    RectangleWidget::RectangleWidget(QWidget* parent)
+        : QWidget(parent)
+    {
+    }
+
+    void RectangleWidget::setColor(const QColor& color)
+    {
+        if (color != m_color)
+        {
+            m_color = color;
+            update();
+        }
+    }
+
+    QColor RectangleWidget::color() const
+    {
+        return m_color;
+    }
+
+    void RectangleWidget::paintEvent(QPaintEvent* event)
+    {
+        QPainter p(this);
+        p.fillRect(event->rect(), m_color);
+
+        QWidget::paintEvent(event);
+    }
+} // namespace AzQtComponents::Internal

Code/Framework/AzQtComponents/AzQtComponents/Components/Widgets/Internal/RectangleWidget.h

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) Contributors to the Open 3D Engine Project.
+ * For complete copyright and license terms please see the LICENSE at the root of this distribution.
+ *
+ * SPDX-License-Identifier: Apache-2.0 OR MIT
+ *
+ */
+#pragma once
+
+#if !defined(Q_MOC_RUN)
+#include <AzQtComponents/AzQtComponentsAPI.h>
+
+#include <QWidget>
+#endif
+
+class QPaintEvent;
+
+namespace AzQtComponents::Internal
+{
+    //! A rectangle of a single color.
+    //! To be used when filling some space with a solid color
+    //! is not feasible through styling.
+    class AZ_QT_COMPONENTS_API RectangleWidget : public QWidget
+    {
+        Q_OBJECT
+    public:
+        explicit RectangleWidget(QWidget* parent);
+
+        //! Set the color with which the rectangle will be painted.
+        void setColor(const QColor& color);
+        //! Get the current color of the rectangle.
+        [[nodiscard]] QColor color() const;
+
+    protected:
+        void paintEvent(QPaintEvent* event) override;
+
+    private:
+        QColor m_color = Qt::white;
+    };
+
+} // namespace AzQtComponents::Internal

Code/Framework/AzQtComponents/AzQtComponents/Gallery/CardPage.cpp

@@ -70,6 +70,16 @@ header->setHelpURL("https://o3de.org/docs/");
 // Clear the help url
 header->clearHelpURL();
 
+// Set header underline color to make some card visually popping
+header->setUnderlineColor(Qt::cyan);
+
+// Container cards don't have a visually distinct contents area and can
+// be used for grouping other cards and widgets
+AzQtComponents* containerCard;
+AzQtComponents::Card::applyContainerStyle(containerCard);
+auto* nestedCard = new AzQtComponents::Card();
+containerCard->setContentWidget(nestedCard);
+
 // Populate the menu that pops up when the header bar is right clicked or when the user clicks on the menu button
 connect(card, &AzQtComponents::Card::contextMenuRequested, this, [](const QPoint& pos){
     QMenu menu;
@@ -120,6 +130,22 @@ card->mockDisabledState(true);
     ui->functionalCard->setTitle("Card With Secondary Section");
     addContentWidget(ui->functionalCard, 60);
 
+    AzQtComponents::Card::applyContainerStyle(ui->containerCard);
+    ui->containerCard->setTitle("Container card");
+    ui->containerCard->header()->setUnderlineColor(QColor("#a675ff"));
+
+    auto* contentWidget = new QWidget;
+    auto* nestedLayout = new QVBoxLayout(contentWidget);
+    ui->containerCard->setContentWidget(contentWidget);
+
+    auto* nestedCard = new AzQtComponents::Card();
+    nestedCard->setTitle("Nested card");
+    addContentWidget(nestedCard, 30);
+    nestedLayout->addWidget(nestedCard);
+
+    auto* button = new QPushButton("Nested button");
+    nestedLayout->addWidget(button);
+
     // put in an example icon
     AzQtComponents::CardHeader* header = ui->functionalCard->header();
     header->setIcon(QIcon(":/Cards/img/UI20/Cards/slice_item.png"));

Code/Framework/AzQtComponents/AzQtComponents/Gallery/CardPage.ui

@@ -75,6 +75,9 @@
      <item>
       <widget class="AzQtComponents::Card" name="functionalCard" native="true"/>
      </item>
+     <item>
+      <widget class="AzQtComponents::Card" name="containerCard" native="true"/>
+     </item>
      <item>
       <spacer name="verticalSpacer_2">
        <property name="orientation">

Code/Framework/AzQtComponents/AzQtComponents/azqtcomponents_files.cmake

@@ -171,6 +171,8 @@ set(FILES
     Components/Widgets/MessageBox.h
     Components/Widgets/OverlayWidget.cpp
     Components/Widgets/OverlayWidget.h
+    Components/Widgets/Internal/RectangleWidget.cpp
+    Components/Widgets/Internal/RectangleWidget.h
     Components/Widgets/Internal/OverlayWidgetLayer.cpp
     Components/Widgets/Internal/OverlayWidgetLayer.h
     Components/Widgets/Internal/OverlayWidgetLayer.ui