From 70956f76866755a4080970d0da560c219d89a159 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Thu, 29 Oct 2020 18:26:08 +0200 Subject: [PATCH] Fix chrome 56 sign in, emoji layout --- .../emoticonsDropdown/tabs/emoji.ts | 7 +++ .../sidebarRight/tabs/sharedMedia.ts | 4 +- src/lib/appManagers/appChatsManager.ts | 5 +- src/lib/appManagers/appImManager.ts | 5 +- src/lib/appManagers/appMessagesManager.ts | 3 +- src/lib/appManagers/appUsersManager.ts | 4 +- src/lib/langPack.ts | 27 ++++++++ src/lib/mtproto/mtproto.service.ts | 2 + src/lib/polyfill.ts | 21 +++++++ src/lib/richtextprocessor.ts | 24 +++++++ src/lib/utils.ts | 62 ++----------------- src/pages/pageSignIn.ts | 2 +- src/scss/partials/_emojiDropdown.scss | 14 +++-- src/scss/partials/_leftSidebar.scss | 13 +++- src/scss/partials/_slider.scss | 2 + 15 files changed, 120 insertions(+), 75 deletions(-) create mode 100644 src/lib/langPack.ts diff --git a/src/components/emoticonsDropdown/tabs/emoji.ts b/src/components/emoticonsDropdown/tabs/emoji.ts index 06574271..a6f93ebc 100644 --- a/src/components/emoticonsDropdown/tabs/emoji.ts +++ b/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)), ''); const spanEmoji = document.createElement('span'); + spanEmoji.classList.add('category-item'); let kek: string; /* if(unified) { @@ -152,6 +153,12 @@ export default class EmojiTab implements EmoticonsTab { spanEmoji.innerHTML = kek; + if(spanEmoji.children.length > 1) { + const first = spanEmoji.firstElementChild; + spanEmoji.innerHTML = ''; + spanEmoji.append(first); + } + if(spanEmoji.firstElementChild) { (spanEmoji.firstElementChild as HTMLImageElement).setAttribute('loading', 'lazy'); } diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts index 5ad2b1c3..2a40d677 100644 --- a/src/components/sidebarRight/tabs/sharedMedia.ts +++ b/src/components/sidebarRight/tabs/sharedMedia.ts @@ -7,7 +7,7 @@ import appUsersManager from "../../../lib/appManagers/appUsersManager"; import { logger } from "../../../lib/logger"; import { RichTextProcessor } from "../../../lib/richtextprocessor"; import $rootScope from "../../../lib/rootScope"; -import { getAbbreviation, limitSymbols } from "../../../lib/utils"; +import { limitSymbols } from "../../../lib/utils"; import AppMediaViewer from "../../appMediaViewer"; import AvatarElement from "../../avatar"; import { horizontalMenu } from "../../horizontalMenu"; @@ -545,7 +545,7 @@ export default class AppSharedMediaTab implements SliderTab { //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'); if(webpage.photo) { let load = () => appPhotosManager.preloadPhoto(webpage.photo.id, appPhotosManager.choosePhotoSize(webpage.photo, 60, 60)) diff --git a/src/lib/appManagers/appChatsManager.ts b/src/lib/appManagers/appChatsManager.ts index 33080956..56fea42d 100644 --- a/src/lib/appManagers/appChatsManager.ts +++ b/src/lib/appManagers/appChatsManager.ts @@ -2,8 +2,7 @@ import { ChatAdminRights, ChatBannedRights, ChatFull, ChatParticipants, InputCha import apiManager from '../mtproto/mtprotoworker'; import { RichTextProcessor } from "../richtextprocessor"; import $rootScope from "../rootScope"; -import searchIndexManager from "../searchIndexManager"; -import { copy, getAbbreviation, isObject, numberWithCommas, safeReplaceObject } from "../utils"; +import { copy, isObject, numberWithCommas, safeReplaceObject } from "../utils"; import apiUpdatesManager from "./apiUpdatesManager"; import appMessagesManager from "./appMessagesManager"; import appProfileManager from "./appProfileManager"; @@ -107,7 +106,7 @@ export class AppChatsManager { const oldChat = this.chats[chat.id]; - chat.initials = getAbbreviation(chat.title); + chat.initials = RichTextProcessor.getAbbreviation(chat.title); if(chat.pFlags === undefined) { chat.pFlags = {}; diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index e226f584..bb7510c3 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -32,12 +32,13 @@ import mediaSizes from '../../helpers/mediaSizes'; import { isTouchSupported } from '../../helpers/touchSupport'; import { isAndroid, isApple, isSafari } from '../../helpers/userAgent'; import { InputNotifyPeer, InputPeerNotifySettings, NotifyPeer, Update } from '../../layer'; +import { langPack } from '../langPack'; import { logger, LogLevels } from "../logger"; import apiManager from '../mtproto/mtprotoworker'; import { MOUNT_CLASS_TO } from '../mtproto/mtproto_config'; import { RichTextProcessor } from "../richtextprocessor"; 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 appChatsManager, { Channel, Chat } from "./appChatsManager"; import appDialogsManager from "./appDialogsManager"; @@ -685,7 +686,7 @@ export class AppImManager { appSidebarRight.forwardTab.closeBtn.click(); } else */ if(this.chatSelection.isSelecting) { 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(); } else if(this.peerID != 0) { // hide current dialog this.setPeer(0); diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts index d9d2dd7a..e672d585 100644 --- a/src/lib/appManagers/appMessagesManager.ts +++ b/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 { InvokeApiOptions, Modify } from "../../types"; import { bigint, nextRandomInt } from "../bin_utils"; +import { langPack } from "../langPack"; import { logger, LogLevels } from "../logger"; import type { ApiFileManager } from '../mtproto/apiFileManager'; //import apiManager from '../mtproto/apiManager'; @@ -13,7 +14,7 @@ import { RichTextProcessor } from "../richtextprocessor"; import $rootScope from "../rootScope"; import searchIndexManager from '../searchIndexManager'; 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 apiUpdatesManager from "./apiUpdatesManager"; import appChatsManager from "./appChatsManager"; diff --git a/src/lib/appManagers/appUsersManager.ts b/src/lib/appManagers/appUsersManager.ts index e2ded4d7..a00596dc 100644 --- a/src/lib/appManagers/appUsersManager.ts +++ b/src/lib/appManagers/appUsersManager.ts @@ -6,7 +6,7 @@ import serverTimeManager from "../mtproto/serverTimeManager"; import { RichTextProcessor } from "../richtextprocessor"; import $rootScope from "../rootScope"; import searchIndexManager from "../searchIndexManager"; -import { getAbbreviation, isObject, safeReplaceObject, tsNow } from "../utils"; +import { isObject, safeReplaceObject, tsNow } from "../utils"; import appChatsManager from "./appChatsManager"; import appPeersManager from "./appPeersManager"; import appStateManager from "./appStateManager"; @@ -246,7 +246,7 @@ export class AppUsersManager { user.sortName = user.pFlags.deleted ? '' : searchIndexManager.cleanSearchText(fullName, false); - user.initials = getAbbreviation(fullName); + user.initials = RichTextProcessor.getAbbreviation(fullName); if(user.status) { if((user.status as UserStatus.userStatusOnline).expires) { diff --git a/src/lib/langPack.ts b/src/lib/langPack.ts new file mode 100644 index 00000000..5fd2d292 --- /dev/null +++ b/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", +}; \ No newline at end of file diff --git a/src/lib/mtproto/mtproto.service.ts b/src/lib/mtproto/mtproto.service.ts index b7109c48..74191651 100644 --- a/src/lib/mtproto/mtproto.service.ts +++ b/src/lib/mtproto/mtproto.service.ts @@ -223,4 +223,6 @@ function alignLimit(limit: number) { return 2 ** Math.ceil(Math.log(limit) / Math.log(2)); } +//export default () => {}; + //MOUNT_CLASS_TO && (MOUNT_CLASS_TO.onFetch = onFetch); diff --git a/src/lib/polyfill.ts b/src/lib/polyfill.ts index 67b96fb9..4136d9bc 100644 --- a/src/lib/polyfill.ts +++ b/src/lib/polyfill.ts @@ -58,6 +58,23 @@ String.prototype.toHHMMSS = function(leadZero = false) { 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(this: Promise, 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 { interface Uint8Array { hex: string; @@ -76,4 +93,8 @@ declare global { interface String { toHHMMSS(leadZero?: boolean): string; } + + interface Promise { + finally: (onfinally?: () => void) => Promise; + } } diff --git a/src/lib/richtextprocessor.ts b/src/lib/richtextprocessor.ts index 45f01d4a..33ac72fd 100644 --- a/src/lib/richtextprocessor.ts +++ b/src/lib/richtextprocessor.ts @@ -798,6 +798,30 @@ namespace RichTextProcessor { export function matchUrl(text: string) { 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); diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 7f342845..6de19153 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,5 +1,4 @@ import type { DownloadOptions } from "./mtproto/apiFileManager"; -import { RichTextProcessor } from "./richtextprocessor"; /* export function isInDOM(element: Element, parentNode?: HTMLElement): boolean { if(!element) { @@ -197,34 +196,6 @@ export function generatePathData(x: number, y: number, width: number, height: nu 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) { return typeof(object) === 'object' && object !== null; } @@ -234,30 +205,6 @@ export function tsNow(seconds?: boolean) { 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) { for(var key in wasObject) { 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) { return window.getSelection().toString(); // @ts-ignore @@ -615,7 +564,6 @@ export function getSelectedText() { // @ts-ignore return document.selection.createRange().text; } + return ''; -}​ - -//(window as any).splitStringByLength = splitStringByLength; +} \ No newline at end of file diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts index b6623056..e01b9643 100644 --- a/src/pages/pageSignIn.ts +++ b/src/pages/pageSignIn.ts @@ -280,7 +280,7 @@ let onFirstMount = () => { }); return nearestDcResult; - }).then((nearestDcResult: any) => { + }).then((nearestDcResult) => { let country = countries.find((c) => c.code == nearestDcResult.country); if(country) { if(!selectCountryCode.value.length && !telEl.value.length) { diff --git a/src/scss/partials/_emojiDropdown.scss b/src/scss/partials/_emojiDropdown.scss index 96cd1755..1d4ebcb8 100644 --- a/src/scss/partials/_emojiDropdown.scss +++ b/src/scss/partials/_emojiDropdown.scss @@ -1,5 +1,5 @@ .emoji-dropdown { - display: flex; + display: flex/* !important */; flex-direction: column; width: 100%; //height: 282px; @@ -158,18 +158,21 @@ .emoji-category { //padding-top: 1px; position: relative; + margin: 0 -.125rem; .category-items { - display: grid; + // ! No chrome 56 support + /* display: grid; grid-column-gap: 2.44px; grid-template-columns: repeat(auto-fill, 42px); - justify-content: space-between; + justify-content: space-between; */ font-size: 2.25rem; line-height: 2.25rem; - > span { - margin: 0; + .category-item { + display: inline-block; + margin: 0 1.44px; // ! magic number padding: 4px 4px; line-height: inherit; border-radius: 8px; @@ -183,6 +186,7 @@ width: 100%; height: 100%; vertical-align: unset; + margin: 0; } html.no-touch &:hover { diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index ed212c87..94600f42 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -47,6 +47,7 @@ border-bottom: 1px solid #dadce0; position: relative; box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16); + flex: 0 0 auto; .scrollable { position: relative; @@ -101,16 +102,24 @@ } } - &:not(.hide) + .scrollable { + /* &:not(.hide) + .scrollable { top: 44px; height: calc(100% - 44px); - } + } */ } #chats-container { max-height: 100%; overflow: hidden; position: relative; + + display: flex; + flex-direction: column; + + > .scrollable { + flex: 1 1 auto; + position: relative; + } } #folders-container { diff --git a/src/scss/partials/_slider.scss b/src/scss/partials/_slider.scss index baf9da89..c7c93a2a 100644 --- a/src/scss/partials/_slider.scss +++ b/src/scss/partials/_slider.scss @@ -190,6 +190,8 @@ $slider-time: .25s; // } > div { + height: 100%; + max-height: 100%; width: 100%; max-width: 100%; //transition: transform .42s, filter .42s;