CSS fixes & css contacts added
This commit is contained in:
morethanwords
parent
901f8cf99b
commit
ae8e8f0008
@ -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);
|
||||
});
|
||||
|
||||
|
||||
@ -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 = `
|
||||
<div class="contact-avatar user-avatar"><img src="blob:https://192.168.0.105:9000/803514b4-4a46-4125-984f-ca8f86405ef2"></div>
|
||||
<div class="contact-details">
|
||||
<div class="contact-name">${texts.join(' ')}</div>
|
||||
<div class="contact-number">${message.media.phone_number ? '+' + formatPhoneNumber(message.media.phone_number).formatted : 'Unknown phone number'}</div>
|
||||
</div>`;
|
||||
|
||||
bubble.classList.remove('is-message-empty');
|
||||
messageDiv.append(contactDiv);
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
|
||||
@ -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]';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user