feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Welcome: Design update round #2

Browse Source 
User feedback was gathered and in part implemented in form of a design
update. Smaller fonts, icons and gaps in the projects/sessions screen
and in the examples tiles.

Change-Id: I69d0d9ae21ba855feceeb77d620aa5b556377808
Reviewed-by: Cristian Adam <cristian.adam@qt.io>
This commit is contained in:
Alessandro Portale
2024-03-19 15:16:00 +01:00
parent 87ca7882c1
commit 1b408947b0
7 changed files with 93 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/plugins/coreplugin/welcomepagehelper.cpp
View File

@@ -752,8 +752,8 @@ bool ListModelFilter::leaveFilterAcceptsRowBeforeFiltering(const ListItem *, boo
return false;
}
constexpr TextFormat titleTF {Theme::Token_Text_Default, StyleHelper::UiElementIconActive};
constexpr TextFormat descriptionTF {titleTF.themeColor, StyleHelper::UiElementCaption};
constexpr TextFormat titleTF {Theme::Token_Text_Default, StyleHelper::UiElementH6};
constexpr TextFormat descriptionTF {titleTF.themeColor, StyleHelper::UiElementCaptionStrong};
constexpr TextFormat tagsLabelTF {Theme::Token_Text_Muted, StyleHelper::UiElementCaptionStrong};
constexpr TextFormat tagsTF {Theme::Token_Text_Accent, tagsLabelTF.uiElement};

74
src/plugins/projectexplorer/projectwelcomepage.cpp
View File

