Browse Source

CSS fixes & css contacts added

master
morethanwords 5 years ago
parent
commit
ae8e8f0008
  1. 11
      src/components/wrappers.ts
  2. 36
      src/lib/appManagers/appImManager.ts
  3. 2
      src/lib/richtextprocessor.js
  4. 177
      src/scss/partials/_chat.scss
  5. 5
      src/scss/partials/_rightSIdebar.scss
  6. 19
      src/scss/style.scss

11
src/components/wrappers.ts

@ -259,6 +259,8 @@ export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement { @@ -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 { @@ -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 { @@ -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 { @@ -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);
});

36
src/lib/appManagers/appImManager.ts

@ -1,6 +1,6 @@ @@ -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"; @@ -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 { @@ -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 { @@ -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 { @@ -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:

2
src/lib/richtextprocessor.js

@ -9,7 +9,7 @@ var EmojiHelper = { @@ -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]';

177
src/scss/partials/_chat.scss

@ -1,5 +1,9 @@ @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -998,6 +1131,10 @@ $chat-max-width: 696px;
}
}
}
.audio-subtitle, .contact-number {
color: #707579;
}
}
.is-out {
@ -1005,6 +1142,11 @@ $chat-max-width: 696px; @@ -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; @@ -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; @@ -1146,6 +1283,10 @@ $chat-max-width: 696px;
}
}
}
.audio-subtitle, .contact-number, .document-size {
color: #4FAE4E;
}
}
}

5
src/scss/partials/_rightSIdebar.scss

@ -28,7 +28,6 @@ @@ -28,7 +28,6 @@
.sidebar-header {
flex: 0 0 auto;
padding: 10px 20px 11px 15px;
}
#search-private-container {
@ -133,7 +132,7 @@ @@ -133,7 +132,7 @@
}
&-label {
color: $placeholder-color !important;
color: #707579 !important;
font-size: 14px !important;
}
@ -146,7 +145,7 @@ @@ -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 {

19
src/scss/style.scss

@ -187,7 +187,7 @@ input { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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…
Cancel
Save