Skip to content

Commit

Permalink
Improve sticker sets box design.
Browse files Browse the repository at this point in the history
  • Loading branch information
@john-preston
john-preston committed Aug 10, 2023
1 parent 6441266 commit 39a80c6
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 49 deletions.
2 changes: 1 addition & 1 deletion Telegram/SourceFiles/boxes/boxes.style
View file
Original file line number Diff line number Diff line change
Expand Up @@ -607,7 +607,7 @@ groupStickersField: InputField(defaultMultiSelectSearchField) {
textBg: boxBg;
heightMin: 32px;
}
groupStickersSubTitleHeight: 36px;
groupStickersSubTitleHeight: 48px;

proxyUsePadding: margins(22px, 6px, 22px, 5px);
proxyTryIPv6Padding: margins(22px, 8px, 22px, 5px);
Expand Down
96 changes: 49 additions & 47 deletions Telegram/SourceFiles/boxes/stickers_box.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,7 @@ class StickersBox::Inner : public Ui::RpWidget {
int countMaxNameWidth(bool installedSet) const;
[[nodiscard]] bool skipPremium() const;

const style::PeerListItem &_st;
const std::shared_ptr<ChatHelpers::Show> _show;
const not_null<Main::Session*> _session;
MTP::Sender _api;
Expand Down Expand Up @@ -386,7 +387,8 @@ StickersBox::StickersBox(
std::shared_ptr<ChatHelpers::Show> show,
Section section,
bool masks)
: _show(std::move(show))
: _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session())
, _api(&_session->mtp())
, _tabs(this, st::stickersTabs)
Expand All @@ -407,7 +409,8 @@ StickersBox::StickersBox(
QWidget*,
std::shared_ptr<ChatHelpers::Show> show,
not_null<ChannelData*> megagroup)
: _show(std::move(show))
: _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session())
, _api(&_session->mtp())
, _section(Section::Installed)
Expand All @@ -425,7 +428,8 @@ StickersBox::StickersBox(
QWidget*,
std::shared_ptr<ChatHelpers::Show> show,
const QVector<MTPStickerSetCovered> &attachedSets)
: _show(std::move(show))
: _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session())
, _api(&_session->mtp())
, _section(Section::Attached)
Expand All @@ -440,7 +444,8 @@ StickersBox::StickersBox(
QWidget*,
std::shared_ptr<ChatHelpers::Show> show,
const std::vector<StickerSetIdentifier> &emojiSets)
: _show(std::move(show))
: _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session())
, _api(&_session->mtp())
, _section(Section::Attached)
Expand Down Expand Up @@ -1131,6 +1136,7 @@ StickersBox::Inner::Inner(
std::shared_ptr<ChatHelpers::Show> show,
StickersBox::Section section)
: RpWidget(parent)
, _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session())
, _api(&_session->mtp())
Expand All @@ -1150,11 +1156,11 @@ StickersBox::Inner::Inner(
, _inactiveButtonBg(
ImageRoundRadius::Large,
st::stickersTrendingInstalled.textBg)
, _rowHeight(st::contactsPadding.top() + st::contactsPhotoSize + st::contactsPadding.bottom())
, _rowHeight(_st.height)
, _shiftingAnimation([=](crl::time now) {
return shiftingAnimationCallback(now);
})
, _itemsTop(st::membersMarginTop)
, _itemsTop(st::lineWidth)
, _addText(tr::lng_stickers_featured_add(tr::now))
, _addWidth(st::stickersTrendingAdd.font->width(_addText))
, _undoText(tr::lng_stickers_return(tr::now))
Expand All @@ -1169,6 +1175,7 @@ StickersBox::Inner::Inner(
std::shared_ptr<ChatHelpers::Show> show,
not_null<ChannelData*> megagroup)
: RpWidget(parent)
, _st(st::stickersRowItem)
, _show(std::move(show))
, _session(&_show->session())
, _api(&_session->mtp())
Expand All @@ -1188,11 +1195,11 @@ StickersBox::Inner::Inner(
, _inactiveButtonBg(
ImageRoundRadius::Large,
st::stickersTrendingInstalled.textBg)
, _rowHeight(st::contactsPadding.top() + st::contactsPhotoSize + st::contactsPadding.bottom())
, _rowHeight(_st.height)
, _shiftingAnimation([=](crl::time now) {
return shiftingAnimationCallback(now);
})
, _itemsTop(st::membersMarginTop)
, _itemsTop(st::lineWidth)
, _megagroupSet(megagroup)
, _megagroupSetInput(_megagroupSet->mgInfo->stickerSet)
, _megagroupSetField(
Expand Down Expand Up @@ -1328,8 +1335,8 @@ QRect StickersBox::Inner::relativeButtonRect(
buttonh = st.height;
buttonshift = 0;
}
auto buttonx = width() - st::contactsPadding.right() - st::contactsCheckPosition.x() - buttonw + buttonshift;
auto buttony = st::contactsPadding.top() + (st::contactsPhotoSize - buttonh) / 2;
auto buttonx = width() - st::contactsPadding.right() - buttonw + buttonshift;
auto buttony = (_st.height - buttonh) / 2;
return QRect(buttonx, buttony, buttonw, buttonh);
}

Expand All @@ -1345,7 +1352,7 @@ void StickersBox::Inner::paintRow(Painter &p, not_null<Row*> row, int index) {
return -1;
}();
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) {
row->ripple->paint(p, 0, 0, width());
}
Expand All @@ -1362,7 +1369,7 @@ void StickersBox::Inner::paintRow(Painter &p, not_null<Row*> row, int index) {
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);
Ui::Shadow::paint(p, rect, width(), st::boxRoundShadow);
p.setOpacity(1);
Expand All @@ -1383,27 +1390,27 @@ void StickersBox::Inner::paintRow(Painter &p, not_null<Row*> row, int index) {
p.setOpacity(st::stickersRowDisabledOpacity);
}

auto stickerx = st::contactsPadding.left();
auto stickerskip = 0;

if (!_megagroupSet && _isInstalledTab) {
stickerx += st::stickersReorderIcon.width() + st::stickersReorderSkip;
stickerskip += st::stickersReorderIcon.width() + st::stickersReorderSkip;
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) {
paintRowThumbnail(p, row, stickerx);
paintRowThumbnail(p, row, stickerskip + _st.photoPosition.x());
}

int namex = stickerx + st::contactsPhotoSize + st::contactsPadding.left();
int namey = st::contactsPadding.top() + st::contactsNameTop;
int namex = stickerskip + _st.namePosition.x();
int namey = _st.namePosition.y();

int statusx = namex;
int statusy = st::contactsPadding.top() + st::contactsStatusTop;
int statusx = stickerskip + _st.statusPosition.x();
int statusy = _st.statusPosition.y();

p.setFont(st::contactsNameStyle.font);
p.setPen(st::contactsNameFg);
p.setPen(_st.nameFg);
p.drawTextLeft(namex, namey, width(), row->title, row->titleWidth);

if (row->isUnread()) {
Expand All @@ -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);

p.setFont(st::contactsStatusFont);
p.setPen(st::contactsStatusFg);
p.setPen(_st.statusFg);
p.drawTextLeft(statusx, statusy, width(), statusText);

p.setOpacity(1);
Expand Down Expand Up @@ -1457,15 +1464,15 @@ void StickersBox::Inner::paintRowThumbnail(
? row->stickerMedia->thumbnail()
: nullptr;
const auto paused = _show->paused(ChatHelpers::PauseReason::Layer);
const auto x = left + (st::contactsPhotoSize - row->pixw) / 2;
const auto y = st::contactsPadding.top() + (st::contactsPhotoSize - row->pixh) / 2;
const auto x = left + (_st.photoSize - row->pixw) / 2;
const auto y = _st.photoPosition.y() + (_st.photoSize - row->pixh) / 2;
if (row->lottie && row->lottie->ready()) {
const auto frame = row->lottie->frame();
const auto size = frame.size() / cIntRetinaFactor();
p.drawImage(
QRect(
left + (st::contactsPhotoSize - size.width()) / 2,
st::contactsPadding.top() + (st::contactsPhotoSize - size.height()) / 2,
left + (_st.photoSize - size.width()) / 2,
_st.photoPosition.y() + (_st.photoSize - size.height()) / 2,
size.width(),
size.height()),
frame);
Expand Down Expand Up @@ -1500,9 +1507,7 @@ void StickersBox::Inner::validateLottieAnimation(not_null<Row*> row) {
row->thumbnailMedia.get(),
row->stickerMedia.get(),
ChatHelpers::StickerLottieSize::SetsListThumbnail,
QSize(
st::contactsPhotoSize,
st::contactsPhotoSize) * cIntRetinaFactor());
QSize(_st.photoSize, _st.photoSize) * cIntRetinaFactor());
if (!player) {
return;
}
Expand Down Expand Up @@ -1572,15 +1577,12 @@ void StickersBox::Inner::updateRowThumbnail(not_null<Row*> row) {
}
Unexpected("StickersBox::Inner::updateRowThumbnail: row not found");
}();
const auto left = st::contactsPadding.left()
const auto left = _st.photoPosition.x()
+ ((!_megagroupSet && _isInstalledTab)
? st::stickersReorderIcon.width() + st::stickersReorderSkip
: 0);
update(
left,
rowTop + st::contactsPadding.top(),
st::contactsPhotoSize,
st::contactsPhotoSize);
const auto top = rowTop + _st.photoPosition.y();
update(left, top, _st.photoSize, _st.photoSize);
}

