danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2025-01-21 21:01:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use native fonts on iOS and macOS (#1345)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-03 01:31:17 +03:00
parent cf741a3103
commit 8b177b275d
20 changed files with 161 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
.EmbeddedMessage {
display: flex;
align-items: center;
font-size: 0.875rem;
font-size: calc(var(--message-text-size, 1rem) - .125rem);
line-height: 1.125rem;
margin: 0 -0.25rem .0625rem;
padding: .1875rem 0.25rem .1875rem .4375rem;
@ -59,6 +59,10 @@
background-color: var(--active-color);
}
.message-title {
font-size: calc(var(--message-text-size, 1rem) - .125rem);
}
.message-text {
overflow: hidden;
margin-inline-start: 0.5rem;

4
src/components/common/LastMessageMeta.scss
View File

@ -11,6 +11,10 @@
color: var(--color-text-meta-colored);
margin-right: 0.1rem;
font-size: 1.15rem;
body.is-ios & {
margin-bottom: -.125rem;
}
}
.time {

11
src/components/left/main/Badge.scss
View File

@ -37,6 +37,17 @@
text-align: center;
flex-shrink: 0;
body.is-macos & {
line-height: 1.5rem;
}
body.is-ios & {
line-height: 1.375rem;
min-width: 1.375rem;
height: 1.375rem;
padding: 0 .375rem;
}
&.mention, &.unread:not(.muted) {
background: var(--color-green);
color: var(--color-white);

26
src/components/left/main/Chat.scss
View File

@ -1,6 +1,12 @@
.Chat {
--background-color: var(--color-background);
body.is-ios &,
body.is-macos & {
--color-text-meta: var(--color-text-meta-apple);
}
position: absolute;
top: 0;
left: 0;
@ -87,10 +93,19 @@
margin-left: 0.25rem;
margin-top: -.0625rem;
color: #C6C8CA;
body.is-ios & {
margin-top: 0;
margin-right: .5rem;
}
}
.LastMessageMeta {
margin-left: auto;
body.is-ios & {
font-size: .875rem;
margin-right: 0;
}
}
.last-message, .typing-status {
@ -130,6 +145,12 @@
vertical-align: -.25rem;
margin-inline-end: .25rem;
body.is-ios & {
width: 1.125rem;
height: 1.125rem;
vertical-align: -.1875rem;
}
&.round {
border-radius: .625rem;
}
@ -149,6 +170,11 @@
margin-inline-start: -1.25rem;
margin-inline-end: 0.5rem;
bottom: 0.0625rem;
body.is-ios & {
margin-inline-start: -1.125rem;
bottom: 0;
}
}
}
}

9
src/components/middle/AudioPlayer.scss
View File

@ -89,6 +89,11 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
body.is-ios & {
font-size: .9375rem !important;
line-height: .8125rem;
}
}
.subtitle {
@ -100,6 +105,10 @@
overflow: hidden;
text-overflow: ellipsis;
margin: .125rem 0 0;
body.is-ios & {
font-size: .9375rem !important;
}
}
}
}

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

@ -159,6 +159,11 @@
padding: 0 .5rem;
border-radius: 0.75rem;
word-break: break-word;
body.is-ios &,
body.is-macos & {
font-size: .875rem;
}
}
&.rich {

14
src/components/middle/MiddleHeader.scss
View File

@ -228,6 +228,12 @@
text-overflow: ellipsis;
unicode-bidi: plaintext;
body.is-ios &,
body.is-macos & {
font-size: 1.0625rem;
font-weight: 600;
}
@media (max-width: 600px) {
display: block;
overflow: hidden;
@ -397,6 +403,10 @@
margin-bottom: 0.125rem;
white-space: pre;
text-align: initial;
body.is-ios & {
font-size: .9375rem;
}
}
p {
@ -407,6 +417,10 @@
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
body.is-ios & {
font-size: .9375rem;
}
}
}

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

@ -264,6 +264,11 @@
unicode-bidi: plaintext;
text-align: initial;
body.is-ios &,
body.is-macos & {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;
}
&.overflown {
overflow-y: auto;
overflow-x: hidden;
@ -289,8 +294,16 @@
unicode-bidi: plaintext;
text-align: initial;
body.is-macos & {
bottom: 1rem;
}
@media (max-width: 600px) {
bottom: .625rem;
body.is-ios & {
bottom: .6875rem;
}
}
}

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

