Toast icon revolution.

2026-07-25 06:54:43 +00:00 · 2026-03-27 23:30:07 +07:00
parent e3f2e68947
commit e974d02b44
25 changed files with 53 additions and 113 deletions
@@ -1776,8 +1776,6 @@ PRIVATE
    ui/image/image_location_factory.h
    ui/text/format_song_document_name.cpp
    ui/text/format_song_document_name.h
-    ui/toast/toast_lottie_icon.cpp
-    ui/toast/toast_lottie_icon.h
    ui/widgets/expandable_peer_list.cpp
    ui/widgets/expandable_peer_list.h
    ui/widgets/chat_filters_tabs_strip.cpp
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="-48 0 1608 1608" xmlns="http://www.w3.org/2000/svg">
+    <g stroke="none" fill="none" fill-rule="evenodd">
+        <path d="M 712.679 309.46 C 994.711 289.885 1239.18 502.726 1258.61 784.767 C 1278.04 1066.81 1065.08 1311.17 783.031 1330.46 C 501.179 1349.74 257.028 1136.96 237.608 855.119 C 218.188 573.276 430.846 329.02 712.679 309.46 z M 967.909 662.173 C 982.124 662.158 990.527 665.946 1001.08 675.338 C 1028.72 699.945 1017.83 725.703 994.865 748.755 C 974.663 769.038 953.972 788.738 933.545 808.699 L 810.286 929.421 L 740.428 998.187 C 725.888 1012.62 712.403 1027.09 696.606 1040.2 C 651.854 1077.33 617.094 1031.61 586.489 1001.07 L 527.05 942.312 C 508.931 924.753 471.682 895.7 479.446 867.346 C 485.714 839.343 512.97 826.729 539.672 834.932 C 557.533 840.419 587.863 875.346 602.47 889.516 C 620.486 906.993 646.727 929.858 658.81 950.449 C 667.709 940.687 681.671 929.352 691.853 919.157 L 813.593 799.487 L 894.751 719.881 C 913.806 701.234 942.629 667.935 967.909 662.173 z" fill="#FFFFFF"></path>
+    </g>
+</svg>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="50 52 1295 1295" xmlns="http://www.w3.org/2000/svg">
+    <g stroke="none" fill="none" fill-rule="evenodd">
+        <path d="M 694.697 200.371 C 696.934 200.212 699.175 200.111 701.418 200.068 C 745.508 199.473 758.948 257.705 773.748 289.53 C 794.345 333.821 811.886 379.596 832.298 423.998 C 847.934 458.014 855.763 490.419 883.531 517.19 C 903.098 522.497 925.281 521.666 945.47 523.584 C 979.491 526.816 1013.21 532.577 1047.36 534.65 C 1094.94 537.537 1154.44 533.159 1200.16 546.144 C 1216.27 550.718 1226.72 557.474 1234.93 572.371 C 1243.74 588.375 1243.82 603.784 1234.78 619.805 C 1221.66 643.03 1140.48 703.874 1114.65 724.87 C 1095.71 740.263 1077.5 756.481 1058.31 771.588 C 1039.48 786.416 1003.87 810.195 992.189 831.093 C 986.938 840.49 987.593 854.519 988.781 864.808 C 991.499 888.351 999.881 912.529 1005.73 935.545 L 1036.08 1056.49 C 1044.45 1089.37 1059.34 1133.81 1051.47 1167.7 C 1048.56 1176.62 1038.01 1187.14 1030.2 1191.32 C 993.542 1210.99 954.764 1179.59 923.854 1161.35 L 803.61 1090.76 C 776.417 1074.72 745.323 1054.5 716.286 1043.26 C 684.275 1030.88 640.041 1065.58 612.382 1081.18 C 570.231 1104.96 528.855 1131.52 486.309 1154.92 C 470.832 1164.86 454.312 1174.51 438.356 1183.66 C 411.204 1199.23 394.957 1198.04 366.384 1190.13 C 362.056 1180.35 357.375 1175.82 348.47 1170.13 C 344.363 1128.2 354.192 1104.38 364.813 1064.99 C 381.211 1004.18 391.922 938.255 444.589 896.651 C 476.246 871.644 516.54 854.894 552.836 837.24 C 594.367 816.757 636.055 796.593 677.895 776.749 C 690.118 770.929 704.429 761.062 715.04 756.628 C 715.232 747.952 715.281 739.274 715.187 730.597 C 707.969 727.62 697.02 721.113 689.051 721.779 C 660.503 724.166 630.946 728.307 602.422 731.286 C 584.032 733.207 563.84 739.737 545.86 741.351 C 510.314 744.541 476.718 749.761 441.818 756.89 C 382.766 766.871 328.604 752.74 280.295 717.147 C 256.88 699.568 233.837 681.498 211.181 662.951 C 198.898 652.734 185.839 642.705 175.494 630.442 C 168.729 622.423 161.996 612.481 160.511 601.851 C 158.669 588.657 164.684 573.239 172.798 563.003 C 199.402 529.44 316.297 537.298 357.863 534.154 C 387.762 531.893 417.619 527.297 447.464 524.222 C 466.969 522.212 486.818 521.895 506.226 519.397 C 514.431 518.34 518.24 516.514 523.868 510.477 C 530.893 502.942 537.029 493.735 541.909 484.667 C 552.383 465.204 559.981 443.305 568.842 423.011 L 630.739 279.975 C 644.543 248.186 654.976 205.06 694.697 200.371 z" fill="#FFFFFF"></path>
+    </g>
+</svg>
@@ -40,6 +40,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/toast/toast.h"
 #include "ui/layers/generic_box.h"
 #include "ui/text/text_utilities.h"
