Browse Source

Fix chrome 56 sign in, emoji layout

master
morethanwords 4 years ago
parent
commit
70956f7686
  1. 7
      src/components/emoticonsDropdown/tabs/emoji.ts
  2. 4
      src/components/sidebarRight/tabs/sharedMedia.ts
  3. 5
      src/lib/appManagers/appChatsManager.ts
  4. 5
      src/lib/appManagers/appImManager.ts
  5. 3
      src/lib/appManagers/appMessagesManager.ts
  6. 4
      src/lib/appManagers/appUsersManager.ts
  7. 27
      src/lib/langPack.ts
  8. 2
      src/lib/mtproto/mtproto.service.ts
  9. 21
      src/lib/polyfill.ts
  10. 24
      src/lib/richtextprocessor.ts
  11. 62
      src/lib/utils.ts
  12. 2
      src/pages/pageSignIn.ts
  13. 14
      src/scss/partials/_emojiDropdown.scss
  14. 13
      src/scss/partials/_leftSidebar.scss
  15. 2
      src/scss/partials/_slider.scss

7
src/components/emoticonsDropdown/tabs/emoji.ts

@ -128,6 +128,7 @@ export default class EmojiTab implements EmoticonsTab {
//.reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), ''); //.reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), '');
const spanEmoji = document.createElement('span'); const spanEmoji = document.createElement('span');
spanEmoji.classList.add('category-item');
let kek: string; let kek: string;
/* if(unified) { /* if(unified) {
@ -152,6 +153,12 @@ export default class EmojiTab implements EmoticonsTab {
spanEmoji.innerHTML = kek; spanEmoji.innerHTML = kek;
if(spanEmoji.children.length > 1) {
const first = spanEmoji.firstElementChild;
spanEmoji.innerHTML = '';
spanEmoji.append(first);
}
if(spanEmoji.firstElementChild) { if(spanEmoji.firstElementChild) {
(spanEmoji.firstElementChild as HTMLImageElement).setAttribute('loading', 'lazy'); (spanEmoji.firstElementChild as HTMLImageElement).setAttribute('loading', 'lazy');
} }

4
src/components/sidebarRight/tabs/sharedMedia.ts

@ -7,7 +7,7 @@ import appUsersManager from "../../../lib/appManagers/appUsersManager";
import { logger } from "../../../lib/logger"; import { logger } from "../../../lib/logger";
import { RichTextProcessor } from "../../../lib/richtextprocessor"; import { RichTextProcessor } from "../../../lib/richtextprocessor";
import $rootScope from "../../../lib/rootScope"; import $rootScope from "../../../lib/rootScope";
import { getAbbreviation, limitSymbols } from "../../../lib/utils"; import { limitSymbols } from "../../../lib/utils";
import AppMediaViewer from "../../appMediaViewer"; import AppMediaViewer from "../../appMediaViewer";
import AvatarElement from "../../avatar"; import AvatarElement from "../../avatar";
import { horizontalMenu } from "../../horizontalMenu"; import { horizontalMenu } from "../../horizontalMenu";
@ -545,7 +545,7 @@ export default class AppSharedMediaTab implements SliderTab {
//this.log('wrapping webpage', webpage); //this.log('wrapping webpage', webpage);
previewDiv.innerHTML = getAbbreviation(webpage.title || webpage.display_url || webpage.description || webpage.url, true); previewDiv.innerHTML = RichTextProcessor.getAbbreviation(webpage.title || webpage.display_url || webpage.description || webpage.url, true);
previewDiv.classList.add('empty'); previewDiv.classList.add('empty');
if(webpage.photo) { if(webpage.photo) {
let load = () => appPhotosManager.preloadPhoto(webpage.photo.id, appPhotosManager.choosePhotoSize(webpage.photo, 60, 60)) let load = () => appPhotosManager.preloadPhoto(webpage.photo.id, appPhotosManager.choosePhotoSize(webpage.photo, 60, 60))

5
src/lib/appManagers/appChatsManager.ts

@ -2,8 +2,7 @@ import { ChatAdminRights, ChatBannedRights, ChatFull, ChatParticipants, InputCha
import apiManager from '../mtproto/mtprotoworker'; import apiManager from '../mtproto/mtprotoworker';
import { RichTextProcessor } from "../richtextprocessor"; import { RichTextProcessor } from "../richtextprocessor";
import $rootScope from "../rootScope"; import $rootScope from "../rootScope";
import searchIndexManager from "../searchIndexManager"; import { copy, isObject, numberWithCommas, safeReplaceObject } from "../utils";
import { copy, getAbbreviation, isObject, numberWithCommas, safeReplaceObject } from "../utils";
import apiUpdatesManager from "./apiUpdatesManager"; import apiUpdatesManager from "./apiUpdatesManager";
import appMessagesManager from "./appMessagesManager"; import appMessagesManager from "./appMessagesManager";
import appProfileManager from "./appProfileManager"; import appProfileManager from "./appProfileManager";
@ -107,7 +106,7 @@ export class AppChatsManager {
const oldChat = this.chats[chat.id]; const oldChat = this.chats[chat.id];
chat.initials = getAbbreviation(chat.title); chat.initials = RichTextProcessor.getAbbreviation(chat.title);
if(chat.pFlags === undefined) { if(chat.pFlags === undefined) {
chat.pFlags = {}; chat.pFlags = {};

5
src/lib/appManagers/appImManager.ts

@ -32,12 +32,13 @@ import mediaSizes from '../../helpers/mediaSizes';
import { isTouchSupported } from '../../helpers/touchSupport'; import { isTouchSupported } from '../../helpers/touchSupport';
import { isAndroid, isApple, isSafari } from '../../helpers/userAgent'; import { isAndroid, isApple, isSafari } from '../../helpers/userAgent';
import { InputNotifyPeer, InputPeerNotifySettings, NotifyPeer, Update } from '../../layer'; import { InputNotifyPeer, InputPeerNotifySettings, NotifyPeer, Update } from '../../layer';
import { langPack } from '../langPack';
import { logger, LogLevels } from "../logger"; import { logger, LogLevels } from "../logger";
import apiManager from '../mtproto/mtprotoworker'; import apiManager from '../mtproto/mtprotoworker';
import { MOUNT_CLASS_TO } from '../mtproto/mtproto_config'; import { MOUNT_CLASS_TO } from '../mtproto/mtproto_config';
import { RichTextProcessor } from "../richtextprocessor"; import { RichTextProcessor } from "../richtextprocessor";
import $rootScope from '../rootScope'; import $rootScope from '../rootScope';
import { cancelEvent, defineNotNumerableProperties, findUpClassName, findUpTag, getObjectKeysAndSort, langPack, numberWithCommas, placeCaretAtEnd, whichChild } from "../utils"; import { cancelEvent, defineNotNumerableProperties, findUpClassName, findUpTag, getObjectKeysAndSort, numberWithCommas, placeCaretAtEnd, whichChild } from "../utils";
import apiUpdatesManager from './apiUpdatesManager'; import apiUpdatesManager from './apiUpdatesManager';
import appChatsManager, { Channel, Chat } from "./appChatsManager"; import appChatsManager, { Channel, Chat } from "./appChatsManager";
import appDialogsManager from "./appDialogsManager"; import appDialogsManager from "./appDialogsManager";
@ -685,7 +686,7 @@ export class AppImManager {
appSidebarRight.forwardTab.closeBtn.click(); appSidebarRight.forwardTab.closeBtn.click();
} else */ if(this.chatSelection.isSelecting) { } else */ if(this.chatSelection.isSelecting) {
this.chatSelection.cancelSelection(); this.chatSelection.cancelSelection();
} else if(this.chatInputC.replyElements.container.classList.contains('active')) { } else if(this.columnEl.classList.contains('is-helper-active')) {
this.chatInputC.replyElements.cancelBtn.click(); this.chatInputC.replyElements.cancelBtn.click();
} else if(this.peerID != 0) { // hide current dialog } else if(this.peerID != 0) { // hide current dialog
this.setPeer(0); this.setPeer(0);

3
src/lib/appManagers/appMessagesManager.ts

@ -3,6 +3,7 @@ import { CancellablePromise, deferredPromise } from "../../helpers/cancellablePr
import { Dialog as MTDialog, DialogFilter, DialogPeer, DocumentAttribute, InputMessage, Message, MessagesDialogs, MessagesFilter, MessagesMessages, MessagesPeerDialogs, MethodDeclMap, PhotoSize, SendMessageAction, Update } from "../../layer"; import { Dialog as MTDialog, DialogFilter, DialogPeer, DocumentAttribute, InputMessage, Message, MessagesDialogs, MessagesFilter, MessagesMessages, MessagesPeerDialogs, MethodDeclMap, PhotoSize, SendMessageAction, Update } from "../../layer";
import { InvokeApiOptions, Modify } from "../../types"; import { InvokeApiOptions, Modify } from "../../types";
import { bigint, nextRandomInt } from "../bin_utils"; import { bigint, nextRandomInt } from "../bin_utils";
import { langPack } from "../langPack";
import { logger, LogLevels } from "../logger"; import { logger, LogLevels } from "../logger";
import type { ApiFileManager } from '../mtproto/apiFileManager'; import type { ApiFileManager } from '../mtproto/apiFileManager';
//import apiManager from '../mtproto/apiManager'; //import apiManager from '../mtproto/apiManager';
@ -13,7 +14,7 @@ import { RichTextProcessor } from "../richtextprocessor";
import $rootScope from "../rootScope"; import $rootScope from "../rootScope";
import searchIndexManager from '../searchIndexManager'; import searchIndexManager from '../searchIndexManager';
import AppStorage from '../storage'; import AppStorage from '../storage';
import { copy, deepEqual, defineNotNumerableProperties, getObjectKeysAndSort, langPack, limitSymbols, listMergeSorted, safeReplaceObject, splitStringByLength, tsNow } from "../utils"; import { copy, deepEqual, defineNotNumerableProperties, getObjectKeysAndSort, limitSymbols, listMergeSorted, safeReplaceObject, splitStringByLength, tsNow } from "../utils";
//import { telegramMeWebService } from "../mtproto/mtproto"; //import { telegramMeWebService } from "../mtproto/mtproto";
import apiUpdatesManager from "./apiUpdatesManager"; import apiUpdatesManager from "./apiUpdatesManager";
import appChatsManager from "./appChatsManager"; import appChatsManager from "./appChatsManager";

4
src/lib/appManagers/appUsersManager.ts

@ -6,7 +6,7 @@ import serverTimeManager from "../mtproto/serverTimeManager";
import { RichTextProcessor } from "../richtextprocessor"; import { RichTextProcessor } from "../richtextprocessor";
import $rootScope from "../rootScope"; import $rootScope from "../rootScope";
import searchIndexManager from "../searchIndexManager"; import searchIndexManager from "../searchIndexManager";
import { getAbbreviation, isObject, safeReplaceObject, tsNow } from "../utils"; import { isObject, safeReplaceObject, tsNow } from "../utils";
import appChatsManager from "./appChatsManager"; import appChatsManager from "./appChatsManager";
import appPeersManager from "./appPeersManager"; import appPeersManager from "./appPeersManager";
import appStateManager from "./appStateManager"; import appStateManager from "./appStateManager";
@ -246,7 +246,7 @@ export class AppUsersManager {
user.sortName = user.pFlags.deleted ? '' : searchIndexManager.cleanSearchText(fullName, false); user.sortName = user.pFlags.deleted ? '' : searchIndexManager.cleanSearchText(fullName, false);
user.initials = getAbbreviation(fullName); user.initials = RichTextProcessor.getAbbreviation(fullName);
if(user.status) { if(user.status) {
if((user.status as UserStatus.userStatusOnline).expires) { if((user.status as UserStatus.userStatusOnline).expires) {

27
src/lib/langPack.ts

@ -0,0 +1,27 @@
export const langPack: {[actionType: string]: string} = {
"messageActionChatCreate": "created the group",
"messageActionChatEditTitle": "changed group name",
"messageActionChatEditPhoto": "changed group photo",
"messageActionChatDeletePhoto": "removed group photo",
"messageActionChatReturn": "returned to group",
"messageActionChatJoined": "joined the group",
"messageActionChatAddUser": "invited {}",
"messageActionChatAddUsers": "invited {} users",
"messageActionChatLeave": "left the group",
"messageActionChatDeleteUser": "removed user {}",
"messageActionChatJoinedByLink": "joined the group",
"messageActionPinMessage": "pinned message",
"messageActionContactSignUp": "joined Telegram",
"messageActionChannelCreate": "Channel created",
"messageActionChannelEditTitle": "Channel renamed",
"messageActionChannelEditPhoto": "Channel photo updated",
"messageActionChannelDeletePhoto": "Channel photo removed",
"messageActionHistoryClear": "",//"History cleared",
"messageActionChannelMigrateFrom": "",
"messageActionPhoneCall.in_ok": "Incoming Call",
"messageActionPhoneCall.out_ok": "Outgoing Call",
"messageActionPhoneCall.in_missed": "Missed Call",
"messageActionPhoneCall.out_missed": "Cancelled Call",
};

2
src/lib/mtproto/mtproto.service.ts

@ -223,4 +223,6 @@ function alignLimit(limit: number) {
return 2 ** Math.ceil(Math.log(limit) / Math.log(2)); return 2 ** Math.ceil(Math.log(limit) / Math.log(2));
} }
//export default () => {};
//MOUNT_CLASS_TO && (MOUNT_CLASS_TO.onFetch = onFetch); //MOUNT_CLASS_TO && (MOUNT_CLASS_TO.onFetch = onFetch);

21
src/lib/polyfill.ts

@ -58,6 +58,23 @@ String.prototype.toHHMMSS = function(leadZero = false) {
return (hours ? /* ('0' + hours).slice(-2) */hours + ':' : '') + minutes + ':' + seconds; return (hours ? /* ('0' + hours).slice(-2) */hours + ':' : '') + minutes + ':' + seconds;
}; };
/* Promise.prototype.finally = Promise.prototype.finally || {
finally(fn: () => any) {
const onFinally = (callback: typeof fn) => Promise.resolve(fn()).then(callback);
return this.then(
result => onFinally(() => result),
reason => onFinally(() => Promise.reject(reason))
);
}
}.finally; */
Promise.prototype.finally = Promise.prototype.finally || function<T>(this: Promise<T>, fn: () => any) {
const onFinally = (callback: typeof fn) => Promise.resolve(fn()).then(callback);
return this.then(
result => onFinally(() => result),
reason => onFinally(() => Promise.reject(reason))
);
};
declare global { declare global {
interface Uint8Array { interface Uint8Array {
hex: string; hex: string;
@ -76,4 +93,8 @@ declare global {
interface String { interface String {
toHHMMSS(leadZero?: boolean): string; toHHMMSS(leadZero?: boolean): string;
} }
interface Promise<T> {
finally: (onfinally?: () => void) => Promise<T>;
}
} }

24
src/lib/richtextprocessor.ts

@ -798,6 +798,30 @@ namespace RichTextProcessor {
export function matchUrl(text: string) { export function matchUrl(text: string) {
return text.match(urlRegExp); return text.match(urlRegExp);
} }
const el = document.createElement('span');
export function getAbbreviation(str: string, onlyFirst = false) {
const wrapped = wrapEmojiText(str);
el.innerHTML = wrapped;
const childNodes = el.childNodes;
let first = '', last = '';
const firstNode = childNodes[0];
if('length' in firstNode) first = (firstNode as any).textContent.charAt(0).toUpperCase();
else first = (firstNode as HTMLElement).outerHTML;
if(onlyFirst) return first;
if(str.indexOf(' ') !== -1) {
const lastNode = childNodes[childNodes.length - 1];
if(lastNode == firstNode) last = lastNode.textContent.split(' ').pop().charAt(0).toUpperCase();
else if('length' in lastNode) last = (lastNode as any).textContent.charAt(0).toUpperCase();
else last = (lastNode as HTMLElement).outerHTML;
}
return first + last;
}
} }
MOUNT_CLASS_TO && (MOUNT_CLASS_TO.RichTextProcessor = RichTextProcessor); MOUNT_CLASS_TO && (MOUNT_CLASS_TO.RichTextProcessor = RichTextProcessor);

62
src/lib/utils.ts

@ -1,5 +1,4 @@
import type { DownloadOptions } from "./mtproto/apiFileManager"; import type { DownloadOptions } from "./mtproto/apiFileManager";
import { RichTextProcessor } from "./richtextprocessor";
/* export function isInDOM(element: Element, parentNode?: HTMLElement): boolean { /* export function isInDOM(element: Element, parentNode?: HTMLElement): boolean {
if(!element) { if(!element) {
@ -197,34 +196,6 @@ export function generatePathData(x: number, y: number, width: number, height: nu
return data.join(' '); return data.join(' ');
}; };
export const langPack: {[actionType: string]: string} = {
"messageActionChatCreate": "created the group",
"messageActionChatEditTitle": "changed group name",
"messageActionChatEditPhoto": "changed group photo",
"messageActionChatDeletePhoto": "removed group photo",
"messageActionChatReturn": "returned to group",
"messageActionChatJoined": "joined the group",
"messageActionChatAddUser": "invited {}",
"messageActionChatAddUsers": "invited {} users",
"messageActionChatLeave": "left the group",
"messageActionChatDeleteUser": "removed user {}",
"messageActionChatJoinedByLink": "joined the group",
"messageActionPinMessage": "pinned message",
"messageActionContactSignUp": "joined Telegram",
"messageActionChannelCreate": "Channel created",
"messageActionChannelEditTitle": "Channel renamed",
"messageActionChannelEditPhoto": "Channel photo updated",
"messageActionChannelDeletePhoto": "Channel photo removed",
"messageActionHistoryClear": "",//"History cleared",
"messageActionChannelMigrateFrom": "",
"messageActionPhoneCall.in_ok": "Incoming Call",
"messageActionPhoneCall.out_ok": "Outgoing Call",
"messageActionPhoneCall.in_missed": "Missed Call",
"messageActionPhoneCall.out_missed": "Cancelled Call",
};
export function isObject(object: any) { export function isObject(object: any) {
return typeof(object) === 'object' && object !== null; return typeof(object) === 'object' && object !== null;
} }
@ -234,30 +205,6 @@ export function tsNow(seconds?: boolean) {
return seconds ? Math.floor(t / 1000) : t; return seconds ? Math.floor(t / 1000) : t;
} }
const el = document.createElement('span');
export function getAbbreviation(str: string, onlyFirst = false) {
const wrapped = RichTextProcessor.wrapEmojiText(str);
el.innerHTML = wrapped;
const childNodes = el.childNodes;
let first = '', last = '';
const firstNode = childNodes[0];
if('length' in firstNode) first = (firstNode as any).textContent.charAt(0).toUpperCase();
else first = (firstNode as HTMLElement).outerHTML;
if(onlyFirst) return first;
if(str.indexOf(' ') !== -1) {
const lastNode = childNodes[childNodes.length - 1];
if(lastNode == firstNode) last = lastNode.textContent.split(' ').pop().charAt(0).toUpperCase();
else if('length' in lastNode) last = (lastNode as any).textContent.charAt(0).toUpperCase();
else last = (lastNode as HTMLElement).outerHTML;
}
return first + last;
}
export function safeReplaceObject(wasObject: any, newObject: any) { export function safeReplaceObject(wasObject: any, newObject: any) {
for(var key in wasObject) { for(var key in wasObject) {
if(!newObject.hasOwnProperty(key) && key.charAt(0) != '$') { if(!newObject.hasOwnProperty(key) && key.charAt(0) != '$') {
@ -607,7 +554,9 @@ export function cancelSelection() {
} }
} }
export function getSelectedText() { //(window as any).splitStringByLength = splitStringByLength;
export function getSelectedText(): string {
if(window.getSelection) { if(window.getSelection) {
return window.getSelection().toString(); return window.getSelection().toString();
// @ts-ignore // @ts-ignore
@ -615,7 +564,6 @@ export function getSelectedText() {
// @ts-ignore // @ts-ignore
return document.selection.createRange().text; return document.selection.createRange().text;
} }
return '';
}
//(window as any).splitStringByLength = splitStringByLength; return '';
}

2
src/pages/pageSignIn.ts

@ -280,7 +280,7 @@ let onFirstMount = () => {
}); });
return nearestDcResult; return nearestDcResult;
}).then((nearestDcResult: any) => { }).then((nearestDcResult) => {
let country = countries.find((c) => c.code == nearestDcResult.country); let country = countries.find((c) => c.code == nearestDcResult.country);
if(country) { if(country) {
if(!selectCountryCode.value.length && !telEl.value.length) { if(!selectCountryCode.value.length && !telEl.value.length) {

14
src/scss/partials/_emojiDropdown.scss

@ -1,5 +1,5 @@
.emoji-dropdown { .emoji-dropdown {
display: flex; display: flex/* !important */;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
//height: 282px; //height: 282px;
@ -158,18 +158,21 @@
.emoji-category { .emoji-category {
//padding-top: 1px; //padding-top: 1px;
position: relative; position: relative;
margin: 0 -.125rem;
.category-items { .category-items {
display: grid; // ! No chrome 56 support
/* display: grid;
grid-column-gap: 2.44px; grid-column-gap: 2.44px;
grid-template-columns: repeat(auto-fill, 42px); grid-template-columns: repeat(auto-fill, 42px);
justify-content: space-between; justify-content: space-between; */
font-size: 2.25rem; font-size: 2.25rem;
line-height: 2.25rem; line-height: 2.25rem;
> span { .category-item {
margin: 0; display: inline-block;
margin: 0 1.44px; // ! magic number
padding: 4px 4px; padding: 4px 4px;
line-height: inherit; line-height: inherit;
border-radius: 8px; border-radius: 8px;
@ -183,6 +186,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
vertical-align: unset; vertical-align: unset;
margin: 0;
} }
html.no-touch &:hover { html.no-touch &:hover {

13
src/scss/partials/_leftSidebar.scss

@ -47,6 +47,7 @@
border-bottom: 1px solid #dadce0; border-bottom: 1px solid #dadce0;
position: relative; position: relative;
box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16); box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16);
flex: 0 0 auto;
.scrollable { .scrollable {
position: relative; position: relative;
@ -101,16 +102,24 @@
} }
} }
&:not(.hide) + .scrollable { /* &:not(.hide) + .scrollable {
top: 44px; top: 44px;
height: calc(100% - 44px); height: calc(100% - 44px);
} } */
} }
#chats-container { #chats-container {
max-height: 100%; max-height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: flex;
flex-direction: column;
> .scrollable {
flex: 1 1 auto;
position: relative;
}
} }
#folders-container { #folders-container {

2
src/scss/partials/_slider.scss

@ -190,6 +190,8 @@ $slider-time: .25s;
// } // }
> div { > div {
height: 100%;
max-height: 100%;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
//transition: transform .42s, filter .42s; //transition: transform .42s, filter .42s;

Loading…
Cancel
Save