LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Stickers display improvements

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/component/commentCreate/sticker-selector.jsx
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)}
> >
<StickerWrapper price={sticker.price}>
<OptimizedImage src={sticker.url} waitLoad loading="lazy" /> <OptimizedImage src={sticker.url} waitLoad loading="lazy" />
{sticker.price && sticker.price > 0 && ( {sticker.price && sticker.price > 0 && (
<CreditAmount superChatLight amount={sticker.price} size={2} isFiat /> <CreditAmount superChatLight amount={sticker.price} size={2} isFiat />
)} )}
</StickerWrapper>
</Button> </Button>
))} ))}
</div> </div>

2
ui/scss/component/_comments.scss
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 {

1
ui/scss/component/_livestream.scss
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;
} }

29
ui/scss/component/_sticker-selector.scss
View file

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