Browse Source

Fix dialog title overflow with icons

master
morethanwords 4 years ago
parent
commit
082668ab00
  1. 4
      src/components/sidebarLeft/index.ts
  2. 23
      src/lib/appManagers/appDialogsManager.ts
  3. 15
      src/scss/partials/_chatlist.scss

4
src/components/sidebarLeft/index.ts

@ -335,6 +335,10 @@ export class AppSidebarLeft extends SidebarSlider { @@ -335,6 +335,10 @@ export class AppSidebarLeft extends SidebarSlider {
this.recentSearchLoaded = true;
}
if(this.searchInput.value.trim()) {
return;
}
this.searchGroups.recent.list.innerHTML = '';
this.recentSearchClearBtn.style.display = this.recentSearch.length ? '' : 'none';

23
src/lib/appManagers/appDialogsManager.ts

@ -25,6 +25,7 @@ type DialogDom = { @@ -25,6 +25,7 @@ type DialogDom = {
avatarEl: AvatarElement,
captionDiv: HTMLDivElement,
titleSpan: HTMLSpanElement,
titleSpanContainer: HTMLSpanElement,
statusSpan: HTMLSpanElement,
lastTimeSpan: HTMLSpanElement,
unreadMessagesSpan: HTMLSpanElement,
@ -877,34 +878,31 @@ export class AppDialogsManager { @@ -877,34 +878,31 @@ export class AppDialogsManager {
const captionDiv = document.createElement('div');
captionDiv.classList.add('user-caption');
const titleSpanContainer = document.createElement('span');
titleSpanContainer.classList.add('user-title');
const titleSpan = document.createElement('span');
titleSpan.classList.add('user-title');
if(peerID == $rootScope.myID && meAsSaved) {
title = onlyFirstName ? 'Saved' : 'Saved Messages';
}
titleSpan.innerHTML = title;
titleSpanContainer.append(titleSpan);
//p.classList.add('')
// в других случаях иконка верификации не нужна (а первый - это главные чатлисты)
//if(!container) {
let peer: any;
const peer = appPeersManager.getPeer(peerID);
// for muted icon
titleSpan.classList.add('tgico'); // * эта строка будет актуальна только для !container, но ладно
if(peerID < 0) {
peer = appChatsManager.getChat(-peerID);
} else {
peer = appUsersManager.getUser(peerID);
}
titleSpanContainer.classList.add('tgico'); // * эта строка будет актуальна только для !container, но ладно
if(peer?.pFlags?.verified) {
titleSpan.classList.add('is-verified');
titleSpanContainer.classList.add('is-verified');
const i = document.createElement('i');
i.classList.add('verified-icon');
titleSpan.append(i);
titleSpanContainer.append(i);
}
//}
@ -957,7 +955,7 @@ export class AppDialogsManager { @@ -957,7 +955,7 @@ export class AppDialogsManager {
const rightSpan = document.createElement('span');
rightSpan.classList.add('dialog-title-details');
rightSpan.append(statusSpan, lastTimeSpan);
titleP.append(titleSpan, rightSpan);
titleP.append(titleSpanContainer, rightSpan);
const messageP = document.createElement('p');
messageP.classList.add('dialog-subtitle');
@ -969,6 +967,7 @@ export class AppDialogsManager { @@ -969,6 +967,7 @@ export class AppDialogsManager {
avatarEl,
captionDiv,
titleSpan,
titleSpanContainer,
statusSpan,
lastTimeSpan,
unreadMessagesSpan,

15
src/scss/partials/_chatlist.scss

@ -111,14 +111,12 @@ @@ -111,14 +111,12 @@
&.is-muted {
.user-title {
&:after {
flex: 0 0 auto;
content: $tgico-nosound;
color: #a3a3a3;
font-size: 1.125rem;
line-height: 27px;
vertical-align: middle;
margin-left: .125rem;
display: inline-block;
height: 29px;
display: inline;
animation: fade-in-opacity .2s ease forwards;
}
}
@ -204,6 +202,7 @@ @@ -204,6 +202,7 @@
font-size: .75rem;
padding: 1px 0px 0px 0px;
flex: 0 0 auto;
margin-left: .5rem;
}
}
@ -245,13 +244,15 @@ @@ -245,13 +244,15 @@
flex: 1 1 auto;
//padding: 1px 3.5px 1px 9px; - DO MAKETA JS3
padding: 1px 8.5px 1px 9px; // JS3
p:last-child {
margin-top: -3px;
}
}
.user-title {
max-width: 82%;
display: flex;
align-items: center;
img.emoji {
vertical-align: top;
@ -269,13 +270,13 @@ @@ -269,13 +270,13 @@
margin-top: -1.5px;
}
i.verified-icon {
.verified-icon {
flex: 0 0 auto;
content: " ";
background: url(assets/img/icon-verified.svg);
display: inline-block;
width: 20px;
height: 20px;
vertical-align: text-bottom;
margin-left: .125rem;
}
}

Loading…
Cancel
Save