CSS fixes & css contacts added

src/components/wrappers.ts

@@ -259,6 +259,8 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
 
   if(withTime) {
     subtitle += (subtitle ? ' · ' : '') + formatDate(doc.date);
+  } else if(!subtitle) {
+    subtitle = 'Unknown Artist';
   }
   
   div.innerHTML = `
@@ -309,8 +311,14 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
         div.removeEventListener('click', onClick);
         let toggle = div.querySelector('.audio-toggle') as HTMLDivElement;
         let subtitle = div.querySelector('.audio-subtitle') as HTMLDivElement;
+        let launched = false;
 
         toggle.addEventListener('click', () => {
+          if(!launched) {
+            div.classList.add('audio-show-progress');
+            launched = true;
+          }
+
           subtitle.innerHTML = '';
           subtitle.append(progress.container);
 
@@ -326,8 +334,6 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
             
             toggle.classList.remove('tgico-largeplay');
             toggle.classList.add('tgico-largepause');
-            
-            
           } else {
             audio.pause();
             toggle.classList.add('tgico-largeplay');
@@ -344,7 +350,6 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
         
         audio.style.display = 'none';
         audio.append(source);
-        div.classList.add('audio-show-progress');
         div.append(audio);
       });
       

src/lib/appManagers/appImManager.ts

@@ -1,6 +1,6 @@
 //import apiManager from '../mtproto/apiManager';
 import apiManager from '../mtproto/mtprotoworker';
-import { $rootScope, isElementInViewport, numberWithCommas, findUpClassName, formatNumber, placeCaretAtEnd, calcImageInBox, findUpTag, langPack } from "../utils";
+import { $rootScope, isElementInViewport, numberWithCommas, findUpClassName, formatNumber, placeCaretAtEnd, findUpTag, langPack } from "../utils";
 import appUsersManager from "./appUsersManager";
 import appMessagesManager from "./appMessagesManager";
 import appPeersManager from "./appPeersManager";
@@ -19,7 +19,7 @@ import appMessagesIDsManager from "./appMessagesIDsManager";
 import apiUpdatesManager from './apiUpdatesManager';
 import { wrapDocument, wrapPhoto, wrapVideo, wrapSticker, wrapReply, MTPhotoSize } from '../../components/wrappers';
 import ProgressivePreloader from '../../components/preloader';
-import { openBtnMenu, renderImageFromUrl } from '../../components/misc';
+import { openBtnMenu, renderImageFromUrl, formatPhoneNumber } from '../../components/misc';
 import { ChatInput } from '../../components/chatInput';
 import Scrollable from '../../components/scrollable';
 import BubbleGroups from '../../components/bubbleGroups';
@@ -359,7 +359,7 @@ export class AppImManager {
         if(!isNaN(peerID)) {
           this.setPeer(peerID);
         }
-      } else if(((target.tagName == 'IMG' || target.tagName == 'image') && !target.classList.contains('emoji')) || target.tagName == 'VIDEO') {
+      } else if((target.tagName == 'IMG' && !target.classList.contains('emoji')) || target.tagName == 'image' || target.tagName == 'VIDEO') {
         let messageID = 0;
         for(let mid in this.bubbles) {
           if(this.bubbles[mid] == bubble) {
@@ -384,7 +384,7 @@ export class AppImManager {
 
         let targets = ids.map(id => ({
           //element: (this.bubbles[id].querySelector('img, video') || this.bubbles[id].querySelector('image')) as HTMLElement, 
-          element: this.bubbles[id].querySelector('.attachment img, .preview img, video, .bubble__media-container') as HTMLElement,
+          element: this.bubbles[id].querySelector('.attachment img, .preview img, video, .bubble__media-container, .album-item') as HTMLElement,
           mid: id
         }));
         
@@ -1680,10 +1680,38 @@ export class AppImManager {
             
             bubble.classList.remove('is-message-empty');
             messageDiv.append(docDiv);
+            messageDiv.classList.add((doc.type || 'document') + '-message');
             processingWebPage = true;
             
             break;
           }
+
+          break;
+        }
+
+        case 'messageMediaContact': {
+          this.log('wrapping contact', message);
+
+          let contactDiv = document.createElement('div');
+          contactDiv.classList.add('contact');
+          messageDiv.classList.add('contact-message');
+          processingWebPage = true;
+
+          let texts = [];
+          if(message.media.first_name) texts.push(RichTextProcessor.wrapEmojiText(message.media.first_name));
+          if(message.media.last_name) texts.push(RichTextProcessor.wrapEmojiText(message.media.last_name));
+
+          contactDiv.innerHTML = `
+            <div class="contact-avatar user-avatar"><img src="blob:https://192.168.0.105:9000/803514b4-4a46-4125-984f-ca8f86405ef2"></div>
+            <div class="contact-details">
+              <div class="contact-name">${texts.join(' ')}</div>
+              <div class="contact-number">${message.media.phone_number ? '+' + formatPhoneNumber(message.media.phone_number).formatted : 'Unknown phone number'}</div>
+            </div>`;
+
+          bubble.classList.remove('is-message-empty');
+          messageDiv.append(contactDiv);
+
+          break;
         }
         
         default:

src/lib/richtextprocessor.js

@@ -9,7 +9,7 @@ var EmojiHelper = {
 
 var emojiData = Config.Emoji;
 var emojiIconSize = emojiData.img_size;
-var emojiSupported = navigator.userAgent.search(/OS X|iPhone|iPad|iOS|Android/i) != -1/*  && false */,
+var emojiSupported = navigator.userAgent.search(/OS X|iPhone|iPad|iOS/i) != -1/*  && false */,
   emojiCode;
 //var emojiRegExp = '\\u0023\\u20E3|\\u00a9|\\u00ae|\\u203c|\\u2049|\\u2139|[\\u2194-\\u2199]|\\u21a9|\\u21aa|\\u231a|\\u231b|\\u23e9|[\\u23ea-\\u23ec]|\\u23f0|\\u24c2|\\u25aa|\\u25ab|\\u25b6|\\u2611|\\u2614|\\u26fd|\\u2705|\\u2709|[\\u2795-\\u2797]|\\u27a1|\\u27b0|\\u27bf|\\u2934|\\u2935|[\\u2b05-\\u2b07]|\\u2b1b|\\u2b1c|\\u2b50|\\u2b55|\\u3030|\\u303d|\\u3297|\\u3299|[\\uE000-\\uF8FF\\u270A-\\u2764\\u2122\\u25C0\\u25FB-\\u25FE\\u2615\\u263a\\u2648-\\u2653\\u2660-\\u2668\\u267B\\u267F\\u2693\\u261d\\u26A0-\\u26FA\\u2708\\u2702\\u2601\\u260E]|[\\u2600\\u26C4\\u26BE\\u23F3\\u2764]|\\uD83D[\\uDC00-\\uDFFF]|\\uD83C[\\uDDE8-\\uDDFA\uDDEC]\\uD83C[\\uDDEA-\\uDDFA\uDDE7]|[0-9]\\u20e3|\\uD83C[\\uDC00-\\uDFFF]';
 //var emojiRegExp = '\\u00a9|\\u00ae|[\\u2000-\\u3300]|\\ud83c[\\ud000-\\udfff]|\\ud83d[\\ud000-\\udfff]|\\ud83e[\\ud000-\\udfff]';

src/scss/partials/_chat.scss

@@ -1,5 +1,9 @@
 $chat-max-width: 696px;
 
+#bubble-contextmenu > div {
+	padding: 0 84px 0 16px;
+}
+
 .chat-container {
 	display: flex;
 	// padding: 200px;
@@ -184,6 +188,12 @@ $chat-max-width: 696px;
 				}
 			}
 
+			&:not(.is-channel), &.is-chat {
+				.message {
+					max-width: 480px;
+				}
+			}
+
 			&.is-scrolling .is-sticky {
 				opacity: 1;
 			}
@@ -273,6 +283,17 @@ $chat-max-width: 696px;
 				/* font-size: 0; */
 				width: max-content;
 				height: fit-content;
+
+				> .user-avatar {
+					position: absolute;
+					left: -3rem;
+					width: 40px;
+					height: 40px;
+					line-height: 40px;
+					bottom: 0;
+					font-size: 1rem;
+					cursor: pointer;
+				}
 			}
 			
 			&.service {
@@ -723,10 +744,10 @@ $chat-max-width: 696px;
 				line-height: 21px;
 				word-break: break-word;
 				
-				* {
+				/* * {
 					overflow: hidden;
 					text-overflow: ellipsis;
-				}
+				} */
 				
 				&:last-child {
 					//padding-top: .2675rem;
@@ -738,6 +759,129 @@ $chat-max-width: 696px;
 				}
 			}
 
+			// all for audio (not voice)
+			.message.audio-message {
+				.audio {
+					justify-content: unset;
+					max-width: none;
+
+					&-time {
+						padding-bottom: 7px;
+					}
+
+					&-time, &-subtitle {
+						color: #4fae4e;
+						line-height: 1.45;
+						margin-top: 0;
+					}
+
+					&-title {
+						font-weight: 500;
+						margin-left: -1px;
+					}
+
+					&-details {
+						margin-top: 8px;
+					}
+
+					&-ico {
+						font-size: 2.15rem;
+					}
+				}
+
+				.media-progress {
+					/* width: calc(100% + 50px); */
+					width: 191px;
+					margin: 9px 0 9px;
+
+					&__filled {
+						background-color: #47aa41;
+						transform-origin: left;
+						height: 2px;
+					}
+
+					&__seek {
+						height: 2px;
+						overflow: visible !important;
+    				background: rgba(124, 195, 107, 0.52);
+						
+						&::-webkit-slider-thumb {
+							height: 12px;
+							width: 12px;
+							background: #47aa41;
+						}
+					}
+				}
+
+				//&.audio-message {
+					min-width: 275px;
+					//max-width: 380px !important;
+					max-width: 275px !important;
+					padding-top: 8px !important;
+					padding-left: 8px !important;
+
+					/* .audio-details * {
+						overflow: visible;
+					} */
+				//}
+
+				.tgico-largeplay:before {
+					content: "\e929";
+					margin-right: -2px;
+				}
+			}
+
+			.message.contact-message  {
+				min-width: 200px;
+				padding-left: 8px;
+
+				.contact {
+					display: flex;
+					padding: 2px 0;
+
+					&-avatar {
+						color: #fff;
+					}
+
+					&-details {
+						padding-left: 12px;
+						margin-top: 8px;
+					}
+
+					&-name {
+						font-size: 1rem;
+						font-weight: 500;
+					}
+
+					&-number {
+						font-size: 14px;
+						line-height: 1.4;
+					}
+				}
+
+				.time {
+					width: unset;
+				}
+			}
+
+			.message.document-message {
+				max-width: 325px !important;
+
+				.time {
+					width: unset;
+				}
+
+				.document {
+					padding-left: 66px;
+					height: 58px;
+
+					&-name {
+						line-height: 1.4;
+						margin-top: 1px;
+					}
+				}
+			}
+
 			&.is-message-empty {
 				.message {
 					position: absolute;
@@ -810,17 +954,6 @@ $chat-max-width: 696px;
 				width: 90px;
 			}
 			
-			.user-avatar {
-				position: absolute;
-				left: -3rem;
-				width: 40px;
-				height: 40px;
-				line-height: 40px;
-				bottom: 0;
-				font-size: 1rem;
-				cursor: pointer;
-			}
-			
 			&:not(.forwarded).hide-name, &.emoji-big {
 				.name {
 					display: none;
@@ -998,6 +1131,10 @@ $chat-max-width: 696px;
 					}
 				}
 			}
+
+			.audio-subtitle, .contact-number {
+				color: #707579;
+			}
 		}
 		
 		.is-out {
@@ -1005,6 +1142,11 @@ $chat-max-width: 696px;
 				margin-left: auto;
 				background-color: #eeffde;
 				border-radius: 12px 6px 6px 12px;
+
+				> .user-avatar {
+					left: auto;
+					right: -2.5rem;
+				}
 			}
 				
 			&.is-group-first .bubble__container {
@@ -1104,11 +1246,6 @@ $chat-max-width: 696px;
 			&.is-edited .time {
 				width: 85px;
 			}
-			
-			.user-avatar {
-				left: auto;
-				right: -2.5rem;
-			}
 
 			.document-ico:after {
 				border-top-color: #eeffde;
@@ -1146,6 +1283,10 @@ $chat-max-width: 696px;
 					}
 				}
 			}
+
+			.audio-subtitle, .contact-number, .document-size {
+				color: #4FAE4E;
+			}
 		}
 	}
 	

src/scss/partials/_rightSIdebar.scss

@@ -28,7 +28,6 @@
 
   .sidebar-header {
     flex: 0 0 auto;
-    padding: 10px 20px 11px 15px;
   }
 
   #search-private-container {
@@ -133,7 +132,7 @@
     }
 
     &-label {
-      color: $placeholder-color !important;
+      color: #707579 !important;
       font-size: 14px !important;
     }
 
@@ -146,7 +145,7 @@
   &-avatar.user-avatar {
     width: 120px;
     height: 120px;
-    margin: 0 auto 21px;
+    margin: 1px auto 21px;
     font-size: 4rem !important;
 
     &.tgico-avatar_deletedaccount {

src/scss/style.scss

@@ -187,7 +187,7 @@ input {
   top: 100%;
   margin-top: 8px;
   padding: 9px 0;
-  border-radius: $border-radius;
+  border-radius: $border-radius-medium;
   opacity: 0;
   transform: scale(.8);
   transition-property: opacity,transform,visibility;
@@ -250,7 +250,7 @@ input {
     &:before {
       color: $color-gray;
       font-size: 1.5rem;
-      margin-right: 35px;
+      margin-right: 32px;
     }
 
     &.danger:before {
@@ -265,7 +265,7 @@ input {
   height: 54px;
   line-height: 54px;
   border-radius: 50%;
-  background-color: $button-primary-background;
+  background-color: $blue;
   text-align: center;
   font-size: 1.25em;
   /* overflow: hidden; */
@@ -311,12 +311,16 @@ input {
   }
 }
 
-.user-title, b, .user-last-message b {
+.user-title, b/* , .user-last-message b */ {
   color: #000;
   font-weight: 500;
   //font-weight: normal;
 }
 
+.user-last-message b {
+  font-weight: 400;
+}
+
 .rp {
   position: relative;
 }
@@ -545,6 +549,13 @@ input {
     margin-top: 3px;
     margin-left: -1px;
   }
+
+  &-title, &:not(.audio-show-progress) &-subtitle {
+    white-space: nowrap;
+		overflow: hidden;
+		max-width: 100%;
+		text-overflow: ellipsis;
+  }
 }
 
 #auth-pages {