Closed beta 10020007: New selected messages count animation.

Telegram/Resources/colors.palette

@@ -258,21 +258,21 @@ historyForwardChooseBg: #0000004c;
 historyForwardChooseFg: windowFgActive;
 
 historyPeer1NameFg: #c03d33; // red
-historyPeer1UserpicBg: #e57979;
+historyPeer1UserpicBg: #e17076;
 historyPeer2NameFg: #4fad2d; // green
-historyPeer2UserpicBg: #80d066;
+historyPeer2UserpicBg: #7bc862;
 historyPeer3NameFg: #d09306; // yellow
-historyPeer3UserpicBg: #ecd074;
+historyPeer3UserpicBg: #e5ca77;
 historyPeer4NameFg: windowActiveTextFg; // blue
-historyPeer4UserpicBg: #6fb1e4;
+historyPeer4UserpicBg: #65aadd;
 historyPeer5NameFg: #8544d6; // purple
-historyPeer5UserpicBg: #cc90e2;
+historyPeer5UserpicBg: #a695e7;
 historyPeer6NameFg: #cd4073; // pink
-historyPeer6UserpicBg: #f078ae;
+historyPeer6UserpicBg: #ee7aae;
 historyPeer7NameFg: #2996ad; // sea
-historyPeer7UserpicBg: #73cdd0;
+historyPeer7UserpicBg: #6ec9cb;
 historyPeer8NameFg: #ce671b; // orange
-historyPeer8UserpicBg: #fba76f;
+historyPeer8UserpicBg: #faa774;
 historyPeerUserpicFg: windowFgActive;
 
 historyScrollBarBg: #556e837a;

Telegram/Resources/sample.tdesktop-theme

@@ -214,21 +214,21 @@ historyUnreadBarFg: #538bb4;
 historyForwardChooseBg: #0000004c;
 historyForwardChooseFg: #ffffff; // windowActiveTextFg;
 historyPeer1NameFg: #c03d33;
-historyPeer1UserpicBg: #e57979;
+historyPeer1UserpicBg: #e17076;
 historyPeer2NameFg: #4fad2d;
-historyPeer2UserpicBg: #80d066;
+historyPeer2UserpicBg: #7bc862;
 historyPeer3NameFg: #d09306;
-historyPeer3UserpicBg: #ecd074;
+historyPeer3UserpicBg: #e5ca77;
 historyPeer4NameFg: #168acd; // windowShadowFg;
-historyPeer4UserpicBg: #6fb1e4;
+historyPeer4UserpicBg: #65aadd;
 historyPeer5NameFg: #8544d6;
-historyPeer5UserpicBg: #cc90e2;
+historyPeer5UserpicBg: #a695e7;
 historyPeer6NameFg: #cd4073;
-historyPeer6UserpicBg: #f078ae;
+historyPeer6UserpicBg: #ee7aae;
 historyPeer7NameFg: #2996ad;
-historyPeer7UserpicBg: #73cdd0;
+historyPeer7UserpicBg: #6ec9cb;
 historyPeer8NameFg: #ce671b;
-historyPeer8UserpicBg: #fba76f;
+historyPeer8UserpicBg: #faa774;
 historyPeerUserpicFg: #ffffff; // windowActiveTextFg;
 historyScrollBarBg: #556e837a;
 historyScrollBarBgOver: #556e83bc;

Telegram/Resources/winrc/Telegram.rc

@@ -34,8 +34,8 @@ IDI_ICON1               ICON                    "..\\art\\icon256.ico"
 //
 
 VS_VERSION_INFO VERSIONINFO
- FILEVERSION 0,10,20,6
+ FILEVERSION 0,10,20,7
- PRODUCTVERSION 0,10,20,6
+ PRODUCTVERSION 0,10,20,7
  FILEFLAGSMASK 0x3fL
 #ifdef _DEBUG
  FILEFLAGS 0x1L
@@ -51,10 +51,10 @@ BEGIN
         BLOCK "040904b0"
         BEGIN
             VALUE "CompanyName", "Telegram Messenger LLP"
-            VALUE "FileVersion", "0.10.20.6"
+            VALUE "FileVersion", "0.10.20.7"
             VALUE "LegalCopyright", "Copyright (C) 2014-2016"
             VALUE "ProductName", "Telegram Desktop"
