From ae8e8f0008d82163d9491f0f8c9c75cb6bb40fdd Mon Sep 17 00:00:00 2001 From: morethanwords Date: Thu, 30 Apr 2020 16:43:26 +0300 Subject: [PATCH] CSS fixes & css contacts added --- src/components/wrappers.ts | 11 +- src/lib/appManagers/appImManager.ts | 36 +++++- src/lib/richtextprocessor.js | 2 +- src/scss/partials/_chat.scss | 177 ++++++++++++++++++++++++--- src/scss/partials/_rightSIdebar.scss | 5 +- src/scss/style.scss | 19 ++- 6 files changed, 217 insertions(+), 33 deletions(-) diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index 49bc194e..804378c9 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -259,6 +259,8 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement { if(withTime) { subtitle += (subtitle ? ' ยท ' : '') + formatDate(doc.date); + } else if(!subtitle) { + subtitle = 'Unknown Artist'; } div.innerHTML = ` @@ -309,8 +311,14 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement { div.removeEventListener('click', onClick); let toggle = div.querySelector('.audio-toggle') as HTMLDivElement; let subtitle = div.querySelector('.audio-subtitle') as HTMLDivElement; + let launched = false; toggle.addEventListener('click', () => { + if(!launched) { + div.classList.add('audio-show-progress'); + launched = true; + } + subtitle.innerHTML = ''; subtitle.append(progress.container); @@ -326,8 +334,6 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement { toggle.classList.remove('tgico-largeplay'); toggle.classList.add('tgico-largepause'); - - } else { audio.pause(); toggle.classList.add('tgico-largeplay'); @@ -344,7 +350,6 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement { audio.style.display = 'none'; audio.append(source); - div.classList.add('audio-show-progress'); div.append(audio); }); diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 6e602f19..ab567a28 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -1,6 +1,6 @@ //import apiManager from '../mtproto/apiManager'; import apiManager from '../mtproto/mtprotoworker'; -import { $rootScope, isElementInViewport, numberWithCommas, findUpClassName, formatNumber, placeCaretAtEnd, calcImageInBox, findUpTag, langPack } from "../utils"; +import { $rootScope, isElementInViewport, numberWithCommas, findUpClassName, formatNumber, placeCaretAtEnd, findUpTag, langPack } from "../utils"; import appUsersManager from "./appUsersManager"; import appMessagesManager from "./appMessagesManager"; import appPeersManager from "./appPeersManager"; @@ -19,7 +19,7 @@ import appMessagesIDsManager from "./appMessagesIDsManager"; import apiUpdatesManager from './apiUpdatesManager'; import { wrapDocument, wrapPhoto, wrapVideo, wrapSticker, wrapReply, MTPhotoSize } from '../../components/wrappers'; import ProgressivePreloader from '../../components/preloader'; -import { openBtnMenu, renderImageFromUrl } from '../../components/misc'; +import { openBtnMenu, renderImageFromUrl, formatPhoneNumber } from '../../components/misc'; import { ChatInput } from '../../components/chatInput'; import Scrollable from '../../components/scrollable'; import BubbleGroups from '../../components/bubbleGroups'; @@ -359,7 +359,7 @@ export class AppImManager { if(!isNaN(peerID)) { this.setPeer(peerID); } - } else if(((target.tagName == 'IMG' || target.tagName == 'image') && !target.classList.contains('emoji')) || target.tagName == 'VIDEO') { + } else if((target.tagName == 'IMG' && !target.classList.contains('emoji')) || target.tagName == 'image' || target.tagName == 'VIDEO') { let messageID = 0; for(let mid in this.bubbles) { if(this.bubbles[mid] == bubble) { @@ -384,7 +384,7 @@ export class AppImManager { let targets = ids.map(id => ({ //element: (this.bubbles[id].querySelector('img, video') || this.bubbles[id].querySelector('image')) as HTMLElement, - element: this.bubbles[id].querySelector('.attachment img, .preview img, video, .bubble__media-container') as HTMLElement, + element: this.bubbles[id].querySelector('.attachment img, .preview img, video, .bubble__media-container, .album-item') as HTMLElement, mid: id })); @@ -1680,10 +1680,38 @@ export class AppImManager { bubble.classList.remove('is-message-empty'); messageDiv.append(docDiv); + messageDiv.classList.add((doc.type || 'document') + '-message'); processingWebPage = true; break; } + + break; + } + + case 'messageMediaContact': { + this.log('wrapping contact', message); + + let contactDiv = document.createElement('div'); + contactDiv.classList.add('contact'); + messageDiv.classList.add('contact-message'); + processingWebPage = true; + + let texts = []; + if(message.media.first_name) texts.push(RichTextProcessor.wrapEmojiText(message.media.first_name)); + if(message.media.last_name) texts.push(RichTextProcessor.wrapEmojiText(message.media.last_name)); + + contactDiv.innerHTML = ` +
+
+
${texts.join(' ')}
+
${message.media.phone_number ? '+' + formatPhoneNumber(message.media.phone_number).formatted : 'Unknown phone number'}
+
`; + + bubble.classList.remove('is-message-empty'); + messageDiv.append(contactDiv); + + break; } default: diff --git a/src/lib/richtextprocessor.js b/src/lib/richtextprocessor.js index 074a1e22..6b0e845a 100644 --- a/src/lib/richtextprocessor.js +++ b/src/lib/richtextprocessor.js @@ -9,7 +9,7 @@ var EmojiHelper = { var emojiData = Config.Emoji; var emojiIconSize = emojiData.img_size; -var emojiSupported = navigator.userAgent.search(/OS X|iPhone|iPad|iOS|Android/i) != -1/* && false */, +var emojiSupported = navigator.userAgent.search(/OS X|iPhone|iPad|iOS/i) != -1/* && false */, emojiCode; //var emojiRegExp = '\\u0023\\u20E3|\\u00a9|\\u00ae|\\u203c|\\u2049|\\u2139|[\\u2194-\\u2199]|\\u21a9|\\u21aa|\\u231a|\\u231b|\\u23e9|[\\u23ea-\\u23ec]|\\u23f0|\\u24c2|\\u25aa|\\u25ab|\\u25b6|\\u2611|\\u2614|\\u26fd|\\u2705|\\u2709|[\\u2795-\\u2797]|\\u27a1|\\u27b0|\\u27bf|\\u2934|\\u2935|[\\u2b05-\\u2b07]|\\u2b1b|\\u2b1c|\\u2b50|\\u2b55|\\u3030|\\u303d|\\u3297|\\u3299|[\\uE000-\\uF8FF\\u270A-\\u2764\\u2122\\u25C0\\u25FB-\\u25FE\\u2615\\u263a\\u2648-\\u2653\\u2660-\\u2668\\u267B\\u267F\\u2693\\u261d\\u26A0-\\u26FA\\u2708\\u2702\\u2601\\u260E]|[\\u2600\\u26C4\\u26BE\\u23F3\\u2764]|\\uD83D[\\uDC00-\\uDFFF]|\\uD83C[\\uDDE8-\\uDDFA\uDDEC]\\uD83C[\\uDDEA-\\uDDFA\uDDE7]|[0-9]\\u20e3|\\uD83C[\\uDC00-\\uDFFF]'; //var emojiRegExp = '\\u00a9|\\u00ae|[\\u2000-\\u3300]|\\ud83c[\\ud000-\\udfff]|\\ud83d[\\ud000-\\udfff]|\\ud83e[\\ud000-\\udfff]'; diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index b8afdeb7..3ec9699f 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -1,5 +1,9 @@ $chat-max-width: 696px; +#bubble-contextmenu > div { + padding: 0 84px 0 16px; +} + .chat-container { display: flex; // padding: 200px; @@ -184,6 +188,12 @@ $chat-max-width: 696px; } } + &:not(.is-channel), &.is-chat { + .message { + max-width: 480px; + } + } + &.is-scrolling .is-sticky { opacity: 1; } @@ -273,6 +283,17 @@ $chat-max-width: 696px; /* font-size: 0; */ width: max-content; height: fit-content; + + > .user-avatar { + position: absolute; + left: -3rem; + width: 40px; + height: 40px; + line-height: 40px; + bottom: 0; + font-size: 1rem; + cursor: pointer; + } } &.service { @@ -723,10 +744,10 @@ $chat-max-width: 696px; line-height: 21px; word-break: break-word; - * { + /* * { overflow: hidden; text-overflow: ellipsis; - } + } */ &:last-child { //padding-top: .2675rem; @@ -738,6 +759,129 @@ $chat-max-width: 696px; } } + // all for audio (not voice) + .message.audio-message { + .audio { + justify-content: unset; + max-width: none; + + &-time { + padding-bottom: 7px; + } + + &-time, &-subtitle { + color: #4fae4e; + line-height: 1.45; + margin-top: 0; + } + + &-title { + font-weight: 500; + margin-left: -1px; + } + + &-details { + margin-top: 8px; + } + + &-ico { + font-size: 2.15rem; + } + } + + .media-progress { + /* width: calc(100% + 50px); */ + width: 191px; + margin: 9px 0 9px; + + &__filled { + background-color: #47aa41; + transform-origin: left; + height: 2px; + } + + &__seek { + height: 2px; + overflow: visible !important; + background: rgba(124, 195, 107, 0.52); + + &::-webkit-slider-thumb { + height: 12px; + width: 12px; + background: #47aa41; + } + } + } + + //&.audio-message { + min-width: 275px; + //max-width: 380px !important; + max-width: 275px !important; + padding-top: 8px !important; + padding-left: 8px !important; + + /* .audio-details * { + overflow: visible; + } */ + //} + + .tgico-largeplay:before { + content: "\e929"; + margin-right: -2px; + } + } + + .message.contact-message { + min-width: 200px; + padding-left: 8px; + + .contact { + display: flex; + padding: 2px 0; + + &-avatar { + color: #fff; + } + + &-details { + padding-left: 12px; + margin-top: 8px; + } + + &-name { + font-size: 1rem; + font-weight: 500; + } + + &-number { + font-size: 14px; + line-height: 1.4; + } + } + + .time { + width: unset; + } + } + + .message.document-message { + max-width: 325px !important; + + .time { + width: unset; + } + + .document { + padding-left: 66px; + height: 58px; + + &-name { + line-height: 1.4; + margin-top: 1px; + } + } + } + &.is-message-empty { .message { position: absolute; @@ -810,17 +954,6 @@ $chat-max-width: 696px; width: 90px; } - .user-avatar { - position: absolute; - left: -3rem; - width: 40px; - height: 40px; - line-height: 40px; - bottom: 0; - font-size: 1rem; - cursor: pointer; - } - &:not(.forwarded).hide-name, &.emoji-big { .name { display: none; @@ -998,6 +1131,10 @@ $chat-max-width: 696px; } } } + + .audio-subtitle, .contact-number { + color: #707579; + } } .is-out { @@ -1005,6 +1142,11 @@ $chat-max-width: 696px; margin-left: auto; background-color: #eeffde; border-radius: 12px 6px 6px 12px; + + > .user-avatar { + left: auto; + right: -2.5rem; + } } &.is-group-first .bubble__container { @@ -1104,11 +1246,6 @@ $chat-max-width: 696px; &.is-edited .time { width: 85px; } - - .user-avatar { - left: auto; - right: -2.5rem; - } .document-ico:after { border-top-color: #eeffde; @@ -1146,6 +1283,10 @@ $chat-max-width: 696px; } } } + + .audio-subtitle, .contact-number, .document-size { + color: #4FAE4E; + } } } diff --git a/src/scss/partials/_rightSIdebar.scss b/src/scss/partials/_rightSIdebar.scss index 8abdff62..b04dad76 100644 --- a/src/scss/partials/_rightSIdebar.scss +++ b/src/scss/partials/_rightSIdebar.scss @@ -28,7 +28,6 @@ .sidebar-header { flex: 0 0 auto; - padding: 10px 20px 11px 15px; } #search-private-container { @@ -133,7 +132,7 @@ } &-label { - color: $placeholder-color !important; + color: #707579 !important; font-size: 14px !important; } @@ -146,7 +145,7 @@ &-avatar.user-avatar { width: 120px; height: 120px; - margin: 0 auto 21px; + margin: 1px auto 21px; font-size: 4rem !important; &.tgico-avatar_deletedaccount { diff --git a/src/scss/style.scss b/src/scss/style.scss index 346b3de6..b8810142 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -187,7 +187,7 @@ input { top: 100%; margin-top: 8px; padding: 9px 0; - border-radius: $border-radius; + border-radius: $border-radius-medium; opacity: 0; transform: scale(.8); transition-property: opacity,transform,visibility; @@ -250,7 +250,7 @@ input { &:before { color: $color-gray; font-size: 1.5rem; - margin-right: 35px; + margin-right: 32px; } &.danger:before { @@ -265,7 +265,7 @@ input { height: 54px; line-height: 54px; border-radius: 50%; - background-color: $button-primary-background; + background-color: $blue; text-align: center; font-size: 1.25em; /* overflow: hidden; */ @@ -311,12 +311,16 @@ input { } } -.user-title, b, .user-last-message b { +.user-title, b/* , .user-last-message b */ { color: #000; font-weight: 500; //font-weight: normal; } +.user-last-message b { + font-weight: 400; +} + .rp { position: relative; } @@ -545,6 +549,13 @@ input { margin-top: 3px; margin-left: -1px; } + + &-title, &:not(.audio-show-progress) &-subtitle { + white-space: nowrap; + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis; + } } #auth-pages {