Redesign invite members to voice chat button.

Telegram/Resources/langs/lang.strings

@@ -1830,6 +1830,8 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 "lng_group_call_create_sure" = "Do you really want to start a voice chat in this group?";
 "lng_group_call_also_end" = "End voice chat";
 "lng_group_call_settings_title" = "Settings";
+"lng_group_call_invite" = "Invite Member";
+"lng_group_call_invited_status" = "invited";
 "lng_group_call_invite_title" = "Invite members";
 "lng_group_call_invite_button" = "Invite";
 "lng_group_call_new_muted" = "Mute new members";

Telegram/SourceFiles/calls/calls.style

@@ -465,8 +465,8 @@ groupCallMembersListItem: PeerListItem(defaultPeerListItem) {
 	}
 	height: 52px;
 	photoPosition: point(12px, 6px);
-	namePosition: point(68px, 7px);
+	namePosition: point(63px, 7px);
-	statusPosition: point(68px, 26px);
+	statusPosition: point(63px, 26px);
 	photoSize: 40px;
 	nameFg: groupCallMembersFg;
 	nameFgChecked: groupCallMembersFg;
@@ -514,16 +514,21 @@ groupCallMultiSelect: MultiSelect(defaultMultiSelect) {
 
 groupCallMembersHeader: 47px;
 groupCallMembersMargin: margins(16px, 16px, 16px, 28px);
-groupCallAddMember: IconButton(defaultIconButton) {
+groupCallAddMember: SettingsButton(defaultSettingsButton) {
-	width: 36px;
+	textFg: groupCallMemberNotJoinedStatus;
-	height: 36px;
+	textFgOver: groupCallMemberNotJoinedStatus;
-	iconPosition: point(3px, 5px);
+	textBg: groupCallMembersBg;
-	icon: icon {{ "info_add_member", groupCallMemberInactiveIcon }};
+	textBgOver: groupCallMembersBgOver;
-	iconOver: icon {{ "info_add_member", groupCallMemberInactiveIcon }};
+
-	rippleAreaPosition: point(0px, 0px);
+	font: semiboldFont;
-	rippleAreaSize: 36px;
+
+	height: 22px;
+	padding: margins(63px, 17px, 22px, 11px);
+
 	ripple: groupCallRipple;
 }
+groupCallAddMemberIcon: icon {{ "info_add_member", groupCallMemberInactiveIcon, point(0px, 3px) }};
+groupCallAddMemberIconLeft: 16px;
 groupCallHeaderPosition: point(16px, 16px);
 groupCallHeaderLabel: FlatLabel(defaultFlatLabel) {
 	maxHeight: 18px;

Telegram/SourceFiles/calls/calls_group_members.cpp

@@ -15,6 +15,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "data/data_group_call.h"
 #include "data/data_peer_values.h" // Data::CanWriteValue.
 #include "data/data_session.h" // Data::Session::invitedToCallUsers.
+#include "settings/settings_common.h" // Settings::CreateButton.
 #include "ui/paint/blobs.h"
 #include "ui/widgets/buttons.h"
 #include "ui/widgets/scroll_area.h"
@@ -513,7 +514,9 @@ void Row::paintStatusText(
 		x,
 		y,
 		outerWidth,
-		peer()->isSelf() ? "connecting..." : "invited");
+		(peer()->isSelf()
+			? tr::lng_status_connecting(tr::now)
+			: tr::lng_group_call_invited_status(tr::now)));
 }
 
 void Row::paintAction(
@@ -1185,20 +1188,11 @@ GroupMembers::GroupMembers(
 , _call(call)
 , _scroll(this, st::defaultSolidScroll)
 , _listController(std::make_unique<MembersController>(call, parent)) {
-	setupHeader(call);
+	setupAddMember(call);
 	setupList();
 	setContent(_list);
 	setupFakeRoundCorners();
 	_listController->setDelegate(static_cast<PeerListDelegate*>(this));
-
-	paintRequest(
-	) | rpl::start_with_next([=](QRect clip) {
-		const auto headerPart = clip.intersected(
-			QRect(0, 0, width(), _header->height()));
-		if (!headerPart.isEmpty()) {
-			QPainter(this).fillRect(headerPart, st::groupCallMembersBg);
-		}
-	}, lifetime());
 }
 
 auto GroupMembers::toggleMuteRequests() const
@@ -1214,7 +1208,7 @@ auto GroupMembers::kickMemberRequests() const
 }
 
 int GroupMembers::desiredHeight() const {
-	auto desired = _header ? _header->height() : 0;
+	const auto top = _addMember ? _addMember->height() : 0;
 	auto count = [&] {
 		if (const auto call = _call.get()) {
 			if (const auto real = call->peer()->groupCall()) {
@@ -1226,7 +1220,7 @@ int GroupMembers::desiredHeight() const {
 		return 0;
 	}();
 	const auto use = std::max(count, _list->fullRowsCount());
-	return (_header ? _header->height() : 0)
+	return top
 		+ (use * st::groupCallMembersList.item.height)
 		+ (use ? st::lineWidth : 0);
 }
@@ -1236,48 +1230,14 @@ rpl::producer<int> GroupMembers::desiredHeightValue() const {
 		_listController.get());
 	return rpl::combine(
 		heightValue(),
+		_addMemberButton.value(),
 		controller->fullCountValue()
 	) | rpl::map([=] {
 		return desiredHeight();
 	});
 }
 
-void GroupMembers::setupHeader(not_null<GroupCall*> call) {
+void GroupMembers::setupAddMember(not_null<GroupCall*> call) {
-	_header = object_ptr<Ui::FixedHeightWidget>(
-		this,
-		st::groupCallMembersHeader);
-	auto parent = _header.data();
-
-	_titleWrap = Ui::CreateChild<Ui::RpWidget>(parent);
-	_title = setupTitle(call);
-	_addMember = Ui::CreateChild<Ui::IconButton>(
-		parent,
-		st::groupCallAddMember);
-	setupButtons(call);
-
-	widthValue(
-	) | rpl::start_with_next([this](int width) {
-		_header->resizeToWidth(width);
-	}, _header->lifetime());
-}
-
-object_ptr<Ui::FlatLabel> GroupMembers::setupTitle(
-		not_null<GroupCall*> call) {
-	const auto controller = static_cast<MembersController*>(
-		_listController.get());
-	auto result = object_ptr<Ui::FlatLabel>(
-		_titleWrap,
-		tr::lng_chat_status_members(
-			lt_count_decimal,
-			controller->fullCountValue() | tr::to_count(),
-			Ui::Text::Upper
-		),
-		st::groupCallHeaderLabel);
-	result->setAttribute(Qt::WA_TransparentForMouseEvents);
-	return result;
-}
-
-void GroupMembers::setupButtons(not_null<GroupCall*> call) {
 	using namespace rpl::mappers;
 
 	_canAddMembers = Data::CanWriteValue(call->peer().get());
@@ -1288,65 +1248,89 @@ void GroupMembers::setupButtons(not_null<GroupCall*> call) {
 			_canAddMembers = Data::CanWriteValue(channel.get());
 		});
 
-	_addMember->showOn(_canAddMembers.value());
+	_canAddMembers.value(
-	_addMember->addClickHandler([=] { // TODO throttle(ripple duration)
+	) | rpl::start_with_next([=](bool can) {
-		_addMemberRequests.fire({});
+		if (!can) {
-	});
+			_addMemberButton = nullptr;
+			_addMember.destroy();
+			updateControlsGeometry();
+			return;
+		}
+		_addMember = Settings::CreateButton(
+			this,
+			tr::lng_group_call_invite(),
+			st::groupCallAddMember,
+			&st::groupCallAddMemberIcon,
+			st::groupCallAddMemberIconLeft);
+		_addMember->show();
+
+		_addMember->addClickHandler([=] { // TODO throttle(ripple duration)
+			_addMemberRequests.fire({});
+		});
+		_addMemberButton = _addMember.data();
+
+		resizeToList();
+	}, lifetime());
 }
 
-void GroupMembers::setupList() {
+rpl::producer<int> GroupMembers::fullCountValue() const {
-	auto topSkip = _header ? _header->height() : 0;
+	return static_cast<MembersController*>(
+		_listController.get())->fullCountValue();
+}
 
+//tr::lng_chat_status_members(
+//	lt_count_decimal,
+//	controller->fullCountValue() | tr::to_count(),
+//	Ui::Text::Upper
+//),
+
+void GroupMembers::setupList() {
 	_listController->setStyleOverrides(&st::groupCallMembersList);
 	_list = _scroll->setOwnedWidget(object_ptr<ListWidget>(
 		this,
 		_listController.get()));
 
-	sizeValue(
+	_list->heightValue(
-	) | rpl::start_with_next([=](QSize size) {
+	) | rpl::start_with_next([=] {
-		_scroll->setGeometry(0, topSkip, size.width(), size.height() - topSkip);
+		resizeToList();
-		_list->resizeToWidth(size.width());
 	}, _list->lifetime());
 
-	_list->heightValue(
+	updateControlsGeometry();
-	) | rpl::start_with_next([=](int listHeight) {
-		auto newHeight = (listHeight > 0)
-			? (topSkip + listHeight + st::lineWidth)
-			: 0;
-		resize(width(), newHeight);
-	}, _list->lifetime());
-	_list->moveToLeft(0, topSkip);
-	_list->show();
 }
 
 void GroupMembers::resizeEvent(QResizeEvent *e) {
-	if (_header) {
+	updateControlsGeometry();
-		updateHeaderControlsGeometry(width());
+}
+
+void GroupMembers::resizeToList() {
+	if (!_list) {
+		return;
+	}
+	const auto listHeight = _list->height();
+	const auto newHeight = (listHeight > 0)
+		? ((_addMember ? _addMember->height() : 0)
+			+ listHeight
+			+ st::lineWidth)
+		: 0;
+	if (height() == newHeight) {
+		updateControlsGeometry();
+	} else {
+		resize(width(), newHeight);
 	}
 }
 
-void GroupMembers::updateHeaderControlsGeometry(int newWidth) {
+void GroupMembers::updateControlsGeometry() {
-	auto availableWidth = newWidth
+	if (!_list) {
-		- st::groupCallAddButtonPosition.x();
+		return;
-	_addMember->moveToLeft(
-		availableWidth - _addMember->width(),
-		st::groupCallAddButtonPosition.y(),
-		newWidth);
-	if (!_addMember->isHidden()) {
-		availableWidth -= _addMember->width();
 	}
-
+	auto topSkip = 0;
-	_titleWrap->resize(
+	if (_addMember) {
-		availableWidth - _addMember->width() - st::groupCallHeaderPosition.x(),
+		_addMember->resizeToWidth(width());
-		_title->height());
+		_addMember->move(0, 0);
-	_titleWrap->moveToLeft(
+		topSkip = _addMember->height();
-		st::groupCallHeaderPosition.x(),
+	}
-		st::groupCallHeaderPosition.y(),
+	_scroll->setGeometry(0, topSkip, width(), height() - topSkip);
-		newWidth);
+	_list->resizeToWidth(width());
-	_titleWrap->setAttribute(Qt::WA_TransparentForMouseEvents);
-
-	_title->resizeToWidth(_titleWrap->width());
-	_title->moveToLeft(0, 0);
 }
 
 void GroupMembers::setupFakeRoundCorners() {

Telegram/SourceFiles/calls/calls_group_members.h

@@ -11,6 +11,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 
 namespace Ui {
 class ScrollArea;
+class SettingsButton;
 } // namespace Ui
 
 namespace Data {
@@ -36,6 +37,7 @@ public:
 
 	[[nodiscard]] int desiredHeight() const;
 	[[nodiscard]] rpl::producer<int> desiredHeightValue() const override;
+	[[nodiscard]] rpl::producer<int> fullCountValue() const;
 	[[nodiscard]] rpl::producer<MuteRequest> toggleMuteRequests() const;
 	[[nodiscard]] auto kickMemberRequests() const
 		-> rpl::producer<not_null<UserData*>>;
@@ -67,25 +69,21 @@ private:
 	void peerListSetDescription(
 		object_ptr<Ui::FlatLabel> description) override;
 
-	void setupHeader(not_null<GroupCall*> call);
+	void setupAddMember(not_null<GroupCall*> call);
-	object_ptr<Ui::FlatLabel> setupTitle(not_null<GroupCall*> call);
+	void resizeToList();
 	void setupList();
 	void setupFakeRoundCorners();
 
-	void setupButtons(not_null<GroupCall*> call);
+	void updateControlsGeometry();
-
-	void updateHeaderControlsGeometry(int newWidth);
 
 	const base::weak_ptr<GroupCall> _call;
 	object_ptr<Ui::ScrollArea> _scroll;
 	std::unique_ptr<PeerListController> _listController;
-	object_ptr<Ui::RpWidget> _header = { nullptr };
+	object_ptr<Ui::SettingsButton> _addMember = { nullptr };
+	rpl::variable<Ui::SettingsButton*> _addMemberButton = nullptr;
 	ListWidget *_list = { nullptr };
 	rpl::event_stream<> _addMemberRequests;
 
-	Ui::RpWidget *_titleWrap = nullptr;
-	Ui::FlatLabel *_title = nullptr;
-	Ui::IconButton *_addMember = nullptr;
 	rpl::variable<bool> _canAddMembers;
 
 };

Telegram/SourceFiles/calls/calls_group_panel.h

@@ -115,6 +115,7 @@ private:
 	rpl::lifetime _callLifetime;
 
 	object_ptr<Ui::FlatLabel> _title = { nullptr };
+	object_ptr<Ui::FlatLabel> _subtitle = { nullptr };
 	object_ptr<GroupMembers> _members;
 
 	object_ptr<Ui::CallButton> _settings;