-            VALUE "ProductVersion", "0.10.20.6"
+            VALUE "ProductVersion", "0.10.20.7"
         END
     END
     BLOCK "VarFileInfo"

Telegram/Resources/winrc/Updater.rc

@@ -25,8 +25,8 @@ LANGUAGE LANG_ENGLISH, SUBLANG_ENGLISH_US
 //
 
 VS_VERSION_INFO VERSIONINFO
- FILEVERSION 0,10,20,6
+ FILEVERSION 0,10,20,7
- PRODUCTVERSION 0,10,20,6
+ PRODUCTVERSION 0,10,20,7
  FILEFLAGSMASK 0x3fL
 #ifdef _DEBUG
  FILEFLAGS 0x1L
@@ -43,10 +43,10 @@ BEGIN
         BEGIN
             VALUE "CompanyName", "Telegram Messenger LLP"
             VALUE "FileDescription", "Telegram Updater"
-            VALUE "FileVersion", "0.10.20.6"
+            VALUE "FileVersion", "0.10.20.7"
             VALUE "LegalCopyright", "Copyright (C) 2014-2016"
             VALUE "ProductName", "Telegram Desktop"
-            VALUE "ProductVersion", "0.10.20.6"
+            VALUE "ProductVersion", "0.10.20.7"
         END
     END
     BLOCK "VarFileInfo"

Telegram/SourceFiles/core/version.h

@@ -22,7 +22,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 
 #include "core/utils.h"
 
-#define BETA_VERSION_MACRO (10020006ULL)
+#define BETA_VERSION_MACRO (10020007ULL)
 
 constexpr int AppVersion = 10020;
 constexpr str_const AppVersionStr = "0.10.20";

Telegram/SourceFiles/ui/widgets/buttons.cpp

@@ -190,6 +190,168 @@ void FlatButton::paintEvent(QPaintEvent *e) {
 	p.drawText(r, _text, style::al_top);
 }
 
