Improve reactions expanding animation.

Telegram/SourceFiles/chat_helpers/chat_helpers.style

@@ -73,7 +73,7 @@ stickersTrendingSubheaderFg: windowSubTextFg;
 stickersTrendingSubheaderTop: 31px;
 
 emojiPanButtonRight: 7px;
-emojiPanButtonTop: 0px;
+emojiPanButtonTop: 8px;
 emojiPanButton: RoundButton(defaultActiveButton) {
 	width: -24px;
 	height: 23px;
@@ -259,11 +259,11 @@ defaultEmojiPan: EmojiPan {
 	padding: margins(7px, 0px, 4px, 7px);
 	desiredSize: 37px;
 	verticalSizeSub: 1px;
-	header: 25px;
+	header: 33px;
 	headerLeft: 14px;
 	headerLockLeft: 7px;
 	headerLockedLeft: 26px;
-	headerTop: 2px;
+	headerTop: 10px;
 	footer: 36px;
 	iconSkip: 3px;
 	iconWidth: 30px;
@@ -287,7 +287,7 @@ inlineResultsMaxHeight: 640px;
 
 emojiPanHeaderFont: semiboldFont;
 emojiPanRemoveSkip: 10px;
-emojiPanRemoveTop: 2px;
+emojiPanRemoveTop: 10px;
 
 emojiColorsPadding: 5px;
 emojiColorsSep: 1px;
@@ -410,15 +410,17 @@ reactPanelEmojiPan: EmojiPan(statusEmojiPan) {
 	verticalSizeSub: 0px;
 	overBg: transparent;
 }
-reactPanelScroll: ScrollArea(defaultSolidScroll) {
+emojiScroll: ScrollArea(defaultSolidScroll) {
 	deltat: 3px;
 	deltab: 3px;
-	round: 1px;
+	round: -1px;
 	width: 7px;
 	deltax: 2px;
 	hiding: 0;
 }
-emojiScroll: reactPanelScroll;
+reactPanelScroll: ScrollArea(emojiScroll) {
+	deltab: 7px;
+}
 
 emojiSuggestionsFadeLeft: icon {{ "fade_horizontal-flip_horizontal", boxBg }};
 emojiSuggestionsFadeRight: icon {{ "fade_horizontal", boxBg }};

Telegram/SourceFiles/chat_helpers/emoji_list_widget.cpp

@@ -608,15 +608,34 @@ rpl::producer<> EmojiListWidget::jumpedToPremium() const {
 	return _jumpedToPremium.events();
 }
 
+void EmojiListWidget::prepareExpanding() {
+	if (_search) {
+		_searchExpandCache = _search->grab();
+	}
+}
+
 void EmojiListWidget::paintExpanding(
 		QPainter &p,
 		QRect clip,
 		int finalBottom,
 		float64 progress,
 		RectPart origin) {
-	const auto shift = clip.topLeft();
+	const auto searchShift = _search
+		? anim::interpolate(
+			st().padding.top() - _search->height(),
+			0,
+			progress)
+		: 0;
+	const auto shift = clip.topLeft() + QPoint(0, searchShift);
 	const auto adjusted = clip.translated(-shift);
 	const auto finalHeight = (finalBottom - clip.y());
+	if (!_searchExpandCache.isNull()) {
+		p.setClipRect(clip);
+		p.drawImage(
+			clip.x() + st().searchMargin.left(),
+			clip.y() + st().searchMargin.top() + searchShift,
+			_searchExpandCache);
+	}
 	p.translate(shift);
 	p.setClipRect(adjusted);
 	paint(p, ExpandingContext{
@@ -712,8 +731,7 @@ bool EmojiListWidget::enumerateSections(Callback callback) const {
 		info.rowsTop = info.top
 			+ (i == 0 ? _rowsTop : st().header);
 		info.rowsBottom = info.rowsTop
-			+ (info.rowsCount * _singleSize.height())
-			+ st::emojiPanRadius;
+			+ (info.rowsCount * _singleSize.height());
 		if (!callback(info)) {
 			return false;
 		}
@@ -807,13 +825,12 @@ int EmojiListWidget::countDesiredHeight(int newWidth) {
 		- st().margin.left();
 	setSingleSize({ singleWidth, singleWidth - 2 * st().verticalSizeSub });
 
-	auto visibleHeight = minimalHeight();
-	auto minimalHeight = (visibleHeight - st::stickerPanPadding);
-	auto countResult = [this](int minimalLastHeight) {
+	const auto countResult = [this](int minimalLastHeight) {
 		const auto info = sectionInfo(sectionsCount() - 1);
 		return info.top
 			+ qMax(info.rowsBottom - info.top, minimalLastHeight);
 	};
+	const auto minimalHeight = this->minimalHeight();
 	const auto minimalLastHeight = std::max(
 		minimalHeight - padding.bottom(),
 		0);
@@ -948,6 +965,9 @@ void EmojiListWidget::paintEvent(QPaintEvent *e) {
 	} else if (st().bg->c.alpha() > 0) {
 		p.fillRect(clip, st().bg);
 	}
+	if (!_searchExpandCache.isNull()) {
+		_searchExpandCache = QImage();
+	}
 
 	paint(p, {}, clip);
 }

Telegram/SourceFiles/chat_helpers/emoji_list_widget.h

@@ -119,6 +119,7 @@ public:
 
 	void provideRecent(const std::vector<DocumentId> &customRecentList);
 
+	void prepareExpanding();
 	void paintExpanding(
 		QPainter &p,
 		QRect clip,
@@ -361,6 +362,7 @@ private:
 	int _customSingleSize = 0;
 	bool _allowWithoutPremium = false;
 	Ui::RoundRect _overBg;
+	QImage _searchExpandCache;
 
 	std::vector<QString> _nextSearchQuery;
 	std::vector<QString> _searchQuery;

Telegram/SourceFiles/history/view/reactions/history_view_reactions_selector.cpp

@@ -247,7 +247,7 @@ int Selector::extendTopForCategories() const {
 int Selector::minimalHeight() const {
 	return _skipy
 		+ (_recentRows * _size)
-		+ st::roundRadiusSmall
+		+ st::emojiPanRadius
 		+ st::reactPanelEmojiPan.padding.bottom();
 }
 
@@ -431,7 +431,7 @@ auto Selector::paintExpandingBg(QPainter &p, float64 progress)
 	constexpr auto kFramesCount = Ui::RoundAreaWithShadow::kFramesCount;
 	const auto frame = int(base::SafeRound(progress * (kFramesCount - 1)));
 	const auto radiusStart = st::reactStripHeight / 2.;
-	const auto radiusEnd = st::roundRadiusSmall;
+	const auto radiusEnd = st::emojiPanRadius;
 	const auto radius = _reactions.customAllowed
 		? (radiusStart + progress * (radiusEnd - radiusStart))
 		: radiusStart;
@@ -521,7 +521,7 @@ void Selector::finishExpand() {
 		const auto pattern = _cachedRound.validateFrame(
 			kFramesCount - 1,
 			1.,
-			st::roundRadiusSmall);
+			st::emojiPanRadius);
 		const auto fill = _cachedRound.FillWithImage(q, rect(), pattern);
 		if (!fill.isEmpty()) {
 			q.fillRect(fill, st::defaultPopupMenu.menu.itemBg);
@@ -677,6 +677,7 @@ void Selector::expand() {
 	cacheExpandIcon();
 
 	[[maybe_unused]] const auto grabbed = Ui::GrabWidget(_scroll);
+	_list->prepareExpanding();
 	setSelected(-1);
 
 	base::call_delayed(kExpandDelay, this, [this] {

Telegram/SourceFiles/ui/controls/tabbed_search.cpp

@@ -633,6 +633,10 @@ int TabbedSearch::height() const {
 	return _search.height() + rect::m::sum::v(_st.searchMargin);
 }
 
+QImage TabbedSearch::grab() {
+	return Ui::GrabWidgetToImage(&_search);
+}
+
 void TabbedSearch::setLoading(bool loading) {
 	_search.setLoading(loading);
 }

Telegram/SourceFiles/ui/controls/tabbed_search.h

@@ -112,6 +112,7 @@ public:
 		SearchDescriptor &&descriptor);
 
 	[[nodiscard]] int height() const;
+	[[nodiscard]] QImage grab();
 
 	[[nodiscard]] rpl::producer<std::vector<QString>> queryValue() const;
 	[[nodiscard]] auto debouncedQueryValue() const