danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-26 20:34:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

Message, Dialog: Various markup fixes, wider bubbles (#1356)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-04 23:34:22 +03:00
parent 8a92fedbd4
commit 79546dc799
5 changed files with 74 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/middle/message/Message.scss
View File

@ -14,7 +14,8 @@
--secondary-color: var(--color-text-secondary);
--meta-safe-area-base: 2.25rem;
--meta-safe-author-width: 0px;
--meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width));
--meta-safe-area-extra-width: 0px;
--meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + var(--meta-safe-area-extra-width));
--deleting-translate-x: -50%;
--select-message-scale: 0.9;
--select-background-color: white;
@ -131,14 +132,22 @@
}
&.has-views {
--meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + 4rem);
--meta-safe-area-extra-width: 4rem;
}
&.was-edited {
--meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + 2.5rem);
--meta-safe-area-extra-width: 2.5rem;
&.has-views {
--meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + 7.5rem);
--meta-safe-area-extra-width: 7.5rem;
}
html[lang=ru] & {
--meta-safe-area-extra-width: 3.5rem;
&.has-views {
--meta-safe-area-extra-width: 8.5rem;
}
}
}

8
src/components/middle/message/Message.tsx
View File

@ -334,6 +334,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
hasThread,
forceSenderName,
hasComments: message.threadInfo && message.threadInfo.messagesCount > 0,
hasActionButton: canForward || canFocus,
});
const withCommentButton = message.threadInfo && (!isInDocumentGroup || isLastInDocumentGroup)
&& messageListType === 'thread' && !noComments;
@ -580,6 +581,11 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
);
const hasCustomAppendix = isLastInGroup && !textParts && !asForwarded && !hasThread;
const shouldInlineMeta = !webPage && !animatedEmoji && textParts;
const textContentClass = buildClassName(
'text-content',
shouldInlineMeta && 'with-meta',
outgoingStatus && 'with-outgoing-icon',
);
return (
<div className={className} onDoubleClick={handleContentDoubleClick} dir="auto">
@ -688,7 +694,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
<Poll message={message} poll={poll} onSendVote={handleVoteSend} />
)}
{!animatedEmoji && textParts && (
<p className={`text-content ${shouldInlineMeta ? 'with-meta' : ''}`} dir="auto">
<p className={textContentClass} dir="auto">
{textParts}
{shouldInlineMeta && (
<MessageMeta

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

@ -3,26 +3,41 @@
max-width: var(--max-width);
@media (max-width: 600px) {
max-width: calc(100vw - 7rem);
max-width: calc(100vw - 5.5rem);
// Workaround for sass function override - we should use CSS min() here
@supports (max-width: #{"min(29rem, 100vw - 7rem)"}) {
max-width: #{"min(29rem, 100vw - 7rem)"};
.Message.own &,
.MessageList.no-avatars & {
max-width: calc(100vw - 3rem);
}
.MessageList.no-avatars & {
max-width: calc(100vw - 4.5rem);
@supports (max-width: #{"min(29rem, 100vw - 4.5rem)"}) {
max-width: #{"min(29rem, 100vw - 4.5rem)"};
// Workaround for sass function override - we should use CSS min() here
@supports (max-width: #{"min(29rem, 100vw - 5.5rem)"}) {
max-width: #{"min(29rem, 100vw - 5.5rem)"};
.MessageList.no-avatars & {
max-width: #{"min(29rem, 100vw - 3rem)"};
}
.Message.own & {
max-width: #{"min(30rem, 100vw - 3rem)"};
}
}
.Message.own & {
max-width: calc(100vw - 4.5rem);
&.has-action-button {
max-width: calc(100vw - 7rem);
@supports (max-width: #{"min(30rem, 100vw - 4.5rem)"}) {
max-width: #{"min(30rem, 100vw - 4.5rem)"};
.Message.own &,
.MessageList.no-avatars & {
max-width: calc(100vw - 4.5rem);
}
// Workaround for sass function override - we should use CSS min() here
@supports (max-width: #{"min(29rem, 100vw - 5.5rem)"}) {
max-width: #{"min(29rem, 100vw - 7rem)"};
.MessageList.no-avatars & {
max-width: #{"min(29rem, 100vw - 4.5rem)"};
}
.Message.own & {
max-width: #{"min(30rem, 100vw - 4.5rem)"};
}
}
}
}
@ -40,7 +55,7 @@
unicode-bidi: plaintext;
}
&:not(.custom-shape) .text-content,
&:not(.custom-shape) .text-content:not(.with-meta),
&.document {
& > .MessageMeta {
position: relative;
@ -201,11 +216,23 @@
&.has-solid-background {
padding: .3125rem .5rem .375rem;
.forwarded-message .text-content.with-meta {
&.with-outgoing-icon:last-child {
--meta-icon-width: .5rem;
}
.MessageMeta {
bottom: -.25rem;
}
}
.text-content.with-meta:last-child::after,
.forwarded-message > .text-content:not(.with-meta):last-child::after {
content: '';
display: inline-block;
width: var(--meta-safe-area-size);
width: calc(var(--meta-safe-area-size) + var(--meta-icon-width, 0px));
height: 1rem;
float: right;
}
}

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

@ -16,6 +16,7 @@ export function buildContentClassName(
hasThread,
forceSenderName,
hasComments,
hasActionButton,
}: {
hasReply?: boolean;
customShape?: boolean | number;
@ -24,6 +25,7 @@ export function buildContentClassName(
hasThread?: boolean;
forceSenderName?: boolean;
hasComments?: boolean;
hasActionButton?: boolean;
} = {},
) {
const {
@ -41,6 +43,10 @@ export function buildContentClassName(
classNames.push('text');
}
if (hasActionButton) {
classNames.push('has-action-button');
}
if (customShape) {
classNames.push('custom-shape');
if (video && video.isRound) {

6
src/components/ui/Modal.scss
View File

@ -8,6 +8,12 @@
}
}
&.error {
.modal-content > div {
margin-top: 1rem;
}
}
&.narrow {
.modal-dialog {
max-width: 20rem;