Resizable Headers for Gem Catalog and Gem Repo Screen (#6885)

* Initial mostly working attempt at resizable headers

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Add const and constexpr to variables

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Add header tracking for buttons, display items based on header scrollbar position, fix some spacing issues

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Correct styling for adjustable header, and intending header section and alingned item content with header text

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Prevent header resizing larger than table width.

Signed-off-by: Alex Peterson <26804013+AMZN-alexpete@users.noreply.github.com>

* Fix resize graphical glitching

Signed-off-by: Alex Peterson <26804013+AMZN-alexpete@users.noreply.github.com>

* Remove unecessary qss

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Removed necessary headers

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Remove extra nl and old comment

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Address PR feedback

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Removed unused variables

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Change variable to constexpr

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Remove AUTOMOC from headers, set background color of Gem Catalog to 333333 and adjustable header to transparent

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Change to using update instead of repaint when sections are resized

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

* Change temp directory creation on for gradle

Signed-off-by: nggieber <52797929+AMZN-nggieber@users.noreply.github.com>

Co-authored-by: Alex Peterson <26804013+AMZN-alexpete@users.noreply.github.com>
This commit is contained in:
AMZN-nggieber
2022-01-28 10:05:03 -08:00
committed by GitHub
parent 0ba1cff08e
commit 24086ab394
41 changed files with 437 additions and 158 deletions
@@ -26,7 +26,7 @@ namespace O3DE::ProjectManager
{
class GemRepoInspector : public QScrollArea
{
Q_OBJECT // AUTOMOC
Q_OBJECT
public : explicit GemRepoInspector(GemRepoModel* model, QWidget* parent = nullptr);
~GemRepoInspector() = default;
@@ -9,16 +9,19 @@
#include <GemRepo/GemRepoItemDelegate.h>
#include <GemRepo/GemRepoModel.h>
#include <ProjectManagerDefs.h>
#include <AdjustableHeaderWidget.h>
#include <QEvent>
#include <QPainter>
#include <QMouseEvent>
#include <QHeaderView>
namespace O3DE::ProjectManager
{
GemRepoItemDelegate::GemRepoItemDelegate(QAbstractItemModel* model, QObject* parent)
GemRepoItemDelegate::GemRepoItemDelegate(QAbstractItemModel* model, AdjustableHeaderWidget* header, QObject* parent)
: QStyledItemDelegate(parent)
, m_model(model)
, m_headerWidget(header)
{
m_refreshIcon = QIcon(":/Refresh.svg").pixmap(s_refreshIconSize, s_refreshIconSize);
m_editIcon = QIcon(":/Edit.svg").pixmap(s_iconSize, s_iconSize);
@@ -69,44 +72,55 @@ namespace O3DE::ProjectManager
painter->restore();
}
int currentHorizontalOffset = CalcColumnXBounds(HeaderOrder::Name).first;
// Repo name
QString repoName = GemRepoModel::GetName(modelIndex);
repoName = QFontMetrics(standardFont).elidedText(repoName, Qt::TextElideMode::ElideRight, s_nameMaxWidth);
int sectionSize = m_headerWidget->m_header->sectionSize(static_cast<int>(HeaderOrder::Name));
repoName = standardFontMetrics.elidedText(repoName, Qt::TextElideMode::ElideRight,
sectionSize - AdjustableHeaderWidget::s_headerTextIndent);
QRect repoNameRect = GetTextRect(standardFont, repoName, s_fontSize);
int currentHorizontalOffset = contentRect.left();
repoNameRect.moveTo(currentHorizontalOffset, contentRect.center().y() - repoNameRect.height() / 2);
repoNameRect.moveTo(currentHorizontalOffset + AdjustableHeaderWidget::s_headerTextIndent,
contentRect.center().y() - repoNameRect.height() / 2);
repoNameRect = painter->boundingRect(repoNameRect, Qt::TextSingleLine, repoName);
painter->drawText(repoNameRect, Qt::TextSingleLine, repoName);
// Rem repo creator
currentHorizontalOffset += sectionSize;
sectionSize = m_headerWidget->m_header->sectionSize(static_cast<int>(HeaderOrder::Creator));
QString repoCreator = GemRepoModel::GetCreator(modelIndex);
repoCreator = standardFontMetrics.elidedText(repoCreator, Qt::TextElideMode::ElideRight, s_creatorMaxWidth);
repoCreator = standardFontMetrics.elidedText(repoCreator, Qt::TextElideMode::ElideRight,
sectionSize - AdjustableHeaderWidget::s_headerTextIndent);
QRect repoCreatorRect = GetTextRect(standardFont, repoCreator, s_fontSize);
currentHorizontalOffset += s_nameMaxWidth + s_contentSpacing;
repoCreatorRect.moveTo(currentHorizontalOffset, contentRect.center().y() - repoCreatorRect.height() / 2);
repoCreatorRect.moveTo(currentHorizontalOffset + AdjustableHeaderWidget::s_headerTextIndent,
contentRect.center().y() - repoCreatorRect.height() / 2);
repoCreatorRect = painter->boundingRect(repoCreatorRect, Qt::TextSingleLine, repoCreator);
painter->drawText(repoCreatorRect, Qt::TextSingleLine, repoCreator);
// Repo update
currentHorizontalOffset += sectionSize;
sectionSize = m_headerWidget->m_header->sectionSize(static_cast<int>(HeaderOrder::Update));
QString repoUpdatedDate = GemRepoModel::GetLastUpdated(modelIndex).toString(RepoTimeFormat);
repoUpdatedDate = standardFontMetrics.elidedText(repoUpdatedDate, Qt::TextElideMode::ElideRight, s_updatedMaxWidth);
repoUpdatedDate = standardFontMetrics.elidedText(
repoUpdatedDate, Qt::TextElideMode::ElideRight,
sectionSize - GemRepoItemDelegate::s_refreshIconSpacing - GemRepoItemDelegate::s_refreshIconSize - AdjustableHeaderWidget::s_headerTextIndent);
QRect repoUpdatedDateRect = GetTextRect(standardFont, repoUpdatedDate, s_fontSize);
currentHorizontalOffset += s_creatorMaxWidth + s_contentSpacing;
repoUpdatedDateRect.moveTo(currentHorizontalOffset, contentRect.center().y() - repoUpdatedDateRect.height() / 2);
repoUpdatedDateRect.moveTo(currentHorizontalOffset + AdjustableHeaderWidget::s_headerTextIndent,
contentRect.center().y() - repoUpdatedDateRect.height() / 2);
repoUpdatedDateRect = painter->boundingRect(repoUpdatedDateRect, Qt::TextSingleLine, repoUpdatedDate);
painter->drawText(repoUpdatedDateRect, Qt::TextSingleLine, repoUpdatedDate);
// Draw refresh button
painter->drawPixmap(
repoUpdatedDateRect.left() + s_updatedMaxWidth + s_refreshIconSpacing,
contentRect.center().y() - s_refreshIconSize / 3, // Dividing size by 3 centers much better
m_refreshIcon);
const QRect refreshButtonRect = CalcRefreshButtonRect(contentRect);
painter->drawPixmap(refreshButtonRect.topLeft(), m_refreshIcon);
if (options.state & QStyle::State_MouseOver)
{
@@ -121,8 +135,8 @@ namespace O3DE::ProjectManager
QStyleOptionViewItem options(option);
initStyleOption(&options, modelIndex);
int marginsHorizontal = s_itemMargins.left() + s_itemMargins.right() + s_contentMargins.left() + s_contentMargins.right();
return QSize(marginsHorizontal + s_nameMaxWidth + s_creatorMaxWidth + s_updatedMaxWidth + s_contentSpacing * 3, s_height);
const int marginsHorizontal = s_itemMargins.left() + s_itemMargins.right() + s_contentMargins.left() + s_contentMargins.right();
return QSize(marginsHorizontal + s_nameDefaultWidth + s_creatorDefaultWidth + s_updatedDefaultWidth, s_height);
}
bool GemRepoItemDelegate::editorEvent(QEvent* event, QAbstractItemModel* model, const QStyleOptionViewItem& option, const QModelIndex& modelIndex)
@@ -185,22 +199,31 @@ namespace O3DE::ProjectManager
return QFontMetrics(font).boundingRect(text);
}
QPair<int, int> GemRepoItemDelegate::CalcColumnXBounds(HeaderOrder header) const
{
return m_headerWidget->CalcColumnXBounds(static_cast<int>(header));
}
QRect GemRepoItemDelegate::CalcDeleteButtonRect(const QRect& contentRect) const
{
const QPoint topLeft = QPoint(contentRect.right() - s_iconSize, contentRect.center().y() - s_iconSize / 2);
const int deleteHeaderEndX = CalcColumnXBounds(HeaderOrder::Delete).second;
const QPoint topLeft = QPoint(deleteHeaderEndX - s_iconSize - s_contentMargins.right(), contentRect.center().y() - s_iconSize / 2);
return QRect(topLeft, QSize(s_iconSize, s_iconSize));
}
QRect GemRepoItemDelegate::CalcRefreshButtonRect(const QRect& contentRect) const
{
const int topLeftX = contentRect.left() + s_nameMaxWidth + s_creatorMaxWidth + s_updatedMaxWidth + s_contentSpacing * 2 + s_refreshIconSpacing;
const QPoint topLeft = QPoint(topLeftX, contentRect.center().y() - s_refreshIconSize / 3);
const int headerEndX = CalcColumnXBounds(HeaderOrder::Update).second;
const int leftX = headerEndX - s_refreshIconSize - s_refreshIconSpacing;
// Dividing size by 3 centers much better
const QPoint topLeft = QPoint(leftX, contentRect.center().y() - s_refreshIconSize / 3);
return QRect(topLeft, QSize(s_refreshIconSize, s_refreshIconSize));
}
void GemRepoItemDelegate::DrawEditButtons(QPainter* painter, const QRect& contentRect) const
{
painter->drawPixmap(contentRect.right() - s_iconSize, contentRect.center().y() - s_iconSize / 2, m_deleteIcon);
const QRect deleteButtonRect = CalcDeleteButtonRect(contentRect);
painter->drawPixmap(deleteButtonRect, m_deleteIcon);
}
} // namespace O3DE::ProjectManager
@@ -18,13 +18,15 @@ QT_FORWARD_DECLARE_CLASS(QEvent)
namespace O3DE::ProjectManager
{
QT_FORWARD_DECLARE_CLASS(AdjustableHeaderWidget)
class GemRepoItemDelegate
: public QStyledItemDelegate
{
Q_OBJECT // AUTOMOC
Q_OBJECT
public:
explicit GemRepoItemDelegate(QAbstractItemModel* model, QObject* parent = nullptr);
explicit GemRepoItemDelegate(QAbstractItemModel* model, AdjustableHeaderWidget* header, QObject* parent = nullptr);
~GemRepoItemDelegate() = default;
void paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& modelIndex) const override;
@@ -42,15 +44,14 @@ namespace O3DE::ProjectManager
inline constexpr static qreal s_fontSize = 12.0;
// Margin and borders
inline constexpr static QMargins s_itemMargins = QMargins(/*left=*/0, /*top=*/8, /*right=*/60, /*bottom=*/8); // Item border distances
inline constexpr static QMargins s_itemMargins = QMargins(/*left=*/0, /*top=*/8, /*right=*/0, /*bottom=*/8); // Item border distances
inline constexpr static QMargins s_contentMargins = QMargins(/*left=*/20, /*top=*/20, /*right=*/20, /*bottom=*/20); // Distances of the elements within an item to the item borders
inline constexpr static int s_borderWidth = 4;
// Content
inline constexpr static int s_contentSpacing = 5;
inline constexpr static int s_nameMaxWidth = 145;
inline constexpr static int s_creatorMaxWidth = 115;
inline constexpr static int s_updatedMaxWidth = 125;
inline constexpr static int s_nameDefaultWidth = 150;
inline constexpr static int s_creatorDefaultWidth = 120;
inline constexpr static int s_updatedDefaultWidth = 130;
// Icon
inline constexpr static int s_iconSize = 24;
@@ -58,6 +59,14 @@ namespace O3DE::ProjectManager
inline constexpr static int s_refreshIconSize = 14;
inline constexpr static int s_refreshIconSpacing = 10;
enum class HeaderOrder
{
Name,
Creator,
Update,
Delete
};
signals:
void RemoveRepo(const QModelIndex& modelIndex);
void RefreshRepo(const QModelIndex& modelIndex);
@@ -65,13 +74,15 @@ namespace O3DE::ProjectManager
protected:
void CalcRects(const QStyleOptionViewItem& option, QRect& outFullRect, QRect& outItemRect, QRect& outContentRect) const;
QRect GetTextRect(QFont& font, const QString& text, qreal fontSize) const;
QRect CalcButtonRect(const QRect& contentRect) const;
QPair<int, int> CalcColumnXBounds(HeaderOrder header) const;
QRect CalcDeleteButtonRect(const QRect& contentRect) const;
QRect CalcRefreshButtonRect(const QRect& contentRect) const;
void DrawEditButtons(QPainter* painter, const QRect& contentRect) const;
QAbstractItemModel* m_model = nullptr;
AdjustableHeaderWidget* m_headerWidget = nullptr;
QPixmap m_refreshIcon;
QPixmap m_editIcon;
QPixmap m_deleteIcon;
@@ -8,12 +8,15 @@
#include <GemRepo/GemRepoListView.h>
#include <GemRepo/GemRepoItemDelegate.h>
#include <AdjustableHeaderWidget.h>
#include <QShortcut>
#include <QHeaderView>
namespace O3DE::ProjectManager
{
GemRepoListView::GemRepoListView(QAbstractItemModel* model, QItemSelectionModel* selectionModel, QWidget* parent)
GemRepoListView::GemRepoListView(
QAbstractItemModel* model, QItemSelectionModel* selectionModel, AdjustableHeaderWidget* header, QWidget* parent)
: QListView(parent)
{
setObjectName("gemRepoListView");
@@ -22,9 +25,10 @@ namespace O3DE::ProjectManager
setModel(model);
setSelectionModel(selectionModel);
GemRepoItemDelegate* itemDelegate = new GemRepoItemDelegate(model, this);
GemRepoItemDelegate* itemDelegate = new GemRepoItemDelegate(model, header, this);
connect(itemDelegate, &GemRepoItemDelegate::RemoveRepo, this, &GemRepoListView::RemoveRepo);
connect(itemDelegate, &GemRepoItemDelegate::RefreshRepo, this, &GemRepoListView::RefreshRepo);
connect(header, &AdjustableHeaderWidget::sectionsResized, [=] { update(); });
setItemDelegate(itemDelegate);
}
} // namespace O3DE::ProjectManager
@@ -17,13 +17,19 @@ QT_FORWARD_DECLARE_CLASS(QAbstractItemModel)
namespace O3DE::ProjectManager
{
QT_FORWARD_DECLARE_CLASS(AdjustableHeaderWidget)
class GemRepoListView
: public QListView
{
Q_OBJECT // AUTOMOC
Q_OBJECT
public:
explicit GemRepoListView(QAbstractItemModel* model, QItemSelectionModel* selectionModel, QWidget* parent = nullptr);
explicit GemRepoListView(
QAbstractItemModel* model,
QItemSelectionModel* selectionModel,
AdjustableHeaderWidget* header,
QWidget* parent = nullptr);
~GemRepoListView() = default;
signals:
@@ -21,7 +21,7 @@ namespace O3DE::ProjectManager
class GemRepoModel
: public QStandardItemModel
{
Q_OBJECT // AUTOMOC
Q_OBJECT
public:
explicit GemRepoModel(QObject* parent = nullptr);
@@ -15,6 +15,8 @@
#include <PythonBindingsInterface.h>
#include <ProjectManagerDefs.h>
#include <ProjectUtils.h>
#include <AdjustableHeaderWidget.h>
#include <ProjectManagerDefs.h>
#include <QVBoxLayout>
#include <QHBoxLayout>
@@ -248,6 +250,9 @@ namespace O3DE::ProjectManager
QFrame* GemRepoScreen::CreateReposContent()
{
constexpr int inspectorWidth = 240;
constexpr int middleLayoutIndent = 60;
QFrame* contentFrame = new QFrame(this);
QHBoxLayout* hLayout = new QHBoxLayout();
@@ -255,7 +260,7 @@ namespace O3DE::ProjectManager
hLayout->setSpacing(0);
contentFrame->setLayout(hLayout);
hLayout->addSpacing(60);
hLayout->addSpacing(middleLayoutIndent);
QVBoxLayout* middleVLayout = new QVBoxLayout();
middleVLayout->setMargin(0);
@@ -287,37 +292,34 @@ namespace O3DE::ProjectManager
connect(addRepoButton, &QPushButton::clicked, this, &GemRepoScreen::HandleAddRepoButton);
topMiddleHLayout->addSpacing(30);
middleVLayout->addLayout(topMiddleHLayout);
middleVLayout->addSpacing(30);
// Create a QTableWidget just for its header
// Using a seperate model allows the setup of a header exactly as needed
m_gemRepoHeaderTable = new QTableWidget(this);
m_gemRepoHeaderTable->setObjectName("gemRepoHeaderTable");
m_gemRepoListHeader = m_gemRepoHeaderTable->horizontalHeader();
m_gemRepoListHeader->setObjectName("gemRepoListHeader");
m_gemRepoListHeader->setDefaultAlignment(Qt::AlignLeft);
m_gemRepoListHeader->setSectionResizeMode(QHeaderView::ResizeMode::Fixed);
constexpr int minHeaderSectionWidth = 120;
// Insert columns so the header labels will show up
m_gemRepoHeaderTable->insertColumn(0);
m_gemRepoHeaderTable->insertColumn(1);
m_gemRepoHeaderTable->insertColumn(2);
m_gemRepoHeaderTable->setHorizontalHeaderLabels({ tr("Repository Name"), tr("Creator"), tr("Updated") });
m_gemRepoHeaderTable = new AdjustableHeaderWidget(
QStringList{ tr("Repository Name"), tr("Creator"), tr("Updated"), "" },
QVector<int>{
GemRepoItemDelegate::s_nameDefaultWidth,
GemRepoItemDelegate::s_creatorDefaultWidth,
GemRepoItemDelegate::s_updatedDefaultWidth + GemRepoItemDelegate::s_refreshIconSpacing + GemRepoItemDelegate::s_refreshIconSize,
// Include invisible header for delete button
GemRepoItemDelegate::s_iconSize + GemRepoItemDelegate::s_contentMargins.right()
},
minHeaderSectionWidth,
QVector<QHeaderView::ResizeMode>
{
QHeaderView::ResizeMode::Interactive,
QHeaderView::ResizeMode::Stretch,
QHeaderView::ResizeMode::Fixed,
QHeaderView::ResizeMode::Fixed
},
this);
const int headerExtraMargin = 18;
m_gemRepoListHeader->resizeSection(0, GemRepoItemDelegate::s_nameMaxWidth + GemRepoItemDelegate::s_contentSpacing + headerExtraMargin);
m_gemRepoListHeader->resizeSection(1, GemRepoItemDelegate::s_creatorMaxWidth + GemRepoItemDelegate::s_contentSpacing);
m_gemRepoListHeader->resizeSection(2, GemRepoItemDelegate::s_updatedMaxWidth + GemRepoItemDelegate::s_contentSpacing);
// Required to set stylesheet in code as it will not be respected if set in qss
m_gemRepoHeaderTable->horizontalHeader()->setStyleSheet("QHeaderView::section { background-color:transparent; color:white; font-size:12px; border-style:none; }");
middleVLayout->addWidget(m_gemRepoHeaderTable);
m_gemRepoListView = new GemRepoListView(m_gemRepoModel, m_gemRepoModel->GetSelectionModel(), this);
m_gemRepoListView = new GemRepoListView(m_gemRepoModel, m_gemRepoModel->GetSelectionModel(), m_gemRepoHeaderTable, this);
middleVLayout->addWidget(m_gemRepoListView);
connect(m_gemRepoListView, &GemRepoListView::RemoveRepo, this, &GemRepoScreen::HandleRemoveRepoButton);
@@ -325,8 +327,10 @@ namespace O3DE::ProjectManager
hLayout->addLayout(middleVLayout);
hLayout->addSpacing(middleLayoutIndent);
m_gemRepoInspector = new GemRepoInspector(m_gemRepoModel, this);
m_gemRepoInspector->setFixedWidth(240);
m_gemRepoInspector->setFixedWidth(inspectorWidth);
hLayout->addWidget(m_gemRepoInspector);
return contentFrame;
@@ -24,6 +24,7 @@ namespace O3DE::ProjectManager
QT_FORWARD_DECLARE_CLASS(GemRepoInspector)
QT_FORWARD_DECLARE_CLASS(GemRepoListView)
QT_FORWARD_DECLARE_CLASS(GemRepoModel)
QT_FORWARD_DECLARE_CLASS(AdjustableHeaderWidget)
class GemRepoScreen
: public ScreenWidget
@@ -59,7 +60,7 @@ namespace O3DE::ProjectManager
QFrame* m_noRepoContent;
QFrame* m_repoContent;
QTableWidget* m_gemRepoHeaderTable = nullptr;
AdjustableHeaderWidget* m_gemRepoHeaderTable = nullptr;
QHeaderView* m_gemRepoListHeader = nullptr;
GemRepoListView* m_gemRepoListView = nullptr;
GemRepoInspector* m_gemRepoInspector = nullptr;