From 2660e791d115781a61429de524c8884c07ec8c80 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Fri, 16 Apr 2021 07:51:47 +0400 Subject: [PATCH] Fix firefox message input height New favicons New manifest --- server.js | 9 ++- src/components/appSearchSuper..ts | 9 ++- src/components/inputField.ts | 4 ++ src/components/passwordInputField.ts | 5 ++ src/components/popups/datePicker.ts | 3 +- src/components/sidebarLeft/tabs/background.ts | 3 +- src/helpers/color.ts | 61 ++++++++++++++++++- src/helpers/date.ts | 1 - src/index.hbs | 24 +++++--- src/lib/appManagers/appImManager.ts | 33 ++++++++-- src/lib/appManagers/appStateManager.ts | 3 +- src/scss/partials/_chat.scss | 2 +- src/scss/partials/_rightSidebar.scss | 2 +- src/scss/partials/pages/_pages.scss | 1 + 14 files changed, 132 insertions(+), 28 deletions(-) diff --git a/server.js b/server.js index 930b676f..d7084e45 100644 --- a/server.js +++ b/server.js @@ -1,14 +1,17 @@ const compression = require('compression'); const express = require('express'); const https = require('https'); +const http = require('http'); const fs = require('fs'); const app = express(); const thirdTour = process.argv[2] == 3; +const forcePort = process.argv[3]; +const useHttp = process.argv[4] === 'http'; const publicFolderName = thirdTour ? 'public3' : 'public'; -const port = thirdTour ? 8443 : 8443; +const port = forcePort ? +forcePort : (thirdTour ? 8443 : 8443); app.use(compression()); app.use(express.static(publicFolderName)); @@ -17,7 +20,9 @@ app.get('/', (req, res) => { res.sendFile(__dirname + `/${publicFolderName}/index.html`); }); -https.createServer({ +const server = useHttp ? http : https; + +server.createServer({ key: fs.readFileSync(__dirname + '/certs/server-key.pem'), cert: fs.readFileSync(__dirname + '/certs/server-cert.pem') }, app).listen(port, () => { diff --git a/src/components/appSearchSuper..ts b/src/components/appSearchSuper..ts index 1db1f639..ad27e06a 100644 --- a/src/components/appSearchSuper..ts +++ b/src/components/appSearchSuper..ts @@ -914,9 +914,14 @@ export default class AppSearchSuper { return; } - console.log('anymore', chatFull); + //console.log('anymore', chatFull); this.loaded[mediaTab.inputFilter] = true; - return renderParticipants((chatFull.participants as ChatParticipants.chatParticipants).participants); + const participants = chatFull.participants; + if(participants._ === 'chatParticipantsForbidden') { + return; + } + + return renderParticipants(participants.participants); }); } diff --git a/src/components/inputField.ts b/src/components/inputField.ts index dac1f596..7e367de3 100644 --- a/src/components/inputField.ts +++ b/src/components/inputField.ts @@ -153,6 +153,10 @@ class InputField { if(placeholder) { _i18n(input, placeholder, undefined, 'placeholder'); + + if(this.inputFake) { + _i18n(this.inputFake, placeholder, undefined, 'placeholder'); + } } if(label) { diff --git a/src/components/passwordInputField.ts b/src/components/passwordInputField.ts index d1cf2ed0..40f28cd0 100644 --- a/src/components/passwordInputField.ts +++ b/src/components/passwordInputField.ts @@ -22,6 +22,11 @@ export default class PasswordInputField extends InputField { input.type = 'password'; input.setAttribute('required', ''); input.autocomplete = 'off'; + input.readOnly = true; + + input.addEventListener('focus', () => { + input.removeAttribute('readonly'); + }, {once: true}); const toggleVisible = this.toggleVisible = document.createElement('span'); toggleVisible.classList.add('toggle-visible', 'tgico'); diff --git a/src/components/popups/datePicker.ts b/src/components/popups/datePicker.ts index a0afec5f..9505af65 100644 --- a/src/components/popups/datePicker.ts +++ b/src/components/popups/datePicker.ts @@ -248,8 +248,7 @@ export default class PopupDatePicker extends PopupElement { const timeOptions: Intl.DateTimeFormatOptions = { minute: '2-digit', - hour: '2-digit', - hour12: false + hour: '2-digit' }; const sendDate = new Date(this.selectedDate.getTime()); diff --git a/src/components/sidebarLeft/tabs/background.ts b/src/components/sidebarLeft/tabs/background.ts index 925d1b4c..c8cbe3dc 100644 --- a/src/components/sidebarLeft/tabs/background.ts +++ b/src/components/sidebarLeft/tabs/background.ts @@ -18,7 +18,6 @@ import appImManager from "../../../lib/appManagers/appImManager"; import appStateManager from "../../../lib/appManagers/appStateManager"; import apiManager from "../../../lib/mtproto/mtprotoworker"; import rootScope from "../../../lib/rootScope"; -import Button from "../../button"; import CheckboxField from "../../checkboxField"; import ProgressivePreloader from "../../preloader"; import { SliderSuperTab } from "../../slider"; @@ -92,7 +91,7 @@ export default class AppBackgroundTab extends SliderSuperTab { rootScope.settings.background.slug = slug; rootScope.settings.background.type = 'image'; rootScope.settings.background.highlightningColor = hsla; - document.documentElement.style.setProperty('--message-highlightning-color', rootScope.settings.background.highlightningColor); + appImManager.applyBackgroundColor(); appStateManager.pushToState('settings', rootScope.settings); saveToCache(slug, url); diff --git a/src/helpers/color.ts b/src/helpers/color.ts index a669c057..1d7d9c9a 100644 --- a/src/helpers/color.ts +++ b/src/helpers/color.ts @@ -36,6 +36,65 @@ export function rgbToHsl(r: number, g: number, b: number) { }); } +// * https://stackoverflow.com/a/9493060/6758968 +/** + * Converts an HSL color value to RGB. Conversion formula + * adapted from http://en.wikipedia.org/wiki/HSL_color_space. + * Assumes h, s, and l are contained in the set [0, 1] and + * returns r, g, and b in the set [0, 255]. + * + * @param {number} h The hue + * @param {number} s The saturation + * @param {number} l The lightness + * @return {Array} The RGB representation + */ +export function hslToRgba(h: number, s: number, l: number, a: number) { + let r: number, g: number, b: number; + + if(s === 0) { + r = g = b = l; // achromatic + } else { + const hue2rgb = function hue2rgb(p: number, q: number, t: number) { + if(t < 0) t += 1; + if(t > 1) t -= 1; + if(t < 1/6) return p + (q - p) * 6 * t; + if(t < 1/2) return q; + if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + } + + const q = l < 0.5 ? l * (1 + s) : l + s - l * s; + const p = 2 * l - q; + r = hue2rgb(p, q, h + 1/3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1/3); + } + + return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), Math.round(a * 255)]; +} + +export function hslaStringToRgba(hsla: string) { + const splitted = hsla.slice(5, -1).split(', '); + const alpha = +splitted.pop(); + const arr = splitted.map((val) => { + if(val.endsWith('%')) { + return +val.slice(0, -1) / 100; + } + + return +val / 360; + }); + + return hslToRgba(arr[0], arr[1], arr[2], alpha); +} + +export function hslaStringToRgbaString(hsla: string) { + return '#' + hslaStringToRgba(hsla).map(v => ('0' + v.toString(16)).slice(-2)).join(''); +} + +export function hslaStringToRgbString(hsla: string) { + return hslaStringToRgbaString(hsla).slice(0, -2); +} + // * https://github.com/TelegramMessenger/Telegram-iOS/blob/3d062fff78cc6b287c74e6171f855a3500c0156d/submodules/TelegramPresentationData/Sources/PresentationData.swift#L453 export function highlightningColor(pixel: Uint8ClampedArray) { let {h, s, l} = rgbToHsl(pixel[0], pixel[1], pixel[2]); @@ -46,4 +105,4 @@ export function highlightningColor(pixel: Uint8ClampedArray) { const hsla = `hsla(${h * 360}, ${s * 100}%, ${l * 100}%, .4)`; return hsla; -}; +} diff --git a/src/helpers/date.ts b/src/helpers/date.ts index 14666b4e..d4ac285b 100644 --- a/src/helpers/date.ts +++ b/src/helpers/date.ts @@ -48,7 +48,6 @@ export function formatDateAccordingToTodayNew(time: Date) { const options: Intl.DateTimeFormatOptions = {}; if((now - timestamp) < ONE_DAY && today.getDate() === time.getDate()) { // if the same day options.hour = options.minute = '2-digit'; - options.hour12 = false; } else if(today.getFullYear() !== time.getFullYear()) { // different year options.year = options.day = 'numeric'; options.month = '2-digit'; diff --git a/src/index.hbs b/src/index.hbs index 7f17bf2a..4972e68e 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -4,16 +4,22 @@ Telegram Web - + - - - - - - - + + + + + + + + + + + + {{# each htmlWebpackPlugin.files.css }} {{/ each }} @@ -64,7 +70,7 @@ - + diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 54907d19..e55f1c5f 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -45,7 +45,7 @@ import appNotificationsManager from './appNotificationsManager'; import AppPrivateSearchTab from '../../components/sidebarRight/tabs/search'; import { i18n } from '../langPack'; import { SendMessageAction } from '../../layer'; -import { highlightningColor } from '../../helpers/color'; +import { highlightningColor, hslaStringToRgbString } from '../../helpers/color'; import { getObjectKeysAndSort } from '../../helpers/object'; import { getFilesFromEvent } from '../../helpers/files'; @@ -79,6 +79,7 @@ export class AppImManager { private chatsSelectTabDebounced: () => void; public markupTooltip: MarkupTooltip; + private themeColorElem: Element; get myId() { return rootScope.myId; @@ -278,18 +279,38 @@ export class AppImManager { return sessionStorage.getFromCache('chatPositions')[key]; } - private setSettings = () => { - document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px'); - + public applyBackgroundColor() { + let hsla: string; if(rootScope.settings.nightTheme) { - document.documentElement.style.setProperty('--message-highlightning-color', highlightningColor(new Uint8ClampedArray([15, 15, 15, 1]))); + hsla = highlightningColor(new Uint8ClampedArray([15, 15, 15, 1])); + document.documentElement.style.setProperty('--message-highlightning-color', hsla); } else { if(rootScope.settings.background.highlightningColor) { - document.documentElement.style.setProperty('--message-highlightning-color', rootScope.settings.background.highlightningColor); + hsla = rootScope.settings.background.highlightningColor; + document.documentElement.style.setProperty('--message-highlightning-color', hsla); } else { document.documentElement.style.removeProperty('--message-highlightning-color'); } } + + let themeColor = '#ffffff'; + if(hsla) { + themeColor = hslaStringToRgbString(hsla); + } + + if(this.themeColorElem === undefined) { + this.themeColorElem = document.head.querySelector('[name="theme-color"]') as Element || null; + } + + if(this.themeColorElem) { + this.themeColorElem.setAttribute('content', themeColor); + } + } + + private setSettings = () => { + document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px'); + + this.applyBackgroundColor(); document.documentElement.classList.toggle('night', rootScope.settings.nightTheme); diff --git a/src/lib/appManagers/appStateManager.ts b/src/lib/appManagers/appStateManager.ts index d5f1e9b4..d747bc3b 100644 --- a/src/lib/appManagers/appStateManager.ts +++ b/src/lib/appManagers/appStateManager.ts @@ -118,7 +118,8 @@ export const STATE_INIT: State = { background: { type: 'image', blur: false, - slug: 'ByxGo2lrMFAIAAAAmkJxZabh8eM', // * new blurred camomile + slug: 'ByxGo2lrMFAIAAAAmkJxZabh8eM', // * new blurred camomile, + highlightningColor: 'hsla(85.5319, 36.9171%, 40.402%, 0.4)' }, notifications: { sound: false diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 61a1ce3d..efb3fedd 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -594,7 +594,7 @@ $chat-helper-size: 39px; @include respond-to(medium-screens) { @include animation-level(2) { // !WARNING, МАГИЧЕСКОЕ ЧИСЛО - margin: -16.5rem 0 -20rem 0; + margin: -18.5rem 0 -22rem 0; transform: scale(1); transform-origin: left center; transition: transform var(--transition-standard-out), opacity var(--transition-standard-out) !important; diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index 04a62d80..ccfc3d28 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -9,7 +9,7 @@ overflow: unset; @include respond-to(only-small-screens) { - box-shadow: 0 0.25rem 0.5rem 0.1rem hsla(0, 0%, 44.7%, .25); + box-shadow: 0 0.25rem 0.5rem 0.1rem rgba(0, 0, 0, .2); } @include respond-to(handhelds) { diff --git a/src/scss/partials/pages/_pages.scss b/src/scss/partials/pages/_pages.scss index 327d7a25..a32efd65 100644 --- a/src/scss/partials/pages/_pages.scss +++ b/src/scss/partials/pages/_pages.scss @@ -153,6 +153,7 @@ .sign-logo { max-width: 100%; max-height: 100%; + fill: var(--primary-color); } .page-sign, .page-signQR {