From 558c168a8ede4ca5f994a1926c29737452117950 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Fri, 7 Feb 2020 21:17:39 +0700 Subject: [PATCH] impoved search & media upload & scroll & preloaders --- src/components/misc.ts | 110 ++++++++++++++++++---- src/components/pageIm.ts | 10 +- src/lib/appManagers/appDocsManager.ts | 2 +- src/lib/appManagers/appImManager.ts | 48 +++++++++- src/lib/appManagers/appMediaViewer.ts | 10 +- src/lib/appManagers/appMessagesManager.ts | 47 +++++---- src/lib/appManagers/appSidebarLeft.ts | 2 +- src/lib/appManagers/appSidebarRight.ts | 2 +- src/lib/mtproto/apiFileManager.ts | 6 +- src/lib/services.ts | 3 + src/scss/partials/_chat.scss | 72 +++----------- src/scss/partials/_leftSidebar.scss | 1 + src/scss/partials/_mediaViewer.scss | 15 +++ src/scss/style.scss | 99 +++++++++++-------- 14 files changed, 278 insertions(+), 149 deletions(-) diff --git a/src/components/misc.ts b/src/components/misc.ts index f5da47f2..1851856b 100644 --- a/src/components/misc.ts +++ b/src/components/misc.ts @@ -7,6 +7,7 @@ import appStickersManager from "../lib/appManagers/appStickersManager"; import appDocsManager from "../lib/appManagers/appDocsManager"; import {AppImManager} from "../lib/appManagers/appImManager"; import {AppMediaViewer} from '../lib/appManagers/appMediaViewer'; +import { RichTextProcessor } from "../lib/richtextprocessor"; export type MTDocument = { _: 'document', @@ -24,7 +25,9 @@ export type MTDocument = { type?: string, h?: number, - w?: number + w?: number, + file_name?: string, + file?: File }; export type MTPhotoSize = { @@ -100,7 +103,7 @@ export function putPreloader(elem: Element) { } export class ProgressivePreloader { - private preloader: HTMLDivElement = null; + public preloader: HTMLDivElement = null; private circle: SVGCircleElement = null; private progress = 0; constructor(elem?: Element, private cancelable = true) { @@ -108,9 +111,11 @@ export class ProgressivePreloader { this.preloader.classList.add('preloader-container'); this.preloader.innerHTML = ` - - - `; +
+ + + +
`; if(cancelable) { this.preloader.innerHTML += ` @@ -122,15 +127,15 @@ export class ProgressivePreloader { this.preloader.classList.add('preloader-swing'); } - this.circle = this.preloader.firstElementChild.firstElementChild as SVGCircleElement; + this.circle = this.preloader.firstElementChild.firstElementChild.firstElementChild as SVGCircleElement; if(elem) { this.attach(elem); } } - public attach(elem: Element) { - if(this.cancelable) { + public attach(elem: Element, reset = true) { + if(this.cancelable && reset) { this.setProgress(0); } @@ -168,7 +173,7 @@ export class ProgressivePreloader { let totalLength = this.circle.getTotalLength(); console.log('setProgress', (percents / 100 * totalLength)); - this.circle.style.strokeDasharray = '' + (percents / 100 * totalLength); + this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * totalLength) + ', 200'; } } @@ -313,16 +318,17 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement let iconDiv = document.createElement('div'); iconDiv.classList.add('tgico-document'); - let attributeFilename: { - _: 'documentAttributeFilename', - file_name: string - } = doc.attributes.find((a: any) => a._ == "documentAttributeFilename"); - - let extSplitted = attributeFilename ? attributeFilename.file_name.split('.') : ''; + let extSplitted = doc.file_name ? doc.file_name.split('.') : ''; let ext = ''; ext = extSplitted.length > 1 && Array.isArray(extSplitted) ? extSplitted.pop().toLowerCase() : 'file'; + + let ext2 = ext; + if(doc.type == 'photo') { + docDiv.classList.add('photo'); + ext2 = ``; + } - let fileName = attributeFilename ? attributeFilename.file_name : 'Unknown.file'; + let fileName = doc.file_name || 'Unknown.file'; let size = formatBytes(doc.size); if(withTime) { @@ -334,7 +340,7 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement } docDiv.innerHTML = ` -
${ext}
+
${ext2}
${fileName}
${size}
`; @@ -347,18 +353,84 @@ export function scrollable(el: HTMLDivElement, x = false, y = true) { container.classList.add('scrollable'); if(x) container.classList.add('scrollable-x'); if(y) container.classList.add('scrollable-y'); + + let type = x ? 'width' : 'height'; + let side = x ? 'left' : 'top'; + let scrollType = x ? 'scrollWidth' : 'scrollHeight'; + let scrollSide = x ? 'scrollLeft' : 'scrollTop'; container.addEventListener('mouseover', () => { - container.classList.add('active'); + resize(); + /* container.classList.add('active'); container.addEventListener('mouseout', () => { container.classList.remove('active'); - }, {once: true}); + }, {once: true}); */ + }); + + let thumb = document.createElement('div'); + thumb.className = 'scrollbar-thumb'; + + // @ts-ignore + thumb.style[type] = '30px'; + + let resize = () => { + // @ts-ignore + scrollHeight = container[scrollType]; + + let rect = container.getBoundingClientRect(); + + // @ts-ignore + height = rect[type]; + + if(!height || height == scrollHeight) { + thumbHeight = 0; + + // @ts-ignore + thumb.style[type] = thumbHeight + 'px'; + return; + } + //if(!height) return; + + let divider = scrollHeight / height / 0.5; + thumbHeight = height / divider; + + if(thumbHeight < 20) thumbHeight = 20; + + // @ts-ignore + thumb.style[type] = thumbHeight + 'px'; + + // @ts-ignore + console.log('onresize', thumb.style[type], thumbHeight, height); + }; + + let scrollHeight = -1; + let height = 0; + let thumbHeight = 0; + window.addEventListener('resize', resize); + //container.addEventListener('DOMNodeInserted', resize); + + container.addEventListener('scroll', (e) => { + // @ts-ignore + if(container[scrollType] != scrollHeight || thumbHeight == 0) { + resize(); + } + + // @ts-ignore + let value = container[scrollSide] / (scrollHeight - height) * 100; + let maxValue = 100 - (thumbHeight / height * 100); + + console.log('onscroll', container.scrollHeight, thumbHeight, height, value, maxValue); + + // @ts-ignore + thumb.style[side] = (value >= maxValue ? maxValue : value) + '%'; }); Array.from(el.children).forEach(c => container.append(c)); el.append(container);//container.append(el); + container.parentElement.append(thumb); + resize(); return container; } diff --git a/src/components/pageIm.ts b/src/components/pageIm.ts index 1d9369d1..1e9e3d10 100644 --- a/src/components/pageIm.ts +++ b/src/components/pageIm.ts @@ -176,9 +176,9 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement, let prevCategoryIndex = 1; let menu = contentEmojiDiv.nextElementSibling as HTMLUListElement; let emojiScroll = scrollable(contentEmojiDiv); - emojiScroll.onscroll = (e) => { + emojiScroll.addEventListener('scroll', (e) => { prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, emojiScroll); - }; + }); emoticonsMenuOnClick(menu, heights, emojiScroll); } @@ -342,12 +342,12 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement, let prevCategoryIndex = 0; let stickersScroll = scrollable(contentStickersDiv); - stickersScroll.onscroll = (e) => { + stickersScroll.addEventListener('scroll', (e) => { lazyLoadQueue.check(); lottieLoader.checkAnimations(); prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll); - }; + }); emoticonsMenuOnClick(menu, heights, stickersScroll); @@ -423,7 +423,7 @@ export default () => import('../lib/services').then(services => { } }; - chatsScroll.onscroll = onScroll; + chatsScroll.addEventListener('scroll', onScroll); window.addEventListener('resize', () => { setTimeout(onScroll, 0); }); diff --git a/src/lib/appManagers/appDocsManager.ts b/src/lib/appManagers/appDocsManager.ts index 20bd25b8..d84113a8 100644 --- a/src/lib/appManagers/appDocsManager.ts +++ b/src/lib/appManagers/appDocsManager.ts @@ -34,7 +34,7 @@ class AppDocsManager { apiDoc.attributes.forEach((attribute: any) => { switch(attribute._) { case 'documentAttributeFilename': - apiDoc.file_name = attribute.file_name + apiDoc.file_name = RichTextProcessor.wrapPlainText(attribute.file_name); break; case 'documentAttributeAudio': diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 57d816ee..25cfa30d 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -15,6 +15,7 @@ import lottieLoader from "../lottieLoader"; import appMediaViewer from "./appMediaViewer"; import appSidebarLeft from "./appSidebarLeft"; import appChatsManager from "./appChatsManager"; +import appMessagesIDsManager from "./appMessagesIDsManager"; console.log('appImManager included!'); @@ -352,8 +353,16 @@ export class AppImManager { let max = Math.max(...readed); let min = Math.min(...readed); + if(this.peerID < 0) { + max = appMessagesIDsManager.getMessageIDInfo(max)[0]; + min = appMessagesIDsManager.getMessageIDInfo(min)[0]; + } + //appMessagesManager.readMessages(readed); - appMessagesManager.readHistory(this.peerID, max, min); + appMessagesManager.readHistory(this.peerID, max, min).catch((err: any) => { + this.log.error('readHistory err:', err); + appMessagesManager.readHistory(this.peerID, max, min); + }); } if(this.scroll.scrollHeight - (this.scroll.scrollTop + this.scroll.offsetHeight) == 0/* <= 5 */) { @@ -422,7 +431,7 @@ export class AppImManager { public setScroll(scroll: HTMLDivElement) { this.scroll = scroll; this.scrollPosition = new ScrollPosition(this.chatInner); - this.scroll.onscroll = this.onScroll.bind(this); + this.scroll.addEventListener('scroll', this.onScroll.bind(this)); } public setPeerStatus() { @@ -759,6 +768,41 @@ export class AppImManager { let processingWebPage = false; switch(message.media._) { + case 'messageMediaPending': { + let pending = message.media; + let preloader = pending.preloader as ProgressivePreloader; + + switch(pending.type) { + case 'photo': { + if(pending.size < 1e6) { + let img = new Image(); + img.src = URL.createObjectURL(pending.file); + + attachmentDiv.append(img); + preloader.attach(attachmentDiv, false); + + break; + } + } + + case 'audio': + case 'document': { + let docDiv = wrapDocument(pending); + + let icoDiv = docDiv.querySelector('.document-ico'); + preloader.attach(icoDiv, false); + + messageDiv.classList.remove('message-empty'); + messageDiv.append(docDiv); + processingWebPage = true; + break; + } + + } + + break; + } + case 'messageMediaPhoto': { let photo = message.media.photo; this.log('messageMediaPhoto', photo); diff --git a/src/lib/appManagers/appMediaViewer.ts b/src/lib/appManagers/appMediaViewer.ts index a9ab1643..d7c21280 100644 --- a/src/lib/appManagers/appMediaViewer.ts +++ b/src/lib/appManagers/appMediaViewer.ts @@ -166,14 +166,18 @@ export class AppMediaViewer { appDialogsManager.loadDialogPhoto(this.author.avatarEl, message.fromID); this.overlaysDiv.classList.add('active'); - + + container.classList.add('loading'); + if(isVideo) { //this.preloader.attach(container); //this.preloader.setProgress(75); this.log('will wrap video'); - wrapVideo.call(this, media, container, message, false, this.preloader); + wrapVideo.call(this, media, container, message, false, this.preloader).then(() => { + container.classList.remove('loading'); + }); } else { let size = appPhotosManager.setAttachmentSize(media.id, container, appPhotosManager.windowW, appPhotosManager.windowH); @@ -195,6 +199,8 @@ export class AppMediaViewer { let image = new Image(); image.src = URL.createObjectURL(blob); container.append(image); + + container.classList.remove('loading'); container.style.width = ''; container.style.height = ''; diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts index 7776887a..31cdf3af 100644 --- a/src/lib/appManagers/appMessagesManager.ts +++ b/src/lib/appManagers/appMessagesManager.ts @@ -13,7 +13,7 @@ import AppStorage from '../storage'; import AppPeersManager from "./appPeersManager"; import ServerTimeManager from "../mtproto/serverTimeManager"; import apiFileManager, { CancellablePromise } from "../mtproto/apiFileManager"; -import { MTDocument } from "../../components/misc"; +import { MTDocument, ProgressivePreloader } from "../../components/misc"; import appDocsManager from "./appDocsManager"; type HistoryStorage = { @@ -438,11 +438,15 @@ export class AppMessagesManager { flags |= 256; } + let preloader = new ProgressivePreloader(null, true); + var media = { _: 'messageMediaPending', type: attachType, file_name: fileName || apiFileName, size: file.size, + file: file, + preloader: preloader, progress: { percent: 1, total: file.size, @@ -451,6 +455,11 @@ export class AppMessagesManager { } }; + preloader.preloader.onclick = () => { + console.log('cancelling upload', media); + media.progress.cancel(); + }; + var message: any = { _: 'message', id: messageID, @@ -592,9 +601,10 @@ export class AppMessagesManager { }); uploadPromise.notify = (progress: {done: number, total: number}) => { - // console.log('upload progress', progress) + console.log('upload progress', progress); media.progress.done = progress.done; media.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total)); + preloader.setProgress(media.progress.percent); // lol, nice $rootScope.$broadcast('history_update', {peerID: peerID}); }; @@ -604,10 +614,13 @@ export class AppMessagesManager { uploadPromise.cancel(); this.cancelPendingMessage(randomIDS); } - } + }; // @ts-ignore - uploadPromise['finally'](() => deferred.resolve()); + uploadPromise['finally'](() => { + deferred.resolve(); + preloader.detach(); + }); }); this.sendFilePromise = deferred; @@ -626,7 +639,7 @@ export class AppMessagesManager { public cancelPendingMessage(randomID: string) { var pendingData = this.pendingByRandomID[randomID]; - console.log('pending', randomID, pendingData); + console.log('cancelPendingMessage', randomID, pendingData); if(pendingData) { var peerID = pendingData[0]; @@ -656,7 +669,7 @@ export class AppMessagesManager { } public async getConversation(peerID: number) { - var foundDialog = this.getDialogByPeerID(peerID) + var foundDialog = this.getDialogByPeerID(peerID); if(foundDialog.length) { return foundDialog[0]; } @@ -675,11 +688,11 @@ export class AppMessagesManager { if(isSearch) { if(!limit || this.cachedResults.query !== query) { - this.cachedResults.query = query + this.cachedResults.query = query; var results: any = SearchIndexManager.search(query, this.dialogsIndex); - this.cachedResults.dialogs = [] + this.cachedResults.dialogs = []; this.dialogsStorage.dialogs.forEach((dialog: any) => { if(results[dialog.peerID]) { this.cachedResults.dialogs.push(dialog); @@ -701,11 +714,7 @@ export class AppMessagesManager { } } - if( - isSearch || - this.allDialogsLoaded || - curDialogStorage.dialogs.length >= offset + limit - ) { + if(isSearch || this.allDialogsLoaded || curDialogStorage.dialogs.length >= offset + limit) { return Promise.resolve({ dialogs: curDialogStorage.dialogs.slice(offset, offset + limit) }); @@ -1888,7 +1897,7 @@ export class AppMessagesManager { this.newDialogsToHandle = {}; } - public readHistory(peerID: number, maxID = 0, minID = 0) { + public readHistory(peerID: number, maxID = 0, minID = 0): Promise { // console.trace('start read') var isChannel = AppPeersManager.isChannel(peerID); var historyStorage = this.historiesStorage[peerID]; @@ -1896,7 +1905,7 @@ export class AppMessagesManager { if(!foundDialog || !foundDialog.unread_count) { if(!historyStorage || !historyStorage.history.length) { - return false; + return Promise.resolve(false); } let messageID, message; @@ -1911,12 +1920,12 @@ export class AppMessagesManager { } if(!foundUnread) { - return false; + return Promise.resolve(false); } } if(historyStorage.readPromise) { - return historyStorage.readPromise; + return historyStorage.readPromise as Promise; } var apiPromise: any; @@ -1958,7 +1967,11 @@ export class AppMessagesManager { console.warn('readPromise:', index, historyStorage.history[index != -1 ? index : 0]); foundDialog.read_inbox_max_id = historyStorage.history[index != -1 ? index : 0]; } + + return true; } + + return false; /* if(foundDialog) { // console.log('done read history', peerID) foundDialog.unread_count = 0 diff --git a/src/lib/appManagers/appSidebarLeft.ts b/src/lib/appManagers/appSidebarLeft.ts index 44e8aec3..5dea6645 100644 --- a/src/lib/appManagers/appSidebarLeft.ts +++ b/src/lib/appManagers/appSidebarLeft.ts @@ -31,7 +31,7 @@ class AppSidebarLeft { this.listsContainer = scrollable(this.searchContainer); this.searchMessagesList = document.createElement('ul'); - this.listsContainer.onscroll = this.onSidebarScroll.bind(this); + this.listsContainer.addEventListener('scroll', this.onSidebarScroll.bind(this)); this.searchContainer.append(this.listsContainer); diff --git a/src/lib/appManagers/appSidebarRight.ts b/src/lib/appManagers/appSidebarRight.ts index 13e0f979..11d38c57 100644 --- a/src/lib/appManagers/appSidebarRight.ts +++ b/src/lib/appManagers/appSidebarRight.ts @@ -117,7 +117,7 @@ class AppSidebarRight { public setScroll(scroll: HTMLDivElement) { this.sidebarScroll = scroll; - this.sidebarScroll.onscroll = this.onSidebarScroll.bind(this); + this.sidebarScroll.addEventListener('scroll', this.onSidebarScroll.bind(this)); /* this.sidebarScroll.options({ callbacks: { onScroll: this.onSidebarScroll.bind(this) diff --git a/src/lib/mtproto/apiFileManager.ts b/src/lib/mtproto/apiFileManager.ts index eabd958d..e5e0f4b0 100644 --- a/src/lib/mtproto/apiFileManager.ts +++ b/src/lib/mtproto/apiFileManager.ts @@ -52,7 +52,7 @@ export class ApiFileManager { let promise = new Promise((resolve, reject) => { // WARNING deferred! downloadPull.push({cb: cb, deferred: {resolve, reject}, activeDelta: activeDelta}); - }); + }).catch(() => {}); setTimeout(() => { this.downloadCheck(dcID); @@ -83,7 +83,9 @@ export class ApiFileManager { data.deferred.resolve(result); }, (error: any) => { - this.log.error('downloadCheck error:', error); + if(error) { + this.log.error('downloadCheck error:', error); + } this.downloadActives[dcID] -= activeDelta; this.downloadCheck(dcID); diff --git a/src/lib/services.ts b/src/lib/services.ts index b0912874..16afce0f 100644 --- a/src/lib/services.ts +++ b/src/lib/services.ts @@ -11,6 +11,7 @@ import AppProfileManager from './appManagers/appProfileManager'; import AppImManager from './appManagers/appImManager'; import AppPeersManager from './appManagers/appPeersManager'; import AppStickersManager from './appManagers/appStickersManager'; +import AppDocsManager from './appManagers/appDocsManager'; import AppSidebarRight from './appManagers/appSidebarRight'; import AppSidebarLeft from './appManagers/appSidebarLeft'; //import AppSharedMediaManager from './appManagers/appSharedMediaManager'; @@ -26,6 +27,7 @@ export const appProfileManager = AppProfileManager; export const appImManager = AppImManager; export const appPeersManager = AppPeersManager; export const appStickersManager = AppStickersManager; +export const appDocsManager = AppDocsManager; //export const appSharedMediaManager = AppSharedMediaManager; export const appSidebarRight = AppSidebarRight; export const appSidebarLeft = AppSidebarLeft; @@ -38,6 +40,7 @@ export const appSidebarLeft = AppSidebarLeft; appPeersManager, appProfileManager, appPhotosManager, + appDocsManager, appDialogsManager, appImManager, diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 0a1c56d1..c1c228b1 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -153,17 +153,13 @@ max-height: 100%; flex: 1 1 auto; /* Lets middle column shrink/grow to available width */ overflow: hidden; + position: relative; &:not(.scrolled-down) { -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px); mask-image: linear-gradient(0deg, transparent 0, #000 20px); } - /* .os-content { - display: flex; - align-items: flex-end; - } */ - .preloader { width: 100%; height: 100%; @@ -185,11 +181,6 @@ box-sizing: border-box; min-height: 100%; justify-content: flex-end; - - & > * { - display: flex; - padding: 5px 0; - } } .service { @@ -200,7 +191,6 @@ .service-msg { color: #fff; background-color: rgba(#000, 0.22); - /* font-weight: 500; */ padding: 0 8px; line-height: 24px; font-size: 15px; @@ -210,8 +200,7 @@ } .bubble { - /* max-width: 480px; */ - /* max-height: 50vh; */ + min-width: 60px; max-width: 85%; border-radius: 12px; box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.15); @@ -225,19 +214,8 @@ &.photo, &.video { width: min-content; - /* .message { - width: min-content; - max-width: min-content; - - /* .time { - max-width: min-content; - overflow: hidden; - } - } */ - .box.web { width: min-content; - /* max-width: min-content; */ max-width: 100%; } } @@ -245,6 +223,7 @@ &.webpage { .time { float: none; + width: 0; } } @@ -316,18 +295,9 @@ box-shadow: none; max-width: 300px; max-height: 300px; - /* width: 300px; // new - height: 300px; // new */ - - /* min-height: 250px; */ - - /* .attachment { - min-width: auto; - } */ .message.message-empty { display: none; - /* border-radius: 12px; */ } &:hover .message.message-empty { @@ -351,6 +321,7 @@ display: flex; // lol justify-content: center; + position: relative; img, video { width: auto; @@ -378,11 +349,6 @@ } } - /* * + .attachment { - border-top-left-radius: 0; - border-top-right-radius: 0; - } */ - .box { font-size: .95rem; margin: .25rem; @@ -400,15 +366,8 @@ margin-bottom: 5px; max-width: 100%; overflow: hidden; - /* max-width: 320px; */ - /* width: max-content; */ - - /* .quote { - // box-sizing: border-box; - } */ .preview { - /* height: 100px; */ max-height: 100%; max-width: 100%; border-radius: 4px; @@ -416,11 +375,10 @@ overflow: hidden; user-select: none; cursor: pointer; + position: relative; img, video { max-width: 100%; - /* width: auto; - height: auto; */ width: 100%; height: 100%; } @@ -466,7 +424,6 @@ .message { font-size: 1rem; - /* padding: .25rem .6rem; */ padding: 0 .6rem .2675rem .6rem; padding-top: 0; overflow: hidden; @@ -483,13 +440,13 @@ } &.message-empty { - /* display: none; */ position: absolute; bottom: .1rem; right: .1rem; border-radius: 12px; - background-color: rgba(0, 0, 0, .3); - padding: .0rem .3rem; + background-color: rgba(0, 0, 0, .4); + padding: 0 .3rem; + z-index: 2; .time { color: #fff; @@ -501,10 +458,6 @@ } } - /* &:hover .message-empty { - display: block; - } */ - .time { font-size: .8rem; user-select: none; @@ -540,7 +493,7 @@ } } - /* &.forwarded */.name { + .name { cursor: pointer; } @@ -570,7 +523,6 @@ background-repeat: no-repeat repeat; content: ''; background-size: 11px 20px; - /* background-position: -2px -2px; */ } } @@ -580,7 +532,9 @@ .in, .out { + display: flex; flex-direction: column; + padding: 5px 0; } .in { @@ -771,6 +725,8 @@ width: 1%; max-height: inherit; flex: 1 1 auto; + position: relative; + overflow: hidden; } .btn-icon { @@ -801,7 +757,7 @@ font-size: .95rem; /* height: 100%; */ max-height: 30rem; - overflow-y: auto; + overflow-y: none; resize: none; border: none; outline: none; diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 72f16cc7..4db3af61 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -13,6 +13,7 @@ #chats-container { max-height: 100%; overflow: hidden; + position: relative; } #search-container { diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index 875d0d78..58d9fabc 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -90,11 +90,26 @@ display: flex; align-items: center; justify-content: center; + + &.loading { + img, video { + object-fit: cover; + width: 100%; + height: 100%; + } + } } img, video { max-height: calc(100vh - 100px); max-width: calc(100vw - 16px); + } + + img { + object-fit: contain; + } + + video { width: 100%; height: 100%; object-fit: cover; diff --git a/src/scss/style.scss b/src/scss/style.scss index ffd129d7..3f1c1f0f 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -285,11 +285,19 @@ input { color: #fff; font-weight: 500; letter-spacing: 1px; - text-align: center; font-size: 1.1rem; - padding-top: 1.5rem; + display: flex; + justify-content: center; background-size: contain; - background-image: url('../assets/img/doc-in.svg'); + overflow: hidden; + text-overflow: ellipsis; + } + + &:not(.photo) { + .document-ico { + padding-top: 1.5rem; + background-image: url('../assets/img/doc-in.svg'); + } } .document-name { @@ -305,6 +313,11 @@ input { padding-right: 32px; line-height: 1.3; } + + .preloader-container { + width: 42px; + height: 42px; + } } .page-signUp { @@ -719,11 +732,17 @@ $width: 100px; height: 50px; /* cursor: pointer; */ + .you-spin-me-round { + width: 100%; + height: 100%; + animation: rotate 2s linear infinite; + } + .preloader-circular { + animation: none; cursor: pointer; - background-color: rgba(0, 0, 0, .5); + background-color: rgba(0, 0, 0, .7); border-radius: 50%; - animation: rotate 2s linear infinite; width: 100%; height: 100%; } @@ -731,11 +750,10 @@ $width: 100px; .preloader-path-new { stroke-dasharray: 5, 200; stroke-dashoffset: 0; - //animation: dash 1.5s ease-in-out infinite/* , color 6s ease-in-out infinite */; + transition: stroke-dasharray 400ms ease-in-out; stroke-linecap: round; stroke: white; stroke-width: 1.5; - /* transition: .1s all; */ } &.preloader-swing { @@ -1078,32 +1096,9 @@ $width: 100px; } } - - -div.scrollable-y::-webkit-scrollbar { - /* width: 4px; */ - width: 10px; -} - -/* ::-webkit-scrollbar-track { - - -} */ - -div.scrollable-y::-webkit-scrollbar-thumb { - border: 2px solid rgba(0, 0, 0, 0); - background-clip: padding-box; -} - -::-webkit-scrollbar-thumb { - opacity: 0; - transition: .2s ease-in-out; -} - -div.scrollable.active::-webkit-scrollbar-thumb { - border-radius: $border-radius; - background-color: rgba(0, 0, 0, 0.4); - opacity: 1; +div.scrollable::-webkit-scrollbar { + width: 0; + height: 0; } ::-webkit-scrollbar-button { @@ -1121,25 +1116,45 @@ div.scrollable.active::-webkit-scrollbar-thumb { overflow-y: hidden; overflow-x: hidden; max-height: 100%; + position: relative; &.scrollable-x { overflow-x: auto; - overflow-x: overlay; } &.scrollable-y { overflow-y: auto; - overflow-y: overlay; + } + + &.scrollable-x ~ .scrollbar-thumb { + top: auto; + right: auto; + width: auto; + height: 4px; + bottom: 0px; } } -div.scrollable-x::-webkit-scrollbar { - height: 4px; +.scrollbar-thumb { + position: absolute; + top: 0; + right: 2px; + width: 4px; + //margin-left: 2px; + background-color: #000; + cursor: grab; + opacity: 0; + transition-property: opacity,width,right; + transition-duration: .2s; + transition-timing-function: ease-in-out; + + border-radius: $border-radius; + z-index: 2; } -/* div.scrollable-x::-webkit-scrollbar-thumb { - border: none; -} */ +:hover > .scrollbar-thumb { + opacity: .4; +} .menu-horizontal { width: 100%; @@ -1204,6 +1219,7 @@ div.scrollable-x::-webkit-scrollbar { padding: 7.5px; max-width: 100%; overflow: hidden; + position: relative; } } } @@ -1242,10 +1258,11 @@ div.scrollable-x::-webkit-scrollbar { //display: none; width: 0%; /* grid-column: 3; */ + position: relative; transition: .2s ease-in-out; - > div { + > .scrollable { min-width: 25vw; } }