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

Custom Emoji: Various layout fixes (#2112)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-11-07 23:00:51 +04:00
parent 66b5da4ef9
commit 58413c6c61
3 changed files with 23 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/middle/message/MessageMeta.scss
View File

@ -111,10 +111,6 @@
right: 0.8125rem; right: 0.8125rem;
} }
.emoji-only & {
right: 0;
}
.Message.own .has-solid-background & { .Message.own .has-solid-background & {
color: var(--color-message-meta-own); color: var(--color-message-meta-own);
} }
@ -153,16 +149,4 @@
left: 13.25rem; left: 13.25rem;
bottom: 0.25rem; bottom: 0.25rem;
} }
.emoji-only-1 .reply-message + .MessageMeta {
left: 2.5rem;
}
.emoji-only-2 .reply-message + .MessageMeta {
left: 5.5rem;
}
.emoji-only-3 .reply-message + .MessageMeta {
left: 6.5rem;
}
} }

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

@ -457,18 +457,29 @@
&.custom-shape.is-via-bot { &.custom-shape.is-via-bot {
font-size: inherit !important; font-size: inherit !important;
.content-inner > .message-title { .content-inner {
display: inline-flex; display: flex;
position: relative; align-items: flex-start;
top: 0.125rem; flex-direction: row-reverse;
max-width: calc(100% - 3rem); direction: ltr;
margin-left: calc(100% - 3rem); gap: 0.5rem;
padding: 0 0.5rem;
background-color: var(--background-color); & > .message-title {
border-radius: var(--border-radius-messages); display: inline-flex;
position: relative;
top: 0.125rem;
max-width: calc(100% - 3rem);
padding: 0 0.5rem;
background-color: var(--background-color);
border-radius: var(--border-radius-messages);
.Message.own & {
margin-left: -3rem;
}
}
.Message.own & { .Message.own & {
margin-left: -3rem; flex-direction: row;
} }
} }
@ -729,17 +740,6 @@
$size: 6 - ($i * 0.625) + rem; $size: 6 - ($i * 0.625) + rem;
--emoji-only-size: #{$size}; --emoji-only-size: #{$size};
@if $i <= 3 {
.text-content {
text-shadow: 1px 1px 0 white, -1px -1px 0 white, -1px 1px 0 white, 1px -1px 0 white;
margin-bottom: 0.25rem;
img.emoji {
filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white);
}
}
}
} }
} }

4
src/components/middle/message/helpers/buildContentClassName.ts
View File

@ -41,7 +41,7 @@ export function buildContentClassName(
const isMediaWithNoText = isMedia && !hasText; const isMediaWithNoText = isMedia && !hasText;
const isViaBot = Boolean(message.viaBotId); const isViaBot = Boolean(message.viaBotId);
if (message.emojiOnlyCount) { if (!isMedia && message.emojiOnlyCount) {
classNames.push('emoji-only'); classNames.push('emoji-only');
if (message.emojiOnlyCount <= EMOJI_SIZES) { if (message.emojiOnlyCount <= EMOJI_SIZES) {
classNames.push(`emoji-only-${message.emojiOnlyCount}`); classNames.push(`emoji-only-${message.emojiOnlyCount}`);
@ -122,7 +122,7 @@ export function buildContentClassName(
classNames.push('has-background'); classNames.push('has-background');
} }
if (hasReply || asForwarded || !isMediaWithNoText || isViaBot || forceSenderName) { if (hasReply || asForwarded || !isMediaWithNoText || forceSenderName) {
classNames.push('has-solid-background'); classNames.push('has-solid-background');
} }