@ -108,6 +108,13 @@
--deleting-translate-x: 50%;
--color-text-green: var(--color-accent-own);
body.is-ios &,
body.is-macos & {
--color-background-own: var(--color-background-own-apple);
--color-reply-own-hover: var(--color-reply-own-hover-apple);
--color-reply-own-active: var(--color-reply-own-active-apple);
}
@media (max-width: 600px) {
padding-right: 0.25rem;
}

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

@ -107,6 +107,10 @@
.site-description {
line-height: 1rem;
margin-bottom: 0;
body.is-ios & {
line-height: 1.125rem;
}
}
&:dir(rtl) {

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

@ -44,10 +44,11 @@
&.document {
& > .MessageMeta {
position: relative;
top: .4375rem;
top: .375rem;
bottom: auto !important;
float: right;
line-height: 1;
margin-top: .125rem;
margin-left: .4375rem;
margin-right: -.5rem;
}
@ -90,6 +91,9 @@
&:not(.custom-shape) {
font-size: var(--message-text-size, 1rem);
body.is-ios & {
font-size: var(--message-text-size, 1.0625rem);
}
& > .content-inner {
min-width: 0;

7
src/components/middle/message/helpers/calculateAuthorWidth.ts
View File

@ -1,10 +1,15 @@
import { IS_IOS } from '../../../../util/environment';
let element: HTMLSpanElement | undefined;
export default function calculateAuthorWidth(text: string) {
if (!element) {
element = document.createElement('span');
// eslint-disable-next-line max-len
element.style.font = '400 12px "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif';
element.style.font = IS_IOS
// eslint-disable-next-line max-len
? '400 12px system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif'
: '400 12px "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif';
element.style.whiteSpace = 'nowrap';
element.style.position = 'absolute';
element.style.left = '-999px';

14
src/components/ui/ListItem.scss
View File

@ -117,6 +117,11 @@
&.chat-item-clickable {
margin: 0 -0.5rem;
body.is-ios &,
body.is-macos & {
--color-text-secondary: var(--color-text-secondary-apple);
}
.ListItem-button {
padding: .5625rem .6975rem .5625rem .5625rem;
}
@ -209,6 +214,15 @@
unicode-bidi: plaintext;
}
.last-message,
.status,
.typing-status {
body.is-ios &,
body.is-macos & {
font-size: .9375rem;
}
}
&[dir=rtl] {
.ListItem-button {
padding: .5625rem .5625rem .5625rem .6975rem;

5
src/components/ui/Tab.scss
View File

@ -51,6 +51,11 @@
text-align: center;
flex-shrink: 0;
body.is-ios &,
body.is-macos & {
line-height: 1.25rem;
}
&.active {
background: var(--color-primary);
}

2
src/config.ts
View File

@ -66,6 +66,8 @@ export const ANIMATION_LEVEL_MAX = 2;
export const ANIMATION_LEVEL_DEFAULT = ANIMATION_LEVEL_MAX;
export const DEFAULT_MESSAGE_TEXT_SIZE_PX = 16;
export const IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX = 17;
export const MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX = 15;
export const DRAFT_DEBOUNCE = 10000; // 10s

6
src/global/initial.ts
View File

@ -3,7 +3,9 @@ import { NewChatMembersProgress } from '../types';
import {
ANIMATION_LEVEL_DEFAULT, DARK_THEME_PATTERN_COLOR, DEFAULT_MESSAGE_TEXT_SIZE_PX, DEFAULT_PATTERN_COLOR,
IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX, MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX,
} from '../config';
import { IS_IOS, IS_MAC_OS } from '../util/environment';
export const INITIAL_STATE: GlobalState = {
isLeftColumnShown: true,
@ -119,7 +121,9 @@ export const INITIAL_STATE: GlobalState = {
byKey: {
theme: 'light',
shouldUseSystemTheme: true,
messageTextSize: DEFAULT_MESSAGE_TEXT_SIZE_PX,
messageTextSize: IS_IOS
? IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX
: (IS_MAC_OS ? MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX : DEFAULT_MESSAGE_TEXT_SIZE_PX),
animationLevel: ANIMATION_LEVEL_DEFAULT,
messageSendKeyCombo: 'enter',
shouldAutoDownloadMediaFromContacts: true,

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

@ -2,7 +2,7 @@ import { addReducer, getGlobal, setGlobal } from '../../../lib/teact/teactn';
import { ANIMATION_LEVEL_MAX } from '../../../config';
import {
IS_ANDROID, IS_IOS, IS_SAFARI, IS_TOUCH_ENV,
IS_ANDROID, IS_IOS, IS_MAC_OS, IS_SAFARI, IS_TOUCH_ENV,
} from '../../../util/environment';
import { setLanguage } from '../../../util/langProvider';
import switchTheme from '../../../util/switchTheme';
@ -31,6 +31,8 @@ addReducer('init', (global) => {
document.body.classList.add('is-ios');
} else if (IS_ANDROID) {
document.body.classList.add('is-android');
} else if (IS_MAC_OS) {
document.body.classList.add('is-macos');
}
});

8
src/styles/_variables.scss
View File

@ -34,7 +34,9 @@ $color-black: #000000;
$color-dark-gray: #2e3939;
$color-gray: #c4c9cc;
$color-text-secondary: #707579;
$color-text-secondary-apple: #8E8E92;
$color-text-meta: #686c72;
$color-text-meta-apple: #8C8C91;
$color-borders: #dadce0;
$color-item-active: #ededed;
$color-chat-hover: #f4f4f5;
@ -65,9 +67,11 @@ $color-user-8: #faa774;
--color-text-lighter: #{$color-dark-gray};
--color-text-secondary: #{$color-text-secondary};
--color-text-secondary-rgb: #{toRGB($color-text-secondary)};
--color-text-secondary-apple: #{$color-text-secondary-apple};
--color-text-meta: #{$color-text-meta};
--color-text-meta-rgb: #{toRGB($color-text-meta)};
--color-text-meta-colored: #{$color-text-green};
--color-text-meta-apple: #{$color-text-meta-apple};
--color-text-green: #{$color-text-green};
--color-text-green-rgb: #{toRGB($color-text-green)};
--color-borders: #{$color-borders};
@ -119,6 +123,10 @@ $color-user-8: #faa774;
--color-reply-own-hover: #{blend-normal(rgba($color-text-green, 0.12), $color-light-green)};
--color-reply-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)};
--color-background-own-apple: #E7FDCC;
--color-reply-own-hover-apple: #d9f9c1;
--color-reply-own-active-apple: #d5edc2;
--color-white: #{$color-white};
--color-gray: #{$color-gray};

17
src/styles/index.scss
View File

@ -7,12 +7,6 @@
@import 'common';
@import '../assets/fonts/roboto.css';
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}
html, body {
width: 100%;
height: 100%;
@ -23,14 +17,25 @@ html, body {
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
color: var(--color-text);
overflow: hidden;
@media (max-width: 600px) {
height: calc(var(--vh, 1vh) * 100);
}
}
body.is-ios,
body.is-macos {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;
}
html[lang=fa],
html[lang=fa] body {
font-family: "Vazir", "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
&.is-ios,
&.is-macos {
font-family: "Vazir", -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;
}
}
body.cursor-grabbing, body.cursor-grabbing * {

4
src/styles/themes.json
View File

@ -6,6 +6,7 @@
"--color-background-secondary": ["#f4f4f5", "#121212"],
"--color-background-secondary-accent": ["#E4E4E5", "#100f10"],
"--color-background-own": ["#EEFEDF", "#8378DB"],
"--color-background-own-apple": ["#E7FDCC", "#8378DB"],
"--color-background-selected": ["#F4F4F5", "#2C2C2C"],
"--color-background-own-selected": ["#d4fcae", "#7b71c6"],
"--color-chat-hover": ["#F4F4F5", "#2C2C2C"],
@ -13,6 +14,7 @@
"--color-item-active": ["#ededed", "#292929"],
"--color-text": ["#000000", "#FFFFFF"],
"--color-text-secondary": ["#707579", "#AAAAAA"],
"--color-text-secondary-apple": ["#8E8E92", "#AAAAAA"],
"--color-borders": ["#DADCE0", "#100F10"],
"--color-borders-input": ["#DADCE0", "#5B5B5A"],
"--color-links": ["#52A1EF", "#868DF6"],
@ -26,7 +28,9 @@
"--color-reply-hover": ["#F4F4F4", "#272727"],
"--color-reply-active": ["#E8E9E9", "#2E2F2F"],
"--color-reply-own-hover": ["#DBF4CE", "#6458bc"],
"--color-reply-own-hover-apple": ["#d9f9c1", "#6458bc"],
"--color-reply-own-active": ["#C8EBBC", "#4F4A9F"],
"--color-reply-own-active-apple": ["#d5edc2", "#4F4A9F"],
"--color-accent-own": ["#4FAE4E", "#FFFFFF"],
"--color-message-meta-own": ["#4FAE4EFF", "#FFFFFF88"],
"--color-own-links": ["#52A1EF", "#FFFFFF"],