chat username colored

src/lib/appManagers/appDialogsManager.ts

@@ -20,9 +20,6 @@ type DialogDom = {
   listEl: HTMLLIElement
 };
 
-const DialogColors = ['#c03d33', '#4fad2d', '#d09306', '#168acd', '#8544d6', '#cd4073', '#2996ad', '#ce671b'];
-const DialogColorsMap = [0, 7, 4, 1, 6, 3, 5];
-
 export class AppDialogsManager {
   public chatList = document.getElementById('dialogs') as HTMLUListElement;
   public pinnedDelimiter: HTMLDivElement;
@@ -76,17 +73,6 @@ export class AppDialogsManager {
     });
   }
 
-  /*
-  HTML-color  IRC-color  Description
-  #c03d33     4          red
-  #4fad2d     3          green
-  #d09306     7          yellow
-  #168acd     10         blue
-  #8544d6     6          purple
-  #cd4073     13         pink
-  #2996ad     11         sea
-  #ce671b     5          orange
-  */
   public async loadDialogPhoto(div: HTMLDivElement, peerID: number | string, isDialog = false): Promise<boolean> {
     let inputPeer: any;
     let location: any;
@@ -102,6 +88,7 @@ export class AppDialogsManager {
         div.firstChild.remove();
       }
       
+      div.style.backgroundColor = '';
       div.style.fontSize = '';
       div.classList.add('tgico-savedmessages');
       return true;
@@ -113,8 +100,8 @@ export class AppDialogsManager {
       }
 
       let color = '';
-      if(typeof(peerID) != 'string') {
-        color = DialogColors[DialogColorsMap[(peerID < 0 ? -peerID : peerID) % 7]];
+      if(typeof(peerID) != 'string' && peerID != this.myID) {
+        color = appPeersManager.getPeerColorByID(peerID);
       }
 
       div.classList.remove('tgico-savedmessages');

src/lib/appManagers/appImManager.ts

@@ -356,6 +356,7 @@ export class AppImManager {
 
   public contextMenu = document.getElementById('bubble-contextmenu') as HTMLDivElement;
   private contextMenuPin = this.contextMenu.querySelector('.menu-pin') as HTMLDivElement;
+  private contextMenuEdit = this.contextMenu.querySelector('.menu-edit') as HTMLDivElement;
   private contextMenuMsgID: number;
 
   public replyElements: {
@@ -569,6 +570,8 @@ export class AppImManager {
 
         let side = bubble.parentElement.classList.contains('in') ? 'left' : 'right';
 
+        this.contextMenuEdit.style.display = side == 'right' ? '' : 'none';
+
         this.contextMenu.classList.remove('bottom-left', 'bottom-right');
         this.contextMenu.classList.add(side == 'left' ? 'bottom-right' : 'bottom-left');
 
@@ -1475,6 +1478,7 @@ export class AppImManager {
           let nameDiv = document.createElement('div');
           nameDiv.classList.add('name');
           nameDiv.innerHTML = 'Forwarded from ' + title;
+          nameDiv.style.color = appPeersManager.getPeerColorByID(message.fromID);
           bubble.append(nameDiv);
         }
       } else {
@@ -1545,6 +1549,7 @@ export class AppImManager {
           let nameDiv = document.createElement('div');
           nameDiv.classList.add('name');
           nameDiv.innerHTML = title;
+          nameDiv.style.color = appPeersManager.getPeerColorByID(message.fromID);
           bubble.append(nameDiv);
         } else if(!message.reply_to_mid) {
           bubble.classList.add('hide-name');

src/lib/appManagers/appPeersManager.ts

@@ -3,6 +3,22 @@ import appChatsManager from "./appChatsManager";
 import { isObject } from "../utils";
 import { RichTextProcessor } from "../richtextprocessor";
 
+// https://github.com/eelcohn/Telegram-API/wiki/Calculating-color-for-a-Telegram-user-on-IRC
+/*
+  HTML-color  IRC-color  Description
+  #c03d33     4          red
+  #4fad2d     3          green
+  #d09306     7          yellow
+  #168acd     10         blue
+  #8544d6     6          purple
+  #cd4073     13         pink
+  #2996ad     11         sea
+  #ce671b     5          orange
+  */
+const DialogColorsFg = ['#c03d33', '#4fad2d', '#d09306', '#168acd', '#8544d6', '#cd4073', '#2996ad', '#ce671b'];
+const DialogColors = ['#e17076', '#7bc862', '#e5ca77', '#65AADD', '#a695e7', '#ee7aae', '#6ec9cb', '#faa774'];
+const DialogColorsMap = [0, 7, 4, 1, 6, 3, 5];
+
 const AppPeersManager = {
   getPeerPhoto: (peerID: number) => {
     return peerID > 0
@@ -115,6 +131,12 @@ const AppPeersManager = {
     };
   },
 
+  getPeerColorByID: (peerID: number, pic = true) => {
+    let idx = DialogColorsMap[(peerID < 0 ? -peerID : peerID) % 7];
+    let color = (pic ? DialogColors : DialogColorsFg)[idx];
+    return color;
+  },
+
   isMegagroup: (peerID: number) => {
     return (peerID < 0) && appChatsManager.isMegagroup(-peerID);
   },