From 0f03be119b323609fa84b3b9699e5b6681780efa Mon Sep 17 00:00:00 2001 From: morethanwords Date: Sun, 30 Aug 2020 22:30:11 +0300 Subject: [PATCH] Added muted icon to chatlist --- src/lib/appManagers/appDialogsManager.ts | 49 +++++++++++++-------- src/lib/appManagers/appImManager.ts | 3 +- src/lib/appManagers/appMediaViewer.ts | 4 ++ src/lib/utils.ts | 54 ++++++++++++++++++++++-- src/scss/partials/_chatlist.scss | 19 ++++++++- src/scss/partials/_fonts.scss | 2 +- src/scss/partials/_ico.scss | 1 + 7 files changed, 108 insertions(+), 24 deletions(-) diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index ea0d6b11..b66298e2 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -514,6 +514,13 @@ export class AppDialogsManager { } }); + $rootScope.$on('dialog_notify_settings', e => { + const dialog = appMessagesManager.getDialogByPeerID(e.detail)[0]; + if(dialog) { + this.setUnreadMessages(dialog); // возможно это не нужно, но нужно менять is-muted + } + }); + $rootScope.$on('peer_changed', (e: CustomEvent) => { let peerID = e.detail; @@ -1039,6 +1046,10 @@ export class AppDialogsManager { return; } + const isMuted = (dialog.notify_settings?.mute_until * 1000) > Date.now(); + + dom.listEl.classList.toggle('is-muted', isMuted); + const lastMessage = appMessagesManager.getMessage(dialog.top_message); if(lastMessage._ != 'messageEmpty' && !lastMessage.deleted && lastMessage.from_id == $rootScope.myID && lastMessage.peerID != $rootScope.myID && @@ -1071,8 +1082,7 @@ export class AppDialogsManager { if(dialog.unread_count || dialog.pFlags.unread_mark) { //dom.unreadMessagesSpan.innerText = '' + (dialog.unread_count ? formatNumber(dialog.unread_count, 1) : ' '); dom.unreadMessagesSpan.innerText = '' + (dialog.unread_count || ' '); - dom.unreadMessagesSpan.classList.add((dialog.notify_settings?.mute_until * 1000) > Date.now() ? - 'unread-muted' : 'unread'); + dom.unreadMessagesSpan.classList.add(isMuted ? 'unread-muted' : 'unread'); } else if(isPinned) { dom.unreadMessagesSpan.classList.remove('unread', 'unread-muted'); dom.unreadMessagesSpan.classList.add('tgico-pinnedchat'); @@ -1152,27 +1162,32 @@ export class AppDialogsManager { let titleSpan = document.createElement('span'); titleSpan.classList.add('user-title'); - // в других случаях иконка верификации не нужна (а первый - это главные чатлисты) - if(!container) { - if(peerID < 0) { - let chat = appChatsManager.getChat(-peerID); - if(chat && chat.pFlags && chat.pFlags.verified) { - titleSpan.classList.add('is-verified'); - } - } else { - let user = appUsersManager.getUser(peerID); - if(user && user.pFlags && user.pFlags.verified) { - titleSpan.classList.add('is-verified'); - } - } - } - if(peerID == $rootScope.myID && meAsSaved) { title = onlyFirstName ? 'Saved' : 'Saved Messages'; } titleSpan.innerHTML = title; //p.classList.add('') + + // в других случаях иконка верификации не нужна (а первый - это главные чатлисты) + if(!container) { + let peer: any; + + if(peerID < 0) { + titleSpan.classList.add('tgico'); + + peer = appChatsManager.getChat(-peerID); + } else { + peer = appUsersManager.getUser(peerID); + } + + if(peer?.pFlags?.verified) { + titleSpan.classList.add('is-verified'); + const i = document.createElement('i'); + i.classList.add('verified-icon'); + titleSpan.append(i); + } + } let span = document.createElement('span'); span.classList.add('user-last-message'); diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index a47819fa..da834a41 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -2402,7 +2402,7 @@ export class AppImManager { bubble.classList.add('is-vertical-photo'); } - wrapPhoto(webpage.photo, message, preview, mediaSizes.active.webpage.width, mediaSizes.active.webpage.height, false, null, this.lazyLoadQueue, this.getMiddleware()); + wrapPhoto(webpage.photo, message, preview, mediaSizes.active.webpage.width, mediaSizes.active.webpage.height, false, isOut, this.lazyLoadQueue, this.getMiddleware()); } box.append(quote); @@ -3054,6 +3054,7 @@ export class AppImManager { let dialog = appMessagesManager.getDialogByPeerID(peerID)[0]; if(dialog) { dialog.notify_settings = notify_settings; + $rootScope.$broadcast('dialog_notify_settings', peerID); } if(peerID == this.peerID) { diff --git a/src/lib/appManagers/appMediaViewer.ts b/src/lib/appManagers/appMediaViewer.ts index 17ef8e7f..f2fbb709 100644 --- a/src/lib/appManagers/appMediaViewer.ts +++ b/src/lib/appManagers/appMediaViewer.ts @@ -296,6 +296,10 @@ export class AppMediaViewer { private async setMoverToTarget(target: HTMLElement, closing = false, fromRight = 0) { const mover = this.content.mover; + if(!target) { + target = this.content.container; + } + if(!closing) { mover.innerHTML = ''; //mover.append(this.buttons.prev, this.buttons.next); diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 1b5d2aa5..ca6f572f 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -159,10 +159,58 @@ type BroadcastKeys = 'download_progress' | 'user_update' | 'user_auth' | 'peer_c 'message_sent' | 'history_request' | 'messages_downloaded' | 'contacts_update' | 'avatar_update' | 'stickers_installed' | 'stickers_deleted' | 'chat_full_update' | 'peer_pinned_message' | 'poll_update' | 'dialogs_archived_unread' | 'audio_play' | 'audio_pause' | 'chat_update' | - 'apiUpdate' | 'stateSynchronized' | 'channel_settings' | 'webpage_updated' | 'draft_updated'; + 'apiUpdate' | 'stateSynchronized' | 'channel_settings' | 'webpage_updated' | 'draft_updated' | + 'dialog_notify_settings'; + +type BroadcastEvents = { + 'download_progress': any, + 'user_update': any, + 'user_auth': any, + 'peer_changed': any, + 'filter_delete': any, + 'filter_update': any, + 'message_edit': any, + 'dialog_draft': any, + 'messages_pending': any, + 'history_append': any, + 'history_update': any, + 'dialogs_multiupdate': any, + 'dialog_unread': any, + 'dialog_flush': any, + 'dialog_drop': any, + 'dialog_migrate': any, + 'dialog_top': any, + 'history_reply_markup': any, + 'history_multiappend': any, + 'messages_read': any, + 'history_delete': any, + 'history_forbidden': any, + 'history_reload': any, + 'message_views': any, + 'message_sent': any, + 'history_request': any, + 'messages_downloaded': any, + 'contacts_update': any, + 'avatar_update': any, + 'stickers_installed': any, + 'stickers_deleted': any, + 'chat_full_update': any, + 'peer_pinned_message': any, + 'poll_update': any, + 'dialogs_archived_unread': any, + 'audio_play': any, + 'audio_pause': any, + 'chat_update': any, + 'apiUpdate': any, + 'stateSynchronized': any, + 'channel_settings': any, + 'webpage_updated': any, + 'draft_updated': any, + 'dialog_notify_settings': number, +}; export const $rootScope = { - $broadcast: (name: BroadcastKeys, detail?: any) => { + $broadcast: (name: T, detail?: BroadcastEvents[T]) => { if(name != 'user_update') { console.debug(dT(), 'Broadcasting ' + name + ' event, with args:', detail); } @@ -170,7 +218,7 @@ export const $rootScope = { let myCustomEvent = new CustomEvent(name, {detail}); document.dispatchEvent(myCustomEvent); }, - $on: (name: BroadcastKeys, callback: (e: CustomEvent) => any) => { + $on: (name: T, callback: (e: Omit & {detail: BroadcastEvents[T]}) => any) => { // @ts-ignore document.addEventListener(name, callback); }, diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index c6ba9eb6..a76e7257 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -100,6 +100,21 @@ @include respond-to(handhelds) { padding-bottom: 0px; } + + &.is-muted { + .user-title { + &:after { + content: $tgico-nosound; + color: #707579; + font-size: 1.125rem; + line-height: 27px; + vertical-align: middle; + margin-left: .125rem; + display: inline-block; + height: 29px; + } + } + } } li > .rp { @@ -225,14 +240,14 @@ margin-top: -1.5px; } - &.is-verified:after { + i.verified-icon { content: " "; background: url(assets/img/icon-verified.svg); display: inline-block; width: 20px; height: 20px; vertical-align: text-bottom; - margin-left: 2px; + margin-left: .125rem; } } diff --git a/src/scss/partials/_fonts.scss b/src/scss/partials/_fonts.scss index a84d0bea..65d395ff 100644 --- a/src/scss/partials/_fonts.scss +++ b/src/scss/partials/_fonts.scss @@ -261,7 +261,7 @@ content: "\e94b"; } .tgico-nosound:before { - content: "\e94c"; + content: $tgico-nosound; } .tgico-pause:before { content: $tgico-pause; diff --git a/src/scss/partials/_ico.scss b/src/scss/partials/_ico.scss index 3c275deb..2de20765 100644 --- a/src/scss/partials/_ico.scss +++ b/src/scss/partials/_ico.scss @@ -22,3 +22,4 @@ $tgico-info2: "\e934"; $tgico-keyboard: "\e935"; $tgico-play: "\e953"; $tgico-pause: "\e94d"; +$tgico-nosound: "\e94c";