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

Various fixes for different font sizes (#1352)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-03 19:03:23 +03:00
parent cd742b6805
commit 92a3d8126a
7 changed files with 49 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/EmbeddedMessage.scss
View File

@ -93,9 +93,9 @@
}
.emoji {
width: 1.125rem !important;
height: 1.125rem !important;
vertical-align: -4px !important;
width: calc(1.125 * var(--message-text-size, 1rem)) !important;
height: calc(1.125 * var(--message-text-size, 1rem)) !important;
vertical-align: text-bottom !important;
}
}

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

@ -7,7 +7,7 @@ import { GlobalActions } from '../../../global/types';
import { SettingsScreens, ISettings } from '../../../types';
import { ApiSticker, ApiStickerSet } from '../../../api/types';
import { IS_MAC_OS, IS_TOUCH_ENV } from '../../../util/environment';
import { IS_IOS, IS_MAC_OS, IS_TOUCH_ENV } from '../../../util/environment';
import { pick } from '../../../util/iteratees';
import useLang from '../../../hooks/useLang';
import useFlag from '../../../hooks/useFlag';
@ -111,6 +111,9 @@ const SettingsGeneral: FC<OwnProps & StateProps & DispatchProps> = ({
}, [setSettingOption]);
const handleMessageTextSizeChange = useCallback((newSize: number) => {
document.documentElement.style.setProperty(
'--composer-text-size', `${Math.max(newSize, IS_IOS ? 16 : 15)}px`,
);
document.documentElement.style.setProperty('--message-text-size', `${newSize}px`);
setSettingOption({ messageTextSize: newSize });

15
src/components/middle/MessageList.scss
View File

@ -153,16 +153,23 @@
display: inline-block;
background: var(--pattern-color);
color: white;
font-size: 0.9375rem;
font-size: calc(var(--message-text-size, 1rem) - .0625rem);
font-weight: 500;
line-height: 1.5rem;
line-height: 1.75;
padding: 0 .5rem;
border-radius: 0.75rem;
border-radius: 2rem;
word-break: break-word;
body.is-ios &,
body.is-macos & {
font-size: .875rem;
font-size: calc(var(--message-text-size, 1rem) - .125rem);
}
.emoji-small {
vertical-align: text-bottom;
width: calc(1.25 * var(--message-text-size, 1rem));
height: calc(1.25 * var(--message-text-size, 1rem));
background-size: calc(1.25 * var(--message-text-size, 1rem));
}
}

43
src/components/middle/composer/Composer.scss
View File

@ -23,6 +23,10 @@
}
}
.form-control {
--border-width: 0;
}
> .Button {
flex-shrink: 0;
margin-left: .5rem;
@ -170,6 +174,7 @@
width: .5625rem;
height: 1.25rem;
transition: opacity 200ms;
font-size: 1rem !important;
.corner {
fill: var(--color-background);
@ -263,13 +268,13 @@
position: relative;
.form-control {
padding-top: calc(1rem - var(--border-width));
padding-bottom: calc(1rem - var(--border-width));
padding: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2) calc(.9rem - var(--border-width));
overflow: hidden;
line-height: 1.375rem;
line-height: 1.375;
font-family: Roboto, -apple-system, "Apple Color Emoji", "Helvetica Neue", sans-serif;
unicode-bidi: plaintext;
text-align: initial;
font-size: var(--composer-text-size, 1rem);
body.is-ios &,
body.is-macos & {
@ -295,23 +300,14 @@
.forced-placeholder,
.placeholder-text {
position: absolute;
bottom: .9375rem;
color: var(--color-placeholders);
pointer-events: none;
unicode-bidi: plaintext;
text-align: initial;
body.is-macos & {
bottom: 1rem;
}
@media (max-width: 600px) {
bottom: .625rem;
body.is-ios & {
bottom: .6875rem;
}
}
line-height: 1.3125;
font-size: var(--composer-text-size, 1rem);
top: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2);
bottom: auto;
}
.forced-placeholder {
@ -362,15 +358,13 @@
min-height: 3.5rem;
max-height: 26rem;
line-height: 1.3125;
padding-top: calc(1.15625rem - var(--border-width));
padding-bottom: calc(1.15625rem - var(--border-width));
padding: calc((3.5rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
@media (max-width: 600px) {
height: 2.875rem;
min-height: 2.875rem;
max-height: 16rem;
padding-top: calc(0.84375rem - var(--border-width));
padding-bottom: calc(0.84375rem - var(--border-width));
padding: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
overflow: auto;
}
@ -381,6 +375,15 @@
}
}
.forced-placeholder,
.placeholder-text {
top: calc((3.5rem - var(--composer-text-size, 1rem) * 1.3125) / 2);
@media (max-width: 600px) {
top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2);
}
}
&:not(:only-child) {
.form-control {
padding-left: 0;

2
src/components/middle/message/WebPage.scss
View File

@ -105,7 +105,7 @@
}
.site-description {
line-height: 1rem;
line-height: 1.25;
margin-bottom: 0;
body.is-ios & {

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

@ -110,7 +110,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.875rem;
font-size: calc(var(--message-text-size, 1rem) - .125rem);
font-weight: 500;
line-height: 1.25rem;
color: var(--accent-color);
@ -219,6 +219,7 @@
bottom: -.0875rem;
width: .5625rem;
height: 1.125rem;
font-size: 1rem !important;
.corner {
fill: var(--background-color);
@ -311,6 +312,7 @@
&:not(.custom-shape) .text-content .emoji {
width: calc(1.25 * var(--message-text-size, 1rem));
height: calc(1.25 * var(--message-text-size, 1rem));
background-size: calc(1.25 * var(--message-text-size, 1rem));
}
@ -689,4 +691,5 @@
margin: 0;
padding: 1px 2px;
border-radius: 4px;
font-size: calc(var(--message-text-size, 1rem) - 0.0625rem);
}

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

@ -18,6 +18,9 @@ addReducer('init', (global) => {
setLanguage(language, undefined, true);
document.documentElement.style.setProperty(
'--composer-text-size', `${Math.max(messageTextSize, IS_IOS ? 16 : 15)}px`,
);
document.documentElement.style.setProperty('--message-text-size', `${messageTextSize}px`);
document.body.classList.add('initial');
document.body.classList.add(`animation-level-${animationLevel}`);