Welcome: Implement new design

2024 redesign

Change-Id: I6629849921272d856f201693973a8e29c6465e94
Reviewed-by: hjk <hjk@qt.io>
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
This commit is contained in:
Alessandro Portale
2024-02-12 17:19:41 +01:00
parent e2a0dd2cef
commit 903d01b934
43 changed files with 1517 additions and 1196 deletions

View File

@@ -1,4 +1,5 @@
[General]
Includes=dark.figmatokens
ThemeName=Dark
PreferredStyles=
DefaultTextEditorColorScheme=dark.xml
@@ -406,39 +407,6 @@ Debugger_WatchItem_ValueChanged=ffff6666
Debugger_Breakpoint_TextMarkColor=ffff4040
; Qt Creator Color Tokens - dark mode
Token_Basic_Black=ff131313
Token_Basic_White=fff8f8f8
Token_Accent_Default=ff23b26a
Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=ff1f1f1f
Token_Background_Muted=ff262626
Token_Background_Subtle=ff2e2e2e
Token_Foreground_Default=ff5a5a5a
Token_Foreground_Muted=ff3e3e3e
Token_Foreground_Subtle=ff303030
Token_Text_Default=fff8f8f8
Token_Text_Muted=ffaeaeae
Token_Text_Subtle=ff595959
Token_Stroke_Strong=ffeeeeee
Token_Stroke_Muted=ff727272
Token_Stroke_Subtle=ff3a3a3a
Token_Notification_Alert=ffc98014
Token_Notification_Success=ff1f9b5d
Token_Notification_Neutral=ff016876
Token_Notification_Danger=ffb22245
Welcome_TextColor=text
Welcome_ForegroundPrimaryColor=ffa3a3a3
Welcome_ForegroundSecondaryColor=ff808080
Welcome_BackgroundPrimaryColor=normalBackground
Welcome_BackgroundSecondaryColor=shadowBackground
Welcome_HoverColor=ff404040
Welcome_AccentColor=ff57d658
Welcome_LinkColor=ff67e668
Welcome_DisabledLinkColor=textDisabled
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=ff444444

View File

@@ -0,0 +1,31 @@
; Qt Creator Color Tokens - dark mode
[Colors]
Token_Basic_Black=ff131313
Token_Basic_White=fff8f8f8
Token_Accent_Default=ff23b26a
Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=ff1f1f1f
Token_Background_Muted=ff262626
Token_Background_Subtle=ff2e2e2e
Token_Foreground_Default=ff5a5a5a
Token_Foreground_Muted=ff3e3e3e
Token_Foreground_Subtle=ff303030
Token_Text_Default=fff8f8f8
Token_Text_Muted=ffaeaeae
Token_Text_Subtle=ff595959
Token_Stroke_Strong=ffeeeeee
Token_Stroke_Muted=ff727272
Token_Stroke_Subtle=ff3a3a3a
Token_Notification_Alert=ffc98014
Token_Notification_Success=ff1f9b5d
Token_Notification_Neutral=ff016876
Token_Notification_Danger=ffb22245

View File

@@ -1,4 +1,5 @@
[General]
Includes=light.figmatokens
ThemeName=Classic
PreferredStyles=
@@ -398,39 +399,6 @@ Debugger_WatchItem_ValueChanged=ffc80000
Debugger_Breakpoint_TextMarkColor=ffff4040
; Qt Creator Color Tokens - light mode
Token_Basic_Black=ff131313
Token_Basic_White=fff2f2f2
Token_Accent_Default=ff23b26a
Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=ffe3e3e3
Token_Background_Muted=ffeeeeee
Token_Background_Subtle=fffbfbfb
Token_Foreground_Default=ffcdcdcd
Token_Foreground_Muted=ffd5d5d5
Token_Foreground_Subtle=ffdddddd
Token_Text_Default=ff393939
Token_Text_Muted=ff7c7c7c
Token_Text_Subtle=ffbebebe
Token_Stroke_Strong=ff464646
Token_Stroke_Muted=ff727272
Token_Stroke_Subtle=ffcdcdcd
Token_Notification_Alert=ffeb991f
Token_Notification_Success=ff23b26a
Token_Notification_Neutral=ff0e7887
Token_Notification_Danger=ffdc1343
Welcome_TextColor=ff000000
Welcome_ForegroundPrimaryColor=shadowBackground
Welcome_ForegroundSecondaryColor=ff939393
Welcome_BackgroundPrimaryColor=fffafafa
Welcome_BackgroundSecondaryColor=ffffffff
Welcome_HoverColor=ffefefef
Welcome_AccentColor=ff45ce55
Welcome_LinkColor=ff20a020
Welcome_DisabledLinkColor=textDisabled
Timeline_TextColor=darkText
Timeline_BackgroundColor1=ffffffff
Timeline_BackgroundColor2=fff6f6f6

View File

@@ -1,4 +1,5 @@
[General]
Includes=light.figmatokens
ThemeName=Design Light
PreferredStyles=
@@ -410,39 +411,6 @@ Debugger_WatchItem_ValueChanged=ffbf0303
Debugger_Breakpoint_TextMarkColor=ffff4040
; Qt Creator Color Tokens - light mode
Token_Basic_Black=ff131313
Token_Basic_White=fff2f2f2
Token_Accent_Default=ff23b26a
Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=ffe3e3e3
Token_Background_Muted=ffeeeeee
Token_Background_Subtle=fffbfbfb
Token_Foreground_Default=ffcdcdcd
Token_Foreground_Muted=ffd5d5d5
Token_Foreground_Subtle=ffdddddd
Token_Text_Default=ff393939
Token_Text_Muted=ff7c7c7c
Token_Text_Subtle=ffbebebe
Token_Stroke_Strong=ff464646
Token_Stroke_Muted=ff727272
Token_Stroke_Subtle=ffcdcdcd
Token_Notification_Alert=ffeb991f
Token_Notification_Success=ff23b26a
Token_Notification_Neutral=ff0e7887
Token_Notification_Danger=ffdc1343
Welcome_TextColor=ff000000
Welcome_ForegroundPrimaryColor=ff404040
Welcome_ForegroundSecondaryColor=ff727272
Welcome_BackgroundPrimaryColor=ffeaeaea
Welcome_BackgroundSecondaryColor=ffefefef
Welcome_HoverColor=ffe1e1e1
Welcome_AccentColor=ff25709a
Welcome_LinkColor=ff104090
Welcome_DisabledLinkColor=textDisabled
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=fff6f6f6

View File

@@ -1,4 +1,5 @@
[General]
Includes=dark.figmatokens
ThemeName=Design Dark
PreferredStyles=
DefaultTextEditorColorScheme=creator-dark.xml
@@ -414,39 +415,6 @@ Debugger_WatchItem_ValueChanged=ffff6666
Debugger_Breakpoint_TextMarkColor=ffff4040
; Qt Creator Color Tokens - dark mode
Token_Basic_Black=ff131313
Token_Basic_White=fff8f8f8
Token_Accent_Default=ff23b26a
Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=ff1f1f1f
Token_Background_Muted=ff262626
Token_Background_Subtle=ff2e2e2e
Token_Foreground_Default=ff5a5a5a
Token_Foreground_Muted=ff3e3e3e
Token_Foreground_Subtle=ff303030
Token_Text_Default=fff8f8f8
Token_Text_Muted=ffaeaeae
Token_Text_Subtle=ff595959
Token_Stroke_Strong=ffeeeeee
Token_Stroke_Muted=ff727272
Token_Stroke_Subtle=ff3a3a3a
Token_Notification_Alert=ffc98014
Token_Notification_Success=ff1f9b5d
Token_Notification_Neutral=ff016876
Token_Notification_Danger=ffb22245
Welcome_TextColor=text
Welcome_ForegroundPrimaryColor=ffa3a3a3
Welcome_ForegroundSecondaryColor=ff808080
Welcome_BackgroundPrimaryColor=ff242424
Welcome_BackgroundSecondaryColor=ff1c1c1c
Welcome_HoverColor=ff2b2a2a
Welcome_AccentColor=ff3f8ccc
Welcome_LinkColor=ff5fafef
Welcome_DisabledLinkColor=textDisabled
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=ff444444

View File

@@ -1,4 +1,5 @@
[General]
Includes=dark.figmatokens
ThemeName=Flat Dark
PreferredStyles=
DefaultTextEditorColorScheme=creator-dark.xml
@@ -410,39 +411,6 @@ Debugger_WatchItem_ValueChanged=ffff6666
Debugger_Breakpoint_TextMarkColor=ffff4040
; Qt Creator Color Tokens - dark mode
Token_Basic_Black=ff131313
Token_Basic_White=fff8f8f8
Token_Accent_Default=ff23b26a
Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=ff1f1f1f
Token_Background_Muted=ff262626
Token_Background_Subtle=ff2e2e2e
Token_Foreground_Default=ff5a5a5a
Token_Foreground_Muted=ff3e3e3e
Token_Foreground_Subtle=ff303030
Token_Text_Default=fff8f8f8
Token_Text_Muted=ffaeaeae
Token_Text_Subtle=ff595959
Token_Stroke_Strong=ffeeeeee
Token_Stroke_Muted=ff727272
Token_Stroke_Subtle=ff3a3a3a
Token_Notification_Alert=ffc98014
Token_Notification_Success=ff1f9b5d
Token_Notification_Neutral=ff016876
Token_Notification_Danger=ffb22245
Welcome_TextColor=text
Welcome_ForegroundPrimaryColor=ff999999
Welcome_ForegroundSecondaryColor=ff808080
Welcome_BackgroundPrimaryColor=normalBackground
Welcome_BackgroundSecondaryColor=ff242628
Welcome_HoverColor=ff404243
Welcome_AccentColor=ff36c148
Welcome_LinkColor=ff5fcf4f
Welcome_DisabledLinkColor=textDisabled
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=ff444444

View File

@@ -1,4 +1,5 @@
[General]
Includes=light.figmatokens
ThemeName=Flat Light
PreferredStyles=
@@ -407,39 +408,6 @@ Debugger_WatchItem_ValueChanged=ffbf0303
Debugger_Breakpoint_TextMarkColor=ffff4040
; Qt Creator Color Tokens - light mode
Token_Basic_Black=ff131313
Token_Basic_White=fff2f2f2
Token_Accent_Default=ff23b26a
Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=ffe3e3e3
Token_Background_Muted=ffeeeeee
Token_Background_Subtle=fffbfbfb
Token_Foreground_Default=ffcdcdcd
Token_Foreground_Muted=ffd5d5d5
Token_Foreground_Subtle=ffdddddd
Token_Text_Default=ff393939
Token_Text_Muted=ff7c7c7c
Token_Text_Subtle=ffbebebe
Token_Stroke_Strong=ff464646
Token_Stroke_Muted=ff727272
Token_Stroke_Subtle=ffcdcdcd
Token_Notification_Alert=ffeb991f
Token_Notification_Success=ff23b26a
Token_Notification_Neutral=ff0e7887
Token_Notification_Danger=ffdc1343
Welcome_TextColor=ff000000
Welcome_ForegroundPrimaryColor=ff232323
Welcome_ForegroundSecondaryColor=ff939393
Welcome_BackgroundPrimaryColor=fffafafa
Welcome_BackgroundSecondaryColor=ffffffff
Welcome_HoverColor=ffefefef
Welcome_AccentColor=ff45ce55
Welcome_LinkColor=ff20a020
Welcome_DisabledLinkColor=textDisabled
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=fff6f6f6

View File

@@ -1,4 +1,5 @@
[General]
Includes=light.figmatokens
ThemeName=Flat
PreferredStyles=
@@ -405,39 +406,6 @@ Debugger_WatchItem_ValueChanged=ffbf0303
Debugger_Breakpoint_TextMarkColor=ffff4040
; Qt Creator Color Tokens - light mode
Token_Basic_Black=ff131313
Token_Basic_White=fff2f2f2
Token_Accent_Default=ff23b26a
Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=ffe3e3e3
Token_Background_Muted=ffeeeeee
Token_Background_Subtle=fffbfbfb
Token_Foreground_Default=ffcdcdcd
Token_Foreground_Muted=ffd5d5d5
Token_Foreground_Subtle=ffdddddd
Token_Text_Default=ff393939
Token_Text_Muted=ff7c7c7c
Token_Text_Subtle=ffbebebe
Token_Stroke_Strong=ff464646
Token_Stroke_Muted=ff727272
Token_Stroke_Subtle=ffcdcdcd
Token_Notification_Alert=ffeb991f
Token_Notification_Success=ff23b26a
Token_Notification_Neutral=ff0e7887
Token_Notification_Danger=ffdc1343
Welcome_TextColor=ff000000
Welcome_ForegroundPrimaryColor=shadowBackground
Welcome_ForegroundSecondaryColor=ff939393
Welcome_BackgroundPrimaryColor=fffafafa
Welcome_BackgroundSecondaryColor=ffffffff
Welcome_HoverColor=ffefefef
Welcome_AccentColor=ff45ce55
Welcome_LinkColor=ff20a020
Welcome_DisabledLinkColor=textDisabled
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=fff6f6f6

View File

@@ -0,0 +1,31 @@
; Qt Creator Color Tokens - light mode
[Colors]
Token_Basic_Black=ff131313
Token_Basic_White=fff2f2f2
Token_Accent_Default=ff23b26a
Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=fffcfcfc
Token_Background_Muted=ffefefef
Token_Background_Subtle=ffe7e7e7
Token_Foreground_Default=ffcdcdcd
Token_Foreground_Muted=ffd5d5d5
Token_Foreground_Subtle=ffdddddd
Token_Text_Default=ff393939
Token_Text_Muted=ff6a6a6a
Token_Text_Subtle=ffbebebe
Token_Stroke_Strong=ff464646
Token_Stroke_Muted=ff727272
Token_Stroke_Subtle=ffcdcdcd
Token_Notification_Alert=ffeb991f
Token_Notification_Success=ff23b26a
Token_Notification_Neutral=ff0e7887
Token_Notification_Danger=ffdc1343

View File

@@ -933,7 +933,17 @@ QColor StyleHelper::ensureReadableOn(const QColor &background, const QColor &des
return foreground;
}
static QStringList brandFontFamilies()
static const QStringList &applicationFontFamilies()
{
const static QStringList families = [] {
constexpr QLatin1String familyName("Inter");
// Font is either installed in the system, or was loaded from share/qtcreator/fonts/
return QFontDatabase::hasFamily(familyName) ? QStringList(familyName) : QStringList();
}();
return families;
}
static const QStringList &brandFontFamilies()
{
const static QStringList families = []{
const int id = QFontDatabase::addApplicationFont(":/studiofonts/TitilliumWeb-Regular.ttf");
@@ -959,10 +969,14 @@ static const UiFontMetrics& uiFontMetrics(StyleHelper::UiElement element)
{StyleHelper::UiElementH5, {14, 16, QFont::DemiBold}},
{StyleHelper::UiElementH6, {12, 14, QFont::DemiBold}},
{StyleHelper::UiElementH6Capital, {12, 14, QFont::DemiBold}},
{StyleHelper::UiElementBody1, {14, 20, QFont::Light}},
{StyleHelper::UiElementBody2, {12, 20, QFont::Light}},
{StyleHelper::UiElementButtonMedium, {12, 16, QFont::Bold}},
{StyleHelper::UiElementButtonSmall, {10, 12, QFont::Bold}},
{StyleHelper::UiElementCaptionStrong, {10, 12, QFont::DemiBold}},
{StyleHelper::UiElementCaption, {10, 12, QFont::Normal}},
{StyleHelper::UIElementIconStandard, {12, 16, QFont::Normal}},
{StyleHelper::UIElementIconActive, {12, 16, QFont::DemiBold}},
{StyleHelper::UiElementIconStandard, {12, 16, QFont::Medium}},
{StyleHelper::UiElementIconActive, {12, 16, QFont::DemiBold}},
};
QTC_ASSERT(metrics.count(element) > 0, return metrics.at(StyleHelper::UiElementCaptionStrong));
return metrics.at(element);
@@ -983,8 +997,10 @@ QFont StyleHelper::uiFont(UiElement element)
case UiElementH3:
case UiElementH6Capital:
font.setCapitalization(QFont::AllUppercase);
break;
[[fallthrough]];
default:
if (!applicationFontFamilies().isEmpty())
font.setFamilies(applicationFontFamilies());
break;
}

View File

