Stickers display improvements

This commit is contained in:
Rafael 2021-12-09 18:03:22 -03:00 committed by Thomas Zarebczan
parent d51b8cc670
commit 0d59ce4f8c
4 changed files with 47 additions and 25 deletions

View file

@ -33,6 +33,12 @@ export default function StickerSelector(props: Props) {
} }
} }
const StickerWrapper = (stickerProps: any) => {
const { price, children } = stickerProps;
return price ? <div className="stickerItem--paid">{children}</div> : children;
};
const getListRow = (rowTitle: string, rowStickers: any) => ( const getListRow = (rowTitle: string, rowStickers: any) => (
<div className="stickerSelector__listBody-row"> <div className="stickerSelector__listBody-row">
<div id={rowTitle} className="stickerSelector__listBody-rowTitle"> <div id={rowTitle} className="stickerSelector__listBody-rowTitle">
@ -47,10 +53,12 @@ export default function StickerSelector(props: Props) {
className="button--file-action" className="button--file-action"
onClick={() => onSelect(sticker)} onClick={() => onSelect(sticker)}
> >
<OptimizedImage src={sticker.url} waitLoad loading="lazy" /> <StickerWrapper price={sticker.price}>
{sticker.price && sticker.price > 0 && ( <OptimizedImage src={sticker.url} waitLoad loading="lazy" />
<CreditAmount superChatLight amount={sticker.price} size={2} isFiat /> {sticker.price && sticker.price > 0 && (
)} <CreditAmount superChatLight amount={sticker.price} size={2} isFiat />
)}
</StickerWrapper>
</Button> </Button>
))} ))}
</div> </div>

View file

@ -481,7 +481,7 @@ $thumbnailWidthSmall: 1rem;
.sticker__comment { .sticker__comment {
margin-left: var(--spacing-m); margin-left: var(--spacing-m);
height: 6rem; height: 7rem;
overflow: hidden; overflow: hidden;
img { img {

View file

@ -147,6 +147,7 @@ $recent-msg-button__height: 2rem;
.livestream-comment__info--sticker { .livestream-comment__info--sticker {
display: flex; display: flex;
flex-direction: column;
margin: var(--spacing-xxs) 0; margin: var(--spacing-xxs) 0;
} }

View file

@ -47,35 +47,48 @@
display: flex; display: flex;
.stickerSelector__listBody { .stickerSelector__listBody {
display: flex;
flex-wrap: wrap;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
max-height: 25vh; max-height: 25vh;
padding: var(--spacing-s); padding: var(--spacing-s);
.button--file-action { .stickerSelector__listBody-rowItems {
width: 5rem; display: flex;
height: 5.3rem; flex-wrap: wrap;
overflow: hidden; overflow-y: scroll;
margin: unset; overflow-x: hidden;
padding: var(--spacing-s);
.button__content { .button--file-action {
display: flex; width: 5.5rem;
flex-direction: column; height: 6rem;
align-items: center; overflow: hidden;
margin: unset;
padding: var(--spacing-xxs);
.super-chat--light { .stickerItem--paid {
position: absolute; display: flex;
display: inline; flex-direction: column;
bottom: 0; align-items: center;
img {
margin-bottom: var(--spacing-s);
}
.super-chat--light {
position: absolute;
display: inline;
bottom: 0;
}
} }
}
@media (max-width: $breakpoint-xsmall) { img {
width: 4rem; margin: auto;
height: 4.3rem; }
@media (max-width: $breakpoint-xsmall) {
width: 3.5rem;
height: 4rem;
}
} }
} }
} }