From ce9c19964d000ac0a53866bd2cb2e4c4418058e0 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Wed, 5 May 2021 18:05:21 +0400 Subject: [PATCH] Fix RTL Fix corner buttons size --- src/components/chat/bubbles.ts | 14 ++++++------- src/components/chat/contextMenu.ts | 4 ++-- src/components/chat/selection.ts | 2 +- src/components/divAndCaption.ts | 2 ++ src/components/inputField.ts | 11 ++++++---- src/components/peerTitle.ts | 1 + src/components/row.ts | 2 ++ src/components/sidebarLeft/tabs/addMembers.ts | 1 + src/config/app.ts | 2 +- src/helpers/dom.ts | 5 +++++ src/lang.ts | 18 ++++++++--------- src/lib/appManagers/appDialogsManager.ts | 1 + src/lib/appManagers/appUsersManager.ts | 14 ++++++------- src/scss/partials/_button.scss | 2 +- src/scss/partials/_chatBubble.scss | 20 +++++++++++++++---- src/scss/partials/_selector.scss | 1 + src/scss/partials/_sidebar.scss | 4 ++-- src/scss/style.scss | 2 ++ 18 files changed, 68 insertions(+), 38 deletions(-) diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index fb567c1a..e0fd7cc2 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -15,7 +15,7 @@ import type { AppPeersManager } from "../../lib/appManagers/appPeersManager"; import type sessionStorage from '../../lib/sessionStorage'; import type Chat from "./chat"; import { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager"; -import { cancelEvent, whichChild, attachClickEvent, positionElementByIndex, reflowScrollableElement, replaceContent, htmlToDocumentFragment } from "../../helpers/dom"; +import { cancelEvent, whichChild, attachClickEvent, positionElementByIndex, reflowScrollableElement, replaceContent, htmlToDocumentFragment, setInnerHTML } from "../../helpers/dom"; import { getObjectKeysAndSort } from "../../helpers/object"; import { isTouchSupported } from "../../helpers/touchSupport"; import { logger } from "../../lib/logger"; @@ -1618,7 +1618,7 @@ export default class ChatBubbles { this.chat.dispatchEvent('setPeer', lastMsgId, !isJump); - const isFetchIntervalNeeded = () => peerId < 0 && !this.appChatsManager.isInChat(peerId); + const isFetchIntervalNeeded = () => peerId < 0 && !this.appChatsManager.isInChat(peerId) && false; const needFetchInterval = isFetchIntervalNeeded(); const needFetchNew = savedPosition || needFetchInterval; if(!needFetchNew) { @@ -1975,7 +1975,7 @@ export default class ChatBubbles { bubble.classList.add('is-message-empty', 'emoji-big'); canHaveTail = false; } else { - messageDiv.innerHTML = richText; + setInnerHTML(messageDiv, richText); } /* if(strLength === emojiStrLength) { @@ -1983,7 +1983,7 @@ export default class ChatBubbles { messageDiv.classList.add('message-empty'); } */ } else { - messageDiv.innerHTML = richText; + setInnerHTML(messageDiv, richText); } const timeSpan = MessageRender.setTime(this.chat, message, bubble, bubbleContainer, messageDiv); @@ -2219,21 +2219,21 @@ export default class ChatBubbles { nameEl.classList.add('name'); nameEl.setAttribute('target', '_blank'); nameEl.href = webpage.url || '#'; - nameEl.innerHTML = RichTextProcessor.wrapEmojiText(webpage.site_name); + setInnerHTML(nameEl, RichTextProcessor.wrapEmojiText(webpage.site_name)); quoteTextDiv.append(nameEl); } if(webpage.rTitle) { let titleDiv = document.createElement('div'); titleDiv.classList.add('title'); - titleDiv.innerHTML = webpage.rTitle; + setInnerHTML(titleDiv, webpage.rTitle); quoteTextDiv.append(titleDiv); } if(webpage.rDescription) { let textDiv = document.createElement('div'); textDiv.classList.add('text'); - textDiv.innerHTML = webpage.rDescription; + setInnerHTML(textDiv, webpage.rDescription); quoteTextDiv.append(textDiv); } diff --git a/src/components/chat/contextMenu.ts b/src/components/chat/contextMenu.ts index 04c08961..8d862f22 100644 --- a/src/components/chat/contextMenu.ts +++ b/src/components/chat/contextMenu.ts @@ -158,7 +158,7 @@ export default class ChatContextMenu { private init() { this.buttons = [{ icon: 'send2', - text: 'Chat.Context.Scheduled.SendNow', + text: 'MessageScheduleSend', onClick: this.onSendScheduledClick, verify: () => this.chat.type === 'scheduled' && !this.message.pFlags.is_outgoing }, { @@ -170,7 +170,7 @@ export default class ChatContextMenu { withSelection: true }, { icon: 'schedule', - text: 'Chat.Context.Scheduled.Reschedule', + text: 'MessageScheduleEditTime', onClick: () => { this.chat.input.scheduleSending(() => { this.appMessagesManager.editMessage(this.message, this.message.message, { diff --git a/src/components/chat/selection.ts b/src/components/chat/selection.ts index a085b57a..910f7f3d 100644 --- a/src/components/chat/selection.ts +++ b/src/components/chat/selection.ts @@ -359,7 +359,7 @@ export default class ChatSelection { if(this.chat.type === 'scheduled') { this.selectionSendNowBtn = Button('btn-primary btn-transparent btn-short text-bold selection-container-send', {icon: 'send2'}); - this.selectionSendNowBtn.append(i18n('Chat.Context.Scheduled.SendNow')); + this.selectionSendNowBtn.append(i18n('MessageScheduleSend')); this.listenerSetter.add(this.selectionSendNowBtn, 'click', () => { new PopupSendNow(this.bubbles.peerId, [...this.selectedMids], () => { this.cancelSelection(); diff --git a/src/components/divAndCaption.ts b/src/components/divAndCaption.ts index efa903ec..68ac1afb 100644 --- a/src/components/divAndCaption.ts +++ b/src/components/divAndCaption.ts @@ -23,9 +23,11 @@ export default class DivAndCaption { this.title = document.createElement('div'); this.title.classList.add(className + '-title'); + this.title.setAttribute('dir', 'auto'); this.subtitle = document.createElement('div'); this.subtitle.classList.add(className + '-subtitle'); + this.subtitle.setAttribute('dir', 'auto'); this.content.append(this.title, this.subtitle); this.container.append(this.border, this.content); diff --git a/src/components/inputField.ts b/src/components/inputField.ts index c344263a..5b087eea 100644 --- a/src/components/inputField.ts +++ b/src/components/inputField.ts @@ -42,7 +42,8 @@ let init = () => { init = null; }; -const checkAndSetRTL = (input: HTMLElement) => { +// ! it doesn't respect symbols other than strongs +/* const checkAndSetRTL = (input: HTMLElement) => { //const isEmpty = isInputEmpty(input); //console.log('input', isEmpty); @@ -56,7 +57,7 @@ const checkAndSetRTL = (input: HTMLElement) => { //console.log('RTL', direction, char); input.style.direction = direction; -}; +}; */ export enum InputState { Neutral = 0, @@ -112,7 +113,7 @@ class InputField { input = this.container.firstElementChild as HTMLElement; const observer = new MutationObserver(() => { - checkAndSetRTL(input); + //checkAndSetRTL(input); if(processInput) { processInput(); @@ -148,9 +149,11 @@ class InputField { `; input = this.container.firstElementChild as HTMLElement; - input.addEventListener('input', () => checkAndSetRTL(input)); + //input.addEventListener('input', () => checkAndSetRTL(input)); } + input.setAttribute('dir', 'auto'); + if(placeholder) { _i18n(input, placeholder, undefined, 'placeholder'); diff --git a/src/components/peerTitle.ts b/src/components/peerTitle.ts index b6107508..a34ad289 100644 --- a/src/components/peerTitle.ts +++ b/src/components/peerTitle.ts @@ -43,6 +43,7 @@ export default class PeerTitle { constructor(options: PeerTitleOptions) { this.element = document.createElement('span'); this.element.classList.add('peer-title'); + this.element.setAttribute('dir', 'auto'); this.update(options); weakMap.set(this.element, this); diff --git a/src/components/row.ts b/src/components/row.ts index b215340a..d234dc90 100644 --- a/src/components/row.ts +++ b/src/components/row.ts @@ -40,6 +40,7 @@ export default class Row { this.subtitle = document.createElement('div'); this.subtitle.classList.add('row-subtitle'); + this.subtitle.setAttribute('dir', 'auto'); if(options.subtitle) { this.subtitle.innerHTML = options.subtitle; } else if(options.subtitleLangKey) { @@ -89,6 +90,7 @@ export default class Row { this.title = document.createElement('div'); this.title.classList.add('row-title'); + this.title.setAttribute('dir', 'auto'); if(options.title) { this.title.innerHTML = options.title; } else { diff --git a/src/components/sidebarLeft/tabs/addMembers.ts b/src/components/sidebarLeft/tabs/addMembers.ts index 7b530906..55393dc3 100644 --- a/src/components/sidebarLeft/tabs/addMembers.ts +++ b/src/components/sidebarLeft/tabs/addMembers.ts @@ -20,6 +20,7 @@ export default class AppAddMembersTab extends SliderSuperTab { protected init() { this.nextBtn = ButtonCorner({icon: 'arrow_next'}); this.content.append(this.nextBtn); + this.scrollable.container.remove(); this.nextBtn.addEventListener('click', () => { const peerIds = this.selector.getSelected(); diff --git a/src/config/app.ts b/src/config/app.ts index 4ca77c4b..df266947 100644 --- a/src/config/app.ts +++ b/src/config/app.ts @@ -12,7 +12,7 @@ const App = { id: 1025907, hash: '452b0359b988148995f22ff0f4229750', - version: '0.5.0', + version: '0.5.1', langPackVersion: '0.1.6', langPack: 'macos', langPackCode: 'en', diff --git a/src/helpers/dom.ts b/src/helpers/dom.ts index a151ad44..e12a2dca 100644 --- a/src/helpers/dom.ts +++ b/src/helpers/dom.ts @@ -694,3 +694,8 @@ export function replaceContent(elem: HTMLElement, node: string | Node) { elem.append(node); } } + +export function setInnerHTML(elem: HTMLElement, html: string) { + elem.setAttribute('dir', 'auto'); + elem.innerHTML = html; +} diff --git a/src/lang.ts b/src/lang.ts index ba192daf..c81d710c 100644 --- a/src/lang.ts +++ b/src/lang.ts @@ -133,6 +133,7 @@ const lang = { "AttachAudio": "Voice message", "AttachRound": "Video message", "AttachGame": "Game", + "Bot": "bot", //"ChannelJoined": "You joined this channel", "ChannelMegaJoined": "You joined this group", "Channel.DescriptionPlaceholder": "Description (optional)", @@ -408,6 +409,14 @@ const lang = { "OpenUrlAlert2": "Do you want to open %1$s?", "FilterNoChatsToDisplay": "Folder is empty", "FilterNoChatsToDisplayInfo": "No chats currently belong to this folder.", + "SupportStatus": "support", + "Lately": "last seen recently", + "WithinAWeek": "last seen within a week", + "WithinAMonth": "last seen within a month", + "ALongTimeAgo": "last seen a long time ago", + "Online": "online", + "MessageScheduleSend": "Send Now", + "MessageScheduleEditTime": "Reschedule", // * macos "AccountSettings.Filters": "Chat Folders", @@ -420,8 +429,6 @@ const lang = { "Channel.UsernameAboutGroup": "People can share this link with others and find your group using Telegram search.", "Chat.CopySelectedText": "Copy Selected Text", "Chat.Confirm.Unpin": "Would you like to unpin this message?", - "Chat.Context.Scheduled.SendNow": "Send Now", - "Chat.Context.Scheduled.Reschedule": "Re-schedule", "Chat.Date.ScheduledFor": "Scheduled for %@", //"Chat.Date.ScheduledUntilOnline": "Scheduled until online", "Chat.Date.ScheduledForToday": "Scheduled for today", @@ -559,12 +566,7 @@ const lang = { "Peer.Activity.Chat.Multi.SendingFile1": "%@ and %d others are sending files", "Peer.ServiceNotifications": "service notifications", "Peer.RepliesNotifications": "Reply Notifications", - "Peer.Status.online": "online", - "Peer.Status.recently": "last seen recently", "Peer.Status.justNow": "last seen just now", - "Peer.Status.lastWeek": "last seen within a week", - "Peer.Status.lastMonth": "last seen within a month", - "Peer.Status.longTimeAgo": "last seen a long time ago", "Peer.Status.Today": "today", "Peer.Status.Yesterday": "yesterday", "Peer.Status.LastSeenAt": "last seen %@ at %@", @@ -614,8 +616,6 @@ const lang = { "one_value": "Send Video", "other_value": "Send %d Videos" }, - "Presence.bot": "bot", - "Presence.Support": "support", "PrivacyAndSecurity.Item.On": "On", "PrivacyAndSecurity.Item.Off": "Off", "PrivacySettings.VoiceCalls": "Calls", diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index b8b49784..236e773c 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -1357,6 +1357,7 @@ export class AppDialogsManager { const span = document.createElement('span'); span.classList.add('user-last-message'); + span.setAttribute('dir', 'auto'); //captionDiv.append(titleSpan); //captionDiv.append(span); diff --git a/src/lib/appManagers/appUsersManager.ts b/src/lib/appManagers/appUsersManager.ts index 0f0c1151..f3d17a5d 100644 --- a/src/lib/appManagers/appUsersManager.ts +++ b/src/lib/appManagers/appUsersManager.ts @@ -431,7 +431,7 @@ export class AppUsersManager { break; default: { if(this.isBot(userId)) { - key = 'Presence.bot'; + key = 'Bot'; break; } @@ -442,23 +442,23 @@ export class AppUsersManager { } if(user.pFlags.support) { - key = 'Presence.Support'; + key = 'SupportStatus'; break; } switch(user.status?._) { case 'userStatusRecently': { - key = 'Peer.Status.recently'; + key = 'Lately'; break; } case 'userStatusLastWeek': { - key = 'Peer.Status.lastWeek'; + key = 'WithinAWeek'; break; } case 'userStatusLastMonth': { - key = 'Peer.Status.lastMonth'; + key = 'WithinAMonth'; break; } @@ -487,12 +487,12 @@ export class AppUsersManager { } case 'userStatusOnline': { - key = 'Peer.Status.online'; + key = 'Online'; break; } default: { - key = 'Peer.Status.longTimeAgo'; + key = 'ALongTimeAgo'; break; } } diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index 6b1e0502..39a20b54 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -384,7 +384,7 @@ --size: 54px; border-radius: 50%; height: var(--size); - width: var(--size) !important; + width: var(--size); line-height: var(--size); @include respond-to(handhelds) { diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 4e3de500..e8b310b2 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -995,6 +995,7 @@ $bubble-margin: .25rem; position: relative !important; height: 0px !important; visibility: hidden !important; + float: none; .inner { visibility: hidden !important; @@ -1250,6 +1251,8 @@ $bubble-margin: .25rem; /* display: inline-flex; align-items: center; */ height: 12px; + direction: ltr; + float: right; // * rtl fix i { font-size: 1.15rem; @@ -1284,6 +1287,10 @@ $bubble-margin: .25rem; } } + &.webpage .time { + float: none; + } + .video-time { position: absolute; top: 3px; @@ -1893,7 +1900,7 @@ $bubble-margin: .25rem; margin-left: -4px; .inner { - color: var(--message-out-primary-color); + color: var(--message-out-status-color); bottom: 4px; } @@ -1902,9 +1909,14 @@ $bubble-margin: .25rem; //vertical-align: middle; margin-left: 1px; line-height: 16px; // of message + color: var(--message-out-primary-color); } } + &.is-message-empty .time .inner { + color: var(--message-out-primary-color); + } + /* &.is-message-empty .time:after { margin-bottom: 1px; } */ @@ -1954,7 +1966,7 @@ $bubble-margin: .25rem; } &-time, &-subtitle { - color: var(--message-out-primary-color); + color: var(--message-out-status-color); } &-toggle, &-download { @@ -2002,8 +2014,8 @@ $bubble-margin: .25rem; } } - .audio-subtitle, .contact-number, .document-size { - color: var(--message-out-primary-color); + .contact-number, .document-size { + color: var(--message-out-status-color); } poll-element { diff --git a/src/scss/partials/_selector.scss b/src/scss/partials/_selector.scss index c6186d21..785aeb9a 100644 --- a/src/scss/partials/_selector.scss +++ b/src/scss/partials/_selector.scss @@ -15,6 +15,7 @@ } .selector { + width: 100%; height: 100%; display: flex; flex-direction: column; diff --git a/src/scss/partials/_sidebar.scss b/src/scss/partials/_sidebar.scss index f0036c0a..87d724e4 100644 --- a/src/scss/partials/_sidebar.scss +++ b/src/scss/partials/_sidebar.scss @@ -57,8 +57,8 @@ margin-top: 60px; } */ - > div { + /* > div { width: 100%; - } + } */ } } diff --git a/src/scss/style.scss b/src/scss/style.scss index 6e8ca483..926136da 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -170,6 +170,7 @@ $chat-input-inner-padding-handhelds: .25rem; @include splitColor(message-out-background-color, #eeffde, true, true); --message-out-link-color: var(--link-color); --message-out-primary-color: #4fae4e; + --message-out-status-color: var(--message-out-primary-color); --message-out-audio-play-button-color: #fff; // * Day theme end @@ -215,6 +216,7 @@ html.night { @include splitColor(message-out-background-color, #8774E1, true, true); --message-out-link-color: #fff; --message-out-primary-color: #fff; + --message-out-status-color: rgba(255, 255, 255, .6); --message-out-audio-play-button-color: var(--message-out-background-color); // * Night theme end }