From b4b0ced131ffad23eb2669c76c4888eba05b72b1 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 3 Apr 2021 23:25:43 +0400 Subject: [PATCH] Night theme improvements Await for tracking monkey load Await for QR load Language loading fixed on sign pages Close global search by escape --- src/components/appNavigationController.ts | 2 +- src/components/chat/markupTooltip.ts | 3 +- src/components/monkeys/tracking.ts | 2 +- src/components/poll.ts | 8 +- src/components/sidebarLeft/index.ts | 22 ++- src/config/app.ts | 1 + src/lang.ts | 1 + src/lib/appManagers/appStickersManager.ts | 2 +- src/lib/langPack.ts | 12 +- src/lib/lottieLoader.ts | 5 + src/pages/pageSignIn.ts | 20 ++- src/pages/pageSignQR.ts | 203 ++++++++++++---------- src/scss/components/_global.scss | 2 +- src/scss/mixins/_hover.scss | 2 +- src/scss/mixins/_textOverflow.scss | 10 ++ src/scss/partials/_audio.scss | 23 +-- src/scss/partials/_button.scss | 9 +- src/scss/partials/_chatBubble.scss | 135 ++++++++------ src/scss/partials/_chatMarkupTooltip.scss | 4 +- src/scss/partials/_chatPinned.scss | 2 +- src/scss/partials/_chatlist.scss | 6 +- src/scss/partials/_checkbox.scss | 8 +- src/scss/partials/_ckin.scss | 31 +++- src/scss/partials/_document.scss | 28 +-- src/scss/partials/_emojiDropdown.scss | 6 +- src/scss/partials/_input.scss | 9 +- src/scss/partials/_leftSidebar.scss | 32 +--- src/scss/partials/_poll.scss | 2 +- src/scss/partials/_preloader.scss | 10 +- src/scss/partials/_rightSidebar.scss | 69 +------- src/scss/partials/_selector.scss | 7 +- src/scss/partials/pages/_authCode.scss | 4 +- src/scss/partials/pages/_chats.scss | 16 -- src/scss/partials/popups/_stickers.scss | 8 +- src/scss/style.scss | 48 +++-- 35 files changed, 385 insertions(+), 367 deletions(-) create mode 100644 src/scss/mixins/_textOverflow.scss diff --git a/src/components/appNavigationController.ts b/src/components/appNavigationController.ts index d10b43aa..57b038f5 100644 --- a/src/components/appNavigationController.ts +++ b/src/components/appNavigationController.ts @@ -5,7 +5,7 @@ import { logger } from "../lib/logger"; import { doubleRaf } from "../helpers/schedulers"; export type NavigationItem = { - type: 'left' | 'right' | 'im' | 'chat' | 'popup' | 'media' | 'menu' | 'esg' | 'multiselect' | 'input-helper' | 'markup', + type: 'left' | 'right' | 'im' | 'chat' | 'popup' | 'media' | 'menu' | 'esg' | 'multiselect' | 'input-helper' | 'markup' | 'global-search', onPop: (canAnimate: boolean) => boolean | void, onEscape?: () => boolean, noHistory?: boolean, diff --git a/src/components/chat/markupTooltip.ts b/src/components/chat/markupTooltip.ts index b4b0986c..30652b22 100644 --- a/src/components/chat/markupTooltip.ts +++ b/src/components/chat/markupTooltip.ts @@ -6,6 +6,7 @@ import { clamp } from "../../helpers/number"; import { isTouchSupported } from "../../helpers/touchSupport"; import { isApple, isMobile } from "../../helpers/userAgent"; import appNavigationController from "../appNavigationController"; +import { _i18n } from "../../lib/langPack"; //import { logger } from "../../lib/logger"; export default class MarkupTooltip { @@ -64,7 +65,7 @@ export default class MarkupTooltip { this.linkBackButton = ButtonIcon('arrow_back', {noRipple: true}); this.linkInput = document.createElement('input'); - this.linkInput.placeholder = 'Enter URL...'; + _i18n(this.linkInput, 'MarkupTooltip.LinkPlaceholder', undefined, 'placeholder'); this.linkInput.classList.add('input-clear'); this.linkInput.addEventListener('keydown', (e) => { const valid = !this.linkInput.value.length || !!RichTextProcessor.matchUrl(this.linkInput.value);///^(http)|(https):\/\//i.test(this.linkInput.value); diff --git a/src/components/monkeys/tracking.ts b/src/components/monkeys/tracking.ts index bc3490de..ebd99e18 100644 --- a/src/components/monkeys/tracking.ts +++ b/src/components/monkeys/tracking.ts @@ -81,7 +81,7 @@ export default class TrackingMonkey { public load() { if(this.loadPromise) return this.loadPromise; - this.loadPromise = Promise.all([ + return this.loadPromise = Promise.all([ lottieLoader.loadAnimationFromURL({ container: this.container, loop: true, diff --git a/src/components/poll.ts b/src/components/poll.ts index b0123684..d9d96be5 100644 --- a/src/components/poll.ts +++ b/src/components/poll.ts @@ -85,12 +85,12 @@ rootScope.on('poll_update', (e) => { rootScope.on('poll_update', (e) => { const {poll, results} = e as {poll: Poll, results: PollResults}; - const pollElement = document.querySelector(`poll-element[poll-id="${poll.id}"]`) as PollElement; - //console.log('poll_update', poll, results); - if(pollElement) { + const pollElements = Array.from(document.querySelectorAll(`poll-element[poll-id="${poll.id}"]`)) as PollElement[]; + pollElements.forEach(pollElement => { + //console.log('poll_update', poll, results); pollElement.isClosed = !!poll.pFlags.closed; pollElement.performResults(results, poll.chosenIndexes); - } + }); }); rootScope.on('peer_changed', () => { diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index fb0c7d78..e845cdf1 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -25,6 +25,8 @@ import AppAddMembersTab from "./tabs/addMembers"; import { i18n_, LangPackKey } from "../../lib/langPack"; import ButtonMenu, { ButtonMenuItemOptions } from "../buttonMenu"; import CheckboxField from "../checkboxField"; +import { isMobileSafari } from "../../helpers/userAgent"; +import appNavigationController from "../appNavigationController"; export const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown'; @@ -34,15 +36,9 @@ export class AppSidebarLeft extends SidebarSlider { //private searchInput = document.getElementById('global-search') as HTMLInputElement; private inputSearch: InputSearch; - private menuEl: HTMLElement; public archivedCount: HTMLSpanElement; private newBtnMenu: HTMLElement; - private newButtons: { - channel: HTMLButtonElement, - group: HTMLButtonElement, - privateChat: HTMLButtonElement, - } = {} as any; //private log = logger('SL'); @@ -140,7 +136,6 @@ export class AppSidebarLeft extends SidebarSlider { this.toolsBtn.append(btnMenu); - this.menuEl = this.toolsBtn.querySelector('.btn-menu'); this.newBtnMenu = this.sidebarEl.querySelector('#new-menu'); const _newBtnMenu = ButtonMenu([{ @@ -242,7 +237,7 @@ export class AppSidebarLeft extends SidebarSlider { let selectedMinDate = 0; let selectedMaxDate = 0; const updatePicked = () => { - (this.inputSearch.input as HTMLInputElement).placeholder = pickedElements.length ? 'Search' : 'Telegram Search'; + //(this.inputSearch.input as HTMLInputElement).placeholder = pickedElements.length ? 'Search' : 'Telegram Search'; this.inputSearch.container.classList.toggle('is-picked-twice', pickedElements.length === 2); this.inputSearch.container.classList.toggle('is-picked', !!pickedElements.length); @@ -438,6 +433,15 @@ export class AppSidebarLeft extends SidebarSlider { this.newBtnMenu.classList.add('is-hidden'); this.toolsBtn.parentElement.firstElementChild.classList.toggle('state-back', true); + if(!isMobileSafari) { + appNavigationController.pushItem({ + onPop: () => { + close(); + }, + type: 'global-search' + }); + } + transition(1); }; @@ -449,6 +453,8 @@ export class AppSidebarLeft extends SidebarSlider { this.backBtn.classList.remove(activeClassName); this.toolsBtn.parentElement.firstElementChild.classList.toggle('state-back', false); + appNavigationController.removeByType('global-search'); + transition(0); }); diff --git a/src/config/app.ts b/src/config/app.ts index 03c6d951..d2327c4d 100644 --- a/src/config/app.ts +++ b/src/config/app.ts @@ -4,6 +4,7 @@ const App = { version: '0.4.0', langPackVersion: '0.0.5', langPack: 'macos', + langPackCode: 'en', domains: [] as string[], baseDcId: 2 }; diff --git a/src/lang.ts b/src/lang.ts index 082d6515..ae3e2f01 100644 --- a/src/lang.ts +++ b/src/lang.ts @@ -88,6 +88,7 @@ const lang = { "TwoStepAuth.InvalidPassword": "Invalid password", "TwoStepAuth.EmailCodeChangeEmail": "Change Email", "PleaseWait": "Please wait...", + "MarkupTooltip.LinkPlaceholder": "Enter URL...", // * android "ActionCreateChannel": "Channel created", diff --git a/src/lib/appManagers/appStickersManager.ts b/src/lib/appManagers/appStickersManager.ts index 412d1b49..bc1b4706 100644 --- a/src/lib/appManagers/appStickersManager.ts +++ b/src/lib/appManagers/appStickersManager.ts @@ -123,7 +123,7 @@ export class AppStickersManager { } public getStickerSetThumbDownloadOptions(stickerSet: StickerSet.stickerSet) { - const thumb = stickerSet.thumbs[0] as PhotoSize.photoSize; + const thumb = stickerSet.thumbs.find(thumb => thumb._ === 'photoSize') as PhotoSize.photoSize; const dcId = stickerSet.thumb_dc_id; const isAnimated = stickerSet.pFlags?.animated; diff --git a/src/lib/langPack.ts b/src/lib/langPack.ts index c6dfe931..39625946 100644 --- a/src/lib/langPack.ts +++ b/src/lib/langPack.ts @@ -58,11 +58,11 @@ namespace I18n { ]).then(([langPack]) => { if(!langPack/* || true */) { return loadLocalLangPack(); - } else if(DEBUG/* && false */) { + } else if(DEBUG && false) { return getLangPack(langPack.lang_code); - } else if(langPack.appVersion !== App.langPackVersion) { + }/* else if(langPack.appVersion !== App.langPackVersion) { return getLangPack(langPack.lang_code); - } + } */ if(!lastRequestedLangCode) { lastRequestedLangCode = langPack.lang_code; @@ -76,15 +76,15 @@ namespace I18n { } export function loadLocalLangPack() { - const defaultCode = 'en'; + const defaultCode = App.langPackCode; lastRequestedLangCode = defaultCode; return Promise.all([ import('../lang'), import('../langSign') ]).then(([lang, langSign]) => { const strings: LangPackString[] = []; - formatLocalStrings(lang, strings); - formatLocalStrings(langSign, strings); + formatLocalStrings(lang.default, strings); + formatLocalStrings(langSign.default, strings); const langPack: LangPackDifference = { _: 'langPackDifference', diff --git a/src/lib/lottieLoader.ts b/src/lib/lottieLoader.ts index 25d56596..1d294fb0 100644 --- a/src/lib/lottieLoader.ts +++ b/src/lib/lottieLoader.ts @@ -657,6 +657,11 @@ class LottieLoader { public waitForFirstFrame(player: RLottiePlayer): Promise { return Promise.race([ + /* new Promise((resolve) => { + player.addEventListener('firstFrame', () => { + setTimeout(() => resolve(), 1500); + }, true); + }) */ new Promise((resolve) => { player.addEventListener('firstFrame', resolve, true); }), diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts index 93e806c7..73ec8df8 100644 --- a/src/pages/pageSignIn.ts +++ b/src/pages/pageSignIn.ts @@ -17,6 +17,7 @@ import App from "../config/app"; import Modes from "../config/modes"; import I18n, { _i18n, i18n } from "../lib/langPack"; import { LangPackString } from "../layer"; +import lottieLoader from "../lib/lottieLoader"; type Country = _Country & { li?: HTMLLIElement[] @@ -240,6 +241,8 @@ let onFirstMount = () => { //console.log('input', this.value); this.classList.remove('error'); + lottieLoader.loadLottieWorkers(); + const value = this.value; const diff = Math.abs(value.length - lastValue.length); if(diff > 1 && !pasted && isAppleMobile) { @@ -351,9 +354,24 @@ let onFirstMount = () => { const btnQr = Button('btn-primary btn-secondary btn-primary-transparent primary', {text: 'Login.QR.Login'}); + let qrMounted = false; btnQr.addEventListener('click', () => { - import('./pageSignQR').then(module => { + const promise = import('./pageSignQR'); + btnQr.disabled = true; + + let preloaderDiv: HTMLElement; + if(!qrMounted) { + preloaderDiv = putPreloader(btnQr); + qrMounted = true; + } + + promise.then(module => { module.default.mount(); + + setTimeout(() => { + btnQr.removeAttribute('disabled'); + preloaderDiv.remove(); + }, 200); }); }); diff --git a/src/pages/pageSignQR.ts b/src/pages/pageSignQR.ts index e788c976..fabb62eb 100644 --- a/src/pages/pageSignQR.ts +++ b/src/pages/pageSignQR.ts @@ -56,112 +56,123 @@ let onFirstMount = async() => { let options: {dcId?: number, ignoreErrors: true} = {ignoreErrors: true}; let prevToken: Uint8Array | number[]; - return async() => { - stop = false; - - do { - if(stop) { - break; - } - - try { - let loginToken = await apiManager.invokeApi('auth.exportLoginToken', { - api_id: App.id, - api_hash: App.hash, - except_ids: [] - }, {ignoreErrors: true}); - - if(loginToken._ === 'auth.loginTokenMigrateTo') { - if(!options.dcId) { - options.dcId = loginToken.dc_id; - apiManager.setBaseDcId(loginToken.dc_id); - //continue; - } - - loginToken = await apiManager.invokeApi('auth.importLoginToken', { - token: loginToken.token - }, options) as AuthLoginToken.authLoginToken; - } + const iterate = async(isLoop: boolean) => { + try { + let loginToken = await apiManager.invokeApi('auth.exportLoginToken', { + api_id: App.id, + api_hash: App.hash, + except_ids: [] + }, {ignoreErrors: true}); - if(loginToken._ === 'auth.loginTokenSuccess') { - const authorization = loginToken.authorization as any as AuthAuthorization.authAuthorization; - apiManager.setUserAuth(authorization.user.id); - pageIm.mount(); - break; + if(loginToken._ === 'auth.loginTokenMigrateTo') { + if(!options.dcId) { + options.dcId = loginToken.dc_id; + apiManager.setBaseDcId(loginToken.dc_id); + //continue; } - - /* // to base64 - var decoder = new TextDecoder('utf8'); - var b64encoded = btoa(String.fromCharCode.apply(null, [...loginToken.token])); */ - - if(!prevToken || !bytesCmp(prevToken, loginToken.token)) { - prevToken = loginToken.token; - - let encoded = bytesToBase64(loginToken.token); - let url = "tg://login?token=" + encoded.replace(/\+/g, "-").replace(/\//g, "_").replace(/\=+$/, ""); - - const qrCode = new QRCodeStyling({ - width: 240 * window.devicePixelRatio, - height: 240 * window.devicePixelRatio, - data: url, - image: "assets/img/logo_padded.svg", - dotsOptions: { - color: "#000000", - type: "rounded" - }, - imageOptions: { - imageSize: .75 - }, - backgroundOptions: { - color: "#ffffff" - }, - qrOptions: { - errorCorrectionLevel: "L" - } - }); + + loginToken = await apiManager.invokeApi('auth.importLoginToken', { + token: loginToken.token + }, options) as AuthLoginToken.authLoginToken; + } + + if(loginToken._ === 'auth.loginTokenSuccess') { + const authorization = loginToken.authorization as any as AuthAuthorization.authAuthorization; + apiManager.setUserAuth(authorization.user.id); + pageIm.mount(); + return true; + } - qrCode.append(imageDiv); - (imageDiv.lastChild as HTMLCanvasElement).classList.add('qr-canvas'); - - let promise: Promise; - if(qrCode._drawingPromise) { - promise = qrCode._drawingPromise; - } else { - promise = Promise.race([ - pause(1000), - new Promise((resolve) => { - qrCode._canvas._image.addEventListener('load', () => { - window.requestAnimationFrame(() => resolve()); - }, {once: true}); - }) - ]); + /* // to base64 + var decoder = new TextDecoder('utf8'); + var b64encoded = btoa(String.fromCharCode.apply(null, [...loginToken.token])); */ + + if(!prevToken || !bytesCmp(prevToken, loginToken.token)) { + prevToken = loginToken.token; + + let encoded = bytesToBase64(loginToken.token); + let url = "tg://login?token=" + encoded.replace(/\+/g, "-").replace(/\//g, "_").replace(/\=+$/, ""); + + const qrCode = new QRCodeStyling({ + width: 240 * window.devicePixelRatio, + height: 240 * window.devicePixelRatio, + data: url, + image: "assets/img/logo_padded.svg", + dotsOptions: { + color: "#000000", + type: "rounded" + }, + imageOptions: { + imageSize: .75 + }, + backgroundOptions: { + color: "#ffffff" + }, + qrOptions: { + errorCorrectionLevel: "L" } + }); + + qrCode.append(imageDiv); + (imageDiv.lastChild as HTMLCanvasElement).classList.add('qr-canvas'); + + let promise: Promise; + if(qrCode._drawingPromise) { + promise = qrCode._drawingPromise; + } else { + promise = Promise.race([ + pause(1000), + new Promise((resolve) => { + qrCode._canvas._image.addEventListener('load', () => { + window.requestAnimationFrame(() => resolve()); + }, {once: true}); + }) + ]); + } - // * это костыль, но библиотека не предоставляет никаких событий - promise.then(() => { - Array.from(imageDiv.children).slice(0, -1).forEach(el => { - el.remove(); - }); + // * это костыль, но библиотека не предоставляет никаких событий + await promise.then(() => { + Array.from(imageDiv.children).slice(0, -1).forEach(el => { + el.remove(); }); - } - + }); + } + + if(isLoop) { let timestamp = Date.now() / 1000; let diff = loginToken.expires - timestamp - serverTimeManager.serverTimeOffset; await pause(diff > 5 ? 5e3 : 1e3 * diff | 0); - } catch(err) { - switch(err.type) { - case 'SESSION_PASSWORD_NEEDED': - console.warn('pageSignQR: SESSION_PASSWORD_NEEDED'); - err.handled = true; - pagePassword.mount(); - stop = true; - cachedPromise = null; - break; - default: - console.error('pageSignQR: default error:', err); - break; - } + } + } catch(err) { + switch(err.type) { + case 'SESSION_PASSWORD_NEEDED': + console.warn('pageSignQR: SESSION_PASSWORD_NEEDED'); + err.handled = true; + pagePassword.mount(); + stop = true; + cachedPromise = null; + break; + default: + console.error('pageSignQR: default error:', err); + break; + } + } + }; + + await iterate(false); + + return async() => { + stop = false; + + do { + if(stop) { + break; + } + + const needBreak = await iterate(true); + if(needBreak) { + break; } } while(true); }; diff --git a/src/scss/components/_global.scss b/src/scss/components/_global.scss index 073b1b65..fd1803a2 100644 --- a/src/scss/components/_global.scss +++ b/src/scss/components/_global.scss @@ -144,7 +144,7 @@ Utility Classes } .pre-wrap { - white-space: pre-wrap; + white-space: pre-wrap !important; } /* .flex-grow { diff --git a/src/scss/mixins/_hover.scss b/src/scss/mixins/_hover.scss index 744014e8..17c8dcad 100644 --- a/src/scss/mixins/_hover.scss +++ b/src/scss/mixins/_hover.scss @@ -5,7 +5,7 @@ } @else if $color == blue or $color == primary { $color: var(--light-primary-color); } @else if $color == red { - $color: var(--color-red-hover); + $color: var(--light-danger-color); } } diff --git a/src/scss/mixins/_textOverflow.scss b/src/scss/mixins/_textOverflow.scss new file mode 100644 index 00000000..d104e50c --- /dev/null +++ b/src/scss/mixins/_textOverflow.scss @@ -0,0 +1,10 @@ +@mixin text-overflow($no-wrap: true) { + @if $no-wrap != false { + white-space: nowrap; + } @else { + word-break: break-word; + } + + text-overflow: ellipsis; + overflow: hidden; +} diff --git a/src/scss/partials/_audio.scss b/src/scss/partials/_audio.scss index fcdabdf4..8b777900 100644 --- a/src/scss/partials/_audio.scss +++ b/src/scss/partials/_audio.scss @@ -5,9 +5,9 @@ height: 54px; user-select: none; - @include respond-to(handhelds) { + /* @include respond-to(handhelds) { padding-left: 45px; - } + } */ &-toggle, &-download { overflow: hidden; @@ -399,7 +399,7 @@ &-title { font-size: 1rem; - color: #000; + color: var(--primary-text-color); } &-time, &-subtitle { @@ -473,23 +473,8 @@ flex: 1 1 auto; margin-left: 5px; - &__filled { - background-color: var(--primary-color); - - &:not(.progress-line__loaded) { - z-index: 1; - } - } - - &__loaded { - background-color: #cacaca; - } - &__seek { - --thumb-size: 12px; - --thumb-color: var(--primary-color); - //background-color: #e6ecf0; - background-color: rgba(193, 207, 220, .39); + --thumb-size: .75rem; } } } diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index fa9aaf73..742cf8ed 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -34,9 +34,8 @@ } &:disabled { - color: #cacaca; pointer-events: none !important; - opacity: .25; + opacity: var(--disabled-opacity); } } @@ -296,9 +295,7 @@ } &.danger { - @include hover() { - background: hover-color($color-red); - } + @include hover-background-effect(red, false); } .preloader-circular .preloader-path { @@ -318,7 +315,7 @@ &:disabled { pointer-events: none !important; - opacity: .25; + opacity: var(--disabled-opacity); } } diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 06f200e3..5e537b16 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -164,9 +164,13 @@ $bubble-margin: .25rem; left: 0; display: flex; margin: 0; + + .checkbox-box-border { + border-color: var(--message-checkbox-border-color); + } .checkbox-box-background { - background-color: #61c642; + background-color: var(--message-checkbox-color); } .checkbox-box-check { @@ -302,7 +306,7 @@ $bubble-margin: .25rem; align-items: center; display: flex; justify-content: center; - color: var(--badge-color); + color: var(--badge-text-color); border-radius: 50%; //background: rgba(0, 0, 0, .16); background: var(--message-highlightning-color); @@ -360,11 +364,11 @@ $bubble-margin: .25rem; display: none; } - &:not(.hide-name) { + /* &:not(.hide-name) { .audio { margin: 4px 0; } - } + } */ /* .goto-original { opacity: 1; @@ -614,7 +618,7 @@ $bubble-margin: .25rem; } .album-item { - background-color: rgba(0, 0, 0, .06); + background-color: var(--message-highlightning-color); max-width: 100%; cursor: pointer; position: absolute; @@ -667,6 +671,12 @@ $bubble-margin: .25rem; } } + a { + @include hover() { + text-decoration: underline; + } + } + .web { padding-top: 1px; margin: 4px 0 -5px 1px; @@ -786,7 +796,8 @@ $bubble-margin: .25rem; .reply { padding: 10px; border-radius: 12px; - border: 1px solid #ccc; + background-color: var(--message-background-color); + border: 1px solid var(--border-color); max-width: 300px; height: 54px; max-height: 54px; @@ -828,6 +839,15 @@ $bubble-margin: .25rem; } } + @include respond-to(handhelds) { + .document, .audio { + &-ico, &-download { + height: 2.25rem; + width: 2.25rem; + } + } + } + .audio { padding-right: 2px; @@ -843,8 +863,8 @@ $bubble-margin: .25rem; } @include respond-to(handhelds) { - height: 42px; - padding-left: 47px; + height: 2.375rem; + padding-left: calc(2.375rem + .5625rem); .audio-details { margin-top: 2px; @@ -918,6 +938,15 @@ $bubble-margin: .25rem; @include respond-to(handhelds) { padding-left: 44px; //было 44 + height: 44px; + + .document-size { + font-size: .75rem; + } + + &:not(.document-with-thumb) .document-ico { + padding: 1.125rem 0px 0px 0px; + } } &-name { @@ -1019,24 +1048,24 @@ $bubble-margin: .25rem; .bubble-select-checkbox { left: 2rem; top: 2rem; - width: 1.5rem; - height: 1.5rem; background: #fff; border-radius: 50%; @include respond-to(handhelds) { + --size: 1.125rem; left: 20px; top: 25px; } &:before { + --inner-size: .125rem; content: " "; position: absolute; - width: 1.25rem; - height: 1.25rem; - left: .125rem; - top: .125rem; - border: 2px solid #c4c9cc; + width: calc(var(--size) - (var(--inner-size) * 2)); + height: calc(var(--size) - (var(--inner-size) * 2)); + left: var(--inner-size); + top: var(--inner-size); + border: 2px solid var(--secondary-color); border-radius: inherit; } } @@ -1084,10 +1113,14 @@ $bubble-margin: .25rem; .document { height: 54px !important; + + @include respond-to(handhelds) { + height: 38px !important; + } } .document-wrapper { - background-color: #fff; + background-color: var(--message-background-color); padding: .25rem .5rem; > .name { @@ -1424,8 +1457,8 @@ $bubble-margin: .25rem; } &-footer { - height: 51px; - border-top: 2px solid var(--border-color); + height: 50px; + border-top: 1px solid var(--border-color); position: relative; display: flex; align-items: center; @@ -1655,7 +1688,7 @@ $bubble-margin: .25rem; &.emoji-big, &.sticker { .reply { left: calc(100% + 10px); - background-color: #fff; + background-color: var(--message-background-color); @include respond-to(handhelds) { left: calc(100% + 1px); @@ -1718,6 +1751,9 @@ $bubble-margin: .25rem; .bubble.is-out { flex-direction: row-reverse; --message-background-color: var(--message-out-background-color); + --light-message-background-color: var(--light-message-out-background-color); + --dark-message-background-color: var(--dark-message-out-background-color); + --link-color: var(--message-out-link-color); .bubble-content { &, .poll-footer-button { @@ -1729,20 +1765,22 @@ $bubble-margin: .25rem; } &-wrapper { - transform: translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1)); - - @include respond-to(no-floating-left-sidebar) { - body.is-right-column-shown & { - transform: translateX(0); + @include respond-to(not-handhelds) { + transform: translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1)); - &.zoom-fade { - transform: scale3d(.8, .8, 1) translateX(0); + @include respond-to(no-floating-left-sidebar) { + body.is-right-column-shown & { + transform: translateX(0); + + &.zoom-fade { + transform: scale3d(.8, .8, 1) translateX(0); + } } } - } - - &.zoom-fade { - transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1)); + + &.zoom-fade { + transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1)); + } } } } @@ -1792,16 +1830,14 @@ $bubble-margin: .25rem; .quote { @include hover() { - background-color: rgba($color-green, .12); + background-color: var(--light-message-background-color); } } &.is-reply { &.emoji-big, &.sticker { .web, .reply { - background-color: var(--message-out-background-color); right: calc(100% + 10px); - border-color: rgba($color-green, .12); } } } @@ -1868,8 +1904,8 @@ $bubble-margin: .25rem; } */ .document-ico:after { - border-top-color: var(--message-out-background-color); - border-right-color: var(--message-out-background-color); + border-top-color: var(--message-background-color); + border-right-color: var(--message-background-color); } .audio { @@ -1970,21 +2006,18 @@ $bubble-margin: .25rem; pointer-events: none; } - .audio:not(.is-voice) { + .audio { .progress-line { - &__loaded { - background-color: #90e18d !important; - } - - &__filled { - background-color: #47aa41; - } - - &__seek { - --thumb-color: #47aa41; - background-color: rgba(124, 195, 107, .52); + --color: var(--message-out-primary-color); + + &:before, &__loaded { + background-color: var(--message-out-primary-color); } } + + .preloader-container { + --color: var(--message-background-color); + } } .bubble-beside-button { @@ -2000,14 +2033,14 @@ $bubble-margin: .25rem; &.is-multiple-documents { .document-container { .bubble-select-checkbox { - background-color: var(--message-out-background-color); + background-color: var(--message-background-color); &:before { - border-color: #9ed695; + border-color: var(--dark-message-background-color); } .checkbox-box-border { - border-color: var(--message-out-background-color); + border-color: var(--message-background-color); } } @@ -2017,7 +2050,7 @@ $bubble-margin: .25rem; } .document-wrapper { - background-color: var(--message-out-background-color); + background-color: var(--message-background-color); } } } diff --git a/src/scss/partials/_chatMarkupTooltip.scss b/src/scss/partials/_chatMarkupTooltip.scss index 59cea37c..c3883eec 100644 --- a/src/scss/partials/_chatMarkupTooltip.scss +++ b/src/scss/partials/_chatMarkupTooltip.scss @@ -3,7 +3,7 @@ $widthLink: 420px; $padding: 7px; - background: #fff; + background: var(--surface-color); border-radius: $border-radius-medium; transform: translateZ(0); opacity: 0; @@ -67,7 +67,7 @@ &-delimiter { width: 1px; height: 25px; - background-color: #DADCE0; + background-color: var(--border-color); } .btn-icon { diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index 030802f6..d1869fd5 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -450,7 +450,7 @@ } &-ico { - color: #50a2e9; + color: var(--primary-color); margin-right: .375rem; &:before { diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index b67361cc..4d959f9c 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -9,7 +9,6 @@ .search-group { width: 100%; - //border-bottom: 1px solid #DADCE0; padding: 1rem 0 .5rem; margin-bottom: 17px; @@ -31,7 +30,7 @@ } &-contacts { - border-bottom: 1px solid #dadce0; + border-bottom: 1px solid var(--border-color); @include respond-to(handhelds) { padding: 0px 0 2px; @@ -130,9 +129,10 @@ ul.chatlist { &:after { flex: 0 0 auto; content: $tgico-nosound; - color: #a3a3a3; + color: var(--secondary-text-color); font-size: 1.125rem; margin-left: .125rem; + opacity: .7; } } diff --git a/src/scss/partials/_checkbox.scss b/src/scss/partials/_checkbox.scss index 3a7a0b5b..bd54b97a 100644 --- a/src/scss/partials/_checkbox.scss +++ b/src/scss/partials/_checkbox.scss @@ -11,7 +11,7 @@ &.checkbox-disabled { pointer-events: none !important; - opacity: .25; + opacity: var(--disabled-opacity); } @include respond-to(handhelds) { @@ -127,7 +127,7 @@ } &-check { - --offset: 10px; + --offset: calc(var(--size) - (var(--size) / 2 + .125rem)); } } } @@ -250,7 +250,7 @@ &:disabled + .checkbox-box, &:disabled ~ .checkbox-caption { cursor: default; - opacity: .25; + opacity: var(--disabled-opacity); } } @@ -288,7 +288,7 @@ } .checkbox-box-background { - background-color: $color-red; + background-color: var(--danger-color); } } } diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index d5490d6e..c2d61257 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -141,7 +141,7 @@ border-radius: var(--border-radius); &__filled { - background: #63a2e3; + background: var(--primary-color); } &__loaded, & { @@ -272,6 +272,7 @@ video::-webkit-media-controls-enclosure { } .progress-line { + --color: var(--primary-color); --height: 5px; --border-radius: 6px; border-radius: var(--border-radius); @@ -279,9 +280,19 @@ video::-webkit-media-controls-enclosure { position: relative; cursor: pointer; + &:before { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + display: block; + content: " "; + border-radius: inherit; + } + &__seek { --thumb-size: 13px; - --thumb-color: var(--primary-color); -webkit-appearance: none; -moz-appearance: none; background: transparent; @@ -315,7 +326,7 @@ video::-webkit-media-controls-enclosure { height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; - background-color: var(--thumb-color); + background-color: var(--color); cursor: pointer; -webkit-appearance: none; border: none; @@ -326,7 +337,7 @@ video::-webkit-media-controls-enclosure { height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; - background-color: var(--thumb-color); + background-color: var(--color); cursor: pointer; -webkit-appearance: none; border: none; @@ -337,7 +348,7 @@ video::-webkit-media-controls-enclosure { height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; - background-color: var(--thumb-color); + background-color: var(--color); cursor: pointer; -webkit-appearance: none; border: none; @@ -357,6 +368,16 @@ video::-webkit-media-controls-enclosure { &__filled { padding-right: 1px; // * need because there is border-radius max-width: 100%; + + &:not(.progress-line__loaded) { + background-color: var(--color); + z-index: 1; + } + } + + &__loaded, &:before { + opacity: .3; + background-color: var(--secondary-color); } &__seek, &__filled, &__loaded { diff --git a/src/scss/partials/_document.scss b/src/scss/partials/_document.scss index e22504cd..9e027a85 100644 --- a/src/scss/partials/_document.scss +++ b/src/scss/partials/_document.scss @@ -14,24 +14,31 @@ padding: 1.5625rem .25rem 0 .25rem; @include respond-to(handhelds) { - padding: 14px 0px 0px 0px; + padding: 1.5rem 0px 0px 0px; font-size: 14px; + + &:after { + --size: .875rem; + } } } &:after { + --size: 1.125rem; content: ""; display: block; position: absolute; top: 0; right: 0; - width: 1.125rem; - height: 1.125rem; + width: var(--size); + height: var(--size); border-bottom-left-radius: .25rem; - border-left: .5625rem solid rgba(0, 0, 0, .25); - border-bottom: .5625rem solid rgba(0, 0, 0, .25); - border-top: .5625rem solid #fff; - border-right: .5625rem solid #fff; + border-style: solid; + border-width: calc(var(--size) / 2); + border-left-color: rgba(0, 0, 0, .25); + border-bottom-color: rgba(0, 0, 0, .25); + border-top-color: #fff; + border-right-color: #fff; } } @@ -141,11 +148,6 @@ width: 3.375rem; height: 3.375rem; color: #fff; - - @include respond-to(handhelds) { - height: 2.25rem; - width: 2.25rem; - } } &-download { @@ -188,4 +190,4 @@ width: 100%; height: 100%; } -} \ No newline at end of file +} diff --git a/src/scss/partials/_emojiDropdown.scss b/src/scss/partials/_emojiDropdown.scss index 713897a5..84c3a255 100644 --- a/src/scss/partials/_emojiDropdown.scss +++ b/src/scss/partials/_emojiDropdown.scss @@ -11,7 +11,7 @@ @include respond-to(esg-top) { position: absolute !important; - left: 1rem; + left: $chat-padding; bottom: 85px; width: 420px !important; height: 420px; @@ -51,10 +51,6 @@ height: 100%; } - .btn-icon { - color: #8d969c; - } - .emoji-tabs { justify-content: center; diff --git a/src/scss/partials/_input.scss b/src/scss/partials/_input.scss index f14fbced..2c69c8ce 100644 --- a/src/scss/partials/_input.scss +++ b/src/scss/partials/_input.scss @@ -63,7 +63,7 @@ --padding-horizontal: 1rem; --border-width: 1px; --border-width-top: 2px; - border: var(--border-width) solid #DADCE0; + border: var(--border-width) solid var(--input-search-border-color); border-radius: $border-radius-medium; background-color: transparent; //padding: 0 1rem; @@ -118,10 +118,10 @@ } &.error { - border-color: $color-error; + border-color: var(--danger-color); & ~ label { - color: $color-error!important; + color: var(--danger-color) !important; } } @@ -208,7 +208,7 @@ input:focus, button:focus { &.error { body.animation-level-0 & { - color: $color-error!important; + color: var(--danger-color) !important; } body:not(.animation-level-0) & { @@ -312,6 +312,7 @@ input:focus, button:focus { width: 24px; height: 24px; left: .8125rem; + pointer-events: none; } > .tgico-close { diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index a19af54b..55e9fe6f 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -134,9 +134,8 @@ .selector-user { height: 30px; position: absolute!important; - left: 5px; - top: 5px; - background: #f1f3f4; + left: 6px; + top: 6px; z-index: 1; margin-left: 0; } @@ -174,8 +173,8 @@ margin-top: 7px; font-size: 14px; - &:hover { - background-color: rgba(80, 162, 233, .2); + @include hover() { + background-color: var(--light-primary-color); } &-avatar:after { @@ -726,29 +725,6 @@ } } - .checkbox [type="checkbox"] { - & + span:after { - border-radius: 50%; - height: 20px; - width: 20px; - border-color: #dadbdc; - } - - &:checked { - & + span { - &:before { - top: 5px; - left: 0px; - } - - &:after { - background-color: #4EA4F6; - border: none; - } - } - } - } - .folder-category-button { cursor: pointer; } diff --git a/src/scss/partials/_poll.scss b/src/scss/partials/_poll.scss index 30b7bc62..e4a89081 100644 --- a/src/scss/partials/_poll.scss +++ b/src/scss/partials/_poll.scss @@ -314,7 +314,7 @@ poll-element { stroke-dashoffset: 0; stroke-opacity: 1; stroke-width: 2; - stroke: #dadbdc; + stroke: var(--border-color); fill: transparent; } } diff --git a/src/scss/partials/_preloader.scss b/src/scss/partials/_preloader.scss index 397d9cea..d8fb26c6 100644 --- a/src/scss/partials/_preloader.scss +++ b/src/scss/partials/_preloader.scss @@ -55,6 +55,8 @@ $transition: .2s ease-in-out; } .preloader-container { + --color: #fff; + .you-spin-me-round { width: 100%; height: 100%; @@ -74,7 +76,7 @@ $transition: .2s ease-in-out; stroke-dashoffset: 0; stroke-linecap: round; - stroke: white; + stroke: var(--color); stroke-width: 2; } @@ -112,7 +114,7 @@ $transition: .2s ease-in-out; bottom: 0; right: 0; margin: auto; - color: #fff; + color: var(--color); width: 56%; height: 56%; transition: opacity .2s ease-in-out/* , transform .2s ease-in-out */; @@ -120,7 +122,7 @@ $transition: .2s ease-in-out; opacity: 1; path { - fill: #fff; + fill: var(--color); } @include hover() { @@ -159,7 +161,7 @@ $transition: .2s ease-in-out; width: .8125rem; height: .8125rem; border-radius: .125rem; - background-color: #fff; + background-color: var(--color); left: 50%; top: 50%; transform: translate(-50%, -50%); diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index de6dfe38..febddfd7 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -135,6 +135,10 @@ flex-direction: column; //transform: none; } + + .row-title { + word-break: break-word; + } } &-name { @@ -171,67 +175,6 @@ } } - &-row { - display: flex; - width: 100%; - flex-direction: column; - padding-left: 80px; - padding-right: 12px; - //font-size: 15px; - position: relative; - margin-top: 27px; - margin-bottom: 1px; - line-height: 1.4; - - @include respond-to(handhelds) { - padding-left: 71px; - } - - &:before { - position: absolute; - left: 24px; - /* top: 0; */ - font-size: 24px; - color: var(--secondary-text-color); - - @include respond-to(handhelds) { - left: 15px; - } - } - - p { - color: #000; - margin: 0; - font-size: 1rem; - text-overflow: ellipsis; - overflow: hidden; - word-break: break-word; - white-space: pre-wrap; - } - - &-bio { - .emoji { - width: 24px; - height: 24px; - } - } - - &-label { - color: var(--secondary-text-color) !important; - font-size: 14px !important; - line-height: 1.6; - - @include respond-to(handhelds) { - line-height: 1.6; - } - } - - &-notifications { - margin-top: 26px; - line-height: 1.3; - } - } - &-avatar { margin: .5rem auto 10px; display: block; @@ -244,7 +187,7 @@ } } - &-name, &-subtitle, &-row, &-avatar { + &-name, &-subtitle, &-avatar { flex: 0 0 auto; } } @@ -288,7 +231,7 @@ } .search-super-month-name { - border-top: 1px solid #dadce0; + border-top: 1px solid var(--border-color); padding: 24px 0px 0px 24px; font-weight: 500; color: var(--secondary-text-color); diff --git a/src/scss/partials/_selector.scss b/src/scss/partials/_selector.scss index af5b70e8..f282b08a 100644 --- a/src/scss/partials/_selector.scss +++ b/src/scss/partials/_selector.scss @@ -58,13 +58,16 @@ user-select: none; flex: 0 0 auto; transition: .2s opacity, .2s transform, .2s background-color; + max-width: 10rem; + + @include text-overflow(); body.animation-level-0 & { transition: none; } @include hover() { - background-color: #fae2e3; + background-color: var(--light-danger-color); cursor: pointer; .selector-user-avatar:after { @@ -99,7 +102,7 @@ content: $tgico-close; left: 0; top: 0; - background-color: $color-error; + background-color: var(--danger-color); height: 100%; width: 100%; z-index: 2; diff --git a/src/scss/partials/pages/_authCode.scss b/src/scss/partials/pages/_authCode.scss index 7b91257c..ec2d5945 100644 --- a/src/scss/partials/pages/_authCode.scss +++ b/src/scss/partials/pages/_authCode.scss @@ -19,11 +19,11 @@ } .phone.error { - border-color: $color-error!important; + border-color: var(--danger-color) !important; } } .subtitle { margin-top: 0; } -} \ No newline at end of file +} diff --git a/src/scss/partials/pages/_chats.scss b/src/scss/partials/pages/_chats.scss index 9acdcc83..dd757633 100644 --- a/src/scss/partials/pages/_chats.scss +++ b/src/scss/partials/pages/_chats.scss @@ -83,21 +83,6 @@ } } */ - .preloader { - width: 50px; - height: 50px; - - position: absolute; - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - - // ! do not change it to &-path - .preloader-path { - stroke: var(--primary-color); - } - } - #search-container, .sidebar-search { flex-direction: column; width: 100%; @@ -108,7 +93,6 @@ left: 0; top: 0; z-index: 3; - background: #fff; } @include respond-to(large-screens) { diff --git a/src/scss/partials/popups/_stickers.scss b/src/scss/partials/popups/_stickers.scss index e9971a19..b6a01ca1 100644 --- a/src/scss/partials/popups/_stickers.scss +++ b/src/scss/partials/popups/_stickers.scss @@ -61,12 +61,8 @@ } &.is-loading { - min-height: 6rem; - } - - .preloader-circular { - width: 3rem; - height: 3rem; + min-height: 9rem; + position: relative; } } diff --git a/src/scss/style.scss b/src/scss/style.scss index f2d47023..4d19acbf 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -4,8 +4,6 @@ $border-radius-medium: 10px; $border-radius-big: 12px; $color-green: #4DCD5E; -$color-error: #df3f40; -$color-red: #df3f40; $hover-alpha: .08; //$small-screen: 720px; @@ -29,6 +27,7 @@ $chat-padding-handhelds: .5rem; @import "mixins/hover"; @import "mixins/respondTo"; +@import "mixins/textOverflow"; :root { --vh: 1vh; @@ -36,7 +35,6 @@ $chat-padding-handhelds: .5rem; --hover-alpha: #{$hover-alpha}; --color-gray: #c4c9cc; - --color-red-hover: #{hover-color($color-red)}; --pm-transition: .2s ease-in-out; --layer-transition: .2s ease-in-out; --slide-header-transition: .4s ease-in-out; @@ -53,6 +51,7 @@ $chat-padding-handhelds: .5rem; --messages-secondary-text-size: calc(var(--messages-text-size) - 1px); --line-height: 1.3125; --esg-sticker-size: 80px; + --disabled-opacity: .3; // https://github.com/overtake/TelegramSwift/blob/5cc7d2475fe4738a6aa0486c23eaf80a89d33b97/submodules/TGUIKit/TGUIKit/PresentationTheme.swift#L2054 --peer-avatar-red-top: #ff885e; @@ -130,11 +129,16 @@ $chat-padding-handhelds: .5rem; --chatlist-status-color: var(--avatar-online-color); --chatlist-pinned-color: #a2abb2; --badge-text-color: #fff; + --link-color: #00488f; --message-background-color: var(--surface-color); - --message-out-background-color: #eeffde; + --message-checkbox-color: #61c642; + --message-checkbox-border-color: #fff; + --message-secondary-color: var(--secondary-color); + + @include splitColor(message-out-background-color, #eeffde, true, true); + --message-out-link-color: var(--link-color); --message-out-primary-color: #4fae4e; - --message-out-secondary-color: #4fae4e; --message-out-audio-play-button-color: #fff; // * Day theme end @@ -165,11 +169,16 @@ html.night { --chatlist-status-color: var(--primary-color); --chatlist-pinned-color: var(--secondary-color); --badge-text-color: #fff; + --link-color: var(--primary-color); --message-background-color: var(--surface-color); - --message-out-background-color: #ae582d; + --message-checkbox-color: var(--primary-color); + --message-checkbox-border-color: #fff; + --message-secondary-color: var(--secondary-color); + + @include splitColor(message-out-background-color, #ae582d, true, true); + --message-out-link-color: #fff; --message-out-primary-color: #fff; - --message-out-secondary-color: #4fae4e; --message-out-audio-play-button-color: var(--message-out-background-color); // * Night theme end } @@ -364,7 +373,7 @@ body { } */ a { - color: var(--primary-color); + color: var(--link-color); } button, input, optgroup, select, textarea, html { @@ -435,15 +444,15 @@ input, textarea { } .danger { - color: $color-error!important; + color: var(--danger-color) !important; .c-ripple__circle { - background-color: var(--color-red-hover); + background-color: var(--light-danger-color); } } .blue, .primary { - color: var(--primary-color)!important; + color: var(--primary-color) !important; .c-ripple__circle { background-color: var(--light-primary-color); @@ -466,6 +475,21 @@ input, textarea { z-index: 4 !important; } +.preloader { + width: 50px; + height: 50px; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + // ! do not change it to &-path + .preloader-path { + stroke: var(--primary-color); + } +} + @keyframes fade-in-opacity { 0% { opacity: 0; @@ -1195,6 +1219,8 @@ middle-ellipsis-element { color: var(--primary-text-color); line-height: var(--line-height); + @include text-overflow(); + &-right { flex: 0 0 auto !important; margin-left: 1rem;