diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts
index 70879213..29925c5f 100644
--- a/src/components/wrappers.ts
+++ b/src/components/wrappers.ts
@@ -155,6 +155,10 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
}
export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement {
+ if(doc.type == 'voice') {
+ return wrapAudio(doc, withTime);
+ }
+
let docDiv = document.createElement('div');
docDiv.classList.add('document');
@@ -231,6 +235,69 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
return docDiv;
}
+export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
+ let div = document.createElement('div');
+ div.classList.add('audio');
+
+ div.innerHTML = `
+
+
+
+
+
+ `;
+
+ console.log('wrapping audio', doc);
+
+ let downloadDiv = div.querySelector('.audio-download') as HTMLDivElement;
+ let preloader: ProgressivePreloader;
+ let promise: CancellablePromise;
+
+ let onClick = () => {
+ if(!promise) {
+ if(downloadDiv.classList.contains('downloading')) {
+ return; // means not ready yet
+ }
+
+ if(!preloader) {
+ preloader = new ProgressivePreloader(null, true);
+ }
+
+ let promise = appDocsManager.downloadDoc(doc.id);
+ preloader.attach(downloadDiv, true, promise);
+
+ promise.then(blob => {
+ downloadDiv.classList.remove('downloading');
+ downloadDiv.remove();
+
+ let audio = document.createElement('audio');
+ let source = document.createElement('source');
+ source.src = URL.createObjectURL(blob);
+ source.type = doc.mime_type;
+
+ div.removeEventListener('click', onClick);
+ div.querySelector('.audio-toggle').addEventListener('click', () => {
+ audio.currentTime = 0;
+ audio.play();
+ });
+
+ audio.append(source);
+ });
+
+ downloadDiv.classList.add('downloading');
+ } else {
+ downloadDiv.classList.remove('downloading');
+ promise = null;
+ }
+ };
+
+ div.addEventListener('click', onClick);
+
+ div.click();
+
+ return div;
+}
+
export function wrapPhoto(this: AppImManager, photo: any, message: any, container: HTMLDivElement) {
//container.classList.add('photo');
diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts
index 5c2b1327..a55bb396 100644
--- a/src/lib/appManagers/appDialogsManager.ts
+++ b/src/lib/appManagers/appDialogsManager.ts
@@ -7,6 +7,7 @@ import appMessagesManager from "./appMessagesManager";
import appUsersManager from "./appUsersManager";
import { RichTextProcessor } from "../richtextprocessor";
import { ripple } from "../../components/misc";
+import appSidebarLeft from "./appSidebarLeft";
type DialogDom = {
avatarDiv: HTMLDivElement,
@@ -246,6 +247,8 @@ export class AppDialogsManager {
lastMessage = appMessagesManager.getMessage(dialog.top_message);
}
+ console.log('setlastMessage:', lastMessage);
+
if(lastMessage._ == 'messageEmpty') return;
if(!dom) {
@@ -402,6 +405,20 @@ export class AppDialogsManager {
dom.unreadMessagesSpan.classList.remove('unread', 'unread-muted');
dom.unreadMessagesSpan.classList.add('tgico-pinnedchat');
}
+
+ // set archived new count
+ if(dialog.folder_id == 1) {
+ let sum = Object.keys(this.domsArchived).map(p => +p).reduce((acc: number, peerID: number) => {
+ let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
+ if(dialog) {
+ return acc + dialog.unread_count;
+ }
+
+ return acc;
+ }, 0);
+
+ appSidebarLeft.archivedCount.innerText = '' + sum;
+ }
}
public getDialogDom(peerID: number) {
diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts
index ad99bb30..22cf00de 100644
--- a/src/lib/appManagers/appImManager.ts
+++ b/src/lib/appManagers/appImManager.ts
@@ -575,6 +575,8 @@ export class AppImManager {
cancelBtn?: HTMLButtonElement
} = {};
+ private setPeerPromise: Promise = null;
+
constructor() {
this.log = logger('IM');
@@ -818,7 +820,26 @@ export class AppImManager {
return;
}
- appMediaViewer.openMedia(message, target as HTMLImageElement);
+ let ids = Object.keys(this.bubbles).map(k => +k).filter(id => {
+ let message = appMessagesManager.getMessage(id);
+
+ return message.media && (message.media.photo
+ || (message.media.document && (message.media.document.type == 'video' || message.media.document.type == 'gif'))
+ || (message.media.webpage && (message.media.webpage.document || message.media.webpage.photo)));
+ }).sort();
+ let idx = ids.findIndex(i => i == messageID);
+
+ let prev = ids[idx + 1] || null;
+ let next = ids[idx - 1] || null;
+
+ let prevTarget = this.bubbles[prev] ? this.bubbles[prev].querySelector('img, video') as HTMLElement : null;
+ let nextTarget = this.bubbles[next] ? this.bubbles[next].querySelector('img, video') as HTMLElement : null;
+
+ this.log('ids', ids, idx, this.bubbles[prev], this.bubbles[next]);
+
+ appMediaViewer.openMedia(message, target, nextTarget, prevTarget);
+
+ //appMediaViewer.openMedia(message, target as HTMLImageElement);
}
//console.log('chatInner click', e);
@@ -979,7 +1000,7 @@ export class AppImManager {
this.contextMenu.querySelector('.menu-reply').addEventListener('click', () => {
let message = appMessagesManager.getMessage(this.contextMenuMsgID);
- this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID), message.message);
+ this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID, true), message.message);
this.chatInputC.replyToMsgID = this.contextMenuMsgID;
this.chatInputC.editMsgID = 0;
});
@@ -1417,7 +1438,11 @@ export class AppImManager {
let samePeer = this.peerID == peerID;
- appMessagesManager.readHistory(this.peerID, lastMsgID); // lol
+ if(this.setPeerPromise && samePeer) return this.setPeerPromise;
+
+ if(lastMsgID) {
+ appMessagesManager.readHistory(peerID, lastMsgID); // lol
+ }
if(samePeer) {
if(!testScroll && !lastMsgID) {
@@ -1488,7 +1513,7 @@ export class AppImManager {
this.chatInner.classList.remove('is-chat');
}
- return Promise.all([
+ return this.setPeerPromise = Promise.all([
this.getHistory(forwarding ? lastMsgID + 1 : lastMsgID).then(() => {
this.log('setPeer removing preloader');
@@ -1528,8 +1553,19 @@ export class AppImManager {
}) */,
appSidebarRight.fillProfileElements()
- ]).catch(err => {
+ ]).then(() => {
+ if(this.peerID == peerID) {
+ this.setPeerPromise = null;
+ }
+
+ return true;
+ }).catch(err => {
+ if(this.peerID == peerID) {
+ this.setPeerPromise = null;
+ }
+
this.log.error('setPeer promises error:', err);
+ return false;
});
}
@@ -1591,7 +1627,7 @@ export class AppImManager {
}
public renderMessagesByIDs(msgIDs: number[]) {
- if(!this.bubbles[this.firstTopMsgID]) { // seems search active
+ if(!this.bubbles[this.firstTopMsgID] && Object.keys(this.bubbles).length) { // seems search active
this.log('seems search is active, skipping render:', msgIDs);
return;
}
diff --git a/src/lib/appManagers/appMediaViewer.ts b/src/lib/appManagers/appMediaViewer.ts
index 59e9437e..fb146905 100644
--- a/src/lib/appManagers/appMediaViewer.ts
+++ b/src/lib/appManagers/appMediaViewer.ts
@@ -209,11 +209,11 @@ export class AppMediaViewer {
if(mover.firstElementChild) {
(mover.firstElementChild as HTMLElement).style.borderRadius = borderRadius;
}
- }, delay / 2);
- if(target.tagName == 'DIV') {
- mover.classList.add('cover');
- }
+ if(target.tagName == 'DIV') {
+ mover.classList.add('cover');
+ }
+ }, delay / 2);
setTimeout(() => {
mover.innerHTML = '';
diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts
index c72172ca..4f3409c1 100644
--- a/src/lib/appManagers/appMessagesManager.ts
+++ b/src/lib/appManagers/appMessagesManager.ts
@@ -1349,7 +1349,7 @@ export class AppMessagesManager {
let wasDialogBefore = this.getDialogByPeerID(peerID)[0];
// here need to just replace, not FULL replace dialog! WARNING
- if(wasDialogBefore.pFlags.pinned) {
+ if(wasDialogBefore && wasDialogBefore.pFlags && wasDialogBefore.pFlags.pinned) {
if(!dialog.pFlags) dialog.pFlags = {};
dialog.pFlags.pinned = true;
dialog.pinnedIndex = wasDialogBefore.pinnedIndex;
diff --git a/src/lib/appManagers/appSidebarLeft.ts b/src/lib/appManagers/appSidebarLeft.ts
index 462a7e93..92935e67 100644
--- a/src/lib/appManagers/appSidebarLeft.ts
+++ b/src/lib/appManagers/appSidebarLeft.ts
@@ -3,7 +3,7 @@ import { putPreloader, formatPhoneNumber } from "../../components/misc";
import Scrollable from '../../components/scrollable';
import appMessagesManager, { AppMessagesManager } from "./appMessagesManager";
import appDialogsManager from "./appDialogsManager";
-import { isElementInViewport, numberWithCommas } from "../utils";
+import { isElementInViewport, numberWithCommas, cancelEvent } from "../utils";
import appMessagesIDsManager from "./appMessagesIDsManager";
import appImManager from "./appImManager";
import appUsersManager from "./appUsersManager";
@@ -42,12 +42,13 @@ class AppSidebarLeft {
private sidebarEl = document.querySelector('.page-chats .chats-container') as HTMLDivElement;
private searchInput = document.getElementById('global-search') as HTMLInputElement;
private toolsBtn = this.sidebarEl.querySelector('.sidebar-tools-button') as HTMLButtonElement;
+ private backBtn = this.sidebarEl.querySelector('.sidebar-back-button') as HTMLButtonElement;
private searchContainer = this.sidebarEl.querySelector('#search-container') as HTMLDivElement;
private menuEl = this.toolsBtn.querySelector('.btn-menu');
private savedBtn = this.menuEl.querySelector('.menu-saved');
private archivedBtn = this.menuEl.querySelector('.menu-archive');
- private archivedCount = this.archivedBtn.querySelector('.archived-count') as HTMLSpanElement;
+ public archivedCount = this.archivedBtn.querySelector('.archived-count') as HTMLSpanElement;
private listsContainer: HTMLDivElement = null;
@@ -120,8 +121,10 @@ class AppSidebarLeft {
this.archivedBtn.addEventListener('click', (e) => {
this.chatsArchivedContainer.classList.add('active');
- this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
- this.toolsBtn.classList.add('tgico-back');
+ this.toolsBtn.classList.remove('active');
+ this.backBtn.classList.add('active');
+ //this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
+ //this.toolsBtn.classList.add('tgico-back');
});
/* this.listsContainer.insertBefore(this.searchMessagesList, this.listsContainer.lastElementChild);
@@ -135,10 +138,11 @@ class AppSidebarLeft {
//this.searchContainer.append(this.listsContainer);
- let clickTimeout = 0;
this.searchInput.addEventListener('focus', (e) => {
- this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
- this.toolsBtn.classList.add('tgico-back');
+ /* this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
+ this.toolsBtn.classList.add('tgico-back'); */
+ this.toolsBtn.classList.remove('active');
+ this.backBtn.classList.add('active');
this.searchContainer.classList.add('active');
if(!this.searchInput.value) {
@@ -149,15 +153,17 @@ class AppSidebarLeft {
this.searchInput.addEventListener('blur', (e) => {
if(!this.searchInput.value) {
- this.toolsBtn.classList.add('tgico-menu');
- this.toolsBtn.classList.remove('tgico-back');
+ /* this.toolsBtn.classList.add('tgico-menu');
+ this.toolsBtn.classList.remove('tgico-back'); */
+ this.toolsBtn.classList.add('active');
+ this.backBtn.classList.remove('active');
this.searchContainer.classList.remove('active');
- setTimeout(() => {
+ /* setTimeout(() => {
//this.toolsBtn.click();
this.toolsBtn.classList.add('btn-menu-toggle');
- }, 200);
+ }, 200); */
}
/* this.peerID = 0;
@@ -188,24 +194,12 @@ class AppSidebarLeft {
this.searchPromise = null;
this.searchMore();
});
-
- this.toolsBtn.addEventListener('click', (e) => {
- this.log('click', this.toolsBtn.classList.contains('tgico-back'));
- if(this.toolsBtn.classList.contains('tgico-back')) {
- this.searchInput.value = '';
- this.toolsBtn.classList.add('tgico-menu', 'btn-menu-toggle');
- this.toolsBtn.classList.remove('tgico-back');
- this.searchContainer.classList.remove('active');
- this.chatsArchivedContainer.classList.remove('active');
- this.peerID = 0;
- e.stopPropagation();
- e.cancelBubble = true;
- e.preventDefault();
- return false;
- }
- return true;
- }, true);
+ this.backBtn.addEventListener('click', (e) => {
+ this.chatsArchivedContainer.classList.remove('active');
+ this.toolsBtn.classList.add('active');
+ this.backBtn.classList.remove('active');
+ });
window.addEventListener('resize', () => {
this.chatsLoadCount = Math.round(document.body.scrollHeight / 70 * 1.5);
@@ -250,10 +244,10 @@ class AppSidebarLeft {
});
}
- if(archived) {
+ /* if(archived) {
let count = result.count;
this.archivedCount.innerText = '' + count;
- }
+ } */
this.log('loaded ' + this.chatsLoadCount + ' dialogs by offset:', offset, result, this.scroll.hiddenElements);
this.scroll.onScroll();
diff --git a/src/lib/appManagers/appSidebarRight.ts b/src/lib/appManagers/appSidebarRight.ts
index c1903737..f07988f6 100644
--- a/src/lib/appManagers/appSidebarRight.ts
+++ b/src/lib/appManagers/appSidebarRight.ts
@@ -11,7 +11,7 @@ import { logger } from "../polyfill";
import appImManager from "./appImManager";
import appMediaViewer from "./appMediaViewer";
import LazyLoadQueue from "../../components/lazyLoadQueue";
-import { wrapDocument } from "../../components/wrappers";
+import { wrapDocument, wrapAudio } from "../../components/wrappers";
class AppSidebarRight {
public sidebarEl = document.querySelector('.profile-container') as HTMLDivElement;
@@ -305,7 +305,7 @@ class AppSidebarRight {
}
case 'inputMessagesFilterDocument': {
- if(!message.media.document) {
+ if(!message.media.document || message.media.document.type == 'voice') {
break;
}
@@ -322,9 +322,79 @@ class AppSidebarRight {
this.sharedMedia.contentDocuments.append(div);
break;
}
+
+ case 'inputMessagesFilterUrl': {
+ if(!message.media.webpage || message.media.webpage._ == 'webPageEmpty') {
+ break;
+ }
+
+ let webpage = message.media.webpage;
+ let div = document.createElement('div');
+
+ let previewDiv = document.createElement('div');
+ previewDiv.classList.add('preview');
+
+ this.log('wrapping webpage', webpage);
+
+ if(webpage.photo) {
+ let load = () => appPhotosManager.preloadPhoto(webpage.photo.id, appPhotosManager.choosePhotoSize(webpage.photo, 380, 0))
+ .then((blob) => {
+ if($rootScope.selectedPeerID != peerID) {
+ this.log.warn('peer changed');
+ return;
+ }
+
+ previewDiv.style.backgroundImage = 'url(' + URL.createObjectURL(blob) + ')';
+ });
+
+ this.lazyLoadQueueSidebar.push({div: previewDiv, load});
+ } else {
+ previewDiv.innerText = (webpage.title || webpage.description || webpage.url || webpage.display_url).slice(0, 1);
+ previewDiv.classList.add('empty');
+ }
+
+ let title = webpage.rTitle || '';
+ let subtitle = webpage.rDescription || '';
+ let url = RichTextProcessor.wrapRichText(webpage.url || '');
+
+ if(!title) {
+ //title = new URL(webpage.url).hostname;
+ title = webpage.display_url.split('/', 1)[0];
+ }
+
+ div.append(previewDiv);
+ div.insertAdjacentHTML('beforeend', `
+ ${title}
+ ${subtitle}
+ ${url}
+ `);
+
+ if(div.innerText.trim().length) {
+ this.sharedMedia.contentLinks.append(div);
+ }
+
+ break;
+ }
+
+ /* case 'inputMessagesFilterVoice': {
+ //this.log('wrapping audio', message.media);
+ if(!message.media || !message.media.document || message.media.document.type != 'voice') {
+ break;
+ }
+
+ let doc = message.media.document;
+
+ this.log('wrapping audio', doc);
+
+ let audioDiv = wrapAudio(doc);
+
+ this.sharedMedia.contentAudio.append(audioDiv);
+
+ break;
+ } */
default:
- //console.warn('death is my friend', message);
+ console.warn('death is my friend', message);
break;
}
});
diff --git a/src/lib/appManagers/appUsersManager.ts b/src/lib/appManagers/appUsersManager.ts
index 55ece52c..50b4874a 100644
--- a/src/lib/appManagers/appUsersManager.ts
+++ b/src/lib/appManagers/appUsersManager.ts
@@ -291,7 +291,7 @@ export class AppUsersManager {
public getUserInput(id: number) {
var user = this.getUser(id);
- if(user.pFlags.self) {
+ if(user.pFlags && user.pFlags.self) {
return {_: 'inputUserSelf'};
}
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 65944b7f..66b2a7b9 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -328,7 +328,8 @@ export const langPack = {
"messageActionChannelCreate": "Channel created",
"messageActionChannelEditTitle": "Channel renamed",
"messageActionChannelEditPhoto": "Channel photo updated",
- "messageActionChannelDeletePhoto": "Channel photo removed",
+ "messageActionChannelDeletePhoto": "Channel photo removed",
+ "messageActionHistoryClear": "History cleared",
"messageActionPhoneCall.in_ok": "Incoming Call",
"messageActionPhoneCall.out_ok": "Outgoing Call",
@@ -582,7 +583,7 @@ export function calcImageInBox (imageW, imageH, boxW, boxH, noZooom) {
if(imageW < boxW && imageH < boxH) {
return {w: imageW, h: imageH};
}
-
+
var boxedImageW = boxW
var boxedImageH = boxH
diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss
index 66945a66..f7dd4d68 100644
--- a/src/scss/partials/_chat.scss
+++ b/src/scss/partials/_chat.scss
@@ -52,6 +52,7 @@
background-color: #fff;
box-sizing: border-box;
user-select: none;
+ -webkit-user-select: none;
display: flex;
align-items: center;
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
@@ -171,6 +172,7 @@
opacity: 0;
transition: .2s opacity;
user-select: none;
+ -webkit-user-select: none;
&:before {
margin-left: .75px;
@@ -279,6 +281,7 @@
box-shadow: none;
line-height: 1;
user-select: none;
+ -webkit-user-select: none;
.attachment {
padding-top: .5rem;
@@ -445,6 +448,7 @@
margin-bottom: 3px;
overflow: hidden;
user-select: none;
+ -webkit-user-select: none;
cursor: pointer;
position: relative;
@@ -1236,6 +1240,7 @@
border-radius: 8px;
cursor: pointer;
user-select: none;
+ -webkit-user-select: none;
width: 44px;
height: 44px;
@@ -1282,6 +1287,7 @@
/* overflow: hidden; */
cursor: pointer;
user-select: none;
+ -webkit-user-select: none;
/* margin: 3.5px 0;
margin-right: 6.25px; */
padding: 1px 2.5px;
diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss
index d4582cbe..9bc4ba3c 100644
--- a/src/scss/partials/_leftSidebar.scss
+++ b/src/scss/partials/_leftSidebar.scss
@@ -38,6 +38,42 @@
}
}
+ .sidebar-header__btn-container {
+ position: relative;
+ width: 39.75px;
+ height: 39px;
+
+ > * {
+ visibility: hidden;
+ opacity: 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+ transition: .2s opacity;
+ z-index: 2;
+
+ &:before {
+ transition: .2s transform;
+ transform: rotate(180deg);
+ }
+
+ & + * {
+ margin-left: 0!important;
+ }
+
+ &.active {
+ margin-top: 1px;
+ opacity: 1;
+ visibility: visible;
+ color: #707579;
+
+ &:before {
+ transform: rotate(0deg);
+ }
+ }
+ }
+ }
+
.sidebar-tools-button .btn-menu {
width: 217px;
@@ -55,6 +91,10 @@
position: absolute;
right: 16px;
}
+
+ .archived-count:empty {
+ display: none;
+ }
}
.search-group {
diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss
index f1771a2b..c3530714 100644
--- a/src/scss/partials/_mediaViewer.scss
+++ b/src/scss/partials/_mediaViewer.scss
@@ -200,6 +200,9 @@
img, video {
width: 100%;
height: 100%;
+ opacity: 1;
+ transition: .2s opacity;
+ user-select: none;
}
&.cover {
@@ -209,6 +212,7 @@
width: auto;
height: auto;
overflow: hidden;
+ opacity: 0;
}
}
diff --git a/src/scss/partials/_sidebar.scss b/src/scss/partials/_sidebar.scss
index 8f6dff46..49e8021c 100644
--- a/src/scss/partials/_sidebar.scss
+++ b/src/scss/partials/_sidebar.scss
@@ -184,5 +184,60 @@
text-overflow: ellipsis;
}
}
+
+ #content-links {
+ padding: 0 15px 15px 15px;
+
+ > div {
+ display: flex;
+ flex-direction: column;
+ margin-top: 15px;
+ padding-bottom: 10px;
+ position: relative;
+ padding-left: 60px;
+ overflow: hidden;
+ //min-height: 48px;
+ min-height: 58px;
+
+ .preview {
+ height: 48px;
+ width: 48px;
+ border-radius: $border-radius;
+ overflow: hidden;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+
+ &.empty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2rem;
+ color: #fff;
+ text-transform: uppercase;
+ background-color: $blue;
+ }
+ }
+
+ .url {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+ }
+
+ #content-audio {
+ padding: 0 15px 15px 15px;
+
+ > div {
+ margin-top: 15px;
+ padding-bottom: 10px;
+ min-height: 60px;
+ }
+ }
}
}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index becac186..84e36b47 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -391,49 +391,20 @@ input {
.document {
padding-left: 4.5rem;
- display: flex;
- flex-direction: column;
height: 70px;
- justify-content: center;
- cursor: pointer;
- position: relative;
- .document-ico, .document-download {
- position: absolute;
- left: 0;
- width: 54px;
- height: 54px;
- color: #fff;
+ &-ico, &-download {
font-weight: 500;
letter-spacing: 1px;
font-size: 1.1rem;
- display: flex;
- justify-content: center;
background-size: contain;
overflow: hidden;
text-overflow: ellipsis;
}
- .document-download {
- z-index: 3;
+ &-download {
background-color: rgb(101, 161, 227);
border-radius: 8px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 24px;
- cursor: pointer;
-
- .tgico-download {
- transform: scale(1);
- transition: .2s scale;
- }
-
- &.downloading {
- .tgico-download {
- transform: scale(0);
- }
- }
}
&:not(.photo) {
@@ -449,19 +420,55 @@ input {
}
}
- .document-name {
+ &-name {
white-space: nowrap;
font-weight: 500;
line-height: 1.3;
}
- .document-size {
+ &-size {
white-space: nowrap;
color: $darkgrey;
font-size: 14px;
padding-right: 32px;
line-height: 1.3;
}
+}
+
+.document, .audio {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ cursor: pointer;
+ position: relative;
+
+ &-ico, &-download {
+ position: absolute;
+ left: 0;
+ width: 54px;
+ height: 54px;
+ color: #fff;
+ display: flex;
+ justify-content: center;
+ }
+
+ &-download {
+ z-index: 3;
+ align-items: center;
+ font-size: 24px;
+ cursor: pointer;
+
+ .tgico-download {
+ transform: scale(1);
+ transition: .2s scale;
+ }
+
+ &.downloading {
+ .tgico-download {
+ transform: scale(0);
+ }
+ }
+ }
.preloader-container {
width: 42px;
@@ -469,6 +476,24 @@ input {
}
}
+.audio {
+ position: relative;
+ padding-left: 67px;
+ min-height: 54px;
+ width: 256px;
+
+ &-toggle, &-download {
+ border-radius: 50%;
+ background-color: $blue;
+ font-size: 2.5rem;
+ align-items: center;
+ }
+
+ &-download {
+ z-index: 2;
+ }
+}
+
.page-signUp {
.auth-image {
border-radius: 50%;