Some reaction fixes
This commit is contained in:
parent
3512ff8b80
commit
8dffe6c7e3
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user