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;
}
}