ExtensionManager: Implement latest design for inactive plugins

The background gradient for the inactive extension icon is a dimmed
green gradient (decreased opacity) instead of a gray one. The status
label for inactive is also muted.

Fixes: QTCREATORBUG-31872
Change-Id: I4aeebf899d16f3bf5d3a2078aec758779bc79901
Reviewed-by: Marcus Tillmanns <marcus.tillmanns@qt.io>
This commit is contained in:
Alessandro Portale
2024-10-21 19:55:46 +02:00
parent 6681ff5c18
commit a3eca9a36c
2 changed files with 18 additions and 14 deletions

View File

@@ -42,7 +42,7 @@ Token_Notification_Success_Default=ff1EC974
Token_Notification_Success_Muted=ff12834B Token_Notification_Success_Muted=ff12834B
Token_Notification_Success_Subtle=ff092C1B Token_Notification_Success_Subtle=ff092C1B
Token_Gradient01_Start=ff057880 Token_Gradient01_Start=ff00414A
Token_Gradient01_End=ff12A75D Token_Gradient01_End=ff12A75D
Token_Gradient02_Start=ff4A4A4A Token_Gradient02_Start=ff4A4A4A
Token_Gradient02_End=ff909090 Token_Gradient02_End=ff909090

View File

@@ -180,8 +180,10 @@ public:
constexpr static TextFormat vendorTF constexpr static TextFormat vendorTF
{Theme::Token_Text_Muted, UiElement::UiElementLabelSmall, {Theme::Token_Text_Muted, UiElement::UiElementLabelSmall,
Qt::AlignVCenter | Qt::TextDontClip}; Qt::AlignVCenter | Qt::TextDontClip};
constexpr static TextFormat stateTF constexpr static TextFormat stateActiveTF
{vendorTF.themeColor, UiElement::UiElementCaption, vendorTF.drawTextFlags}; {vendorTF.themeColor, UiElement::UiElementCaption, vendorTF.drawTextFlags};
constexpr static TextFormat stateInactiveTF
{Theme::Token_Text_Subtle, stateActiveTF.uiElement, stateActiveTF.drawTextFlags};
constexpr static TextFormat descriptionTF constexpr static TextFormat descriptionTF
{itemNameTF.themeColor, UiElement::UiElementCaption}; {itemNameTF.themeColor, UiElement::UiElementCaption};
@@ -213,7 +215,7 @@ public:
m_releaseStatus = tfLabel(releaseStatusTF, false); m_releaseStatus = tfLabel(releaseStatusTF, false);
m_releaseStatus->setAlignment(Qt::AlignLeft); m_releaseStatus->setAlignment(Qt::AlignLeft);
m_releaseStatus->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Preferred); m_releaseStatus->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Preferred);
m_installStateLabel = tfLabel(stateTF, false); m_installStateLabel = tfLabel(stateActiveTF, false);
m_installStateLabel->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Preferred); m_installStateLabel->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Preferred);
m_installStateIcon = new QLabel; m_installStateIcon = new QLabel;
m_installStateIcon->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum); m_installStateIcon->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
@@ -284,13 +286,17 @@ public:
const bool showState = !stateString.isEmpty(); const bool showState = !stateString.isEmpty();
m_installState->setVisible(showState); m_installState->setVisible(showState);
if (showState) { if (showState) {
const bool active = state == InstalledEnabled;
QPalette pal = m_installStateLabel->palette();
pal.setColor(QPalette::WindowText, (active ? stateActiveTF : stateInactiveTF).color());
m_installStateLabel->setPalette(pal);
m_installStateLabel->setText(stateString); m_installStateLabel->setText(stateString);
const FilePath checkmarkMask = ":/extensionmanager/images/checkmark.png"; const FilePath checkmarkMask = ":/extensionmanager/images/checkmark.png";
static const QPixmap enabled = Icon({{checkmarkMask, Theme::Token_Accent_Muted}}, static const QPixmap iconActive = Icon({{checkmarkMask, Theme::Token_Accent_Muted}},
Icon::Tint).pixmap(); Icon::Tint).pixmap();
static const QPixmap disabled = Icon({{checkmarkMask, stateTF.themeColor}}, static const QPixmap iconInactive = Icon({{checkmarkMask, stateInactiveTF.themeColor}},
Icon::Tint).pixmap(); Icon::Tint).pixmap();
m_installStateIcon->setPixmap(state == InstalledEnabled ? enabled : disabled); m_installStateIcon->setPixmap(active ? iconActive : iconInactive);
} }
m_vendorLabel->setText(index.data(RoleVendor).toString()); m_vendorLabel->setText(index.data(RoleVendor).toString());
@@ -772,10 +778,8 @@ QPixmap itemIcon(const QModelIndex &index, Size size)
const PluginSpec *ps = pluginSpecForId(index.data(RoleId).toString()); const PluginSpec *ps = pluginSpecForId(index.data(RoleId).toString());
const bool isEnabled = ps == nullptr || ps->isEffectivelyEnabled(); const bool isEnabled = ps == nullptr || ps->isEffectivelyEnabled();
const QGradientStops gradientStops = { const QGradientStops gradientStops = {
{0, creatorColor(isEnabled ? Theme::Token_Gradient01_Start {0, creatorColor(Theme::Token_Gradient01_Start)},
: Theme::Token_Gradient02_Start)}, {1, creatorColor(Theme::Token_Gradient01_End)},
{1, creatorColor(isEnabled ? Theme::Token_Gradient01_End
: Theme::Token_Gradient02_End)},
}; };
const Theme::Color color = Theme::Token_Basic_White; const Theme::Color color = Theme::Token_Basic_White;
@@ -790,14 +794,14 @@ QPixmap itemIcon(const QModelIndex &index, Size size)
const ItemType itemType = index.data(RoleItemType).value<ItemType>(); const ItemType itemType = index.data(RoleItemType).value<ItemType>();
const QIcon &icon = (itemType == ItemTypePack) ? (size == SizeSmall ? packS : packB) const QIcon &icon = (itemType == ItemTypePack) ? (size == SizeSmall ? packS : packB)
: (size == SizeSmall ? extensionS : extensionB); : (size == SizeSmall ? extensionS : extensionB);
const qreal iconOpacityDisabled = 0.6; const qreal iconOpacityDisabled = 0.5;
QPainter p(&pixmap); QPainter p(&pixmap);
QLinearGradient gradient(iconBgR.topRight(), iconBgR.bottomLeft()); QLinearGradient gradient(iconBgR.topRight(), iconBgR.bottomLeft());
gradient.setStops(gradientStops); gradient.setStops(gradientStops);
WelcomePageHelpers::drawCardBackground(&p, iconBgR, gradient, Qt::NoPen, iconRectRounding);
if (!isEnabled) if (!isEnabled)
p.setOpacity(iconOpacityDisabled); p.setOpacity(iconOpacityDisabled);
WelcomePageHelpers::drawCardBackground(&p, iconBgR, gradient, Qt::NoPen, iconRectRounding);
icon.paint(&p, iconBgR); icon.paint(&p, iconBgR);
return pixmap; return pixmap;