+#include "styles/style_chat.h"

 #include <QtCore/QDataStream>
 #include <QtGui/QGuiApplication>
@@ -595,6 +596,7 @@ void ActivateBotCommand(ClickHandlerContext context, int row, int column) {
 						tr::now,
 						lt_parent_name,
 						bot->name()) },
+					.icon = &st::toastCheckIcon,
 				});
 			},
 		});
@@ -70,6 +70,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "styles/style_menu_icons.h"
 #include "styles/style_premium.h"
 #include "styles/style_settings.h"
+#include "styles/style_widgets.h"

 #include <QtWidgets/QApplication>
 #include <QtGui/QClipboard>
@@ -892,6 +893,8 @@ void AuctionBidBox(not_null<GenericBox*> box, AuctionBidBoxArgs &&args) {
 						lt_count,
 						perRound,
 						tr::rich),
+					.icon = &st::auctionBidToastIcon,
+					.iconPadding = st::auctionBidToast.padding,
 					.st = &st::auctionBidToast,
 					.attach = RectPart::Top,
 					.duration = kBidPlacedToastDuration,
@@ -848,32 +848,31 @@ reactPanelScrollRounded: ScrollArea(emojiScroll) {
 	deltab: 14px;
 }
 selfForwardsTaggerStripSkip: 26px;
