Refactored avatar sizes

Restrict zoom on iOS

src/components/appMediaViewer.ts

@@ -95,7 +95,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     this.author.container.classList.add(MEDIA_VIEWER_CLASSNAME + '-author', 'no-select');
 
     this.author.avatarEl = new AvatarElement();
-    this.author.avatarEl.classList.add(MEDIA_VIEWER_CLASSNAME + '-userpic');
+    this.author.avatarEl.classList.add(MEDIA_VIEWER_CLASSNAME + '-userpic', 'avatar-44');
 
     this.author.nameEl = document.createElement('div');
     this.author.nameEl.classList.add(MEDIA_VIEWER_CLASSNAME + '-name');

src/components/appSearch.ts

@@ -174,7 +174,12 @@ export default class AppSearch {
 
           //////////this.log('contacts peer', peer);
 
-          const {dom} = appDialogsManager.addDialog(peerId, group.list, false);
+          const {dom} = appDialogsManager.addDialogNew({
+            dialog: peerId, 
+            container: group.list, 
+            drawStatus: false,
+            avatarSize: 48
+          });
 
           if(showMembersCount && (peer.participants_count || peer.participants)) {
             const regExp = new RegExp(`(${escapeRegExp(query)}|${escapeRegExp(searchIndexManager.cleanSearchText(query))})`, 'gi');
@@ -256,7 +261,12 @@ export default class AppSearch {
       history.forEach((msgId: number) => {
         const message = appMessagesManager.getMessage(msgId);
 
-        const {dialog, dom} = appDialogsManager.addDialog(message.peerId, this.scrollable/* searchGroup.list */, false);
+        const {dialog, dom} = appDialogsManager.addDialogNew({
+          dialog: message.peerId, 
+          container: this.scrollable/* searchGroup.list */, 
+          drawStatus: false,
+          avatarSize: 48
+        });
         appDialogsManager.setLastMessage(dialog, message, dom, query);
       });
 

src/components/appSelectPeers.ts

@@ -316,7 +316,13 @@ export default class AppSelectPeers {
     }
 
     peerIds.forEach(peerId => {
-      const {dom} = appDialogsManager.addDialog(peerId, this.scrollable, false, false);
+      const {dom} = appDialogsManager.addDialogNew({
+        dialog: peerId,
+        container: this.scrollable,
+        drawStatus: false,
+        rippleEnabled: false,
+        avatarSize: 48
+      });
 
       if(this.multiSelect) {
         const selected = this.selected.has(peerId);
@@ -355,6 +361,7 @@ export default class AppSelectPeers {
     const avatarEl = document.createElement('avatar-element');
     avatarEl.classList.add('selector-user-avatar', 'tgico');
     avatarEl.setAttribute('dialog', '1');
+    avatarEl.classList.add('avatar-32');
 
     div.dataset.key = '' + peerId;
     if(typeof(peerId) === 'number') {

src/components/chat/markupTooltip.ts

@@ -130,6 +130,10 @@ export default class MarkupTooltip {
     this.wrapper.append(tools1, tools2);
     this.container.append(this.wrapper);
     document.body.append(this.container);
+    
+    window.addEventListener('resize', () => {
+      this.hide();
+    });
   }
 
   private applyLink(e: Event) {

src/components/chat/topbar.ts

@@ -144,6 +144,7 @@ export default class ChatTopbar {
     this.avatarElement = new AvatarElement();
     this.avatarElement.setAttribute('dialog', '1');
     this.avatarElement.setAttribute('clickable', '');
+    this.avatarElement.classList.add('avatar-40');
 
     this.subtitle = document.createElement('div');
     this.subtitle.classList.add('info');

src/components/sidebarLeft/index.ts

@@ -217,7 +217,13 @@ export class AppSidebarLeft extends SidebarSlider {
         //console.log('got top categories:', categories);
         if(peers.length) {
           peers.forEach((peerId) => {
-            appDialogsManager.addDialog(peerId, this.searchGroups.people.list, false, true, true);
+            appDialogsManager.addDialogNew({
+              dialog: peerId, 
+              container: this.searchGroups.people.list, 
+              drawStatus: false,
+              onlyFirstName: true,
+              avatarSize: 54
+            });
           });
         }
 
@@ -347,7 +353,13 @@ export class AppSidebarLeft extends SidebarSlider {
       this.recentSearchClearBtn.style.display = this.recentSearch.length ? '' : 'none';
 
       this.recentSearch.slice(0, 20).forEach(peerId => {
-        let {dialog, dom} = appDialogsManager.addDialog(peerId, this.searchGroups.recent.list, false, true, false, true);
+        let {dialog, dom} = appDialogsManager.addDialogNew({
+          dialog: peerId,
+          container: this.searchGroups.recent.list,
+          drawStatus: false,
+          meAsSaved: true,
+          avatarSize: 48
+        });
 
         dom.lastMessageSpan.innerText = peerId > 0 ? appUsersManager.getUserStatusString(peerId) : appChatsManager.getChatMembersString(peerId);
       });

src/components/sidebarLeft/tabs/contacts.ts

@@ -90,7 +90,12 @@ export default class AppContactsTab implements SliderTab {
         let arr = sorted.splice(0, pageCount); // надо splice!
 
         arr.forEach(({user}) => {
-          let {dialog, dom} = appDialogsManager.addDialog(user.id, this.list, false);
+          let {dialog, dom} = appDialogsManager.addDialogNew({
+            dialog: user.id,
+            container: this.list,
+            drawStatus: false,
+            avatarSize: 48
+          });
   
           let status = appUsersManager.getUserStatusString(user.id);
           dom.lastMessageSpan.innerHTML = status == 'online' ? `<i>${status}</i>` : status;

src/components/sidebarLeft/tabs/editFolder.ts

@@ -189,7 +189,14 @@ export default class AppEditFolderTab implements SliderTab {
         for(let i = 0, length = Math.min(peers.length, _length); i < length; ++i) {
           const peerId = peers.shift();
 
-          const {dom} = appDialogsManager.addDialog(peerId, ul, false, false, undefined, true);
+          const {dom} = appDialogsManager.addDialogNew({
+            dialog: peerId,
+            container: ul,
+            drawStatus: false,
+            rippleEnabled: false,
+            meAsSaved: true,
+            avatarSize: 32
+          });
           dom.lastMessageSpan.parentElement.remove();
         }
 

src/components/sidebarLeft/tabs/includedChats.ts

@@ -101,7 +101,13 @@ export default class AppIncludedChatsTab implements SliderTab {
     peerIds.forEach(peerId => {
       //if(other.includes(peerId)) return;
 
-      const {dom} = appDialogsManager.addDialog(peerId, this.selector.scrollable, false, false);
+      const {dom} = appDialogsManager.addDialogNew({
+        dialog: peerId,
+        container: this.selector.scrollable,
+        drawStatus: false,
+        rippleEnabled: false,
+        avatarSize: 46
+      });
 
       const selected = this.selector.selected.has(peerId);
       dom.containerEl.insertAdjacentHTML('beforeend', this.checkbox(selected));

src/components/sidebarLeft/tabs/newGroup.ts

@@ -75,7 +75,13 @@ export default class AppNewGroupTab implements SliderTab {
 
     appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.newGroup);
     this.userIds.forEach(userId => {
-      let {dom} = appDialogsManager.addDialog(userId, this.searchGroup.list, false, false);
+      let {dom} = appDialogsManager.addDialogNew({
+        dialog: userId,
+        container: this.searchGroup.list,
+        drawStatus: false,
+        rippleEnabled: false,
+        avatarSize: 48
+      });
 
       let subtitle = '';
       subtitle = appUsersManager.getUserStatusString(userId);

src/components/sidebarRight/tabs/pollResults.ts

@@ -88,7 +88,14 @@ export default class AppPollResultsTab implements SliderTab {
 
         appPollsManager.getVotes(mid, answer.option, offset, limit).then(votesList => {
           votesList.votes.forEach(vote => {
-            const {dom} = appDialogsManager.addDialog(vote.user_id, list, false, false, undefined, false);
+            const {dom} = appDialogsManager.addDialogNew({
+              dialog: vote.user_id,
+              container: list,
+              drawStatus: false,
+              rippleEnabled: false, 
+              meAsSaved: false,
+              avatarSize: 32
+            });
             dom.lastMessageSpan.parentElement.remove();
           });
 

src/index.hbs

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <title>Telegram Web</title>
   <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
   <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
@@ -262,7 +262,7 @@
             </div>
             <div class="sidebar-content">
               <div class="profile-content-wrapper scrollable scrollable-y">
-                <avatar-element class="profile-avatar" clickable></avatar-element>
+                <avatar-element class="profile-avatar avatar-120" clickable></avatar-element>
                 <div class="profile-name"></div>
                 <div class="profile-subtitle"></div>
                 <div class="profile-buttons">
@@ -385,7 +385,7 @@
             </div>
             <div class="profile-content">
               <div class="profile-content-wrapper">
-                <avatar-element class="profile-avatar" dialog="1" clickable></avatar-element>
+                <avatar-element class="profile-avatar avatar-120" dialog="1" clickable></avatar-element>
                 <div class="profile-name"></div>
                 <div class="profile-subtitle"></div>
         

src/lib/appManagers/appDialogsManager.ts

@@ -1108,12 +1108,13 @@ export class AppDialogsManager {
     rippleEnabled?: boolean,
     onlyFirstName?: boolean,
     meAsSaved?: boolean,
-    append?: boolean
+    append?: boolean,
+    avatarSize?: number
   }) {
-    return this.addDialog(options.dialog, options.container, options.drawStatus, options.rippleEnabled, options.onlyFirstName, options.meAsSaved, options.append);
+    return this.addDialog(options.dialog, options.container, options.drawStatus, options.rippleEnabled, options.onlyFirstName, options.meAsSaved, options.append, options.avatarSize);
   }
 
-  public addDialog(_dialog: Dialog | number, container?: HTMLUListElement | Scrollable, drawStatus = true, rippleEnabled = true, onlyFirstName = false, meAsSaved = true, append = true) {
+  public addDialog(_dialog: Dialog | number, container?: HTMLUListElement | Scrollable, drawStatus = true, rippleEnabled = true, onlyFirstName = false, meAsSaved = true, append = true, avatarSize = 54) {
     let dialog: Dialog;
     
     if(typeof(_dialog) === 'number') {
@@ -1147,7 +1148,7 @@ export class AppDialogsManager {
     const avatarEl = new AvatarElement();
     avatarEl.setAttribute('dialog', meAsSaved ? '1' : '0');
     avatarEl.setAttribute('peer', '' + peerId);
-    avatarEl.classList.add('dialog-avatar');
+    avatarEl.classList.add('dialog-avatar', 'avatar-' + avatarSize);
 
     if(drawStatus && peerId != rootScope.myId && dialog.peer) {
       const peer = dialog.peer;

src/scss/partials/_avatar.scss

@@ -1,19 +1,25 @@
 avatar-element {
+  --size: 54px;
+  --multiplier: 1;
   color: #fff;
-  width: 54px;
+  width: var(--size);
-  height: 54px;
+  height: var(--size);
-  line-height: 54px;
+  line-height: var(--size);
   border-radius: 50%;
   background-color: $color-blue;
   text-align: center;
-  font-size: 1.25em;
+  font-size: calc(1.25rem / var(--multiplier));
   /* overflow: hidden; */
   position: relative;
   user-select: none;
   text-transform: uppercase;
-  
+
-  @include respond-to(handhelds) {
+  &.tgico-savedmessages:before {
-    font-size: 14px;
+    font-size: calc(26px / var(--multiplier));
+  }
+
+  &.tgico-avatar_deletedaccount:before {
+    font-size: calc(56px / var(--multiplier));
   }
   
   /* kostil */
@@ -32,11 +38,6 @@ avatar-element {
     }
   }
   
-  &[class*=" tgico-"] {
-    line-height: 52px;
-    font-size: 28px;
-  }
-  
   path {
     fill: white;
   }
@@ -54,11 +55,51 @@ avatar-element {
     height: 14px;
   }
 
-  &.tgico-avatar_deletedaccount {
-    font-size: 3rem;
-  }
-
   &[clickable] {
     cursor: pointer;
   }
+
+  /* &.avatar-54 {
+    width: 54px;
+    height: 54px;
+    line-height: 54px;
+    font-size: 1.25rem;
+
+    &.tgico-savedmessages:before {
+      font-size: 26px;
+    }
+
+    &.tgico-avatar_deletedaccount:before {
+      font-size: 56px;
+    }
+  } */
+  &.avatar-120 {
+    --size: 120px;
+    --multiplier: 0.45;
+  }
+
+  &.avatar-48 {
+    --size: 48px;
+    --multiplier: 1.125;
+  }
+
+  &.avatar-46 {
+    --size: 46px;
+    --multiplier: 1.173913;
+  }
+
+  &.avatar-44 {
+    --size: 44px;
+    --multiplier: 1.227272;
+  }
+
+  &.avatar-40 {
+    --size: 40px;
+    --multiplier: 1.35;
+  }
+
+  &.avatar-32 {
+    --size: 32px;
+    --multiplier: 1.6875;
+  }
 }

src/scss/partials/_chatBubble.scss

@@ -1302,6 +1302,7 @@ $bubble-margin: .25rem;
     pointer-events: none; // do not show title
     display: inline-flex;
     z-index: 1;
+    cursor: default;
     /* display: inline-flex;
     align-items: center; */
 
@@ -1473,7 +1474,7 @@ $bubble-margin: .25rem;
   }
 
   audio-element, poll-element {
-    white-space: nowrap; // * fix due to .message white-space prewrap
+    white-space: normal; // * fix due to .message white-space prewrap
   }
 }
 
@@ -1744,7 +1745,7 @@ $bubble-margin: .25rem;
   
   .time {
     padding-right: 4px;
-    margin-left: -4px;
+    margin-left: -3px;
 
     .inner {
       color: $darkgreen;

src/scss/partials/_chatTopbar.scss

@@ -202,23 +202,6 @@
 		}
 	}
 
-	avatar-element {
-		width: 40px;
-		height: 40px;
-		line-height: 40px;
-		//font-size: 16px;
-		font-size: 16px;
-		flex: 0 0 auto;
-
-		&:before {
-			font-size: 20px;
-		}
-
-		&.tgico-avatar_deletedaccount:before {
-			font-size: 40px;
-		}
-	}
-
 	&.hide-pinned + .bubbles {
 		.bubbles-inner {
 			margin-bottom: .25rem;

src/scss/partials/_chatlist.scss

@@ -327,11 +327,6 @@
 
 // use together like class="chatlist-container contacts-container"
 .contacts-container, .search-group-contacts {
-  .dialog-avatar {
-    width: 48px;
-    height: 48px;
-  }
-
   li {
     //margin-bottom: 2px;
     padding-bottom: 4px;

src/scss/partials/_leftSidebar.scss

@@ -211,11 +211,6 @@
         max-width: 77px;
       }
     }
-    
-    .dialog-avatar {
-      width: 54px;
-      height: 54px;
-    }
 
     .dialog-title-details {
       display: none;
@@ -610,12 +605,6 @@
     }
   }
 
-  avatar-element {
-    height: 2rem;
-    width: 2rem;
-    font-size: .875rem;
-  }
-
   .user-caption {
     padding: 6px 28px;
   }  
@@ -695,11 +684,6 @@
         }
       }
   
-      .dialog-avatar {
-        width: 2.875rem;
-        height: 2.875rem;
-      }
-  
       .user-caption {
         padding: 0px 0px 0 14px;
         margin-top: -2px;
@@ -792,8 +776,8 @@
     }
 
     .dialog-avatar {
-      width: 46px;
+      --size: 46px;
-      height: 46px;
+      --multiplier: 1.173913;
     }
 
     li > .rp {

src/scss/partials/_mediaViewer.scss

@@ -37,8 +37,6 @@ $move-duration: .35s;
   }
 
   &-userpic {
-    width: 2.75rem;
-    height: 2.75rem;
     position: absolute;
     top: .5rem;
     left: 1.25rem;

src/scss/partials/_rightSidebar.scss

@@ -221,10 +221,7 @@
   }
 
   &-avatar {
-    width: 120px;
-    height: 120px;
     margin: 1px auto 10px;
-    font-size: 2.5rem !important;
     //flex: 0 0 auto;
 
     @include respond-to(handhelds) {
@@ -232,10 +229,6 @@
       width: 100px;
       height: 100px;
     }
-
-    &.tgico-avatar_deletedaccount {
-      font-size: 6rem !important;
-    }
   }
 
   &-name, &-subtitle, &-row, &-avatar {
@@ -691,11 +684,6 @@
       margin-top: 7px;
     }
   
-    avatar-element {
-      width: 32px;
-      height: 32px;
-    }
-  
     .user-caption {
       padding: 6px 28px;
     }

src/scss/partials/_selector.scss

@@ -82,12 +82,9 @@
     }
 
     &-avatar {
-      height: 32px !important;
-      width: 32px !important;
       float: left;
       margin-right: 8px;
       overflow: hidden;
-      font-size: 14px;
       
       html.is-safari & {
         -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
@@ -117,11 +114,6 @@
   }
 
   ul {
-    .dialog-avatar {
-      height: 48px;
-      width: 48px;
-    }
-
     .user-caption {
       padding: 1px 3.5px 1px 12px;
     }

src/scss/style.scss

@@ -797,18 +797,6 @@ img.emoji {
   }
 }
 
-#folders-container .rp avatar-element {
-  font-size: 20px;
-
-  &:before {
-    font-size: 26px;
-  }
-
-  &.tgico-avatar_deletedaccount:before {
-    font-size: 56px;
-  }
-}
-
 // .message .audio .preloader-container {
 // 	@include respond-to(handhelds) {
 // 		width: 30px;