Move sidebar mainmenu button outside the scroll.

Telegram/SourceFiles/window/window.style

@@ -246,18 +246,43 @@ createThemeLink: InputField(defaultInputField) {
 }
 
 windowFiltersWidth: 72px;
-windowFiltersMainMenu: icon {{ "dialogs_menu", sideBarIconFg }};
+windowFiltersButton: SideBarButton(defaultSideBarButton) {
-windowFiltersMainMenuIconTop: 12px;
+	textTop: 40px;
-windowFiltersIconTop: 8px;
+	textSkip: 6px;
-windowFiltersAll: icon {{ "filters_all", sideBarIconFg }};
+	minHeight: 62px;
-windowFiltersAllActive: icon {{ "filters_all_active", sideBarIconFgActive }};
+	minTextWidth: 48px;
-windowFiltersUnread: icon {{ "filters_unread", sideBarIconFg }};
+	style: TextStyle(defaultTextStyle) {
-windowFiltersUnreadActive: icon {{ "filters_unread_active", sideBarIconFgActive }};
+		font: font(11px semibold);
-windowFiltersUnmuted: icon {{ "filters_unmuted", sideBarIconFg }};
+	}
-windowFiltersUnmutedActive: icon {{ "filters_unmuted_active", sideBarIconFgActive }};
+	badgeStyle: TextStyle(defaultTextStyle) {
-windowFiltersCustom: icon {{ "filters_custom", sideBarIconFg }};
+		font: font(11px semibold);
-windowFiltersCustomActive: icon {{ "filters_custom_active", sideBarIconFgActive }};
+	}
-windowFiltersSetup: icon {{ "filters_setup", sideBarIconFg }};
+	iconPosition: point(-1px, 6px);
+}
+windowFiltersMainMenu: SideBarButton(windowFiltersButton) {
+	icon: icon {{ "dialogs_menu", sideBarIconFg }};
+	iconPosition: point(-1px, -1px);
+	minHeight: 54px;
+}
+windowFiltersAll: SideBarButton(windowFiltersButton) {
+	icon: icon {{ "filters_all", sideBarIconFg }};
+	iconActive: icon {{ "filters_all_active", sideBarIconFgActive }};
+}
+windowFiltersUnread: SideBarButton(windowFiltersButton) {
+	icon: icon {{ "filters_unread", sideBarIconFg }};
+	iconActive: icon {{ "filters_unread_active", sideBarIconFgActive }};
+}
+windowFiltersUnmuted: SideBarButton(windowFiltersButton) {
+	icon: icon {{ "filters_unmuted", sideBarIconFg }};
+	iconActive: icon {{ "filters_unmuted_active", sideBarIconFgActive }};
+}
+windowFiltersCustom: SideBarButton(windowFiltersButton) {
+	icon: icon {{ "filters_custom", sideBarIconFg }};
+	iconActive: icon {{ "filters_custom_active", sideBarIconFgActive }};
+}
+windowFiltersSetup: SideBarButton(windowFiltersButton) {
+	icon: icon {{ "filters_setup", sideBarIconFg }};
+}
 
 // Mac specific
 

Telegram/SourceFiles/window/window_filters_menu.cpp

@@ -43,23 +43,11 @@ enum class Type {
 	return Type::Custom;
 }
 
-[[nodiscard]] std::array<const style::icon*, 2> ComputeIcons(Type type) {
+[[nodiscard]] const style::SideBarButton &ComputeStyle(Type type) {
 	switch (type) {
-	case Type::Unread:
+	case Type::Unread: return st::windowFiltersUnread;
-		return {
+	case Type::Unmuted: return st::windowFiltersUnmuted;
-			&st::windowFiltersUnread,
+	case Type::Custom: return st::windowFiltersCustom;
-			&st::windowFiltersUnreadActive
-		};
-	case Type::Unmuted:
-		return {
-			&st::windowFiltersUnmuted,
-			&st::windowFiltersUnmutedActive
-		};
-	case Type::Custom:
-		return {
-			&st::windowFiltersCustom,
-			&st::windowFiltersCustomActive
-		};
 	}
 	Unexpected("Filter type in FiltersMenu::refresh.");
 }
@@ -71,15 +59,46 @@ FiltersMenu::FiltersMenu(
 	not_null<SessionController*> session)
 : _session(session)
 , _parent(parent)
-, _widget(_parent, st::defaultSideBarMenu) {
+, _outer(_parent)
+, _menu(&_outer, QString(), st::windowFiltersMainMenu)
+, _scroll(&_outer)
+, _container(
+	_scroll.setOwnedWidget(
+		object_ptr<Ui::VerticalLayout>(&_scroll))) {
 	setup();
 }
 
 void FiltersMenu::setup() {
+	_outer.setAttribute(Qt::WA_OpaquePaintEvent);
+	_outer.show();
+	_outer.paintRequest(
+	) | rpl::start_with_next([=](QRect clip) {
+		const auto bottom = _scroll.y() + _container->height();
+		const auto height = _outer.height() - bottom;
+		if (height <= 0) {
+			return;
+		}
+		const auto fill = clip.intersected(
+			QRect(0, bottom, _outer.width(), height));
+		if (!fill.isEmpty()) {
+			auto p = QPainter(&_outer);
+			p.setPen(Qt::NoPen);
+			p.setBrush(st::windowFiltersAll.textBg);
+			p.drawRect(fill);
+		}
+	}, _outer.lifetime());
+
 	_parent->heightValue(
 	) | rpl::start_with_next([=](int height) {
-		_widget.setGeometry({ 0, 0, st::windowFiltersWidth, height });
+		const auto width = st::windowFiltersWidth;
-	}, _widget.lifetime());
+		_outer.setGeometry({ 0, 0, width, height });
+		_menu.resizeToWidth(width);
+		_menu.move(0, 0);
+		_scroll.setGeometry(
+			{ 0, _menu.height(), width, height - _menu.height() });
+		_container->resizeToWidth(width);
+		_container->move(0, 0);
+	}, _outer.lifetime());
 
 	const auto filters = &_session->session().data().chatsFilters();
 	rpl::single(
@@ -88,66 +107,63 @@ void FiltersMenu::setup() {
 		filters->changed()
 	) | rpl::start_with_next([=] {
 		refresh();
-	}, _widget.lifetime());
+	}, _outer.lifetime());
 
