From 13b3de683acf8a3b7a17def8db2239d910359aaf Mon Sep 17 00:00:00 2001 From: John Preston Date: Fri, 14 May 2021 21:32:43 +0400 Subject: [PATCH] Improve narrow participants column design. --- Telegram/SourceFiles/calls/calls.style | 13 ++-- .../calls/group/calls_group_members.cpp | 62 +++++++++++++++---- .../calls/group/calls_group_members_row.cpp | 8 ++- .../calls/group/calls_group_members_row.h | 1 + .../calls/group/calls_group_panel.cpp | 2 +- 5 files changed, 67 insertions(+), 19 deletions(-) diff --git a/Telegram/SourceFiles/calls/calls.style b/Telegram/SourceFiles/calls/calls.style index c6149968c6..103d2c372b 100644 --- a/Telegram/SourceFiles/calls/calls.style +++ b/Telegram/SourceFiles/calls/calls.style @@ -562,6 +562,11 @@ groupCallMembersListItem: PeerListItem(defaultPeerListItem) { statusFgOver: groupCallMemberInactiveStatus; statusFgActive: groupCallMemberActiveStatus; } +groupCallNarrowMembersListItem: PeerListItem(groupCallMembersListItem) { + statusFg: groupCallMemberNotJoinedStatus; + statusFgOver: groupCallMemberNotJoinedStatus; + statusFgActive: groupCallMemberActiveStatus; +} groupCallMembersList: PeerList(defaultPeerList) { bg: groupCallMembersBg; about: FlatLabel(defaultPeerListAbout) { @@ -1157,8 +1162,8 @@ groupCallWideModeSize: size(960px, 580px); // ripple: groupCallRipple; //} groupCallNarrowInactiveCrossLine: CrossLineAnimation { - fg: groupCallMemberInactiveStatus; - icon: icon {{ "calls/video_mini_mute", groupCallMemberInactiveStatus }}; + fg: groupCallMemberNotJoinedStatus; + icon: icon {{ "calls/video_mini_mute", groupCallMemberNotJoinedStatus }}; startPosition: point(3px, 0px); endPosition: point(13px, 12px); stroke: 3px; @@ -1169,8 +1174,8 @@ groupCallNarrowColoredCrossLine: CrossLineAnimation(groupCallNarrowInactiveCross icon: icon {{ "calls/video_mini_mute", groupCallMemberActiveStatus }}; } groupCallNarrowRaisedHand: icon {{ "calls/video_mini_speak", groupCallMemberInactiveStatus }}; -groupCallNarrowCameraIcon: icon {{ "calls/video_mini_video", groupCallMemberInactiveStatus }}; -groupCallNarrowScreenIcon: icon {{ "calls/video_mini_screencast", groupCallMemberInactiveStatus }}; +groupCallNarrowCameraIcon: icon {{ "calls/video_mini_video", groupCallMemberNotJoinedStatus }}; +groupCallNarrowScreenIcon: icon {{ "calls/video_mini_screencast", groupCallMemberNotJoinedStatus }}; groupCallNarrowIconPosition: point(-4px, 2px); groupCallNarrowIconSkip: 15px; //groupCallVideoCrossLine: CrossLineAnimation(groupCallNarrowInactiveCrossLine) { diff --git a/Telegram/SourceFiles/calls/group/calls_group_members.cpp b/Telegram/SourceFiles/calls/group/calls_group_members.cpp index 05bd13b2a8..6f84478ff2 100644 --- a/Telegram/SourceFiles/calls/group/calls_group_members.cpp +++ b/Telegram/SourceFiles/calls/group/calls_group_members.cpp @@ -99,6 +99,7 @@ public: int outerWidth, not_null row, const IconState &state) override; + bool rowIsNarrow() override; //void rowPaintNarrowBackground( // Painter &p, // int x, @@ -989,7 +990,7 @@ void Members::Controller::rowPaintIcon( // Just green icon, no cross, no coloring. greenIcon.paintInCenter(p, rect); return; - } else if (state.speaking == 0.) { + } else if (state.speaking == 0. && (!narrow || !state.mutedByMe)) { if (state.active == 1.) { // Just gray icon, no cross, no coloring. const auto &grayIcon = largeVideo @@ -1051,7 +1052,7 @@ void Members::Controller::rowPaintIcon( } const auto activeInactiveColor = anim::color( (narrow - ? st::groupCallMemberInactiveStatus + ? st::groupCallMemberNotJoinedStatus : st::groupCallMemberInactiveIcon), (narrow ? st::groupCallMemberActiveStatus @@ -1107,19 +1108,56 @@ int Members::Controller::rowPaintStatusIcon( rowPaintIcon(p, rect, state); x += icon.width(); auto result = st::groupCallNarrowIconSkip; - if (_cameraActive.contains(row->peer())) { - st::groupCallNarrowCameraIcon.paint(p, x, y, outerWidth); - x += st::groupCallNarrowCameraIcon.width(); - result += st::groupCallNarrowCameraIcon.width(); - } - if (_screenActive.contains(row->peer())) { - st::groupCallNarrowScreenIcon.paint(p, x, y, outerWidth); - x += st::groupCallNarrowScreenIcon.width(); - result += st::groupCallNarrowScreenIcon.width(); + const auto participantPeer = row->peer(); + const auto camera = _cameraActive.contains(participantPeer); + const auto screen = _screenActive.contains(participantPeer); + if (camera || screen) { + const auto activeInactiveColor = anim::color( + st::groupCallMemberNotJoinedStatus, + st::groupCallMemberActiveStatus, + state.speaking); + const auto iconColor = anim::color( + activeInactiveColor, + st::groupCallMemberNotJoinedStatus, + state.muted); + const auto other = state.mutedByMe + ? st::groupCallMemberMutedIcon->c + : state.raisedHand + ? st::groupCallMemberInactiveStatus->c + : iconColor; + const auto color = (state.speaking == 1. && !state.mutedByMe) + ? st::groupCallMemberActiveStatus->c + : (state.speaking == 0. + ? (state.active == 1. + ? st::groupCallMemberNotJoinedStatus->c + : (state.active == 0. + ? (state.muted == 1. + ? (state.raisedHand + ? st::groupCallMemberInactiveStatus->c + : st::groupCallMemberNotJoinedStatus->c) + : (state.muted == 0. + ? st::groupCallMemberNotJoinedStatus->c + : other)) + : other)) + : other); + if (camera) { + st::groupCallNarrowCameraIcon.paint(p, x, y, outerWidth, other); + x += st::groupCallNarrowCameraIcon.width(); + result += st::groupCallNarrowCameraIcon.width(); + } + if (screen) { + st::groupCallNarrowScreenIcon.paint(p, x, y, outerWidth, other); + x += st::groupCallNarrowScreenIcon.width(); + result += st::groupCallNarrowScreenIcon.width(); + } } return result; } +bool Members::Controller::rowIsNarrow() { + return (_mode == PanelMode::Wide); +} + //void Members::Controller::rowPaintNarrowBackground( // Painter &p, // int x, @@ -1848,7 +1886,7 @@ void Members::refreshTilesGeometry() { if (sizes.size() == 3) { put(sizes.front().first, 2, 0); put((sizes.begin() + 1)->first, 0, 1); - put((sizes.begin() + 1)->first, 1, 1); + put((sizes.begin() + 2)->first, 1, 1); } else { auto row = 0; auto column = 0; diff --git a/Telegram/SourceFiles/calls/group/calls_group_members_row.cpp b/Telegram/SourceFiles/calls/group/calls_group_members_row.cpp index d87fcb398c..e0971f1999 100644 --- a/Telegram/SourceFiles/calls/group/calls_group_members_row.cpp +++ b/Telegram/SourceFiles/calls/group/calls_group_members_row.cpp @@ -765,9 +765,13 @@ void MembersRow::paintComplexStatusText( p.translate(-translatedWidth, 0); }); + const auto &style = (!narrowMode + || (_state == State::RaisedHand && _raisedHandStatus)) + ? st + : st::groupCallNarrowMembersListItem; PeerListRow::paintStatusText( p, - st, + style, x, y, availableWidth - translatedWidth, @@ -799,7 +803,7 @@ void MembersRow::paintComplexStatusText( } QSize MembersRow::actionSize() const { - return QSize( + return _delegate->rowIsNarrow() ? QSize() : QSize( st::groupCallActiveButton.width, st::groupCallActiveButton.height); } diff --git a/Telegram/SourceFiles/calls/group/calls_group_members_row.h b/Telegram/SourceFiles/calls/group/calls_group_members_row.h index 54b6afa0df..65087bd84a 100644 --- a/Telegram/SourceFiles/calls/group/calls_group_members_row.h +++ b/Telegram/SourceFiles/calls/group/calls_group_members_row.h @@ -62,6 +62,7 @@ public: int outerWidth, not_null row, const IconState &state) = 0; + virtual bool rowIsNarrow() = 0; //virtual void rowPaintNarrowBackground( // Painter &p, // int x, diff --git a/Telegram/SourceFiles/calls/group/calls_group_panel.cpp b/Telegram/SourceFiles/calls/group/calls_group_panel.cpp index e2f9b6c025..f03bb6d9f3 100644 --- a/Telegram/SourceFiles/calls/group/calls_group_panel.cpp +++ b/Telegram/SourceFiles/calls/group/calls_group_panel.cpp @@ -2015,7 +2015,7 @@ void Panel::updateMembersGeometry() { skip, top, membersWidth, - std::min(desiredHeight, widget()->height())); + std::min(desiredHeight, widget()->height() - top - skip)); _pinnedVideoWrap->setGeometry( membersWidth + 2 * skip, top,