From 1b408947b010c9d343530dcc759cb372c78ccc58 Mon Sep 17 00:00:00 2001 From: Alessandro Portale Date: Tue, 19 Mar 2024 15:16:00 +0100 Subject: [PATCH] Welcome: Design update round #2 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 --- src/plugins/coreplugin/welcomepagehelper.cpp | 4 +- .../projectexplorer/projectwelcomepage.cpp | 130 +++++++++--------- src/plugins/welcome/images/project.png | Bin 175 -> 172 bytes src/plugins/welcome/images/project@2x.png | Bin 225 -> 212 bytes src/plugins/welcome/images/session.png | Bin 192 -> 165 bytes src/plugins/welcome/images/session@2x.png | Bin 255 -> 187 bytes src/tools/icons/qtcreatoricons.svg | 42 +++--- 7 files changed, 93 insertions(+), 83 deletions(-) diff --git a/src/plugins/coreplugin/welcomepagehelper.cpp b/src/plugins/coreplugin/welcomepagehelper.cpp index 9cad69cdf17..fe01944a6f2 100644 --- a/src/plugins/coreplugin/welcomepagehelper.cpp +++ b/src/plugins/coreplugin/welcomepagehelper.cpp @@ -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}; diff --git a/src/plugins/projectexplorer/projectwelcomepage.cpp b/src/plugins/projectexplorer/projectwelcomepage.cpp index e51800575d6..29742256443 100644 --- a/src/plugins/projectexplorer/projectwelcomepage.cpp +++ b/src/plugins/projectexplorer/projectwelcomepage.cpp @@ -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}; @@ -315,36 +316,36 @@ public: void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &idx) const final { - // 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) | | | | | | - // | | | +------------+ +-------------+ | | | | | - // |(HPaddingXs)||(HGapXs)| |(HGapXs)||(HGapXs)|| | | +-- Header - // | |(16x16) | +------------+ +-------------+ | | | | | - // | | | |(VPaddingXs)| |(VPaddingXs) | | | | | | - // |------------+--------+--------+------------+--------+-------------+--------+-------+ | | --+ - // | +-- | (VPaddingXs) | | | | - // | | +------------------------------+(HPaddingXs)| | | - // | | | | | | | - // | | +------------------------------+ | | | - // | Per project in session --+ | (EXSPaddingGapS) | |(sessionScrollBarGap)| | - // | | +------------------------------+ | | | - // | | | | | | | - // | | +------------------------------+ | | +-- Expansion - // | +-- | (VPaddingXs) | | | | - // +----------------------------------------------+------------------------------------+------------+ | | - // | (VPaddingXs) | | | - // +----------------------------------------+--------------+----------------------------------------+ | | - // +-- | || | | | - // | +----------------------------------------+--------------+----------------------------------------+ | | - // | | (VPaddingXs) | | | - // | +------------------------------------------------------------------------------------------------+---------------------+ --+ - // | | (VGapL) | +-- Gap between session items - // | +----------------------------------------------------------------------------------------------------------------------+ --+ + // +------------+--------+---------+------------+---------+-------------+--------+-------+------------+---------------------+ --+ + // | | | |(VPaddingXs)| |(VPaddingXs) | | | | | | + // | | | +------------+ +-------------+ | | | | | + // |(HPaddingXs)||(HGapXxs)| |(HGapXxs)||(HGapXs)|| | | +-- Header + // | |(16x16) | +------------+ +-------------+ | | | | | + // | | | |(VPaddingXs)| |(VPaddingXs) | | | | | | + // |------------+--------+---------+------------+---------+-------------+--------+-------+ | | --+ + // | +-- | (VPaddingXxs) | | | | + // | | +------------------------------+(HPaddingXs)| | | + // | | | | | | | + // | | +------------------------------+ | | | + // | Per project in session --+ | (ExPaddingGapS) | |(sessionScrollBarGap)| | + // | | +------------------------------+ | | | + // | | | | | | | + // | | +------------------------------+ | | +-- Expansion + // | +-- | (VPaddingXxs) | | | | + // +------------------------------------------------------+------------------------------+------------+ | | + // | (VPaddingXs) | | | + // +-----------------------------------------+--------------+-----------------------------------------+ | | + // +-- | || | | | + // | +-----------------------------------------+--------------+-----------------------------------------+ | | + // | | (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)| | | - // | | | | | +-------------+ | | - // | | | | | || | | - // | | | | | +-------------+ | | - // |(HPaddingXs)||(HGapXs)||(HGapXs)| (VGapXs) |(HPaddingXs)|(HPaddingXs)| - // | |(16x16) | | | +-------------+ | | - // | | | | | || | | - // | | | | | +-------------+ | | - // | | | | | | (VPaddingXs)| | | - // +------------+--------+--------+------+--------+-------------+------------+------------+ --+ - // | (VGapL) | +-- Gap between project items - // +--------------------------------------------------------------------------------------+ --+ + // +------------+--------+---------+------+---------+-------------+------------+------------+ + // | | | | | | (VPaddingXs)| | | + // | | | | | +-------------+ | | + // | | | | | || | | + // | | | | | +-------------+ | | + // |(HPaddingXs)||(HGapXxs)||(HGapXxs)| (VGapXs) |(HPaddingXs)|(HPaddingXs)| + // | |(16x16) | | | +-------------+ | | + // | | | | | || | | + // | | | | | +-------------+ | | + // | | | | | | (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(); diff --git a/src/plugins/welcome/images/project.png b/src/plugins/welcome/images/project.png index 30862beb287d48c9587ec24d55e99d3a2881f712..522902a48f36dc537f470c06209eaa35f9ccdce1 100644 GIT binary patch literal 172 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd7G?$phPQVgfdu3Nd_r6q7#KJ>IAmpI)6>(N zo0}IeUc6(+jz53?{QLLs|NsAnJM~U5Ffe#}x;Tb#L?_SSWaTM1R-(@K&`%(li<#M3 zrNgi@H;sY0*-P~>%ek3nnRs~SDXcovz38?!Qa!xF+^f&@(Twho+CwGED{nfS_@>@*%UrB z6tNgtSqZ5ukeRSfZGp;S>nWGB7@ll&uvEBktm6oy@ygSTmh5@_Hx}{)h&Svxz)&px cGLeD7jJ@(z&>_vO3=9kmp00i_>zopr0IugZ7XSbN diff --git a/src/plugins/welcome/images/project@2x.png b/src/plugins/welcome/images/project@2x.png index c5cc11155be06a1c8b2dba6a5498001a43e56d98..8be7cc7c87eee4b53e7d63b1b361d53ab16c72ce 100644 GIT binary patch literal 212 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4h9AWhA=@@4F(2=*`6+rAr_~fUfRgpY#`A3 zu%5YFP@-|#sqPlu8ETP_*_uQ(7P{;bY5AcO@8do>{MLM(pYIlmKh#q&WVp~boBdj2 z{;#`?{62B20@ePTMHHCsu35FqgtJXUo#Q~shxBhZHpnqp*zf+nQ==g-IlEOvA@yBD z1fvz>LN>eS|C!Hh`s28?^uI)D+zg#ZA?G5?!=lz3%*x77(h5J%`+#>I`w@e#v%AiL Ooa^c8=d#Wzp$PzFZcmi} literal 225 zcmeAS@N?(olHy`uVBq!ia0y~yU@!n-4h9AWhN8@6(F_a>D?D8sLp+YZy}FUN*+8K6 zVSRHjTLOpK2d2!Ik9ckUxK?a#WLJ=Nd;WQ*h+uDg=10#Loc1^Bd6@qQFHw-0IKfK6 zJtV2@V7JyqW=`dkjEpn37wtIfP|(2e`ezC25ypm9;a7f7y(g7m7JbeslCTuZW%OuvxrYW4^+OgCioq-{TQ~Ud)ijH{< P3=9mOu6{1-oD!Mja znp#>~IyyR*mXTWo2dM<>e<%oH%*%9NLd`Hqk3xLiFwW+&DLFDWO&PdWSx$7;Xwul1_n=8KbLh*2~7aMKSaa; diff --git a/src/plugins/welcome/images/session@2x.png b/src/plugins/welcome/images/session@2x.png index c53cf12bfa6cd4c360deb9c8839fb272cae62c8a..5f0701b7114af42c12f059d116ae8d72d14cc2ce 100644 GIT binary patch literal 187 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4h9AWhA=@@4F(2=CQlc~5R21GC!ZECp6&TfSVW13;iA)oUeOy0S*saDdYRXMv}3-w zPBHs{aqn)C1mdKI;Vst09#c=jsO4v literal 255 zcmeAS@N?(olHy`uVBq!ia0y~yU@!n-7G?$phNU`BwtzSRJ|V6Q3=CXcT)e!zQc_aV z($coJwk|F%9UUDrX3Us5bLQsFn{VH~{ouiazkmP!`}gnv|Nl3CSJ^T!Fm!pkIEGl9 zPX5u)Y!DEdWXR06fyvtB8cCm{(je!0%0V(&M4TNpe^n4XZ3u;!@Z!2@M- z?JUhdYS##H@dRXFQ0+Uo#&P-&^UlV`QhTw^|Mfx=5?eNS{;6Nc&}Ac}QXtuSxoFP0 zqc0ujI5rsz6tY;K>o_F2wOLPf(yYY=X?}BV&U}{2$#7DFBO^i3UYLP_fx*+&&t;uc GLK6UJJzx3& diff --git a/src/tools/icons/qtcreatoricons.svg b/src/tools/icons/qtcreatoricons.svg index 9ced69d3199..7d78434c75a 100644 --- a/src/tools/icons/qtcreatoricons.svg +++ b/src/tools/icons/qtcreatoricons.svg @@ -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" /> + transform="translate(226,-226)" + width="100%" + height="100%" /> + d="m 216,215 5,3 -5,3 z m -4,-3 h 12 v 12 h -12 z" + sodipodi:nodetypes="ccccccccc" /> + transform="translate(25,-430)" + width="100%" + height="100%" /> + 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" /> + transform="translate(172,-228)" + width="100%" + height="100%" /> + transform="translate(22,-430)" + width="100%" + height="100%" />