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; return false;
} }
constexpr TextFormat titleTF {Theme::Token_Text_Default, StyleHelper::UiElementIconActive}; constexpr TextFormat titleTF {Theme::Token_Text_Default, StyleHelper::UiElementH6};
constexpr TextFormat descriptionTF {titleTF.themeColor, StyleHelper::UiElementCaption}; constexpr TextFormat descriptionTF {titleTF.themeColor, StyleHelper::UiElementCaptionStrong};
constexpr TextFormat tagsLabelTF {Theme::Token_Text_Muted, StyleHelper::UiElementCaptionStrong}; constexpr TextFormat tagsLabelTF {Theme::Token_Text_Muted, StyleHelper::UiElementCaptionStrong};
constexpr TextFormat tagsTF {Theme::Token_Text_Accent, tagsLabelTF.uiElement}; constexpr TextFormat tagsTF {Theme::Token_Text_Accent, tagsLabelTF.uiElement};

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

@@ -47,10 +47,11 @@ const char PROJECT_BASE_ID[] = "Welcome.OpenRecentProject";
namespace ProjectExplorer { namespace ProjectExplorer {
namespace Internal { namespace Internal {
constexpr TextFormat projectNameTF {Theme::Token_Text_Accent, StyleHelper::UiElementH5}; constexpr TextFormat projectNameTF {Theme::Token_Text_Accent, StyleHelper::UiElementH6};
constexpr TextFormat projectPathTF {Theme::Token_Text_Muted, StyleHelper::UiElementIconActive}; constexpr TextFormat projectPathTF {Theme::Token_Text_Muted, StyleHelper::UiElementCaptionStrong};
constexpr TextFormat sessionNameTF {projectNameTF.themeColor, projectNameTF.uiElement}; constexpr TextFormat sessionNameTF = {projectNameTF.themeColor, projectNameTF.uiElement,
constexpr TextFormat sessionProjetNameTF {Theme::Token_Text_Default, projectNameTF.uiElement}; Qt::AlignVCenter | Qt::TextDontClip};
constexpr TextFormat sessionProjectNameTF {Theme::Token_Text_Default, projectNameTF.uiElement};
constexpr TextFormat shortcutNumberTF {Theme::Token_Text_Default, constexpr TextFormat shortcutNumberTF {Theme::Token_Text_Default,
StyleHelper::UiElementCaptionStrong, StyleHelper::UiElementCaptionStrong,
Qt::AlignCenter | Qt::TextDontClip}; Qt::AlignCenter | Qt::TextDontClip};
@@ -317,34 +318,34 @@ public:
{ {
// visible on withIcon() Gap + arrow visible on hover Extra margin right of project item // visible on withIcon() Gap + arrow visible on hover Extra margin right of project item
// | | | // | | |
// +----------+----------+ +--------+-------+ +----------+----------+ // +-----------+----------+ +--------+-------+ +----------+----------+
// | | | | | | // | | | | | |
// //
// +------------+--------+--------+------------+--------+-------------+--------+-------+------------+---------------------+ --+ // +------------+--------+---------+------------+---------+-------------+--------+-------+------------+---------------------+ --+
// | | | |(VPaddingXs)| |(VPaddingXs) | | | | | | // | | | |(VPaddingXs)| |(VPaddingXs) | | | | | |
// | | | +------------+ +-------------+ | | | | | // | | | +------------+ +-------------+ | | | | |
// |(HPaddingXs)|<number>|(HGapXs)| <icon> |(HGapXs)|<sessionName>|(HGapXs)|<arrow>| | | +-- Header // |(HPaddingXs)|<number>|(HGapXxs)| <icon> |(HGapXxs)|<sessionName>|(HGapXs)|<arrow>| | | +-- Header
// | |(16x16) | +------------+ +-------------+ | | | | | // | |(16x16) | +------------+ +-------------+ | | | | |
// | | | |(VPaddingXs)| |(VPaddingXs) | | | | | | // | | | |(VPaddingXs)| |(VPaddingXs) | | | | | |
// |------------+--------+--------+------------+--------+-------------+--------+-------+ | | --+ // |------------+--------+---------+------------+---------+-------------+--------+-------+ | | --+
// | +-- | (VPaddingXs) | | | | // | +-- | (VPaddingXxs) | | | |
// | | +------------------------------+(HPaddingXs)| | | // | | +------------------------------+(HPaddingXs)| | |
// | | | <projectName> | | | | // | | | <projectName> | | | |
// | | +------------------------------+ | | | // | | +------------------------------+ | | |
// | Per project in session --+ | (EXSPaddingGapS) | |(sessionScrollBarGap)| | // | Per project in session --+ | (ExPaddingGapS) | |(sessionScrollBarGap)| |
// | | +------------------------------+ | | | // | | +------------------------------+ | | |
// | | | <projectPath> | | | | // | | | <projectPath> | | | |
// | | +------------------------------+ | | +-- Expansion // | | +------------------------------+ | | +-- Expansion
// | +-- | (VPaddingXs) | | | | // | +-- | (VPaddingXxs) | | | |
// +----------------------------------------------+------------------------------------+------------+ | | // +------------------------------------------------------+------------------------------+------------+ | |
// | (VPaddingXs) | | | // | (VPaddingXs) | | |
// +----------------------------------------+--------------+----------------------------------------+ | | // +-----------------------------------------+--------------+-----------------------------------------+ | |
// +-- | <cloneButton>|<renameButton>|<deleteButton> | | | // +-- | <cloneButton>|<renameButton>|<deleteButton> | | |
// | +----------------------------------------+--------------+----------------------------------------+ | | // | +-----------------------------------------+--------------+-----------------------------------------+ | |
// | | (VPaddingXs) | | | // | | (VPaddingXs) | | |
// | +------------------------------------------------------------------------------------------------+---------------------+ --+ // | +--------------------------------------------------------------------------------------------------+---------------------+ --+
// | | (VGapL) | +-- Gap between session items // | | (VGapL) | +-- Gap between session items
// | +----------------------------------------------------------------------------------------------------------------------+ --+ // | +------------------------------------------------------------------------------------------------------------------------+ --+
// | // |
// \ session action "buttons" and dividers // \ session action "buttons" and dividers
// +-----------------------------------------------+--------+---------+--------+ // +-----------------------------------------------+--------+---------+--------+
@@ -380,11 +381,11 @@ public:
const int y = bgR.y(); const int y = bgR.y();
const int numberX = x + s(HPaddingXs); 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 int arrowX = bgR.right() - s(HPaddingXs) - arrowS.width();
const QRect arrowHoverR(arrowX - s(HGapXs) + 1, y, const QRect arrowHoverR(arrowX - s(HGapXs) + 1, y,
s(HGapXs) + arrowS.width() + s(HPaddingXs), hdR.height()); 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 iconY = y + (hdR.height() - iconS.height()) / 2;
const int arrowY = y + (hdR.height() - arrowS.height()) / 2; const int arrowY = y + (hdR.height() - arrowS.height()) / 2;
@@ -419,8 +420,7 @@ public:
fullSessionName = Tr::tr("%1 (last session)").arg(fullSessionName); fullSessionName = Tr::tr("%1 (last session)").arg(fullSessionName);
if (isActiveSession && !isDefaultVirgin) if (isActiveSession && !isDefaultVirgin)
fullSessionName = Tr::tr("%1 (current session)").arg(fullSessionName); fullSessionName = Tr::tr("%1 (current session)").arg(fullSessionName);
const QRect switchR(x, y, hdR.width() - arrowHoverR.width(), const QRect switchR(x, y, hdR.width() - arrowHoverR.width(), arrowHoverR.height());
hdR.height() + s(VGapL));
const bool switchActive = switchR.contains(mousePos); const bool switchActive = switchR.contains(mousePos);
painter->setPen(sessionNameTF.color()); painter->setPen(sessionNameTF.color());
painter->setFont(sessionNameTF.font(switchActive)); painter->setFont(sessionNameTF.font(switchActive));
@@ -432,7 +432,7 @@ public:
m_activeSwitchToRect = switchR; m_activeSwitchToRect = switchR;
} }
if (arrowVisible) { 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; m_activeExpandRect = arrowHoverR;
} else { } else {
painter->save(); painter->save();
@@ -447,9 +447,9 @@ public:
int yy = hdR.bottom(); int yy = hdR.bottom();
if (expanded) { if (expanded) {
const QFont projectNameFont = sessionProjetNameTF.font(); const QFont projectNameFont = sessionProjectNameTF.font();
const QFontMetrics projectNameFm(projectNameFont); const QFontMetrics projectNameFm(projectNameFont);
const int projectNameLineHeight = sessionProjetNameTF.lineHeight(); const int projectNameLineHeight = sessionProjectNameTF.lineHeight();
const QFont projectPathFont = projectPathTF.font(); const QFont projectPathFont = projectPathTF.font();
const QFontMetrics projectPathFm(projectPathFont); const QFontMetrics projectPathFm(projectPathFont);
const int projectPathLineHeight = projectPathTF.lineHeight(); const int projectPathLineHeight = projectPathTF.lineHeight();
@@ -457,15 +457,15 @@ public:
const FilePaths projects = ProjectManager::projectsForSessionName(sessionName); const FilePaths projects = ProjectManager::projectsForSessionName(sessionName);
for (const FilePath &projectPath : projects) { for (const FilePath &projectPath : projects) {
yy += s(VPaddingXs); yy += s(VPaddingXxs);
{ {
painter->setFont(projectNameFont); painter->setFont(projectNameFont);
painter->setPen(sessionProjetNameTF.color()); painter->setPen(sessionProjectNameTF.color());
const QRect projectNameR(textX, yy, textWidth, projectNameLineHeight); const QRect projectNameR(textX, yy, textWidth, projectNameLineHeight);
const QString projectNameElided = const QString projectNameElided =
projectNameFm.elidedText(projectPath.completeBaseName(), Qt::ElideMiddle, projectNameFm.elidedText(projectPath.completeBaseName(), Qt::ElideMiddle,
textWidth); textWidth);
painter->drawText(projectNameR, sessionProjetNameTF.drawTextFlags, painter->drawText(projectNameR, sessionProjectNameTF.drawTextFlags,
projectNameElided); projectNameElided);
yy += projectNameLineHeight; yy += projectNameLineHeight;
yy += s(ExPaddingGapS); yy += s(ExPaddingGapS);
@@ -483,7 +483,7 @@ public:
projectPathElided); projectPathElided);
yy += projectPathLineHeight; yy += projectPathLineHeight;
} }
yy += s(VPaddingXs); yy += s(VPaddingXxs);
} }
yy += s(VGapXs); yy += s(VGapXs);
@@ -551,11 +551,11 @@ public:
const QString sessionName = idx.data(Qt::DisplayRole).toString(); const QString sessionName = idx.data(Qt::DisplayRole).toString();
const FilePaths projects = ProjectManager::projectsForSessionName(sessionName); const FilePaths projects = ProjectManager::projectsForSessionName(sessionName);
const int projectEntryHeight = const int projectEntryHeight =
s(VPaddingXs) s(VPaddingXxs)
+ projectNameTF.lineHeight() + projectNameTF.lineHeight()
+ s(ExPaddingGapS) + s(ExPaddingGapS)
+ projectPathTF.lineHeight() + projectPathTF.lineHeight()
+ s(VPaddingXs); + s(VPaddingXxs);
h += projects.size() * projectEntryHeight h += projects.size() * projectEntryHeight
+ s(VGapXs) + s(VGapXs)
+ actionButtonHeight() + actionButtonHeight()
@@ -624,22 +624,22 @@ public:
{ {
// visible on with Icon() Extra margin right of project item // visible on with Icon() Extra margin right of project item
// | | // | |
// +-------+-------+ +------+-----+ // +--------+-------+ +------+-----+
// | | | | // | | | |
// //
// +------------+--------+--------+------+--------+-------------+------------+------------+ // +------------+--------+---------+------+---------+-------------+------------+------------+
// | | | | | | (VPaddingXs)| | | // | | | | | | (VPaddingXs)| | |
// | | | | | +-------------+ | | // | | | | | +-------------+ | |
// | | | | | |<projectName>| | | // | | | | | |<projectName>| | |
// | | | | | +-------------+ | | // | | | | | +-------------+ | |
// |(HPaddingXs)|<number>|(HGapXs)|<icon>|(HGapXs)| (VGapXs) |(HPaddingXs)|(HPaddingXs)| // |(HPaddingXs)|<number>|(HGapXxs)|<icon>|(HGapXxs)| (VGapXs) |(HPaddingXs)|(HPaddingXs)|
// | |(16x16) | | | +-------------+ | | // | |(16x16) | | | +-------------+ | |
// | | | | | |<projectPath>| | | // | | | | | |<projectPath>| | |
// | | | | | +-------------+ | | // | | | | | +-------------+ | |
// | | | | | | (VPaddingXs)| | | // | | | | | | (VPaddingXs)| | |
// +------------+--------+--------+------+--------+-------------+------------+------------+ --+ // +------------+--------+---------+------+---------+-------------+------------+------------+ --+
// | (VGapL) | +-- Gap between project items // | (VGapL) | +-- Gap between project items
// +--------------------------------------------------------------------------------------+ --+ // +----------------------------------------------------------------------------------------+ --+
const bool hovered = option.widget->isActiveWindow() const bool hovered = option.widget->isActiveWindow()
&& option.state & QStyle::State_MouseOver; && option.state & QStyle::State_MouseOver;
@@ -651,9 +651,9 @@ public:
const int x = bgR.x(); const int x = bgR.x();
const int numberX = x + s(HPaddingXs); 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 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 textWidth = bgR.width() - s(HPaddingXs) - textX;
const int y = bgR.y(); 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" /> 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>
<g <g
transform="translate(-209,274)" transform="translate(-210,274)"
id="src/plugins/welcome/images/session"> id="src/plugins/welcome/images/session">
<use <use
x="0" x="0"
y="0" y="0"
xlink:href="#backgroundRect_24" xlink:href="#backgroundRect"
id="use9" id="use9"
transform="translate(233,-210)" /> transform="translate(226,-226)"
width="100%"
height="100%" />
<path <path
id="path8101" id="path8101"
style="fill:none;stroke:#000000;stroke-width:2;stroke-linejoin:round" 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>
<g <g
transform="translate(19,478)" transform="translate(8,478)"
id="src/plugins/welcome/images/project"> id="src/plugins/welcome/images/project">
<use <use
x="0" x="0"
y="0" y="0"
xlink:href="#backgroundRect_24" xlink:href="#backgroundRect"
id="use9-5" id="use9-5"
transform="translate(30,-414)" /> transform="translate(25,-430)"
width="100%"
height="100%" />
<path <path
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round" 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"
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" stroke-width="2"
id="path2761-3" id="path4726"
sodipodi:nodetypes="cscccccccccc" /> sodipodi:nodetypes="sccssssssss"
style="fill:none;stroke:#000000;stroke-opacity:1" />
</g> </g>
<g <g
transform="translate(44,478)" transform="translate(28,478)"
id="src/plugins/welcome/images/link"> id="src/plugins/welcome/images/link">
<use <use
x="0" x="0"
@@ -7075,14 +7081,16 @@
d="m 22.5,5.5 -10,10 M 16,5 h 7 v 7" /> d="m 22.5,5.5 -10,10 M 16,5 h 7 v 7" />
</g> </g>
<g <g
transform="translate(-81,276)" transform="translate(-97,276)"
id="src/plugins/coreplugin/images/expandarrow"> id="src/plugins/coreplugin/images/expandarrow">
<use <use
x="0" x="0"
y="0" y="0"
xlink:href="#backgroundRect" xlink:href="#backgroundRect"
id="use15-0" id="use15-0"
transform="translate(172,-228)" /> transform="translate(172,-228)"
width="100%"
height="100%" />
<path <path
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none" 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" d="m 159,214.5 5,5 5,-5"
@@ -7090,14 +7098,16 @@
sodipodi:nodetypes="ccc" /> sodipodi:nodetypes="ccc" />
</g> </g>
<g <g
transform="translate(86,478)" transform="translate(70,478)"
id="src/plugins/coreplugin/images/search"> id="src/plugins/coreplugin/images/search">
<use <use
x="0" x="0"
y="0" y="0"
xlink:href="#backgroundRect" xlink:href="#backgroundRect"
id="use15" id="use15"
transform="translate(22,-430)" /> transform="translate(22,-430)"
width="100%"
height="100%" />
<path <path
id="path10" id="path10"
style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round" 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