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: Adjust bubble size again (#1358)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-05 13:29:15 +03:00
parent 35fc6b35e8
commit 3455f73ef3
3 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/left/settings/SettingsGeneral.tsx
View File

@ -114,7 +114,9 @@ const SettingsGeneral: FC<OwnProps & StateProps & DispatchProps> = ({
document.documentElement.style.setProperty(
'--composer-text-size', `${Math.max(newSize, IS_IOS ? 16 : 15)}px`,
);
document.documentElement.style.setProperty('--message-meta-height', `${Math.floor(newSize * 1.3125)}px`);
document.documentElement.style.setProperty('--message-text-size', `${newSize}px`);
document.documentElement.setAttribute('data-message-text-size', newSize.toString());
setSettingOption({ messageTextSize: newSize });
}, [setSettingOption]);

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

@ -3,21 +3,21 @@
max-width: var(--max-width);
@media (max-width: 600px) {
max-width: calc(100vw - 5.5rem);
max-width: calc(100vw - 6.25rem);
.Message.own &,
.MessageList.no-avatars & {
max-width: calc(100vw - 3rem);
max-width: calc(100vw - 3.75rem);
}
// 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)"};
@supports (max-width: #{"min(29rem, 100vw - 6.25rem)"}) {
max-width: #{"min(29rem, 100vw - 6.25rem)"};
.MessageList.no-avatars & {
max-width: #{"min(29rem, 100vw - 3rem)"};
max-width: #{"min(29rem, 100vw - 3.75rem)"};
}
.Message.own & {
max-width: #{"min(30rem, 100vw - 3rem)"};
max-width: #{"min(30rem, 100vw - 3.75rem)"};
}
}
@ -55,7 +55,7 @@
unicode-bidi: plaintext;
}
&:not(.custom-shape) .text-content:not(.with-meta),
&:not(.custom-shape) .text-content,
&.document {
& > .MessageMeta {
position: relative;
@ -63,9 +63,30 @@
bottom: auto !important;
float: right;
line-height: 1;
margin-top: .125rem;
height: calc(var(--message-meta-height, 1rem));
margin-left: .4375rem;
margin-right: -.5rem;
.MessageOutgoingStatus .Transition {
max-height: calc(var(--message-meta-height, 1rem));
overflow: hidden;
}
html[data-message-text-size="12"] & {
top: .25rem;
}
html[data-message-text-size="17"] & {
top: .4375rem;
}
html[data-message-text-size="18"] &,
html[data-message-text-size="19"] & {
top: .5rem;
}
html[data-message-text-size="20"] & {
top: .5625rem;
}
}
&:dir(rtl) {
@ -85,7 +106,7 @@
}
& > .MessageMeta {
top: auto;
top: auto !important;
bottom: -.5rem !important;
margin-top: -.25rem;
&:not([dir=rtl]) {
@ -216,23 +237,11 @@
&.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: calc(var(--meta-safe-area-size) + var(--meta-icon-width, 0px));
width: var(--meta-safe-area-size);
height: 1rem;
float: right;
}
}

2
src/modules/actions/ui/initial.ts
View File

@ -21,7 +21,9 @@ addReducer('init', (global) => {
document.documentElement.style.setProperty(
'--composer-text-size', `${Math.max(messageTextSize, IS_IOS ? 16 : 15)}px`,
);
document.documentElement.style.setProperty('--message-meta-height', `${Math.floor(messageTextSize * 1.3125)}px`);
document.documentElement.style.setProperty('--message-text-size', `${messageTextSize}px`);
document.documentElement.setAttribute('data-message-text-size', messageTextSize.toString());
document.body.classList.add('initial');
document.body.classList.add(`animation-level-${animationLevel}`);
document.body.classList.add(IS_TOUCH_ENV ? 'is-touch-env' : 'is-pointer-env');