void StickersBox::Inner::paintFakeButton(Painter &p, not_null<Row*> row, int index) {
Expand Down Expand Up @@ -1818,7 +1820,7 @@ void StickersBox::Inner::updateSelected() {
actionSel = -1;
}
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);
inDragArea = dragArea.contains(local);
}
Expand Down Expand Up @@ -2142,7 +2144,7 @@ void StickersBox::Inner::rebuildMegagroupSet() {
}

void StickersBox::Inner::rebuild(bool masks) {
_itemsTop = st::membersMarginTop;
_itemsTop = st::lineWidth;

if (_megagroupSet) {
_itemsTop += st::groupStickersFieldPadding.top() + _megagroupSetField->height() + st::groupStickersFieldPadding.bottom();
Expand Down Expand Up @@ -2291,11 +2293,11 @@ bool StickersBox::Inner::skipPremium() 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) {
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 (!_megagroupSet) {
namew -= _undoWidth - st::stickersUndoRemove.width;
Expand Down Expand Up @@ -2401,17 +2403,17 @@ void StickersBox::Inner::fillSetCover(
: QSize(1, 1);
auto pixw = size.width();
auto pixh = size.height();
if (pixw > st::contactsPhotoSize) {
if (pixw > _st.photoSize) {
if (pixw > pixh) {
pixh = (pixh * st::contactsPhotoSize) / pixw;
pixw = st::contactsPhotoSize;
pixh = (pixh * _st.photoSize) / pixw;
pixw = _st.photoSize;
} else {
pixw = (pixw * st::contactsPhotoSize) / pixh;
pixh = st::contactsPhotoSize;
pixw = (pixw * _st.photoSize) / pixh;
pixh = _st.photoSize;
}
} else if (pixh > st::contactsPhotoSize) {
pixw = (pixw * st::contactsPhotoSize) / pixh;
pixh = st::contactsPhotoSize;
} else if (pixh > _st.photoSize) {
pixw = (pixw * _st.photoSize) / pixh;
pixh = _st.photoSize;
}
*outWidth = pixw;
*outHeight = pixh;
Expand Down
2 changes: 2 additions & 0 deletions Telegram/SourceFiles/boxes/stickers_box.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ For license and copyright information please follow this link:

namespace style {
struct RippleAnimation;
struct PeerListItem;
} // namespace style

namespace Ui {
Expand Down Expand Up @@ -142,6 +143,7 @@ class StickersBox final : public Ui::BoxContent {

std::array<Inner*, 5> widgets() const;

const style::PeerListItem &_st;
const std::shared_ptr<ChatHelpers::Show> _show;
const not_null<Main::Session*> _session;
MTP::Sender _api;
Expand Down
18 changes: 17 additions & 1 deletion Telegram/SourceFiles/chat_helpers/chat_helpers.style
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,10 +313,26 @@ stickersUndoRemove: RoundButton(defaultLightButton) {
}
stickersRemoveSkip: 4px;
stickersReorderIcon: icon {{ "stickers_reorder", menuIconFg }};
stickersReorderSkip: 13px;
stickersReorderSkip: 18px;

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;

stickersFeaturedBadgeFont: font(12px bold);
Expand Down

0 comments on commit 39a80c6

Please sign in to comment.