-selfForwardsTaggerIcon: size(32px, 32px);
+
+selfForwardsTaggerIconPadding: margins(14px, 2px, 8px, 2px);
 selfForwardsTaggerToast: Toast(defaultToast) {
 	minWidth: 160px;
 	maxWidth: 380px;
 	radius: 9px;
-	padding: margins(54px, 12px, 19px, 12px);
-	iconPosition: point(15px, 6px);
+	padding: margins(19px, 12px, 19px, 12px);
 }
 joinChatAddToFilterToast: Toast(defaultToast) {
 	minWidth: 160px;
 	maxWidth: 380px;
 	radius: 9px;
-	padding: margins(54px, 12px, 44px, 12px);
-	iconPosition: point(15px, 6px);
+	padding: margins(7px, 12px, 44px, 12px);
 }
 joinChatAddToFilterToastButton: IconButton(defaultIconButton) {
 	width: 40px;
 	height: 40px;

 	icon: icon{
-		{ "chat/reactions_round_small", windowBgRipple },
-		{ "chat/reactions_expand_panel", windowSubTextFg },
+		{ "chat/reactions_round_small", toastFg },
+		{ "chat/reactions_expand_panel", toastBg },
 	};
 	iconOver: icon{
-		{ "chat/reactions_round_small", windowBgRipple },
-		{ "chat/reactions_expand_panel", windowSubTextFg },
+		{ "chat/reactions_round_small", toastFg },
+		{ "chat/reactions_expand_panel", toastBg },
 	};
 	rippleAreaPosition: point(10px, 10px);
 	rippleAreaSize: 20px;
@@ -17,7 +17,6 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "main/main_session.h"
 #include "ui/boxes/confirm_box.h"
 #include "ui/toast/toast.h"
-#include "ui/toast/toast_lottie_icon.h"
 #include "ui/widgets/popup_menu.h"
 #include "base/qthelp_regex.h"
 #include "base/qt/qt_key_modifiers.h"
@@ -185,20 +184,15 @@ void DoneSetReminder(std::shared_ptr<ChatHelpers::Show> show) {
 		}
 		return false;
 	};
-	const auto toast = show->showToast({
+	show->showToast({
 		.text = text,
 		.filter = filter,
+		.iconLottie = u"toast/saved_messages"_q,
+		.iconPadding = st::selfForwardsTaggerIconPadding,
 		.st = &st::selfForwardsTaggerToast,
 		.attach = RectPart::Top,
 		.duration = kReminderSetToastDuration,
 	});
-	if (const auto strong = toast.get()) {
-		Ui::AddLottieToToast(
-			strong->widget(),
-			st::selfForwardsTaggerToast,
-			st::selfForwardsTaggerIcon,
-			u"toast/saved_messages"_q);
-	}
 };

 } // namespace
@@ -16,6 +16,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "main/main_session.h"
 #include "ui/toast/toast.h"
 #include "window/window_session_controller.h"
+#include "styles/style_chat.h"

 namespace Core::DeepLinks {
 namespace {
@@ -92,6 +93,7 @@ Result ShowNewBot(const Context &ctx) {
 									tr::now,
 									lt_parent_name,
 									managerBot->name()) },
+								.icon = &st::toastCheckIcon,
 							});
 						}
 					},
@@ -10,6 +10,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/toast/toast.h"
 #include "core/ui_integration.h"
 #include "styles/style_chat.h"
