From 8fbdd36ca0402eeb6eacc8ebcc4a60c57a01e3ee Mon Sep 17 00:00:00 2001 From: 23rd <23rd@vivaldi.net> Date: Tue, 24 May 2022 14:37:05 +0300 Subject: [PATCH] Improved style of text from custom top bar in premium settings. --- Telegram/SourceFiles/settings/settings.style | 6 +++ .../SourceFiles/settings/settings_premium.cpp | 51 ++++++++++++------- 2 files changed, 40 insertions(+), 17 deletions(-) diff --git a/Telegram/SourceFiles/settings/settings.style b/Telegram/SourceFiles/settings/settings.style index 0c7216a0a2..6e97543a7d 100644 --- a/Telegram/SourceFiles/settings/settings.style +++ b/Telegram/SourceFiles/settings/settings.style @@ -449,3 +449,9 @@ settingsPremiumTopBarClose: IconButton(infoTopBarClose) { } settingsPremiumRowTitlePadding: margins(60px, 5px, 46px, 3px); settingsPremiumRowAboutPadding: margins(60px, 0px, 46px, 6px); + +settingsPremiumTitlePadding: margins(0px, 20px, 0px, 16px); +settingsPremiumAboutTextStyle: TextStyle(defaultTextStyle) { + font: font(12px); + lineHeight: 18px; +} diff --git a/Telegram/SourceFiles/settings/settings_premium.cpp b/Telegram/SourceFiles/settings/settings_premium.cpp index 51330b1cb2..3e2572e49b 100644 --- a/Telegram/SourceFiles/settings/settings_premium.cpp +++ b/Telegram/SourceFiles/settings/settings_premium.cpp @@ -51,6 +51,8 @@ using SectionCustomTopBarData = Info::Settings::SectionCustomTopBarData; constexpr auto kBodyAnimationPart = 0.90; constexpr auto kTitleAnimationPart = 0.15; +constexpr auto kTitleAdditionalScale = 0.15; + struct Entry { const style::icon *icon; rpl::producer title; @@ -230,8 +232,8 @@ private: }; struct Interval { - int from; - int length; + int from = 0; + int length = 0; }; const std::vector _availableAngles; const Interval _lifeLength; @@ -356,23 +358,33 @@ protected: void paintEvent(QPaintEvent *e) override; private: + const style::font &_titleFont; + const style::margins &_titlePadding; + const style::TextStyle &_aboutSt; MiniStars _ministars; QSvgRenderer _star; - Ui::Text::String _title; Ui::Text::String _about; QPoint _titlePosition; + QPainterPath _titlePath; bool _roundEdges = true; }; TopBar::TopBar(not_null parent) : Ui::RpWidget(parent) +, _titleFont(st::boxTitle.style.font) +, _titlePadding(st::settingsPremiumTitlePadding) +, _aboutSt(st::settingsPremiumAboutTextStyle) , _ministars([=] { update(); }) -, _star(u":/gui/icons/settings/star.svg"_q) -, _title(st::boxTitle.style, tr::lng_premium_summary_title(tr::now)) { +, _star(u":/gui/icons/settings/star.svg"_q) { + _titlePath.addText( + 0, + _titleFont->ascent, + _titleFont, + tr::lng_premium_summary_title(tr::now)); _about.setMarkedText( - st::aboutLabel.style, + _aboutSt, tr::lng_premium_summary_top_about(tr::now, Ui::Text::RichLangValue)); } @@ -449,30 +461,35 @@ void TopBar::paintEvent(QPaintEvent *e) { const auto availableWidth = width() - padding.left() - padding.right(); const auto titleTop = currentStarRect.top() + currentStarRect.height() - + st::changePhoneTitlePadding.top(); + + _titlePadding.top(); + const auto titlePathRect = _titlePath.boundingRect(); const auto aboutTop = titleTop - + _title.countHeight(availableWidth) - + st::changePhoneTitlePadding.bottom(); + + titlePathRect.height() + + _titlePadding.bottom(); - p.setFont(st::aboutLabel.style.font); + p.setFont(_aboutSt.font); _about.draw(p, padding.left(), aboutTop, availableWidth, style::al_top); // Title. p.setOpacity(1.); - p.setFont(st::boxTitle.style.font); + p.setFont(_titleFont); const auto titleProgress = 1. - progress; const auto fullStarRect = starRect(1., 1.); const auto fullTitleTop = fullStarRect.top() + fullStarRect.height() - + st::changePhoneTitlePadding.top(); - _title.draw( - p, + + _titlePadding.top(); + p.translate( anim::interpolate( - (width() - _title.countWidth(availableWidth)) / 2, + (width() - titlePathRect.width()) / 2, _titlePosition.x(), titleProgress), - anim::interpolate(fullTitleTop, _titlePosition.y(), titleProgress), - availableWidth); + anim::interpolate(fullTitleTop, _titlePosition.y(), titleProgress)); + + const auto scale = 1. + kTitleAdditionalScale * (1. - titleProgress); + p.translate(titlePathRect.center()); + p.scale(scale, scale); + p.translate(-titlePathRect.center()); + p.fillPath(_titlePath, st::premiumButtonFg); } class Premium : public Section {