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

Custom Emoji: Adjust sizes (again) (#2142)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-11-18 00:57:22 +04:00
parent a82fd2dde7
commit 05a9c9993b
5 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/hooks/useAnimatedEmoji.ts
View File

@ -8,10 +8,11 @@ import type { ActiveEmojiInteraction } from '../../../global/types';
import safePlay from '../../../util/safePlay'; import safePlay from '../../../util/safePlay';
import { selectLocalAnimatedEmojiEffectByName } from '../../../global/selectors'; import { selectLocalAnimatedEmojiEffectByName } from '../../../global/selectors';
import buildStyle from '../../../util/buildStyle'; import buildStyle from '../../../util/buildStyle';
import { REM } from '../helpers/mediaDimensions';
import useMedia from '../../../hooks/useMedia'; import useMedia from '../../../hooks/useMedia';
const SIZE = 104; const SIZE = 7 * REM;
const INTERACTION_BUNCH_TIME = 1000; const INTERACTION_BUNCH_TIME = 1000;
const MS_DIVIDER = 1000; const MS_DIVIDER = 1000;
const TIME_DEFAULT = 0; const TIME_DEFAULT = 0;

5
src/components/middle/composer/helpers/customEmoji.ts
View File

@ -39,6 +39,7 @@ export function getCustomEmojiSize(maxEmojisInLine?: number): number | undefined
if (!maxEmojisInLine) return undefined; if (!maxEmojisInLine) return undefined;
// Should be the same as in _message-content.scss // Should be the same as in _message-content.scss
if (maxEmojisInLine > EMOJI_SIZES) return REM * 2.25; if (maxEmojisInLine > EMOJI_SIZES) return 2.25 * REM;
return (6 - (maxEmojisInLine * 0.5)) * REM; if (maxEmojisInLine === 1) return 7 * REM;
return Math.min(7.5 - (maxEmojisInLine * 0.75), 4) * REM;
} }

1
src/components/middle/message/AnimatedCustomEmoji.tsx
View File

@ -23,7 +23,6 @@ type OwnProps = {
customEmojiId: string; customEmojiId: string;
withEffects: boolean; withEffects: boolean;
isOwn?: boolean; isOwn?: boolean;
size?: 'large' | 'medium' | 'small';
lastSyncTime?: number; lastSyncTime?: number;
forceLoadPreview?: boolean; forceLoadPreview?: boolean;
messageId?: number; messageId?: number;

1
src/components/middle/message/AnimatedEmoji.tsx
View File

@ -29,7 +29,6 @@ type OwnProps = {
withEffects: boolean; withEffects: boolean;
isOwn?: boolean; isOwn?: boolean;
observeIntersection?: ObserveFn; observeIntersection?: ObserveFn;
size?: 'large' | 'medium' | 'small';
lastSyncTime?: number; lastSyncTime?: number;
forceLoadPreview?: boolean; forceLoadPreview?: boolean;
messageId?: number; messageId?: number;

6
src/components/middle/message/_message-content.scss
View File

@ -738,12 +738,16 @@
@for $i from 1 through 7 { @for $i from 1 through 7 {
&.emoji-only-#{$i} { &.emoji-only-#{$i} {
$size: 6 - ($i * 0.5) + rem; $size: min(7.5 - ($i * 0.75), 4) + rem;
--emoji-only-size: #{$size}; --emoji-only-size: #{$size};
} }
} }
&.emoji-only-1 {
--emoji-only-size: 7rem;
}
.Message:not(.own) & { .Message:not(.own) & {
--hover-color: var(--color-reply-hover); --hover-color: var(--color-reply-hover);
--active-color: var(--color-reply-active); --active-color: var(--color-reply-active);