ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Emoji Picker: Align last line to the grid (#2567)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-02-17 02:31:38 +01:00
parent 077dce9fc0
commit d228deb66c
5 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/StickerButton.scss
View File

@ -1,5 +1,6 @@
.StickerButton { .StickerButton {
--custom-emoji-size: 2.5rem; --custom-emoji-size: 2.5rem;
--premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
display: inline-block; display: inline-block;
width: 4rem; width: 4rem;
@ -10,7 +11,6 @@
background-size: contain; background-size: contain;
transition: background-color 0.15s ease, opacity 0.3s ease !important; transition: background-color 0.15s ease, opacity 0.3s ease !important;
position: relative; position: relative;
--premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
&.custom-emoji { &.custom-emoji {
width: var(--custom-emoji-size); width: var(--custom-emoji-size);

2
src/components/middle/composer/EmojiPicker.scss
View File

@ -1,4 +1,6 @@
.EmojiPicker { .EmojiPicker {
--emoji-size: 2.5rem;
height: 100%; height: 100%;
&-main { &-main {

4
src/components/middle/composer/StickerPicker.scss
View File

@ -107,3 +107,7 @@
justify-content: center; justify-content: center;
} }
} }
.CustomEmojiPicker {
--emoji-size: 2.5rem;
}

5
src/components/middle/composer/StickerSet.tsx
View File

@ -104,7 +104,6 @@ const StickerSet: FC<OwnProps> = ({
const stickerMarginPx = isMobile ? 8 : 16; const stickerMarginPx = isMobile ? 8 : 16;
const emojiMarginPx = isMobile ? 8 : 10; const emojiMarginPx = isMobile ? 8 : 10;
const containerPaddingPx = isMobile && !isStatusPicker ? 8 : 0;
const isRecent = stickerSet.id === RECENT_SYMBOL_SET_ID; const isRecent = stickerSet.id === RECENT_SYMBOL_SET_ID;
const isFavorite = stickerSet.id === FAVORITE_SYMBOL_SET_ID; const isFavorite = stickerSet.id === FAVORITE_SYMBOL_SET_ID;
const isEmoji = stickerSet.isEmoji; const isEmoji = stickerSet.isEmoji;
@ -159,8 +158,8 @@ const StickerSet: FC<OwnProps> = ({
const calculateItemsPerRow = useCallback((width: number) => { const calculateItemsPerRow = useCallback((width: number) => {
if (!width) return ITEMS_PER_ROW_FALLBACK; if (!width) return ITEMS_PER_ROW_FALLBACK;
return Math.floor((width - containerPaddingPx) / (itemSize + margin)); return Math.floor(width / (itemSize + margin));
}, [containerPaddingPx, itemSize, margin]); }, [itemSize, margin]);
const handleResize = useCallback((entry: ResizeObserverEntry) => { const handleResize = useCallback((entry: ResizeObserverEntry) => {
setItemsPerRow(calculateItemsPerRow(entry.contentRect.width)); setItemsPerRow(calculateItemsPerRow(entry.contentRect.width));

17
src/components/middle/composer/SymbolMenu.scss
View File

@ -255,14 +255,14 @@
} }
.symbol-set-container { .symbol-set-container {
display: flex; display: grid;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill, var(--emoji-size, 4rem));
grid-gap: 0.625rem;
padding: 0.3125rem;
// Fix for the last row alignment @media (max-width: 600px) {
&::after { grid-gap: 0.5rem;
content: "";
flex: auto;
} }
&:not(.shown) { &:not(.shown) {
@ -272,5 +272,10 @@
&.closing { &.closing {
transition: none; transition: none;
} }
> .EmojiButton,
> .StickerButton {
margin: 0;
}
} }
} }