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

RTL: Better font and various fixes (#1590)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-12-21 12:17:07 +03:00
parent 4fe0aeb446
commit 99b9347ddf
6 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,12 +21,12 @@
}
.message-time {
margin-inline-end: .1875rem;
margin-right: .1875rem;
}
body.is-ios & {
.message-time {
margin-inline-end: .25rem;
margin-right: .25rem;
}
}
@ -41,8 +41,8 @@
}
.icon-channelviews {
margin-inline-start: 0.125rem;
margin-inline-end: 0.375rem;
margin-left: 0.125rem;
margin-right: 0.375rem;
font-size: 1.125rem;
position: relative;
top: -0.0625rem;
@ -113,6 +113,15 @@
.message-content.has-replies.text:not(.custom-shape) & {
bottom: 3.4375rem;
}
&[dir="rtl"] {
.message-views {
order: 10;
}
.icon-channelviews {
order: 9;
}
}
}
.Message:not(.own) {

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

@ -67,7 +67,7 @@
top: .375rem;
bottom: auto !important;
float: right;
line-height: 1;
line-height: 1.35;
height: calc(var(--message-meta-height, 1rem));
margin-left: .4375rem;
margin-right: -.5rem;

3
src/components/ui/TabList.tsx
View File

@ -51,7 +51,8 @@ const TabList: FC<OwnProps> = ({
return;
}
const newLeft = activeTabElement.offsetLeft - (offsetWidth / 2) + (activeTabElement.offsetWidth / 2);
const { offsetLeft: activeTabOffsetLeft, offsetWidth: activeTabOffsetWidth } = activeTabElement;
const newLeft = activeTabOffsetLeft - (offsetWidth / 2) + (activeTabOffsetWidth / 2);
// Prevent scrolling by only a couple of pixels, which doesn't look smooth
if (Math.abs(newLeft - scrollLeft) < TAB_SCROLL_THRESHOLD_PX) {

9
src/styles/index.scss
View File

@ -14,8 +14,11 @@ html, body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: var(--color-text);
font-weight: 400;
line-height: 1.5;
text-align: left;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -32,11 +35,11 @@ body.is-macos {
html[lang=fa],
html[lang=fa] body {
font-family: "Vazir", "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
font-family: "Vazir", "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
&.is-ios,
&.is-macos {
font-family: "Vazir", -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;
font-family: "Vazir", -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
}

7
src/styles/reboot.css
View File

@ -22,13 +22,6 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
[tabindex="-1"]:focus {

3
src/util/fastSmoothScrollHorizontal.ts
View File

@ -14,11 +14,12 @@ export default function fastSmoothScrollHorizontal(container: HTMLElement, left:
}
function scrollWithJs(container: HTMLElement, left: number, duration: number) {
const isRtl = container.getAttribute('dir') === 'rtl';
const { scrollLeft, offsetWidth: containerWidth, scrollWidth } = container;
let path = left - scrollLeft;
if (path < 0) {
const remainingPath = -scrollLeft;
const remainingPath = -scrollLeft * (isRtl ? -1 : 1);
path = Math.max(path, remainingPath);
} else if (path > 0) {
const remainingPath = scrollWidth - (scrollLeft + containerWidth);