Improve theme selector design.

Telegram/SourceFiles/settings/settings.style

@@ -174,7 +174,7 @@ settingsTheme: Checkbox(defaultCheckbox) {
 	width: 80px;
 	margin: margins(0px, 0px, 0px, 0px);
 
-	textPosition: point(0px, 86px);
+	textPosition: point(0px, 99px);
 	checkPosition: point(0px, 0px);
 
 	style: defaultTextStyle;
@@ -182,12 +182,12 @@ settingsTheme: Checkbox(defaultCheckbox) {
 	disabledOpacity: 0.5;
 }
 
-settingsThemePreviewSize: size(80px, 80px);
+settingsThemePreviewSize: size(80px, 92px);
 settingsThemeBubbleSize: size(40px, 14px);
 settingsThemeBubbleRadius: 2px;
 settingsThemeBubblePosition: point(6px, 8px);
-settingsThemeBubbleSkip: 4px;
+settingsThemeBubbleSkip: 6px;
-settingsThemeRadioBottom: 8px;
+settingsThemeRadioBottom: 12px;
 settingsThemeMinSkip: 4px;
 
 autoDownloadLimitButton: InfoProfileButton(settingsButton) {

Telegram/SourceFiles/settings/settings_chat.cpp

@@ -1102,37 +1102,29 @@ void SetupDefaultThemes(not_null<Ui::VerticalLayout*> container) {
 	) | rpl::start_with_next([buttons = std::move(buttons)](int width) {
 		Expects(!buttons.empty());
 
-		//     |------|      |---------|        |-------|      |-------|
-		// pad | blue | skip | classic | 3*skip | night | skip | night | pad
-		//     |------|      |---------|        |-------|      |-------|
 		const auto padding = st::settingsButton.padding;
 		width -= padding.left() + padding.right();
 		const auto desired = st::settingsThemePreviewSize.width();
 		const auto count = int(buttons.size());
-		const auto smallSkips = (count / 2);
+		const auto skips = count - 1;
-		const auto bigSkips = ((count - 1) / 2);
-		const auto skipRatio = 3;
-		const auto skipSegments = smallSkips + bigSkips * skipRatio;
 		const auto minSkip = st::settingsThemeMinSkip;
 		const auto single = [&] {
-			if (width >= skipSegments * minSkip + count * desired) {
+			if (width >= skips * minSkip + count * desired) {
 				return desired;
 			}
-			return (width - skipSegments * minSkip) / count;
+			return (width - skips * minSkip) / count;
 		}();
 		if (single <= 0) {
 			return;
 		}
 		const auto fullSkips = width - count * single;
-		const auto segment = fullSkips / float64(skipSegments);
+		const auto skip = fullSkips / float64(skips);
-		const auto smallSkip = segment;
-		const auto bigSkip = segment * skipRatio;
 		auto left = padding.left() + 0.;
 		auto index = 0;
 		for (const auto button : buttons) {
 			button->resizeToWidth(single);
 			button->moveToLeft(int(std::round(left)), 0);
-			left += button->width() + ((index++ % 2) ? bigSkip : smallSkip);
+			left += button->width() + skip;
 		}
 	}, block->lifetime());
 
@@ -1180,10 +1172,25 @@ void SetupThemeOptions(
 			&controller->window()));
 	});
 
+	AddSkip(container);
+}
+
+void SetupCloudThemes(
+		not_null<Window::SessionController*> controller,
+		not_null<Ui::VerticalLayout*> container) {
 	const auto wrap = container->add(
 		object_ptr<Ui::SlideWrap<Ui::VerticalLayout>>(
 			container,
 			object_ptr<Ui::VerticalLayout>(container)));
+	const auto inner = wrap->entity();
+
+	AddDivider(inner);
+	AddSkip(inner, st::settingsPrivacySkip);
+
+	AddSubsectionTitle(inner, tr::lng_settings_bg_cloud_themes());
+
+	AddSkip(inner, st::settingsThemesTopSkip);
+
 	const auto list = std::make_shared<std::vector<Data::CloudTheme>>();
 	AddButton(
 		wrap->entity(),
@@ -1197,6 +1204,9 @@ void SetupThemeOptions(
 			controller,
 			*list));
 	});
