From 47c34063fda651655558a2632724562b6a2918a5 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 17 Jul 2021 19:38:51 +0300 Subject: [PATCH] Fix unpinning dialogs Join left chat button --- src/components/chat/pinnedMessageBorder.ts | 89 +++++++++++--------- src/components/chat/topbar.ts | 25 ++++-- src/lang.ts | 1 + src/lib/appManagers/appDialogsManager.ts | 12 +-- src/lib/appManagers/appMessagesManager.ts | 13 +-- src/lib/langPack.ts | 1 - src/lib/storages/filters.ts | 8 +- src/scss/mixins/_hover.scss | 3 +- src/scss/partials/_chatPinned.scss | 94 ++++++++++++++-------- src/scss/partials/_chatTopbar.scss | 4 +- 10 files changed, 157 insertions(+), 93 deletions(-) diff --git a/src/components/chat/pinnedMessageBorder.ts b/src/components/chat/pinnedMessageBorder.ts index e8fd4211..f1890d96 100644 --- a/src/components/chat/pinnedMessageBorder.ts +++ b/src/components/chat/pinnedMessageBorder.ts @@ -1,5 +1,17 @@ // https://github.com/evgeny-nadymov/telegram-react/blob/master/src/Components/ColumnMiddle/PinnedMessageBorder.js +enum BAR_HEIGHTS { + ONE = 32, + TWO = 15, + THREE = 10, + FOUR = 8, + MORE = 8 +}; + +const GAP = 1; +const WIDTH = 2; +const BASE_CLASS = 'pinned-message-border'; + export default class PinnedMessageBorder { private border: HTMLElement; private wrapper: HTMLElement; @@ -20,13 +32,15 @@ export default class PinnedMessageBorder { const radius = 1; let d = ''; - if(count === 3) { - d = this.drawRect(0, 0, 2, barHeight, radius) - + this.drawRect(0, 11, 2, barHeight + 1, radius) - + this.drawRect(0, 23, 2, barHeight, radius); + /* if(count === 3) { + d = this.drawRect(0, 0, WIDTH, barHeight, radius) + + this.drawRect(0, barHeight + GAP, WIDTH, barHeight + 1, radius) + + this.drawRect(0, barHeight * 2 + GAP * 2 + 1, WIDTH, barHeight, radius); + } */if(count === 2) { + d = this.drawRect(0, 0, WIDTH, barHeight, radius) + this.drawRect(0, barHeight + GAP * 2, WIDTH, barHeight, radius); } else { - for(let i = 0; i < count; i++) { - d += this.drawRect(0, (barHeight + 2) * i, 2, barHeight, radius); + for(let i = 0; i < count; ++i) { + d += this.drawRect(0, (barHeight + GAP) * i, WIDTH, barHeight, radius); } } @@ -44,56 +58,56 @@ export default class PinnedMessageBorder { }; private getBarHeight = (count: number, index: number) => { - let barHeight = 32; - if(count === 1) { - barHeight = 32; + let barHeight: number; + if(count <= 1) { + barHeight = BAR_HEIGHTS.ONE; } else if(count === 2) { - barHeight = 15; + barHeight = BAR_HEIGHTS.TWO; } else if(count === 3) { - barHeight = 9; + barHeight = BAR_HEIGHTS.THREE; } else if(count === 4) { - barHeight = 7; + barHeight = BAR_HEIGHTS.FOUR; } else if(count > 3) { - barHeight = 7; + barHeight = BAR_HEIGHTS.MORE; } return barHeight; }; private getMarkHeight = (count: number, index: number) => { - let barHeight = 32; - if(count === 1) { - barHeight = 32; + let markHeight: number; + if(count <= 1) { + markHeight = BAR_HEIGHTS.ONE; } else if(count === 2) { - barHeight = 15; + markHeight = BAR_HEIGHTS.TWO; } else if(count === 3) { - barHeight = index === 1 ? 10 : 9; + markHeight = BAR_HEIGHTS.THREE; } else if(count === 4) { - barHeight = 7; + markHeight = BAR_HEIGHTS.FOUR; } else if(count > 3) { - barHeight = 7; + markHeight = BAR_HEIGHTS.MORE; } - return barHeight; + return markHeight; }; private getMarkTranslateY = (index: number, barHeight: number, count: number) => { if(count === 1) { return 0; } else if(count === 2) { - return index === 0 ? 0 : barHeight + 2; + return !index ? 0 : barHeight + GAP; } if(count === 3) { - if(index === 0) { + if(!index) { return 0; - } else if (index === 1) { - return 11; + } else if(index === 1) { + return barHeight + GAP; } - return 23; + return barHeight * 2 + GAP * 2 + 1; } else { - return (barHeight + 2) * index; + return (barHeight + GAP) * index; } }; @@ -104,21 +118,22 @@ export default class PinnedMessageBorder { if(index <= 1) { return 0; - } else if(index >= count - 2) { - return trackHeight - 32; + } else if(index >= (count - 2)) { + return trackHeight - BAR_HEIGHTS.ONE - barHeight; } - return (barHeight + 4) / 2 + (index - 2) * (barHeight + 2); + // return (index + 1) * barHeight + index * GAP; + return (barHeight + GAP * 2) / 2 + (index - 2) * (barHeight + GAP); }; private getTrackHeight = (count: number, barHeight: number) => { - return count <= 3 ? 32 : barHeight * count + 2 * (count - 1); + return count <= 3 ? BAR_HEIGHTS.ONE : barHeight * count + GAP * (count - 1); }; public render(count: number, index: number) { if(!this.border) { this.border = document.createElement('div'); - this.border.classList.add('pinned-message-border'); + this.border.classList.add(BASE_CLASS); this.wrapper = document.createElement('div'); this.border.append(this.wrapper); @@ -126,8 +141,8 @@ export default class PinnedMessageBorder { if(count === 1) { if(this.count !== count) { - this.wrapper.className = 'pinned-message-border-wrapper-1'; - this.border.classList.remove('pinned-message-border-mask'); + this.wrapper.className = BASE_CLASS + '-wrapper-1'; + this.border.classList.remove(BASE_CLASS + '-mask'); this.wrapper.innerHTML = this.wrapper.style.cssText = ''; } @@ -144,9 +159,9 @@ export default class PinnedMessageBorder { const markTranslateY = this.getMarkTranslateY(index, barHeight, count); const trackTranslateY = this.getTrackTranslateY(index, count, barHeight, trackHeight); - this.border.classList.toggle('pinned-message-border-mask', count > 4); + this.border.classList.toggle(BASE_CLASS + '-mask', count > 4); - this.wrapper.className = 'pinned-message-border-wrapper'; + this.wrapper.className = BASE_CLASS + '-wrapper'; this.wrapper.style.cssText = `clip-path: url(#${clipPathId}); width: 2px; height: ${trackHeight}px; transform: translateY(-${trackTranslateY}px);`; if(!this.svg) { @@ -160,7 +175,7 @@ export default class PinnedMessageBorder { this.svg.append(this.defs); this.mark = document.createElement('div'); - this.mark.classList.add('pinned-message-border-mark'); + this.mark.classList.add(BASE_CLASS + '-mark'); } if(!this.svg.parentElement) { diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index 71b6f3c4..20701ba5 100644 --- a/src/components/chat/topbar.ts +++ b/src/components/chat/topbar.ts @@ -34,6 +34,7 @@ import { cancelEvent } from "../../helpers/dom/cancelEvent"; import { attachClickEvent } from "../../helpers/dom/clickEvent"; import findUpTag from "../../helpers/dom/findUpTag"; import { toast } from "../toast"; +import replaceContent from "../../helpers/dom/replaceContent"; export default class ChatTopbar { public container: HTMLDivElement; @@ -271,8 +272,6 @@ export default class ChatTopbar { this.pinnedMessage = new ChatPinnedMessage(this, this.chat, this.appMessagesManager, this.appPeersManager); this.btnJoin = Button('btn-primary btn-color-primary chat-join hide'); - this.btnJoin.append(i18n('Chat.Subscribe')); - this.btnPinned = ButtonIcon('pinlist'); this.btnMute = ButtonIcon('mute'); @@ -292,11 +291,24 @@ export default class ChatTopbar { cancelEvent(e); blurActiveElement(); + const middleware = this.chat.bubbles.getMiddleware(); this.btnJoin.setAttribute('disabled', 'true'); - this.appChatsManager.joinChannel(-this.peerId).finally(() => { + + const chatId = -this.peerId; + let promise: Promise; + if(this.appChatsManager.isChannel(chatId)) { + promise = this.appChatsManager.joinChannel(chatId); + } else { + promise = this.appChatsManager.addChatUser(chatId, rootScope.myId); + } + + promise.finally(() => { + if(!middleware()) { + return; + } + this.btnJoin.removeAttribute('disabled'); }); - //}); }, {listenerSetter: this.listenerSetter}); this.listenerSetter.add(rootScope)('chat_update', (e) => { @@ -419,7 +431,10 @@ export default class ChatTopbar { const isBroadcast = this.appPeersManager.isBroadcast(peerId); this.btnMute && this.btnMute.classList.toggle('hide', !isBroadcast); - this.btnJoin && this.btnJoin.classList.toggle('hide', !this.appChatsManager.getChat(-peerId)?.pFlags?.left); + if(this.btnJoin) { + replaceContent(this.btnJoin, i18n(this.appChatsManager.isChannel(-peerId) ? 'Chat.Subscribe' : 'ChannelJoin')); + this.btnJoin.classList.toggle('hide', !this.appChatsManager.getChat(-peerId)?.pFlags?.left); + } this.setUtilsWidth(); const middleware = this.chat.bubbles.getMiddleware(); diff --git a/src/lang.ts b/src/lang.ts index c0ab5e14..13919ed4 100644 --- a/src/lang.ts +++ b/src/lang.ts @@ -533,6 +533,7 @@ const lang = { "OK": "OK", "PinFolderLimitReached": "Sorry, you can\'t pin any more chats to the top.", "Send": "Send", + "ChannelJoin": "JOIN", // * macos "AccountSettings.Filters": "Chat Folders", diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index 525edb54..a7090b7a 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -661,7 +661,7 @@ export class AppDialogsManager { if(this.loadDialogsPromise/* || 1 === 1 */) return this.loadDialogsPromise; - const promise = new Promise(async(resolve, reject) => { + const promise = new Promise(async(resolve) => { if(!this.chatList.childElementCount) { const container = this.chatList.parentElement; container.append(this.chatsPreloader); @@ -697,7 +697,7 @@ export class AppDialogsManager { const result = await getConversationPromise; - if(this.filterId !== filterId) { + if(this.loadDialogsPromise !== promise) { return; } @@ -747,11 +747,11 @@ export class AppDialogsManager { this.chatsPreloader.remove(); resolve(); - }); - - return this.loadDialogsPromise = promise.finally(() => { + }).finally(() => { this.loadDialogsPromise = undefined; }); + + return this.loadDialogsPromise = promise; } private generateEmptyPlaceholder(options: { @@ -788,7 +788,7 @@ export class AppDialogsManager { let placeholderContainer = (Array.from(this.chatList.parentElement.children) as HTMLElement[]).find(el => el.matches('.empty-placeholder')); const needPlaceholder = this.scroll.loadedAll.bottom && !this.chatList.childElementCount/* || true */; // this.chatList.style.display = 'none'; - + if(needPlaceholder && placeholderContainer) { return; } else if(!needPlaceholder) { diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts index 85cc5839..385cc6d1 100644 --- a/src/lib/appManagers/appMessagesManager.ts +++ b/src/lib/appManagers/appMessagesManager.ts @@ -2913,17 +2913,20 @@ export class AppMessagesManager { public toggleDialogPin(peerId: number, filterId?: number) { if(filterId > 1) { return this.filtersStorage.toggleDialogPin(peerId, filterId); - } else { - const max = filterId === 1 ? rootScope.config.pinned_infolder_count_max : rootScope.config.pinned_dialogs_count_max; - if(this.dialogsStorage.getPinnedOrders(filterId).length >= max) { - return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'}); - } } const dialog = this.getDialogOnly(peerId); if(!dialog) return Promise.reject(); const pinned = dialog.pFlags?.pinned ? undefined : true; + + if(pinned) { + const max = filterId === 1 ? rootScope.config.pinned_infolder_count_max : rootScope.config.pinned_dialogs_count_max; + if(this.dialogsStorage.getPinnedOrders(filterId).length >= max) { + return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'}); + } + } + return apiManager.invokeApi('messages.toggleDialogPin', { peer: appPeersManager.getInputDialogPeerById(peerId), pinned diff --git a/src/lib/langPack.ts b/src/lib/langPack.ts index 30641f4a..ec42f969 100644 --- a/src/lib/langPack.ts +++ b/src/lib/langPack.ts @@ -272,7 +272,6 @@ namespace I18n { } out.push(a); - console.log('p4', p4); } else if(args) { out.push(args[indexHolder.i++]); } diff --git a/src/lib/storages/filters.ts b/src/lib/storages/filters.ts index edf08680..26278e9d 100644 --- a/src/lib/storages/filters.ts +++ b/src/lib/storages/filters.ts @@ -182,12 +182,12 @@ export default class FiltersStorage { public toggleDialogPin(peerId: number, filterId: number) { const filter = this.filters[filterId]; - if(filter.pinned_peers.length >= this.rootScope.config.pinned_infolder_count_max) { - return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'}); - } - const wasPinned = filter.pinned_peers.findAndSplice(p => p === peerId); if(!wasPinned) { + if(filter.pinned_peers.length >= this.rootScope.config.pinned_infolder_count_max) { + return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'}); + } + filter.pinned_peers.unshift(peerId); } diff --git a/src/scss/mixins/_hover.scss b/src/scss/mixins/_hover.scss index f4d9d020..07764770 100644 --- a/src/scss/mixins/_hover.scss +++ b/src/scss/mixins/_hover.scss @@ -15,7 +15,8 @@ } } - html.no-touch &:hover { + html.no-touch &:hover, + html.no-touch &:active { @if $property != null { @if $use-transition { transition: .2s #{$property}; diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index 5a31dd9b..ed34c934 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -7,21 +7,23 @@ .pinned-message { &-border { position: relative; - height: 35px; - width: 2px; - padding: 1.5px 0; - //padding: 0 0 6px 6px; - //overflow: hidden; + height: 2rem; + width: .125rem; + // padding: .125rem 0; &-wrapper-1 { - height: 32px; - width: 2px; + position: relative; + top: 50%; + transform: translateY(-50%); + height: 2rem; + width: .125rem; border-radius: 1px; background: var(--primary-color); } &-mask { - mask-image: linear-gradient(to bottom, transparent 0, black 6px, black 38px, transparent 44px); + height: 2.5rem; + mask-image: linear-gradient(to bottom, transparent 0, black 4px, black 36px, transparent 40px); } &-wrapper { @@ -37,7 +39,7 @@ bottom: 0; display: block; background: var(--primary-color); - opacity: .53; + opacity: .4; } } @@ -60,10 +62,19 @@ body:not(.animation-level-0) & { &-wrapper, &-mark { will-change: transform; - transition: transform 0.25s ease-in-out; + transition: transform .25s ease-in-out; } } } + + &-content { + --height: 32px; + height: var(--height); + } + + &-media { + border-radius: .1875rem; + } } .pinned-message, .reply { @@ -86,16 +97,15 @@ } &-content { - margin-left: 8px; flex-grow: 1; flex-shrink: 1; overflow: hidden; pointer-events: none; position: relative; - height: 2rem; display: flex; flex-direction: column; justify-content: space-between; + margin-left: .5rem; } &-title { @@ -120,7 +130,6 @@ &-media { height: 2rem; width: 2rem; - border-radius: .5rem; overflow: hidden; position: absolute; left: 0; @@ -167,7 +176,7 @@ .reply { &.is-media { .reply-content { - padding-left: 2.5rem; + padding-left: 2.25rem; } } @@ -181,6 +190,14 @@ min-width: 2px; background: var(--primary-color); } + + &-content { + height: 2rem; + } + + &-media { + border-radius: .25rem; + } } .pinned-container { @@ -267,10 +284,10 @@ width: 2rem; height: 2rem; position: absolute; - transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */; + margin-left: -.25rem; - body.animation-level-0 & { - transition: none; + @include animation-level(2) { + transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */; } } @@ -285,13 +302,15 @@ } */ // * fix blink in safari, can't add translateX from nowhere... - &-title, &-subtitle { + &-title, + &-subtitle { transform: translateX(0); } &.is-media { - .pinned-message-title, .pinned-message-subtitle { - transform: translateX(2.5rem); + .pinned-message-title, + .pinned-message-subtitle { + transform: translateX(2.25rem); //overflow: hidden !important; } } @@ -301,12 +320,16 @@ //opacity: 0; } + .pinned-container-wrapper { + min-width: 16rem; + } + &:not(.is-floating) { //width: 15.5rem; - .pinned-message-content { - margin-right: 2.5rem; - } + /* .pinned-message-content { + margin-right: 2.25rem; + } */ .pinned-message-close { display: flex; @@ -316,8 +339,9 @@ &.is-floating { &.is-media { - .pinned-message-title, .pinned-message-subtitle { - width: calc(100% - 2.5rem); + .pinned-message-title, + .pinned-message-subtitle { + width: calc(100% - 2.25rem); } } @@ -329,21 +353,26 @@ } &-content { - > .pinned-message-title, > .pinned-message-subtitle { + .pinned-message-title, + .pinned-message-subtitle { position: relative; - height: 50%; + height: calc(var(--height) / 2); overflow: visible; - transition: transform var(--pm-transition); - body.animation-level-0 & { - transition: none; + @include animation-level(2) { + transition: transform var(--pm-transition); } } } + &-title { + margin-top: -.0625rem; + margin-bottom: .1875rem; + } + &-subtitle { .animated-super-row { - font-size: 14px; + font-size: .875rem; line-height: 16px; overflow: hidden; white-space: nowrap; @@ -403,7 +432,8 @@ } */ - &.hide ~ .tgico-pinlist, &:not(.is-many) ~ .tgico-pinlist { + &.hide ~ .tgico-pinlist, + &:not(.is-many) ~ .tgico-pinlist { display: none; } diff --git a/src/scss/partials/_chatTopbar.scss b/src/scss/partials/_chatTopbar.scss index 2aafb8d9..71724bc8 100644 --- a/src/scss/partials/_chatTopbar.scss +++ b/src/scss/partials/_chatTopbar.scss @@ -173,11 +173,11 @@ .chat-join { width: auto; - width: 117px; - height: 36px; + height: 2.25rem; font-weight: 400; font-size: 0.875rem; margin-right: .5rem; + padding: 0 1.375rem; // same as in new media popup &:not(.hide) + .chat-mute-button { display: none;