Browse Source

Fix blinking chat in Firefox

Replaced description in delete messages popup
master
morethanwords 3 years ago
parent
commit
86e2682f91
  1. 5
      src/components/popups/deleteMessages.ts
  2. 8
      src/components/transition.ts
  3. 4
      src/index.ts
  4. 7
      src/lib/appManagers/appImManager.ts
  5. 4
      src/scss/partials/_chat.scss
  6. 2
      src/scss/partials/_chatBubble.scss

5
src/components/popups/deleteMessages.ts

@ -12,6 +12,7 @@ import PopupPeer, { PopupPeerButtonCallbackCheckboxes, PopupPeerOptions } from "
import { ChatType } from "../chat/chat"; import { ChatType } from "../chat/chat";
import { i18n, LangPackKey } from "../../lib/langPack"; import { i18n, LangPackKey } from "../../lib/langPack";
import PeerTitle from "../peerTitle"; import PeerTitle from "../peerTitle";
import appPeersManager from "../../lib/appManagers/appPeersManager";
export default class PopupDeleteMessages { export default class PopupDeleteMessages {
constructor(peerId: number, mids: number[], type: ChatType, onConfirm?: () => void) { constructor(peerId: number, mids: number[], type: ChatType, onConfirm?: () => void) {
@ -35,7 +36,11 @@ export default class PopupDeleteMessages {
titleArgs = [i18n('messages', [mids.length])]; titleArgs = [i18n('messages', [mids.length])];
} }
if(appPeersManager.isMegagroup(peerId)) {
description = mids.length === 1 ? 'AreYouSureDeleteSingleMessageMega' : 'AreYouSureDeleteFewMessagesMega';
} else {
description = mids.length === 1 ? 'AreYouSureDeleteSingleMessage' : 'AreYouSureDeleteFewMessages'; description = mids.length === 1 ? 'AreYouSureDeleteSingleMessage' : 'AreYouSureDeleteFewMessages';
}
buttons = [{ buttons = [{
langKey: 'Delete', langKey: 'Delete',

8
src/components/transition.ts

@ -194,6 +194,13 @@ const Transition = (
if(!animate) { if(!animate) {
if(from) from.classList.remove('active', 'to', 'from'); if(from) from.classList.remove('active', 'to', 'from');
else if(to) { // fix instant opening back from closed slider (e.g. instant closening and opening right sidebar)
const callback = onTransitionEndCallbacks.get(to);
if(callback) {
callback();
}
}
if(to) { if(to) {
to.classList.remove('to', 'from'); to.classList.remove('to', 'from');
to.classList.add('active'); to.classList.add('active');
@ -264,6 +271,7 @@ const Transition = (
const timeout = window.setTimeout(callback, transitionTime); const timeout = window.setTimeout(callback, transitionTime);
onTransitionEndCallbacks.set(_from, () => { onTransitionEndCallbacks.set(_from, () => {
clearTimeout(timeout); clearTimeout(timeout);
onTransitionEndCallbacks.delete(_from);
}); });
} }

4
src/index.ts

@ -164,6 +164,10 @@ console.timeEnd('get storage1'); */
} }
}); });
if(userAgent.isFirefox) {
document.documentElement.classList.add('is-firefox');
}
if(userAgent.isApple) { if(userAgent.isApple) {
if(userAgent.isSafari) { if(userAgent.isSafari) {
document.documentElement.classList.add('is-safari'); document.documentElement.classList.add('is-safari');

7
src/lib/appManagers/appImManager.ts

@ -1040,16 +1040,17 @@ export class AppImManager {
this.log('selectTab', id, prevTabId); this.log('selectTab', id, prevTabId);
let animationPromise: Promise<any> = doubleRaf(); let animationPromise: Promise<any> = rootScope.settings.animationsEnabled ? doubleRaf() : Promise.resolve();
if(prevTabId !== -1 && prevTabId !== id && rootScope.settings.animationsEnabled && animate !== false) { if(prevTabId !== -1 && prevTabId !== id && rootScope.settings.animationsEnabled && animate !== false) {
const transitionTime = (mediaSizes.isMobile ? 250 : 200) + 100; // * cause transition time could be > 250ms const transitionTime = (mediaSizes.isMobile ? 250 : 200) + 100; // * cause transition time could be > 250ms
animationPromise = pause(transitionTime); animationPromise = pause(transitionTime);
dispatchHeavyAnimationEvent(animationPromise, transitionTime); dispatchHeavyAnimationEvent(animationPromise, transitionTime);
this.columnEl.classList.add('disable-hover'); // ! it's very heavy operation. will blink in firefox
/* this.columnEl.classList.add('disable-hover');
animationPromise.finally(() => { animationPromise.finally(() => {
this.columnEl.classList.remove('disable-hover'); this.columnEl.classList.remove('disable-hover');
}); }); */
} }
this.tabId = id; this.tabId = id;

4
src/scss/partials/_chat.scss

@ -28,7 +28,7 @@ $chat-helper-size: 36px;
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
transition: transform var(--transition-standard-out); transition: transform var(--transition-standard-out);
transform: translateY(var(--translateY)); transform: translate3d(0, var(--translateY), 0);
/* body.is-keyboard-opened & { /* body.is-keyboard-opened & {
--bottom: var(--padding-bottom); --bottom: var(--padding-bottom);
@ -1001,7 +1001,7 @@ $chat-helper-size: 36px;
flex: 1 1 auto; flex: 1 1 auto;
position: relative; position: relative;
transform: translateY(var(--translateY)); transform: translate3d(0, var(--translateY), 0);
transition: transform var(--transition-standard-out); transition: transform var(--transition-standard-out);
@include animation-level(0) { @include animation-level(0) {

2
src/scss/partials/_chatBubble.scss

@ -2036,7 +2036,7 @@ $bubble-margin: .25rem;
color: var(--message-out-primary-color); color: var(--message-out-primary-color);
} }
&-wrapper { /* html:not(.is-firefox) */ &-wrapper {
@include respond-to(medium-screens) { @include respond-to(medium-screens) {
transform: scale(1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1)); transform: scale(1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));

Loading…
Cancel
Save