diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index 4e2fa830..6395aca6 100644 --- a/src/components/chat/topbar.ts +++ b/src/components/chat/topbar.ts @@ -40,6 +40,7 @@ import replaceContent from "../../helpers/dom/replaceContent"; import { ChatFull } from "../../layer"; import PopupPickUser from "../popups/pickUser"; import PopupPeer from "../popups/peer"; +import generateVerifiedIcon from "../generateVerifiedIcon"; export default class ChatTopbar { public container: HTMLDivElement; @@ -600,8 +601,14 @@ export default class ChatTopbar { }).element; } - this.title.textContent = ''; - this.title.append(titleEl); + replaceContent(this.title, titleEl); + + if(this.chat.type === 'chat') { + const peer = this.appPeersManager.getPeer(this.peerId); + if(peer?.pFlags?.verified) { + this.title.append(generateVerifiedIcon()); + } + } } public setMutedState() { diff --git a/src/components/generateVerifiedIcon.ts b/src/components/generateVerifiedIcon.ts new file mode 100644 index 00000000..f256e7dc --- /dev/null +++ b/src/components/generateVerifiedIcon.ts @@ -0,0 +1,19 @@ +export default function generateVerifiedIcon() { + 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'); + + const use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + use.setAttributeNS(null, 'href', '#verified-background'); + use.classList.add('verified-background'); + + const use2 = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + use2.setAttributeNS(null, 'href', '#verified-check'); + use2.classList.add('verified-check'); + + svg.append(use, use2); + + return svg; +} diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts index e78e8725..b7ea6e8d 100644 --- a/src/components/sidebarRight/tabs/sharedMedia.ts +++ b/src/components/sidebarRight/tabs/sharedMedia.ts @@ -49,6 +49,7 @@ import { cancelEvent } from "../../../helpers/dom/cancelEvent"; import { attachClickEvent } from "../../../helpers/dom/clickEvent"; import replaceContent from "../../../helpers/dom/replaceContent"; import appAvatarsManager from "../../../lib/appManagers/appAvatarsManager"; +import generateVerifiedIcon from "../../generateVerifiedIcon"; let setText = (text: string, row: Row) => { //fastRaf(() => { @@ -722,9 +723,14 @@ class PeerProfile { replaceContent(this.name, new PeerTitle({ peerId, - dialog: true + dialog: true, }).element); + const peer = appPeersManager.getPeer(peerId); + if(peer?.pFlags?.verified) { + this.name.append(generateVerifiedIcon()); + } + this.setPeerStatus(true); } diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index e4fb6c44..f96198c9 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -54,6 +54,7 @@ import { MyDocument } from "./appDocsManager"; import { setSendingStatus } from "../../components/sendingStatus"; import SortedList, { SortedElementBase } from "../../helpers/sortedList"; import debounce from "../../helpers/schedulers/debounce"; +import generateVerifiedIcon from "../../components/generateVerifiedIcon"; export type DialogDom = { avatarEl: AvatarElement, @@ -1608,13 +1609,12 @@ export class AppDialogsManager { // в других случаях иконка верификации не нужна (а первый - это главные чатлисты) //if(!container) { - const peer = appPeersManager.getPeer(peerId); - + // for muted icon titleSpanContainer.classList.add('tgico'); // * эта строка будет актуальна только для !container, но ладно - + + const peer = appPeersManager.getPeer(peerId); if(peer?.pFlags?.verified) { - titleSpanContainer.classList.add('is-verified'); titleSpanContainer.append(generateVerifiedIcon()); } //} @@ -1717,26 +1717,6 @@ export class AppDialogsManager { } } -export function generateVerifiedIcon() { - 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'); - - const use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); - use.setAttributeNS(null, 'href', '#verified-background'); - use.classList.add('verified-background'); - - const use2 = document.createElementNS('http://www.w3.org/2000/svg', 'use'); - use2.setAttributeNS(null, 'href', '#verified-check'); - use2.classList.add('verified-check'); - - svg.append(use, use2); - - return svg; -} - const appDialogsManager = new AppDialogsManager(); MOUNT_CLASS_TO.appDialogsManager = appDialogsManager; export default appDialogsManager; diff --git a/src/scss/partials/_chatTopbar.scss b/src/scss/partials/_chatTopbar.scss index 71724bc8..d81f23ad 100644 --- a/src/scss/partials/_chatTopbar.scss +++ b/src/scss/partials/_chatTopbar.scss @@ -82,24 +82,18 @@ .user-title { cursor: pointer; font-size: 1rem; - line-height: 24px; + line-height: 1.5rem; max-width: calc(100% - 1.5rem); - - /* @include respond-to(handhelds) { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } */ + display: flex; + align-items: center; span.emoji { vertical-align: inherit; } } - .user-title, .info { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + .peer-title, .info { + @include text-overflow(); line-height: var(--line-height); } diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index 282fe6d0..f146d8dc 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -373,13 +373,6 @@ ul.chatlist { margin-left: .125rem; } } */ - - .verified-icon { - flex: 0 0 auto; - width: 20px; - height: 20px; - margin-left: .125rem; - } } .user-last-message { diff --git a/src/scss/partials/_profile.scss b/src/scss/partials/_profile.scss index a1fc13eb..e6e97a1b 100644 --- a/src/scss/partials/_profile.scss +++ b/src/scss/partials/_profile.scss @@ -258,26 +258,34 @@ &-name { text-align: center; - font-size: 20px; - line-height: 1.3125; + font-size: 1.25rem; + line-height: var(--line-height); font-weight: 500; - text-overflow: ellipsis; overflow: hidden; - word-break: break-word; - max-width: 340px; + max-width: 21.25rem; margin: 0 auto; color: var(--primary-text-color); + display: flex; + align-items: flex-end; span.emoji { vertical-align: inherit; min-width: min-content; } + + .peer-title { + @include text-overflow(false); + } + + .verified-icon { + margin-bottom: 3px; + } } &-subtitle { text-align: center; color: var(--secondary-text-color); - font-size: 14px; + font-size: .875rem; margin-bottom: .875rem; margin-top: 1px; diff --git a/src/scss/style.scss b/src/scss/style.scss index 1cc362cd..bb64a163 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1410,3 +1410,10 @@ middle-ellipsis-element { line-height: 1 !important; } } + +.verified-icon { + flex: 0 0 auto; + width: 1.25rem; + height: 1.25rem; + margin-left: .125rem; +}