diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index c5b4e29e..79ed0458 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -1244,13 +1244,17 @@ export default class ChatBubbles { const reactionElement = findUpTag(target, 'REACTION-ELEMENT') as ReactionElement; if(reactionElement) { + cancelEvent(e); + if(reactionElement.classList.contains('is-inactive')) { + return; + } + const reactionsElement = reactionElement.parentElement as ReactionsElement; const reactionCount = reactionsElement.getReactionCount(reactionElement); const message = reactionsElement.getMessage(); this.appReactionsManager.sendReaction(message, reactionCount.reaction); - cancelEvent(e); return; } diff --git a/src/components/chat/reaction.ts b/src/components/chat/reaction.ts index 9d5e8b86..7f10febe 100644 --- a/src/components/chat/reaction.ts +++ b/src/components/chat/reaction.ts @@ -70,10 +70,18 @@ export default class ReactionElement extends HTMLElement { if(!doNotRenderSticker && !hadStickerContainer) { const availableReaction = appReactionsManager.getReaction(reactionCount.reaction); callbackify(availableReaction, (availableReaction) => { + if(!availableReaction.center_icon) { + this.stickerContainer.classList.add('is-static'); + } + + if(availableReaction.pFlags.inactive) { + this.classList.add('is-inactive'); + } + const size = this.type === 'inline' ? REACTION_INLINE_SIZE : REACTION_BLOCK_SIZE; wrapSticker({ div: this.stickerContainer, - doc: availableReaction.center_icon, + doc: availableReaction.center_icon ?? availableReaction.static_icon, width: size, height: size, static: true diff --git a/src/components/sidebarRight/tabs/chatReactions.ts b/src/components/sidebarRight/tabs/chatReactions.ts index c897acfd..1c0136f5 100644 --- a/src/components/sidebarRight/tabs/chatReactions.ts +++ b/src/components/sidebarRight/tabs/chatReactions.ts @@ -4,6 +4,7 @@ * https://github.com/morethanwords/tweb/blob/master/LICENSE */ +import debounce from "../../../helpers/schedulers/debounce"; import appChatsManager from "../../../lib/appManagers/appChatsManager"; import appProfileManager from "../../../lib/appManagers/appProfileManager"; import appReactionsManager from "../../../lib/appManagers/appReactionsManager"; @@ -21,7 +22,7 @@ export default class AppChatReactionsTab extends SliderSuperTabEventable { const availableReactions = await appReactionsManager.getActiveAvailableReactions(); const chatFull = await appProfileManager.getChatFull(this.chatId); - const originalReactions = chatFull.available_reactions ?? []; + let originalReactions = chatFull.available_reactions ?? []; const enabledReactions = new Set(originalReactions); const toggleSection = new SettingSection({ @@ -53,7 +54,15 @@ export default class AppChatReactionsTab extends SliderSuperTabEventable { if(!toggleCheckboxField.checked) { toggleCheckboxField.setValueSilently(true); } - } else enabledReactions.delete(availableReaction.reaction); + } else { + enabledReactions.delete(availableReaction.reaction); + + if(!enabledReactions.size && toggleCheckboxField.checked) { + toggleCheckboxField.setValueSilently(false); + } + } + + saveReactionsDebounced(); }); const row = new Row({ @@ -76,12 +85,14 @@ export default class AppChatReactionsTab extends SliderSuperTabEventable { this.listenerSetter.add(toggleRow.checkboxField.input)('change', () => { if(!toggleCheckboxField.checked) { checkboxFields.forEach(checkboxField => checkboxField.setValueSilently(false)); + saveReactionsDebounced(); } else if(checkboxFields.every(checkboxField => !checkboxField.checked)) { checkboxFields.forEach(checkboxField => checkboxField.setValueSilently(true)); + saveReactionsDebounced(); } }); - this.eventListener.addEventListener('destroy', () => { + const saveReactions = () => { const newReactions = Array.from(enabledReactions); if([...newReactions].sort().join() === [...originalReactions].sort().join()) { return; @@ -93,7 +104,12 @@ export default class AppChatReactionsTab extends SliderSuperTabEventable { } appChatsManager.setChatAvailableReactions(this.chatId, newReactions); - }, {once: true}); + originalReactions = newReactions; + }; + + const saveReactionsDebounced = debounce(saveReactions, 3000, false, true); + + this.eventListener.addEventListener('destroy', saveReactions, {once: true}); this.scrollable.append(toggleSection.container, reactionsSection.container); } diff --git a/src/scss/partials/_reaction.scss b/src/scss/partials/_reaction.scss index 8073bf0a..12ef8492 100644 --- a/src/scss/partials/_reaction.scss +++ b/src/scss/partials/_reaction.scss @@ -44,6 +44,20 @@ opacity: 0; } } + + &:not(.is-static) { + .media-sticker { + --size: calc(var(--reaction-size) + var(--reaction-offset) * -2); + width: var(--size) !important; + height: var(--size) !important; + max-width: var(--size); + max-height: var(--size); + top: auto; + right: auto; + bottom: auto; + left: auto; + } + } } &-inline { @@ -148,16 +162,4 @@ line-height: 1.125rem; position: relative; } - - .media-sticker { - --size: calc(var(--reaction-size) + var(--reaction-offset) * -2); - width: var(--size) !important; - height: var(--size) !important; - max-width: var(--size); - max-height: var(--size); - top: auto; - right: auto; - bottom: auto; - left: auto; - } } diff --git a/src/scss/partials/popups/_reactedList.scss b/src/scss/partials/popups/_reactedList.scss index 2942e8c7..042d991d 100644 --- a/src/scss/partials/popups/_reactedList.scss +++ b/src/scss/partials/popups/_reactedList.scss @@ -37,6 +37,8 @@ // --background-color: var(--secondary-color); --background-color: var(--light-filled-primary-color); --counter-color: var(--primary-color); + flex: 1 0 auto; + justify-content: space-evenly; &.is-chosen { &:not(.backwards) {