diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index 8c34ff50..5c647d0f 100644 --- a/src/components/chat/topbar.ts +++ b/src/components/chat/topbar.ts @@ -34,14 +34,12 @@ import replaceContent from "../../helpers/dom/replaceContent"; import { ChatFull, Chat as MTChat, GroupCall } from "../../layer"; import PopupPickUser from "../popups/pickUser"; import PopupPeer from "../popups/peer"; -import { fastRaf } from "../../helpers/schedulers"; import AppEditContactTab from "../sidebarRight/tabs/editContact"; import appMediaPlaybackController from "../appMediaPlaybackController"; import IS_GROUP_CALL_SUPPORTED from "../../environment/groupCallSupport"; import IS_CALL_SUPPORTED from "../../environment/callSupport"; import { CallType } from "../../lib/calls/types"; import PopupMute from "../popups/mute"; -import generateTitleIcons from "../generateTitleIcons"; import { AppManagers } from "../../lib/appManagers/managers"; import hasRights from "../../lib/appManagers/utils/chats/hasRights"; import wrapPeerTitle from "../wrappers/peerTitle"; @@ -794,12 +792,13 @@ export default class ChatTopbar { if(count === undefined) titleEl = i18n('Loading'); else titleEl = i18n('Chat.Title.Comments', [count]); } else if(this.chat.type === 'chat') { - [titleEl, icons] = await Promise.all([ + [titleEl/* , icons */] = await Promise.all([ wrapPeerTitle({ peerId, - dialog: true + dialog: true, + withIcons: true }), - generateTitleIcons(peerId) + // generateTitleIcons(peerId) ]); if(!middleware()) { @@ -809,9 +808,9 @@ export default class ChatTopbar { return () => { replaceContent(this.title, titleEl); - if(icons) { - this.title.append(...icons); - } + // if(icons) { + // this.title.append(...icons); + // } }; } diff --git a/src/components/generatePremiumIcon.ts b/src/components/generatePremiumIcon.ts index 8b57b595..59e27ef8 100644 --- a/src/components/generatePremiumIcon.ts +++ b/src/components/generatePremiumIcon.ts @@ -1,5 +1,5 @@ export default function generatePremiumIcon() { const span = document.createElement('span'); - span.classList.add('premium-icon', 'tgico-favourites'); + span.classList.add('premium-icon', 'tgico-star'); return span; } diff --git a/src/components/generateTitleIcons.ts b/src/components/generateTitleIcons.ts index 8c5079d5..89dfa811 100644 --- a/src/components/generateTitleIcons.ts +++ b/src/components/generateTitleIcons.ts @@ -7,13 +7,13 @@ import { Chat, User } from "../layer"; import rootScope from "../lib/rootScope"; import generateFakeIcon from "./generateFakeIcon"; -// import generatePremiumIcon from "./generatePremiumIcon"; +import generatePremiumIcon from "./generatePremiumIcon"; import generateVerifiedIcon from "./generateVerifiedIcon"; export default async function generateTitleIcons(peerId: PeerId) { const elements: Element[] = []; const peer: Chat | User = await rootScope.managers.appPeersManager.getPeer(peerId); - if((peer as Chat.channel)?.pFlags?.verified) { + if((peer as Chat.channel).pFlags.verified) { elements.push(generateVerifiedIcon()); } @@ -21,9 +21,9 @@ export default async function generateTitleIcons(peerId: PeerId) { elements.push(generateFakeIcon((peer as User.user).pFlags.scam)); } - // if((peer as User.user).pFlags.premium) { - // elements.push(generatePremiumIcon()); - // } + if((peer as User.user).pFlags.premium) { + elements.push(generatePremiumIcon()); + } return elements; } diff --git a/src/components/generateVerifiedIcon.ts b/src/components/generateVerifiedIcon.ts index f256e7dc..209f9afd 100644 --- a/src/components/generateVerifiedIcon.ts +++ b/src/components/generateVerifiedIcon.ts @@ -1,19 +1,29 @@ export default function generateVerifiedIcon() { + const span = document.createElement('span'); + span.classList.add('verified-icon', 'tgico'); + + const size = 26; // 24 const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - svg.setAttributeNS(null, 'viewBox', '0 0 24 24'); - svg.setAttributeNS(null, 'width', '24'); - svg.setAttributeNS(null, 'height', '24'); - svg.classList.add('verified-icon'); + svg.setAttributeNS(null, 'viewBox', `0 0 ${size} ${size}`); + svg.setAttributeNS(null, 'width', `${size}`); + svg.setAttributeNS(null, 'height', `${size}`); + svg.classList.add('verified-icon-svg'); const use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); - use.setAttributeNS(null, 'href', '#verified-background'); - use.classList.add('verified-background'); + use.setAttributeNS(null, 'href', '#verified-icon-background'); + use.classList.add('verified-icon-background'); const use2 = document.createElementNS('http://www.w3.org/2000/svg', 'use'); - use2.setAttributeNS(null, 'href', '#verified-check'); - use2.classList.add('verified-check'); + use2.setAttributeNS(null, 'href', '#verified-icon-check'); + use2.classList.add('verified-icon-check'); + + // svg.append(use, use2); + svg.append(use2, use); - svg.append(use, use2); + span.append(svg); - return svg; + return span; + // const span = document.createElement('span'); + // span.classList.add('verified-icon', 'tgico-verified_filled'); + // return span; } diff --git a/src/components/peerProfile.ts b/src/components/peerProfile.ts index 57d9a5a0..e17f33a5 100644 --- a/src/components/peerProfile.ts +++ b/src/components/peerProfile.ts @@ -19,7 +19,6 @@ import wrapRichText from "../lib/richTextProcessor/wrapRichText"; import rootScope from "../lib/rootScope"; import AvatarElement from "./avatar"; import CheckboxField from "./checkboxField"; -import generateTitleIcons from "./generateTitleIcons"; import PeerProfileAvatars from "./peerProfileAvatars"; import Row from "./row"; import Scrollable from "./scrollable"; @@ -358,16 +357,17 @@ export default class PeerProfile { this.fillNotifications(), this.setMoreDetails(), (async() => { - const [element, icons] = await Promise.all([ + const [element/* , icons */] = await Promise.all([ wrapPeerTitle({ peerId, dialog: this.isDialog, + withIcons: true }), - generateTitleIcons(peerId) + // generateTitleIcons(peerId) ]); replaceContent(this.name, element); - this.name.append(...icons); + // this.name.append(...icons); })(), this.setPeerStatus(true) ]); diff --git a/src/components/peerTitle.ts b/src/components/peerTitle.ts index cd3c63fb..438fa62e 100644 --- a/src/components/peerTitle.ts +++ b/src/components/peerTitle.ts @@ -13,6 +13,7 @@ import setInnerHTML from "../helpers/dom/setInnerHTML"; import { AppManagers } from "../lib/appManagers/managers"; import wrapEmojiText from "../lib/richTextProcessor/wrapEmojiText"; import getPeerTitle from "./wrappers/getPeerTitle"; +import generateTitleIcons from "./generateTitleIcons"; export type PeerTitleOptions = { peerId?: PeerId, @@ -21,7 +22,8 @@ export type PeerTitleOptions = { onlyFirstName?: boolean, dialog?: boolean, limitSymbols?: number, - managers?: AppManagers + managers?: AppManagers, + withIcons?: boolean }; const weakMap: WeakMap = new WeakMap(); @@ -47,6 +49,8 @@ export default class PeerTitle { private dialog = false; private limitSymbols: number; private managers: AppManagers; + private hasInner: boolean; + private withIcons: boolean; constructor(options?: PeerTitleOptions) { this.element = document.createElement('span'); @@ -92,15 +96,35 @@ export default class PeerTitle { return; } - if(this.peerId === undefined) { - this.peerId = NULL_PEER_ID; - } + this.peerId ??= NULL_PEER_ID; + let hasInner: boolean; if(this.peerId !== rootScope.myId || !this.dialog) { const managers = this.managers ?? rootScope.managers; - setInnerHTML(this.element, await getPeerTitle(this.peerId, this.plainText, this.onlyFirstName, this.limitSymbols, managers)); + const [title, icons] = await Promise.all([ + getPeerTitle(this.peerId, this.plainText, this.onlyFirstName, this.limitSymbols, managers), + this.withIcons && generateTitleIcons(this.peerId) + ]); + + if(icons?.length) { + const inner = document.createElement('span'); + inner.classList.add('peer-title-inner'); + hasInner = true; + setInnerHTML(inner, title); + + const fragment = document.createDocumentFragment(); + fragment.append(inner, ...icons); + setInnerHTML(this.element, fragment); + } else { + setInnerHTML(this.element, title); + } } else { replaceContent(this.element, i18n(this.onlyFirstName ? 'Saved' : 'SavedMessages')); } + + if(this.hasInner !== hasInner) { + this.hasInner = hasInner; + this.element.classList.toggle('with-icons', hasInner); + } } } diff --git a/src/index.hbs b/src/index.hbs index cb77febf..751a3b17 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -95,8 +95,10 @@