MrBesen/tdesktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve sticker sets box design.

Browse Source
This commit is contained in:
John Preston 2023-08-09 12:46:30 +02:00
parent 6441266879
commit 39a80c6604
4 changed files with 69 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Telegram/SourceFiles/boxes/boxes.style
View File

@ -607,7 +607,7 @@ groupStickersField: InputField(defaultMultiSelectSearchField) {
textBg: boxBg; textBg: boxBg;
heightMin: 32px; heightMin: 32px;
} }
groupStickersSubTitleHeight: 36px; groupStickersSubTitleHeight: 48px;
proxyUsePadding: margins(22px, 6px, 22px, 5px); proxyUsePadding: margins(22px, 6px, 22px, 5px);
proxyTryIPv6Padding: margins(22px, 8px, 22px, 5px); proxyTryIPv6Padding: margins(22px, 8px, 22px, 5px);

96
Telegram/SourceFiles/boxes/stickers_box.cpp
View File

@ -250,6 +250,7 @@ private:
int countMaxNameWidth(bool installedSet) const; int countMaxNameWidth(bool installedSet) const;
[[nodiscard]] bool skipPremium() const; [[nodiscard]] bool skipPremium() const;
const style::PeerListItem &_st;
const std::shared_ptr<ChatHelpers::Show> _show; const std::shared_ptr<ChatHelpers::Show> _show;
const not_null<Main::Session*> _session; const not_null<Main::Session*> _session;
MTP::Sender _api; MTP::Sender _api;
@ -386,7 +387,8 @@ StickersBox::StickersBox(
std::shared_ptr<ChatHelpers::Show> show, std::shared_ptr<ChatHelpers::Show> show,
Section section, Section section,
bool masks) bool masks)
: _show(std::move(show)) : _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session()) , _session(&_show->session())
, _api(&_session->mtp()) , _api(&_session->mtp())
, _tabs(this, st::stickersTabs) , _tabs(this, st::stickersTabs)
@ -407,7 +409,8 @@ StickersBox::StickersBox(
QWidget*, QWidget*,
std::shared_ptr<ChatHelpers::Show> show, std::shared_ptr<ChatHelpers::Show> show,
not_null<ChannelData*> megagroup) not_null<ChannelData*> megagroup)
: _show(std::move(show)) : _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session()) , _session(&_show->session())
, _api(&_session->mtp()) , _api(&_session->mtp())
, _section(Section::Installed) , _section(Section::Installed)
@ -425,7 +428,8 @@ StickersBox::StickersBox(
QWidget*, QWidget*,
std::shared_ptr<ChatHelpers::Show> show, std::shared_ptr<ChatHelpers::Show> show,
const QVector<MTPStickerSetCovered> &attachedSets) const QVector<MTPStickerSetCovered> &attachedSets)
: _show(std::move(show)) : _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session()) , _session(&_show->session())
, _api(&_session->mtp()) , _api(&_session->mtp())
, _section(Section::Attached) , _section(Section::Attached)
@ -440,7 +444,8 @@ StickersBox::StickersBox(
QWidget*, QWidget*,
std::shared_ptr<ChatHelpers::Show> show, std::shared_ptr<ChatHelpers::Show> show,
const std::vector<StickerSetIdentifier> &emojiSets) const std::vector<StickerSetIdentifier> &emojiSets)
: _show(std::move(show)) : _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session()) , _session(&_show->session())
, _api(&_session->mtp()) , _api(&_session->mtp())
, _section(Section::Attached) , _section(Section::Attached)
@ -1131,6 +1136,7 @@ StickersBox::Inner::Inner(
std::shared_ptr<ChatHelpers::Show> show, std::shared_ptr<ChatHelpers::Show> show,
StickersBox::Section section) StickersBox::Section section)
: RpWidget(parent) : RpWidget(parent)
, _st(st::stickersRowItem)
, _show(std::move(show)) , _show(std::move(show))
, _session(&_show->session()) , _session(&_show->session())
, _api(&_session->mtp()) , _api(&_session->mtp())
@ -1150,11 +1156,11 @@ StickersBox::Inner::Inner(
, _inactiveButtonBg( , _inactiveButtonBg(
ImageRoundRadius::Large, ImageRoundRadius::Large,
st::stickersTrendingInstalled.textBg) st::stickersTrendingInstalled.textBg)
, _rowHeight(st::contactsPadding.top() + st::contactsPhotoSize + st::contactsPadding.bottom()) , _rowHeight(_st.height)
, _shiftingAnimation([=](crl::time now) { , _shiftingAnimation([=](crl::time now) {
return shiftingAnimationCallback(now); return shiftingAnimationCallback(now);
}) })
, _itemsTop(st::membersMarginTop) , _itemsTop(st::lineWidth)
, _addText(tr::lng_stickers_featured_add(tr::now)) , _addText(tr::lng_stickers_featured_add(tr::now))
, _addWidth(st::stickersTrendingAdd.font->width(_addText)) , _addWidth(st::stickersTrendingAdd.font->width(_addText))
, _undoText(tr::lng_stickers_return(tr::now)) , _undoText(tr::lng_stickers_return(tr::now))
@ -1169,6 +1175,7 @@ StickersBox::Inner::Inner(
std::shared_ptr<ChatHelpers::Show> show, std::shared_ptr<ChatHelpers::Show> show,
not_null<ChannelData*> megagroup) not_null<ChannelData*> megagroup)
: RpWidget(parent) : RpWidget(parent)
, _st(st::stickersRowItem)
, _show(std::move(show)) , _show(std::move(show))
, _session(&_show->session()) , _session(&_show->session())
, _api(&_session->mtp()) , _api(&_session->mtp())
@ -1188,11 +1195,11 @@ StickersBox::Inner::Inner(
, _inactiveButtonBg( , _inactiveButtonBg(
ImageRoundRadius::Large, ImageRoundRadius::Large,
st::stickersTrendingInstalled.textBg) st::stickersTrendingInstalled.textBg)
, _rowHeight(st::contactsPadding.top() + st::contactsPhotoSize + st::contactsPadding.bottom()) , _rowHeight(_st.height)
, _shiftingAnimation([=](crl::time now) { , _shiftingAnimation([=](crl::time now) {
return shiftingAnimationCallback(now); return shiftingAnimationCallback(now);
}) })
, _itemsTop(st::membersMarginTop) , _itemsTop(st::lineWidth)
, _megagroupSet(megagroup) , _megagroupSet(megagroup)
, _megagroupSetInput(_megagroupSet->mgInfo->stickerSet) , _megagroupSetInput(_megagroupSet->mgInfo->stickerSet)
, _megagroupSetField( , _megagroupSetField(
@ -1328,8 +1335,8 @@ QRect StickersBox::Inner::relativeButtonRect(
buttonh = st.height; buttonh = st.height;
buttonshift = 0; buttonshift = 0;
} }
auto buttonx = width() - st::contactsPadding.right() - st::contactsCheckPosition.x() - buttonw + buttonshift; auto buttonx = width() - st::contactsPadding.right() - buttonw + buttonshift;
auto buttony = st::contactsPadding.top() + (st::contactsPhotoSize - buttonh) / 2; auto buttony = (_st.height - buttonh) / 2;
return QRect(buttonx, buttony, buttonw, buttonh); return QRect(buttonx, buttony, buttonw, buttonh);
} }
@ -1345,7 +1352,7 @@ void StickersBox::Inner::paintRow(Painter &p, not_null<Row*> row, int index) {
return -1; return -1;
}(); }();
if (index >= 0 && index == selectedIndex) { if (index >= 0 && index == selectedIndex) {
p.fillRect(0, 0, width(), _rowHeight, st::contactsBgOver); p.fillRect(0, 0, width(), _rowHeight, _st.button.textBgOver);
if (row->ripple) { if (row->ripple) {
row->ripple->paint(p, 0, 0, width()); row->ripple->paint(p, 0, 0, width());
} }
@ -1362,7 +1369,7 @@ void StickersBox::Inner::paintRow(Painter &p, not_null<Row*> row, int index) {
current = reachedOpacity; current = reachedOpacity;
} }
} }
auto rect = myrtlrect(st::contactsPadding.left() / 2, st::contactsPadding.top() / 2, width() - (st::contactsPadding.left() / 2) - _scrollbar - st::contactsPadding.left() / 2, _rowHeight - ((st::contactsPadding.top() + st::contactsPadding.bottom()) / 2)); auto rect = myrtlrect(_st.photoPosition.x() / 2, _st.photoPosition.y() / 2, width() - _st.photoPosition.x() - _scrollbar, _rowHeight - _st.photoPosition.y());
p.setOpacity(current); p.setOpacity(current);
Ui::Shadow::paint(p, rect, width(), st::boxRoundShadow); Ui::Shadow::paint(p, rect, width(), st::boxRoundShadow);
p.setOpacity(1); p.setOpacity(1);
@ -1383,27 +1390,27 @@ void StickersBox::Inner::paintRow(Painter &p, not_null<Row*> row, int index) {
p.setOpacity(st::stickersRowDisabledOpacity); p.setOpacity(st::stickersRowDisabledOpacity);
} }
auto stickerx = st::contactsPadding.left(); auto stickerskip = 0;
if (!_megagroupSet && _isInstalledTab) { if (!_megagroupSet && _isInstalledTab) {
stickerx += st::stickersReorderIcon.width() + st::stickersReorderSkip; stickerskip += st::stickersReorderIcon.width() + st::stickersReorderSkip;
if (!row->isRecentSet()) { if (!row->isRecentSet()) {
st::stickersReorderIcon.paint(p, st::contactsPadding.left(), (_rowHeight - st::stickersReorderIcon.height()) / 2, width()); st::stickersReorderIcon.paint(p, _st.photoPosition.x(), (_rowHeight - st::stickersReorderIcon.height()) / 2, width());
} }
} }
if (row->sticker) { if (row->sticker) {
paintRowThumbnail(p, row, stickerx); paintRowThumbnail(p, row, stickerskip + _st.photoPosition.x());
} }
int namex = stickerx + st::contactsPhotoSize + st::contactsPadding.left(); int namex = stickerskip + _st.namePosition.x();
int namey = st::contactsPadding.top() + st::contactsNameTop; int namey = _st.namePosition.y();
int statusx = namex; int statusx = stickerskip + _st.statusPosition.x();
int statusy = st::contactsPadding.top() + st::contactsStatusTop; int statusy = _st.statusPosition.y();
p.setFont(st::contactsNameStyle.font); p.setFont(st::contactsNameStyle.font);
p.setPen(st::contactsNameFg); p.setPen(_st.nameFg);
p.drawTextLeft(namex, namey, width(), row->title, row->titleWidth); p.drawTextLeft(namex, namey, width(), row->title, row->titleWidth);
if (row->isUnread()) { if (row->isUnread()) {
@ -1425,7 +1432,7 @@ void StickersBox::Inner::paintRow(Painter &p, not_null<Row*> row, int index) {
: tr::lng_stickers_count(tr::now, lt_count, row->count); : tr::lng_stickers_count(tr::now, lt_count, row->count);
p.setFont(st::contactsStatusFont); p.setFont(st::contactsStatusFont);
p.setPen(st::contactsStatusFg); p.setPen(_st.statusFg);
p.drawTextLeft(statusx, statusy, width(), statusText); p.drawTextLeft(statusx, statusy, width(), statusText);
p.setOpacity(1); p.setOpacity(1);
@ -1457,15 +1464,15 @@ void StickersBox::Inner::paintRowThumbnail(
? row->stickerMedia->thumbnail() ? row->stickerMedia->thumbnail()
: nullptr; : nullptr;
const auto paused = _show->paused(ChatHelpers::PauseReason::Layer); const auto paused = _show->paused(ChatHelpers::PauseReason::Layer);
const auto x = left + (st::contactsPhotoSize - row->pixw) / 2; const auto x = left + (_st.photoSize - row->pixw) / 2;
const auto y = st::contactsPadding.top() + (st::contactsPhotoSize - row->pixh) / 2; const auto y = _st.photoPosition.y() + (_st.photoSize - row->pixh) / 2;
if (row->lottie && row->lottie->ready()) { if (row->lottie && row->lottie->ready()) {
const auto frame = row->lottie->frame(); const auto frame = row->lottie->frame();
const auto size = frame.size() / cIntRetinaFactor(); const auto size = frame.size() / cIntRetinaFactor();
p.drawImage( p.drawImage(
QRect( QRect(
left + (st::contactsPhotoSize - size.width()) / 2, left + (_st.photoSize - size.width()) / 2,
st::contactsPadding.top() + (st::contactsPhotoSize - size.height()) / 2, _st.photoPosition.y() + (_st.photoSize - size.height()) / 2,
size.width(), size.width(),
size.height()), size.height()),
frame); frame);
@ -1500,9 +1507,7 @@ void StickersBox::Inner::validateLottieAnimation(not_null<Row*> row) {
row->thumbnailMedia.get(), row->thumbnailMedia.get(),
row->stickerMedia.get(), row->stickerMedia.get(),
ChatHelpers::StickerLottieSize::SetsListThumbnail, ChatHelpers::StickerLottieSize::SetsListThumbnail,
QSize( QSize(_st.photoSize, _st.photoSize) * cIntRetinaFactor());
st::contactsPhotoSize,
st::contactsPhotoSize) * cIntRetinaFactor());
if (!player) { if (!player) {
return; return;
} }
@ -1572,15 +1577,12 @@ void StickersBox::Inner::updateRowThumbnail(not_null<Row*> row) {
} }
Unexpected("StickersBox::Inner::updateRowThumbnail: row not found"); Unexpected("StickersBox::Inner::updateRowThumbnail: row not found");
}(); }();
const auto left = st::contactsPadding.left() const auto left = _st.photoPosition.x()
+ ((!_megagroupSet && _isInstalledTab) + ((!_megagroupSet && _isInstalledTab)
? st::stickersReorderIcon.width() + st::stickersReorderSkip ? st::stickersReorderIcon.width() + st::stickersReorderSkip
: 0); : 0);
update( const auto top = rowTop + _st.photoPosition.y();
left, update(left, top, _st.photoSize, _st.photoSize);
rowTop + st::contactsPadding.top(),
st::contactsPhotoSize,
st::contactsPhotoSize);
} }
void StickersBox::Inner::paintFakeButton(Painter &p, not_null<Row*> row, int index) { void StickersBox::Inner::paintFakeButton(Painter &p, not_null<Row*> row, int index) {
@ -1818,7 +1820,7 @@ void StickersBox::Inner::updateSelected() {
actionSel = -1; actionSel = -1;
} }
if (!_megagroupSet && _isInstalledTab && !row->isRecentSet()) { if (!_megagroupSet && _isInstalledTab && !row->isRecentSet()) {
auto dragAreaWidth = st::contactsPadding.left() + st::stickersReorderIcon.width() + st::stickersReorderSkip; auto dragAreaWidth = _st.photoPosition.x() + st::stickersReorderIcon.width() + st::stickersReorderSkip;
auto dragArea = myrtlrect(0, 0, dragAreaWidth, _rowHeight); auto dragArea = myrtlrect(0, 0, dragAreaWidth, _rowHeight);
inDragArea = dragArea.contains(local); inDragArea = dragArea.contains(local);
} }
@ -2142,7 +2144,7 @@ void StickersBox::Inner::rebuildMegagroupSet() {
} }
void StickersBox::Inner::rebuild(bool masks) { void StickersBox::Inner::rebuild(bool masks) {
_itemsTop = st::membersMarginTop; _itemsTop = st::lineWidth;
if (_megagroupSet) { if (_megagroupSet) {
_itemsTop += st::groupStickersFieldPadding.top() + _megagroupSetField->height() + st::groupStickersFieldPadding.bottom(); _itemsTop += st::groupStickersFieldPadding.top() + _megagroupSetField->height() + st::groupStickersFieldPadding.bottom();
@ -2291,11 +2293,11 @@ bool StickersBox::Inner::skipPremium() const {
} }
int StickersBox::Inner::countMaxNameWidth(bool installedSet) const { int StickersBox::Inner::countMaxNameWidth(bool installedSet) const {
int namex = st::contactsPadding.left() + st::contactsPhotoSize + st::contactsPadding.left(); int namex = _st.namePosition.x();
if (!_megagroupSet && _isInstalledTab) { if (!_megagroupSet && _isInstalledTab) {
namex += st::stickersReorderIcon.width() + st::stickersReorderSkip; namex += st::stickersReorderIcon.width() + st::stickersReorderSkip;
} }
int namew = st::boxWideWidth - namex - st::contactsPadding.right() - st::contactsCheckPosition.x(); int namew = st::boxWideWidth - namex - st::contactsPadding.right();
if (_isInstalledTab) { if (_isInstalledTab) {
if (!_megagroupSet) { if (!_megagroupSet) {
namew -= _undoWidth - st::stickersUndoRemove.width; namew -= _undoWidth - st::stickersUndoRemove.width;
@ -2401,17 +2403,17 @@ void StickersBox::Inner::fillSetCover(
: QSize(1, 1); : QSize(1, 1);
auto pixw = size.width(); auto pixw = size.width();
auto pixh = size.height(); auto pixh = size.height();
if (pixw > st::contactsPhotoSize) { if (pixw > _st.photoSize) {
if (pixw > pixh) { if (pixw > pixh) {
pixh = (pixh * st::contactsPhotoSize) / pixw; pixh = (pixh * _st.photoSize) / pixw;
pixw = st::contactsPhotoSize; pixw = _st.photoSize;
} else { } else {
pixw = (pixw * st::contactsPhotoSize) / pixh; pixw = (pixw * _st.photoSize) / pixh;
pixh = st::contactsPhotoSize; pixh = _st.photoSize;
} }
} else if (pixh > st::contactsPhotoSize) { } else if (pixh > _st.photoSize) {
pixw = (pixw * st::contactsPhotoSize) / pixh; pixw = (pixw * _st.photoSize) / pixh;
pixh = st::contactsPhotoSize; pixh = _st.photoSize;
} }
*outWidth = pixw; *outWidth = pixw;
*outHeight = pixh; *outHeight = pixh;

2
Telegram/SourceFiles/boxes/stickers_box.h
View File

@ -16,6 +16,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
namespace style { namespace style {
struct RippleAnimation; struct RippleAnimation;
struct PeerListItem;
} // namespace style } // namespace style
namespace Ui { namespace Ui {
@ -142,6 +143,7 @@ private:
std::array<Inner*, 5> widgets() const; std::array<Inner*, 5> widgets() const;
const style::PeerListItem &_st;
const std::shared_ptr<ChatHelpers::Show> _show; const std::shared_ptr<ChatHelpers::Show> _show;
const not_null<Main::Session*> _session; const not_null<Main::Session*> _session;
MTP::Sender _api; MTP::Sender _api;

18
Telegram/SourceFiles/chat_helpers/chat_helpers.style
View File

@ -313,10 +313,26 @@ stickersUndoRemove: RoundButton(defaultLightButton) {
} }
stickersRemoveSkip: 4px; stickersRemoveSkip: 4px;
stickersReorderIcon: icon {{ "stickers_reorder", menuIconFg }}; stickersReorderIcon: icon {{ "stickers_reorder", menuIconFg }};
stickersReorderSkip: 13px; stickersReorderSkip: 18px;
stickersTabs: defaultTabsSlider; stickersTabs: defaultTabsSlider;
stickersRowItem: PeerListItem(defaultPeerListItem) {
height: 52px;
photoSize: 32px;
photoPosition: point(18px, 10px);
namePosition: point(66px, 7px);
statusPosition: point(66px, 26px);
button: OutlineButton(defaultPeerListButton) {
textBg: contactsBg;
textBgOver: contactsBgOver;
ripple: defaultRippleAnimation;
}
statusFg: contactsStatusFg;
statusFgOver: contactsStatusFgOver;
statusFgActive: contactsStatusFgOnline;
}
stickerEmojiSkip: 5px; stickerEmojiSkip: 5px;
stickersFeaturedBadgeFont: font(12px bold); stickersFeaturedBadgeFont: font(12px bold);