@@ -42,15 +42,15 @@ constexpr char C_TOOLBAR_ACTIONWIDGET[] = "toolbar_actionWidget";
constexpr char C_QT_SCALE_FACTOR_ROUNDING_POLICY[] = "QT_SCALE_FACTOR_ROUNDING_POLICY";
namespace SpacingTokens {
constexpr int VPaddingXXS = 4; // Top and bottom padding within the component
constexpr int HPaddingXXS = 4; // Left and right padding within the component
constexpr int VGapXXS = 4; // Vertical Space between TEXT LINE within the Component
constexpr int HGapXXS = 4; // Horizontal Space between elements within the Component
constexpr int VPaddingXxs = 4; // Top and bottom padding within the component
constexpr int HPaddingXxs = 4; // Left and right padding within the component
constexpr int VGapXxs = 4; // Vertical Space between TEXT LINE within the Component
constexpr int HGapXxs = 4; // Horizontal Space between elements within the Component
constexpr int VPaddingXS = 8;
constexpr int HPaddingXS = 8;
constexpr int VGapXS = 4;
constexpr int HGapXS = 8;
constexpr int VPaddingXs = 8;
constexpr int HPaddingXs = 8;
constexpr int VGapXs = 4;
constexpr int HGapXs = 8;
constexpr int VPaddingS = 8;
constexpr int HPaddingS = 16;
@@ -62,10 +62,15 @@ namespace SpacingTokens {
constexpr int VGapM = 4;
constexpr int HGapM = 16;
constexpr int VPaddingL = 12;
constexpr int VPaddingL = 16;
constexpr int HPaddingL = 24;
constexpr int VGapL = 8;
constexpr int HGapL = 16;
constexpr int ExPaddingGapS = 2;
constexpr int ExPaddingGapM = 6;
constexpr int ExPaddingGapL = 12;
constexpr int ExVPaddingGapXl = 24;
}
enum ToolbarStyle {
@@ -82,10 +87,14 @@ enum UiElement {
UiElementH5,
UiElementH6,
UiElementH6Capital,
UiElementBody1,
UiElementBody2,
UiElementButtonMedium,
UiElementButtonSmall,
UiElementCaptionStrong,
UiElementCaption,
UIElementIconStandard,
UIElementIconActive,
UiElementIconStandard,
UiElementIconActive,
};
// Height of the project explorer navigation bar

View File

@@ -247,18 +247,6 @@ public:
Token_Notification_Neutral,
Token_Notification_Danger,
/* Welcome Plugin */
Welcome_TextColor,
Welcome_ForegroundPrimaryColor,
Welcome_ForegroundSecondaryColor,
Welcome_BackgroundPrimaryColor,
Welcome_BackgroundSecondaryColor,
Welcome_HoverColor,
Welcome_AccentColor,
Welcome_LinkColor,
Welcome_DisabledLinkColor,
/* Timeline Library */
Timeline_TextColor,
Timeline_BackgroundColor1,

View File

@@ -1,5 +1,9 @@
<RCC>
<qresource prefix="/core">
<file>images/expandarrow.png</file>
<file>images/expandarrow@2x.png</file>
<file>images/search.png</file>
<file>images/search@2x.png</file>
<file>images/settingscategory_core.png</file>
<file>images/settingscategory_core@2x.png</file>
<file>images/settingscategory_design.png</file>

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 361 B

View File

@@ -3,25 +3,8 @@
#include "iwelcomepage.h"
#include <utils/icon.h>
#include <utils/theme/theme.h>
#include <utils/stylehelper.h>
#include <QHBoxLayout>
#include <QLabel>
#include <QPainter>
#include <QPainterPath>
#include <QPixmap>
#include <QUrl>
#include <qdrawutil.h>
using namespace Utils;
namespace Core {
const char WITHACCENTCOLOR_PROPERTY_NAME[] = "_withAccentColor";
static QList<IWelcomePage *> g_welcomePages;
const QList<IWelcomePage *> IWelcomePage::allWelcomePages()
@@ -39,171 +22,4 @@ IWelcomePage::~IWelcomePage()
g_welcomePages.removeOne(this);
}
QPalette WelcomePageFrame::buttonPalette(bool isActive, bool isCursorInside, bool forText)
{
QPalette pal;
pal.setBrush(QPalette::Window, {});
pal.setBrush(QPalette::WindowText, {});
Theme *theme = Utils::creatorTheme();
if (isActive) {
if (forText) {
pal.setColor(QPalette::Window, theme->color(Theme::Welcome_ForegroundPrimaryColor));
pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_BackgroundPrimaryColor));
} else {
pal.setColor(QPalette::Window, theme->color(Theme::Welcome_AccentColor));
pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_AccentColor));
}
} else {
if (isCursorInside) {
if (forText) {
pal.setColor(QPalette::Window, theme->color(Theme::Welcome_HoverColor));
pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_TextColor));
} else {
pal.setColor(QPalette::Window, theme->color(Theme::Welcome_HoverColor));
pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_ForegroundSecondaryColor));
}
} else {
if (forText) {
pal.setColor(QPalette::Window, theme->color(Theme::Welcome_ForegroundPrimaryColor));
pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_TextColor));
} else {
pal.setColor(QPalette::Window, theme->color(Theme::Welcome_BackgroundPrimaryColor));
pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_ForegroundSecondaryColor));
}
}
}
return pal;
}
WelcomePageFrame::WelcomePageFrame(QWidget *parent)
: QWidget(parent)
{
setContentsMargins(1, 1, 1, 1);
}
void WelcomePageFrame::paintEvent(QPaintEvent *event)
{
QWidget::paintEvent(event);
QPainter p(this);
qDrawPlainRect(&p, rect(), palette().color(QPalette::WindowText), 1);
if (property(WITHACCENTCOLOR_PROPERTY_NAME).toBool()) {
const int accentRectWidth = 10;
const QRect accentRect = rect().adjusted(width() - accentRectWidth, 0, 0, 0);
p.fillRect(accentRect, creatorTheme()->color(Theme::Welcome_AccentColor));
}
}
class WelcomePageButtonPrivate
{
public:
explicit WelcomePageButtonPrivate(WelcomePageButton *parent)
: q(parent) {}
bool isActive() const;
void doUpdate(bool cursorInside);
WelcomePageButton *q;
QHBoxLayout *m_layout = nullptr;
QLabel *m_label = nullptr;
std::function<void()> onClicked;
std::function<bool()> activeChecker;
};
WelcomePageButton::WelcomePageButton(QWidget *parent)
: WelcomePageFrame(parent), d(new WelcomePageButtonPrivate(this))
{
setAutoFillBackground(true);
setPalette(buttonPalette(false, false, false));
setContentsMargins(0, 1, 0, 1);
d->m_label = new QLabel(this);
d->m_label->setPalette(buttonPalette(false, false, true));
d->m_label->setAlignment(Qt::AlignCenter);
d->m_layout = new QHBoxLayout;
d->m_layout->setSpacing(0);
d->m_layout->addWidget(d->m_label);
setSize(SizeLarge);
setLayout(d->m_layout);
}
WelcomePageButton::~WelcomePageButton()
{
delete d;
}
void WelcomePageButton::mousePressEvent(QMouseEvent *)
{
if (d->onClicked)
d->onClicked();
}
void WelcomePageButton::enterEvent(QEnterEvent *)
{
d->doUpdate(true);
}
void WelcomePageButton::leaveEvent(QEvent *)
{
d->doUpdate(false);
}
bool WelcomePageButtonPrivate::isActive() const
{
return activeChecker && activeChecker();
}
void WelcomePageButtonPrivate::doUpdate(bool cursorInside)
{
const bool active = isActive();
q->setPalette(WelcomePageFrame::buttonPalette(active, cursorInside, false));
const QPalette lpal = WelcomePageFrame::buttonPalette(active, cursorInside, true);
m_label->setPalette(lpal);
q->update();
}
void WelcomePageButton::setText(const QString &text)
{
d->m_label->setText(text);
}
void WelcomePageButton::setSize(Size size)
{
const int hMargin = size == SizeSmall ? 12 : 26;
const int vMargin = size == SizeSmall ? 2 : 4;
d->m_layout->setContentsMargins(hMargin, vMargin, hMargin, vMargin);
}
void WelcomePageButton::setWithAccentColor(bool withAccent)
{
setProperty(WITHACCENTCOLOR_PROPERTY_NAME, withAccent);
}
void WelcomePageButton::setActiveChecker(const std::function<bool ()> &value)
{
d->activeChecker = value;
}
void WelcomePageButton::recheckActive()
{
bool isActive = d->isActive();
d->doUpdate(isActive);
}
void WelcomePageButton::click()
{
if (d->onClicked)
d->onClicked();
}
void WelcomePageButton::setOnClicked(const std::function<void ()> &value)
{
d->onClicked = value;
if (d->isActive())
click();
}
} // namespace Core

View File

@@ -7,13 +7,10 @@
#include <utils/id.h>
#include <QWidget>
#include <QObject>
#include <functional>
QT_BEGIN_NAMESPACE
class QPixmap;
class QWidget;
QT_END_NAMESPACE
namespace Core {
@@ -37,43 +34,4 @@ public:
static const QList<IWelcomePage *> allWelcomePages();
};
class WelcomePageButtonPrivate;
class CORE_EXPORT WelcomePageFrame : public QWidget
{
public:
WelcomePageFrame(QWidget *parent);
void paintEvent(QPaintEvent *event) override;
static QPalette buttonPalette(bool isActive, bool isCursorInside, bool forText);
};
class CORE_EXPORT WelcomePageButton : public WelcomePageFrame
{
public:
enum Size {
SizeSmall,
SizeLarge,
};
explicit WelcomePageButton(QWidget *parent = nullptr);
~WelcomePageButton() override;
void mousePressEvent(QMouseEvent *) override;
void enterEvent(QEnterEvent *) override;
void leaveEvent(QEvent *) override;
void setText(const QString &text);
void setSize(enum Size);
void setWithAccentColor(bool withAccent);
void setOnClicked(const std::function<void ()> &value);
void setActiveChecker(const std::function<bool ()> &value);
void recheckActive();
void click();
private:
WelcomePageButtonPrivate *d;
};
} // Core

View File