@@ -47,10 +47,11 @@ const char PROJECT_BASE_ID[] = "Welcome.OpenRecentProject";
namespace ProjectExplorer {
namespace Internal {
constexpr TextFormat projectNameTF {Theme::Token_Text_Accent, 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 projectNameTF {Theme::Token_Text_Accent, StyleHelper::UiElementH6};
constexpr TextFormat projectPathTF {Theme::Token_Text_Muted, StyleHelper::UiElementCaptionStrong};
constexpr TextFormat sessionNameTF = {projectNameTF.themeColor, projectNameTF.uiElement,
Qt::AlignVCenter | Qt::TextDontClip};
constexpr TextFormat sessionProjectNameTF {Theme::Token_Text_Default, projectNameTF.uiElement};
constexpr TextFormat shortcutNumberTF {Theme::Token_Text_Default,
StyleHelper::UiElementCaptionStrong,
Qt::AlignCenter | Qt::TextDontClip};
@@ -317,34 +318,34 @@ public:
{
// 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
// |(HPaddingXs)|<number>|(HGapXxs)| <icon> |(HGapXxs)|<sessionName>|(HGapXs)|<arrow>| | | +-- Header
// | |(16x16) | +------------+ +-------------+ | | | | |
// | | | |(VPaddingXs)| |(VPaddingXs) | | | | | |
// |------------+--------+--------+------------+--------+-------------+--------+-------+ | | --+
// | +-- | (VPaddingXs) | | | |
// |------------+--------+---------+------------+---------+-------------+--------+-------+ | | --+
// | +-- | (VPaddingXxs) | | | |
// | | +------------------------------+(HPaddingXs)| | |
// | | | <projectName> | | | |
// | | +------------------------------+ | | |
// | Per project in session --+ | (EXSPaddingGapS) | |(sessionScrollBarGap)| |
// | Per project in session --+ | (ExPaddingGapS) | |(sessionScrollBarGap)| |
// | | +------------------------------+ | | |
// | | | <projectPath> | | | |
// | | +------------------------------+ | | +-- Expansion
// | +-- | (VPaddingXs) | | | |
// +----------------------------------------------+------------------------------------+------------+ | |
// | +-- | (VPaddingXxs) | | | |
// +------------------------------------------------------+------------------------------+------------+ | |
// | (VPaddingXs) | | |
// +----------------------------------------+--------------+----------------------------------------+ | |
// +-----------------------------------------+--------------+-----------------------------------------+ | |
// +-- | <cloneButton>|<renameButton>|<deleteButton> | | |
// | +----------------------------------------+--------------+----------------------------------------+ | |
// | +-----------------------------------------+--------------+-----------------------------------------+ | |
// | | (VPaddingXs) | | |
// | +------------------------------------------------------------------------------------------------+---------------------+ --+
// | +--------------------------------------------------------------------------------------------------+---------------------+ --+
// | | (VGapL) | +-- Gap between session items
// | +----------------------------------------------------------------------------------------------------------------------+ --+
// | +------------------------------------------------------------------------------------------------------------------------+ --+
// |
// \ session action "buttons" and dividers
// +-----------------------------------------------+--------+---------+--------+
@@ -380,11 +381,11 @@ public:
const int y = bgR.y();
const int numberX = x + s(HPaddingXs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXxs);
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 textX = withIcon() ? iconX + iconS.width() + s(HGapXxs) : iconX;
const int iconY = y + (hdR.height() - iconS.height()) / 2;
const int arrowY = y + (hdR.height() - arrowS.height()) / 2;
@@ -419,8 +420,7 @@ public:
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 QRect switchR(x, y, hdR.width() - arrowHoverR.width(), arrowHoverR.height());
const bool switchActive = switchR.contains(mousePos);
painter->setPen(sessionNameTF.color());
painter->setFont(sessionNameTF.font(switchActive));
@@ -432,7 +432,7 @@ public:
m_activeSwitchToRect = switchR;
}
if (arrowVisible) {
if (arrowHoverR.adjusted(0, 0, 0, s(VGapL)).contains(mousePos)) {
if (arrowHoverR.adjusted(0, 0, 0, expanded ? 0 : s(VGapL)).contains(mousePos)) {
m_activeExpandRect = arrowHoverR;
} else {
painter->save();
@@ -447,9 +447,9 @@ public:
int yy = hdR.bottom();
if (expanded) {
const QFont projectNameFont = sessionProjetNameTF.font();
const QFont projectNameFont = sessionProjectNameTF.font();
const QFontMetrics projectNameFm(projectNameFont);
const int projectNameLineHeight = sessionProjetNameTF.lineHeight();
const int projectNameLineHeight = sessionProjectNameTF.lineHeight();
const QFont projectPathFont = projectPathTF.font();
const QFontMetrics projectPathFm(projectPathFont);
const int projectPathLineHeight = projectPathTF.lineHeight();
@@ -457,15 +457,15 @@ public:
const FilePaths projects = ProjectManager::projectsForSessionName(sessionName);
for (const FilePath &projectPath : projects) {
yy += s(VPaddingXs);
yy += s(VPaddingXxs);
{
painter->setFont(projectNameFont);
painter->setPen(sessionProjetNameTF.color());
painter->setPen(sessionProjectNameTF.color());
const QRect projectNameR(textX, yy, textWidth, projectNameLineHeight);
const QString projectNameElided =
projectNameFm.elidedText(projectPath.completeBaseName(), Qt::ElideMiddle,
textWidth);
painter->drawText(projectNameR, sessionProjetNameTF.drawTextFlags,
painter->drawText(projectNameR, sessionProjectNameTF.drawTextFlags,
projectNameElided);
yy += projectNameLineHeight;
yy += s(ExPaddingGapS);
@@ -483,7 +483,7 @@ public:
projectPathElided);
yy += projectPathLineHeight;
}
yy += s(VPaddingXs);
yy += s(VPaddingXxs);
}
yy += s(VGapXs);
@@ -551,11 +551,11 @@ public:
const QString sessionName = idx.data(Qt::DisplayRole).toString();
const FilePaths projects = ProjectManager::projectsForSessionName(sessionName);
const int projectEntryHeight =
s(VPaddingXs)
s(VPaddingXxs)
+ projectNameTF.lineHeight()
+ s(ExPaddingGapS)
+ projectPathTF.lineHeight()
+ s(VPaddingXs);
+ s(VPaddingXxs);
h += projects.size() * projectEntryHeight
+ s(VGapXs)
+ actionButtonHeight()
@@ -622,24 +622,24 @@ class ProjectDelegate : public BaseDelegate
public:
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &idx) const final
{
// visible on withIcon() Extra margin right of project item
// visible on with Icon() Extra margin right of project item
// | |
// +-------+-------+ +------+-----+
// +--------+-------+ +------+-----+
// | | | |
//
// +------------+--------+--------+------+--------+-------------+------------+------------+
// +------------+--------+---------+------+---------+-------------+------------+------------+
// | | | | | | (VPaddingXs)| | |
// | | | | | +-------------+ | |
// | | | | | |<projectName>| | |
// | | | | | +-------------+ | |
// |(HPaddingXs)|<number>|(HGapXs)|<icon>|(HGapXs)| (VGapXs) |(HPaddingXs)|(HPaddingXs)|
// |(HPaddingXs)|<number>|(HGapXxs)|<icon>|(HGapXxs)| (VGapXs) |(HPaddingXs)|(HPaddingXs)|
// | |(16x16) | | | +-------------+ | |
// | | | | | |<projectPath>| | |
// | | | | | +-------------+ | |
// | | | | | | (VPaddingXs)| | |
// +------------+--------+--------+------+--------+-------------+------------+------------+ --+
// +------------+--------+---------+------+---------+-------------+------------+------------+ --+
// | (VGapL) | +-- Gap between project items
// +--------------------------------------------------------------------------------------+ --+
// +----------------------------------------------------------------------------------------+ --+
const bool hovered = option.widget->isActiveWindow()
&& option.state & QStyle::State_MouseOver;
@@ -651,9 +651,9 @@ public:
const int x = bgR.x();
const int numberX = x + s(HPaddingXs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXxs);
const int iconWidth = iconS.width();
const int textX = withIcon() ? iconX + iconWidth + s(HGapXs) : iconX;
const int textX = withIcon() ? iconX + iconWidth + s(HGapXxs) : iconX;
const int textWidth = bgR.width() - s(HPaddingXs) - textX;
const int y = bgR.y();

BIN
src/plugins/welcome/images/project.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 175 B

After

Width:  |  Height:  |  Size: 172 B

BIN
src/plugins/welcome/images/project@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 225 B

After

Width:  |  Height:  |  Size: 212 B

BIN
src/plugins/welcome/images/session.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 192 B

After

Width:  |  Height:  |  Size: 165 B

BIN
src/plugins/welcome/images/session@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 187 B

42
src/tools/icons/qtcreatoricons.svg
View File

@@ -7030,36 +7030,42 @@
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(-209,274)"
transform="translate(-210,274)"
id="src/plugins/welcome/images/session">
<use
x="0"
y="0"
xlink:href="#backgroundRect_24"
xlink:href="#backgroundRect"
id="use9"
transform="translate(233,-210)" />
transform="translate(226,-226)"
width="100%"
height="100%" />
<path
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" />
d="m 216,215 5,3 -5,3 z m -4,-3 h 12 v 12 h -12 z"
sodipodi:nodetypes="ccccccccc" />
</g>
<g
transform="translate(19,478)"
transform="translate(8,478)"
id="src/plugins/welcome/images/project">
<use
x="0"
y="0"
xlink:href="#backgroundRect_24"
xlink:href="#backgroundRect"
id="use9-5"
transform="translate(30,-414)" />
transform="translate(25,-430)"
width="100%"
height="100%" />
<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" />
d="m 13,9 h 2.5 c 1,0 1,2 2,2 H 21 c 1,0 2,1 2,2 v 4 c 0,1 -1,2 -2,2 h -8 c -1,0 -2,-1 -2,-2 v -6 c 0,-1 1,-2 2,-2 z"
stroke-width="2"
id="path4726"
sodipodi:nodetypes="sccssssssss"
style="fill:none;stroke:#000000;stroke-opacity:1" />
</g>
<g
transform="translate(44,478)"
transform="translate(28,478)"
id="src/plugins/welcome/images/link">
<use
x="0"
@@ -7075,14 +7081,16 @@
d="m 22.5,5.5 -10,10 M 16,5 h 7 v 7" />
</g>
<g
transform="translate(-81,276)"
transform="translate(-97,276)"
id="src/plugins/coreplugin/images/expandarrow">
<use
x="0"
y="0"
xlink:href="#backgroundRect"
id="use15-0"
transform="translate(172,-228)" />
transform="translate(172,-228)"
width="100%"
height="100%" />
<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"
@@ -7090,14 +7098,16 @@
sodipodi:nodetypes="ccc" />
</g>
<g
transform="translate(86,478)"
transform="translate(70,478)"
id="src/plugins/coreplugin/images/search">
<use
x="0"
y="0"
xlink:href="#backgroundRect"
id="use15"
transform="translate(22,-430)" />
transform="translate(22,-430)"
width="100%"
height="100%" />
<path
id="path10"
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 374 KiB

After

Width:  |  Height:  |  Size: 374 KiB