+class RoundButton::Numbers {
+public:
+	Numbers(const style::RoundButton &st, base::lambda<void()> &&animationCallback);
+
+	void setWidthChangedCallback(base::lambda<void()> &&callback) {
+		_widthChangedCallback = std_::move(callback);
+	}
+	void setText(const QString &text, int value);
+	void stepAnimation(TimeMs ms);
+	void finishAnimation();
+
+	void paint(Painter &p, int x, int y, int outerWidth);
+	int countWidth() const;
+
+private:
+	struct Digit {
+		QChar from = 0;
+		QChar to = 0;
+		int fromWidth = 0;
+		int toWidth = 0;
+	};
+
+	void animationCallback();
+	void realSetText(QString text, int value);
+
+	const style::RoundButton &_st;
+
+	QList<Digit> _digits;
+	int _digitWidth = 0;
+
+	int _fromWidth = 0;
+	int _toWidth = 0;
+
+	Animation _a_ready;
+	QString _delayedText;
+	int _delayedValue = 0;
+
+	int _value = 0;
+	bool _growing = false;
+
+	base::lambda<void()> _animationCallback;
+	base::lambda<void()> _widthChangedCallback;
+
+};
+
+RoundButton::Numbers::Numbers(const style::RoundButton &st, base::lambda<void()> &&animationCallback)
+: _st(st)
+, _animationCallback(std_::move(animationCallback)) {
+	for (auto ch = '0'; ch != '9'; ++ch) {
+		accumulate_max(_digitWidth, _st.font->m.width(ch));
+	}
+}
+
+void RoundButton::Numbers::setText(const QString &text, int value) {
+	if (_a_ready.animating(getms())) {
+		_delayedText = text;
+		_delayedValue = value;
+	} else {
+		realSetText(text, value);
+	}
+}
+
+void RoundButton::Numbers::animationCallback() {
+	if (_animationCallback) {
+		_animationCallback();
+	}
+	if (_widthChangedCallback) {
+		_widthChangedCallback();
+	}
+	if (!_a_ready.animating()) {
+		if (!_delayedText.isEmpty()) {
+			setText(_delayedText, _delayedValue);
+		}
+	}
+}
+
+void RoundButton::Numbers::realSetText(QString text, int value) {
+	_delayedText = QString();
+	_delayedValue = 0;
+
+	_growing = (value > _value);
+	_value = value;
+
+	auto newSize = text.size();
+	while (_digits.size() < newSize) {
+		_digits.push_front(Digit());
+	}
+	while (_digits.size() > newSize && !_digits.front().to.unicode()) {
+		_digits.pop_front();
+	}
+	auto oldSize = _digits.size();
+	auto animating = false;
+	for (auto i = 0, size = _digits.size(); i != size; ++i) {
+		auto &digit = _digits[i];
+		digit.from = digit.to;
+		digit.fromWidth = digit.toWidth;
+		digit.to = (newSize + i < size) ? QChar(0) : text[newSize + i - size];
+		digit.toWidth = digit.to.unicode() ? _st.font->m.width(digit.to) : 0;
+		if (digit.from != digit.to) {
+			animating = true;
+		}
+		if (!digit.from.unicode()) {
+			--oldSize;
+		}
+	}
+	_fromWidth = oldSize * _digitWidth;
+	_toWidth = newSize * _digitWidth;
+	if (animating) {
+		_a_ready.start([this] { animationCallback(); }, 0., 1., _st.numbersDuration);
+	}
+}
+
+int RoundButton::Numbers::countWidth() const {
+	return anim::interpolate(_fromWidth, _toWidth, anim::easeOutCirc(1., _a_ready.current(1.)));
+}
+
+void RoundButton::Numbers::stepAnimation(TimeMs ms) {
+	_a_ready.step(ms);
+}
+
+void RoundButton::Numbers::finishAnimation() {
+	auto width = countWidth();
+	_a_ready.finish();
+	if (_widthChangedCallback && countWidth() != width) {
+		_widthChangedCallback();
+	}
+	if (!_delayedText.isEmpty()) {
+		setText(_delayedText, _delayedValue);
+	}
+}
+
+void RoundButton::Numbers::paint(Painter &p, int x, int y, int outerWidth) {
+	auto digitsCount = _digits.size();
+	if (!digitsCount) return;
+
+	auto progress = anim::easeOutCirc(1., _a_ready.current(1.));
+	auto width = anim::interpolate(_fromWidth, _toWidth, progress);
+
+	QString singleChar('0');
+	if (rtl()) x = outerWidth - x - width;
+	x += width - _digits.size() * _digitWidth;
+	auto fromTop = anim::interpolate(0, _st.font->height, progress) * (_growing ? 1 : -1);
+	auto toTop = anim::interpolate(_st.font->height, 0, progress) * (_growing ? -1 : 1);
+	for (auto i = 0; i != digitsCount; ++i) {
+		auto &digit = _digits[i];
+		auto from = digit.from;
+		auto to = digit.to;
+		if (from.unicode()) {
+			p.setOpacity(1. - progress);
+			singleChar[0] = from;
+			p.drawText(x + (_digitWidth - digit.fromWidth) / 2, y + fromTop + _st.font->ascent, singleChar);
+		}
+		if (to.unicode()) {
+			p.setOpacity(progress);
+			singleChar[0] = to;
+			p.drawText(x + (_digitWidth - digit.toWidth) / 2, y + toTop + _st.font->ascent, singleChar);
+		}
+		x += _digitWidth;
+	}
+	p.setOpacity(1.);
+}
+
 RoundButton::RoundButton(QWidget *parent, const QString &text, const style::RoundButton &st) : RippleButton(parent, st.ripple)
 , _fullText(text)
 , _st(st) {
@@ -206,11 +368,42 @@ void RoundButton::setText(const QString &text) {
 	updateText();
 }
 
-void RoundButton::setSecondaryText(const QString &secondaryText) {
+void RoundButton::setNumbersText(const QString &numbersText, int numbers) {
-	_fullSecondaryText = secondaryText;
+	if (numbersText.isEmpty()) {
+		_numbers.reset();
+	} else {
+		if (!_numbers) {
+			_numbers = std_::make_unique<Numbers>(_st, [this] { numbersAnimationCallback(); });
+		}
+		_numbers->setText(numbersText, numbers);
+	}
 	updateText();
 }
 
+void RoundButton::setWidthChangedCallback(base::lambda<void()> &&callback) {
+	if (!_numbers) {
+		_numbers = std_::make_unique<Numbers>(_st, [this] { numbersAnimationCallback(); });
+	}
+	_numbers->setWidthChangedCallback(std_::move(callback));
+}
+
+void RoundButton::stepNumbersAnimation(TimeMs ms) {
+	if (_numbers) {
+		_numbers->stepAnimation(ms);
+	}
+}
+
+void RoundButton::finishNumbersAnimation() {
+	if (_numbers) {
+		_numbers->finishAnimation();
+	}
+}
+
+void RoundButton::numbersAnimationCallback() {
+	resizeToText();
+	update();
+}
+
 void RoundButton::setFullWidth(int newFullWidth) {
 	_fullWidthOverride = newFullWidth;
 	resizeToText();
@@ -219,13 +412,10 @@ void RoundButton::setFullWidth(int newFullWidth) {
 void RoundButton::updateText() {
 	if (_transform == TextTransform::ToUpper) {
 		_text = _fullText.toUpper();
-		_secondaryText = _fullSecondaryText.toUpper();
 	} else {
 		_text = _fullText;
-		_secondaryText = _fullSecondaryText;
 	}
 	_textWidth = _text.isEmpty() ? 0 : _st.font->width(_text);
-	_secondaryTextWidth = _secondaryText.isEmpty() ? 0 : _st.font->width(_secondaryText);
 
 	resizeToText();
 	update();
@@ -251,9 +441,9 @@ void RoundButton::resizeToText() {
 }
 
 int RoundButton::contentWidth() const {
-	int result = _textWidth + _secondaryTextWidth;
+	auto result = _textWidth;
-	if (_textWidth > 0 && _secondaryTextWidth > 0) {
+	if (_numbers) {
-		result += _st.secondarySkip;
+		result += (result ? _st.numbersSkip : 0) + _numbers->countWidth();
 	}
 	return result;
 }
@@ -287,10 +477,10 @@ void RoundButton::paintEvent(QPaintEvent *e) {
 		p.setPen((over || down) ? _st.textFgOver : _st.textFg);
 		p.drawTextLeft(textLeft, textTop, width(), _text);
 	}
-	if (!_secondaryText.isEmpty()) {
+	if (_numbers) {
-		textLeft += _textWidth + (_textWidth ? _st.secondarySkip : 0);
+		textLeft += _textWidth + (_textWidth ? _st.numbersSkip : 0);
-		p.setPen((over || down) ? _st.secondaryTextFgOver : _st.secondaryTextFg);
+		p.setPen((over || down) ? _st.numbersTextFgOver : _st.numbersTextFg);
-		p.drawTextLeft(textLeft, textTop, width(), _secondaryText);
+		_numbers->paint(p, textLeft, textTop, width());
 	}
 	_st.icon.paint(p, QPoint(_st.padding.left(), _st.padding.right()), width());
 }
@@ -308,6 +498,8 @@ QPoint RoundButton::prepareRippleStartPosition() const {
 	return mapFromGlobal(QCursor::pos()) - QPoint(_st.padding.left(), _st.padding.top());
 }
 
+RoundButton::~RoundButton() = default;
+
 IconButton::IconButton(QWidget *parent, const style::IconButton &st) : RippleButton(parent, st.ripple)
 , _st(st) {
 	resize(_st.width, _st.height);

Telegram/SourceFiles/ui/widgets/buttons.h

@@ -114,7 +114,16 @@ public:
 	RoundButton(QWidget *parent, const QString &text, const style::RoundButton &st);
 
 	void setText(const QString &text);
-	void setSecondaryText(const QString &secondaryText);
+
+	void setNumbersText(const QString &numbersText) {
+		setNumbersText(numbersText, numbersText.toInt());
+	}
+	void setNumbersText(int numbers) {
+		setNumbersText(QString::number(numbers), numbers);
+	}
+	void setWidthChangedCallback(base::lambda<void()> &&callback);
+	void stepNumbersAnimation(TimeMs ms);
+	void finishNumbersAnimation();
 
 	int contentWidth() const;
 
@@ -126,6 +135,8 @@ public:
 	};
 	void setTextTransform(TextTransform transform);
 
+	~RoundButton();
+
 protected:
 	void paintEvent(QPaintEvent *e) override;
 
@@ -133,14 +144,16 @@ protected:
 	QPoint prepareRippleStartPosition() const override;
 
 private:
+	void setNumbersText(const QString &numbersText, int numbers);
+	void numbersAnimationCallback();
 	void updateText();
 	void resizeToText();
 
 	QString _text, _fullText;
 	int _textWidth;
 
-	QString _secondaryText, _fullSecondaryText;
+	class Numbers;
-	int _secondaryTextWidth = 0;
+	std_::unique_ptr<Numbers> _numbers;
 
 	int _fullWidthOverride = 0;
 

Telegram/SourceFiles/ui/widgets/widgets.style

@@ -74,9 +74,10 @@ RoundButton {
 	textBg: color; // rect of textBg with rounded rect of textBgOver upon it
 	textBgOver: color;
 
-	secondaryTextFg: color;
+	numbersTextFg: color;
-	secondaryTextFgOver: color;
+	numbersTextFgOver: color;
-	secondarySkip: pixels;
+	numbersSkip: pixels;
+	numbersDuration: int;
 
 	width: pixels;
 	height: pixels;
@@ -470,12 +471,13 @@ emptyRippleAnimation: RippleAnimation {
 defaultActiveButton: RoundButton {
 	textFg: activeButtonFg;
 	textFgOver: activeButtonFgOver;
-	secondaryTextFg: activeButtonSecondaryFg;
+	numbersTextFg: activeButtonSecondaryFg;
-	secondaryTextFgOver: activeButtonSecondaryFgOver;
+	numbersTextFgOver: activeButtonSecondaryFgOver;
 	textBg: activeButtonBg;
 	textBgOver: activeButtonBgOver;
 
-	secondarySkip: 7px;
+	numbersSkip: 7px;
+	numbersDuration: 200;
 
 	width: -34px;
 	height: 34px;
@@ -493,8 +495,8 @@ defaultActiveButton: RoundButton {
 defaultLightButton: RoundButton(defaultActiveButton) {
 	textFg: lightButtonFg;
 	textFgOver: lightButtonFgOver;
-	secondaryTextFg: lightButtonFg;
+	numbersTextFg: lightButtonFg;
-	secondaryTextFgOver: lightButtonFgOver;
+	numbersTextFgOver: lightButtonFgOver;
 	textBg: lightButtonBg;
 	textBgOver: lightButtonBgOver;
 

Telegram/SourceFiles/window/top_bar_widget.cpp

@@ -44,7 +44,9 @@ TopBarWidget::TopBarWidget(MainWidget *w) : TWidget(w)
 , _search(this, st::topBarSearch)
 , _menuToggle(this, st::topBarMenuToggle) {
 	_forward->setClickedCallback([this] { onForwardSelection(); });
+	_forward->setWidthChangedCallback([this] { updateControlsGeometry(); });
 	_delete->setClickedCallback([this] { onDeleteSelection(); });
+	_delete->setWidthChangedCallback([this] { updateControlsGeometry(); });
 	_clearSelection->setClickedCallback([this] { onClearSelection(); });
 	_info->setClickedCallback([this] { onInfoClicked(); });
 	_search->setClickedCallback([this] { onSearch(); });
@@ -156,6 +158,9 @@ bool TopBarWidget::eventFilter(QObject *obj, QEvent *e) {
 void TopBarWidget::paintEvent(QPaintEvent *e) {
 	Painter p(this);
 
+	auto ms = getms();
+	_forward->stepNumbersAnimation(ms);
+	_delete->stepNumbersAnimation(ms);
 	auto hasSelected = (_selectedCount > 0);
 	auto selectedButtonsTop = countSelectedButtonsTop(_selectedShown.current(getms(), hasSelected ? 1. : 0.));
 
@@ -174,7 +179,6 @@ void TopBarWidget::paintEvent(QPaintEvent *e) {
 		if (!_search->isHidden()) {
 			decreaseWidth += _search->width();
 		}
-		auto ms = getms();
 		auto paintCounter = main()->paintTopBar(p, decreaseWidth, ms);
 		p.restore();
 
@@ -325,16 +329,24 @@ void TopBarWidget::updateMembersShowArea() {
 }
 
 void TopBarWidget::showSelected(int selectedCount, bool canDelete) {
-	if (_selectedCount == selectedCount) {
+	if (_selectedCount == selectedCount && _canDelete == canDelete) {
 		return;
 	}
+	if (selectedCount == 0) {
+		// Don't change the visible buttons if the selection is cancelled.
+		canDelete = _canDelete;
+	}
 
 	auto wasSelected = (_selectedCount > 0);
 	_selectedInPeer = App::main()->overviewPeer() ? App::main()->overviewPeer() : App::main()->peer();
 	_selectedCount = selectedCount;
 	if (_selectedCount > 0) {
-		_forward->setSecondaryText(QString::number(_selectedCount));
+		_forward->setNumbersText(_selectedCount);
-		_delete->setSecondaryText(QString::number(_selectedCount));
+		_delete->setNumbersText(_selectedCount);
+		if (!wasSelected) {
+			_forward->finishNumbersAnimation();
+			_delete->finishNumbersAnimation();
+		}
 	}
 	auto hasSelected = (_selectedCount > 0);
 	if (_canDelete != canDelete) {

Telegram/SourceFiles/window/window.style

@@ -222,7 +222,7 @@ topBarInfoButton: PeerAvatarButton {
 	size: topBarHeight;
 	photoSize: 42px;
 }
-topBarSlideDuration: 150;
+topBarSlideDuration: 200;
 
 // Mac specific
 

Telegram/SourceFiles/window/window_theme_preview.cpp

@@ -310,21 +310,20 @@ void Generator::generateData() {
 	addRow("Eva Summer", 0, "11:00", "Reminds me of a Chinese proverb: the best time to plant a tree was 20 years ago.");
 	_rows.back().active = true;
 	_rows.back().pinned = true;
-	addRow("Alexandra Smith", 1, "10:00", "This is amazing!");
+	addRow("Alexandra Smith", 7, "10:00", "This is amazing!");
 	_rows.back().unreadCounter = 2;
 	addRow("Mike Apple", 2, "9:00", textcmdLink(1, QChar(55357) + QString() + QChar(56836) + " Sticker"));
 	_rows.back().unreadCounter = 2;
 	_rows.back().muted = true;
-	addRow("Evening Club", 3, "8:00", textcmdLink(1, "Eva: Photo"));
+	addRow("Evening Club", 1, "8:00", textcmdLink(1, "Eva: Photo"));
 	_rows.back().type = Row::Type::Group;
-	addRow("Old Pirates", 4, "7:00", textcmdLink(1, "Max:") + " Yo-ho-ho!");
+	addRow("Old Pirates", 6, "7:00", textcmdLink(1, "Max:") + " Yo-ho-ho!");
 	_rows.back().type = Row::Type::Group;
-	addRow("Max Bright", 5, "6:00", "How about some coffee?");
+	addRow("Max Bright", 3, "6:00", "How about some coffee?");
 	_rows.back().status = Status::Received;
-	addRow("Natalie Parker", 6, "5:00", "OK, great)");
+	addRow("Natalie Parker", 4, "5:00", "OK, great)");
 	_rows.back().status = Status::Received;
-	addRow("Davy Jones", 7, "4:00", textcmdLink(1, "Keynote.pdf"));
+	addRow("Davy Jones", 5, "4:00", textcmdLink(1, "Keynote.pdf"));
-	addRow("Eva Summer", 8, "3:00", "Reminds me of a Chinese proverb: the best time to plant a tree was 20 years ago.");
 
 	_topBarName.setText(st::msgNameStyle, "Eva Summer", _textNameOptions);
 	_topBarStatus = "online";

Telegram/build/version

@@ -3,4 +3,4 @@ AppVersionStrMajor 0.10
 AppVersionStrSmall 0.10.20
 AppVersionStr      0.10.20
 AlphaChannel       0
-BetaVersion        10020006
+BetaVersion        10020007