Browse Source

impoved search & media upload & scroll & preloaders

master
Eduard Kuzmenko 5 years ago
parent
commit
558c168a8e
  1. 106
      src/components/misc.ts
  2. 10
      src/components/pageIm.ts
  3. 2
      src/lib/appManagers/appDocsManager.ts
  4. 46
      src/lib/appManagers/appImManager.ts
  5. 8
      src/lib/appManagers/appMediaViewer.ts
  6. 47
      src/lib/appManagers/appMessagesManager.ts
  7. 2
      src/lib/appManagers/appSidebarLeft.ts
  8. 2
      src/lib/appManagers/appSidebarRight.ts
  9. 4
      src/lib/mtproto/apiFileManager.ts
  10. 3
      src/lib/services.ts
  11. 72
      src/scss/partials/_chat.scss
  12. 1
      src/scss/partials/_leftSidebar.scss
  13. 15
      src/scss/partials/_mediaViewer.scss
  14. 97
      src/scss/style.scss

106
src/components/misc.ts

@ -7,6 +7,7 @@ import appStickersManager from "../lib/appManagers/appStickersManager";
import appDocsManager from "../lib/appManagers/appDocsManager"; import appDocsManager from "../lib/appManagers/appDocsManager";
import {AppImManager} from "../lib/appManagers/appImManager"; import {AppImManager} from "../lib/appManagers/appImManager";
import {AppMediaViewer} from '../lib/appManagers/appMediaViewer'; import {AppMediaViewer} from '../lib/appManagers/appMediaViewer';
import { RichTextProcessor } from "../lib/richtextprocessor";
export type MTDocument = { export type MTDocument = {
_: 'document', _: 'document',
@ -24,7 +25,9 @@ export type MTDocument = {
type?: string, type?: string,
h?: number, h?: number,
w?: number w?: number,
file_name?: string,
file?: File
}; };
export type MTPhotoSize = { export type MTPhotoSize = {
@ -100,7 +103,7 @@ export function putPreloader(elem: Element) {
} }
export class ProgressivePreloader { export class ProgressivePreloader {
private preloader: HTMLDivElement = null; public preloader: HTMLDivElement = null;
private circle: SVGCircleElement = null; private circle: SVGCircleElement = null;
private progress = 0; private progress = 0;
constructor(elem?: Element, private cancelable = true) { constructor(elem?: Element, private cancelable = true) {
@ -108,9 +111,11 @@ export class ProgressivePreloader {
this.preloader.classList.add('preloader-container'); this.preloader.classList.add('preloader-container');
this.preloader.innerHTML = ` this.preloader.innerHTML = `
<div class="you-spin-me-round">
<svg xmlns="http://www.w3.org/2000/svg" class="preloader-circular" viewBox="25 25 50 50"> <svg xmlns="http://www.w3.org/2000/svg" class="preloader-circular" viewBox="25 25 50 50">
<circle class="preloader-path-new" cx="50" cy="50" r="23" fill="none" stroke-miterlimit="10"/> <circle class="preloader-path-new" cx="50" cy="50" r="23" fill="none" stroke-miterlimit="10"/>
</svg>`; </svg>
</div>`;
if(cancelable) { if(cancelable) {
this.preloader.innerHTML += ` this.preloader.innerHTML += `
@ -122,15 +127,15 @@ export class ProgressivePreloader {
this.preloader.classList.add('preloader-swing'); 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) { if(elem) {
this.attach(elem); this.attach(elem);
} }
} }
public attach(elem: Element) { public attach(elem: Element, reset = true) {
if(this.cancelable) { if(this.cancelable && reset) {
this.setProgress(0); this.setProgress(0);
} }
@ -168,7 +173,7 @@ export class ProgressivePreloader {
let totalLength = this.circle.getTotalLength(); let totalLength = this.circle.getTotalLength();
console.log('setProgress', (percents / 100 * totalLength)); 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'); let iconDiv = document.createElement('div');
iconDiv.classList.add('tgico-document'); iconDiv.classList.add('tgico-document');
let attributeFilename: { let extSplitted = doc.file_name ? doc.file_name.split('.') : '';
_: 'documentAttributeFilename',
file_name: string
} = doc.attributes.find((a: any) => a._ == "documentAttributeFilename");
let extSplitted = attributeFilename ? attributeFilename.file_name.split('.') : '';
let ext = ''; let ext = '';
ext = extSplitted.length > 1 && Array.isArray(extSplitted) ? extSplitted.pop().toLowerCase() : 'file'; ext = extSplitted.length > 1 && Array.isArray(extSplitted) ? extSplitted.pop().toLowerCase() : 'file';
let fileName = attributeFilename ? attributeFilename.file_name : 'Unknown.file'; let ext2 = ext;
if(doc.type == 'photo') {
docDiv.classList.add('photo');
ext2 = `<img src="${URL.createObjectURL(doc.file)}">`;
}
let fileName = doc.file_name || 'Unknown.file';
let size = formatBytes(doc.size); let size = formatBytes(doc.size);
if(withTime) { if(withTime) {
@ -334,7 +340,7 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
} }
docDiv.innerHTML = ` docDiv.innerHTML = `
<div class="document-ico ext-${ext}">${ext}</div> <div class="document-ico ext-${ext}">${ext2}</div>
<div class="document-name">${fileName}</div> <div class="document-name">${fileName}</div>
<div class="document-size">${size}</div> <div class="document-size">${size}</div>
`; `;
@ -348,17 +354,83 @@ export function scrollable(el: HTMLDivElement, x = false, y = true) {
if(x) container.classList.add('scrollable-x'); if(x) container.classList.add('scrollable-x');
if(y) container.classList.add('scrollable-y'); 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.addEventListener('mouseover', () => {
container.classList.add('active'); resize();
/* container.classList.add('active');
container.addEventListener('mouseout', () => { container.addEventListener('mouseout', () => {
container.classList.remove('active'); 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)); Array.from(el.children).forEach(c => container.append(c));
el.append(container);//container.append(el); el.append(container);//container.append(el);
container.parentElement.append(thumb);
resize();
return container; return container;
} }

10
src/components/pageIm.ts

@ -176,9 +176,9 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
let prevCategoryIndex = 1; let prevCategoryIndex = 1;
let menu = contentEmojiDiv.nextElementSibling as HTMLUListElement; let menu = contentEmojiDiv.nextElementSibling as HTMLUListElement;
let emojiScroll = scrollable(contentEmojiDiv); let emojiScroll = scrollable(contentEmojiDiv);
emojiScroll.onscroll = (e) => { emojiScroll.addEventListener('scroll', (e) => {
prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, emojiScroll); prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, emojiScroll);
}; });
emoticonsMenuOnClick(menu, heights, emojiScroll); emoticonsMenuOnClick(menu, heights, emojiScroll);
} }
@ -342,12 +342,12 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
let prevCategoryIndex = 0; let prevCategoryIndex = 0;
let stickersScroll = scrollable(contentStickersDiv); let stickersScroll = scrollable(contentStickersDiv);
stickersScroll.onscroll = (e) => { stickersScroll.addEventListener('scroll', (e) => {
lazyLoadQueue.check(); lazyLoadQueue.check();
lottieLoader.checkAnimations(); lottieLoader.checkAnimations();
prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll); prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll);
}; });
emoticonsMenuOnClick(menu, heights, 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', () => { window.addEventListener('resize', () => {
setTimeout(onScroll, 0); setTimeout(onScroll, 0);
}); });

2
src/lib/appManagers/appDocsManager.ts

@ -34,7 +34,7 @@ class AppDocsManager {
apiDoc.attributes.forEach((attribute: any) => { apiDoc.attributes.forEach((attribute: any) => {
switch(attribute._) { switch(attribute._) {
case 'documentAttributeFilename': case 'documentAttributeFilename':
apiDoc.file_name = attribute.file_name apiDoc.file_name = RichTextProcessor.wrapPlainText(attribute.file_name);
break; break;
case 'documentAttributeAudio': case 'documentAttributeAudio':

46
src/lib/appManagers/appImManager.ts

@ -15,6 +15,7 @@ import lottieLoader from "../lottieLoader";
import appMediaViewer from "./appMediaViewer"; import appMediaViewer from "./appMediaViewer";
import appSidebarLeft from "./appSidebarLeft"; import appSidebarLeft from "./appSidebarLeft";
import appChatsManager from "./appChatsManager"; import appChatsManager from "./appChatsManager";
import appMessagesIDsManager from "./appMessagesIDsManager";
console.log('appImManager included!'); console.log('appImManager included!');
@ -352,8 +353,16 @@ export class AppImManager {
let max = Math.max(...readed); let max = Math.max(...readed);
let min = Math.min(...readed); let min = Math.min(...readed);
if(this.peerID < 0) {
max = appMessagesIDsManager.getMessageIDInfo(max)[0];
min = appMessagesIDsManager.getMessageIDInfo(min)[0];
}
//appMessagesManager.readMessages(readed); //appMessagesManager.readMessages(readed);
appMessagesManager.readHistory(this.peerID, max, min).catch((err: any) => {
this.log.error('readHistory err:', err);
appMessagesManager.readHistory(this.peerID, max, min); appMessagesManager.readHistory(this.peerID, max, min);
});
} }
if(this.scroll.scrollHeight - (this.scroll.scrollTop + this.scroll.offsetHeight) == 0/* <= 5 */) { if(this.scroll.scrollHeight - (this.scroll.scrollTop + this.scroll.offsetHeight) == 0/* <= 5 */) {
@ -422,7 +431,7 @@ export class AppImManager {
public setScroll(scroll: HTMLDivElement) { public setScroll(scroll: HTMLDivElement) {
this.scroll = scroll; this.scroll = scroll;
this.scrollPosition = new ScrollPosition(this.chatInner); this.scrollPosition = new ScrollPosition(this.chatInner);
this.scroll.onscroll = this.onScroll.bind(this); this.scroll.addEventListener('scroll', this.onScroll.bind(this));
} }
public setPeerStatus() { public setPeerStatus() {
@ -759,6 +768,41 @@ export class AppImManager {
let processingWebPage = false; let processingWebPage = false;
switch(message.media._) { 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': { case 'messageMediaPhoto': {
let photo = message.media.photo; let photo = message.media.photo;
this.log('messageMediaPhoto', photo); this.log('messageMediaPhoto', photo);

8
src/lib/appManagers/appMediaViewer.ts

@ -167,13 +167,17 @@ export class AppMediaViewer {
this.overlaysDiv.classList.add('active'); this.overlaysDiv.classList.add('active');
container.classList.add('loading');
if(isVideo) { if(isVideo) {
//this.preloader.attach(container); //this.preloader.attach(container);
//this.preloader.setProgress(75); //this.preloader.setProgress(75);
this.log('will wrap video'); 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 { } else {
let size = appPhotosManager.setAttachmentSize(media.id, container, appPhotosManager.windowW, appPhotosManager.windowH); let size = appPhotosManager.setAttachmentSize(media.id, container, appPhotosManager.windowW, appPhotosManager.windowH);
@ -196,6 +200,8 @@ export class AppMediaViewer {
image.src = URL.createObjectURL(blob); image.src = URL.createObjectURL(blob);
container.append(image); container.append(image);
container.classList.remove('loading');
container.style.width = ''; container.style.width = '';
container.style.height = ''; container.style.height = '';

47
src/lib/appManagers/appMessagesManager.ts

@ -13,7 +13,7 @@ import AppStorage from '../storage';
import AppPeersManager from "./appPeersManager"; import AppPeersManager from "./appPeersManager";
import ServerTimeManager from "../mtproto/serverTimeManager"; import ServerTimeManager from "../mtproto/serverTimeManager";
import apiFileManager, { CancellablePromise } from "../mtproto/apiFileManager"; import apiFileManager, { CancellablePromise } from "../mtproto/apiFileManager";
import { MTDocument } from "../../components/misc"; import { MTDocument, ProgressivePreloader } from "../../components/misc";
import appDocsManager from "./appDocsManager"; import appDocsManager from "./appDocsManager";
type HistoryStorage = { type HistoryStorage = {
@ -438,11 +438,15 @@ export class AppMessagesManager {
flags |= 256; flags |= 256;
} }
let preloader = new ProgressivePreloader(null, true);
var media = { var media = {
_: 'messageMediaPending', _: 'messageMediaPending',
type: attachType, type: attachType,
file_name: fileName || apiFileName, file_name: fileName || apiFileName,
size: file.size, size: file.size,
file: file,
preloader: preloader,
progress: { progress: {
percent: 1, percent: 1,
total: file.size, total: file.size,
@ -451,6 +455,11 @@ export class AppMessagesManager {
} }
}; };
preloader.preloader.onclick = () => {
console.log('cancelling upload', media);
media.progress.cancel();
};
var message: any = { var message: any = {
_: 'message', _: 'message',
id: messageID, id: messageID,
@ -592,9 +601,10 @@ export class AppMessagesManager {
}); });
uploadPromise.notify = (progress: {done: number, total: number}) => { uploadPromise.notify = (progress: {done: number, total: number}) => {
// console.log('upload progress', progress) console.log('upload progress', progress);
media.progress.done = progress.done; media.progress.done = progress.done;
media.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total)); 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}); $rootScope.$broadcast('history_update', {peerID: peerID});
}; };
@ -604,10 +614,13 @@ export class AppMessagesManager {
uploadPromise.cancel(); uploadPromise.cancel();
this.cancelPendingMessage(randomIDS); this.cancelPendingMessage(randomIDS);
} }
} };
// @ts-ignore // @ts-ignore
uploadPromise['finally'](() => deferred.resolve()); uploadPromise['finally'](() => {
deferred.resolve();
preloader.detach();
});
}); });
this.sendFilePromise = deferred; this.sendFilePromise = deferred;
@ -626,7 +639,7 @@ export class AppMessagesManager {
public cancelPendingMessage(randomID: string) { public cancelPendingMessage(randomID: string) {
var pendingData = this.pendingByRandomID[randomID]; var pendingData = this.pendingByRandomID[randomID];
console.log('pending', randomID, pendingData); console.log('cancelPendingMessage', randomID, pendingData);
if(pendingData) { if(pendingData) {
var peerID = pendingData[0]; var peerID = pendingData[0];
@ -656,7 +669,7 @@ export class AppMessagesManager {
} }
public async getConversation(peerID: number) { public async getConversation(peerID: number) {
var foundDialog = this.getDialogByPeerID(peerID) var foundDialog = this.getDialogByPeerID(peerID);
if(foundDialog.length) { if(foundDialog.length) {
return foundDialog[0]; return foundDialog[0];
} }
@ -675,11 +688,11 @@ export class AppMessagesManager {
if(isSearch) { if(isSearch) {
if(!limit || this.cachedResults.query !== query) { if(!limit || this.cachedResults.query !== query) {
this.cachedResults.query = query this.cachedResults.query = query;
var results: any = SearchIndexManager.search(query, this.dialogsIndex); var results: any = SearchIndexManager.search(query, this.dialogsIndex);
this.cachedResults.dialogs = [] this.cachedResults.dialogs = [];
this.dialogsStorage.dialogs.forEach((dialog: any) => { this.dialogsStorage.dialogs.forEach((dialog: any) => {
if(results[dialog.peerID]) { if(results[dialog.peerID]) {
this.cachedResults.dialogs.push(dialog); this.cachedResults.dialogs.push(dialog);
@ -701,11 +714,7 @@ export class AppMessagesManager {
} }
} }
if( if(isSearch || this.allDialogsLoaded || curDialogStorage.dialogs.length >= offset + limit) {
isSearch ||
this.allDialogsLoaded ||
curDialogStorage.dialogs.length >= offset + limit
) {
return Promise.resolve({ return Promise.resolve({
dialogs: curDialogStorage.dialogs.slice(offset, offset + limit) dialogs: curDialogStorage.dialogs.slice(offset, offset + limit)
}); });
@ -1888,7 +1897,7 @@ export class AppMessagesManager {
this.newDialogsToHandle = {}; this.newDialogsToHandle = {};
} }
public readHistory(peerID: number, maxID = 0, minID = 0) { public readHistory(peerID: number, maxID = 0, minID = 0): Promise<boolean> {
// console.trace('start read') // console.trace('start read')
var isChannel = AppPeersManager.isChannel(peerID); var isChannel = AppPeersManager.isChannel(peerID);
var historyStorage = this.historiesStorage[peerID]; var historyStorage = this.historiesStorage[peerID];
@ -1896,7 +1905,7 @@ export class AppMessagesManager {
if(!foundDialog || !foundDialog.unread_count) { if(!foundDialog || !foundDialog.unread_count) {
if(!historyStorage || !historyStorage.history.length) { if(!historyStorage || !historyStorage.history.length) {
return false; return Promise.resolve(false);
} }
let messageID, message; let messageID, message;
@ -1911,12 +1920,12 @@ export class AppMessagesManager {
} }
if(!foundUnread) { if(!foundUnread) {
return false; return Promise.resolve(false);
} }
} }
if(historyStorage.readPromise) { if(historyStorage.readPromise) {
return historyStorage.readPromise; return historyStorage.readPromise as Promise<boolean>;
} }
var apiPromise: any; var apiPromise: any;
@ -1958,7 +1967,11 @@ export class AppMessagesManager {
console.warn('readPromise:', index, historyStorage.history[index != -1 ? index : 0]); console.warn('readPromise:', index, historyStorage.history[index != -1 ? index : 0]);
foundDialog.read_inbox_max_id = historyStorage.history[index != -1 ? index : 0]; foundDialog.read_inbox_max_id = historyStorage.history[index != -1 ? index : 0];
} }
return true;
} }
return false;
/* if(foundDialog) { /* if(foundDialog) {
// console.log('done read history', peerID) // console.log('done read history', peerID)
foundDialog.unread_count = 0 foundDialog.unread_count = 0

2
src/lib/appManagers/appSidebarLeft.ts

@ -31,7 +31,7 @@ class AppSidebarLeft {
this.listsContainer = scrollable(this.searchContainer); this.listsContainer = scrollable(this.searchContainer);
this.searchMessagesList = document.createElement('ul'); 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); this.searchContainer.append(this.listsContainer);

2
src/lib/appManagers/appSidebarRight.ts

@ -117,7 +117,7 @@ class AppSidebarRight {
public setScroll(scroll: HTMLDivElement) { public setScroll(scroll: HTMLDivElement) {
this.sidebarScroll = scroll; this.sidebarScroll = scroll;
this.sidebarScroll.onscroll = this.onSidebarScroll.bind(this); this.sidebarScroll.addEventListener('scroll', this.onSidebarScroll.bind(this));
/* this.sidebarScroll.options({ /* this.sidebarScroll.options({
callbacks: { callbacks: {
onScroll: this.onSidebarScroll.bind(this) onScroll: this.onSidebarScroll.bind(this)

4
src/lib/mtproto/apiFileManager.ts

@ -52,7 +52,7 @@ export class ApiFileManager {
let promise = new Promise((resolve, reject) => { let promise = new Promise((resolve, reject) => {
// WARNING deferred! // WARNING deferred!
downloadPull.push({cb: cb, deferred: {resolve, reject}, activeDelta: activeDelta}); downloadPull.push({cb: cb, deferred: {resolve, reject}, activeDelta: activeDelta});
}); }).catch(() => {});
setTimeout(() => { setTimeout(() => {
this.downloadCheck(dcID); this.downloadCheck(dcID);
@ -83,7 +83,9 @@ export class ApiFileManager {
data.deferred.resolve(result); data.deferred.resolve(result);
}, (error: any) => { }, (error: any) => {
if(error) {
this.log.error('downloadCheck error:', error); this.log.error('downloadCheck error:', error);
}
this.downloadActives[dcID] -= activeDelta; this.downloadActives[dcID] -= activeDelta;
this.downloadCheck(dcID); this.downloadCheck(dcID);

3
src/lib/services.ts

@ -11,6 +11,7 @@ import AppProfileManager from './appManagers/appProfileManager';
import AppImManager from './appManagers/appImManager'; import AppImManager from './appManagers/appImManager';
import AppPeersManager from './appManagers/appPeersManager'; import AppPeersManager from './appManagers/appPeersManager';
import AppStickersManager from './appManagers/appStickersManager'; import AppStickersManager from './appManagers/appStickersManager';
import AppDocsManager from './appManagers/appDocsManager';
import AppSidebarRight from './appManagers/appSidebarRight'; import AppSidebarRight from './appManagers/appSidebarRight';
import AppSidebarLeft from './appManagers/appSidebarLeft'; import AppSidebarLeft from './appManagers/appSidebarLeft';
//import AppSharedMediaManager from './appManagers/appSharedMediaManager'; //import AppSharedMediaManager from './appManagers/appSharedMediaManager';
@ -26,6 +27,7 @@ export const appProfileManager = AppProfileManager;
export const appImManager = AppImManager; export const appImManager = AppImManager;
export const appPeersManager = AppPeersManager; export const appPeersManager = AppPeersManager;
export const appStickersManager = AppStickersManager; export const appStickersManager = AppStickersManager;
export const appDocsManager = AppDocsManager;
//export const appSharedMediaManager = AppSharedMediaManager; //export const appSharedMediaManager = AppSharedMediaManager;
export const appSidebarRight = AppSidebarRight; export const appSidebarRight = AppSidebarRight;
export const appSidebarLeft = AppSidebarLeft; export const appSidebarLeft = AppSidebarLeft;
@ -38,6 +40,7 @@ export const appSidebarLeft = AppSidebarLeft;
appPeersManager, appPeersManager,
appProfileManager, appProfileManager,
appPhotosManager, appPhotosManager,
appDocsManager,
appDialogsManager, appDialogsManager,
appImManager, appImManager,

72
src/scss/partials/_chat.scss

@ -153,17 +153,13 @@
max-height: 100%; max-height: 100%;
flex: 1 1 auto; /* Lets middle column shrink/grow to available width */ flex: 1 1 auto; /* Lets middle column shrink/grow to available width */
overflow: hidden; overflow: hidden;
position: relative;
&:not(.scrolled-down) { &:not(.scrolled-down) {
-webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px); -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px);
mask-image: linear-gradient(0deg, transparent 0, #000 20px); mask-image: linear-gradient(0deg, transparent 0, #000 20px);
} }
/* .os-content {
display: flex;
align-items: flex-end;
} */
.preloader { .preloader {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -185,11 +181,6 @@
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
justify-content: flex-end; justify-content: flex-end;
& > * {
display: flex;
padding: 5px 0;
}
} }
.service { .service {
@ -200,7 +191,6 @@
.service-msg { .service-msg {
color: #fff; color: #fff;
background-color: rgba(#000, 0.22); background-color: rgba(#000, 0.22);
/* font-weight: 500; */
padding: 0 8px; padding: 0 8px;
line-height: 24px; line-height: 24px;
font-size: 15px; font-size: 15px;
@ -210,8 +200,7 @@
} }
.bubble { .bubble {
/* max-width: 480px; */ min-width: 60px;
/* max-height: 50vh; */
max-width: 85%; max-width: 85%;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.15); box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.15);
@ -225,19 +214,8 @@
&.photo, &.video { &.photo, &.video {
width: min-content; width: min-content;
/* .message {
width: min-content;
max-width: min-content;
/* .time {
max-width: min-content;
overflow: hidden;
}
} */
.box.web { .box.web {
width: min-content; width: min-content;
/* max-width: min-content; */
max-width: 100%; max-width: 100%;
} }
} }
@ -245,6 +223,7 @@
&.webpage { &.webpage {
.time { .time {
float: none; float: none;
width: 0;
} }
} }
@ -316,18 +295,9 @@
box-shadow: none; box-shadow: none;
max-width: 300px; max-width: 300px;
max-height: 300px; max-height: 300px;
/* width: 300px; // new
height: 300px; // new */
/* min-height: 250px; */
/* .attachment {
min-width: auto;
} */
.message.message-empty { .message.message-empty {
display: none; display: none;
/* border-radius: 12px; */
} }
&:hover .message.message-empty { &:hover .message.message-empty {
@ -351,6 +321,7 @@
display: flex; // lol display: flex; // lol
justify-content: center; justify-content: center;
position: relative;
img, video { img, video {
width: auto; width: auto;
@ -378,11 +349,6 @@
} }
} }
/* * + .attachment {
border-top-left-radius: 0;
border-top-right-radius: 0;
} */
.box { .box {
font-size: .95rem; font-size: .95rem;
margin: .25rem; margin: .25rem;
@ -400,15 +366,8 @@
margin-bottom: 5px; margin-bottom: 5px;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
/* max-width: 320px; */
/* width: max-content; */
/* .quote {
// box-sizing: border-box;
} */
.preview { .preview {
/* height: 100px; */
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
border-radius: 4px; border-radius: 4px;
@ -416,11 +375,10 @@
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
position: relative;
img, video { img, video {
max-width: 100%; max-width: 100%;
/* width: auto;
height: auto; */
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -466,7 +424,6 @@
.message { .message {
font-size: 1rem; font-size: 1rem;
/* padding: .25rem .6rem; */
padding: 0 .6rem .2675rem .6rem; padding: 0 .6rem .2675rem .6rem;
padding-top: 0; padding-top: 0;
overflow: hidden; overflow: hidden;
@ -483,13 +440,13 @@
} }
&.message-empty { &.message-empty {
/* display: none; */
position: absolute; position: absolute;
bottom: .1rem; bottom: .1rem;
right: .1rem; right: .1rem;
border-radius: 12px; border-radius: 12px;
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .4);
padding: .0rem .3rem; padding: 0 .3rem;
z-index: 2;
.time { .time {
color: #fff; color: #fff;
@ -501,10 +458,6 @@
} }
} }
/* &:hover .message-empty {
display: block;
} */
.time { .time {
font-size: .8rem; font-size: .8rem;
user-select: none; user-select: none;
@ -540,7 +493,7 @@
} }
} }
/* &.forwarded */.name { .name {
cursor: pointer; cursor: pointer;
} }
@ -570,7 +523,6 @@
background-repeat: no-repeat repeat; background-repeat: no-repeat repeat;
content: ''; content: '';
background-size: 11px 20px; background-size: 11px 20px;
/* background-position: -2px -2px; */
} }
} }
@ -580,7 +532,9 @@
.in, .in,
.out { .out {
display: flex;
flex-direction: column; flex-direction: column;
padding: 5px 0;
} }
.in { .in {
@ -771,6 +725,8 @@
width: 1%; width: 1%;
max-height: inherit; max-height: inherit;
flex: 1 1 auto; flex: 1 1 auto;
position: relative;
overflow: hidden;
} }
.btn-icon { .btn-icon {
@ -801,7 +757,7 @@
font-size: .95rem; font-size: .95rem;
/* height: 100%; */ /* height: 100%; */
max-height: 30rem; max-height: 30rem;
overflow-y: auto; overflow-y: none;
resize: none; resize: none;
border: none; border: none;
outline: none; outline: none;

1
src/scss/partials/_leftSidebar.scss

@ -13,6 +13,7 @@
#chats-container { #chats-container {
max-height: 100%; max-height: 100%;
overflow: hidden; overflow: hidden;
position: relative;
} }
#search-container { #search-container {

15
src/scss/partials/_mediaViewer.scss

@ -90,11 +90,26 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&.loading {
img, video {
object-fit: cover;
width: 100%;
height: 100%;
}
}
} }
img, video { img, video {
max-height: calc(100vh - 100px); max-height: calc(100vh - 100px);
max-width: calc(100vw - 16px); max-width: calc(100vw - 16px);
}
img {
object-fit: contain;
}
video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;

97
src/scss/style.scss

@ -285,12 +285,20 @@ input {
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
letter-spacing: 1px; letter-spacing: 1px;
text-align: center;
font-size: 1.1rem; font-size: 1.1rem;
padding-top: 1.5rem; display: flex;
justify-content: center;
background-size: contain; background-size: contain;
overflow: hidden;
text-overflow: ellipsis;
}
&:not(.photo) {
.document-ico {
padding-top: 1.5rem;
background-image: url('../assets/img/doc-in.svg'); background-image: url('../assets/img/doc-in.svg');
} }
}
.document-name { .document-name {
white-space: nowrap; white-space: nowrap;
@ -305,6 +313,11 @@ input {
padding-right: 32px; padding-right: 32px;
line-height: 1.3; line-height: 1.3;
} }
.preloader-container {
width: 42px;
height: 42px;
}
} }
.page-signUp { .page-signUp {
@ -719,11 +732,17 @@ $width: 100px;
height: 50px; height: 50px;
/* cursor: pointer; */ /* cursor: pointer; */
.you-spin-me-round {
width: 100%;
height: 100%;
animation: rotate 2s linear infinite;
}
.preloader-circular { .preloader-circular {
animation: none;
cursor: pointer; cursor: pointer;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .7);
border-radius: 50%; border-radius: 50%;
animation: rotate 2s linear infinite;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -731,11 +750,10 @@ $width: 100px;
.preloader-path-new { .preloader-path-new {
stroke-dasharray: 5, 200; stroke-dasharray: 5, 200;
stroke-dashoffset: 0; 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-linecap: round;
stroke: white; stroke: white;
stroke-width: 1.5; stroke-width: 1.5;
/* transition: .1s all; */
} }
&.preloader-swing { &.preloader-swing {
@ -1078,32 +1096,9 @@ $width: 100px;
} }
} }
div.scrollable::-webkit-scrollbar {
width: 0;
div.scrollable-y::-webkit-scrollbar { height: 0;
/* 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;
} }
::-webkit-scrollbar-button { ::-webkit-scrollbar-button {
@ -1121,25 +1116,45 @@ div.scrollable.active::-webkit-scrollbar-thumb {
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
max-height: 100%; max-height: 100%;
position: relative;
&.scrollable-x { &.scrollable-x {
overflow-x: auto; overflow-x: auto;
overflow-x: overlay;
} }
&.scrollable-y { &.scrollable-y {
overflow-y: auto; overflow-y: auto;
overflow-y: overlay;
}
} }
div.scrollable-x::-webkit-scrollbar { &.scrollable-x ~ .scrollbar-thumb {
top: auto;
right: auto;
width: auto;
height: 4px; height: 4px;
bottom: 0px;
}
} }
/* div.scrollable-x::-webkit-scrollbar-thumb { .scrollbar-thumb {
border: none; 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;
}
:hover > .scrollbar-thumb {
opacity: .4;
}
.menu-horizontal { .menu-horizontal {
width: 100%; width: 100%;
@ -1204,6 +1219,7 @@ div.scrollable-x::-webkit-scrollbar {
padding: 7.5px; padding: 7.5px;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
position: relative;
} }
} }
} }
@ -1242,10 +1258,11 @@ div.scrollable-x::-webkit-scrollbar {
//display: none; //display: none;
width: 0%; width: 0%;
/* grid-column: 3; */ /* grid-column: 3; */
position: relative;
transition: .2s ease-in-out; transition: .2s ease-in-out;
> div { > .scrollable {
min-width: 25vw; min-width: 25vw;
} }
} }

Loading…
Cancel
Save