All icons were moved from sprites to separate icon files.

Telegram/Resources/basic.style

@@ -1363,10 +1363,6 @@ radialLine: 3px;
 radialDuration: 350;
 radialPeriod: 3000;
 radialBgOpacity: 0.4;
-radialDownload: sprite(346px, 0px, 50px, 50px);
-radialDownloadOpacity: 0.8;
-radialCancel: sprite(378px, 50px, 18px, 18px);
-radialCancelOpacity: 1.0;
 
 downloadPathSkip: 10px;
 
@@ -1488,3 +1484,10 @@ profileTopBarBackIcon: icon {{ "title_previous", profileTopBarBackIconFg }};
 
 boxCancelIcon: icon {{ "box_cancel", #000000 }};
 historyReplyCancelIcon: icon {{ "box_cancel", #adadad }};
+
+notifyBg: white;
+notifyFadeRight: icon {{ "fade_horizontal_right", notifyBg }};
+
+emojiPanCategories: #f7f7f7;
+stickerIconLeft: icon {{ "fade_horizontal_left", emojiPanCategories }};
+stickerIconRight: icon {{ "fade_horizontal_right", emojiPanCategories }};

Telegram/SourceFiles/inline_bots/inline_bot_layout_internal.cpp

@@ -199,16 +199,16 @@ void Gif::paint(Painter &p, const QRect &clip, const PaintContext *context) cons
 
 	if (_delete && (_state & StateFlag::Over)) {
 		float64 deleteOver = _a_deleteOver.current(context->ms, (_state & StateFlag::DeleteOver) ? 1 : 0);
-		QPoint deletePos = QPoint(_width - st::stickerPanDelete.pxWidth(), 0);
+		QPoint deletePos = QPoint(_width - st::stickerPanDelete.width(), 0);
 		p.setOpacity(deleteOver + (1 - deleteOver) * st::stickerPanDeleteOpacity);
-		p.drawSpriteLeft(deletePos, _width, st::stickerPanDelete);
+		st::stickerPanDelete.paint(p, deletePos, _width);
 		p.setOpacity(1);
 	}
 }
 
 void Gif::getState(ClickHandlerPtr &link, HistoryCursorState &cursor, int x, int y) const {
 	if (x >= 0 && x < _width && y >= 0 && y < st::inlineMediaHeight) {
-		if (_delete && (rtl() ? _width - x : x) >= _width - st::stickerPanDelete.pxWidth() && y < st::stickerPanDelete.pxHeight()) {
+		if (_delete && (rtl() ? _width - x : x) >= _width - st::stickerPanDelete.width() && y < st::stickerPanDelete.height()) {
 			link = _delete;
 		} else {
 			link = _send;

Telegram/SourceFiles/mediaview.cpp

@@ -19,9 +19,9 @@ Full license: https://github.com/telegramdesktop/tdesktop/blob/master/LICENSE
 Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 */
 #include "stdafx.h"
-#include "lang.h"
-
 #include "mediaview.h"
+
+#include "lang.h"
 #include "mainwidget.h"
 #include "mainwindow.h"
 #include "application.h"
@@ -30,6 +30,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 #include "media/media_clip_reader.h"
 #include "media/view/media_clip_controller.h"
 #include "styles/style_mediaview.h"
+#include "styles/style_history.h"
 #include "media/media_audio.h"
 #include "history/history_media_types.h"
 
@@ -501,8 +502,9 @@ void MediaView::step_radial(uint64 ms, bool timer) {
 		_radial.stop();
 		return;
 	}
+	auto wasAnimating = _radial.animating();
 	_radial.update(radialProgress(), !radialLoading(), ms + radialTimeShift());
-	if (timer && _radial.animating()) {
+	if (timer && (wasAnimating || _radial.animating())) {
 		update(radialRect());
 	}
 	if (_doc && _doc->loaded() && _doc->size < MediaViewImageSizeLimit && (!_radial.animating() || _doc->isAnimation() || _doc->isVideo())) {
@@ -1649,7 +1651,7 @@ void MediaView::paintEvent(QPaintEvent *e) {
 		}
 	} else {
 		if (_docRect.intersects(r)) {
-			p.fillRect(_docRect, st::mvDocBg->b);
+			p.fillRect(_docRect, st::mvDocBg);
 			if (_docIconRect.intersects(r)) {
 				bool radial = false;
 				float64 radialOpacity = 0;
@@ -1815,30 +1817,40 @@ void MediaView::paintEvent(QPaintEvent *e) {
 
 void MediaView::paintDocRadialLoading(Painter &p, bool radial, float64 radialOpacity) {
 	float64 o = overLevel(OverIcon);
-	if (radial) {
-		if (!_doc->loaded() && radialOpacity < 1) {
-			p.setOpacity((o * 1. + (1 - o) * st::radialDownloadOpacity) * (1 - radialOpacity));
-			p.drawSpriteCenter(_docIconRect, st::radialDownload);
-		}
-
+	if (radial || (_doc && !_doc->loaded())) {
 		QRect inner(QPoint(_docIconRect.x() + ((_docIconRect.width() - st::radialSize.width()) / 2), _docIconRect.y() + ((_docIconRect.height() - st::radialSize.height()) / 2)), st::radialSize);
+
 		p.setPen(Qt::NoPen);
+		if (o == 0.) {
+			p.setOpacity(_doc->loaded() ? radialOpacity : 1.);
+			p.setBrush(st::msgDateImgBg);
+		} else if (o == 1.) {
+			p.setOpacity(_doc->loaded() ? radialOpacity : 1.);
+			p.setBrush(st::msgDateImgBgOver);
+		} else {
+			p.setOpacity((st::msgDateImgBg->c.alphaF() * (1 - o)) + (st::msgDateImgBgOver->c.alphaF() * o));
 			p.setBrush(st::black);
-		p.setOpacity(radialOpacity * st::radialBgOpacity);
+		}
 
 		p.setRenderHint(QPainter::HighQualityAntialiasing);
 		p.drawEllipse(inner);
 		p.setRenderHint(QPainter::HighQualityAntialiasing, false);
 
-		p.setOpacity((o * 1. + (1 - o) * st::radialCancelOpacity) * radialOpacity);
-		p.drawSpriteCenter(_docIconRect, st::radialCancel);
+		p.setOpacity(1.);
+		auto icon = ([radial, this]() -> const style::icon* {
+			if (radial || _doc->loading()) {
+				return &st::historyFileInCancel;
+			}
+			return &st::historyFileInDownload;
+		})();
+		if (icon) {
+			icon->paintInCenter(p, inner);
+		}
+		if (radial) {
 			p.setOpacity(1);
-
 			QRect arc(inner.marginsRemoved(QMargins(st::radialLine, st::radialLine, st::radialLine, st::radialLine)));
 			_radial.draw(p, arc, st::radialLine, st::white);
-	} else if (_doc && !_doc->loaded()) {
-		p.setOpacity((o * 1. + (1 - o) * st::radialDownloadOpacity));
-		p.drawSpriteCenter(_docIconRect, st::radialDownload);
+		}
 	}
 }
 

Telegram/SourceFiles/stickers/emoji_pan.cpp

@@ -1137,9 +1137,9 @@ void StickerPanInner::paintSticker(Painter &p, Set &set, int y, int index) {
 	if (hover > 0 && set.id == Stickers::RecentSetId && _custom.at(index)) {
 		float64 xHover = set.hovers[set.pack.size() + index];
 
-		QPoint xPos = pos + QPoint(st::stickerPanSize.width() - st::stickerPanDelete.pxWidth(), 0);
+		QPoint xPos = pos + QPoint(st::stickerPanSize.width() - st::stickerPanDelete.width(), 0);
 		p.setOpacity(hover * (xHover + (1 - xHover) * st::stickerPanDeleteOpacity));
-		p.drawSpriteLeft(xPos, width(), st::stickerPanDelete);
+		st::stickerPanDelete.paint(p, xPos, width());
 		p.setOpacity(1);
 	}
 }
@@ -2197,7 +2197,7 @@ void StickerPanInner::updateSelected() {
 					} else {
 						if (set.id == Stickers::RecentSetId && _custom[selIndex]) {
 							int inx = sx - (selIndex % StickerPanPerRow) * st::stickerPanSize.width(), iny = p.y() - y - ((selIndex / StickerPanPerRow) * st::stickerPanSize.height());
-							if (inx >= st::stickerPanSize.width() - st::stickerPanDelete.pxWidth() && iny < st::stickerPanDelete.pxHeight()) {
+							if (inx >= st::stickerPanSize.width() - st::stickerPanDelete.width() && iny < st::stickerPanDelete.height()) {
 								selIndex += set.pack.size();
 							}
 						}
@@ -2531,14 +2531,14 @@ void EmojiSwitchButton::updateText(const QString &inlineBotUsername) {
 void EmojiSwitchButton::paintEvent(QPaintEvent *e) {
 	Painter p(this);
 
-	p.setFont(st::emojiPanHeaderFont->f);
-	p.setPen(st::emojiSwitchColor->p);
+	p.setFont(st::emojiPanHeaderFont);
+	p.setPen(st::emojiSwitchColor);
 	if (_toStickers) {
 		p.drawTextRight(st::emojiSwitchSkip, st::emojiPanHeaderTop, width(), _text, _textWidth);
-		p.drawSpriteRight(QPoint(st::emojiSwitchImgSkip - st::emojiSwitchStickers.pxWidth(), (st::emojiPanHeader - st::emojiSwitchStickers.pxHeight()) / 2), width(), st::emojiSwitchStickers);
+		st::emojiSwitchStickers.paint(p, width() - st::emojiSwitchImgSkip, (st::emojiPanHeader - st::emojiSwitchStickers.height()) / 2, width());
 	} else {
-		p.drawTextRight(st::emojiSwitchImgSkip - st::emojiSwitchEmoji.pxWidth(), st::emojiPanHeaderTop, width(), lang(lng_switch_emoji), _textWidth);
-		p.drawSpriteRight(QPoint(st::emojiSwitchSkip + _textWidth - st::emojiSwitchEmoji.pxWidth(), (st::emojiPanHeader - st::emojiSwitchEmoji.pxHeight()) / 2), width(), st::emojiSwitchEmoji);
+		p.drawTextRight(st::emojiSwitchImgSkip - st::emojiSwitchEmoji.width(), st::emojiPanHeaderTop, width(), lang(lng_switch_emoji), _textWidth);
+		st::emojiSwitchEmoji.paint(p, width() - st::emojiSwitchSkip - _textWidth, (st::emojiPanHeader - st::emojiSwitchEmoji.height()) / 2, width());
 	}
 }
 
@@ -2803,15 +2803,15 @@ void EmojiPan::paintEvent(QPaintEvent *e) {
 					p.setOpacity(1.);
 					p.fillRect(selx, _iconsTop + st::emojiCategory.height - st::stickerIconPadding, st::emojiCategory.width, st::stickerIconSel, st::stickerIconSelColor);
 
-					float64 o_left = snap(float64(_iconsX.current()) / st::stickerIconLeft.pxWidth(), 0., 1.);
+					float64 o_left = snap(float64(_iconsX.current()) / st::stickerIconLeft.width(), 0., 1.);
 					if (o_left > 0) {
 						p.setOpacity(o_left);
-						p.drawSpriteLeft(QRect(_iconsLeft, _iconsTop, st::stickerIconLeft.pxWidth(), st::emojiCategory.height), width(), st::stickerIconLeft);
+						st::stickerIconLeft.fill(p, rtlrect(_iconsLeft, _iconsTop, st::stickerIconLeft.width(), st::emojiCategory.height, width()));
 					}
-					float64 o_right = snap(float64(_iconsMax - _iconsX.current()) / st::stickerIconRight.pxWidth(), 0., 1.);
+					float64 o_right = snap(float64(_iconsMax - _iconsX.current()) / st::stickerIconRight.width(), 0., 1.);
 					if (o_right > 0) {
 						p.setOpacity(o_right);
-						p.drawSpriteRight(QRect(width() - _iconsLeft - 7 * st::emojiCategory.width, _iconsTop, st::stickerIconRight.pxWidth(), st::emojiCategory.height), width(), st::stickerIconRight);
+						st::stickerIconRight.fill(p, rtlrect(width() - _iconsLeft - 7 * st::emojiCategory.width, _iconsTop, st::stickerIconRight.width(), st::emojiCategory.height, width()));
 					}
 				}
 			} else if (_stickersShown) {

Telegram/SourceFiles/stickers/stickers.style

@@ -101,8 +101,6 @@ emojiSymbolsActive: icon {{ "emoji_symbols", #58b2ed }};
 emojiSavedGifs: icon {{ "emoji_gif", #b3b3b3 }};
 emojiSavedGifsActive: icon {{ "emoji_gif", #58b2ed }};
 
-emojiPanCategories: #f7f7f7;
-
 emojiCategory: IconButton {
 	width: 42px;
 	height: 46px;
@@ -144,20 +142,21 @@ emojiColorsSepColor: #d5d5d5;
 
 emojiSwitchSkip: 27px;
 emojiSwitchImgSkip: 21px;
-emojiSwitchStickers: sprite(318px, 328px, 8px, 12px);
-emojiSwitchEmoji: sprite(310px, 328px, 8px, 12px);
 emojiSwitchColor: #42a8db;
+emojiSwitchStickers: icon {{ "emoji_switch_right", emojiSwitchColor }};
+emojiSwitchEmoji: icon {{ "emoji_switch_left", emojiSwitchColor }};
 
 stickerPanSize: size(64px, 64px);
 stickerPanPadding: 11px;
-stickerPanDelete: sprite(128px, 132px, 12px, 12px);
+stickerPanDelete: icon {
+	{ "emoji_delete_bg", #000000cc },
+	{ "emoji_delete", #ffffff },
+};
 stickerPanDeleteOpacity: 0.5;
 stickerIconPadding: 5px;
 stickerIconOpacity: 0.7;
 stickerIconSel: 2px;
 stickerIconSelColor: #58b2ed;
-stickerIconLeft: sprite(342px, 72px, 40px, 1px);
-stickerIconRight: sprite(342px, 73px, 40px, 1px);
 stickerIconMove: 400;
 stickerPreviewDuration: 150;
 stickerPreviewBg: #FFFFFFB0;

Telegram/SourceFiles/window/window.style

@@ -29,7 +29,6 @@ titleIcon: icon {
 };
 titleCounterPosition: point(17px, 17px);
 
-notifyBg: white;
 notifyBorder: #f1f1f1;
 notifyBorderWidth: 1px;
 notifySlowHide: 4000;
@@ -60,7 +59,6 @@ notifyActionsDuration: 200;
 notifyHideAll: RoundButton(defaultBoxButton) {
 }
 
-notifyFadeRight: icon {{ "fade_horizontal_right", notifyBg }};
 notifyReplyArea: InputArea(defaultInputArea) {
 	font: normalFont;
 	textMargins: margins(8px, 8px, 8px, 6px);