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;
}
.emoji-only & {
right: 0;
}
.Message.own .has-solid-background & {
color: var(--color-message-meta-own);
}
@ -153,16 +149,4 @@
left: 13.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 {
font-size: inherit !important;
.content-inner > .message-title {
display: inline-flex;
position: relative;
top: 0.125rem;
max-width: calc(100% - 3rem);
margin-left: calc(100% - 3rem);
padding: 0 0.5rem;
background-color: var(--background-color);
border-radius: var(--border-radius-messages);
.content-inner {
display: flex;
align-items: flex-start;
flex-direction: row-reverse;
direction: ltr;
gap: 0.5rem;
& > .message-title {
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 & {
margin-left: -3rem;
flex-direction: row;
}
}
@ -729,17 +740,6 @@
$size: 6 - ($i * 0.625) + rem;
--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 isViaBot = Boolean(message.viaBotId);
if (message.emojiOnlyCount) {
if (!isMedia && message.emojiOnlyCount) {
classNames.push('emoji-only');
if (message.emojiOnlyCount <= EMOJI_SIZES) {
classNames.push(`emoji-only-${message.emojiOnlyCount}`);
@ -122,7 +122,7 @@ export function buildContentClassName(
classNames.push('has-background');
}
if (hasReply || asForwarded || !isMediaWithNoText || isViaBot || forceSenderName) {
if (hasReply || asForwarded || !isMediaWithNoText || forceSenderName) {
classNames.push('has-solid-background');
}