@@ -267,6 +267,11 @@ QDateTime SessionManager::lastActiveTime(const QString &session)
return d->m_lastActiveTimes.value(session);
}
int SessionManager::sessionsCount()
{
return d->m_sessions.count();
}
FilePath SessionManager::sessionNameToFileName(const QString &session)
{
return ICore::userResourcePath(session + ".qws");

View File

@@ -34,6 +34,7 @@ public:
static QStringList sessions();
static QDateTime sessionDateTime(const QString &session);
static QDateTime lastActiveTime(const QString &session);
static int sessionsCount();
static bool createSession(const QString &session);

View File

@@ -7,6 +7,7 @@
#include <utils/algorithm.h>
#include <utils/fancylineedit.h>
#include <utils/icon.h>
#include <utils/layoutbuilder.h>
#include <utils/qtcassert.h>
#include <utils/stylehelper.h>
@@ -26,36 +27,34 @@
#include <qdrawutil.h>
QT_BEGIN_NAMESPACE
void qt_blurImage(QImage &blurImage, qreal radius, bool quality, int transposed = 0);
QT_END_NAMESPACE
using namespace Utils;
namespace Core {
using namespace WelcomePageHelpers;
using namespace StyleHelper::SpacingTokens;
static QColor themeColor(Theme::Color role)
{
return creatorTheme()->color(role);
}
static QFont sizedFont(int size, const QWidget *widget)
{
QFont f = widget->font();
f.setPixelSize(size);
return f;
}
namespace WelcomePageHelpers {
QWidget *panelBar(QWidget *parent)
void setBackgroundColor(QWidget *widget, Theme::Color colorRole)
{
auto frame = new QWidget(parent);
frame->setAutoFillBackground(true);
frame->setMinimumWidth(WelcomePageHelpers::HSpacing);
QPalette pal;
pal.setBrush(QPalette::Window, {});
pal.setColor(QPalette::Window, themeColor(Theme::Welcome_BackgroundPrimaryColor));
frame->setPalette(pal);
return frame;
QPalette palette = creatorTheme()->palette();
const QPalette::ColorRole role = QPalette::Window;
palette.setBrush(role, {});
palette.setColor(role, creatorTheme()->color(colorRole));
widget->setPalette(palette);
widget->setBackgroundRole(role);
widget->setAutoFillBackground(true);
}
void drawCardBackground(QPainter *painter, const QRectF &rect,
@@ -77,30 +76,351 @@ void drawCardBackground(QPainter *painter, const QRectF &rect,
painter->restore();
}
QWidget *createRule(Qt::Orientation orientation, QWidget *parent)
{
auto rule = new QWidget(parent);
if (orientation == Qt::Horizontal)
rule->setFixedHeight(1);
else
rule->setFixedWidth(1);
setBackgroundColor(rule, Theme::Token_Stroke_Subtle);
return rule;
}
} // namespace WelcomePageHelpers
SearchBox::SearchBox(QWidget *parent)
: WelcomePageFrame(parent)
enum WidgetState {
WidgetStateDefault,
WidgetStateChecked,
WidgetStateHovered,
};
static const TextFormat &buttonTF(Button::Role role, WidgetState state)
{
setAutoFillBackground(true);
using namespace WelcomePageHelpers;
static const TextFormat mediumPrimaryTF
{Theme::Token_Basic_White, StyleHelper::UiElement::UiElementButtonMedium,
Qt::AlignCenter | Qt::TextDontClip};
static const TextFormat mediumSecondaryTF
{Theme::Token_Text_Default, mediumPrimaryTF.uiElement, mediumPrimaryTF.drawTextFlags};
static const TextFormat smallPrimaryTF
{mediumPrimaryTF.themeColor, StyleHelper::UiElement::UiElementButtonSmall,
mediumPrimaryTF.drawTextFlags};
static const TextFormat smallSecondaryTF
{mediumSecondaryTF.themeColor, smallPrimaryTF.uiElement, smallPrimaryTF.drawTextFlags};
static const TextFormat smallListDefaultTF
{Theme::Token_Text_Default, StyleHelper::UiElement::UiElementIconStandard,
Qt::AlignLeft | Qt::AlignVCenter | Qt::TextDontClip};
static const TextFormat smallListCheckedTF
{smallListDefaultTF.themeColor, StyleHelper::UiElement::UiElementIconActive,
smallListDefaultTF.drawTextFlags};
static const TextFormat smallLinkDefaultTF
{Theme::Token_Text_Default, smallListDefaultTF.uiElement, smallListDefaultTF.drawTextFlags};
static const TextFormat smallLinkHoveredTF
{Theme::Token_Accent_Default, smallListCheckedTF.uiElement,
smallLinkDefaultTF.drawTextFlags};
m_lineEdit = new FancyLineEdit;
m_lineEdit->setFiltering(true);
m_lineEdit->setFrame(false);
m_lineEdit->setMinimumHeight(33);
m_lineEdit->setAttribute(Qt::WA_MacShowFocusRect, false);
switch (role) {
case Button::MediumPrimary: return mediumPrimaryTF;
case Button::MediumSecondary: return mediumSecondaryTF;
case Button::SmallPrimary: return smallPrimaryTF;
case Button::SmallSecondary: return smallSecondaryTF;
case Button::SmallList: return (state == WidgetStateDefault) ? smallListDefaultTF
: smallListCheckedTF;
case Button::SmallLink: return (state == WidgetStateDefault) ? smallLinkDefaultTF
: smallLinkHoveredTF;
}
return mediumPrimaryTF;
}
QPalette pal = buttonPalette(false, false, true);
// for the margins
pal.setColor(QPalette::Window, m_lineEdit->palette().color(QPalette::Base));
// for macOS dark mode
pal.setColor(QPalette::WindowText, themeColor(Theme::Welcome_ForegroundPrimaryColor));
pal.setColor(QPalette::Text, themeColor(Theme::Welcome_TextColor));
Button::Button(const QString &text, Role role, QWidget *parent)
: QPushButton(text, parent)
, m_role(role)
{
// Prevent QMacStyle::subElementRect(SE_PushButtonLayoutItem) from changing our geometry
setFlat(true);
updateMargins();
if (m_role == SmallList)
setCheckable(true);
else if (m_role == SmallLink)
setCursor(Qt::PointingHandCursor);
}
QSize Button::minimumSizeHint() const
{
const TextFormat &tf = buttonTF(m_role, WidgetStateHovered);
const QFontMetrics fm(tf.font());
const QSize textS = fm.size(Qt::TextShowMnemonic, text());
const QMargins margins = contentsMargins();
return {margins.left() + textS.width() + margins.right(),
margins.top() + tf.lineHeight() + margins.bottom()};
}
void Button::paintEvent(QPaintEvent *event)
{
// Without pixmap
// +----------------+----------------+----------------+
// | |(VPadding[S|XS])| |
// | +----------------+----------------+
// |(HPadding[S|XS])| <label> |(HPadding[S|XS])|
// | +----------------+----------------+
// | |(VPadding[S|XS])| |
// +----------------+---------------------------------+
//
// With pixmap
// +--------+------------+---------------------------------+
// | | |(VPadding[S|XS])| |
// | | +----------------+ |
// |<pixmap>|(HGap[S|XS])| <label> |(HPadding[S|XS])|
// | | +----------------+ |
// | | |(VPadding[S|XS])| |
// +--------+------------+----------------+----------------+
using namespace WelcomePageHelpers;
const bool hovered = underMouse();
const WidgetState state = isChecked() ? WidgetStateChecked : hovered ? WidgetStateHovered
: WidgetStateDefault;
const TextFormat &tf = buttonTF(m_role, state);
const QMargins margins = contentsMargins();
const QRect bgR = rect();
QPainter p(this);
const qreal brRectRounding = 3.75;
switch (m_role) {
case MediumPrimary:
case SmallPrimary: {
const QBrush fill(creatorTheme()->color(isDown()
? Theme::Token_Accent_Subtle
: hovered ? Theme::Token_Accent_Muted
: Theme::Token_Accent_Default));
drawCardBackground(&p, bgR, fill, QPen(Qt::NoPen), brRectRounding);
break;
}
case MediumSecondary:
case SmallSecondary: {
const QPen outline(creatorTheme()->color(Theme::Token_Text_Default), hovered ? 2 : 1);
drawCardBackground(&p, bgR, QBrush(Qt::NoBrush), outline, brRectRounding);
break;
}
case SmallList: {
if (isChecked() || hovered) {
const QBrush fill(creatorTheme()->color(isChecked() ? Theme::Token_Foreground_Muted
: Theme::Token_Foreground_Subtle));
drawCardBackground(&p, bgR, fill, QPen(Qt::NoPen), brRectRounding);
}
break;
}
case SmallLink:
break;
}
if (!m_pixmap.isNull()) {
const int pixmapHeight = int(m_pixmap.deviceIndependentSize().height());
const int pixmapY = (bgR.height() - pixmapHeight) / 2;
p.drawPixmap(0, pixmapY, m_pixmap);
}
const int availableLabelWidth = event->rect().width() - margins.left() - margins.right();
const QFont font = tf.font();
const QFontMetrics fm(font);
const QString elidedLabelText = fm.elidedText(text(), Qt::ElideRight, availableLabelWidth);
const QRect labelR(margins.left(), margins.top(), availableLabelWidth, tf.lineHeight());
p.setFont(font);
p.setPen(tf.color());
p.drawText(labelR, tf.drawTextFlags, elidedLabelText);
}
void Button::setPixmap(const QPixmap &pixmap)
{
m_pixmap = pixmap;
updateMargins();
}
void Button::updateMargins()
{
const bool tokenSizeS = m_role == MediumPrimary || m_role == MediumSecondary
|| m_role == SmallList || m_role == SmallLink;
const int gap = tokenSizeS ? HGapS : HGapXs;
const int hPaddingR = tokenSizeS ? HPaddingS : HPaddingXs;
const int hPaddingL = m_pixmap.isNull() ? hPaddingR
: int(m_pixmap.deviceIndependentSize().width()) + gap;
const int vPadding = tokenSizeS ? VPaddingS : VPaddingXs;
setContentsMargins(hPaddingL, vPadding, hPaddingR, vPadding);
}
Label::Label(const QString &text, Role role, QWidget *parent)
: QLabel(text, parent)
, m_role(role)
{
using namespace WelcomePageHelpers;
static const TextFormat primaryTF
{Theme::Token_Text_Muted, StyleHelper::UiElement::UiElementH3};
static const TextFormat secondaryTF
{primaryTF.themeColor, StyleHelper::UiElement::UiElementH6Capital};
const TextFormat &tF = m_role == Primary ? primaryTF : secondaryTF;
const int vPadding = m_role == Primary ? ExPaddingGapM : VPaddingS;
setFixedHeight(vPadding + tF.lineHeight() + vPadding);
setFont(tF.font());
QPalette pal = palette();
pal.setColor(QPalette::WindowText, tF.color());
setPalette(pal);
}
constexpr TextFormat searchBoxTextTF
{Theme::Token_Text_Default, StyleHelper::UiElement::UiElementBody2};
constexpr TextFormat searchBoxPlaceholderTF
{Theme::Token_Text_Muted, searchBoxTextTF.uiElement};
static const QPixmap &searchBoxIcon()
{
static const QPixmap icon = Icon({{FilePath::fromString(":/core/images/search"),
Theme::Token_Text_Muted}}, Icon::Tint).pixmap();
return icon;
}
SearchBox::SearchBox(QWidget *parent)
: QLineEdit(parent)
{
setAttribute(Qt::WA_MacShowFocusRect, false);
setAutoFillBackground(false);
setFont(searchBoxTextTF.font());
setFrame(false);
setMouseTracking(true);
QPalette pal = palette();
pal.setColor(QPalette::Base, Qt::transparent);
pal.setColor(QPalette::PlaceholderText, searchBoxPlaceholderTF.color());
pal.setColor(QPalette::Text, searchBoxTextTF.color());
setPalette(pal);
auto box = new QHBoxLayout(this);
box->setContentsMargins(10, 0, 1, 0);
box->addWidget(m_lineEdit);
const QSize iconSize = searchBoxIcon().deviceIndependentSize().toSize();
setContentsMargins({HPaddingXs, ExPaddingGapM,
HPaddingXs + iconSize.width() + HPaddingXs, ExPaddingGapM});
setFixedHeight(ExPaddingGapM + searchBoxTextTF.lineHeight() + ExPaddingGapM);
}
QSize SearchBox::minimumSizeHint() const
{
const QFontMetrics fm(searchBoxTextTF.font());
const QSize textS = fm.size(Qt::TextSingleLine, text());
const QMargins margins = contentsMargins();
return {margins.left() + textS.width() + margins.right(),
margins.top() + searchBoxTextTF.lineHeight() + margins.bottom()};
}
void SearchBox::enterEvent(QEnterEvent *event)
{
QLineEdit::enterEvent(event);
update();
}
void SearchBox::leaveEvent(QEvent *event)
{
QLineEdit::leaveEvent(event);
update();
}
static void paintCommonBackground(QPainter *p, const QRectF &rect, const QWidget *widget)
{
const QBrush fill(creatorTheme()->color(Theme::Token_Background_Muted));
const Theme::Color c = widget->hasFocus() ? Theme::Token_Stroke_Strong :
widget->underMouse() ? Theme::Token_Stroke_Muted
: Theme::Token_Stroke_Subtle;
const QPen pen(creatorTheme()->color(c));
drawCardBackground(p, rect, fill, pen);
}
void SearchBox::paintEvent(QPaintEvent *event)
{
// +------------+---------------+------------+------+------------+
// | |(ExPaddingGapM)| | | |
// | +---------------+ | | |
// |(HPaddingXs)| <lineEdit> |(HPaddingXs)|<icon>|(HPaddingXs)|
// | +---------------+ | | |
// | |(ExPaddingGapM)| | | |
// +------------+---------------+------------+------+------------+
QPainter p(this);
paintCommonBackground(&p, rect(), this);
const QPixmap icon = searchBoxIcon();
const QSize iconS = icon.deviceIndependentSize().toSize();
const QPoint iconPos(width() - HPaddingXs - iconS.width(), (height() - iconS.height()) / 2);
p.drawPixmap(iconPos, icon);
QLineEdit::paintEvent(event);
}
constexpr TextFormat ComboBoxTf
{Theme::Token_Text_Muted, StyleHelper::UiElementIconActive,
Qt::AlignLeft | Qt::AlignVCenter | Qt::TextDontClip};
static const QPixmap &comboBoxIcon()
{
static const QPixmap icon = Icon({{FilePath::fromString(":/core/images/expandarrow"),
ComboBoxTf.themeColor}}, Icon::Tint).pixmap();
return icon;
}
ComboBox::ComboBox(QWidget *parent)
: QComboBox(parent)
{
setFont(ComboBoxTf.font());
setMouseTracking(true);
const QSize iconSize = comboBoxIcon().deviceIndependentSize().toSize();
setContentsMargins({HPaddingXs, VPaddingXs,
HGapXxs + iconSize.width() + HPaddingXs, VPaddingXs});
}
QSize ComboBox::sizeHint() const
{
const QSize parentS = QComboBox::sizeHint();
const QMargins margins = contentsMargins();
return {margins.left() + parentS.width() + margins.right(),
margins.top() + ComboBoxTf.lineHeight() + margins.bottom()};
}
void ComboBox::enterEvent(QEnterEvent *event)
{
QComboBox::enterEvent(event);
update();
}
void ComboBox::leaveEvent(QEvent *event)
{
QComboBox::leaveEvent(event);
update();
}
void ComboBox::paintEvent(QPaintEvent *)
{
// +------------+-------------+---------+-------+------------+
// | | (VPaddingXs)| | | |
// | +-------------+ | | |
// |(HPaddingXs)|<currentItem>|(HGapXxs)|<arrow>|(HPaddingXs)|
// | +-------------+ | | |
// | | (VPaddingXs)| | | |
// +------------+-------------+---------+-------+------------+
QPainter p(this);
paintCommonBackground(&p, rect(), this);
const QMargins margins = contentsMargins();
const QRect textR(margins.left(), margins.top(),
width() - margins.right(), ComboBoxTf.lineHeight());
p.setFont(ComboBoxTf.font());
p.setPen(ComboBoxTf.color());
p.drawText(textR, ComboBoxTf.drawTextFlags, currentText());
const QPixmap icon = comboBoxIcon();
const QSize iconS = icon.deviceIndependentSize().toSize();
const QPoint iconPos(width() - HPaddingXs - iconS.width(), (height() - iconS.height()) / 2);
p.drawPixmap(iconPos, icon);
}
GridView::GridView(QWidget *parent)
@@ -115,7 +435,7 @@ GridView::GridView(QWidget *parent)
setUniformItemSizes(true);
QPalette pal;
pal.setColor(QPalette::Base, themeColor(Theme::Welcome_BackgroundSecondaryColor));
pal.setColor(QPalette::Base, themeColor(Theme::Token_Background_Default));
setPalette(pal); // Makes a difference on Mac.
}
@@ -147,10 +467,11 @@ bool SectionGridView::hasHeightForWidth() const
int SectionGridView::heightForWidth(int width) const
{
const int columnCount = qMax(1, width / Core::WelcomePageHelpers::GridItemWidth);
const QSize itemSize = ListItemDelegate::itemSize();
const int columnCount = qMax(1, width / itemSize.width());
const int rowCount = (model()->rowCount() + columnCount - 1) / columnCount;
const int maxRowCount = m_maxRows ? std::min(*m_maxRows, rowCount) : rowCount;
return maxRowCount * Core::WelcomePageHelpers::GridItemHeight;
return maxRowCount * itemSize.height();
}
void SectionGridView::wheelEvent(QWheelEvent *e)
@@ -165,8 +486,9 @@ bool SectionGridView::event(QEvent *e)
{
if (e->type() == QEvent::Resize) {
const auto itemsFit = [this](const QSize &size) {
const int maxColumns = std::max(size.width() / WelcomePageHelpers::GridItemWidth, 1);
const int maxRows = std::max(size.height() / WelcomePageHelpers::GridItemHeight, 1);
const QSize itemSize = ListItemDelegate::itemSize();
const int maxColumns = std::max(size.width() / itemSize.width(), 1);
const int maxRows = std::max(size.height() / itemSize.height(), 1);
const int maxItems = maxColumns * maxRows;
const int items = model()->rowCount();
return maxItems >= items;
@@ -426,47 +748,123 @@ bool ListModelFilter::leaveFilterAcceptsRowBeforeFiltering(const ListItem *, boo
return false;
}
ListItemDelegate::ListItemDelegate()
: backgroundPrimaryColor(themeColor(Theme::Welcome_BackgroundPrimaryColor))
, backgroundSecondaryColor(themeColor(Theme::Welcome_BackgroundSecondaryColor))
, foregroundPrimaryColor(themeColor(Theme::Welcome_ForegroundPrimaryColor))
, foregroundSecondaryColor(themeColor(Theme::Welcome_ForegroundSecondaryColor))
, hoverColor(themeColor(Theme::Welcome_HoverColor))
, textColor(themeColor(Theme::Welcome_TextColor))
constexpr TextFormat titleTF {Theme::Token_Text_Default, StyleHelper::UiElementIconActive};
constexpr TextFormat descriptionTF {titleTF.themeColor, StyleHelper::UiElementCaption};
constexpr TextFormat tagsLabelTF {Theme::Token_Text_Muted, StyleHelper::UiElementCaptionStrong};
constexpr TextFormat tagsTF {Theme::Token_Accent_Default, tagsLabelTF.uiElement};
constexpr qreal itemOutlineWidth = 1;
constexpr qreal itemCornerRounding = 6;
constexpr int thumbnailAreaBorderWidth = 1;
constexpr QSize thumbnailAreaSize =
WelcomeThumbnailSize.grownBy({thumbnailAreaBorderWidth, thumbnailAreaBorderWidth,
thumbnailAreaBorderWidth, thumbnailAreaBorderWidth});
constexpr int tagsRowsCount = 1;
constexpr int tagsHGap = ExPaddingGapM;
constexpr QEasingCurve::Type hoverEasing = QEasingCurve::OutCubic;
constexpr std::chrono::milliseconds hoverDuration(300);
constexpr int hoverBlurRadius = 50;
constexpr qreal hoverBlurOpacity = 0.175;
QSize ListItemDelegate::itemSize()
{
const int tagsTfLineHeight = tagsTF.lineHeight();
const int width =
ExPaddingGapL
+ thumbnailAreaSize.width()
+ ExPaddingGapL;
const int height =
ExPaddingGapL
+ thumbnailAreaSize.height()
+ VGapL
+ titleTF.lineHeight()
+ VGapL
+ tagsTfLineHeight
+ (tagsTfLineHeight + ExPaddingGapS) * (tagsRowsCount - 1) // If more than one row
+ ExPaddingGapL;
return {width + ExVPaddingGapXl, height + ExVPaddingGapXl};
}
void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option,
const QModelIndex &index) const
{
// Unhovered tile
// +---------------+------------------+---------------+-----------------+
// | | (ExPaddingGapL) | | |
// | +------------------+ | |
// | | <thumbnail> | | |
// | +------------------+ | |
// | | (VGapL) | | |
// | +------------------+ | |
// |(ExPaddingGapL)| <title> |(ExPaddingGapL)|(ExVPaddingGapXs)|
// | +------------------+ | |
// | | (VGapL) | | |
// | +-----------+------+ | |
// | |<tagsLabel>|<tags>| | |
// | +-----------+------+ | |
// | | (ExPaddingGapL) | | |
// +---------------+------------------+---------------+-----------------+
// | (ExVPaddingGapXs) |
// +--------------------------------------------------------------------+
//
// Hovered, final animation state of the are above tagsLabel
// +---------------+------------------+---------------+
// | | (ExPaddingGapL) | |
// | +------------------+ |
// | | <title> | |
// | +------------------+ |
// | | (ExPaddingGapS) | |
// |(ExPaddingGapL)+------------------+(ExPaddingGapL)| ...
// | | <hr> | |
// | +------------------+ |
// | | (ExPaddingGapS) | |
// | +------------------+ |
// | | <description> | |
// +---------------+------------------+---------------+
// ...
const ListItem *item = index.data(ListModel::ItemRole).value<Core::ListItem *>();
const QRect rc = option.rect;
const QRect tileRect(0, 0, rc.width() - GridItemGap, rc.height() - GridItemGap);
const QSize thumbnailBgSize = GridItemImageSize.grownBy(QMargins(1, 1, 1, 1));
const QRect thumbnailBgRect((tileRect.width() - thumbnailBgSize.width()) / 2, GridItemGap,
thumbnailBgSize.width(), thumbnailBgSize.height());
const QRect textArea = tileRect.adjusted(GridItemGap, GridItemGap, -GridItemGap, -GridItemGap);
const QFont tagsLabelFont = tagsLabelTF.font();
const QFontMetrics tagsLabelFM(tagsLabelFont);
const QFont descriptionFont = descriptionTF.font();
const QFontMetrics descriptionFM(descriptionFont);
const QRect bgRGlobal = option.rect.adjusted(0, 0, -ExVPaddingGapXl, -ExVPaddingGapXl);
const QRect bgR = bgRGlobal.translated(-option.rect.topLeft());
const QRect thumbnailAreaR(bgR.left() + ExPaddingGapL, bgR.top() + ExPaddingGapL,
thumbnailAreaSize.width(), thumbnailAreaSize.height());
const QRect titleR(thumbnailAreaR.left(), thumbnailAreaR.bottom() + VGapL + 1,
thumbnailAreaR.width(), titleTF.lineHeight());
const QString tagsLabelText = Tr::tr("Tags:");
const int tagsLabelTextWidth = tagsLabelFM.horizontalAdvance(tagsLabelText);
const QRect tagsLabelR(titleR.left(), titleR.bottom() + VGapL + 1,
tagsLabelTextWidth, tagsTF.lineHeight());
const QRect tagsR(tagsLabelR.right() + 1 + tagsHGap, tagsLabelR.top(),
bgR.right() - ExPaddingGapL - tagsLabelR.right() - tagsHGap,
tagsLabelR.height()
+ (tagsLabelR.height() + ExPaddingGapS) * (tagsRowsCount - 1));
QTC_CHECK(option.rect.height() == tagsR.bottom() + 1 + ExPaddingGapL + ExVPaddingGapXl);
QTC_CHECK(option.rect.width() == tagsR.right() + 1 + ExPaddingGapL + ExVPaddingGapXl);
QTextOption wrapTO;
wrapTO.setWrapMode(QTextOption::WordWrap);
const bool hovered = option.state & QStyle::State_MouseOver;
constexpr int TagsSeparatorY = GridItemHeight - GridItemGap - 52;
constexpr int tagsBase = TagsSeparatorY + 17;
constexpr int shiftY = TagsSeparatorY - 16;
constexpr int nameY = TagsSeparatorY - 20;
const QRect textRect = textArea.translated(0, nameY);
const QFont descriptionFont = sizedFont(11, option.widget);
painter->save();
painter->translate(rc.topLeft());
painter->translate(bgRGlobal.topLeft());
painter->fillRect(tileRect, hovered ? hoverColor : backgroundPrimaryColor);
const QColor fill(themeColor(hovered ? Theme::Token_Foreground_Muted
: Theme::Token_Background_Muted));
const QPen pen(themeColor(hovered ? Theme::Token_Foreground_Muted
: Theme::Token_Stroke_Subtle), itemOutlineWidth);
WelcomePageHelpers::drawCardBackground(painter, bgR, fill, pen, itemCornerRounding);
QTextOption wrapped;
wrapped.setWrapMode(QTextOption::WordWrap);
const int shiftY = thumbnailAreaR.bottom();
int offset = 0;
float animationProgress = 0; // Linear increase from 0.0 to 1.0 during hover animation
qreal animationProgress = 0; // Linear increase from 0.0 to 1.0 during hover animation
if (hovered) {
if (index != m_previousIndex) {
m_previousIndex = index;
@@ -476,12 +874,12 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti
m_currentWidget = qobject_cast<QAbstractItemView *>(
const_cast<QWidget *>(option.widget));
}
constexpr float hoverAnimationDuration = 260;
animationProgress = m_startTime.elapsed() / hoverAnimationDuration;
animationProgress = qreal(m_startTime.elapsed()) / hoverDuration.count();
if (animationProgress < 1) {
static const QEasingCurve animationCurve(QEasingCurve::OutCubic);
static const QEasingCurve animationCurve(hoverEasing);
offset = animationCurve.valueForProgress(animationProgress) * shiftY;
QTimer::singleShot(10, this, &ListItemDelegate::goon);
using namespace std::chrono_literals;
QTimer::singleShot(10ms, this, &ListItemDelegate::goon);
} else {
offset = shiftY;
}
@@ -489,124 +887,125 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti
m_previousIndex = QModelIndex();
}
const QRect shiftedTextRect = textRect.adjusted(0, -offset, 0, -offset);
// The pixmap.
const QPixmap pm = index.data(ListModel::ItemImageRole).value<QPixmap>();
QPoint thumbnailPos = thumbnailBgRect.center();
QPoint thumbnailPos = thumbnailAreaR.center();
if (!pm.isNull()) {
painter->fillRect(thumbnailBgRect, backgroundSecondaryColor);
painter->fillRect(thumbnailAreaR, themeColor(Theme::Token_Background_Default));
thumbnailPos.rx() -= pm.width() / pm.devicePixelRatio() / 2 - 1;
thumbnailPos.ry() -= pm.height() / pm.devicePixelRatio() / 2 - 1;
painter->drawPixmap(thumbnailPos, pm);
painter->setPen(foregroundPrimaryColor);
drawPixmapOverlay(item, painter, option, thumbnailBgRect);
painter->setPen(titleTF.color());
drawPixmapOverlay(item, painter, option, thumbnailAreaR);
} else {
// The description text as fallback.
painter->setPen(textColor);
painter->setFont(descriptionFont);
painter->drawText(textArea, item->description, wrapped);
painter->setPen(descriptionTF.color());
painter->setFont(descriptionTF.font());
painter->drawText(thumbnailAreaR, item->description, wrapTO);
}
// The description background
QRect backgroundPortionR = bgR;
if (offset) {
QRect backgroundPortionRect = tileRect;
backgroundPortionRect.setTop(shiftY - offset);
backgroundPortionR.setTop(shiftY - offset);
if (!pm.isNull()) {
if (m_blurredThumbnail.isNull()) {
constexpr int blurRadius = 50;
QImage thumbnail(tileRect.size() + QSize(blurRadius, blurRadius) * 2,
constexpr int filterMargin = hoverBlurRadius;
QImage thumbnail(bgR.size() + QSize(filterMargin, filterMargin) * 2,
QImage::Format_ARGB32_Premultiplied);
thumbnail.fill(hoverColor);
thumbnail.fill(themeColor(Theme::Token_Foreground_Muted));
QPainter thumbnailPainter(&thumbnail);
thumbnailPainter.translate(blurRadius, blurRadius);
thumbnailPainter.fillRect(thumbnailBgRect, backgroundSecondaryColor);
thumbnailPainter.translate(filterMargin, filterMargin);
thumbnailPainter.fillRect(thumbnailAreaR,
themeColor(Theme::Token_Background_Default));
thumbnailPainter.drawPixmap(thumbnailPos, pm);
thumbnailPainter.setPen(foregroundPrimaryColor);
drawPixmapOverlay(item, &thumbnailPainter, option, thumbnailBgRect);
thumbnailPainter.setPen(titleTF.color());
drawPixmapOverlay(item, &thumbnailPainter, option, thumbnailAreaR);
thumbnailPainter.setOpacity(1.0 - hoverBlurOpacity);
thumbnailPainter.fillRect(thumbnail.rect(),
themeColor(Theme::Token_Foreground_Muted));
thumbnailPainter.end();
qt_blurImage(thumbnail, hoverBlurRadius, false, false);
m_blurredThumbnail = QPixmap(tileRect.size());
QPainter blurredThumbnailPainter(&m_blurredThumbnail);
blurredThumbnailPainter.translate(-blurRadius, -blurRadius);
qt_blurImage(&blurredThumbnailPainter, thumbnail, blurRadius, false, false);
blurredThumbnailPainter.setOpacity(0.825);
blurredThumbnailPainter.fillRect(tileRect, hoverColor);
QImage mask(thumbnail.size(), QImage::Format_Grayscale8);
mask.fill(Qt::black);
QPainter maskPainter(&mask);
const QRect maskR = bgR.translated(filterMargin, filterMargin)
.adjusted(1, 1, -1, -1);
WelcomePageHelpers::drawCardBackground(&maskPainter, maskR,
Qt::white, Qt::NoPen, itemCornerRounding);
thumbnail.setAlphaChannel(mask);
m_blurredThumbnail = QPixmap::fromImage(
thumbnail.copy({filterMargin, filterMargin, bgR.width(), bgR.height()}));
}
const QPixmap thumbnailPortionPM = m_blurredThumbnail.copy(backgroundPortionRect);
painter->drawPixmap(backgroundPortionRect.topLeft(), thumbnailPortionPM);
const QPixmap thumbnailPortionPM = m_blurredThumbnail.copy(backgroundPortionR);
painter->drawPixmap(backgroundPortionR.topLeft(), thumbnailPortionPM);
} else {
painter->fillRect(backgroundPortionRect, hoverColor);
painter->fillRect(thumbnailAreaR, themeColor(Theme::Token_Foreground_Muted));
}
}
// The description Text (unhovered or hovered)
painter->setPen(textColor);
painter->setFont(sizedFont(13, option.widget)); // Title font
painter->setPen(titleTF.color());
painter->setFont(titleTF.font());
if (offset) {
// The title of the example
const QRectF nameRect = painter->boundingRect(shiftedTextRect, item->name, wrapped);
painter->drawText(nameRect, item->name, wrapped);
const QRect shiftedTitleR = thumbnailAreaR.translated(backgroundPortionR.topLeft());
const QRect titleR = painter->boundingRect(shiftedTitleR, item->name, wrapTO).toRect();
painter->drawText(shiftedTitleR, item->name, wrapTO);
painter->setOpacity(animationProgress); // "fade in" separator line and description
// The separator line below the example title.
const int ll = nameRect.height() + 3;
const QLine line = QLine(0, ll, textArea.width(), ll).translated(shiftedTextRect.topLeft());
painter->setPen(foregroundSecondaryColor);
painter->setOpacity(animationProgress); // "fade in" separator line and description
painter->drawLine(line);
const QRect hrR(titleR.x(), titleR.bottom() + 1 + ExPaddingGapS, thumbnailAreaR.width(), 1);
painter->fillRect(hrR, themeColor(Theme::Token_Stroke_Muted));
// The description text.
const int dd = ll + 5;
const QRect descRect = shiftedTextRect.adjusted(0, dd, 0, dd);
painter->setPen(textColor);
painter->setFont(descriptionFont);
painter->drawText(descRect, item->description, wrapped);
const QRect descriptionR(hrR.x(), hrR.bottom() + 1 + ExPaddingGapS,
thumbnailAreaR.width(), shiftY);
painter->setPen(descriptionTF.color());
painter->setFont(descriptionTF.font());
painter->drawText(descriptionR, item->description, wrapTO);
painter->setOpacity(1);
} else {
// The title of the example
const QString elidedName = painter->fontMetrics()
.elidedText(item->name, Qt::ElideRight, textRect.width());
painter->drawText(textRect, elidedName);
.elidedText(item->name, Qt::ElideRight, titleR.width());
painter->drawText(titleR, titleTF.drawTextFlags, elidedName);
}
// Separator line between text and 'Tags:' section
painter->setPen(foregroundSecondaryColor);
painter->drawLine(QLineF(textArea.topLeft(), textArea.topRight())
.translated(0, TagsSeparatorY));
// The 'Tags:' section
painter->setPen(foregroundPrimaryColor);
const QFont tagsFont = sizedFont(10, option.widget);
painter->setFont(tagsFont);
const QFontMetrics fm = painter->fontMetrics();
const QString tagsLabelText = Tr::tr("Tags:");
constexpr int tagsHorSpacing = 5;
const QRect tagsLabelRect =
QRect(0, 0, fm.horizontalAdvance(tagsLabelText) + tagsHorSpacing, fm.height())
.translated(textArea.x(), tagsBase);
painter->drawText(tagsLabelRect, tagsLabelText);
painter->setPen(tagsLabelTF.color());
painter->setFont(tagsLabelTF.font());
painter->drawText(tagsLabelR, tagsLabelTF.drawTextFlags, tagsLabelText);
painter->setPen(themeColor(Theme::Welcome_LinkColor));
int emptyTagRowsLeft = 2;
const QFontMetrics fm = painter->fontMetrics();
painter->setPen(tagsTF.color());
painter->setFont(tagsTF.font());
int emptyTagRowsLeft = tagsRowsCount;
int xx = 0;
int yy = 0;
const bool populateTagsRects = m_currentTagRects.empty();
for (const QString &tag : item->tags) {
const int ww = fm.horizontalAdvance(tag) + tagsHorSpacing;
if (xx + ww > textArea.width() - tagsLabelRect.width()) {
const int ww = fm.horizontalAdvance(tag);
if (xx + ww > tagsR.width()) {
if (--emptyTagRowsLeft == 0)
break;
yy += fm.lineSpacing();
xx = 0;
}
const QRect tagRect = QRect(xx, yy, ww, tagsLabelRect.height())
.translated(tagsLabelRect.topRight());
painter->drawText(tagRect, tag);
if (populateTagsRects)
m_currentTagRects.append({ tag, tagRect });
xx += ww;
const QRect tagRect = QRect(xx, yy, ww, tagsLabelR.height()).translated(tagsR.topLeft());
painter->drawText(tagRect, tagsTF.drawTextFlags, tag);
if (populateTagsRects) {
constexpr int grow = tagsHGap / 2;
const QRect tagMouseArea = tagRect.adjusted(-grow, -grow, grow, grow);
m_currentTagRects.append({ tag, tagMouseArea });
}
xx += ww + tagsHGap;
}
painter->restore();
@@ -642,7 +1041,7 @@ bool ListItemDelegate::editorEvent(QEvent *event, QAbstractItemModel *model,
QSize ListItemDelegate::sizeHint(const QStyleOptionViewItem &, const QModelIndex &) const
{
return {GridItemWidth, GridItemHeight};
return itemSize();
}
void ListItemDelegate::drawPixmapOverlay(const ListItem *, QPainter *,
@@ -682,6 +1081,7 @@ SectionedGridView::SectionedGridView(QWidget *parent)
auto sectionedView = new QWidget;
auto layout = new QVBoxLayout;
layout->setSpacing(0);
layout->setContentsMargins(0, 0, 0, 0);
layout->addStretch(1);
sectionedView->setLayout(layout);
@@ -744,24 +1144,24 @@ void SectionedGridView::setSearchString(const QString &searchString)
filterModel->setSearchString(searchString);
}
static QWidget *createSeparator(QWidget *parent)
static QLabel *createTitleLabel(const QString &text, QWidget *parent = nullptr)
{
QWidget *line = Layouting::createHr(parent);
QSizePolicy linePolicy(QSizePolicy::Expanding, QSizePolicy::Ignored);
linePolicy.setHorizontalStretch(2);
line->setSizePolicy(linePolicy);
QPalette pal = line->palette();
pal.setColor(QPalette::Dark, Qt::transparent);
pal.setColor(QPalette::Light, themeColor(Theme::Welcome_ForegroundSecondaryColor));
line->setPalette(pal);
return line;
constexpr TextFormat headerTitleTF {Theme::Token_Text_Muted, StyleHelper::UiElementH4};
auto link = new QLabel(text, parent);
link->setFont(headerTitleTF.font());
QPalette pal = link->palette();
pal.setColor(QPalette::WindowText, headerTitleTF.color());
link->setPalette(pal);
return link;
}
static QLabel *createLinkLabel(const QString &text, QWidget *parent)
{
const QString linkColor = themeColor(Theme::Welcome_LinkColor).name();
constexpr TextFormat headerLinkTF {Theme::Token_Accent_Default, StyleHelper::UiElementH6};
const QString linkColor = themeColor(headerLinkTF.themeColor).name();
auto link = new QLabel("<a href=\"link\" style=\"color: " + linkColor + ";\">"
+ text + "</a>", parent);
+ text + "</a>", parent);
link->setFont(headerLinkTF.font());
return link;
}
@@ -797,14 +1197,13 @@ ListModel *SectionedGridView::addSection(const Section &section, const QList<Lis
connect(seeAllLink, &QLabel::linkActivated, this, [this, section] { zoomInSection(section); });
using namespace Layouting;
QWidget *sectionLabel = Row {
section.name,
createSeparator(this),
createTitleLabel(section.name),
st,
seeAllLink,
Space(HSpacing),
noMargin
Space(ExVPaddingGapXl),
customMargin({0, ExPaddingGapL, 0, VPaddingL}),
}.emerge();
m_sectionLabels.append(sectionLabel);
sectionLabel->setContentsMargins(0, ItemGap, 0, 0);
auto scrollArea = qobject_cast<QScrollArea *>(widget(0));
auto vbox = qobject_cast<QVBoxLayout *>(scrollArea->widget()->layout());
@@ -858,6 +1257,7 @@ void SectionedGridView::zoomInSection(const Section &section)
auto zoomedInWidget = new QWidget(this);
auto layout = new QVBoxLayout;
layout->setContentsMargins(0, 0, 0, 0);
layout->setSpacing(0);
zoomedInWidget->setLayout(layout);
QLabel *backLink = createLinkLabel("&lt; " + Tr::tr("Back"), this);
@@ -868,13 +1268,12 @@ void SectionedGridView::zoomInSection(const Section &section)
});
using namespace Layouting;
QWidget *sectionLabel = Row {
section.name,
createSeparator(this),
createTitleLabel(section.name),
st,
backLink,
Space(HSpacing),
noMargin
Space(ExVPaddingGapXl),
customMargin({0, ExPaddingGapL, 0, VPaddingL}),
}.emerge();
sectionLabel->setContentsMargins(0, ItemGap, 0, 0);
auto gridView = new GridView(zoomedInWidget);
gridView->setItemDelegate(m_itemDelegate);

View File

@@ -6,10 +6,17 @@
#include "core_global.h"
#include "iwelcomepage.h"
#include <utils/fancylineedit.h>
#include <utils/stylehelper.h>
#include <utils/theme/theme.h>
#include <QComboBox>
#include <QElapsedTimer>
#include <QLabel>
#include <QListView>
#include <QPen>
#include <QPointer>
#include <QPushButton>
#include <QSortFilterProxyModel>
#include <QStackedWidget>
#include <QStyledItemDelegate>
@@ -24,31 +31,111 @@ namespace Core {
namespace WelcomePageHelpers {
constexpr int HSpacing = 20;
constexpr int ItemGap = 4;
constexpr QSize WelcomeThumbnailSize(214, 160);
constexpr int GridItemGap = 3 * ItemGap;
constexpr int GridItemWidth = 240 + GridItemGap; // Extra GridItemGap as "spacing"
constexpr int GridItemHeight = GridItemWidth;
constexpr QSize GridItemImageSize(GridItemWidth - GridItemGap
- 2 * (GridItemGap + 1), // Horizontal margins + 1 pixel
GridItemHeight - GridItemGap
- GridItemGap - 1 // Upper margin + 1 pixel
- 67); // Bottom margin (for title + tags)
class CORE_EXPORT TextFormat {
public:
QColor color() const
{
return Utils::creatorTheme()->color(themeColor);
}
CORE_EXPORT QWidget *panelBar(QWidget *parent = nullptr);
QFont font(bool underlined = false) const
{
QFont result = Utils::StyleHelper::uiFont(uiElement);
result.setUnderline(underlined);
return result;
}
int lineHeight() const
{
return Utils::StyleHelper::uiFontLineHeight(uiElement);
}
const Utils::Theme::Color themeColor;
const Utils::StyleHelper::UiElement uiElement;
const int drawTextFlags = Qt::AlignLeft | Qt::AlignBottom | Qt::TextDontClip;
};
CORE_EXPORT void setBackgroundColor(QWidget *widget, Utils::Theme::Color colorRole);
constexpr qreal defaultCardBackgroundRounding = 3.75;
CORE_EXPORT void drawCardBackground(QPainter *painter, const QRectF &rect,
const QBrush &fill, const QPen &pen = QPen(Qt::NoPen),
qreal rounding = 5.0);
qreal rounding = defaultCardBackgroundRounding);
CORE_EXPORT QWidget *createRule(Qt::Orientation orientation, QWidget *parent = nullptr);
} // namespace WelcomePageHelpers
class CORE_EXPORT SearchBox : public WelcomePageFrame
class CORE_EXPORT Button : public QPushButton
{
public:
enum Role {
MediumPrimary,
MediumSecondary,
SmallPrimary,
SmallSecondary,
SmallList,
SmallLink,
};
explicit Button(const QString &text, Role role, QWidget *parent = nullptr);
QSize minimumSizeHint() const override;
void setPixmap(const QPixmap &newPixmap);
protected:
void paintEvent(QPaintEvent *event) override;
private:
void updateMargins();
const Role m_role = MediumPrimary;
QPixmap m_pixmap;
};
class CORE_EXPORT Label : public QLabel
{
public:
enum Role {
Primary,
Secondary,
};
explicit Label(const QString &text, Role role, QWidget *parent = nullptr);
private:
const Role m_role = Primary;
};
class CORE_EXPORT SearchBox : public QLineEdit
{
public:
explicit SearchBox(QWidget *parent = nullptr);
Utils::FancyLineEdit *m_lineEdit = nullptr;
QSize minimumSizeHint() const override;
protected:
void paintEvent(QPaintEvent *event) override;
protected:
void enterEvent(QEnterEvent *event) override;
void leaveEvent(QEvent *event) override;
};
class CORE_EXPORT ComboBox : public QComboBox
{
public:
explicit ComboBox(QWidget *parent = nullptr);
QSize sizeHint() const override;
protected:
void paintEvent(QPaintEvent *event) override;
protected:
void enterEvent(QEnterEvent *event) override;
void leaveEvent(QEvent *event) override;
};
class CORE_EXPORT GridView : public QListView
@@ -146,7 +233,9 @@ class CORE_EXPORT ListItemDelegate : public QStyledItemDelegate
{
Q_OBJECT
public:
ListItemDelegate();
ListItemDelegate() = default;
static QSize itemSize();
void paint(QPainter *painter, const QStyleOptionViewItem &option,
const QModelIndex &index) const override;
@@ -165,13 +254,6 @@ protected:
void goon();
const QColor backgroundPrimaryColor;
const QColor backgroundSecondaryColor;
const QColor foregroundPrimaryColor;
const QColor foregroundSecondaryColor;
const QColor hoverColor;
const QColor textColor;
private:
mutable QPersistentModelIndex m_previousIndex;
mutable QElapsedTimer m_startTime;

View File

@@ -29,14 +29,6 @@ using namespace Utils;
namespace ExtensionManager::Internal {
static QWidget *createVr(QWidget *parent = nullptr)
{
auto vr = new QWidget(parent);
vr->setFixedWidth(1);
setBackgroundColor(vr, Theme::Token_Stroke_Subtle);
return vr;
}
class CollapsingWidget : public QWidget
{
public:
@@ -79,13 +71,13 @@ ExtensionManagerWidget::ExtensionManagerWidget()
using namespace Layouting;
Row {
createVr(),
WelcomePageHelpers::createRule(Qt::Vertical),
m_secondaryDescription,
noMargin(), spacing(0),
}.attachTo(m_secondarDescriptionWidget);
Row {
createVr(),
WelcomePageHelpers::createRule(Qt::Vertical),
Row {
m_primaryDescription,
noMargin(),
@@ -95,13 +87,13 @@ ExtensionManagerWidget::ExtensionManagerWidget()
}.attachTo(descriptionColumns);
Row {
Space(WelcomePageHelpers::HSpacing),
m_leftColumn,
Space(StyleHelper::SpacingTokens::ExVPaddingGapXl),
m_leftColumn,
descriptionColumns,
noMargin(), spacing(0),
}.attachTo(this);
setBackgroundColor(this, Theme::Token_Background_Default);
WelcomePageHelpers::setBackgroundColor(this, Theme::Token_Background_Default);
connect(m_leftColumn, &ExtensionsBrowser::itemSelected,
this, &ExtensionManagerWidget::updateView);
@@ -132,7 +124,7 @@ void ExtensionManagerWidget::updateView(const QModelIndex &current,
"margin-left: %3px; margin-right: %3px;")
.arg(creatorTheme()->color(Theme::Token_Text_Default).name())
.arg(creatorTheme()->color(Theme::Token_Background_Muted).name())
.arg(WelcomePageHelpers::HSpacing);
.arg(StyleHelper::SpacingTokens::ExVPaddingGapXl);
const QString htmlStart = QString(R"(
<html>
<body style="%1">

View File

@@ -41,7 +41,7 @@ using PluginSpecList = QList<const PluginSpec *>;
using Tags = QStringList;
constexpr QSize itemSize = {330, 86};
constexpr int gapSize = 2 * WelcomePageHelpers::GridItemGap;
constexpr int gapSize = StyleHelper::SpacingTokens::ExVPaddingGapXl;
constexpr QSize cellSize = {itemSize.width() + gapSize, itemSize.height() + gapSize};
enum Role {
@@ -62,16 +62,6 @@ ItemData itemData(const QModelIndex &index)
};
}
void setBackgroundColor(QWidget *widget, Theme::Color colorRole)
{
QPalette palette = creatorTheme()->palette();
palette.setColor(QPalette::Window,
creatorTheme()->color(colorRole));
widget->setPalette(palette);
widget->setBackgroundRole(QPalette::Window);
widget->setAutoFillBackground(true);
}
static QColor colorForExtensionName(const QString &name)
{
const size_t hash = qHash(name);
@@ -390,7 +380,7 @@ public:
}
{
constexpr int textX = 80;
constexpr int rightMargin = 2 * WelcomePageHelpers::ItemGap;
constexpr int rightMargin = StyleHelper::SpacingTokens::ExVPaddingGapXl;
constexpr int maxTextWidth = itemSize.width() - textX - rightMargin;
constexpr Qt::TextElideMode elideMode = Qt::ElideRight;
@@ -440,8 +430,7 @@ ExtensionsBrowser::ExtensionsBrowser()
m_searchBox = new Core::SearchBox;
m_searchBox->setFixedWidth(itemSize.width());
m_updateButton = new WelcomePageButton;
m_updateButton->setText(Tr::tr("Install..."));
m_updateButton = new Button(Tr::tr("Install..."), Button::MediumPrimary);
m_filterProxyModel = new QSortFilterProxyModel(this);
m_filterProxyModel->setFilterCaseSensitivity(Qt::CaseInsensitive);
@@ -469,9 +458,10 @@ ExtensionsBrowser::ExtensionsBrowser()
noMargin(), spacing(0),
}.attachTo(this);
setBackgroundColor(this, Theme::Token_Background_Default);
setBackgroundColor(m_extensionsView, Theme::Token_Background_Default);
setBackgroundColor(m_extensionsView->viewport(), Theme::Token_Background_Default);
WelcomePageHelpers::setBackgroundColor(this, Theme::Token_Background_Default);
WelcomePageHelpers::setBackgroundColor(m_extensionsView, Theme::Token_Background_Default);
WelcomePageHelpers::setBackgroundColor(m_extensionsView->viewport(),
Theme::Token_Background_Default);
auto updateModel = [this] {
m_model.reset(extensionsModel());
@@ -488,7 +478,7 @@ ExtensionsBrowser::ExtensionsBrowser()
connect(ExtensionSystem::PluginManager::instance(),
&ExtensionSystem::PluginManager::pluginsChanged, this, updateModel);
connect(m_searchBox->m_lineEdit, &Utils::FancyLineEdit::textChanged,
connect(m_searchBox, &QLineEdit::textChanged,
m_filterProxyModel, &QSortFilterProxyModel::setFilterWildcard);
}

View File

@@ -10,7 +10,9 @@
QT_BEGIN_NAMESPACE
class QItemSelectionModel;
class QLineEdit;
class QListView;
class QPushButton;
class QSortFilterProxyModel;
QT_END_NAMESPACE
@@ -19,11 +21,6 @@ namespace ExtensionSystem
class PluginSpec;
}
namespace Core {
class SearchBox;
class WelcomePageButton;
}
namespace ExtensionManager::Internal {
using PluginSpecList = QList<const ExtensionSystem::PluginSpec *>;
@@ -42,7 +39,6 @@ struct ItemData {
};
ItemData itemData(const QModelIndex &index);
void setBackgroundColor(QWidget *widget, Utils::Theme::Color colorRole);
class ExtensionsBrowser final : public QWidget
{
@@ -61,8 +57,8 @@ private:
int extraListViewWidth() const; // Space for scrollbar, etc.
QScopedPointer<QStandardItemModel> m_model;
Core::SearchBox *m_searchBox;
Core::WelcomePageButton *m_updateButton;
QLineEdit *m_searchBox;
QPushButton *m_updateButton;
QListView *m_extensionsView;
QItemSelectionModel *m_selectionModel = nullptr;
QSortFilterProxyModel *m_filterProxyModel;

View File

@@ -269,7 +269,7 @@ void SectionedProducts::onImageDownloadFinished(QNetworkReply *reply)
if (pixmap.loadFromData(data, imageFormat.toLatin1())) {
const QString url = imageUrl.toString();
const int dpr = qApp->devicePixelRatio();
pixmap = pixmap.scaled(WelcomePageHelpers::GridItemImageSize * dpr,
pixmap = pixmap.scaled(WelcomePageHelpers::WelcomeThumbnailSize * dpr,
Qt::KeepAspectRatio,
Qt::SmoothTransformation);
pixmap.setDevicePixelRatio(dpr);

View File

@@ -9,9 +9,10 @@
#include <coreplugin/welcomepagehelper.h>
#include <utils/fancylineedit.h>
#include <utils/layoutbuilder.h>
#include <utils/progressindicator.h>
#include <utils/theme/theme.h>
#include <utils/qtcassert.h>
#include <utils/theme/theme.h>
#include <QDesktopServices>
#include <QLabel>
@@ -44,38 +45,34 @@ class QtMarketplacePageWidget : public QWidget
public:
QtMarketplacePageWidget()
{
auto searchBox = new Core::SearchBox(this);
m_searcher = searchBox->m_lineEdit;
m_searcher = new Core::SearchBox(this);
m_searcher->setPlaceholderText(Tr::tr("Search in Marketplace..."));
auto vbox = new QVBoxLayout(this);
vbox->setContentsMargins(0, 0, 0, Core::WelcomePageHelpers::ItemGap);
vbox->setSpacing(Core::WelcomePageHelpers::ItemGap);
auto searchBar = Core::WelcomePageHelpers::panelBar();
auto hbox = new QHBoxLayout(searchBar);
hbox->setContentsMargins(Core::WelcomePageHelpers::HSpacing, 0,
Core::WelcomePageHelpers::HSpacing, 0);
hbox->addWidget(searchBox);
vbox->addWidget(searchBar);
m_errorLabel = new QLabel(this);
m_errorLabel->setVisible(false);
vbox->addWidget(m_errorLabel);
auto resultWidget = new QWidget(this);
auto resultHBox = new QHBoxLayout(resultWidget);
resultHBox->setContentsMargins(Core::WelcomePageHelpers::HSpacing, 0, 0, 0);
m_sectionedProducts = new SectionedProducts(this);
auto progressIndicator = new Utils::ProgressIndicator(ProgressIndicatorSize::Large, this);
progressIndicator->attachToWidget(m_sectionedProducts);
progressIndicator->hide();
resultHBox->addWidget(m_sectionedProducts);
vbox->addWidget(resultWidget);
using namespace StyleHelper::SpacingTokens;
using namespace Layouting;
Column {
Row {
m_searcher,
customMargin({0, 0, ExVPaddingGapXl, 0}),
},
m_sectionedProducts,
spacing(VPaddingL),
customMargin({ExVPaddingGapXl, ExVPaddingGapXl, 0, 0}),
}.attachTo(this);
connect(m_sectionedProducts, &SectionedProducts::toggleProgressIndicator,
progressIndicator, &Utils::ProgressIndicator::setVisible);
connect(m_sectionedProducts, &SectionedProducts::errorOccurred, this,
[this, progressIndicator, searchBox](int, const QString &message) {
[this, progressIndicator](int, const QString &message) {
progressIndicator->hide();
progressIndicator->deleteLater();
m_errorLabel->setAlignment(Qt::AlignHCenter);
@@ -89,7 +86,7 @@ public:
"</p><br/><p><small><i>Error: %1</i></small></p>").arg(message);
m_errorLabel->setText(txt);
m_errorLabel->setVisible(true);
searchBox->setVisible(false);
m_searcher->setVisible(false);
connect(m_errorLabel, &QLabel::linkActivated,
this, []() { QDesktopServices::openUrl(QUrl("https://marketplace.qt.io")); });
});

View File

@@ -21,6 +21,7 @@
#include <utils/algorithm.h>
#include <utils/fileutils.h>
#include <utils/icon.h>
#include <utils/layoutbuilder.h>
#include <utils/qtcassert.h>
#include <utils/stringutils.h>
#include <utils/stylehelper.h>
@@ -28,9 +29,6 @@
#include <QAbstractItemDelegate>
#include <QAction>
#include <QBoxLayout>
#include <QDir>
#include <QFileInfo>
#include <QHeaderView>
#include <QHelpEvent>
#include <QLabel>
@@ -42,16 +40,52 @@
using namespace Core;
using namespace Core::WelcomePageHelpers;
using namespace Utils;
using namespace Utils::StyleHelper::SpacingTokens;
const int LINK_HEIGHT = 35;
const int TEXT_OFFSET_HORIZONTAL = 36;
const int SESSION_LINE_HEIGHT = 28;
const int SESSION_ARROW_RECT_WIDTH = 24;
const char PROJECT_BASE_ID[] = "Welcome.OpenRecentProject";
namespace ProjectExplorer {
namespace Internal {
constexpr TextFormat projectNameTF {Theme::Token_Accent_Default, StyleHelper::UiElementH5};
constexpr TextFormat projectPathTF {Theme::Token_Text_Muted, StyleHelper::UiElementIconActive};
constexpr TextFormat sessionNameTF {projectNameTF.themeColor, projectNameTF.uiElement};
constexpr TextFormat sessionProjetNameTF {Theme::Token_Text_Default, projectNameTF.uiElement};
constexpr TextFormat shortcutNumberTF {Theme::Token_Text_Default,
StyleHelper::UiElementCaptionStrong,
Qt::AlignCenter | Qt::TextDontClip};
constexpr TextFormat actionTF {Theme::Token_Text_Default, StyleHelper::UiElementIconActive,
Qt::AlignCenter | Qt::TextDontClip};
constexpr TextFormat actionDisabledTF {Theme::Token_Text_Subtle, actionTF.uiElement,
actionTF.drawTextFlags};
constexpr int shortcutNumberWidth = 16;
constexpr int actionSepWidth = 1;
constexpr int sessionScrollBarGap = HPaddingXs;
static int s(const int metric)
{
constexpr int shrinkWhenAbove = 150; // Above this session count, increasingly reduce scale
constexpr qreal maxScale = 1.0; // Spacings as defined by design
constexpr qreal minScale = 0.2; // Maximum "condensed" layout
const int sessionsCount = SessionManager::sessionsCount();
const qreal scaling = sessionsCount < shrinkWhenAbove
? maxScale
: qMax(minScale,
maxScale - (sessionsCount - shrinkWhenAbove) * 0.065);
return int(qMax(1.0, scaling * metric));
}
static int itemSpacing()
{
return qMax(int(s(VGapL)), VGapS);
}
static bool withIcon()
{
return s(100) > 60; // Hide icons if spacings are scaled to below 60%
}
ProjectModel::ProjectModel(QObject *parent)
: QAbstractListModel(parent)
{
@@ -61,7 +95,7 @@ ProjectModel::ProjectModel(QObject *parent)
int ProjectModel::rowCount(const QModelIndex &) const
{
return m_projects.count();
return int(m_projects.count());
}
QVariant ProjectModel::data(const QModelIndex &index, int role) const
@@ -190,21 +224,24 @@ static QColor themeColor(Theme::Color role)
return Utils::creatorTheme()->color(role);
}
static QFont sizedFont(int size, const QWidget *widget,
bool underline = false)
{
QFont f = widget->font();
f.setPixelSize(size);
f.setUnderline(underline);
return f;
}
static QPixmap pixmap(const QString &id, const Theme::Color &color)
static QPixmap pixmap(const QString &id, const Theme::Color color)
{
const QString fileName = QString(":/welcome/images/%1.png").arg(id);
return Icon({{FilePath::fromString(fileName), color}}, Icon::Tint).pixmap();
}
static void drawBackgroundRect(QPainter *painter, const QRectF &rect, bool hovered)
{
const QColor fill(themeColor(hovered ? Theme::Token_Foreground_Muted
: Theme::Token_Background_Muted));
const QPen pen(themeColor(hovered ? Theme::Token_Foreground_Muted
: Theme::Token_Stroke_Subtle));
const qreal rounding = s(defaultCardBackgroundRounding * 1000) / 1000.0;
const qreal saneRounding = rounding <= 2 ? 0 : rounding;
WelcomePageHelpers::drawCardBackground(painter, rect, fill, pen, saneRounding);
}
class BaseDelegate : public QAbstractItemDelegate
{
protected:
@@ -244,6 +281,11 @@ protected:
class SessionDelegate : public BaseDelegate
{
protected:
bool expanded(const QModelIndex &idx) const
{
return m_expandedSessions.contains(idx.data(Qt::DisplayRole).toString());
}
QString entryType() override
{
return Tr::tr("session", "Appears in \"Open session <name>\"");
@@ -252,150 +294,287 @@ protected:
{
// in expanded state bottom contains 'Clone', 'Rename', etc links, where the tool tip
// would be confusing
const bool expanded = m_expandedSessions.contains(idx.data(Qt::DisplayRole).toString());
return expanded ? itemRect.adjusted(0, 0, 0, -LINK_HEIGHT) : itemRect;
return expanded(idx) ? itemRect.adjusted(0, 0, 0, -actionButtonHeight()) : itemRect;
}
int shortcutRole() const override
{
return SessionModel::ShortcutRole;
}
static int actionButtonHeight()
{
return s(VPaddingXxs) + actionTF.lineHeight() + s(VPaddingXxs);
}
static const QPixmap &icon()
{
static const QPixmap icon = pixmap("session", Theme::Token_Text_Muted);
return icon;
}
int shortcutRole() const override { return SessionModel::ShortcutRole; }
public:
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &idx) const final
void paint(QPainter *painter, const QStyleOptionViewItem &option,
const QModelIndex &idx) const final
{
static const QPixmap sessionIcon = pixmap("session", Theme::Welcome_ForegroundSecondaryColor);
const QRect rc = option.rect;
const QString sessionName = idx.data(Qt::DisplayRole).toString();
// visible on withIcon() Gap + arrow visible on hover Extra margin right of project item
// | | |
// +----------+----------+ +--------+-------+ +----------+----------+
// | | | | | |
//
// +------------+--------+--------+------------+--------+-------------+--------+-------+------------+---------------------+ --+
// | | | |(VPaddingXs)| |(VPaddingXs) | | | | | |
// | | | +------------+ +-------------+ | | | | |
// |(HPaddingXs)|<number>|(HGapXs)| <icon> |(HGapXs)|<sessionName>|(HGapXs)|<arrow>| | | +-- Header
// | |(16x16) | +------------+ +-------------+ | | | | |
// | | | |(VPaddingXs)| |(VPaddingXs) | | | | | |
// |------------+--------+--------+------------+--------+-------------+--------+-------+ | | --+
// | +-- | (VPaddingXs) | | | |
// | | +------------------------------+(HPaddingXs)| | |
// | | | <projectName> | | | |
// | | +------------------------------+ | | |
// | Per project in session --+ | (EXSPaddingGapS) | |(sessionScrollBarGap)| |
// | | +------------------------------+ | | |
// | | | <projectPath> | | | |
// | | +------------------------------+ | | +-- Expansion
// | +-- | (VPaddingXs) | | | |
// +----------------------------------------------+------------------------------------+------------+ | |
// | (VPaddingXs) | | |
// +----------------------------------------+--------------+----------------------------------------+ | |
// +-- | <cloneButton>|<renameButton>|<deleteButton> | | |
// | +----------------------------------------+--------------+----------------------------------------+ | |
// | | (VPaddingXs) | | |
// | +------------------------------------------------------------------------------------------------+---------------------+ --+
// | | (VGapL) | +-- Gap between session items
// | +----------------------------------------------------------------------------------------------------------------------+ --+
// |
// \ session action "buttons" and dividers
// +-----------------------------------------------+--------+---------+--------+
// | (VGapXs) | | | |
// +----------------+-------------+----------------+ | | |
// |(EXSPaddingGapM)|<buttonLabel>|(EXSPaddingGapM)|(HGapXs)|<divider>|(HGapXs)|
// +----------------+-------------+----------------+ |(w:1) | |
// | (VGapXs) | | | |
// +-----------------------------------------------+--------+---------+--------+
//
// | |
// +-------------+-------------+
// |
// omitted after last button
const QPoint mousePos = option.widget->mapFromGlobal(QCursor::pos());
//const bool hovered = option.state & QStyle::State_MouseOver;
const bool hovered = option.rect.contains(mousePos);
const bool expanded = m_expandedSessions.contains(sessionName);
painter->fillRect(rc, themeColor(Theme::Welcome_BackgroundSecondaryColor));
painter->fillRect(rc.adjusted(0, 0, 0, -ItemGap),
hovered ? hoverColor : backgroundPrimaryColor);
const bool expanded = this->expanded(idx);
const int x = rc.x();
const int x1 = x + TEXT_OFFSET_HORIZONTAL;
const int y = rc.y();
const int firstBase = y + 18;
const QRect bgR = option.rect.adjusted(0, 0, -sessionScrollBarGap, -itemSpacing());
const QRect hdR(bgR.topLeft(), QSize(bgR.width(), expanded ? headerHeight()
: bgR.height()));
painter->drawPixmap(x + 11, y + 6, sessionIcon);
const QSize iconS = icon().deviceIndependentSize().toSize();
static const QPixmap arrow = Icon({{FilePath::fromString(":/core/images/expandarrow"),
Theme::Token_Text_Muted}}, Icon::Tint).pixmap();
const QSize arrowS = arrow.deviceIndependentSize().toSize();
const bool arrowVisible = hovered || expanded;
if (hovered && !expanded) {
const QRect arrowRect = rc.adjusted(rc.width() - SESSION_ARROW_RECT_WIDTH, 0, 0, 0);
const bool arrowRectHovered = arrowRect.contains(mousePos);
painter->fillRect(arrowRect.adjusted(0, 0, 0, -ItemGap),
arrowRectHovered ? hoverColor : backgroundPrimaryColor);
const QString sessionName = idx.data(Qt::DisplayRole).toString();
const int x = bgR.x();
const int y = bgR.y();
const int numberX = x + s(HPaddingXs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXs);
const int arrowX = bgR.right() - s(HPaddingXs) - arrowS.width();
const QRect arrowHoverR(arrowX - s(HGapXs) + 1, y,
s(HGapXs) + arrowS.width() + s(HPaddingXs), hdR.height());
const int textX = withIcon() ? iconX + iconS.width() + s(HGapXs) : iconX;
const int iconY = y + (hdR.height() - iconS.height()) / 2;
const int arrowY = y + (hdR.height() - arrowS.height()) / 2;
{
drawBackgroundRect(painter, bgR, hovered);
}
if (hovered || expanded) {
static const QPixmap arrowUp = pixmap("expandarrow",Theme::Welcome_ForegroundSecondaryColor);
static const QPixmap arrowDown = QPixmap::fromImage(arrowUp.toImage().mirrored(false, true));
painter->drawPixmap(rc.right() - 19, y + 6, expanded ? arrowDown : arrowUp);
}
if (idx.row() < 9) {
painter->setPen(foregroundSecondaryColor);
painter->setFont(sizedFont(10, option.widget));
painter->drawText(x + 3, firstBase, QString::number(idx.row() + 1));
painter->setPen(shortcutNumberTF.color());
painter->setFont(shortcutNumberTF.font());
const QRect numberR(numberX, y, shortcutNumberWidth, hdR.height());
const QString numberString = QString::number(idx.row() + 1);
painter->drawText(numberR, shortcutNumberTF.drawTextFlags, numberString);
}
if (withIcon()) {
painter->drawPixmap(iconX, iconY, icon());
}
{
const bool isLastSession = idx.data(SessionModel::LastSessionRole).toBool();
const bool isActiveSession = idx.data(SessionModel::ActiveSessionRole).toBool();
const bool isDefaultVirgin = SessionManager::isDefaultVirgin();
const int sessionNameWidth = hdR.right()
- (arrowVisible ? arrowHoverR.width(): s(HPaddingXs))
- textX;
const int sessionNameHeight = sessionNameTF.lineHeight();
const int sessionNameY = y + (hdR.height() - sessionNameHeight) / 2;
const QRect sessionNameR(textX, sessionNameY, sessionNameWidth, sessionNameHeight);
QString fullSessionName = sessionName;
if (isLastSession && isDefaultVirgin)
fullSessionName = Tr::tr("%1 (last session)").arg(fullSessionName);
if (isActiveSession && !isDefaultVirgin)
fullSessionName = Tr::tr("%1 (current session)").arg(fullSessionName);
const QRect switchR(x, y, hdR.width() - arrowHoverR.width(),
hdR.height() + s(VGapL));
const bool switchActive = switchR.contains(mousePos);
painter->setPen(sessionNameTF.color());
painter->setFont(sessionNameTF.font(switchActive));
const QString fullSessionNameElided = painter->fontMetrics().elidedText(
fullSessionName, Qt::ElideRight, sessionNameWidth);
painter->drawText(sessionNameR, sessionNameTF.drawTextFlags,
fullSessionNameElided);
if (switchActive)
m_activeSwitchToRect = switchR;
}
if (arrowVisible) {
if (arrowHoverR.adjusted(0, 0, 0, s(VGapL)).contains(mousePos)) {
m_activeExpandRect = arrowHoverR;
} else {
painter->save();
painter->setClipRect(arrowHoverR);
drawBackgroundRect(painter, bgR, false);
painter->restore();
}
static const QPixmap arrowDown =
QPixmap::fromImage(arrow.toImage().mirrored(false, true));
painter->drawPixmap(arrowX, arrowY, expanded ? arrowDown : arrow);
}
const bool isLastSession = idx.data(SessionModel::LastSessionRole).toBool();
const bool isActiveSession = idx.data(SessionModel::ActiveSessionRole).toBool();
const bool isDefaultVirgin = SessionManager::isDefaultVirgin();
QString fullSessionName = sessionName;
if (isLastSession && isDefaultVirgin)
fullSessionName = Tr::tr("%1 (last session)").arg(fullSessionName);
if (isActiveSession && !isDefaultVirgin)
fullSessionName = Tr::tr("%1 (current session)").arg(fullSessionName);
const QRect switchRect = QRect(x, y, rc.width() - SESSION_ARROW_RECT_WIDTH, SESSION_LINE_HEIGHT);
const bool switchActive = switchRect.contains(mousePos);
const int textSpace = rc.width() - TEXT_OFFSET_HORIZONTAL - 6;
const int sessionNameTextSpace =
textSpace -(hovered || expanded ? SESSION_ARROW_RECT_WIDTH : 0);
painter->setPen(linkColor);
painter->setFont(sizedFont(13, option.widget, switchActive));
const QString fullSessionNameElided = painter->fontMetrics().elidedText(
fullSessionName, Qt::ElideRight, sessionNameTextSpace);
painter->drawText(x1, firstBase, fullSessionNameElided);
if (switchActive)
m_activeSwitchToRect = switchRect;
int yy = hdR.bottom();
if (expanded) {
painter->setPen(textColor);
painter->setFont(sizedFont(12, option.widget));
const QFont projectNameFont = sessionProjetNameTF.font();
const QFontMetrics projectNameFm(projectNameFont);
const int projectNameLineHeight = sessionProjetNameTF.lineHeight();
const QFont projectPathFont = projectPathTF.font();
const QFontMetrics projectPathFm(projectPathFont);
const int projectPathLineHeight = projectPathTF.lineHeight();
const int textWidth = bgR.right() - s(HPaddingXs) - textX;
const FilePaths projects = ProjectManager::projectsForSessionName(sessionName);
int yy = firstBase + SESSION_LINE_HEIGHT - 3;
QFontMetrics fm(option.widget->font());
for (const FilePath &projectPath : projects) {
// Project name.
QString completeBase = projectPath.completeBaseName();
painter->setPen(textColor);
painter->drawText(x1, yy, fm.elidedText(completeBase, Qt::ElideMiddle, textSpace));
yy += 18;
// Project path.
const QString displayPath =
projectPath.osType() == OsTypeWindows ? projectPath.displayName()
: projectPath.withTildeHomePath();
painter->setPen(foregroundPrimaryColor);
painter->drawText(x1, yy, fm.elidedText(displayPath, Qt::ElideMiddle, textSpace));
yy += 22;
yy += s(VPaddingXs);
{
painter->setFont(projectNameFont);
painter->setPen(sessionProjetNameTF.color());
const QRect projectNameR(textX, yy, textWidth, projectNameLineHeight);
const QString projectNameElided =
projectNameFm.elidedText(projectPath.completeBaseName(), Qt::ElideMiddle,
textWidth);
painter->drawText(projectNameR, sessionProjetNameTF.drawTextFlags,
projectNameElided);
yy += projectNameLineHeight;
yy += s(ExPaddingGapS);
}
{
const QString displayPath =
projectPath.osType() == OsTypeWindows ? projectPath.displayName()
: projectPath.withTildeHomePath();
painter->setFont(projectPathFont);
painter->setPen(projectPathTF.color());
const QRect projectPathR(textX, yy, textWidth, projectPathLineHeight);
const QString projectPathElided =
projectPathFm.elidedText(displayPath, Qt::ElideMiddle, textWidth);
painter->drawText(projectPathR, projectPathTF.drawTextFlags,
projectPathElided);
yy += projectPathLineHeight;
}
yy += s(VPaddingXs);
}
yy += s(VGapXs);
yy += 3;
int xx = x1;
const QStringList actions = {
Tr::tr("Clone"),
Tr::tr("Rename"),
Tr::tr("Delete")
Tr::tr("Delete"),
};
for (int i = 0; i < 3; ++i) {
const QFont actionFont = actionTF.font();
const QFontMetrics actionFm(actionTF.font());
const int gapWidth = s(HGapXs) + actionSepWidth + s(HGapXs);
int actionsTotalWidth = gapWidth * int(actions.count() - 1); // dividers
const auto textWidths = Utils::transform(actions, [&] (const QString &action) {
const int width = actionFm.horizontalAdvance(action);
actionsTotalWidth += s(ExPaddingGapM) + width + s(ExPaddingGapM);
return width;
});
const int buttonHeight = this->actionButtonHeight();
int xx = (bgR.width() - actionsTotalWidth) / 2;
for (int i = 0; i < actions.count(); ++i) {
const QString &action = actions.at(i);
const int ww = fm.horizontalAdvance(action);
const int spacing = 7; // Between action link and separator line
const QRect actionRect =
QRect(xx, yy - 10, ww, 15).adjusted(-spacing, -spacing, spacing, spacing);
const bool isForcedDisabled = (i != 0 && sessionName == "default");
const bool isActive = actionRect.contains(mousePos) && !isForcedDisabled;
painter->setPen(isForcedDisabled ? disabledLinkColor : linkColor);
painter->setFont(sizedFont(12, option.widget, isActive));
painter->drawText(xx, yy, action);
if (i < 2) {
xx += ww + 2 * spacing;
int pp = xx - spacing;
painter->setPen(textColor);
painter->drawLine(pp, yy - 10, pp, yy);
const int ww = textWidths.at(i);
const QRect actionR(xx, yy, s(ExPaddingGapM) + ww + s(ExPaddingGapM), buttonHeight);
const bool isDisabled = i > 0 && SessionManager::isDefaultSession(sessionName);
const bool isActive = actionR.adjusted(-s(VPaddingXs), 0, s(VPaddingXs) + 1, 0)
.contains(mousePos) && !isDisabled;
if (isActive) {
WelcomePageHelpers::drawCardBackground(painter, actionR, Qt::transparent,
themeColor(Theme::Token_Text_Muted));
m_activeActionRects[i] = actionR;
}
if (isActive)
m_activeActionRects[i] = actionRect;
painter->setFont(actionFont);
painter->setPen((isDisabled ? actionDisabledTF : actionTF).color());
const QRect actionTextR = actionR.adjusted(0, 0, 0, -1);
painter->drawText(actionTextR, actionTF.drawTextFlags, action);
xx += actionR.width();
if (i < actions.count() - 1) {
const QRect dividerR(xx + s(HGapXs), yy, actionSepWidth, buttonHeight);
painter->fillRect(dividerR, themeColor(Theme::Token_Text_Muted));
}
xx += gapWidth;
}
yy += buttonHeight;
yy += s(VGapXs);
}
QTC_CHECK(option.rect.bottom() == yy + itemSpacing());
}
static int headerHeight()
{
const int paddingsHeight = s(VPaddingXs + VPaddingXs);
const int heightForSessionName = sessionNameTF.lineHeight() + paddingsHeight;
const int heightForIcon =
withIcon() ? int(icon().deviceIndependentSize().height()) + paddingsHeight : 0;
return qMax(heightForSessionName, heightForIcon);
}
QSize sizeHint(const QStyleOptionViewItem &, const QModelIndex &idx) const final
{
int h = SESSION_LINE_HEIGHT;
QString sessionName = idx.data(Qt::DisplayRole).toString();
if (m_expandedSessions.contains(sessionName)) {
int h = headerHeight();
if (expanded(idx)) {
const QString sessionName = idx.data(Qt::DisplayRole).toString();
const FilePaths projects = ProjectManager::projectsForSessionName(sessionName);
h += projects.size() * 40 + LINK_HEIGHT - 6;
const int projectEntryHeight =
s(VPaddingXs)
+ projectNameTF.lineHeight()
+ s(ExPaddingGapS)
+ projectPathTF.lineHeight()
+ s(VPaddingXs);
h += projects.size() * projectEntryHeight
+ s(VGapXs)
+ actionButtonHeight()
+ s(VGapXs);
}
return QSize(380, h + ItemGap);
return QSize(-1, h + itemSpacing());
}
bool editorEvent(QEvent *ev, QAbstractItemModel *model,
const QStyleOptionViewItem &option, const QModelIndex &idx) final
const QStyleOptionViewItem &, const QModelIndex &idx) final
{
if (ev->type() == QEvent::MouseButtonRelease) {
const QMouseEvent *mouseEvent = static_cast<QMouseEvent *>(ev);
const Qt::MouseButtons button = mouseEvent->button();
const QPoint pos = static_cast<QMouseEvent *>(ev)->pos();
const QRect rc(option.rect.right() - SESSION_ARROW_RECT_WIDTH, option.rect.top(),
SESSION_ARROW_RECT_WIDTH, SESSION_LINE_HEIGHT);
const QString sessionName = idx.data(Qt::DisplayRole).toString();
if (rc.contains(pos) || button == Qt::RightButton) {
if (m_activeExpandRect.contains(pos) || button == Qt::RightButton) {
// The expand/collapse "button".
if (m_expandedSessions.contains(sessionName))
m_expandedSessions.removeOne(sessionName);
@@ -421,23 +600,15 @@ public:
}
if (ev->type() == QEvent::MouseMove) {
emit model->layoutChanged({QPersistentModelIndex(idx)}); // Somewhat brutish.
//update(option.rect);
return false;
}
return false;
}
private:
const QColor hoverColor = themeColor(Theme::Welcome_HoverColor);
const QColor textColor = themeColor(Theme::Welcome_TextColor);
const QColor linkColor = themeColor(Theme::Welcome_LinkColor);
const QColor disabledLinkColor = themeColor(Theme::Welcome_DisabledLinkColor);
const QColor backgroundPrimaryColor = themeColor(Theme::Welcome_BackgroundPrimaryColor);
const QColor foregroundPrimaryColor = themeColor(Theme::Welcome_ForegroundPrimaryColor);
const QColor foregroundSecondaryColor = themeColor(Theme::Welcome_ForegroundSecondaryColor);
QStringList m_expandedSessions;
mutable QRect m_activeExpandRect;
mutable QRect m_activeSwitchToRect;
mutable QRect m_activeActionRects[3];
};
@@ -453,58 +624,89 @@ class ProjectDelegate : public BaseDelegate
public:
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &idx) const final
{
QRect rc = option.rect;
// visible on withIcon() Extra margin right of project item
// | |
// +-------+-------+ +------+-----+
// | | | |
//
// +------------+--------+--------+------+--------+-------------+------------+------------+
// | | | | | | (VPaddingXs)| | |
// | | | | | +-------------+ | |
// | | | | | |<projectName>| | |
// | | | | | +-------------+ | |
// |(HPaddingXs)|<number>|(HGapXs)|<icon>|(HGapXs)| (VGapXs) |(HPaddingXs)|(HPaddingXs)|
// | |(16x16) | | | +-------------+ | |
// | | | | | |<projectPath>| | |
// | | | | | +-------------+ | |
// | | | | | | (VPaddingXs)| | |
// +------------+--------+--------+------+--------+-------------+------------+------------+ --+
// | (VGapL) | +-- Gap between project items
// +--------------------------------------------------------------------------------------+ --+
const bool hovered = option.widget->isActiveWindow() && option.state & QStyle::State_MouseOver;
const QRect bgRect = rc.adjusted(0, 0, -ItemGap, -ItemGap);
painter->fillRect(rc, themeColor(Theme::Welcome_BackgroundSecondaryColor));
painter->fillRect(bgRect, themeColor(hovered ? Theme::Welcome_HoverColor
: Theme::Welcome_BackgroundPrimaryColor));
const bool hovered = option.widget->isActiveWindow()
&& option.state & QStyle::State_MouseOver;
const int x = rc.x();
const int y = rc.y();
const int firstBase = y + 18;
const int secondBase = firstBase + 19;
const QRect bgR = option.rect.adjusted(0, 0, -s(HPaddingXs), -itemSpacing());
static const QPixmap projectIcon =
pixmap("project", Theme::Welcome_ForegroundSecondaryColor);
painter->drawPixmap(x + 11, y + 6, projectIcon);
static const QPixmap icon = pixmap("project", Theme::Token_Text_Muted);
const QSize iconS = icon.deviceIndependentSize().toSize();
QString projectName = idx.data(Qt::DisplayRole).toString();
FilePath projectPath = FilePath::fromVariant(idx.data(ProjectModel::FilePathRole));
const int x = bgR.x();
const int numberX = x + s(HPaddingXs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXs);
const int iconWidth = iconS.width();
const int textX = withIcon() ? iconX + iconWidth + s(HGapXs) : iconX;
const int textWidth = bgR.width() - s(HPaddingXs) - textX;
painter->setPen(themeColor(Theme::Welcome_ForegroundSecondaryColor));
painter->setFont(sizedFont(10, option.widget));
const int y = bgR.y();
const int iconHeight = iconS.height();
const int iconY = y + (bgR.height() - iconHeight) / 2;
const int projectNameY = y + s(VPaddingXs);
const QRect projectNameR(textX, projectNameY, textWidth, projectNameTF.lineHeight());
const int projectPathY = projectNameY + projectNameR.height() + s(VGapXs);
const QRect projectPathR(textX, projectPathY, textWidth, projectPathTF.lineHeight());
if (idx.row() < 9)
painter->drawText(x + 3, firstBase, QString::number(idx.row() + 1));
QTC_CHECK(option.rect.bottom() == projectPathR.bottom() + s(VPaddingXs) + itemSpacing());
const int textSpace = rc.width() - TEXT_OFFSET_HORIZONTAL - ItemGap - 6;
painter->setPen(themeColor(Theme::Welcome_LinkColor));
painter->setFont(sizedFont(13, option.widget, hovered));
const QString projectNameElided =
painter->fontMetrics().elidedText(projectName, Qt::ElideRight, textSpace);
painter->drawText(x + TEXT_OFFSET_HORIZONTAL, firstBase, projectNameElided);
painter->setPen(themeColor(Theme::Welcome_ForegroundPrimaryColor));
painter->setFont(sizedFont(13, option.widget));
const QString displayPath =
projectPath.osType() == OsTypeWindows ? projectPath.displayName()
: projectPath.withTildeHomePath();
const QString displayPathElided =
painter->fontMetrics().elidedText(displayPath, Qt::ElideMiddle, textSpace);
painter->drawText(x + TEXT_OFFSET_HORIZONTAL, secondBase, displayPathElided);
{
drawBackgroundRect(painter, bgR, hovered);
}
if (idx.row() < 9) {
painter->setPen(shortcutNumberTF.color());
painter->setFont(shortcutNumberTF.font());
const QRect numberR(numberX, y, shortcutNumberWidth, bgR.height());
const QString numberString = QString::number(idx.row() + 1);
painter->drawText(numberR, shortcutNumberTF.drawTextFlags, numberString);
}
if (withIcon()) {
painter->drawPixmap(iconX, iconY, icon);
}
{
painter->setPen(projectNameTF.color());
painter->setFont(projectNameTF.font(hovered));
const QString projectName = idx.data(Qt::DisplayRole).toString();
const QString projectNameElided =
painter->fontMetrics().elidedText(projectName, Qt::ElideRight, textWidth);
painter->drawText(projectNameR, projectNameTF.drawTextFlags, projectNameElided);
}
{
painter->setPen(projectPathTF.color());
painter->setFont(projectPathTF.font());
const FilePath projectPath =
FilePath::fromVariant(idx.data(ProjectModel::FilePathRole));
const QString displayPath =
projectPath.osType() == OsTypeWindows ? projectPath.displayName()
: projectPath.withTildeHomePath();
const QString displayPathElided =
painter->fontMetrics().elidedText(displayPath, Qt::ElideMiddle, textWidth);
painter->drawText(projectPathR, projectPathTF.drawTextFlags, displayPathElided);
}
}
QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &idx) const final
QSize sizeHint([[maybe_unused]] const QStyleOptionViewItem &option,
[[maybe_unused]] const QModelIndex &idx) const override
{
QString projectName = idx.data(Qt::DisplayRole).toString();
QString projectPath = idx.data(ProjectModel::FilePathRole).toString();
QFontMetrics fm(sizedFont(13, option.widget));
int width = std::max(fm.horizontalAdvance(projectName),
fm.horizontalAdvance(projectPath)) + TEXT_OFFSET_HORIZONTAL;
return QSize(width, 47 + ItemGap);
return QSize(-1, itemHeight() + itemSpacing());
}
bool editorEvent(QEvent *ev, QAbstractItemModel *model,
@@ -541,6 +743,18 @@ public:
}
return false;
}
private:
static int itemHeight()
{
const int height =
s(VPaddingXs)
+ projectNameTF.lineHeight()
+ s(VGapXs)
+ projectPathTF.lineHeight()
+ s(VPaddingXs);
return height;
}
};
class TreeView : public QTreeView
@@ -559,10 +773,7 @@ public:
setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
setFocusPolicy(Qt::NoFocus);
QPalette pal;
pal.setColor(QPalette::Base, themeColor(Theme::Welcome_BackgroundSecondaryColor));
viewport()->setPalette(pal);
setBackgroundColor(viewport(), Theme::Token_Background_Default);
}
};
@@ -577,54 +788,63 @@ public:
if (!projectWelcomePage->m_projectModel)
projectWelcomePage->m_projectModel = new ProjectModel(this);
auto manageSessionsButton = new WelcomePageButton(this);
manageSessionsButton->setText(Tr::tr("Manage..."));
manageSessionsButton->setWithAccentColor(true);
manageSessionsButton->setOnClicked([] { SessionManager::showSessionManager(); });
using namespace Layouting;
auto sessionsLabel = new QLabel(this);
sessionsLabel->setText(Tr::tr("Sessions"));
auto sessions = new QWidget;
{
auto sessionsLabel = new Label(Tr::tr("Sessions"), Label::Primary);
auto manageSessionsButton = new Button(Tr::tr("Manage..."), Button::MediumSecondary);
auto sessionsList = new TreeView(this, "Sessions");
sessionsList->setModel(projectWelcomePage->m_sessionModel);
sessionsList->header()->setSectionHidden(1, true); // The "last modified" column.
sessionsList->setItemDelegate(&m_sessionDelegate);
sessionsList->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
QSizePolicy sessionsSp(QSizePolicy::Expanding, QSizePolicy::Expanding);
sessionsSp.setHorizontalStretch(3);
sessions->setSizePolicy(sessionsSp);
Column {
Row {
sessionsLabel,
st,
manageSessionsButton,
customMargin({HPaddingS, 0, sessionScrollBarGap, 0}),
},
sessionsList,
spacing(ExPaddingGapL),
customMargin({ExVPaddingGapXl, ExVPaddingGapXl, 0, 0}),
}.attachTo(sessions);
connect(manageSessionsButton, &Button::clicked,
this, &SessionManager::showSessionManager);
}
auto recentProjectsLabel = new QLabel(this);
recentProjectsLabel->setText(Tr::tr("Projects"));
auto projects = new QWidget;
{
auto projectsLabel = new Label(Tr::tr("Projects"), Label::Primary);
auto projectsList = new TreeView(this, "Recent Projects");
projectsList->setUniformRowHeights(true);
projectsList->setModel(projectWelcomePage->m_projectModel);
projectsList->setItemDelegate(&m_projectDelegate);
projectsList->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
QSizePolicy projectsSP(QSizePolicy::Expanding, QSizePolicy::Expanding);
projectsSP.setHorizontalStretch(5);
projects->setSizePolicy(projectsSP);
Column {
Row {
projectsLabel,
customMargin({HPaddingS, 0, 0, 0}),
},
projectsList,
spacing(ExPaddingGapL),
customMargin({ExVPaddingGapXl - sessionScrollBarGap, ExVPaddingGapXl, 0, 0}),
}.attachTo(projects);
}
auto sessionsList = new TreeView(this, "Sessions");
sessionsList->setModel(projectWelcomePage->m_sessionModel);
sessionsList->header()->setSectionHidden(1, true); // The "last modified" column.
sessionsList->setItemDelegate(&m_sessionDelegate);
sessionsList->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
auto projectsList = new TreeView(this, "Recent Projects");
projectsList->setUniformRowHeights(true);
projectsList->setModel(projectWelcomePage->m_projectModel);
projectsList->setItemDelegate(&m_projectDelegate);
projectsList->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
auto sessionHeader = panelBar(this);
auto hbox11 = new QHBoxLayout(sessionHeader);
hbox11->setContentsMargins(12, 0, 0, 0);
hbox11->addWidget(sessionsLabel);
hbox11->addStretch(1);
hbox11->addWidget(manageSessionsButton);
auto projectsHeader = panelBar(this);
auto hbox21 = new QHBoxLayout(projectsHeader);
hbox21->setContentsMargins(hbox11->contentsMargins());
hbox21->addWidget(recentProjectsLabel);
auto grid = new QGridLayout(this);
grid->setContentsMargins(0, 0, 0, ItemGap);
grid->setHorizontalSpacing(0);
grid->setVerticalSpacing(ItemGap);
grid->addWidget(panelBar(this), 0, 0);
grid->addWidget(sessionHeader, 0, 1);
grid->addWidget(sessionsList, 1, 1);
grid->addWidget(panelBar(this), 0, 2);
grid->setColumnStretch(1, 9);
grid->setColumnMinimumWidth(1, 200);
grid->addWidget(projectsHeader, 0, 3);
grid->addWidget(projectsList, 1, 3);
grid->setColumnStretch(3, 20);
Row {
sessions,
projects,
spacing(0),
noMargin(),
}.attachTo(this);
}
SessionDelegate m_sessionDelegate;

View File

@@ -250,7 +250,7 @@ static QPixmap fetchPixmapAndUpdatePixmapCache(const QString &url)
const int dpr = qApp->devicePixelRatio();
// boundedTo -> don't scale thumbnails up
const QSize scaledSize =
WelcomePageHelpers::GridItemImageSize.boundedTo(img.size()) * dpr;
WelcomePageHelpers::WelcomeThumbnailSize.boundedTo(img.size()) * dpr;
const QImage scaled = img.isNull() ? img
: img.scaled(scaledSize,
Qt::KeepAspectRatio,

View File

@@ -21,13 +21,13 @@
#include <utils/algorithm.h>
#include <utils/fileutils.h>
#include <utils/layoutbuilder.h>
#include <utils/pathchooser.h>
#include <utils/qtcassert.h>
#include <utils/stylehelper.h>
#include <utils/theme/theme.h>
#include <utils/winutils.h>
#include <QComboBox>
#include <QDesktopServices>
#include <QDialogButtonBox>
#include <QElapsedTimer>
@@ -249,8 +249,9 @@ protected:
painter->setFont(option.font);
painter->setCompositionMode(QPainter::CompositionMode_Difference);
painter->setPen(Qt::white);
painter->drawText(currentPixmapRect.translated(0, -WelcomePageHelpers::ItemGap),
exampleItem->videoLength, Qt::AlignBottom | Qt::AlignHCenter);
painter->drawText(
currentPixmapRect.translated(0, -StyleHelper::SpacingTokens::VPaddingXxs),
exampleItem->videoLength, Qt::AlignBottom | Qt::AlignHCenter);
painter->restore();
static const QPixmap playOverlay =
StyleHelper::dpiSpecificImageFile(":/qtsupport/images/icons/playoverlay.png");
@@ -274,29 +275,25 @@ public:
{
m_exampleDelegate.setShowExamples(isExamples);
auto searchBox = new SearchBox(this);
m_searcher = searchBox->m_lineEdit;
using namespace StyleHelper::SpacingTokens;
auto grid = new QGridLayout(this);
grid->setContentsMargins(0, 0, 0, WelcomePageHelpers::ItemGap);
grid->setHorizontalSpacing(0);
grid->setVerticalSpacing(WelcomePageHelpers::ItemGap);
using namespace Layouting;
Row titleRow {
customMargin({0, 0, ExVPaddingGapXl, 0}),
spacing(ExVPaddingGapXl),
};
auto searchBar = WelcomePageHelpers::panelBar(this);
auto hbox = new QHBoxLayout(searchBar);
hbox->setContentsMargins(0, 0, 0, 0);
m_searcher = new SearchBox;
if (m_isExamples) {
m_searcher->setPlaceholderText(Tr::tr("Search in Examples..."));
auto exampleSetSelector = new QComboBox(this);
QPalette pal = exampleSetSelector->palette();
// for macOS dark mode
pal.setColor(QPalette::Text, Utils::creatorTheme()->color(Theme::Welcome_TextColor));
exampleSetSelector->setPalette(pal);
exampleSetSelector->setMinimumWidth(Core::WelcomePageHelpers::GridItemWidth);
exampleSetSelector->setMaximumWidth(Core::WelcomePageHelpers::GridItemWidth);
auto exampleSetSelector = new ComboBox;
exampleSetSelector->setSizeAdjustPolicy(QComboBox::AdjustToContents);
exampleSetSelector->setMinimumWidth(ListItemDelegate::itemSize().width()
- ExVPaddingGapXl);
exampleSetSelector->setModel(s_exampleSetModel);
exampleSetSelector->setCurrentIndex(s_exampleSetModel->selectedExampleSet());
titleRow.addItem(exampleSetSelector);
connect(exampleSetSelector,
&QComboBox::activated,
s_exampleSetModel,
@@ -305,23 +302,23 @@ public:
&ExampleSetModel::selectedExampleSetChanged,
exampleSetSelector,
&QComboBox::setCurrentIndex);
hbox->setSpacing(Core::WelcomePageHelpers::HSpacing);
hbox->addWidget(exampleSetSelector);
} else {
m_searcher->setPlaceholderText(Tr::tr("Search in Tutorials..."));
}
hbox->addWidget(searchBox);
grid->addWidget(WelcomePageHelpers::panelBar(this), 0, 0);
grid->addWidget(searchBar, 0, 1);
grid->addWidget(WelcomePageHelpers::panelBar(this), 0, 2);
titleRow.addItem(m_searcher);
auto gridView = new SectionedGridView(this);
auto gridView = new SectionedGridView;
m_viewController
= new ExamplesViewController(s_exampleSetModel, gridView, m_searcher, isExamples, this);
gridView->setItemDelegate(&m_exampleDelegate);
grid->addWidget(gridView, 1, 1, 1, 2);
Column {
titleRow,
gridView,
spacing(ExVPaddingGapXl),
customMargin({ExVPaddingGapXl, ExVPaddingGapXl, 0, 0}),
}.attachTo(this);
connect(&m_exampleDelegate, &ExampleDelegate::tagClicked,
this, &ExamplesPageWidget::onTagClicked);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 148 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 B

After

Width:  |  Height:  |  Size: 175 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 B

After

Width:  |  Height:  |  Size: 225 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 118 B

After

Width:  |  Height:  |  Size: 192 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 161 B

After

Width:  |  Height:  |  Size: 255 B

View File

@@ -8,8 +8,8 @@
<file>images/project@2x.png</file>
<file>images/session.png</file>
<file>images/session@2x.png</file>
<file>images/expandarrow.png</file>
<file>images/expandarrow@2x.png</file>
<file>images/border.png</file>
<file>images/link.png</file>
<file>images/link@2x.png</file>
</qresource>
</RCC>

View File

@@ -22,12 +22,14 @@
#include <utils/fileutils.h>
#include <utils/hostosinfo.h>
#include <utils/icon.h>
#include <utils/layoutbuilder.h>
#include <utils/qtcassert.h>
#include <utils/styledbar.h>
#include <utils/stylehelper.h>
#include <utils/theme/theme.h>
#include <utils/treemodel.h>
#include <QButtonGroup>
#include <QDesktopServices>
#include <QGuiApplication>
#include <QLabel>
@@ -42,31 +44,15 @@ using namespace Core;
using namespace Core::WelcomePageHelpers;
using namespace ExtensionSystem;
using namespace Utils;
using namespace StyleHelper::SpacingTokens;
namespace Welcome {
namespace Internal {
class TopArea;
class SideArea;
class BottomArea;
const char currentPageSettingsKeyC[] = "Welcome2Tab";
constexpr int buttonSpacing = 16;
static QColor themeColor(Theme::Color role)
{
return Utils::creatorTheme()->color(role);
}
static void addWeakVerticalSpacerToLayout(QVBoxLayout *layout, int maximumSize)
{
auto weakSpacer = new QWidget;
weakSpacer->setMaximumHeight(maximumSize);
weakSpacer->setMinimumHeight(buttonSpacing);
weakSpacer->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Maximum);
layout->addWidget(weakSpacer);
layout->setStretchFactor(weakSpacer, 1);
}
class WelcomeMode : public IMode
{
@@ -85,9 +71,9 @@ private:
QStackedWidget *m_pageStack;
TopArea *m_topArea;
SideArea *m_sideArea;
BottomArea *m_bottomArea;
QList<IWelcomePage *> m_pluginList;
QList<WelcomePageButton *> m_pageButtons;
QList<QPushButton *> m_pageButtons;
QButtonGroup *m_buttonGroup;
Id m_activePage;
Id m_defaultPage;
};
@@ -140,55 +126,43 @@ public:
TopArea(QWidget *parent = nullptr)
: QWidget(parent)
{
setAutoFillBackground(true);
setMinimumHeight(11); // For compact state
setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
setPalette(themeColor(Theme::Welcome_BackgroundPrimaryColor));
setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Fixed);
m_title = new QWidget;
auto hbox = new QHBoxLayout(m_title);
hbox->setSpacing(0);
hbox->setContentsMargins(HSpacing - 5, 2, 0, 2);
constexpr TextFormat welcomeTF {Theme::Token_Text_Default, StyleHelper::UiElementH2};
auto ideIconLabel = new QLabel;
{
auto ideIconLabel = new QLabel;
const QPixmap logo = Core::Icons::QTCREATORLOGO_BIG.pixmap();
ideIconLabel->setPixmap(logo.scaled(logo.size() * 0.6, Qt::IgnoreAspectRatio,
Qt::SmoothTransformation));
hbox->addWidget(ideIconLabel, 0);
hbox->addSpacing(16);
const QFont welcomeFont = StyleHelper::uiFont(StyleHelper::UiElementH1);
auto welcomeLabel = new QLabel("Welcome to");
welcomeLabel->setFont(welcomeFont);
hbox->addWidget(welcomeLabel, 0);
hbox->addSpacing(8);
auto ideNameLabel = new QLabel(QGuiApplication::applicationDisplayName());
ideNameLabel->setFont(welcomeFont);
ideNameLabel->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
QPalette pal = palette();
pal.setColor(QPalette::WindowText, themeColor(Theme::Welcome_AccentColor));
ideNameLabel->setPalette(pal);
hbox->addWidget(ideNameLabel, 1);
const int size = logo.width();
const QRect cropR = size == 128 ? QRect(9, 22, 110, 84) : QRect(17, 45, 222, 166);
const QPixmap croppedLogo = logo.copy(cropR);
const int lineHeight = welcomeTF.lineHeight();
const QPixmap scaledCroppedLogo =
croppedLogo.scaledToHeight((lineHeight - 12) * devicePixelRatioF(),
Qt::SmoothTransformation);
ideIconLabel->setPixmap(scaledCroppedLogo);
ideIconLabel->setFixedHeight(lineHeight);
}
auto mainLayout = new QHBoxLayout(this);
mainLayout->setContentsMargins(0, 0, 0, 0);
mainLayout->addWidget(m_title);
}
auto welcomeLabel = new QLabel(Tr::tr("Welcome to %1")
.arg(QGuiApplication::applicationDisplayName()));
{
welcomeLabel->setFont(welcomeTF.font());
QPalette pal = palette();
pal.setColor(QPalette::WindowText, welcomeTF.color());
welcomeLabel->setPalette(pal);
}
void setCompact(bool compact)
{
m_title->setVisible(!compact);
}
using namespace Layouting;
private:
QWidget *m_title;
Row {
ideIconLabel,
welcomeLabel,
st,
spacing(ExVPaddingGapXl),
customMargin({HPaddingM, VPaddingM, HPaddingM, VPaddingM}),
}.attachTo(this);
}
};
class SideArea : public QScrollArea
@@ -201,114 +175,103 @@ public:
{
setWidgetResizable(true);
setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
setFrameShape(QFrame::NoFrame);
setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Ignored);
setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Ignored);
auto mainWidget = new QWidget(this);
mainWidget->setAutoFillBackground(true);
mainWidget->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
mainWidget->setPalette(themeColor(Theme::Welcome_BackgroundPrimaryColor));
using namespace Layouting;
auto vbox = new QVBoxLayout(mainWidget);
vbox->setSpacing(0);
vbox->setContentsMargins(HSpacing, 0, HSpacing, 0);
Column mainLayout {
spacing(0),
customMargin({ExVPaddingGapXl, 0, ExVPaddingGapXl, 0}),
};
m_essentials = new QWidget;
Column essentials {
spacing(0),
noMargin(),
};
{
auto projectVBox = new QVBoxLayout;
projectVBox->setSpacing(buttonSpacing);
auto newButton = new WelcomePageButton(mainWidget);
newButton->setText(Tr::tr("Create Project..."));
newButton->setWithAccentColor(true);
newButton->setOnClicked([] {
QAction *openAction = ActionManager::command(Core::Constants::NEW)->action();
openAction->trigger();
});
auto newButton = new Button(Tr::tr("Create Project..."), Button::MediumPrimary);
auto openButton = new Button(Tr::tr("Open Project..."), Button::MediumSecondary);
auto openButton = new WelcomePageButton(mainWidget);
openButton->setText(Tr::tr("Open Project..."));
openButton->setWithAccentColor(true);
openButton->setOnClicked([] {
Column projectButtons {
newButton,
openButton,
spacing(ExPaddingGapL),
customMargin({0, ExVPaddingGapXl, 0, ExVPaddingGapXl}),
};
essentials.addItem(projectButtons);
connect(openButton, &Button::clicked, this, [] {
QAction *openAction = ActionManager::command(Core::Constants::OPEN)->action();
openAction->trigger();
});
projectVBox->addWidget(newButton);
projectVBox->addWidget(openButton);
vbox->addItem(projectVBox);
}
addWeakVerticalSpacerToLayout(vbox, 34);
{
auto newVBox = new QVBoxLayout;
newVBox->setSpacing(buttonSpacing / 3);
vbox->addItem(newVBox);
auto newLabel = new QLabel(Tr::tr("New to Qt?"), mainWidget);
newLabel->setAlignment(Qt::AlignHCenter);
newVBox->addWidget(newLabel);
auto getStartedButton = new WelcomePageButton(mainWidget);
getStartedButton->setText(Tr::tr("Get Started"));
getStartedButton->setOnClicked([] {
QDesktopServices::openUrl(
QString("qthelp://org.qt-project.qtcreator/doc/creator-getting-started.html"));
connect(newButton, &Button::clicked, this, [] {
QAction *openAction = ActionManager::command(Core::Constants::NEW)->action();
openAction->trigger();
});
newVBox->addWidget(getStartedButton);
}
addWeakVerticalSpacerToLayout(vbox, 56);
{
auto l = m_pluginButtons = new QVBoxLayout;
l->setSpacing(buttonSpacing);
vbox->addItem(l);
l->setSpacing(VGapL);
l->setContentsMargins({});
essentials.addItem(l);
}
vbox->addStretch(1);
essentials.attachTo(m_essentials);
mainLayout.addItem(m_essentials);
mainLayout.addItem(st);
{
auto label = new Label(Tr::tr("Explore more"), Label::Secondary);
label->setContentsMargins(HPaddingXxs, 0, 0, 0); // Is indented in Figma design
Column linksLayout {
label,
spacing(VGapS),
customMargin({0, VGapL, 0, ExVPaddingGapXl}),
};
const struct {
const QString label;
const QString url;
} links [] =
{
{ Tr::tr("Get Started"), "qthelp://org.qt-project.qtcreator/doc/creator-getting-started.html" },
{ Tr::tr("Get Qt"), "https://www.qt.io/download" },
{ Tr::tr("Qt Account"), "https://account.qt.io" },
{ Tr::tr("Online Community"), "https://forum.qt.io" },
{ Tr::tr("Blogs"), "https://planet.qt.io" },
{ Tr::tr("User Guide"), "qthelp://org.qt-project.qtcreator/doc/index.html" },
};
for (auto &link : links) {
auto button = new Button(link.label, Button::SmallLink, this);
connect(button, &Button::clicked, this, [link]{
QDesktopServices::openUrl(link.url);});
button->setToolTip(link.url);
static const QPixmap icon = Icon({{":/welcome/images/link.png",
Theme::Token_Accent_Default}},
Icon::Tint).pixmap();
button->setPixmap(icon);
linksLayout.addItem(button);
}
m_links = new QWidget;
linksLayout.attachTo(m_links);
mainLayout.addItem(m_links);
}
QWidget *mainWidget = mainLayout.emerge();
setWidget(mainWidget);
}
QVBoxLayout *m_pluginButtons = nullptr;
};
class BottomArea : public QWidget
{
Q_OBJECT
public:
BottomArea(QWidget *parent = nullptr)
: QWidget(parent)
{
setAutoFillBackground(true);
setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
setPalette(themeColor(Theme::Welcome_BackgroundPrimaryColor));
auto hbox = new QHBoxLayout(this);
hbox->setSpacing(0);
hbox->setContentsMargins(0, 2 * ItemGap, HSpacing, 2 * ItemGap);
const QList<QPair<QString, QString> > links {
{ Tr::tr("Get Qt"), "https://www.qt.io/download" },
{ Tr::tr("Qt Account"), "https://account.qt.io" },
{ Tr::tr("Online Community"), "https://forum.qt.io" },
{ Tr::tr("Blogs"), "https://planet.qt.io" },
{ Tr::tr("User Guide"), "qthelp://org.qt-project.qtcreator/doc/index.html" },
};
for (const QPair<QString, QString> &link : links) {
auto button = new WelcomePageButton(this);
button->setSize(WelcomePageButton::SizeSmall);
button->setText(link.first);
button->setOnClicked([link]{ QDesktopServices::openUrl(link.second); });
button->setWithAccentColor(true);
button->setMaximumWidth(220);
button->setToolTip(link.second);
if (hbox->count() > 0)
hbox->addStretch(1);
hbox->addWidget(button, 20);
}
}
QWidget *m_essentials = nullptr;
QWidget *m_links = nullptr;
};
WelcomeMode::WelcomeMode()
@@ -327,41 +290,51 @@ WelcomeMode::WelcomeMode()
setContextHelp("Qt Creator Manual");
setContext(Context(Constants::C_WELCOME_MODE));
QPalette palette = creatorTheme()->palette();
palette.setColor(QPalette::Window, themeColor(Theme::Welcome_BackgroundPrimaryColor));
m_modeWidget = new ResizeSignallingWidget;
m_modeWidget->setPalette(palette);
setBackgroundColor(m_modeWidget, Theme::Token_Background_Default);
connect(m_modeWidget, &ResizeSignallingWidget::resized, this,
[this](const QSize &size, const QSize &) {
const bool hideSideArea = size.width() <= 750;
const bool hideBottomArea = size.width() <= 850;
const bool compactVertically = size.height() <= 530;
m_sideArea->setVisible(!hideSideArea);
m_bottomArea->setVisible(!(hideBottomArea || compactVertically));
m_topArea->setCompact(compactVertically);
const QSize essentialsS = m_sideArea->m_essentials->size();
const QSize linksS = m_sideArea->m_links->size();
const QSize sideAreaS = m_sideArea->size();
const QSize topAreaS = m_topArea->size();
const QSize mainWindowS = ICore::mainWindow()->size();
const bool showSideArea = sideAreaS.width() < size.width() / 4;
const bool showTopArea = topAreaS.height() < mainWindowS.height() / 7.75;
const bool showLinks =
linksS.height() + essentialsS.height() < sideAreaS.height() && showTopArea;
m_sideArea->m_links->setVisible(showLinks);
m_sideArea->setVisible(showSideArea);
m_topArea->setVisible(showTopArea);
});
m_sideArea = new SideArea(m_modeWidget);
m_buttonGroup = new QButtonGroup(m_modeWidget);
m_buttonGroup->setExclusive(true);
m_pageStack = new QStackedWidget(m_modeWidget);
palette.setColor(QPalette::Window, themeColor(Theme::Welcome_BackgroundSecondaryColor));
m_pageStack->setPalette(palette);
m_pageStack->setObjectName("WelcomeScreenStackedWidget");
m_pageStack->setAutoFillBackground(true);
m_topArea = new TopArea;
m_bottomArea = new BottomArea;
auto layout = new QGridLayout(m_modeWidget);
layout->addWidget(new StyledBar(m_modeWidget), 0, 0, 1, 2);
layout->addWidget(m_topArea, 1, 0, 1, 2);
layout->addWidget(m_sideArea, 2, 0, 2, 1);
layout->addWidget(m_pageStack, 2, 1, 1, 1);
layout->setColumnStretch(1, 10);
layout->addWidget(m_bottomArea, 3, 1, 1, 1);
layout->setContentsMargins(0, 0, 0, 0);
layout->setSpacing(0);
using namespace Layouting;
Column {
new StyledBar,
m_topArea,
createRule(Qt::Horizontal),
Row {
m_sideArea,
createRule(Qt::Vertical),
m_pageStack,
},
noMargin(),
spacing(0),
}.attachTo(m_modeWidget);
setWidget(m_modeWidget);
}
@@ -402,11 +375,11 @@ void WelcomeMode::addPage(IWelcomePage *page)
if (m_pluginList.at(idx)->priority() >= pagePriority)
break;
}
auto pageButton = new WelcomePageButton(m_sideArea->widget());
auto pageButton = new Button(page->title(), Button::SmallList, m_sideArea->widget());
auto pageId = page->id();
pageButton->setText(page->title());
pageButton->setActiveChecker([this, pageId] { return m_activePage == pageId; });
m_buttonGroup->addButton(pageButton);
m_pluginList.insert(idx, page);
m_pageButtons.insert(idx, pageButton);
@@ -417,6 +390,7 @@ void WelcomeMode::addPage(IWelcomePage *page)
m_pageStack->insertWidget(idx, stackPage);
connect(page, &QObject::destroyed, this, [this, page, stackPage, pageButton] {
m_buttonGroup->removeButton(pageButton);
m_pluginList.removeOne(page);
m_pageButtons.removeOne(pageButton);
delete pageButton;
@@ -426,13 +400,13 @@ void WelcomeMode::addPage(IWelcomePage *page)
auto onClicked = [this, pageId, stackPage] {
m_activePage = pageId;
m_pageStack->setCurrentWidget(stackPage);
for (WelcomePageButton *pageButton : std::as_const(m_pageButtons))
pageButton->recheckActive();
};
pageButton->setOnClicked(onClicked);
if (pageId == m_activePage)
connect(pageButton, &Button::clicked, this, onClicked);
if (pageId == m_activePage) {
onClicked();
pageButton->setChecked(true);
}
}
} // namespace Internal

View File

@@ -664,6 +664,14 @@
width="100%"
height="100%"
transform="matrix(1.5,0,0,1.5,0,-242)" />
<use
x="0"
y="0"
xlink:href="#backgroundRect"
id="backgroundRect_18"
width="100%"
height="100%"
transform="matrix(1.125,0,0,1.125,0,-128.5)" />
<use
x="0"
y="0"
@@ -7022,51 +7030,78 @@
style="fill:none;stroke:#000000;stroke-width:1.42;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
transform="translate(-202,374)"
transform="translate(-209,274)"
id="src/plugins/welcome/images/session">
<rect
id="rect4886-1-1"
height="16"
width="16"
y="210"
x="250"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1" />
<use
x="0"
y="0"
xlink:href="#backgroundRect_24"
id="use9"
transform="translate(233,-210)" />
<path
id="path4942-1"
d="m 252,212 v 12 h 12 v -12 z m 4,10 v -8 l 5,3.999 z"
inkscape:connector-curvature="0"
style="fill:#000000;fill-opacity:1" />
id="path8101"
style="fill:none;stroke:#000000;stroke-width:2;stroke-linejoin:round"
d="m 219,210 6,4 -6,4 z m -7,-5 h 18 v 18 h -18 z" />
</g>
<g
transform="translate(-86,374)"
id="src/plugins/welcome/images/expandarrow">
<rect
id="rect4961-9"
height="16"
width="16"
y="210"
x="150"
style="fill:#ffffff;fill-opacity:1" />
<polygon
id="polygon4959-0"
points="162,215 158,220 154,215 "
style="fill:#000000;fill-opacity:1"
transform="translate(0,1)" />
</g>
<g
transform="translate(-220,374)"
transform="translate(19,478)"
id="src/plugins/welcome/images/project">
<rect
id="rect4950-8"
height="16"
width="16"
y="210"
x="300"
style="fill:#ffffff;fill-opacity:1" />
<polygon
id="polygon4948-6"
points="308,215 314,215 314,223 302,223 302,213 306,213 "
style="fill:#000000;fill-opacity:1" />
<use
x="0"
y="0"
xlink:href="#backgroundRect_24"
id="use9-5"
transform="translate(30,-414)" />
<path
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round"
d="m 16,3 c 1,0 2,1 2,2 0,0 0,1 1,1 h 6 c 1,0 2,1 2,2 v 7 c 0,1 -1,2 -2,2 H 11 C 10,17 9,16 9,15 V 5 C 9,4 10,3 11,3 Z"
id="path2761-3"
sodipodi:nodetypes="cscccccccccc" />
</g>
<g
transform="translate(44,478)"
id="src/plugins/welcome/images/link">
<use
x="0"
y="0"
xlink:href="#backgroundRect_24"
id="use14"
transform="translate(30,-414)"
width="100%"
height="100%" />
<path
id="path9"
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round"
d="m 22.5,5.5 -10,10 M 16,5 h 7 v 7" />
</g>
<g
transform="translate(-81,276)"
id="src/plugins/coreplugin/images/expandarrow">
<use
x="0"
y="0"
xlink:href="#backgroundRect"
id="use15-0"
transform="translate(172,-228)" />
<path
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
d="m 159,214.5 5,5 5,-5"
id="path2687"
sodipodi:nodetypes="ccc" />
</g>
<g
transform="translate(86,478)"
id="src/plugins/coreplugin/images/search">
<use
x="0"
y="0"
xlink:href="#backgroundRect"
id="use15"
transform="translate(22,-430)" />
<path
id="path10"
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round"
d="m 17,17 3.5,3.5 m -2.25,-7 A 4.75,4.75 0 0 1 13.5,18.25 4.75,4.75 0 0 1 8.75,13.5 4.75,4.75 0 0 1 13.5,8.75 4.75,4.75 0 0 1 18.25,13.5 Z" />
</g>
<g
id="src/libs/utils/images/member"

Before

Width:  |  Height:  |  Size: 373 KiB

After

Width:  |  Height:  |  Size: 374 KiB

View File

@@ -25,10 +25,14 @@ int main(int argc, char *argv[])
{ StyleHelper::UiElementH5, "H5" },
{ StyleHelper::UiElementH6, "H6" },
{ StyleHelper::UiElementH6Capital, "H6 CAPITAL" },
{ StyleHelper::UiElementBody1, "Body-01" },
{ StyleHelper::UiElementBody2, "Body-02" },
{ StyleHelper::UiElementButtonMedium, "Button Medium" },
{ StyleHelper::UiElementButtonSmall, "Button Small" },
{ StyleHelper::UiElementCaptionStrong, "Caption strong" },
{ StyleHelper::UiElementCaption, "Caption" },
{ StyleHelper::UIElementIconStandard, "Icon Standard" },
{ StyleHelper::UIElementIconActive, "Icon Active" },
{ StyleHelper::UiElementIconStandard, "Icon Standard" },
{ StyleHelper::UiElementIconActive, "Icon Active" },
};
static const QString textSample("AaBbCcXxYyZz123");