Implement new settings design with icons etc.

Telegram/SourceFiles/info/info.style

@@ -156,8 +156,13 @@ infoTopBarCall: IconButton(infoTopBarNotifications) {
 	iconOver: icon {{ "top_bar_call", boxTitleCloseFgOver }};
 }
 infoTopBarSave: IconButton(infoTopBarNotifications) {
+	width: 48px;
 	icon: icon {{ "passport_ready", windowActiveTextFg }};
-	iconOver: icon {{ "passport_ready", windowActiveTextFg}};
+	iconOver: icon {{ "passport_ready", windowActiveTextFg }};
+	iconPosition: point(11px, 17px);
+	ripple: RippleAnimation(defaultRippleAnimation) {
+		color: lightButtonBgOver;
+	}
 }
 infoTopBarForward: IconButton(infoTopBarBack) {
 	width: 46px;
@@ -229,6 +234,10 @@ infoLayerTopBarCall: IconButton(infoLayerTopBarNotifications) {
 infoLayerTopBarSave: IconButton(infoLayerTopBarNotifications) {
 	icon: icon {{ "passport_ready", windowActiveTextFg }};
 	iconOver: icon {{ "passport_ready", windowActiveTextFg }};
+	iconPosition: point(13px, 18px);
+	ripple: RippleAnimation(defaultRippleAnimation) {
+		color: lightButtonBgOver;
+	}
 }
 infoLayerTopBarForward: IconButton(infoLayerTopBarBack) {
 	width: 45px;

Telegram/SourceFiles/info/info_layer_widget.cpp

@@ -19,7 +19,6 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "window/main_window.h"
 #include "auth_session.h"
 #include "styles/style_info.h"
-#include "styles/style_old_settings.h"
 #include "styles/style_window.h"
 #include "styles/style_boxes.h"
 

Telegram/SourceFiles/settings/settings.style

@@ -10,47 +10,67 @@ using "ui/widgets/widgets.style";
 using "info/info.style";
 using "boxes/boxes.style";
 
+settingsFirstDividerSkip: 3px;
 settingsSectionButton: InfoProfileButton(infoProfileButton) {
 	font: boxTextFont;
+	padding: margins(79px, 13px, 22px, 11px);
 }
 settingsGeneralButton: InfoProfileButton(settingsSectionButton) {
-	padding: margins(28px, 10px, 22px, 8px);
+	padding: margins(24px, 13px, 22px, 11px);
 }
 settingsButton: InfoProfileButton(settingsSectionButton) {
-	padding: margins(22px, 10px, 22px, 8px);
+	padding: margins(22px, 13px, 22px, 11px);
 }
-settingsSectionSkip: infoProfileSkip;
+settingsSectionSkip: 9px;
+settingsSectionIconPosition: point(22px, 9px);
 settingsSeparatorPadding: margins(22px, infoProfileSkip, 0px, infoProfileSkip);
-settingsButtonRightPosition: point(28px, 10px);
+settingsButtonRightPosition: point(28px, 13px);
 settingsButtonRight: FlatLabel(defaultFlatLabel) {
 	textFg: windowActiveTextFg;
 	style: boxTextStyle;
 }
 settingsScalePadding: margins(79px, 10px, 28px, 8px);
 settingsSlider: SettingsSlider(defaultSettingsSlider) {
+	barFg: windowBgOver;
 	labelFg: windowSubTextFg;
 	labelFgActive: windowActiveTextFg;
 }
-settingsUpdateToggle: InfoProfileButton(settingsButton) {
-	height: 38px;
+settingsUpdateToggle: InfoProfileButton(settingsGeneralButton) {
+	height: 40px;
+	padding: margins(24px, 8px, 22px, 8px);
 }
 settingsUpdateState: FlatLabel(defaultFlatLabel) {
 	textFg: windowSubTextFg;
 }
 settingsUpdate: InfoProfileButton(infoMainButton, settingsButton) {
 }
-settingsUpdateStatePosition: point(28px, 30px);
-settingsDividerLabelPadding: margins(22px, 7px, 22px, 14px);
+settingsUpdateStatePosition: point(24px, 29px);
+settingsDividerLabelPadding: margins(22px, 10px, 22px, 19px);
 
-settingsSendType: defaultBoxCheckbox;
-settingsSendTypePadding: margins(22px, 5px, 10px, 5px);
-settingsSendTypeSkip: 5px;
+settingsIconSetPhoto: icon {{ "settings_set_photo", menuIconFg }};
+settingsIconInformation: icon {{ "settings_information", menuIconFg }};
+settingsIconNotifications: icon {{ "settings_notifications", menuIconFg }};
+settingsIconChat: icon {{ "settings_chat", menuIconFg }};
+settingsIconGeneral: icon {{ "settings_general", menuIconFg }};
+settingsIconPrivacySecurity: icon {{ "settings_privacy_security", menuIconFg }};
+settingsIconLanguage: icon {{ "settings_language", menuIconFg }};
+settingsIconInterfaceScale: icon {{ "settings_interface_scale", menuIconFg }};
+settingsIconFaq: icon {{ "settings_faq", menuIconFg }};
 
-settingsCheckbox: defaultBoxCheckbox;
+settingsSetPhotoSkip: 7px;
+
+settingsCheckbox: Checkbox(defaultBoxCheckbox) {
+	textPosition: point(15px, 1px);
+}
 settingsCheckboxPadding: margins(22px, 10px, 10px, 10px);
 settingsLink: boxLinkButton;
 settingsAdvancedNotificationsPadding: margins(22px, 20px, 10px, 10px);
 settingsLinkLabel: defaultFlatLabel;
+settingsCheckboxesSkip: 12px;
+
+settingsSendType: settingsCheckbox;
+settingsSendTypePadding: margins(22px, 5px, 10px, 5px);
+settingsSendTypeSkip: 5px;
 
 settingsAskPathPadding: margins(22px, 10px, 10px, 0px);
 settingsDownloadPathPadding: margins(22px, 1px, 10px, 0px);
@@ -65,10 +85,12 @@ settingsSubsectionTitle: FlatLabel(defaultFlatLabel) {
 	}
 	textFg: windowActiveTextFg;
 }
-settingsSubsectionTitlePadding: margins(22px, 7px, 10px, 9px);
-settingsBackgroundPadding: margins(22px, 8px, 10px, 8px);
+settingsSubsectionTitlePadding: margins(22px, 7px, 10px, 6px);
+settingsBackgroundPadding: margins(22px, 11px, 10px, 12px);
+settingsTileSkip: 15px;
 settingsFromGalleryTop: 2px;
 settingsFromFileTop: 14px;
+settingsPrivacySecurityPadding: 12px;
 
 settingsCloudPasswordLabel: FlatLabel(defaultFlatLabel) {
 	textFg: windowSubTextFg;
@@ -78,7 +100,7 @@ settingsCloudPasswordLabel: FlatLabel(defaultFlatLabel) {
 settingsCloudPasswordLabelPadding: margins(22px, 8px, 10px, 8px);
 
 settingsInfoRowHeight: 62px;
-settingsInfoIconPosition: point(24px, 16px);
+settingsInfoIconPosition: point(22px, 18px);
 settingsInfoValue: FlatLabel(defaultFlatLabel) {
 	textFg: windowFg;
 	style: boxTextStyle;
@@ -89,13 +111,47 @@ settingsInfoAbout: FlatLabel(settingsInfoValue) {
 	textFg: windowSubTextFg;
 	style: defaultTextStyle;
 }
-settingsInfoAboutPosition: point(78px, 33px);
+settingsInfoAboutPosition: point(78px, 34px);
 settingsInfoRightSkip: 60px;
-settingsInfoEditPosition: point(12px, 12px);
+settingsInfoEditPosition: point(0px, 6px);
 settingsInfoEdit: IconButton(defaultIconButton) {
-}
+	width: 56px;
+	height: 56px;
 
-settingsBioMargins: margins(20px, 2px, 20px, 2px);
+	icon: icon {{ "settings_edit", menuIconFg }};
+	iconOver: icon {{ "settings_edit", menuIconFgOver }};
+	iconPosition: point(14px, 14px);
+
+	rippleAreaPosition: point(8px, 8px);
+	rippleAreaSize: 40px;
+	ripple: RippleAnimation(defaultRippleAnimation) {
+		color: windowBgOver;
+	}
+}
+settingsBio: InputField(defaultInputField) {
+	textBg: transparent;
+	textMargins: margins(2px, 7px, 2px, 0px);
+
+	placeholderFg: placeholderFg;
+	placeholderFgActive: placeholderFgActive;
+	placeholderFgError: placeholderFgActive;
+	placeholderMargins: margins(2px, 0px, 2px, 0px);
+	placeholderScale: 0.;
+	placeholderFont: normalFont;
+
+	border: 0px;
+	borderActive: 0px;
+
+	heightMin: 32px;
+
+	font: boxTextFont;
+}
+settingsInfoAfterSkip: 14px;
+settingsInfoName: icon {{ "settings_name", menuIconFg }};
+settingsInfoPhone: icon {{ "settings_phone_number", menuIconFg }};
+settingsInfoUsername: icon {{ "settings_username", menuIconFg }};
+
+settingsBioMargins: margins(20px, 6px, 20px, 6px);
 settingsBioCountdown: FlatLabel(defaultFlatLabel) {
 	style: boxTextStyle;
 	textFg: windowSubTextFg;

Telegram/SourceFiles/settings/settings_chat.cpp

@@ -372,7 +372,7 @@ void DownloadPathRow::setupControls() {
 
 void SetupChatOptions(not_null<Ui::VerticalLayout*> container) {
 	AddDivider(container);
-	AddSkip(container);
+	AddSkip(container, st::settingsCheckboxesSkip);
 
 	auto wrap = object_ptr<Ui::VerticalLayout>(container);
 	const auto inner = wrap.data();
@@ -468,13 +468,13 @@ void SetupChatOptions(not_null<Ui::VerticalLayout*> container) {
 
 	}, inner->lifetime());
 
-	AddSkip(container);
+	AddSkip(container, st::settingsCheckboxesSkip);
 }
 
 void SetupSendKey(not_null<Ui::VerticalLayout*> container) {
 	AddDivider(container);
 	const auto skip = st::settingsSendTypeSkip;
-	const auto full = st::settingsSectionSkip + skip;
+	const auto full = st::settingsCheckboxesSkip + skip;
 	AddSkip(container, full);
 
 	enum class SendByType {
@@ -553,7 +553,7 @@ void SetupMediaOptions(not_null<Ui::VerticalLayout*> container) {
 
 void SetupChatBackground(not_null<Ui::VerticalLayout*> container) {
 	AddDivider(container);
-	AddSkip(container);
+	AddSkip(container, st::settingsCheckboxesSkip);
 
 	AddSubsectionTitle(container, lng_settings_section_background);
 
@@ -571,7 +571,7 @@ void SetupChatBackground(not_null<Ui::VerticalLayout*> container) {
 			std::move(wrap),
 			QMargins(0, skipTop, 0, skipBottom)));
 
-	AddSkip(container);
+	AddSkip(container, st::settingsTileSkip);
 
 	const auto tile = inner->add(
 		object_ptr<Ui::Checkbox>(
@@ -693,6 +693,7 @@ Chat::Chat(QWidget *parent, not_null<UserData*> self)
 void Chat::setupContent() {
 	const auto content = Ui::CreateChild<Ui::VerticalLayout>(this);
 
+	AddSkip(content, st::settingsFirstDividerSkip);
 	SetupChatOptions(content);
 	SetupSendKey(content);
 	SetupMediaOptions(content);

Telegram/SourceFiles/settings/settings_common.cpp

@@ -76,11 +76,35 @@ void AddDividerText(
 not_null<Button*> AddButton(
 		not_null<Ui::VerticalLayout*> container,
 		LangKey text,
-		const style::InfoProfileButton &st) {
-	return container->add(object_ptr<Button>(
+		const style::InfoProfileButton &st,
+		const style::icon *leftIcon) {
+	const auto result = container->add(object_ptr<Button>(
 		container,
 		Lang::Viewer(text),
 		st));
+	if (leftIcon) {
+		const auto icon = Ui::CreateChild<Ui::RpWidget>(result);
+		icon->setAttribute(Qt::WA_TransparentForMouseEvents);
+		icon->resize(leftIcon->size());
+		result->widthValue(
+		) | rpl::start_with_next([=](int width) {
+			icon->moveToLeft(
+				st::settingsSectionIconPosition.x(),
+				st::settingsSectionIconPosition.y(),
+				width);
+		}, icon->lifetime());
+		icon->paintRequest(
+		) | rpl::start_with_next([=] {
+			Painter p(icon);
+			const auto width = icon->width();
+			if (result->isOver()) {
+				leftIcon->paint(p, QPoint(), width, st::menuIconFgOver->c);
+			} else {
+				leftIcon->paint(p, QPoint(), width);
+			}
+		}, icon->lifetime());
+	}
+	return result;
 }
 
 void CreateRightLabel(
@@ -105,8 +129,9 @@ not_null<Button*> AddButtonWithLabel(
 		not_null<Ui::VerticalLayout*> container,
 		LangKey text,
 		rpl::producer<QString> label,
-		const style::InfoProfileButton &st) {
-	const auto button = AddButton(container, text, st);
+		const style::InfoProfileButton &st,
+		const style::icon *leftIcon) {
+	const auto button = AddButton(container, text, st, leftIcon);
 	CreateRightLabel(button, std::move(label));
 	return button;
 }

Telegram/SourceFiles/settings/settings_common.h

@@ -73,12 +73,14 @@ void AddDividerText(
 not_null<Button*> AddButton(
 	not_null<Ui::VerticalLayout*> container,
 	LangKey text,
-	const style::InfoProfileButton &st);
+	const style::InfoProfileButton &st,
+	const style::icon *leftIcon = nullptr);
 not_null<Button*> AddButtonWithLabel(
 	not_null<Ui::VerticalLayout*> container,
 	LangKey text,
 	rpl::producer<QString> label,
-	const style::InfoProfileButton &st);
+	const style::InfoProfileButton &st,
+	const style::icon *leftIcon = nullptr);
 void CreateRightLabel(
 	not_null<Button*> button,
 	rpl::producer<QString> label);

Telegram/SourceFiles/settings/settings_general.cpp

@@ -384,6 +384,7 @@ General::General(QWidget *parent, UserData *self)
 void General::setupContent() {
 	const auto content = Ui::CreateChild<Ui::VerticalLayout>(this);
 
+	AddSkip(content, st::settingsFirstDividerSkip);
 	SetupUpdate(content);
 	SetupTray(content);
 	SetupStorageAndConnection(content);

Telegram/SourceFiles/settings/settings_information.cpp

@@ -21,7 +21,6 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "auth_session.h"
 #include "apiwrap.h"
 #include "styles/style_settings.h"
-#include "styles/style_old_settings.h"
 
 namespace Settings {
 namespace {
@@ -110,18 +109,18 @@ void SetupRows(
 		Lang::Viewer(lng_settings_name_label),
 		Info::Profile::NameValue(self),
 		lang(lng_profile_copy_fullname),
-		st::settingsEditButton,
+		st::settingsInfoEdit,
 		[=] { Ui::show(Box<EditNameBox>(self)); },
-		st::settingsEditButton.icon);
+		st::settingsInfoName);
 
 	AddRow(
 		container,
 		Lang::Viewer(lng_settings_phone_label),
 		Info::Profile::PhoneValue(self),
 		lang(lng_profile_copy_phone),
-		st::settingsEditButton,
+		st::settingsInfoEdit,
 		[] { Ui::show(Box<ChangePhoneBox>()); },
-		st::settingsEditButton.icon);
+		st::settingsInfoPhone);
 
 	auto username = Info::Profile::UsernameValue(self);
 	auto empty = base::duplicate(
@@ -155,11 +154,11 @@ void SetupRows(
 		std::move(label),
 		std::move(value),
 		lang(lng_context_copy_mention),
-		st::settingsEditButton,
+		st::settingsInfoEdit,
 		[=] { Ui::show(Box<UsernameBox>()); },
-		st::settingsEditButton.icon);
+		st::settingsInfoUsername);
 
-	AddSkip(container);
+	AddSkip(container, st::settingsInfoAfterSkip);
 }
 
 struct BioManager {
@@ -174,7 +173,10 @@ BioManager SetupBio(
 	AddSkip(container);
 
 	const auto bioStyle = [] {
-		auto result = CreateBioFieldStyle();
+		auto result = st::settingsBio;
+		result.textMargins.setRight(
+			st::boxTextFont->spacew
+			+ st::boxTextFont->width(QString::number(kMaxBioLength)));
 		return result;
 	};
 	const auto style = Ui::AttachAsChild(container, bioStyle());
@@ -273,6 +275,7 @@ void Information::sectionSaveChanges(FnMut<void()> done) {
 void Information::setupContent() {
 	const auto content = Ui::CreateChild<Ui::VerticalLayout>(this);
 
+	AddSkip(content, st::settingsFirstDividerSkip);
 	SetupRows(content, _self);
 	auto manager = SetupBio(content, _self);
 	_canSaveChanges = std::move(manager.canSave);

Telegram/SourceFiles/settings/settings_main.cpp

@@ -32,7 +32,7 @@ void SetupUploadPhotoButton(
 		not_null<Ui::VerticalLayout*> container,
 		not_null<UserData*> self) {
 	AddDivider(container);
-	AddSkip(container);
+	AddSkip(container, st::settingsSetPhotoSkip);
 
 	const auto upload = [=] {
 		const auto imageExtensions = cImgExtensions();
@@ -70,13 +70,14 @@ void SetupUploadPhotoButton(
 	AddButton(
 		container,
 		lng_settings_upload,
-		st::settingsSectionButton
+		st::settingsSectionButton,
+		&st::settingsIconSetPhoto
 	)->addClickHandler(App::LambdaDelayed(
 		st::settingsSectionButton.ripple.hideDuration,
 		container,
 		upload));
 
-	AddSkip(container);
+	AddSkip(container, st::settingsSetPhotoSkip);
 }
 
 void SetupLanguageButton(not_null<Ui::VerticalLayout*> container) {
@@ -84,7 +85,8 @@ void SetupLanguageButton(not_null<Ui::VerticalLayout*> container) {
 		container,
 		lng_settings_language,
 		Lang::Viewer(lng_language_name),
-		st::settingsSectionButton);
+		st::settingsSectionButton,
+		&st::settingsIconLanguage);
 	const auto guard = Ui::AttachAsChild(button, base::binary_guard());
 	button->addClickHandler([=] {
 		*guard = LanguageBox::Show();
@@ -97,18 +99,37 @@ void SetupSections(
 	AddDivider(container);
 	AddSkip(container);
 
-	const auto addSection = [&](LangKey label, Type type) {
+	const auto addSection = [&](
+			LangKey label,
+			Type type,
+			const style::icon *icon) {
 		AddButton(
 			container,
 			label,
-			st::settingsSectionButton
+			st::settingsSectionButton,
+			icon
 		)->addClickHandler([=] { showOther(type); });
 	};
-	addSection(lng_settings_section_info, Type::Information);
-	addSection(lng_settings_section_notify, Type::Notifications);
-	addSection(lng_settings_section_privacy, Type::PrivacySecurity);
-	addSection(lng_settings_section_general, Type::General);
-	addSection(lng_settings_section_chat_settings, Type::Chat);
+	addSection(
+		lng_settings_section_info,
+		Type::Information,
+		&st::settingsIconInformation);
+	addSection(
+		lng_settings_section_notify,
+		Type::Notifications,
+		&st::settingsIconNotifications);
+	addSection(
+		lng_settings_section_privacy,
+		Type::PrivacySecurity,
+		&st::settingsIconPrivacySecurity);
+	addSection(
+		lng_settings_section_general,
+		Type::General,
+		&st::settingsIconGeneral);
+	addSection(
+		lng_settings_section_chat_settings,
+		Type::Chat,
+		&st::settingsIconChat);
 
 	SetupLanguageButton(container);
 
@@ -131,7 +152,8 @@ void SetupInterfaceScale(not_null<Ui::VerticalLayout*> container) {
 	const auto button = AddButton(
 		container,
 		lng_settings_default_scale,
-		st::settingsSectionButton
+		st::settingsSectionButton,
+		&st::settingsIconInterfaceScale
 	)->toggleOn(toggled->events_starting_with_copy(switched));
 
 	const auto slider = container->add(
@@ -234,7 +256,8 @@ void SetupHelp(not_null<Ui::VerticalLayout*> container) {
 	AddButton(
 		container,
 		lng_settings_faq,
-		st::settingsSectionButton
+		st::settingsSectionButton,
+		&st::settingsIconFaq
 	)->addClickHandler([] {
 		QDesktopServices::openUrl(telegramFaqLink());
 	});

Telegram/SourceFiles/settings/settings_notifications.cpp

@@ -203,7 +203,7 @@ void SetupNotificationsContent(not_null<Ui::VerticalLayout*> container) {
 
 void SetupNotifications(not_null<Ui::VerticalLayout*> container) {
 	AddDivider(container);
-	AddSkip(container);
+	AddSkip(container, st::settingsCheckboxesSkip);
 
 	auto wrap = object_ptr<Ui::VerticalLayout>(container);
 	SetupNotificationsContent(wrap.data());
@@ -212,7 +212,7 @@ void SetupNotifications(not_null<Ui::VerticalLayout*> container) {
 		container,
 		std::move(wrap)));
 
-	AddSkip(container);
+	AddSkip(container, st::settingsCheckboxesSkip);
 }
 
 } // namespace
@@ -226,6 +226,7 @@ Notifications::Notifications(QWidget *parent, not_null<UserData*> self)
 void Notifications::setupContent() {
 	const auto content = Ui::CreateChild<Ui::VerticalLayout>(this);
 
+	AddSkip(content, st::settingsFirstDividerSkip);
 	SetupNotifications(content);
 
 	Ui::ResizeFitChild(this, content);

Telegram/SourceFiles/settings/settings_privacy_security.cpp

@@ -90,7 +90,7 @@ void SetupPrivacy(not_null<Ui::VerticalLayout*> container) {
 			std::make_unique<OldSettings::GroupsInvitePrivacyController>()));
 	});
 
-	AddSkip(container);
+	AddSkip(container, st::settingsPrivacySecurityPadding);
 	AddDividerText(
 		container,
 		Lang::Viewer(lng_settings_group_privacy_about));
@@ -378,7 +378,7 @@ void SetupSecurity(not_null<Ui::VerticalLayout*> container) {
 	SetupSelfDestruction(container);
 	SetupSessionsList(container);
 
-	AddSkip(container);
+	AddSkip(container, st::settingsPrivacySecurityPadding);
 	AddDividerText(
 		container,
 		Lang::Viewer(lng_settings_sessions_about));
@@ -413,6 +413,7 @@ PrivacySecurity::PrivacySecurity(QWidget *parent, not_null<UserData*> self)
 void PrivacySecurity::setupContent() {
 	const auto content = Ui::CreateChild<Ui::VerticalLayout>(this);
 
+	AddSkip(content, st::settingsFirstDividerSkip);
 	SetupPrivacy(content);
 	SetupSecurity(content);
 	SetupExport(content);