void/AyuGramDesktop
2
0
Fork 0
mirror of https://github.com/AyuGram/AyuGramDesktop.git synced 2025-04-16 14:17:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve 'Join As' selector design.

Browse source
This commit is contained in:
John Preston 2021-03-10 15:55:00 +04:00
parent f8783c3bfc
commit 506cd8c7ad
4 changed files with 83 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
Telegram/SourceFiles/boxes/boxes.style
View file

@ -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;

65
Telegram/SourceFiles/calls/calls.style
View file

@ -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;

8
Telegram/SourceFiles/calls/calls_choose_join_as.cpp
View file

@ -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<PeerListContent>(box, controller),

14
Telegram/SourceFiles/ui/effects/round_checkbox.cpp
View file

@ -298,7 +298,10 @@ RoundCheckbox::RoundCheckbox(const style::RoundCheckbox &st, Fn<void()> 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 {