Adjust main menu icons to the mockup.

Telegram/SourceFiles/info/info.style

@@ -373,22 +373,14 @@ infoProfileToggleOver: Toggle(infoProfileToggle) {
 	untoggledFg: menuIconFgOver;
 }
 infoProfileButton: SettingsButton(defaultSettingsButton) {
-	textFg: windowBoldFg;
-	textFgOver: windowBoldFgOver;
-	textBg: windowBg;
-	textBgOver: windowBgOver;
-
 	font: normalFont;
 
-	height: 20px;
 	padding: margins(79px, 10px, 8px, 8px);
 	iconLeft: 22px;
 
 	toggle: infoProfileToggle;
 	toggleOver: infoProfileToggleOver;
 	toggleSkip: 20px;
-
-	ripple: defaultRippleAnimation;
 }
 infoNotificationsButton: SettingsButton(infoProfileButton) {
 	padding: margins(79px, 13px, 8px, 9px);

Telegram/SourceFiles/settings/settings.style

@@ -65,6 +65,14 @@ settingsIconAskQuestion: icon {{ "settings/ask_question", settingsIconFg }};
 settingsIconStickers: icon {{ "settings/stickers", settingsIconFg }};
 settingsIconEmoji: icon {{ "settings/emoji", settingsIconFg }};
 settingsIconThemes: icon {{ "settings/palette", settingsIconFg }};
+settingsIconNewGroup: icon {{ "settings/group", settingsIconFg }};
+settingsIconNewChannel: icon {{ "settings/channel", settingsIconFg }};
+settingsIconContacts: icon {{ "settings/user", settingsIconFg }};
+settingsIconSavedMessages: icon {{ "settings/saved_messages", settingsIconFg }};
+settingsIconKey: icon {{ "settings/key", settingsIconFg }};
+settingsIconReload: icon {{ "settings/reload", settingsIconFg }};
+settingsIconNight: icon {{ "settings/night", settingsIconFg }};
+settingsIconSettings: icon {{ "settings/settings", settingsIconFg }};
 
 settingsSetPhotoSkip: 7px;
 

Telegram/SourceFiles/window/window.style

@@ -111,10 +111,11 @@ mainMenuResetScaleLeft: 36px;
 mainMenuResetScaleRight: 12px;
 mainMenuResetScaleTop: 2px;
 mainMenuResetScaleIconLeft: 5px;
-mainMenuCoverTextLeft: 30px;
+mainMenuCoverNameLeft: 26px;
 mainMenuCoverNameTop: 84px;
-mainMenuCoverStatusTop: 102px;
+mainMenuCoverStatusLeft: 24px;
-mainMenuSkip: 10px;
+mainMenuCoverStatusTop: 103px;
+mainMenuSkip: 6px;
 mainMenu: Menu(defaultMenu) {
 	itemFg: windowBoldFg;
 	itemFgOver: windowBoldFgOver;
@@ -129,23 +130,14 @@ mainMenu: Menu(defaultMenu) {
 	}
 	itemToggleShift: 11px;
 }
+mainMenuButton: SettingsButton(defaultSettingsButton) {
+	font: semiboldFont;
+	padding: margins(61px, 11px, 22px, 9px);
+	toggleSkip: 18px;
+	iconLeft: 21px;
+}
+
 mainMenuShadow: icon {{ "menu_shadow", windowShadowFg }};
-mainMenuNewGroup: icon {{ "menu_new_group", menuIconFg }};
-mainMenuNewGroupOver: icon {{ "menu_new_group", menuIconFgOver }};
-mainMenuNewChannel: icon {{ "menu_new_channel", menuIconFg }};
-mainMenuNewChannelOver: icon {{ "menu_new_channel", menuIconFgOver }};
-mainMenuContacts: icon {{ "settings/settings_name", menuIconFg }};
-mainMenuContactsOver: icon {{ "settings/settings_name", menuIconFgOver }};
-mainMenuCalls: icon {{ "settings/settings_phone_number", menuIconFg }};
-mainMenuCallsOver: icon {{ "settings/settings_phone_number", menuIconFgOver }};
-mainMenuSettings: icon {{ "menu_settings", menuIconFg }};
-mainMenuSettingsOver: icon {{ "menu_settings", menuIconFgOver }};
-mainMenuNightMode: icon {{ "menu_night_mode", menuIconFg }};
-mainMenuNightModeOver: icon {{ "menu_night_mode", menuIconFgOver }};
-mainMenuReload: icon {{ "menu_reload", menuIconFg }};
-mainMenuReloadOver: icon {{ "menu_reload", menuIconFgOver }};
-mainMenuFixOrder: icon {{ "menu_fix_order", menuIconFg }};
-mainMenuFixOrderOver: icon {{ "menu_fix_order", menuIconFgOver }};
 mainMenuAddAccount: icon {{ "menu_add_account", menuIconFg }};
 mainMenuAddAccountOver: icon {{ "menu_add_account", menuIconFgOver }};
 mainMenuAccountSize: 32px;

Telegram/SourceFiles/window/window_main_menu.cpp

@@ -13,9 +13,6 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/chat/chat_theme.h"
 #include "ui/widgets/buttons.h"
 #include "ui/widgets/labels.h"
-#include "ui/widgets/menu/menu.h"
-#include "ui/widgets/menu/menu_common.h"
-#include "ui/widgets/menu/menu_toggle.h"
 #include "ui/widgets/popup_menu.h"
 #include "ui/widgets/scroll_area.h"
 #include "ui/widgets/shadow.h"
@@ -584,7 +581,6 @@ MainMenu::MainMenu(
 	st::mainMenuUserpic)
 , _toggleAccounts(this)
 , _archiveButton(this, st::mainMenuCloudButton)
-, _cloudButton(this, st::mainMenuCloudButton)
 , _scroll(this, st::defaultSolidScroll)
 , _inner(_scroll->setOwnedWidget(
 	object_ptr<Ui::VerticalLayout>(_scroll.data())))
@@ -595,7 +591,7 @@ MainMenu::MainMenu(
 	_inner.get(),
 	object_ptr<Ui::PlainShadow>(_inner.get()))))
 , _menu(_inner->add(
-	object_ptr<Ui::Menu::Menu>(_inner.get(), st::mainMenu),
+	object_ptr<Ui::VerticalLayout>(_inner.get()),
 	{ 0, st::mainMenuSkip, 0, 0 }))
 , _footer(_inner->add(object_ptr<Ui::RpWidget>(_inner.get())))
 , _telegram(
@@ -607,18 +603,18 @@ MainMenu::MainMenu(
 	setAttribute(Qt::WA_OpaquePaintEvent);
 
 	setupArchiveButton();
-	setupCloudButton();
 	setupUserpicButton();
 	setupAccountsToggle();
 	setupAccounts();
+	setupMenu();
 
 	_nightThemeSwitch.setCallback([this] {
-		if (const auto action = *_nightThemeAction) {
+		Expects(_nightThemeToggle != nullptr);
-			const auto nightMode = Window::Theme::IsNightMode();
+
-			if (action->isChecked() != nightMode) {
+		const auto nightMode = Window::Theme::IsNightMode();
-				Window::Theme::ToggleNightMode();
+		if (_nightThemeToggle->toggled() != nightMode) {
-				Window::Theme::KeepApplied();
+			Window::Theme::ToggleNightMode();
-			}
+			Window::Theme::KeepApplied();
 		}
 	});
 
@@ -636,10 +632,6 @@ MainMenu::MainMenu(
 	}, _inner->lifetime());
 
 	parentResized();
-	_menu->setTriggeredCallback([](const Ui::Menu::CallbackData &data) {
-		data.action->triggered();
-	});
-	refreshMenu();
 	refreshBackground();
 
 	_telegram->setMarkedText(Ui::Text::Link(
@@ -682,13 +674,7 @@ MainMenu::MainMenu(
 	Window::Theme::Background()->updates(
 	) | rpl::start_with_next([=](const BackgroundUpdate &update) {
 		if (update.type == BackgroundUpdate::Type::ApplyingTheme) {
-			if (const auto action = *_nightThemeAction) {
+			_nightThemeSwitches.fire(Window::Theme::IsNightMode());
-				const auto nightMode = Window::Theme::IsNightMode();
-				if (action->isChecked() != nightMode) {
-					action->setChecked(nightMode);
-					_menu->finishAnimating();
-				}
-			}
 		}
 		if (update.type == BackgroundUpdate::Type::New) {
 			refreshBackground();
@@ -768,15 +754,6 @@ void MainMenu::setupArchiveButton() {
 	}, lifetime());
 }
 
-void MainMenu::setupCloudButton() {
-	_cloudButton->setClickedCallback([=] {
-		_controller->content()->choosePeer(
-			_controller->session().userPeerId(),
-			ShowAtUnreadMsgId);
-	});
-	_cloudButton->show();
-}
-
 void MainMenu::setupUserpicButton() {
 	_userpicButton->setClickedCallback([=] { toggleAccounts(); });
 	_userpicButton->show();
@@ -976,60 +953,95 @@ void MainMenu::parentResized() {
 	resize(st::mainMenuWidth, parentWidget()->height());
 }
 
-void MainMenu::refreshMenu() {
+void MainMenu::setupMenu() {
-	_menu->clearActions();
+	using namespace Settings;
+
 	const auto controller = _controller;
-	if (!_controller->session().supportMode()) {
+	const auto addAction = [&](
-		_menu->addAction(tr::lng_create_group_title(tr::now), [=] {
+			rpl::producer<QString> text,
-			controller->showNewGroup();
+			IconDescriptor &&descriptor) {
-		}, &st::mainMenuNewGroup, &st::mainMenuNewGroupOver);
+		return AddButton(
-		_menu->addAction(tr::lng_create_channel_title(tr::now), [=] {
-			controller->showNewChannel();
-		}, &st::mainMenuNewChannel, &st::mainMenuNewChannelOver);
-		_menu->addAction(tr::lng_menu_contacts(tr::now), [=] {
-			controller->show(PrepareContactsBox(controller));
-		}, &st::mainMenuContacts, &st::mainMenuContactsOver);
-		if (_controller->session().serverConfig().phoneCallsEnabled.current()) {
-			_menu->addAction(tr::lng_menu_calls(tr::now), [=] {
-				ShowCallsBox(controller);
-			}, &st::mainMenuCalls, &st::mainMenuCallsOver);
-		}
-	} else {
-		_menu->addAction(tr::lng_profile_add_contact(tr::now), [=] {
-			controller->showAddContact();
-		}, &st::mainMenuContacts, &st::mainMenuContactsOver);
-
-		const auto fix = std::make_shared<QPointer<QAction>>();
-		auto fixCallback = [=] {
-			(*fix)->setChecked(!(*fix)->isChecked());
-			_controller->session().settings().setSupportFixChatsOrder(
-				(*fix)->isChecked());
-			_controller->session().saveSettings();
-		};
-		auto item = base::make_unique_q<Ui::Menu::Toggle>(
 			_menu,
-			st::mainMenu,
+			std::move(text),
-			u"Fix chats order"_q,
+			st::mainMenuButton,
-			std::move(fixCallback),
+			std::move(descriptor));
-			&st::mainMenuFixOrder,
+	};
-			&st::mainMenuFixOrderOver);
+	if (!_controller->session().supportMode()) {
-		*fix = _menu->addAction(std::move(item));
+		addAction(
-		(*fix)->setCheckable(true);
+			tr::lng_create_group_title(),
-		(*fix)->setChecked(
+			{ &st::settingsIconNewGroup, kIconLightBlue }
-			_controller->session().settings().supportFixChatsOrder());
+		)->setClickedCallback([=] {
-
+			controller->showNewGroup();
-		_menu->addAction(qsl("Reload templates"), [=] {
+		});
+		addAction(
+			tr::lng_create_channel_title(),
+			{ &st::settingsIconNewChannel, kIconLightOrange }
+		)->setClickedCallback([=] {
+			controller->showNewChannel();
+		});
+		addAction(
+			tr::lng_menu_contacts(),
+			{ &st::settingsIconContacts, kIconRed }
+		)->setClickedCallback([=] {
+			controller->show(PrepareContactsBox(controller));
+		});
+		addAction(
+			tr::lng_menu_calls(),
+			{ &st::settingsIconCalls, kIconGreen }
+		)->setClickedCallback([=] {
+			ShowCallsBox(controller);
+		});
+		addAction(
+			tr::lng_saved_messages(),
+			{ &st::settingsIconSavedMessages, kIconLightBlue }
+		)->setClickedCallback([=] {
+			controller->content()->choosePeer(
+				controller->session().userPeerId(),
+				ShowAtUnreadMsgId);
+		});
+	} else {
+		addAction(
+			tr::lng_profile_add_contact(),
+			{ &st::settingsIconContacts, kIconRed }
+		)->setClickedCallback([=] {
+			controller->showAddContact();
+		});
+		addAction(
+			rpl::single(u"Fix chats order"_q),
+			{ &st::settingsIconKey, kIconGreen }
+		)->toggleOn(rpl::single(
+			_controller->session().settings().supportFixChatsOrder()
+		))->toggledChanges(
+		) | rpl::start_with_next([=](bool fix) {
+			_controller->session().settings().setSupportFixChatsOrder(fix);
+			_controller->session().saveSettings();
+		}, _menu->lifetime());
+		addAction(
+			rpl::single(u"Reload templates"_q),
+			{ &st::settingsIconReload, kIconLightBlue }
+		)->setClickedCallback([=] {
 			_controller->session().supportTemplates().reload();
-		}, &st::mainMenuReload, &st::mainMenuReloadOver);
+		});
 	}
-	_menu->addAction(tr::lng_menu_settings(tr::now), [=] {
+	addAction(
+		tr::lng_menu_settings(),
+		{ &st::settingsIconSettings, kIconPurple }
+	)->setClickedCallback([=] {
 		controller->showSettings();
-	}, &st::mainMenuSettings, &st::mainMenuSettingsOver);
+	});
 
-	_nightThemeAction = std::make_shared<QPointer<QAction>>();
+	_nightThemeToggle = addAction(
-
+		tr::lng_menu_night_mode(),
-	auto nightCallback = [=] {
+		{ &st::settingsIconNight, kIconDarkBlue }
+	)->toggleOn(_nightThemeSwitches.events_starting_with(
+		Window::Theme::IsNightMode()
+	));
+	_nightThemeToggle->toggledChanges(
+	) | rpl::filter([=](bool night) {
+		return (night != Window::Theme::IsNightMode());
+	}) | rpl::start_with_next([=](bool night) {
 		if (Window::Theme::Background()->editingTheme()) {
+			_nightThemeSwitches.fire(!night);
 			controller->show(Box<Ui::InformBox>(
 				tr::lng_theme_editor_cant_change_theme(tr::now)));
 			return;
@@ -1039,36 +1051,23 @@ void MainMenu::refreshMenu() {
 			if (!weak) {
 				Window::Theme::ToggleNightMode();
 				Window::Theme::KeepApplied();
-			} else if (auto action = *_nightThemeAction) {
+			} else {
-				action->setChecked(!action->isChecked());
 				_nightThemeSwitch.callOnce(st::mainMenu.itemToggle.duration);
 			}
 		};
 		Window::Theme::ToggleNightModeWithConfirmation(
 			&_controller->window(),
 			toggle);
-	};
+	}, _nightThemeToggle->lifetime());
 
-	auto item = base::make_unique_q<Ui::Menu::Toggle>(
-		_menu,
-		st::mainMenu,
-		tr::lng_menu_night_mode(tr::now),
-		std::move(nightCallback),
-		&st::mainMenuNightMode,
-		&st::mainMenuNightModeOver);
-
-	auto action = _menu->addAction(std::move(item));
-	*_nightThemeAction = action;
-	action->setCheckable(true);
-	action->setChecked(Window::Theme::IsNightMode());
 	Core::App().settings().systemDarkModeValue(
 	) | rpl::start_with_next([=](std::optional<bool> darkMode) {
-		const auto darkModeEnabled = Core::App().settings().systemDarkModeEnabled();
+		const auto darkModeEnabled
+			= Core::App().settings().systemDarkModeEnabled();
 		if (darkModeEnabled && darkMode.has_value()) {
-			action->setChecked(*darkMode);
+			_nightThemeSwitches.fire_copy(*darkMode);
 		}
-	}, lifetime());
+	}, _nightThemeToggle->lifetime());
-	_menu->finishAnimating();
 
 	updatePhone();
 }
@@ -1107,7 +1106,7 @@ void MainMenu::refreshBackground() {
 
 	// Cut off the part of the background that is under text.
 	const QRect underText(
-		st::mainMenuCoverTextLeft,
+		st::mainMenuCoverNameLeft,
 		st::mainMenuCoverNameTop,
 		std::max(
 			st::semiboldFont->width(
@@ -1121,7 +1120,6 @@ void MainMenu::refreshBackground() {
 }
 
 void MainMenu::resizeEvent(QResizeEvent *e) {
-	_menu->setForceWidth(width());
 	_inner->resizeToWidth(width());
 	updateControlsGeometry();
 }
@@ -1132,17 +1130,13 @@ void MainMenu::updateControlsGeometry() {
 		st::mainMenuUserpicTop);
 	if (_resetScaleButton) {
 		_resetScaleButton->moveToRight(0, 0);
-		_cloudButton->moveToRight(_resetScaleButton->width(), 0);
+		_archiveButton->moveToRight(_resetScaleButton->width(), 0);
-		_archiveButton->moveToRight(
-			_resetScaleButton->width() + _cloudButton->width(),
-			0);
 	} else {
 		const auto right = st::mainMenuTogglePosition.x()
-			- (_cloudButton->width() / 2);
+			- (_archiveButton->width() / 2);
 		const auto top = st::mainMenuUserpicTop
-			- (_cloudButton->height() - st::mainMenuCloudSize) / 2;
+			- (_archiveButton->height() - st::mainMenuCloudSize) / 2;
-		_cloudButton->moveToRight(right, top);
+		_archiveButton->moveToRight(right, top);
-		_archiveButton->moveToRight(right + _cloudButton->width(), top);
 	}
 	_toggleAccounts->setGeometry(
 		0,
@@ -1187,7 +1181,7 @@ void MainMenu::paintEvent(QPaintEvent *e) {
 
 	if (!cover.isEmpty()) {
 		const auto widthText = width()
-			- st::mainMenuCoverTextLeft
+			- st::mainMenuCoverNameLeft
 			- _toggleAccounts->rightSkip();
 
 		if (isFill) {
@@ -1197,24 +1191,16 @@ void MainMenu::paintEvent(QPaintEvent *e) {
 		p.setFont(st::semiboldFont);
 		_controller->session().user()->nameText().drawLeftElided(
 			p,
-			st::mainMenuCoverTextLeft,
+			st::mainMenuCoverNameLeft,
 			st::mainMenuCoverNameTop,
 			widthText,
 			width());
 		p.setFont(st::normalFont);
-		p.drawTextLeft(st::mainMenuCoverTextLeft, st::mainMenuCoverStatusTop, width(), _phoneText);
+		p.drawTextLeft(
-
+			st::mainMenuCoverStatusLeft,
-		// Draw Saved Messages button.
+			st::mainMenuCoverStatusTop,
-		if (!_cloudButton->isHidden()) {
+			width(),
-			Ui::EmptyUserpic::PaintSavedMessages(
+			_phoneText);
-				p,
-				_cloudButton->x() + (_cloudButton->width() - st::mainMenuCloudSize) / 2,
-				_cloudButton->y() + (_cloudButton->height() - st::mainMenuCloudSize) / 2,
-				width(),
-				st::mainMenuCloudSize,
-				isFill ? st::mainMenuCloudBg : st::msgServiceBg,
-				isFill ? st::mainMenuCloudFg : st::msgServiceFg);
-		}
 
 		// Draw Archive button.
 		if (!_archiveButton->isHidden()) {

Telegram/SourceFiles/window/window_main_menu.h

@@ -23,11 +23,9 @@ class VerticalLayout;
 class VerticalLayoutReorder;
 class RippleButton;
 class PlainShadow;
+class SettingsButton;
 template <typename Widget>
 class SlideWrap;
-namespace Menu {
-class Menu;
-} // namespace Menu
 } // namespace Ui
 
 namespace Main {
@@ -58,18 +56,17 @@ private:
 	class ResetScaleButton;
 
 	void setupArchiveButton();
-	void setupCloudButton();
 	void setupUserpicButton();
 	void setupAccounts();
 	void setupAccountsToggle();
 	[[nodiscard]] not_null<Ui::SlideWrap<Ui::RippleButton>*> setupAddAccount(
 		not_null<Ui::VerticalLayout*> container);
+	void setupMenu();
 	void rebuildAccounts();
 	void updateControlsGeometry();
 	void updateInnerControlsGeometry();
 	void updatePhone();
 	void initResetScaleButton();
-	void refreshMenu();
 	void refreshBackground();
 	void toggleAccounts();
 
@@ -77,7 +74,6 @@ private:
 	object_ptr<Ui::UserpicButton> _userpicButton;
 	object_ptr<ToggleAccountsButton> _toggleAccounts;
 	object_ptr<Ui::IconButton> _archiveButton;
-	object_ptr<Ui::IconButton> _cloudButton;
 	object_ptr<ResetScaleButton> _resetScaleButton = { nullptr };
 	object_ptr<Ui::ScrollArea> _scroll;
 	not_null<Ui::VerticalLayout*> _inner;
@@ -87,11 +83,12 @@ private:
 	not_null<Ui::SlideWrap<Ui::VerticalLayout>*> _accounts;
 	Ui::SlideWrap<Ui::RippleButton> *_addAccount = nullptr;
 	not_null<Ui::SlideWrap<Ui::PlainShadow>*> _shadow;
-	not_null<Ui::Menu::Menu*> _menu;
+	not_null<Ui::VerticalLayout*> _menu;
 	not_null<Ui::RpWidget*> _footer;
 	not_null<Ui::FlatLabel*> _telegram;
 	not_null<Ui::FlatLabel*> _version;
-	std::shared_ptr<QPointer<QAction>> _nightThemeAction;
+	QPointer<Ui::SettingsButton> _nightThemeToggle;
+	rpl::event_stream<bool> _nightThemeSwitches;
 	base::Timer _nightThemeSwitch;
 	base::unique_qptr<Ui::PopupMenu> _contextMenu;