r4sas
/
tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Replies beside button 

Some css fixes
master
Eduard Kuzmenko 4 years ago
parent
18debfb4a6
commit
28be24d87d
3 changed files with 118 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/chat/bubbles.ts
  2. 84
      src/components/chat/messageRender.ts
  3. 128
      src/scss/partials/_chatBubble.scss

2
src/components/chat/bubbles.ts
Unescape View File

@ -522,7 +522,7 @@ export default class ChatBubbles { @@ -522,7 +522,7 @@ export default class ChatBubbles {
return;
}
const commentsDiv: HTMLElement = findUpClassName(target, 'replies-footer');
const commentsDiv: HTMLElement = findUpClassName(target, 'replies');
if(commentsDiv) {
const mid = +bubble.dataset.mid;
const message = this.chat.getMessage(mid);

84
src/components/chat/messageRender.ts
Unescape View File

@ -69,25 +69,22 @@ export namespace MessageRender { @@ -69,25 +69,22 @@ export namespace MessageRender {
messageDiv: HTMLElement
}) => {
const isFooter = !bubble.classList.contains('sticker') && !bubble.classList.contains('emoji-big');
const repliesFooter = new RepliesFooterElement();
if(isFooter) {
repliesFooter.message = message;
repliesFooter.type = 'footer';
bubbleContainer.prepend(repliesFooter);
}
const repliesFooter = new RepliesElement();
repliesFooter.message = message;
repliesFooter.type = isFooter ? 'footer' : 'beside';
bubbleContainer.prepend(repliesFooter);
};
}
rootScope.on('replies_updated', (e) => {
const message = e.detail;
(Array.from(document.querySelectorAll(`replies-footer-element[data-post-key="${message.peerId}_${message.mid}"]`)) as RepliesFooterElement[]).forEach(element => {
(Array.from(document.querySelectorAll(`replies-footer-element[data-post-key="${message.peerId}_${message.mid}"]`)) as RepliesElement[]).forEach(element => {
element.message = message;
element.render();
});
});
class RepliesFooterElement extends HTMLElement {
class RepliesElement extends HTMLElement {
public message: Message.message;
public type: 'footer' | 'beside';
@ -95,46 +92,51 @@ class RepliesFooterElement extends HTMLElement { @@ -95,46 +92,51 @@ class RepliesFooterElement extends HTMLElement {
constructor() {
super();
this.classList.add('replies-footer');
}
connectedCallback() {
this.render();
this.dataset.postKey = this.message.peerId + '_' + this.message.mid;
this.classList.add('replies', 'replies-' + this.type);
}
public render() {
const replies = this.message.replies;
let leftHTML = '', lastStyle = '';
if(replies.recent_repliers) {
leftHTML += '<div class="replies-footer-avatars">'
/**
* MACOS, ANDROID - без реверса
* WINDOWS DESKTOP - реверс
* все приложения накладывают аватарку первую на вторую, а в макете зато вторая на первую, ЛОЛ!
*/
let l: string[] = [];
replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => {
lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`;
l.push(`<avatar-element class="avatar-32" dialog="0" peer="${appPeersManager.getPeerId(peer)}" ${lastStyle}></avatar-element>`);
});
leftHTML += l.reverse().join('') + '</div>';
} else {
leftHTML = '<span class="tgico-comments"></span>';
}
if(this.type === 'footer') {
let leftHTML = '', lastStyle = '';
if(replies.recent_repliers) {
leftHTML += '<div class="replies-footer-avatars">'
let l: string[] = [];
replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => {
lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`;
l.push(`<avatar-element class="avatar-32" dialog="0" peer="${appPeersManager.getPeerId(peer)}" ${lastStyle}></avatar-element>`);
});
leftHTML += l.reverse().join('') + '</div>';
} else {
leftHTML = '<span class="tgico-comments"></span>';
}
let text: string;
if(replies.replies) {
text = replies.replies + ' ' + (replies.replies > 1 ? 'Comments' : 'Comment');
} else {
text = 'Leave a Comment';
}
const historyStorage = appMessagesManager.getHistoryStorage(-replies.channel_id);
if(replies.read_max_id < replies.max_id && (!historyStorage.readMaxId || historyStorage.readMaxId < replies.max_id)) {
this.classList.add('is-unread');
}
this.innerHTML = `${leftHTML}<span class="replies-footer-text" ${lastStyle}>${text}</span><span class="tgico-next"></span>`;
let text: string;
if(replies.replies) {
text = replies.replies + ' ' + (replies.replies > 1 ? 'Comments' : 'Comment');
const rippleContainer = document.createElement('div');
this.append(rippleContainer);
ripple(rippleContainer);
} else {
text = 'Leave a Comment';
}
const historyStorage = appMessagesManager.getHistoryStorage(-replies.channel_id);
if(replies.read_max_id < replies.max_id && (!historyStorage.readMaxId || historyStorage.readMaxId < replies.max_id)) {
this.classList.add('is-unread');
this.classList.add('bubble-beside-button');
this.innerHTML = `<span class="tgico-commentssticker"></span><span class="replies-beside-text">${formatNumber(replies.replies, 0) || ''}</span>`;
}
if(!this.updated) {
@ -142,13 +144,7 @@ class RepliesFooterElement extends HTMLElement { @@ -142,13 +144,7 @@ class RepliesFooterElement extends HTMLElement {
appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated');
this.updated = true;
}
this.innerHTML = `${leftHTML}<span class="replies-footer-text" ${lastStyle}>${text}</span><span class="tgico-next"></span>`;
const rippleContainer = document.createElement('div');
this.append(rippleContainer);
ripple(rippleContainer);
}
}
customElements.define('replies-footer-element', RepliesFooterElement);
customElements.define('replies-element', RepliesElement);

128
src/scss/partials/_chatBubble.scss
Unescape View File

@ -334,8 +334,8 @@ $bubble-margin: .25rem; @@ -334,8 +334,8 @@ $bubble-margin: .25rem;
.forward {
svg {
width: 20px;
height: 20px;
width: 22px;
height: 22px;
}
}
@ -1221,7 +1221,7 @@ $bubble-margin: .25rem; @@ -1221,7 +1221,7 @@ $bubble-margin: .25rem;
display: flex;
align-items: center;
padding: 0 2.5px;
line-height: 20px;
line-height: 18px;
pointer-events: all; // show title
white-space: nowrap;
@ -1230,6 +1230,10 @@ $bubble-margin: .25rem; @@ -1230,6 +1230,10 @@ $bubble-margin: .25rem;
}
}
}
&.sticker .message {
bottom: 0;
}
}
.time {
@ -1416,45 +1420,7 @@ $bubble-margin: .25rem; @@ -1416,45 +1420,7 @@ $bubble-margin: .25rem;
white-space: normal; // * fix due to .message white-space prewrap
}
.replies-footer {
height: 50px;
border-top: 1px solid #dadce0;
position: relative;
display: flex;
align-items: center;
padding: 0 .5rem;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: $color-blue;
min-width: 15rem;
user-select: none;
.tgico-comments, .tgico-next {
font-size: 1.4375rem;
}
&-text {
font-weight: 500;
margin-left: 13px;
display: flex;
align-items: center;
}
&-avatars {
display: flex;
flex-direction: row-reverse;
avatar-element {
border: 2px solid #fff;
cursor: pointer;
}
}
.tgico-next {
position: absolute;
right: .5rem;
}
.replies {
.rp {
width: 100%;
height: 100%;
@ -1466,15 +1432,75 @@ $bubble-margin: .25rem; @@ -1466,15 +1432,75 @@ $bubble-margin: .25rem;
cursor: pointer;
}
&.is-unread {
.replies-footer-text {
&:after {
content: " ";
background-color: $color-blue;
width: .5rem;
height: .5rem;
margin-left: .75rem;
border-radius: 50%;
&-beside {
flex-direction: column;
width: 36px;
min-height: 36px;
height: auto;
max-height: 52px;
bottom: 47px; // * forward button + 9px margin
border-radius: 2rem;
right: -44px; // * because not 38px, as forward button
padding: 5.5px 0;
.tgico-commentssticker {
font-size: 23px;
}
&-text {
font-size: .75rem;
}
}
&-footer {
height: 50px;
border-top: 1px solid #dadce0;
position: relative;
display: flex;
align-items: center;
padding: 0 .5rem;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: $color-blue;
min-width: 15rem;
user-select: none;
.tgico-comments, .tgico-next {
font-size: 1.4375rem;
}
&-text {
font-weight: 500;
margin-left: 13px;
display: flex;
align-items: center;
}
&-avatars {
display: flex;
flex-direction: row-reverse;
avatar-element {
border: 2px solid #fff;
cursor: pointer;
}
}
.tgico-next {
position: absolute;
right: .5rem;
}
&.is-unread {
.replies-text {
&:after {
content: " ";
background-color: $color-blue;
width: .5rem;
height: .5rem;
margin-left: .75rem;
border-radius: 50%;
}
}
}
}

Write Preview
Loading…
Cancel
Save