From e3f4f60e2d5e8e88aee2aa1ff4d1eb8a9626e793 Mon Sep 17 00:00:00 2001 From: 23rd <23rd@vivaldi.net> Date: Sat, 16 Nov 2024 11:05:00 +0300 Subject: [PATCH] Replaced list of credits topup options with big label in settings. --- Telegram/Resources/langs/lang.strings | 2 + .../SourceFiles/boxes/gift_credits_box.cpp | 3 +- .../payments/ui/payments_reaction_box.cpp | 3 +- .../SourceFiles/settings/settings_credits.cpp | 99 ++++++++++++++++--- .../settings/settings_credits_graphics.cpp | 65 +++++++----- .../settings/settings_credits_graphics.h | 6 +- Telegram/SourceFiles/ui/boxes/peer_qr_box.cpp | 2 +- Telegram/SourceFiles/ui/effects/credits.style | 17 ++++ 8 files changed, 154 insertions(+), 43 deletions(-) diff --git a/Telegram/Resources/langs/lang.strings b/Telegram/Resources/langs/lang.strings index 82e45d90f..64c038f05 100644 --- a/Telegram/Resources/langs/lang.strings +++ b/Telegram/Resources/langs/lang.strings @@ -2414,6 +2414,8 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL "lng_credits_summary_history_entry_inner_in" = "In-App Purchase"; "lng_credits_summary_balance" = "Balance"; "lng_credits_more_options" = "More Options"; +"lng_credits_balance_me" = "your balance"; +"lng_credits_buy_button" = "Buy More Stars"; "lng_credits_gift_button" = "Gift Stars to Friends"; "lng_credits_box_out_title" = "Confirm Your Purchase"; "lng_credits_box_out_sure#one" = "Do you want to buy **\"{text}\"** in **{bot}** for **{count} Star**?"; diff --git a/Telegram/SourceFiles/boxes/gift_credits_box.cpp b/Telegram/SourceFiles/boxes/gift_credits_box.cpp index f0ecd05f6..a9712f704 100644 --- a/Telegram/SourceFiles/boxes/gift_credits_box.cpp +++ b/Telegram/SourceFiles/boxes/gift_credits_box.cpp @@ -123,7 +123,8 @@ void GiftCreditsBox( box->verticalLayout(), peer, 0, - [=] { gifted(); box->uiShow()->hideLayer(); }); + [=] { gifted(); box->uiShow()->hideLayer(); }, + tr::lng_credits_summary_options_subtitle()); box->setPinnedToBottomContent( object_ptr(box)); diff --git a/Telegram/SourceFiles/payments/ui/payments_reaction_box.cpp b/Telegram/SourceFiles/payments/ui/payments_reaction_box.cpp index c874eb3a9..77342222e 100644 --- a/Telegram/SourceFiles/payments/ui/payments_reaction_box.cpp +++ b/Telegram/SourceFiles/payments/ui/payments_reaction_box.cpp @@ -30,7 +30,8 @@ namespace Settings { [[nodiscard]] not_null AddBalanceWidget( not_null parent, rpl::producer balanceValue, - bool rightAlign); + bool rightAlign, + rpl::producer opacityValue = nullptr); } // namespace Settings namespace Ui { diff --git a/Telegram/SourceFiles/settings/settings_credits.cpp b/Telegram/SourceFiles/settings/settings_credits.cpp index b36f1df0f..5685922ac 100644 --- a/Telegram/SourceFiles/settings/settings_credits.cpp +++ b/Telegram/SourceFiles/settings/settings_credits.cpp @@ -40,6 +40,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL #include "ui/wrap/vertical_layout.h" #include "window/window_session_controller.h" #include "styles/style_credits.h" +#include "styles/style_giveaway.h" #include "styles/style_info.h" #include "styles/style_layers.h" #include "styles/style_premium.h" @@ -350,20 +351,87 @@ void Credits::setupContent() { Ui::StartFireworks(_parent); } }; - const auto self = _controller->session().user(); - FillCreditOptions(_controller->uiShow(), content, self, 0, paid); - { - Ui::AddSkip(content); - const auto giftButton = AddButtonWithIcon( + Ui::AddSkip(content); + Ui::AddSkip(content); + const auto balanceLine = content->add( + object_ptr>( + content, + object_ptr(content)))->entity(); + const auto balanceIcon = CreateSingleStarWidget( + balanceLine, + st::creditsSettingsBigBalance.style.font->height); + const auto balanceAmount = Ui::CreateChild( + balanceLine, + _controller->session().credits().balanceValue( + ) | rpl::map(Lang::FormatCountDecimal), + st::creditsSettingsBigBalance); + balanceAmount->sizeValue() | rpl::start_with_next([=] { + balanceLine->resize( + balanceIcon->width() + + st::creditsSettingsBigBalanceSkip + + balanceAmount->textMaxWidth(), + balanceIcon->height()); + }, balanceLine->lifetime()); + balanceLine->widthValue() | rpl::start_with_next([=] { + balanceAmount->moveToRight(0, 0); + }, balanceLine->lifetime()); + Ui::AddSkip(content); + content->add( + object_ptr>( + content, + object_ptr( + content, + tr::lng_credits_balance_me(), + st::infoTopBar.subtitle))); + Ui::AddSkip(content); + Ui::AddSkip(content); + Ui::AddSkip(content); + + const auto button = content->add( + object_ptr( + content, + tr::lng_credits_buy_button(), + st::creditsSettingsBigBalanceButton), + st::boxRowPadding); + button->setTextTransform(Ui::RoundButton::TextTransform::NoTransform); + button->setClickedCallback([=, show = _controller->uiShow()] { + show->show(Box([=](not_null box) { + box->setStyle(st::giveawayGiftCodeBox); + box->setWidth(st::boxWideWidth); + box->setTitle(tr::lng_credits_summary_options_subtitle()); + const auto inner = box->verticalLayout(); + const auto self = show->session().user(); + FillCreditOptions(show, inner, self, 0, paid, nullptr); + + const auto button = box->addButton(tr::lng_close(), [=] { + box->closeBox(); + }); + const auto buttonWidth = st::boxWideWidth + - rect::m::sum::h(st::giveawayGiftCodeBox.buttonPadding); + button->widthValue() | rpl::filter([=] { + return (button->widthNoMargins() != buttonWidth); + }) | rpl::start_with_next([=] { + button->resizeToWidth(buttonWidth); + }, button->lifetime()); + })); + }); + + Ui::AddSkip(content); + + const auto gift = content->add( + object_ptr( content, tr::lng_credits_gift_button(), - st::settingsButtonLightNoIcon); - Ui::AddSkip(content); - Ui::AddDivider(content); - giftButton->setClickedCallback([=] { - Ui::ShowGiftCreditsBox(_controller, paid); - }); - } + st::creditsSettingsBigBalanceButtonGift), + st::boxRowPadding); + gift->setTextTransform(Ui::RoundButton::TextTransform::NoTransform); + gift->setClickedCallback([=, controller = _controller] { + Ui::ShowGiftCreditsBox(controller, paid); + }); + + Ui::AddSkip(content); + Ui::AddSkip(content); + Ui::AddDivider(content); setupSubscriptions(content); setupHistory(content); @@ -422,7 +490,12 @@ QPointer Credits::createPinnedToTop( const auto balance = AddBalanceWidget( content, _controller->session().credits().balanceValue(), - true); + true, + content->heightValue() | rpl::map([=](int height) { + const auto ratio = float64(height - content->minimumHeight()) + / (content->maximumHeight() - content->minimumHeight()); + return (1. - ratio / 0.35); + })); _controller->session().credits().load(true); rpl::combine( balance->sizeValue(), diff --git a/Telegram/SourceFiles/settings/settings_credits_graphics.cpp b/Telegram/SourceFiles/settings/settings_credits_graphics.cpp index ba0f18b92..bba86892f 100644 --- a/Telegram/SourceFiles/settings/settings_credits_graphics.cpp +++ b/Telegram/SourceFiles/settings/settings_credits_graphics.cpp @@ -398,7 +398,8 @@ void FillCreditOptions( not_null container, not_null peer, int minimumCredits, - Fn paid) { + Fn paid, + rpl::producer subtitle) { const auto options = container->add( object_ptr>( container, @@ -415,9 +416,9 @@ void FillCreditOptions( while (content->count()) { delete content->widgetAt(0); } - Ui::AddSubsectionTitle( - content, - tr::lng_credits_summary_options_subtitle()); + if (subtitle) { + Ui::AddSubsectionTitle(content, std::move(subtitle)); + } const auto buttons = content->add( object_ptr(content)); @@ -570,29 +571,41 @@ void FillCreditOptions( not_null AddBalanceWidget( not_null parent, rpl::producer balanceValue, - bool rightAlign) { + bool rightAlign, + rpl::producer opacityValue) { + struct State final { + QImage star; + float64 opacity = 1.0; + Ui::Text::String label; + Ui::Text::String count; + }; const auto balance = Ui::CreateChild(parent); - const auto balanceStar = balance->lifetime().make_state( - Ui::GenerateStars(st::creditsBalanceStarHeight, 1)); - const auto starSize = balanceStar->size() / style::DevicePixelRatio(); - const auto label = balance->lifetime().make_state( + const auto state = balance->lifetime().make_state(); + state->star = QImage(Ui::GenerateStars(st::creditsBalanceStarHeight, 1)); + const auto starSize = state->star.size() / style::DevicePixelRatio(); + state->label = Ui::Text::String( st::defaultTextStyle, tr::lng_credits_summary_balance(tr::now)); - const auto count = balance->lifetime().make_state( + state->count = Ui::Text::String( st::semiboldTextStyle, tr::lng_contacts_loading(tr::now)); - const auto diffBetweenStarAndCount = count->style()->font->spacew; + if (opacityValue) { + std::move(opacityValue) | rpl::start_with_next([=](float64 value) { + state->opacity = value; + }, balance->lifetime()); + } + const auto diffBetweenStarAndCount = state->count.style()->font->spacew; const auto resize = [=] { balance->resize( std::max( - label->maxWidth(), - count->maxWidth() + state->label.maxWidth(), + state->count.maxWidth() + starSize.width() + diffBetweenStarAndCount), - label->style()->font->height + starSize.height()); + state->label.style()->font->height + starSize.height()); }; std::move(balanceValue) | rpl::start_with_next([=](uint64 value) { - count->setText( + state->count.setText( st::semiboldTextStyle, Lang::FormatCountToShort(value).string); balance->setBalance(value); @@ -602,32 +615,33 @@ not_null AddBalanceWidget( ) | rpl::start_with_next([=] { auto p = QPainter(balance); + p.setOpacity(state->opacity); p.setPen(st::boxTextFg); - label->draw(p, { + state->label.draw(p, { .position = QPoint( - rightAlign ? (balance->width() - label->maxWidth()) : 0, + rightAlign ? (balance->width() - state->label.maxWidth()) : 0, 0), .availableWidth = balance->width(), }); - count->draw(p, { + state->count.draw(p, { .position = QPoint( (rightAlign - ? (balance->width() - count->maxWidth()) + ? (balance->width() - state->count.maxWidth()) : (starSize.width() + diffBetweenStarAndCount)), - label->minHeight() - + (starSize.height() - count->minHeight()) / 2), + state->label.minHeight() + + (starSize.height() - state->count.minHeight()) / 2), .availableWidth = balance->width(), }); p.drawImage( (rightAlign ? (balance->width() - - count->maxWidth() + - state->count.maxWidth() - starSize.width() - diffBetweenStarAndCount) : 0), - label->minHeight(), - *balanceStar); + state->label.minHeight(), + state->star); }, balance->lifetime()); return balance; } @@ -1696,7 +1710,8 @@ void SmallBalanceBox( box->verticalLayout(), show->session().user(), credits - show->session().credits().balance(), - [=] { show->session().credits().load(true); }); + [=] { show->session().credits().load(true); }, + tr::lng_credits_summary_options_subtitle()); content->setMaximumHeight(st::creditsLowBalancePremiumCoverHeight); content->setMinimumHeight(st::infoLayerTopBarHeight); diff --git a/Telegram/SourceFiles/settings/settings_credits_graphics.h b/Telegram/SourceFiles/settings/settings_credits_graphics.h index fb19e2bff..59913b304 100644 --- a/Telegram/SourceFiles/settings/settings_credits_graphics.h +++ b/Telegram/SourceFiles/settings/settings_credits_graphics.h @@ -58,12 +58,14 @@ void FillCreditOptions( not_null container, not_null peer, int minCredits, - Fn paid); + Fn paid, + rpl::producer subtitle); [[nodiscard]] not_null AddBalanceWidget( not_null parent, rpl::producer balanceValue, - bool rightAlign); + bool rightAlign, + rpl::producer opacityValue = nullptr); void AddWithdrawalWidget( not_null container, diff --git a/Telegram/SourceFiles/ui/boxes/peer_qr_box.cpp b/Telegram/SourceFiles/ui/boxes/peer_qr_box.cpp index 426f9705f..33e7096d0 100644 --- a/Telegram/SourceFiles/ui/boxes/peer_qr_box.cpp +++ b/Telegram/SourceFiles/ui/boxes/peer_qr_box.cpp @@ -302,7 +302,7 @@ not_null PrepareQrWidget( divider->resize(container->width(), result->height()); result->moveToLeft((container->width() - result->width()) / 2, 0); topWidget->setVisible(userpicToggled); - topWidget->moveToLeft(0, -std::numeric_limits::min()); + topWidget->moveToLeft(0, std::numeric_limits::min()); topWidget->raise(); aboutLabel->raise(); diff --git a/Telegram/SourceFiles/ui/effects/credits.style b/Telegram/SourceFiles/ui/effects/credits.style index b0861a8dc..734b2a2f0 100644 --- a/Telegram/SourceFiles/ui/effects/credits.style +++ b/Telegram/SourceFiles/ui/effects/credits.style @@ -11,6 +11,23 @@ using "ui/widgets/widgets.style"; using "ui/effects/premium.style"; using "settings/settings.style"; +creditsSettingsBigBalance: FlatLabel(defaultFlatLabel) { + style: TextStyle(defaultTextStyle) { + font: font(24px semibold); + } +} +creditsSettingsBigBalanceSkip: 4px; +creditsSettingsBigBalanceButton: RoundButton(defaultActiveButton) { + height: 42px; + textTop: 12px; + style: semiboldTextStyle; +} +creditsSettingsBigBalanceButtonGift: RoundButton(defaultLightButton) { + height: 42px; + textTop: 12px; + style: defaultTextStyle; +} + creditsPremiumCover: PremiumCover(defaultPremiumCover) { about: FlatLabel(userPremiumCoverAbout) { textFg: boxTitleFg;