From 506cd8c7ad2e79f23457942ae7af2cce1ae76812 Mon Sep 17 00:00:00 2001 From: John Preston Date: Wed, 10 Mar 2021 15:55:00 +0400 Subject: [PATCH] Improve 'Join As' selector design. --- Telegram/SourceFiles/boxes/boxes.style | 31 ++++----- Telegram/SourceFiles/calls/calls.style | 65 +++++++++++++++---- .../calls/calls_choose_join_as.cpp | 8 ++- .../SourceFiles/ui/effects/round_checkbox.cpp | 14 ++-- 4 files changed, 83 insertions(+), 35 deletions(-) diff --git a/Telegram/SourceFiles/boxes/boxes.style b/Telegram/SourceFiles/boxes/boxes.style index 5905da120..e728b36a3 100644 --- a/Telegram/SourceFiles/boxes/boxes.style +++ b/Telegram/SourceFiles/boxes/boxes.style @@ -158,27 +158,28 @@ contactsMarginBottom: 4px; membersMarginTop: 10px; membersMarginBottom: 10px; +peerListBoxItem: PeerListItem(defaultPeerListItem) { + height: 56px; + photoSize: contactsPhotoSize; + photoPosition: point(16px, 7px); + namePosition: point(74px, 9px); + statusPosition: point(74px, 30px); + button: OutlineButton(defaultPeerListButton) { + textBg: contactsBg; + textBgOver: contactsBgOver; + ripple: defaultRippleAnimation; + } + statusFg: contactsStatusFg; + statusFgOver: contactsStatusFgOver; + statusFgActive: contactsStatusFgOnline; +} peerListBox: PeerList(defaultPeerList) { padding: margins( 0px, membersMarginTop, 0px, membersMarginBottom); - item: PeerListItem(defaultPeerListItem) { - height: 56px; - photoSize: contactsPhotoSize; - photoPosition: point(16px, 7px); - namePosition: point(74px, 9px); - statusPosition: point(74px, 30px); - button: OutlineButton(defaultPeerListButton) { - textBg: contactsBg; - textBgOver: contactsBgOver; - ripple: defaultRippleAnimation; - } - statusFg: contactsStatusFg; - statusFgOver: contactsStatusFgOver; - statusFgActive: contactsStatusFgOnline; - } + item: peerListBoxItem; } localStorageRowHeight: 50px; diff --git a/Telegram/SourceFiles/calls/calls.style b/Telegram/SourceFiles/calls/calls.style index dd10feece..ec36dfa2b 100644 --- a/Telegram/SourceFiles/calls/calls.style +++ b/Telegram/SourceFiles/calls/calls.style @@ -439,6 +439,15 @@ groupCallDropdownMenu: DropdownMenu(defaultDropdownMenu) { wrap: groupCallInnerDropdown; menu: groupCallMenu; } +groupCallMembersListCheck: RoundCheckbox(defaultPeerListCheck) { + border: groupCallMembersBg; + bgActive: groupCallActiveFg; + check: icon {{ "default_checkbox_check", groupCallMembersFg, point(3px, 6px) }}; +} +groupCallMembersListCheckbox: RoundImageCheckbox(defaultPeerListCheckbox) { + selectFg: groupCallActiveFg; + check: groupCallMembersListCheck; +} groupCallMembersListItem: PeerListItem(defaultPeerListItem) { button: OutlineButton(defaultPeerListButton) { textBg: groupCallMembersBg; @@ -453,14 +462,7 @@ groupCallMembersListItem: PeerListItem(defaultPeerListItem) { ripple: groupCallRipple; } disabledCheckFg: groupCallMemberNotJoinedStatus; - checkbox: RoundImageCheckbox(defaultPeerListCheckbox) { - selectFg: groupCallActiveFg; - check: RoundCheckbox(defaultPeerListCheck) { - border: groupCallMembersBg; - bgActive: groupCallActiveFg; - check: icon {{ "default_checkbox_check", groupCallMembersFg, point(3px, 6px) }}; - } - } + checkbox: groupCallMembersListCheckbox; height: 52px; photoPosition: point(12px, 6px); namePosition: point(63px, 7px); @@ -483,13 +485,46 @@ groupCallInviteDividerLabel: FlatLabel(defaultFlatLabel) { textFg: groupCallMemberNotJoinedStatus; } groupCallInviteDividerPadding: margins(17px, 7px, 17px, 7px); - +groupCallInviteMembersListItem: PeerListItem(groupCallMembersListItem) { + statusFg: groupCallMemberNotJoinedStatus; + statusFgOver: groupCallMemberNotJoinedStatus; + statusFgActive: groupCallMemberInactiveStatus; +} groupCallInviteMembersList: PeerList(groupCallMembersList) { padding: margins(0px, 10px, 0px, 10px); - item: PeerListItem(groupCallMembersListItem) { - statusFg: groupCallMemberNotJoinedStatus; - statusFgOver: groupCallMemberNotJoinedStatus; - statusFgActive: groupCallMemberInactiveStatus; + item: groupCallInviteMembersListItem; +} +groupCallJoinAsList: PeerList(groupCallInviteMembersList) { + item: PeerListItem(groupCallInviteMembersListItem) { + height: 56px; + checkbox: RoundImageCheckbox(groupCallMembersListCheckbox) { + check: RoundCheckbox(groupCallMembersListCheck) { + size: 0px; + } + imageRadius: 19px; + imageSmallRadius: 15px; + selectFg: groupCallMemberInactiveStatus; + } + photoSize: 38px; + photoPosition: point(24px, 9px); + namePosition: point(73px, 9px); + statusPosition: point(73px, 28px); + } +} +peerListJoinAsList: PeerList(peerListBox) { + item: PeerListItem(peerListBoxItem) { + height: 56px; + checkbox: RoundImageCheckbox(defaultPeerListCheckbox) { + check: RoundCheckbox(defaultRoundCheckbox) { + size: 0px; + } + imageRadius: 19px; + imageSmallRadius: 15px; + } + photoSize: 38px; + photoPosition: point(24px, 9px); + namePosition: point(73px, 9px); + statusPosition: point(73px, 28px); } } groupCallMultiSelect: MultiSelect(defaultMultiSelect) { @@ -732,6 +767,10 @@ groupCallSettingsAttentionButton: SettingsButton(groupCallSettingsButton) { groupCallBoxLabel: FlatLabel(boxLabel) { textFg: groupCallMembersFg; } +groupCallJoinAsLabel: FlatLabel(defaultFlatLabel) { + minWidth: 282px; + textFg: groupCallMembersFg; +} groupCallRowBlobMinRadius: 27px; groupCallRowBlobMaxRadius: 29px; diff --git a/Telegram/SourceFiles/calls/calls_choose_join_as.cpp b/Telegram/SourceFiles/calls/calls_choose_join_as.cpp index ba8de48ea..4acc8628a 100644 --- a/Telegram/SourceFiles/calls/calls_choose_join_as.cpp +++ b/Telegram/SourceFiles/calls/calls_choose_join_as.cpp @@ -123,7 +123,7 @@ void ChooseJoinAsBox( box, tr::lng_group_call_join_as_about(), (context == Context::Switch - ? st::groupCallBoxLabel + ? st::groupCallJoinAsLabel : st::confirmPhoneAboutLabel))); auto &lifetime = box->lifetime(); @@ -135,8 +135,12 @@ void ChooseJoinAsBox( info.joinAs); if (context == Context::Switch) { controller->setStyleOverrides( - &st::groupCallInviteMembersList, + &st::groupCallJoinAsList, &st::groupCallMultiSelect); + } else { + controller->setStyleOverrides( + &st::peerListJoinAsList, + nullptr); } const auto content = box->addRow( object_ptr(box, controller), diff --git a/Telegram/SourceFiles/ui/effects/round_checkbox.cpp b/Telegram/SourceFiles/ui/effects/round_checkbox.cpp index 881081b27..1ef1ee37e 100644 --- a/Telegram/SourceFiles/ui/effects/round_checkbox.cpp +++ b/Telegram/SourceFiles/ui/effects/round_checkbox.cpp @@ -298,7 +298,10 @@ RoundCheckbox::RoundCheckbox(const style::RoundCheckbox &st, Fn updateCa } void RoundCheckbox::paint(Painter &p, int x, int y, int outerWidth, float64 masterScale) { - if (!_checkedProgress.animating() && !_checked && !_displayInactive) { + if (!_st.size + || (!_checkedProgress.animating() + && !_checked + && !_displayInactive)) { return; } @@ -431,10 +434,11 @@ void RoundImageCheckbox::paint(Painter &p, int x, int y, int outerWidth) { p.drawEllipse(style::rtlrect(x, y, _st.imageRadius * 2, _st.imageRadius * 2, outerWidth)); p.setOpacity(1.); } - - auto iconLeft = x + 2 * _st.imageRadius + _st.selectWidth - _st.check.size; - auto iconTop = y + 2 * _st.imageRadius + _st.selectWidth - _st.check.size; - _check.paint(p, iconLeft, iconTop, outerWidth); + if (_st.check.size > 0) { + auto iconLeft = x + 2 * _st.imageRadius + _st.selectWidth - _st.check.size; + auto iconTop = y + 2 * _st.imageRadius + _st.selectWidth - _st.check.size; + _check.paint(p, iconLeft, iconTop, outerWidth); + } } float64 RoundImageCheckbox::checkedAnimationRatio() const {