void/AyuGramDesktop
2
0
Fork 0
mirror of https://github.com/AyuGram/AyuGramDesktop.git synced 2025-06-05 06:33:57 +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; membersMarginTop: 10px;
membersMarginBottom: 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) { peerListBox: PeerList(defaultPeerList) {
padding: margins( padding: margins(
0px, 0px,
membersMarginTop, membersMarginTop,
0px, 0px,
membersMarginBottom); membersMarginBottom);
item: PeerListItem(defaultPeerListItem) { item: peerListBoxItem;
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;
}
} }
localStorageRowHeight: 50px; localStorageRowHeight: 50px;

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

@ -439,6 +439,15 @@ groupCallDropdownMenu: DropdownMenu(defaultDropdownMenu) {
wrap: groupCallInnerDropdown; wrap: groupCallInnerDropdown;
menu: groupCallMenu; 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) { groupCallMembersListItem: PeerListItem(defaultPeerListItem) {
button: OutlineButton(defaultPeerListButton) { button: OutlineButton(defaultPeerListButton) {
textBg: groupCallMembersBg; textBg: groupCallMembersBg;
@ -453,14 +462,7 @@ groupCallMembersListItem: PeerListItem(defaultPeerListItem) {
ripple: groupCallRipple; ripple: groupCallRipple;
} }
disabledCheckFg: groupCallMemberNotJoinedStatus; disabledCheckFg: groupCallMemberNotJoinedStatus;
checkbox: RoundImageCheckbox(defaultPeerListCheckbox) { checkbox: groupCallMembersListCheckbox;
selectFg: groupCallActiveFg;
check: RoundCheckbox(defaultPeerListCheck) {
border: groupCallMembersBg;
bgActive: groupCallActiveFg;
check: icon {{ "default_checkbox_check", groupCallMembersFg, point(3px, 6px) }};
}
}
height: 52px; height: 52px;
photoPosition: point(12px, 6px); photoPosition: point(12px, 6px);
namePosition: point(63px, 7px); namePosition: point(63px, 7px);
@ -483,13 +485,46 @@ groupCallInviteDividerLabel: FlatLabel(defaultFlatLabel) {
textFg: groupCallMemberNotJoinedStatus; textFg: groupCallMemberNotJoinedStatus;
} }
groupCallInviteDividerPadding: margins(17px, 7px, 17px, 7px); groupCallInviteDividerPadding: margins(17px, 7px, 17px, 7px);
groupCallInviteMembersListItem: PeerListItem(groupCallMembersListItem) {
statusFg: groupCallMemberNotJoinedStatus;
statusFgOver: groupCallMemberNotJoinedStatus;
statusFgActive: groupCallMemberInactiveStatus;
}
groupCallInviteMembersList: PeerList(groupCallMembersList) { groupCallInviteMembersList: PeerList(groupCallMembersList) {
padding: margins(0px, 10px, 0px, 10px); padding: margins(0px, 10px, 0px, 10px);
item: PeerListItem(groupCallMembersListItem) { item: groupCallInviteMembersListItem;
statusFg: groupCallMemberNotJoinedStatus; }
statusFgOver: groupCallMemberNotJoinedStatus; groupCallJoinAsList: PeerList(groupCallInviteMembersList) {
statusFgActive: groupCallMemberInactiveStatus; 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) { groupCallMultiSelect: MultiSelect(defaultMultiSelect) {
@ -732,6 +767,10 @@ groupCallSettingsAttentionButton: SettingsButton(groupCallSettingsButton) {
groupCallBoxLabel: FlatLabel(boxLabel) { groupCallBoxLabel: FlatLabel(boxLabel) {
textFg: groupCallMembersFg; textFg: groupCallMembersFg;
} }
groupCallJoinAsLabel: FlatLabel(defaultFlatLabel) {
minWidth: 282px;
textFg: groupCallMembersFg;
}
groupCallRowBlobMinRadius: 27px; groupCallRowBlobMinRadius: 27px;
groupCallRowBlobMaxRadius: 29px; groupCallRowBlobMaxRadius: 29px;

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

@ -123,7 +123,7 @@ void ChooseJoinAsBox(
box, box,
tr::lng_group_call_join_as_about(), tr::lng_group_call_join_as_about(),
(context == Context::Switch (context == Context::Switch
? st::groupCallBoxLabel ? st::groupCallJoinAsLabel
: st::confirmPhoneAboutLabel))); : st::confirmPhoneAboutLabel)));
auto &lifetime = box->lifetime(); auto &lifetime = box->lifetime();
@ -135,8 +135,12 @@ void ChooseJoinAsBox(
info.joinAs); info.joinAs);
if (context == Context::Switch) { if (context == Context::Switch) {
controller->setStyleOverrides( controller->setStyleOverrides(
&st::groupCallInviteMembersList, &st::groupCallJoinAsList,
&st::groupCallMultiSelect); &st::groupCallMultiSelect);
} else {
controller->setStyleOverrides(
&st::peerListJoinAsList,
nullptr);
} }
const auto content = box->addRow( const auto content = box->addRow(
object_ptr<PeerListContent>(box, controller), 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) { 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; 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.drawEllipse(style::rtlrect(x, y, _st.imageRadius * 2, _st.imageRadius * 2, outerWidth));
p.setOpacity(1.); p.setOpacity(1.);
} }
if (_st.check.size > 0) {
auto iconLeft = x + 2 * _st.imageRadius + _st.selectWidth - _st.check.size; auto iconLeft = x + 2 * _st.imageRadius + _st.selectWidth - _st.check.size;
auto iconTop = y + 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); _check.paint(p, iconLeft, iconTop, outerWidth);
}
} }
float64 RoundImageCheckbox::checkedAnimationRatio() const { float64 RoundImageCheckbox::checkedAnimationRatio() const {