Some more icons moved from sprite.

Telegram/Resources/basic.style

@@ -346,7 +346,7 @@ versionColor: #777;
 shadowColor: rgba(0, 0, 0, 24);
 shadowToggleDuration: 200;
 
-slideDuration: 2400;
+slideDuration: 240;
 slideShift: 100px;
 slideFadeOut: 0.3;
 slideShadow: icon {{ "slide_shadow", #000000 }};
@@ -704,7 +704,7 @@ introBackButton: IconButton {
 
 	icon: icon {
 		{ size(40px, 40px), #eeeeee },
-		{ "intro_back_button", #969696, point(12px, 12px) },
+		{ "title_previous", #969696, point(12px, 12px) },
 	};
 	iconPosition: point(0px, 0px);
 	downIconPosition: point(0px, 0px);
@@ -727,12 +727,13 @@ noContactsHeight: 100px;
 noContactsFont: font(fsize);
 noContactsColor: #777;
 
+fieldSearchIcon: icon {{ "box_search", #aaaaaa, point(10px, 9px) }};
 dlgFilter: flatInput(inpDefGray) {
 	font: font(fsize);
 	bgColor: #f2f2f2;
 	phColor: #949494;
 	phFocusColor: #a4a4a4;
-	icon: icon {{ "box_search_icon", #aaaaaa, point(10px, 9px) }};
+	icon: fieldSearchIcon;
 
 	width: 240px;
 	height: 34px;
@@ -742,29 +743,26 @@ dlgFilter: flatInput(inpDefGray) {
 topBarHeight: 54px;
 topBarBG: white;
 topBarDuration: 200;
-topBarForwardPadding: margins(17px, 8px, 39px, 8px);
+topBarForward: icon {{ "title_next", #a3a3a3 }};
+topBarBackward: icon {{ "title_previous", #a3a3a3 }};
 topBarForwardAlpha: 0.6;
-topBarForwardImg: sprite(31px, 104px, 9px, 16px);
+topBarBack: icon {{ "title_previous", #259fd8 }};
-topBarBackwardImg: sprite(22px, 104px, 9px, 16px);
-topBarBackPadding: margins(15px, 7px, 9px, 7px);
 topBarBackAlpha: 0.8;
-topBarBackImg: sprite(65px, 112px, 9px, 16px);
 topBarBackColor: #005faf;
 topBarBackFont: font(16px);
-topBarSearch: iconedButton(btnDefIconed) {
+topBarArrowPadding: margins(39px, 8px, 17px, 8px);
-	bgColor: transparent;
+topBarSearch: IconButton {
-	overBgColor: transparent;
+	width: 44px;
+	height: topBarHeight;
 
-	icon: sprite(84px, 374px, 18px, 18px);
+	icon: icon {{ "title_search", #000000 }};
-	iconPos: point(13px, 18px);
+	iconPosition: point(13px, 18px);
-	downIcon: sprite(84px, 374px, 18px, 18px);
+	downIconPosition: point(13px, 18px);
-	downIconPos: point(13px, 18px);
 
 	opacity: 0.22;
 	overOpacity: 0.36;
 
-	width: 44px;
+	duration: 150;
-	height: topBarHeight;
 }
 topBarMinPadding: 5px;
 topBarButton: RoundButton {
@@ -864,10 +862,8 @@ msgBotKbDuration: 200;
 msgBotKbFont: semiboldFont;
 msgBotKbOverOpacity: 0.1;
 msgBotKbIconPadding: 2px;
-msgBotKbUrlIcon: sprite(188px, 338px, 10px, 10px);
+msgBotKbUrlIcon: icon {{ "inline_button_url", #ffffff }};
-//msgBotKbRequestPhoneIcon: msgBotKbUrlIcon;
+msgBotKbSwitchPmIcon: icon {{ "inline_button_switch", #ffffff }};
-//msgBotKbRequestLocationIcon: msgBotKbUrlIcon;
-msgBotKbSwitchPmIcon: sprite(188px, 348px, 10px, 10px);
 msgBotKbButton: botKeyboardButton {
 	margin: 5px;
 	padding: 10px;
@@ -1980,3 +1976,7 @@ infoButton: PeerAvatarButton {
 	size: topBarHeight;
 	photoSize: 42px;
 }
+
+// forward declaration for single "title_previous" usage.
+profileTopBarBackIconFg: #0290d7;
+profileTopBarBackIcon: icon {{ "title_previous", profileTopBarBackIconFg }};

Telegram/SourceFiles/boxes/boxes.style

@@ -133,7 +133,7 @@ contactsMultiSelect: MultiSelect {
 		font: normalFont;
 	}
 	fieldMinWidth: 42px;
-	fieldIcon: icon {{ "box_search_icon", #aaaaaa, point(11px, 9px) }};
+	fieldIcon: fieldSearchIcon;
 	fieldIconSkip: 36px;
 
 	fieldCancel: IconButton {

Telegram/SourceFiles/history/history_item.cpp

@@ -220,7 +220,7 @@ int ReplyKeyboard::naturalHeight() const {
 	return (_rows.size() - 1) * _st->buttonSkip() + _rows.size() * _st->buttonHeight();
 }
 
-void ReplyKeyboard::paint(Painter &p, const QRect &clip) const {
+void ReplyKeyboard::paint(Painter &p, int outerWidth, const QRect &clip) const {
 	t_assert(_st != nullptr);
 	t_assert(_width > 0);
 
@@ -234,7 +234,7 @@ void ReplyKeyboard::paint(Painter &p, const QRect &clip) const {
 			// just ignore the buttons that didn't layout well
 			if (rect.x() + rect.width() > _width) break;
 
-			_st->paintButton(p, button);
+			_st->paintButton(p, outerWidth, button);
 		}
 	}
 }
@@ -317,12 +317,12 @@ void ReplyKeyboard::clearSelection() {
 	_a_selected.stop();
 }
 
-void ReplyKeyboard::Style::paintButton(Painter &p, const ReplyKeyboard::Button &button) const {
+void ReplyKeyboard::Style::paintButton(Painter &p, int outerWidth, const ReplyKeyboard::Button &button) const {
 	const QRect &rect = button.rect;
 	bool pressed = ClickHandler::showAsPressed(button.link);
 
 	paintButtonBg(p, rect, pressed, button.howMuchOver);
-	paintButtonIcon(p, rect, button.type);
+	paintButtonIcon(p, rect, outerWidth, button.type);
 	if (button.type == HistoryMessageReplyMarkup::Button::Type::Callback
 		|| button.type == HistoryMessageReplyMarkup::Button::Type::Game) {
 		if (auto data = button.link->getButton()) {

Telegram/SourceFiles/history/history_item.h

@@ -303,14 +303,14 @@ public:
 
 	protected:
 		virtual void paintButtonBg(Painter &p, const QRect &rect, bool pressed, float64 howMuchOver) const = 0;
-		virtual void paintButtonIcon(Painter &p, const QRect &rect, HistoryMessageReplyMarkup::Button::Type type) const = 0;
+		virtual void paintButtonIcon(Painter &p, const QRect &rect, int outerWidth, HistoryMessageReplyMarkup::Button::Type type) const = 0;
 		virtual void paintButtonLoading(Painter &p, const QRect &rect) const = 0;
 		virtual int minButtonWidth(HistoryMessageReplyMarkup::Button::Type type) const = 0;
 
 	private:
 		const style::botKeyboardButton *_st;
 
-		void paintButton(Painter &p, const ReplyKeyboard::Button &button) const;
+		void paintButton(Painter &p, int outerWidth, const ReplyKeyboard::Button &button) const;
 		friend class ReplyKeyboard;
 
 	};
@@ -328,7 +328,7 @@ public:
 	int naturalWidth() const;
 	int naturalHeight() const;
 
-	void paint(Painter &p, const QRect &clip) const;
+	void paint(Painter &p, int outerWidth, const QRect &clip) const;
 	ClickHandlerPtr getState(int x, int y) const;
 
 	void clickHandlerActiveChanged(const ClickHandlerPtr &p, bool active);

Telegram/SourceFiles/history/history_message.cpp

@@ -323,18 +323,18 @@ void HistoryMessage::KeyboardStyle::paintButtonBg(Painter &p, const QRect &rect,
 	}
 }
 
-void HistoryMessage::KeyboardStyle::paintButtonIcon(Painter &p, const QRect &rect, HistoryMessageReplyMarkup::Button::Type type) const {
+void HistoryMessage::KeyboardStyle::paintButtonIcon(Painter &p, const QRect &rect, int outerWidth, HistoryMessageReplyMarkup::Button::Type type) const {
 	using Button = HistoryMessageReplyMarkup::Button;
-	style::sprite sprite;
+	auto getIcon = [](Button::Type type) -> const style::icon* {
-	switch (type) {
+		switch (type) {
-	case Button::Type::Url: sprite = st::msgBotKbUrlIcon; break;
+		case Button::Type::Url: return &st::msgBotKbUrlIcon;
-		//	case Button::Type::RequestPhone: sprite = st::msgBotKbRequestPhoneIcon; break;
+		case Button::Type::SwitchInlineSame:
-		//	case Button::Type::RequestLocation: sprite = st::msgBotKbRequestLocationIcon; break;
+		case Button::Type::SwitchInline: return &st::msgBotKbSwitchPmIcon;
-	case Button::Type::SwitchInlineSame:
+		}
-	case Button::Type::SwitchInline: sprite = st::msgBotKbSwitchPmIcon; break;
+		return nullptr;
-	}
+	};
-	if (!sprite.isEmpty()) {
+	if (auto icon = getIcon(type)) {
-		p.drawSprite(rect.x() + rect.width() - sprite.pxWidth() - st::msgBotKbIconPadding, rect.y() + st::msgBotKbIconPadding, sprite);
+		icon->paint(p, rect.x() + rect.width() - icon->width() - st::msgBotKbIconPadding, rect.y() + st::msgBotKbIconPadding, outerWidth);
 	}
 }
 
@@ -347,11 +347,9 @@ int HistoryMessage::KeyboardStyle::minButtonWidth(HistoryMessageReplyMarkup::But
 	using Button = HistoryMessageReplyMarkup::Button;
 	int result = 2 * buttonPadding(), iconWidth = 0;
 	switch (type) {
-	case Button::Type::Url: iconWidth = st::msgBotKbUrlIcon.pxWidth(); break;
+	case Button::Type::Url: iconWidth = st::msgBotKbUrlIcon.width(); break;
-	//case Button::Type::RequestPhone: iconWidth = st::msgBotKbRequestPhoneIcon.pxWidth(); break;
-	//case Button::Type::RequestLocation: iconWidth = st::msgBotKbRequestLocationIcon.pxWidth(); break;
 	case Button::Type::SwitchInlineSame:
-	case Button::Type::SwitchInline: iconWidth = st::msgBotKbSwitchPmIcon.pxWidth(); break;
+	case Button::Type::SwitchInline: iconWidth = st::msgBotKbSwitchPmIcon.width(); break;
 	case Button::Type::Callback:
 	case Button::Type::Game: iconWidth = st::historySendingInvertedIcon.width(); break;
 	}
@@ -1280,7 +1278,7 @@ void HistoryMessage::draw(Painter &p, const QRect &r, TextSelection selection, u
 		height -= h;
 		int top = height + st::msgBotKbButton.margin - marginBottom();
 		p.translate(left, top);
-		keyboard->paint(p, r.translated(-left, -top));
+		keyboard->paint(p, width, r.translated(-left, -top));
 		p.translate(-left, -top);
 	}
 

Telegram/SourceFiles/history/history_message.h

@@ -214,7 +214,7 @@ private:
 
 	protected:
 		void paintButtonBg(Painter &p, const QRect &rect, bool down, float64 howMuchOver) const override;
-		void paintButtonIcon(Painter &p, const QRect &rect, HistoryMessageReplyMarkup::Button::Type type) const override;
+		void paintButtonIcon(Painter &p, const QRect &rect, int outerWidth, HistoryMessageReplyMarkup::Button::Type type) const override;
 		void paintButtonLoading(Painter &p, const QRect &rect) const override;
 		int minButtonWidth(HistoryMessageReplyMarkup::Button::Type type) const override;
 

Telegram/SourceFiles/historywidget.cpp

@@ -2430,7 +2430,7 @@ void BotKeyboard::paintEvent(QPaintEvent *e) {
 	if (_impl) {
 		int x = rtl() ? st::botKbScroll.width : _st->margin;
 		p.translate(x, st::botKbScroll.deltat);
-		_impl->paint(p, clip.translated(-x, -st::botKbScroll.deltat));
+		_impl->paint(p, width(), clip.translated(-x, -st::botKbScroll.deltat));
 	}
 }
 
@@ -2460,7 +2460,7 @@ void BotKeyboard::Style::paintButtonBg(Painter &p, const QRect &rect, bool down,
 	}
 }
 
-void BotKeyboard::Style::paintButtonIcon(Painter &p, const QRect &rect, HistoryMessageReplyMarkup::Button::Type type) const {
+void BotKeyboard::Style::paintButtonIcon(Painter &p, const QRect &rect, int outerWidth, HistoryMessageReplyMarkup::Button::Type type) const {
 	// Buttons with icons should not appear here.
 }
 
@@ -6259,16 +6259,16 @@ void HistoryWidget::paintTopBar(Painter &p, float64 over, int32 decreaseWidth) {
 
 	if (!_history) return;
 
-	int32 increaseLeft = (Adaptive::OneColumn() || !App::main()->stackIsEmpty()) ? (st::topBarForwardPadding.right() - st::topBarForwardPadding.left()) : 0;
+	int increaseLeft = (Adaptive::OneColumn() || !App::main()->stackIsEmpty()) ? (st::topBarArrowPadding.left() - st::topBarArrowPadding.right()) : 0;
 	decreaseWidth += increaseLeft;
-	QRect rectForName(st::topBarForwardPadding.left() + increaseLeft, st::topBarForwardPadding.top(), width() - decreaseWidth - st::topBarForwardPadding.left() - st::topBarForwardPadding.right(), st::msgNameFont->height);
+	QRect rectForName(st::topBarArrowPadding.right() + increaseLeft, st::topBarArrowPadding.top(), width() - decreaseWidth - st::topBarArrowPadding.left() - st::topBarArrowPadding.right(), st::msgNameFont->height);
 	p.setFont(st::dialogsTextFont);
 	if (_history->typing.isEmpty() && _history->sendActions.isEmpty()) {
 		p.setPen(_titlePeerTextOnline ? st::titleStatusActiveFg : st::titleStatusFg);
-		p.drawText(rectForName.x(), st::topBarHeight - st::topBarForwardPadding.bottom() - st::dialogsTextFont->height + st::dialogsTextFont->ascent, _titlePeerText);
+		p.drawText(rectForName.x(), st::topBarHeight - st::topBarArrowPadding.bottom() - st::dialogsTextFont->height + st::dialogsTextFont->ascent, _titlePeerText);
 	} else {
 		p.setPen(st::titleTypingFg);
-		_history->typingText.drawElided(p, rectForName.x(), st::topBarHeight - st::topBarForwardPadding.bottom() - st::dialogsTextFont->height, rectForName.width());
+		_history->typingText.drawElided(p, rectForName.x(), st::topBarHeight - st::topBarArrowPadding.bottom() - st::dialogsTextFont->height, rectForName.width());
 	}
 
 	p.setPen(st::dialogsNameFg);
@@ -6276,17 +6276,17 @@ void HistoryWidget::paintTopBar(Painter &p, float64 over, int32 decreaseWidth) {
 
 	if (Adaptive::OneColumn() || !App::main()->stackIsEmpty()) {
 		p.setOpacity(st::topBarForwardAlpha + (1 - st::topBarForwardAlpha) * over);
-		p.drawSprite(QPoint((st::topBarForwardPadding.right() - st::topBarBackwardImg.pxWidth()) / 2, (st::topBarHeight - st::topBarBackwardImg.pxHeight()) / 2), st::topBarBackwardImg);
+		st::topBarBackward.paint(p, (st::topBarArrowPadding.left() - st::topBarBackward.width()) / 2, (st::topBarHeight - st::topBarBackward.height()) / 2, width());
 	} else {
 		p.setOpacity(st::topBarForwardAlpha + (1 - st::topBarForwardAlpha) * over);
-		p.drawSprite(QPoint(width() - (st::topBarForwardPadding.right() + st::topBarForwardImg.pxWidth()) / 2, (st::topBarHeight - st::topBarForwardImg.pxHeight()) / 2), st::topBarForwardImg);
+		st::topBarForward.paint(p, width() - (st::topBarArrowPadding.left() + st::topBarForward.width()) / 2, (st::topBarHeight - st::topBarForward.height()) / 2, width());
 	}
 }
 
 QRect HistoryWidget::getMembersShowAreaGeometry() const {
-	int increaseLeft = (Adaptive::OneColumn() || !App::main()->stackIsEmpty()) ? (st::topBarForwardPadding.right() - st::topBarForwardPadding.left()) : 0;
+	int increaseLeft = (Adaptive::OneColumn() || !App::main()->stackIsEmpty()) ? (st::topBarArrowPadding.left() - st::topBarArrowPadding.right()) : 0;
-	int membersTextLeft = st::topBarForwardPadding.left() + increaseLeft;
+	int membersTextLeft = st::topBarArrowPadding.right() + increaseLeft;
-	int membersTextTop = st::topBarHeight - st::topBarForwardPadding.bottom() - st::dialogsTextFont->height;
+	int membersTextTop = st::topBarHeight - st::topBarArrowPadding.bottom() - st::dialogsTextFont->height;
 	int membersTextWidth = _titlePeerTextWidth;
 	int membersTextHeight = st::topBarHeight - membersTextTop;
 

Telegram/SourceFiles/historywidget.h

@@ -423,7 +423,7 @@ private:
 
 	protected:
 		void paintButtonBg(Painter &p, const QRect &rect, bool down, float64 howMuchOver) const override;
-		void paintButtonIcon(Painter &p, const QRect &rect, HistoryMessageReplyMarkup::Button::Type type) const override;
+		void paintButtonIcon(Painter &p, const QRect &rect, int outerWidth, HistoryMessageReplyMarkup::Button::Type type) const override;
 		void paintButtonLoading(Painter &p, const QRect &rect) const override;
 		int minButtonWidth(HistoryMessageReplyMarkup::Button::Type type) const override;
 

Telegram/SourceFiles/overviewwidget.cpp

@@ -1982,10 +1982,10 @@ void OverviewWidget::paintTopBar(Painter &p, float64 over, int32 decreaseWidth)
 		return;
 	}
 	p.setOpacity(st::topBarBackAlpha + (1 - st::topBarBackAlpha) * over);
-	p.drawSprite(QPoint(st::topBarBackPadding.left(), (st::topBarHeight - st::topBarBackImg.pxHeight()) / 2), st::topBarBackImg);
+	st::topBarBack.paint(p, (st::topBarArrowPadding.left() - st::topBarBack.width()) / 2, (st::topBarHeight - st::topBarBack.height()) / 2, width());
-	p.setFont(st::topBarBackFont->f);
+	p.setFont(st::topBarBackFont);
-	p.setPen(st::topBarBackColor->p);
+	p.setPen(st::topBarBackColor);
-	p.drawText(st::topBarBackPadding.left() + st::topBarBackImg.pxWidth() + st::topBarBackPadding.right(), (st::topBarHeight - st::topBarBackFont->height) / 2 + st::topBarBackFont->ascent, _header);
+	p.drawText(st::topBarArrowPadding.left(), (st::topBarHeight - st::topBarBackFont->height) / 2 + st::topBarBackFont->ascent, _header);
 }
 
 void OverviewWidget::topBarClick() {

Telegram/SourceFiles/profile/profile.style

@@ -24,9 +24,7 @@ using "basic_types.style";
 profileBg: windowBg;
 
 profileTopBarHeight: topBarHeight;
-profileTopBarBackIconFg: #0290d7;
+profileTopBarBackIconPosition: point(12px, 20px);
-profileTopBarBackIcon: icon {{ "topbar_back_arrow", profileTopBarBackIconFg }};
-profileTopBarBackIconPosition: point(15px, 20px);
 profileTopBarBackFont: font(14px);
 profileTopBarBackFg: #1485c2;
 profileTopBarBackPosition: point(32px, 17px);

Telegram/SourceFiles/ui/popupmenu.h

@@ -51,7 +51,7 @@ protected:
 	void focusOutEvent(QFocusEvent *e) override;
 	void hideEvent(QHideEvent *e) override;
 
-public slots:
+private slots:
 	void actionChanged();
 
 private:

Telegram/SourceFiles/window/top_bar_widget.cpp

@@ -28,6 +28,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 #include "lang.h"
 #include "ui/buttons/peer_avatar_button.h"
 #include "ui/buttons/round_button.h"
+#include "ui/buttons/icon_button.h"
 #include "ui/flatbutton.h"
 
 namespace Window {
@@ -144,7 +145,7 @@ void TopBarWidget::paintEvent(QPaintEvent *e) {
 		int decreaseWidth = 0;
 		if (!_info->isHidden()) {
 			decreaseWidth += _info->width();
-			decreaseWidth -= st::topBarForwardPadding.right();
+			decreaseWidth -= st::topBarArrowPadding.left();
 		}
 		if (!_search->isHidden()) {
 			decreaseWidth += _search->width();
@@ -181,7 +182,7 @@ void TopBarWidget::resizeEvent(QResizeEvent *e) {
 
 	if (!_info->isHidden()) _info->move(r -= _info->width(), 0);
 	if (!_mediaType->isHidden()) _mediaType->move(r -= _mediaType->width(), 0);
-	_search->move(width() - (_info->isHidden() ? st::topBarForwardPadding.right() : _info->width()) - _search->width(), 0);
+	_search->move(width() - (_info->isHidden() ? st::topBarArrowPadding.left() : _info->width()) - _search->width(), 0);
 }
 
 void TopBarWidget::startAnim() {

Telegram/SourceFiles/window/top_bar_widget.h

@@ -25,6 +25,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 namespace Ui {
 class PeerAvatarButton;
 class RoundButton;
+class IconButton;
 } // namespace Ui
 class IconedButton;
 
@@ -87,7 +88,7 @@ private:
 	ChildWidget<Ui::PeerAvatarButton> _info;
 	ChildWidget<Ui::RoundButton> _mediaType;
 
-	ChildWidget<IconedButton> _search;
+	ChildWidget<Ui::IconButton> _search;
 	ChildWidget<TWidget> _membersShowArea = { nullptr };
 
 };