+#include "styles/style_widgets.h"

 namespace HistoryView {

@@ -35,6 +36,7 @@ void InfoTooltip::show(
 	_topToast = Ui::Toast::Show(parent, Ui::Toast::Config{
 		.text = text,
 		.textContext = Core::TextContext({ .session = session }),
+		.icon = &st::historyInfoToastIcon,
 		.st = &st::historyInfoToast,
 		.attach = RectPart::Top,
 		.duration = CountToastDuration(text),
@@ -27,7 +27,6 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/text/text_utilities.h"
 #include "ui/toast/toast_widget.h"
 #include "ui/toast/toast.h"
-#include "ui/toast/toast_lottie_icon.h"
 #include "ui/widgets/buttons.h"
 #include "ui/widgets/popup_menu.h"
 #include "ui/widgets/tooltip.h"
@@ -227,30 +226,21 @@ void SelfForwardsTagger::showToast(
 		.textContext = Core::TextContext({
 			.session = &_controller->session(),
 		}),
+		.iconLottie = u"toast/saved_messages"_q,
+		.iconPadding = st::selfForwardsTaggerIconPadding,
 		.st = &st::selfForwardsTaggerToast,
 		.attach = RectPart::Top,
 		.infinite = true,
 	});
 	if (const auto strong = _toast.get()) {
-		const auto widget = strong->widget();
-		createLottieIcon(widget, u"toast/saved_messages"_q);
 		if (callback) {
-			QObject::connect(widget, &QObject::destroyed, callback);
+			QObject::connect(strong->widget(), &QObject::destroyed, callback);
 		}
 	} else if (callback) {
 		callback();
 	}
 }

-void SelfForwardsTagger::createLottieIcon(
-		not_null<QWidget*> widget,
-		const QString &name) {
-	Ui::AddLottieToToast(
-		widget,
-		st::selfForwardsTaggerToast,
-		st::selfForwardsTaggerIcon,
-		name);
-}

 void SelfForwardsTagger::showTaggedToast(DocumentId reaction) {
 	auto text = tr::lng_message_tagged_with(
@@ -271,6 +261,8 @@ void SelfForwardsTagger::showTaggedToast(DocumentId reaction) {
 		.textContext = Core::TextContext({
 			.session = &_controller->session(),
 		}),
+		.iconLottie = u"toast/tagged"_q,
+		.iconPadding = st::selfForwardsTaggerIconPadding,
 		.padding = rpl::single(QMargins(0, 0, rightSkip, 0)),
 		.st = &st,
 		.attach = RectPart::Top,
@@ -279,7 +271,6 @@ void SelfForwardsTagger::showTaggedToast(DocumentId reaction) {
 	});
 	if (const auto strong = _toast.get()) {
 		const auto widget = strong->widget();
-		createLottieIcon(widget, u"toast/tagged"_q);

 		const auto button = Ui::CreateChild<Ui::AbstractButton>(widget.get());
 		button->setClickedCallback([=] {
@@ -321,6 +312,8 @@ void SelfForwardsTagger::showChannelFilterToast(not_null<PeerData*> peer) {
 		: tr::lng_add_group_to_filter_selector(tr::now);
 	_toast = Ui::Toast::Show(_scroll, Ui::Toast::Config{
 		.text = { .text = toastText },
+		.iconLottie = u"toast/chats_filter_in"_q,
+		.iconPadding = st::selfForwardsTaggerIconPadding,
 		.st = &st::joinChatAddToFilterToast,
 		.attach = RectPart::Top,
 		.acceptinput = true,
@@ -328,7 +321,6 @@ void SelfForwardsTagger::showChannelFilterToast(not_null<PeerData*> peer) {
 	});
 	if (const auto strong = _toast.get()) {
 		const auto widget = strong->widget();
-		createLottieIcon(widget, u"toast/chats_filter_in"_q);
 		const auto rightButton = createRightButton(widget);
 		const auto history = peer->owner().history(peer);

@@ -60,7 +60,6 @@ private:
 	void showToast(const TextWithEntities &text, Fn<void()> callback);
 	void showTaggedToast(DocumentId);
 	void showChannelFilterToast(not_null<PeerData*> peer);
-	void createLottieIcon(not_null<QWidget*> widget, const QString &name);
 	not_null<Ui::AbstractButton*> createRightButton(
 		not_null<Ui::RpWidget*> widget);
 	void setupToastTimer(
@@ -67,6 +67,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "styles/style_info.h"
 #include "styles/style_layers.h"
 #include "styles/style_settings.h"
+#include "styles/style_widgets.h"

 namespace Settings {
 namespace {
@@ -1918,6 +1919,7 @@ void ShowPremiumPromoToast(
 			}
 			return false;
 		}),
+		.icon = &st::settingsToastStarIcon,
 		.adaptive = true,
 		.duration = Ui::Toast::kDefaultDuration * 2,
 	});
@@ -789,3 +789,6 @@ detailedSettingsButtonStyle: DetailedSettingsButtonStyle {
 	descriptionBottomSkip: 8px;
 	descriptionRightSkip: 4px;
 }
+
+settingsToastStarIcon: icon {{ "toast/star", toastFg }};
+
@@ -425,10 +425,9 @@ historyDiceToast: Toast(defaultToast) {
 historyInfoToast: Toast(defaultToast) {
 	minWidth: msgMinWidth;
 	maxWidth: 380px;
-	padding: margins(54px, 13px, 19px, 12px);
-	icon: icon {{ "toast_info", toastFg }};
-	iconPosition: point(13px, 13px);
+	padding: margins(13px, 13px, 19px, 12px);
 }
+historyInfoToastIcon: icon {{ "toast/info", toastFg }};

 bubbleRadiusSmall: roundRadiusLarge;
 bubbleRadiusLarge: 16px;
@@ -1538,3 +1537,6 @@ stateChangeBadgeMargin: margins(0px, 1px, 0px, 0px);

 historySummaryHeaderIconSize: 30px;
 historySummaryHeaderIconSizeInner: 5px;
+
+toastCheckIcon: icon {{ "toast/check-36x36", toastFg }};
+toastCheckIconPadding: margins(12px, 8px, 12px, 8px);
@@ -560,10 +560,9 @@ auctionBidEmoji: IconEmoji {
 	padding: margins(-4px, -2px, -4px, 0px);
 }
 auctionBidToast: Toast(defaultToast) {
-	padding: margins(54px, 13px, 19px, 12px);
-	icon: icon {{ "settings/toast_auction", toastFg }};
-	iconPosition: point(18px, 18px);
+	padding: margins(19px, 13px, 19px, 12px);
 }
+auctionBidToastIcon: icon {{ "toast/auction", toastFg }};
 auctionAboutLogo: icon {{ "settings/large_auctions", windowFgActive }};
 auctionAboutLogoPadding: margins(8px, 8px, 8px, 8px);
 auctionAboutTextPadding: margins(0px, 6px, 0px, 8px);
@@ -1,45 +0,0 @@
-/*
-This file is part of Telegram Desktop,
-the official desktop application for the Telegram messaging service.
-
-For license and copyright information please follow this link:
-https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
-*/
-#include "ui/toast/toast_lottie_icon.h"
-
-#include "lottie/lottie_icon.h"
-#include "ui/rp_widget.h"
-#include "styles/style_widgets.h"
-
-namespace Ui {
-
-void AddLottieToToast(
-		not_null<QWidget*> widget,
-		const style::Toast &st,
-		QSize iconSize,
-		const QString &name) {
-	const auto lottieWidget = CreateChild<RpWidget>(widget);
-	struct State {
-		std::unique_ptr<Lottie::Icon> lottieIcon;
-	};
-	const auto state = lottieWidget->lifetime().make_state<State>();
-	state->lottieIcon = Lottie::MakeIcon({
-		.name = name,
-		.sizeOverride = iconSize,
-	});
-	const auto icon = state->lottieIcon.get();
-	lottieWidget->resize(iconSize);
-	lottieWidget->move(st.iconPosition);
-	lottieWidget->show();
-	lottieWidget->raise();
-	icon->animate(
-		[=] { lottieWidget->update(); },
-		0,
-		icon->framesCount() - 1);
-	lottieWidget->paintRequest() | rpl::on_next([=] {
-		auto p = QPainter(lottieWidget);
-		icon->paint(p, 0, 0);
-	}, lottieWidget->lifetime());
-}
-
-} // namespace Ui
@@ -1,24 +0,0 @@
-/*
-This file is part of Telegram Desktop,
-the official desktop application for the Telegram messaging service.
-
-For license and copyright information please follow this link:
-https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
-*/
-#pragma once
-
-class QWidget;
-
-namespace style {
-struct Toast;
-} // namespace style
-
-namespace Ui {
-
-void AddLottieToToast(
-	not_null<QWidget*> widget,
-	const style::Toast &st,
-	QSize iconSize,
-	const QString &name);
-
-} // namespace Ui