Fix RTL

Fix corner buttons size

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);
           }
 

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, {

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();

src/components/divAndCaption.ts

@@ -23,9 +23,11 @@ export default class DivAndCaption<T> {
 
     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);

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');
 

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);

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 {

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();

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',

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;
+}

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",

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);

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;
           }
         }

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) {

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 {

src/scss/partials/_selector.scss

@@ -15,6 +15,7 @@
 }
 
 .selector {
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;

src/scss/partials/_sidebar.scss

@@ -57,8 +57,8 @@
       margin-top: 60px;
     } */
 
-    > div {
+    /* > div {
       width: 100%;
-    }
+    } */
   }
 }

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
 }