From 2a3a5cdd2f26cbe647d736926cf1c4abc2bbbc66 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 15 Feb 2020 22:20:38 +0700 Subject: [PATCH] right sidebar links & half of audiomessages --- src/components/wrappers.ts | 67 +++++++++++++++++ src/lib/appManagers/appDialogsManager.ts | 17 +++++ src/lib/appManagers/appImManager.ts | 48 ++++++++++-- src/lib/appManagers/appMediaViewer.ts | 8 +- src/lib/appManagers/appMessagesManager.ts | 2 +- src/lib/appManagers/appSidebarLeft.ts | 54 ++++++-------- src/lib/appManagers/appSidebarRight.ts | 76 ++++++++++++++++++- src/lib/appManagers/appUsersManager.ts | 2 +- src/lib/utils.js | 5 +- src/scss/partials/_chat.scss | 6 ++ src/scss/partials/_leftSidebar.scss | 40 ++++++++++ src/scss/partials/_mediaViewer.scss | 4 + src/scss/partials/_sidebar.scss | 55 ++++++++++++++ src/scss/style.scss | 91 +++++++++++++++-------- 14 files changed, 395 insertions(+), 80 deletions(-) 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%;