+
+	AddSkip(inner, st::settingsThemesTopSkip);
+
 	auto shown = rpl::single(
 		rpl::empty_value()
 	) | rpl::then(
@@ -1206,8 +1216,6 @@ void SetupThemeOptions(
 		return !list->empty();
 	});
 	wrap->setDuration(0)->toggleOn(std::move(shown));
-
-	AddSkip(container);
 }
 
 void SetupSupportSwitchSettings(
@@ -1331,6 +1339,7 @@ void Chat::setupContent(not_null<Window::SessionController*> controller) {
 	const auto content = Ui::CreateChild<Ui::VerticalLayout>(this);
 
 	SetupThemeOptions(controller, content);
+	SetupCloudThemes(controller, content);
 	SetupChatBackground(controller, content);
 	SetupStickersEmoji(controller, content);
 	SetupMessages(controller, content);

Telegram/SourceFiles/window/themes/window_themes_cloud_list.cpp

@@ -14,6 +14,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "data/data_file_origin.h"
 #include "data/data_document.h"
 #include "data/data_session.h"
+#include "ui/image/image_prepare.h"
 #include "lang/lang_keys.h"
 #include "main/main_session.h"
 #include "styles/style_settings.h"
@@ -121,6 +122,14 @@ void CloudListCheck::setColors(const Colors &colors) {
 	_colors = colors;
 	_radio.setToggledOverride(_colors.radiobuttonActive);
 	_radio.setUntoggledOverride(_colors.radiobuttonInactive);
+	const auto size = st::settingsThemePreviewSize * cIntRetinaFactor();
+	_backgroundFull = (_colors.background.size() == size)
+		? _colors.background
+		: _colors.background.scaled(
+			size,
+			Qt::IgnoreAspectRatio,
+			Qt::SmoothTransformation);
+	_backgroundCacheWidth = -1;
 	update();
 }
 
@@ -128,6 +137,22 @@ QSize CloudListCheck::getSize() const {
 	return st::settingsThemePreviewSize;
 }
 
+void CloudListCheck::validateBackgroundCache(int width) {
+	if (_backgroundCacheWidth == width || width <= 0) {
+		return;
+	}
+	_backgroundCacheWidth = width;
+	const auto imageWidth = width * cIntRetinaFactor();
+	_backgroundCache = (width == st::settingsThemePreviewSize.width())
+		? _backgroundFull
+		: _backgroundFull.copy(
+			(_backgroundFull.width() - imageWidth) / 2,
+			0,
+			imageWidth,
+			_backgroundFull.height());
+	Images::prepareRound(_backgroundCache, ImageRoundRadius::Large);
+}
+
 void CloudListCheck::paint(
 		Painter &p,
 		int left,
@@ -150,9 +175,10 @@ void CloudListCheck::paint(
 	PainterHighQualityEnabler hq(p);
 	p.setPen(Qt::NoPen);
 
+	validateBackgroundCache(outerWidth);
 	p.drawImage(
-		QRect(QPoint(), st::settingsThemePreviewSize),
+		QRect(0, 0, outerWidth, st::settingsThemePreviewSize.height()),
-		_colors.background);
+		_backgroundCache);
 
 	p.setBrush(_colors.received);
 	p.drawRoundedRect(rtlrect(received, outerWidth), radius, radius);

Telegram/SourceFiles/window/themes/window_themes_cloud_list.h

@@ -55,9 +55,13 @@ public:
 
 private:
 	void checkedChangedHook(anim::type animated) override;
+	void validateBackgroundCache(int width);
 
 	Colors _colors;
 	Ui::RadioView _radio;
+	QImage _backgroundFull;
+	QImage _backgroundCache;
+	int _backgroundCacheWidth = -1;
 
 };
 

Telegram/SourceFiles/window/themes/window_themes_embedded.cpp

@@ -369,7 +369,7 @@ std::vector<EmbeddedScheme> EmbeddedThemes() {
 	return {
 		EmbeddedScheme{
 			EmbeddedType::Default,
-			qColor("90ce89"),
+			qColor("9bd494"),
 			qColor("eaffdc"),
 			qColor("ffffff"),
 			qColor("eaffdc"),