+	_activeFilterId = _session->activeChatsFilterCurrent();
 	_session->activeChatsFilter(
-	) | rpl::start_with_next([=](FilterId id) {
+	) | rpl::filter([=](FilterId id) {
-		_widget.setActive(QString::number(id));
+		return id != _activeFilterId;
-	}, _widget.lifetime());
+	}) | rpl::start_with_next([=](FilterId id) {
-
+		const auto i = _filters.find(_activeFilterId);
-	_widget.activateRequests(
+		if (i != end(_filters)) {
-	) | rpl::start_with_next([=](const QString &id) {
+			i->second->setActive(false);
-		if (id == "main_menu") {
-			_session->widget()->showMainMenu();
-		} else if (id == "setup") {
-		} else if (const auto filterId = id.toInt()) {
-			_session->setActiveChatsFilter(filterId);
-		} else {
-			_session->setActiveChatsFilter(0);
 		}
-	}, _widget.lifetime());
+		_activeFilterId = id;
+		const auto j = _filters.find(_activeFilterId);
+		if (j != end(_filters)) {
+			j->second->setActive(true);
+		}
+	}, _outer.lifetime());
+
+	_menu.setClickedCallback([=] {
+		_session->widget()->showMainMenu();
+	});
 }
 
 void FiltersMenu::refresh() {
-	auto items = std::vector<Ui::SideBarMenu::Item>();
-	items.push_back({
-		"main_menu",
-		QString(),
-		QString(),
-		&st::windowFiltersMainMenu,
-		&st::windowFiltersMainMenu,
-		st::windowFiltersMainMenuIconTop
-	});
-	items.push_back({
-		QString::number(0),
-		"All Chats",
-		QString(),
-		&st::windowFiltersAll,
-		&st::windowFiltersAllActive,
-		st::windowFiltersIconTop
-	});
 	const auto filters = &_session->session().data().chatsFilters();
-	for (const auto &filter : filters->list()) {
+	auto now = base::flat_map<int, base::unique_qptr<Ui::SideBarButton>>();
-		const auto type = ComputeType(filter);
+	const auto prepare = [&](
-		const auto icons = ComputeIcons(type);
+			FilterId id,
-		items.push_back({
+			const QString &title,
-			QString::number(filter.id()),
+			const style::SideBarButton &st,
-			filter.title(),
+			const QString &badge) {
-			QString(),
+		auto button = base::unique_qptr<Ui::SideBarButton>(_container->add(
-			icons[0],
+			object_ptr<Ui::SideBarButton>(
-			icons[1],
+				_container,
-			st::windowFiltersIconTop
+				title,
+				st)));
+		button->setBadge(badge);
+		button->setActive(_session->activeChatsFilterCurrent() == id);
+		button->setClickedCallback([=] {
+			if (id >= 0) {
+				_session->setActiveChatsFilter(id);
+			} else {
+				// #TODO filters
+			}
 		});
+		now.emplace(id, std::move(button));
+	};
+	prepare(0, "All chats", st::windowFiltersAll, QString());
+	for (const auto filter : filters->list()) {
+		prepare(
+			filter.id(),
+			filter.title(),
+			ComputeStyle(ComputeType(filter)),
+			QString());
 	}
-	items.push_back({
+	prepare(-1, "Setup", st::windowFiltersSetup, QString());
-		"setup",
+	_filters = std::move(now);
-		"Setup",
-		QString(),
-		&st::windowFiltersSetup,
-		&st::windowFiltersSetup,
-		st::windowFiltersIconTop
-	});
-	_widget.setItems(items);
 }
 
 } // namespace Window

Telegram/SourceFiles/window/window_filters_menu.h

@@ -7,7 +7,9 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 */
 #pragma once
 
-#include "ui/widgets/side_bar_menu.h"
+#include "ui/widgets/side_bar_button.h"
+#include "ui/widgets/scroll_area.h"
+#include "ui/wrap/vertical_layout.h"
 
 namespace Window {
 
@@ -25,7 +27,12 @@ private:
 
 	const not_null<SessionController*> _session;
 	const not_null<Ui::RpWidget*> _parent;
-	Ui::SideBarMenu _widget;
+	Ui::RpWidget _outer;
+	Ui::SideBarButton _menu;
+	Ui::ScrollArea _scroll;
+	not_null<Ui::VerticalLayout*> _container;
+	base::flat_map<FilterId, base::unique_qptr<Ui::SideBarButton>> _filters;
+	FilterId _activeFilterId = 0;
 
 };
 

Telegram/lib_ui

@@ -1 +1 @@
-Subproject commit 81e9a80831555ae7908ee86fb15ea791fadd0891
+Subproject commit 1b673b7e406af46e931fd37feabaf9e277ada93b